

    /* ── Page Banner ──────────────────────────────────────────── */
    .rooms-banner {
        min-height: 65vh;
        position: relative;
        display: flex;
        align-items: center;
        background: url('../img/banner/10.png') center / cover no-repeat;
        overflow: hidden;
    }

    .rooms-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg,
                rgba(30, 15, 8, .90) 30%,
                rgba(30, 15, 8, .55) 65%,
                rgba(30, 15, 8, .20));
        z-index: 1;
    }

    /* subtle parallax shimmer */
    .rooms-banner::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(170deg, #3d31108f 0%, #ffffff1f 50%, #14120ea6 100% 100%);
        z-index: 1;
        animation: shimmerBanner 8s ease-in-out infinite alternate;
    }

    @keyframes shimmerBanner {
        from {
            opacity: .6;
            transform: scale(1);
        }

        to {
            opacity: 1;
            transform: scale(1.04);
        }
    }

    .rooms-banner-content {
        position: relative;
        z-index: 3;
        color: #fff;
        padding-top: 100px;
    }

    .rooms-banner-content .page-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #e8c98a;
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin-bottom: 18px;
        animation: fadeUp .8s ease both;
    }

    .rooms-banner-content .page-eyebrow::before {
        content: '';
        display: inline-block;
        width: 28px;
        height: 2px;
        background: #e8c98a;
    }

    .rooms-banner-content h1 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(2.8rem, 6vw, 5rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.1;
        margin-bottom: 18px;
        animation: fadeUp .9s .1s ease both;
    }

    .rooms-banner-content p {
        font-size: 15px;
        color: rgba(255, 255, 255, .75);
        animation: fadeUp .9s .2s ease both;
    }

    .rooms-banner-content p span {
        color: #e8c98a;
    }

    .exp-banner-wave {
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        z-index: 3;
        line-height: 0;
    }

    .exp-banner-wave path {
        fill: var(--cream-2);
    }

    /* ── Floating Stat Strip ──────────────────────────────────── */
    .rooms-stat-strip {
        background: #fff;
        box-shadow: 0 12px 50px rgba(75, 49, 40, .12);
        border-radius: 20px;
        margin-top: -48px;
        position: relative;
        z-index: 10;
        padding: 28px 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 20px;
        animation: fadeUp .9s .4s ease both;
    }

    .stat-item {
        text-align: center;
        flex: 1;
    }

    .stat-item strong {
        display: block;
        font-family: 'Arial', serif;
        font-size: 2.4rem;
        font-weight: 700;
        color: #4b3128;
        line-height: 1;
    }

    .stat-item span {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #c89b52;
        margin-top: 6px;
        display: block;
    }

    .stat-divider {
        width: 1px;
        height: 50px;
        background: rgba(75, 49, 40, .12);
    }

    /* ── Section — Rooms Intro ────────────────────────────────── */
    .rooms-intro {
        padding: 100px 0 60px;
        background: #faf8f4;
    }

    /* ── Filter Tabs ──────────────────────────────────────────── */
    .filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-bottom: 60px;
    }

    .filter-btn {
        padding: 10px 26px;
        border-radius: 50px;
        border: 1.5px solid rgba(75, 49, 40, .22);
        background: transparent;
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #4b3128;
        cursor: pointer;
        transition: all .35s cubic-bezier(.23, 1, .32, 1);
        text-transform: uppercase;
    }

    .filter-btn:hover,
    .filter-btn.active {
        background: #4b3128;
        border-color: #4b3128;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(75, 49, 40, .25);
    }

    .filter-btn.active {
        background: linear-gradient(135deg, #4b3128, #c89b52);
        border-color: transparent;
    }

    /* ── Rooms Grid ───────────────────────────────────────────── */
    .rooms-section {
        background: #faf8f4;
        padding-bottom: 110px;
    }

    .room-card-v2 {
        background: #fff;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 55px rgba(75, 49, 40, .09);
        transition: transform .45s cubic-bezier(.23, 1, .32, 1),
            box-shadow .45s cubic-bezier(.23, 1, .32, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .room-card-v2:hover {
        transform: translateY(-12px);
        box-shadow: 0 40px 90px rgba(75, 49, 40, .18);
    }

    /* Image wrapper */
    .room-img-wrap {
        position: relative;
        overflow: hidden;
        height: 280px;
        flex-shrink: 0;
    }

    .room-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s cubic-bezier(.23, 1, .32, 1);
    }

    .room-card-v2:hover .room-img-wrap img {
        transform: scale(1.08);
    }

    /* Badge */
    .room-badge {
        position: absolute;
        top: 18px;
        left: 18px;
        background: linear-gradient(135deg, #4b3128, #c89b52);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 6px 14px;
        border-radius: 50px;
        z-index: 2;
        box-shadow: 0 4px 14px rgba(75, 49, 40, .35);
    }

    /* Wishlist heart */
    .room-heart {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #c89b52;
        font-size: 16px;
        z-index: 2;
        transition: all .3s;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    }

    .room-heart:hover {
        background: #c89b52;
        color: #fff;
        transform: scale(1.12);
    }

    /* Quick-view overlay */
    .room-overlay {
        position: absolute;
        inset: 0;
        background: rgba(30, 15, 8, .55);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity .4s ease;
        z-index: 3;
    }

    .room-card-v2:hover .room-overlay {
        opacity: 1;
    }

    .room-quick-view {
        background: rgba(255, 255, 255, .95);
        color: #4b3128;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 12px 24px;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        transform: translateY(12px);
        transition: transform .4s cubic-bezier(.23, 1, .32, 1), background .3s;
    }

    .room-card-v2:hover .room-quick-view {
        transform: translateY(0);
    }

    .room-quick-view:hover {
        background: #c89b52;
        color: #fff;
    }

    /* Card Body */
    .room-body {
        padding: 28px 28px 24px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .room-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .room-category {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #c89b52;
    }

    .room-rating {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 600;
        color: #4b3128;
    }

    .room-rating i {
        color: #c89b52;
        font-size: 11px;
    }

    .room-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.65rem;
        font-weight: 700;
        color: #4b3128;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .room-desc {
        font-size: 13.5px;
        color: #776a63;
        line-height: 1.75;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .room-view-more {
        display: inline-block;
        background: none;
        border: none;
        padding: 0;
        font-size: 12.5px;
        font-weight: 700;
        color: #c89b52;
        cursor: pointer;
        margin-bottom: 16px;
        text-decoration: underline;
    }

    .room-view-more:hover {
        color: #4b3128;
    }

    /* Amenity pills */
    .room-amenities {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 22px;
    }

    .room-amenity {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11.5px;
        color: #4b3128;
        background: #faf3e8;
        border: 1px solid rgba(200, 155, 82, .3);
        border-radius: 50px;
        padding: 5px 12px;
        font-weight: 500;
        transition: background .3s, border-color .3s;
    }

    .room-amenity:hover {
        background: #c89b52;
        color: #fff;
        border-color: #c89b52;
    }

    .room-amenity i {
        font-size: 10px;
    }

    /* Specs row — rooms available + guest capacity */
    .room-specs-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px dashed rgba(75, 49, 40, .15);
    }

    .room-spec {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 700;
        color: #4b3128;
    }

    .room-spec i {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: #faf3e8;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c89b52;
        font-size: 11px;
        flex-shrink: 0;
    }

    /* Price + CTA row */
    .room-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid rgba(75, 49, 40, .08);
    }

    .room-price {
        display: flex;
        flex-direction: column;
    }

    .room-price .per-night {
        font-size: 11px;
        color: #c89b52;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .room-price .amount {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.9rem;
        font-weight: 700;
        color: #4b3128;
        line-height: 1;
    }

    .room-price .amount sup {
        font-size: 1rem;
        vertical-align: super;
    }

    .room-book-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #4b3128, #c89b52);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .5px;
        padding: 12px 22px;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: all .35s cubic-bezier(.23, 1, .32, 1);
        box-shadow: 0 6px 20px rgba(200, 155, 82, .3);
    }

    .room-book-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(200, 155, 82, .45);
        color: #fff;
        gap: 12px;
    }

    /* ── Featured Room (wide card) ────────────────────────────── */
    .featured-room {
        background: #fff;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(75, 49, 40, .12);
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        min-height: 500px;
        transition: transform .45s cubic-bezier(.23, 1, .32, 1),
            box-shadow .45s;
    }

    .featured-room:hover {
        transform: translateY(-8px);
        box-shadow: 0 50px 100px rgba(75, 49, 40, .18);
    }

    .featured-img-wrap {
        position: relative;
        overflow: hidden;
    }

    .featured-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s cubic-bezier(.23, 1, .32, 1);
    }

    .featured-room:hover .featured-img-wrap img {
        transform: scale(1.06);
    }

    .featured-badge {
        position: absolute;
        top: 24px;
        left: 24px;
        background: linear-gradient(135deg, #c89b52, #e8c98a);
        color: #2e1a10;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        padding: 8px 18px;
        border-radius: 50px;
        box-shadow: 0 6px 18px rgba(200, 155, 82, .45);
    }

    .featured-body {
        padding: 50px 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(160deg, #fff 60%, #fdf6ec);
    }

    .featured-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #c89b52;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .featured-eyebrow::before {
        content: '';
        display: block;
        width: 24px;
        height: 2px;
        background: #c89b52;
    }

    .featured-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(2rem, 3vw, 2.8rem);
        font-weight: 700;
        color: #4b3128;
        margin-bottom: 14px;
        line-height: 1.15;
    }

    .featured-desc {
        font-size: 14.5px;
        color: #776a63;
        line-height: 1.8;
        margin-bottom: 28px;
    }

    .featured-specs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 20px;
        margin-bottom: 32px;
    }

    .featured-spec {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: #4b3128;
        font-weight: 500;
    }

    .featured-spec i {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #faf3e8;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c89b52;
        font-size: 13px;
        flex-shrink: 0;
    }

    .featured-price-row {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .featured-price .label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #c89b52;
    }

    .featured-price .amount {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.6rem;
        font-weight: 700;
        color: #4b3128;
        line-height: 1;
    }

    .featured-price .amount sup {
        font-size: 1.2rem;
        vertical-align: super;
    }

    .featured-book-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #4b3128, #c89b52);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 16px 32px;
        border-radius: 50px;
        text-decoration: none;
        transition: all .4s cubic-bezier(.23, 1, .32, 1);
        box-shadow: 0 8px 24px rgba(200, 155, 82, .35);
        border: none;
        cursor: pointer;
    }

    .featured-book-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 45px rgba(200, 155, 82, .5);
        color: #fff;
        gap: 16px;
    }

    /* ── Amenities Highlight Banner ───────────────────────────── */
    .amenities-banner {
        background: linear-gradient(135deg, #4b3128 0%, #2e1a10 60%, #1a0e06 100%);
        padding: 90px 0;
        position: relative;
        overflow: hidden;
    }

    .amenities-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c89b52' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        z-index: 0;
    }

    .amenities-banner .container {
        position: relative;
        z-index: 2;
    }

    .amenity-tile {
        text-align: center;
        padding: 32px 20px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(200, 155, 82, .2);
        transition: all .4s cubic-bezier(.23, 1, .32, 1);
        height: 100%;
    }

    .amenity-tile:hover {
        background: rgba(200, 155, 82, .12);
        border-color: rgba(200, 155, 82, .5);
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    }

    .amenity-tile-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #c89b52, #e8c98a);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
        font-size: 24px;
        color: #2e1a10;
        box-shadow: 0 8px 24px rgba(200, 155, 82, .4);
        transition: transform .4s cubic-bezier(.23, 1, .32, 1);
    }

    .amenity-tile:hover .amenity-tile-icon {
        transform: scale(1.12) rotate(8deg);
    }

    .amenity-tile h6 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
    }

    .amenity-tile p {
        font-size: 13px;
        color: rgba(255, 255, 255, .6);
        line-height: 1.6;
    }

    /* ── CTA Strip ────────────────────────────────────────────── */
    .rooms-cta {
        background: linear-gradient(135deg, #faf3e8, #f4ede3);
        padding: 100px 0;
        text-align: center;
    }

    .rooms-cta h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(2.2rem, 4vw, 3.2rem);
        font-weight: 700;
        color: #4b3128;
        margin-bottom: 16px;
    }

    .rooms-cta p {
        font-size: 15px;
        color: #776a63;
        max-width: 520px;
        margin: 0 auto 36px;
    }

    .cta-btn-group {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .cta-btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #4b3128, #c89b52);
        color: #fff;
        padding: 16px 36px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .5px;
        text-decoration: none;
        transition: all .4s cubic-bezier(.23, 1, .32, 1);
        box-shadow: 0 8px 28px rgba(200, 155, 82, .35);
    }

    .cta-btn-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 48px rgba(200, 155, 82, .5);
        color: #fff;
    }

    .cta-btn-ghost {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 2px solid #4b3128;
        color: #4b3128;
        padding: 14px 34px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        transition: all .4s cubic-bezier(.23, 1, .32, 1);
    }

    .cta-btn-ghost:hover {
        background: #4b3128;
        color: #fff;
        transform: translateY(-4px);
        box-shadow: 0 14px 36px rgba(75, 49, 40, .3);
    }

    /* ── Keyframes ────────────────────────────────────────────── */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(32px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Modal (Quick View) ───────────────────────────────────── */
    .room-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(20, 10, 5, .75);
        backdrop-filter: blur(6px);
        z-index: 9000;
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .room-modal-overlay.is-open {
        opacity: 1;
        pointer-events: all;
    }

    .room-modal {
        background: #fff;
        border-radius: 28px;
        /* max-width: 860px; */
        max-width: 1220px;
        width: 100%;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
        box-shadow: 0 50px 120px rgba(0, 0, 0, .4);
        transform: scale(.9) translateY(20px);
        transition: transform .4s cubic-bezier(.23, 1, .32, 1);
        max-height: 90vh;
        overflow-y: auto;
    }

    .room-modal-overlay.is-open .room-modal {
        transform: scale(1) translateY(0);
    }

    .modal-img-col {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 360px;
    }

    .modal-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 360px;
        flex: 1;
        min-height: 0;
    }

    .modal-thumbs {
        display: flex;
        gap: 8px;
        padding: 10px;
        background: #fff;
        overflow-x: auto;
    }

    .modal-thumbs:empty {
        display: none;
    }

    .modal-thumbs img {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        flex-shrink: 0;
        transition: border-color .2s, opacity .2s;
        opacity: .7;
    }

    .modal-thumbs img:hover {
        opacity: 1;
    }

    .modal-thumbs img.active {
        border-color: #c89b52;
        opacity: 1;
    }

    .modal-body {
        padding: 40px 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-y: auto;
    }

    .modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #4b3128;
        z-index: 10;
        transition: all .3s;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    }

    .modal-close:hover {
        background: #4b3128;
        color: #fff;
        transform: rotate(90deg);
    }

    /* ── Responsive ───────────────────────────────────────────── */
    @media (max-width: 1199px) {
        .featured-room {
            grid-template-columns: 1fr;
        }

        .featured-img-wrap {
            height: 360px;
        }

        .featured-body {
            padding: 40px 36px;
        }
    }

    @media (max-width: 991px) {
        .rooms-banner {
            min-height: 60vh;
        }

        .rooms-banner-content h1 {
            font-size: 3rem;
        }

        .rooms-stat-strip {
            padding: 22px 24px;
            gap: 10px;
        }

        .stat-item strong {
            font-size: 2rem;
        }

        .room-img-wrap {
            height: 240px;
        }

        .amenity-tile {
            padding: 24px 16px;
        }

        .room-modal {
            grid-template-columns: 1fr;
        }

        .modal-img {
            min-height: 240px;
        }
    }

    @media (max-width: 767px) {
        .rooms-stat-strip {
            flex-wrap: wrap;
            gap: 16px;
            border-radius: 16px;
        }

        .stat-divider {
            display: none;
        }

        .stat-item {
            flex: 0 0 calc(50% - 10px);
        }

        .featured-specs {
            grid-template-columns: 1fr;
        }

        .featured-price-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .cta-btn-group {
            flex-direction: column;
            align-items: center;
        }

        .cta-btn-primary,
        .cta-btn-ghost {
            width: 100%;
            justify-content: center;
            max-width: 320px;
        }
    }

    @media (max-width: 575px) {
        .rooms-banner-content h1 {
            font-size: 2.4rem;
        }

        .room-body {
            padding: 20px 20px 18px;
        }

        .room-footer {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }

        .room-book-btn {
            width: 100%;
            justify-content: center;
        }
    }
