/* ==========================
   SERVICES PAGE
========================== */

.services-overview{
    text-align:center;
    max-width:850px;
    margin:auto;
}

.services-overview h1{
    font-size:clamp(2.6rem,5vw,4.5rem);
    margin:1rem 0;
}

.section-intro{
    max-width:720px;
    margin:0 auto;
    font-size:1.1rem;
    line-height:1.9;
    color:#7a675b;
}


/* ==========================
   SERVICE BLOCKS
========================== */

.service-item{
    padding:5rem 0;
    border-bottom:1px solid #eadfd4;
}

.service-item:last-of-type{
    border-bottom:none;
}

.service-item h2{
    font-size:2.3rem;
    margin-bottom:2rem;
    color:#2d2018;
}

.service-item h4{
    font-size:1.15rem;
    color:#b97d5c;
    margin:2rem 0 1rem;
    text-transform:uppercase;
    letter-spacing:1px;
}

.service-item p{
    margin-bottom:1.5rem;
    color:#5d4c41;
}

.service-item strong{
    color:#2d2018;
}

.service-item ul{
    padding-left:1.3rem;
}

.service-item li{
    margin-bottom:.9rem;
    line-height:1.8;
    color:#5d4c41;
}


/* ==========================
   TRAVEL SECTION
========================== */

.travel-info{
    background:#faf6f1;
    padding:6rem 0;
    text-align:center;
    border-radius:20px;
}

.travel-info h2{
    font-size:2.5rem;
    margin:1rem 0 2rem;
}

.travel-info ul{
    max-width:700px;
    margin:0 auto;
    text-align:left;
}

.travel-info li{
    margin-bottom:1rem;
    line-height:1.8;
    color:#5d4c41;
}


/* ==========================
   EYEBROW
========================== */

.eyebrow{
    display:inline-block;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:.8rem;
    color:#b97d5c;
    font-weight:600;
}


/* ==========================
   RESPONSIVE
========================== */

@media (max-width:768px){

.service-item{
    padding:4rem 0;
}

.service-item h2{
    font-size:1.9rem;
}

.travel-info{
    padding:4rem 1.5rem;
}

.travel-info h2{
    font-size:2rem;
}

.services-overview h1{
    font-size:2.6rem;
}

.section-intro{
    font-size:1rem;
}

}

.service-banner {
    background:
        linear-gradient(rgba(24,20,18,.50), rgba(24,20,18,.50)),
        image-set(url("../assets/images/hero/fashion-hero-1082.webp") type("image/webp"), url("../assets/images/hero/fashion-hero.jpeg") type("image/jpeg"))
        center 25% / cover no-repeat;
}