@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('styles.css');

/* ============================
   About Hero
============================ */

.page-hero{
    background:linear-gradient(
        135deg,
        var(--navy),
        #445268
    );
    color:var(--white);
    padding:6rem 4vw;
}

.page-hero h2{
    color:var(--white);
    font-size:clamp(2.5rem,5vw,3.6rem);
    margin-bottom:1rem;
}

.page-hero .section-intro{
    color:rgba(255,255,255,.85);
    max-width:700px;
    font-size:1.3rem;
}

.page-hero .eyebrow{
    color:var(--gold);
}

.p{
    color: black;
}

/* ============================
   About Section
============================ */

.trip-coverage-section{
    padding:6rem 4vw;
    background:var(--off-white);
}

.trip-coverage-grid{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:4rem;
    align-items:center;
}

.trip-coverage-left h2{
    margin-bottom:1.5rem;
}

.trip-coverage-left p{
    margin-bottom:1.5rem;
    color:var(--text-dark);
    font-size:1.22rem;
    line-height:1.9;
}

.trip-coverage-media{
    background:white;
    overflow:hidden;
    border-radius:16px;
    box-shadow:var(--shadow-lg);
}

.trip-coverage-media img{
    width:100%;
    height:420px;
    object-fit:cover;
    transition:transform .4s ease;
}

.trip-coverage-media:hover img{
    transform:scale(1.04);
}

/* ============================
   Service Highlights
============================ */

.trip-coverage-list{
    list-style:none;
    margin-top:2rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.trip-coverage-list li{
    background:white;
    border-radius:10px;
    padding:1rem 1.25rem;
    border:1px solid #ececec;
    font-weight:500;
    box-shadow:var(--shadow);
}

.trip-coverage-list .highlight{
    background:var(--gold);
    color:var(--navy);
    font-weight:700;
}

/* ============================
   Responsive
============================ */

@media (max-width:1000px){

    .trip-coverage-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .trip-coverage-media{
        max-width:700px;
        margin:0 auto;
    }

    .trip-coverage-media img{
        height:350px;
    }

}

@media (max-width:700px){

    .page-hero{
        padding:5rem 1.5rem;
    }

    .page-hero h2{
        font-size:2.4rem;
    }

    .trip-coverage-section{
        padding:4rem 1.5rem;
    }

    .trip-coverage-media img{
        height:250px;
    }

    .trip-coverage-left p{
        font-size:1.16rem;
    }

}