/* =========================================
   HOTELS HERO
========================================= */

.hotels-hero{

    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:480px;

    padding:100px 20px 70px;

    overflow:hidden;

    text-align:center;

    color:#ffffff;

    background:
        linear-gradient(
            rgba(15,15,15,.45),
            rgba(15,15,15,.65)
        ),
       url("../../images/stays/palace-hotels.webp")
       center/cover no-repeat;

}

.hotels-hero-content{

    position:relative;

    width:100%;
    max-width:760px;

    margin:0 auto;

    z-index:2;

}

.hotels-eyebrow{

    display:block;

    margin-bottom:16px;

    color:#d6ad63;

    font-size:11px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

}

.hotels-hero-content h1{

    max-width:700px;

    margin:0 auto 22px;

    color:#ffffff;

    
    font-size:52px;

    font-weight:400;

    line-height:1.15;

}

.hotels-hero-content p{

    max-width:620px;

    margin:0 auto;

    color:rgba(255,255,255,.90);

    font-size:16px;

    line-height:1.8;

}


/* =========================================
   HOTELS HERO RESPONSIVE
========================================= */

@media (max-width:900px){

    .hotels-hero{

        min-height:420px;

        padding:95px 20px 60px;

    }

    .hotels-hero-content h1{

        font-size:44px;

    }

}

@media (max-width:650px){

    .hotels-hero{

        min-height:320px;

        padding:85px 20px 45px;

    }

    .hotels-eyebrow{

        font-size:10px;

        letter-spacing:3px;

    }

    .hotels-hero-content h1{

        font-size:36px;

        max-width:340px;

    }

    .hotels-hero-content p{

        max-width:320px;

        font-size:15px;

        line-height:1.75;

    }

}

@media (max-width:480px){

    .hotels-hero{

        min-height:300px;

    }

    .hotels-hero-content h1{

        font-size:32px;

    }

    .hotels-hero-content p{

        font-size:14px;

    }

}
/* =========================================
   HOTELS INTRO
========================================= */

.hotels-intro{

    padding:90px 5% 80px;

    background:#ffffff;

    text-align:center;

}

.hotels-container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

}

.hotels-intro .hotels-container{

    max-width:820px;

}

.hotels-section-label{

    display:block;

    margin-bottom:16px;

    color:#b68b42;

    font-size:11px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.hotels-intro h2{

    margin-bottom:22px;

    color:#222222;

    
    font-size:44px;

    line-height:1.25;

    font-weight:400;

}

.hotels-intro p{

    max-width:720px;

    margin:0 auto;

    color:#666666;

    font-size:15px;

    line-height:1.9;

}


/* =========================================
   HOTELS INTRO RESPONSIVE
========================================= */

@media (max-width:900px){

    .hotels-intro{

        padding:75px 20px 65px;

    }

    .hotels-intro h2{

        font-size:38px;

    }

}

@media (max-width:650px){

    .hotels-intro h2{

        font-size:32px;

    }

    .hotels-intro p{

        font-size:14px;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .hotels-intro{

        padding:65px 20px 55px;

    }

    .hotels-intro h2{

        font-size:28px;

    }

}
/* =========================================
   HOTEL STAY CATEGORIES
========================================= */

.hotels-stays{

    padding:90px 5%;

    background:#f7f5f1;

}

.hotel-feature{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    align-items:center;

    gap:60px;

    margin-bottom:90px;

}

.hotel-feature:last-child{

    margin-bottom:0;

}

.hotel-feature-reverse .hotel-feature-image{

    order:2;

}

.hotel-feature-reverse .hotel-feature-content{

    order:1;

}

.hotel-feature-image{

    overflow:hidden;

    border-radius:14px;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

}

.hotel-feature-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    transition:transform .45s ease;

}

.hotel-feature:hover .hotel-feature-image img{

    transform:scale(1.05);

}

.hotel-feature-content span{

    display:block;

    margin-bottom:14px;

    color:#b68b42;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.hotel-feature-content h2{

    margin-bottom:22px;

    color:#222222;

    
    font-size:42px;

    font-weight:400;

    line-height:1.25;

}

.hotel-feature-content p{

    color:#666666;

    font-size:15px;

    line-height:1.9;

}


/* =========================================
   HOTEL STAY RESPONSIVE
========================================= */

@media (max-width:900px){

    .hotel-feature{

        grid-template-columns:1fr;

        gap:35px;

        margin-bottom:70px;

    }

    .hotel-feature-reverse .hotel-feature-image,

    .hotel-feature-reverse .hotel-feature-content{

        order:initial;

    }

    .hotel-feature-image img{

        height:380px;

    }

    .hotel-feature-content h2{

        font-size:36px;

    }

}

@media (max-width:650px){

    .hotels-stays{

        padding:70px 20px;

    }

    .hotel-feature{

        gap:25px;

        margin-bottom:55px;

    }

    .hotel-feature-image{

        border-radius:10px;

    }

    .hotel-feature-image img{

        height:250px;

    }

    .hotel-feature-content h2{

        font-size:30px;

    }

    .hotel-feature-content p{

        font-size:14px;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .hotel-feature-image img{

        height:220px;

    }

    .hotel-feature-content h2{

        font-size:27px;

    }

}
/* =========================================
   PERSONALIZED STAY
========================================= */

.hotels-personalized{

    padding:90px 5%;

    background:#ffffff;

    text-align:center;

}

.hotels-personalized-content{

    width:100%;

    max-width:820px;

    margin:0 auto;

}

.hotels-personalized-content span{

    display:block;

    margin-bottom:16px;

    color:#b68b42;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.hotels-personalized-content h2{

    margin-bottom:22px;

    color:#222222;

    
    font-size:44px;

    font-weight:400;

    line-height:1.25;

}

.hotels-personalized-content p{

    max-width:720px;

    margin:0 auto;

    color:#666666;

    font-size:15px;

    line-height:1.9;

}


/* =========================================
   PERSONALIZED STAY RESPONSIVE
========================================= */

@media (max-width:900px){

    .hotels-personalized{

        padding:75px 20px;

    }

    .hotels-personalized-content h2{

        font-size:38px;

    }

}

@media (max-width:650px){

    .hotels-personalized{

        padding:70px 20px;

    }

    .hotels-personalized-content span{

        font-size:10px;

        letter-spacing:2.5px;

    }

    .hotels-personalized-content h2{

        font-size:32px;

    }

    .hotels-personalized-content p{

        font-size:14px;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .hotels-personalized-content h2{

        font-size:28px;

    }

}

/* =====================================================
   9.8 PREMIUM POLISH — HOTELS
===================================================== */

.hotels-hero-content h1,
.hotels-intro h2,
.hotel-feature-content h2,
.hotels-personalized-content h2{
    text-wrap:balance;
}

.hotels-hero-content p,
.hotels-intro p,
.hotel-feature-content p,
.hotels-personalized-content p{
    text-wrap:pretty;
}

.hotel-feature{
    border:1px solid #e7dfd4;
    border-radius:8px;
    box-shadow:0 9px 28px rgba(0,0,0,.045);
}

.hotel-feature:hover{
    box-shadow:0 16px 38px rgba(0,0,0,.085);
}