/* =============================================
   service-page.css
   Shared styles for individual service pages.
   Extends styles.css — uses its :root variables.
   No animations. No complex CSS. Keep it simple.
   ============================================= */

/* ----- Page Banner (top section with title) ----- */
.page-banner {
    background-color: var(--navy);
    padding: 120px 0 60px;
    text-align: center;
}

.page-banner h1 {
    font-family: var(--font-display);
    font-size: 3rem;
    letter-spacing: .04em;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.page-banner h1 span {
    color: var(--red);
}

.page-banner p {
    font-size: 1rem;
    color: rgba(255, 255, 255, .6);
    margin: 0;
}

/* Breadcrumb inside banner */
.page-banner .breadcrumb-custom {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.page-banner .breadcrumb-custom li {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.page-banner .breadcrumb-custom a {
    color: rgba(255, 255, 255, .55);
}

.page-banner .breadcrumb-custom a:hover {
    color: var(--red);
}

.page-banner .breadcrumb-custom [aria-current="page"] {
    color: var(--gold);
}

/* ----- Content Section (image + text side by side) ----- */
.service-content {
    padding: 70px 0;
    background: var(--white);
}

.service-content.bg-light-gray {
    background: var(--off-white);
}

/* Image in a content section */
.service-content img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    object-fit: cover;
    height: 380px;
}

/* Section heading */
.service-content h2 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    letter-spacing: .04em;
    color: var(--navy);
    margin-bottom: 1rem;
    line-height: 1.15;
}

.service-content h2 span {
    color: var(--red);
}

/* Body paragraph */
.service-content p {
    font-size: .97rem;
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 1rem;
}

/* ----- Simple feature list ----- */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 1.8rem;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--navy);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li i {
    color: var(--red);
    margin-top: 3px;
    flex-shrink: 0;
}

/* ----- Call to action strip at the bottom ----- */
.cta-strip {
    background: var(--red);
    padding: 50px 0;
    text-align: center;
}

.cta-strip h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: .04em;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.cta-strip p {
    color: rgba(255, 255, 255, .75);
    font-size: .97rem;
    margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 767px) {
    .page-banner {
        padding: 100px 0 40px;
    }

    .page-banner h1 {
        font-size: 2.2rem;
    }

    .service-content img {
        height: 260px;
        margin-bottom: 1.5rem;
    }

    .service-content {
        padding: 50px 0;
    }
}