/* =========================
   HOTELS SECTION
========================= */

.hotels-section{
    padding:0px 0;
    background:#eef7fb;
}

/* TITLE */

.section-title{
    margin-bottom:45px;
}

.section-title span{
    color:#b78b2d;

    font-size:15px;
    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;
}

.section-title h2{
    font-size:42px;
    font-weight:600;

    margin-top:8px;

    color:#111;
}

/* =========================
   HOTEL CARD
========================= */

.modern-hotel-card{
    position:relative;

    border-radius:22px;

    overflow:hidden;

    height:420px;

    transition:0.35s ease;
}

.modern-hotel-card:hover{
    transform:translateY(-6px);
}

/* IMAGE */

.hotel-card-image{
    position:relative;

    width:100%;
    height:100%;
}

.hotel-card-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.45s;
}

.modern-hotel-card:hover img{
    transform:scale(1.05);
}

/* OVERLAY */

.hotel-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.92) 8%,
        rgba(0,0,0,0.45) 45%,
        rgba(0,0,0,0.08) 100%
    );
}

/* TOP */

.hotel-top{
    position:absolute;

    top:16px;
    left:16px;
    right:16px;

    z-index:5;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* RATING */

.hotel-rating-badge{
    background:rgba(255,255,255,0.18);

    backdrop-filter:blur(8px);

    color:#fff;

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;
    font-weight:600;
}

/* HEART */

.hotel-fav{
    width:38px;
    height:38px;

    background:rgba(255,255,255,0.18);

    backdrop-filter:blur(8px);

    border-radius:50%;

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

    color:#fff;

    font-size:15px;
}

/* INFO */

.hotel-info{
    position:absolute;

    left:18px;
    right:18px;
    bottom:18px;

    z-index:5;
}

/* TITLE */

.hotel-info h3{
    color:#fff;

    font-size:22px;
    font-weight:600;

    margin-bottom:8px;
}

/* LOCATION */

.hotel-location{
    color:#ddd;

    font-size:14px;

    margin-bottom:10px;
}

/* DESCRIPTION */

.hotel-desc{
    color:#d2d2d2;

    font-size:13px;

    line-height:1.6;

    margin-bottom:14px;

    display:-webkit-box;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

/* FEATURES */

.hotel-features{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:16px;
}

.hotel-features span{
    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(8px);

    color:#fff;

    padding:6px 12px;

    border-radius:40px;

    font-size:11px;
}

/* PRICE */

.hotel-price-wrap{
    display:flex;
    align-items:end;

    gap:5px;
}

.hotel-price-wrap h4{
    color:#fff;

    font-size:24px;
    font-weight:700;

    margin:0;
}

.hotel-price-wrap span{
    color:#ddd;

    font-size:13px;

    margin-bottom:3px;
}

/* LINK */

.hotel-link{
    text-decoration:none;
    display:block;
}

/* =========================
   LAPTOP
========================= */

@media(max-width:1199px){

    .section-title h2{
        font-size:38px;
    }

    .modern-hotel-card{
        height:390px;
    }

}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

    .hotels-section{
        padding:70px 0;
    }

    .section-title h2{
        font-size:34px;
    }

    .modern-hotel-card{
        height:420px;
    }

}

/* =========================
   MOBILE
========================= */

@media(max-width:576px){

    .hotels-section{
        padding:0px 0;
    }

    .section-title{
        margin-bottom:35px;
    }

    .section-title h2{
        font-size:28px;
    }

    .modern-hotel-card{
        height:400px;

        border-radius:18px;
    }

    .hotel-info h3{
        font-size:20px;
    }

    .hotel-location{
        font-size:13px;
    }

    .hotel-desc{
        font-size:12px;
    }

    .hotel-price-wrap h4{
        font-size:22px;
    }

}