@media (max-width: 992px) {

    /* 1. Force the main background to white so gaps aren't black */
    html,
    body {
        background-color: #ffffff !important;
    }

    /* 2. Remove the black gaps between divs by ensuring they have a solid white background */
    .about-section,
    .modern-pool-section,
    .bago-v3-intro,
    .bago-v3-footer {
        background-color: #ffffff !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        border: none !important;
    }

    /* 3. If you used negative margins to move things, reset them to avoid "peeking" */
    .about-section {
        margin-top: 0 !important;
    }
}
/* 1. Hide mobile elements by default (Desktop/Large Screens) */
.mobile-menu-overlay, 
.mobile-header {
    display: none !important;
}

/* 2. Show ONLY on Mobile/Tablets */
@media (max-width: 992px) {
    .mobile-header {
        display: flex !important; /* Shows the bar with logo and hamburger */
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: #fff;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* The overlay should only exist when the toggle function triggers it */
    .mobile-menu-overlay {
        /* Keep this as none or flex depending on your JavaScript toggleMenu() logic */
        display: none; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 2000;
    }
    
    /* This class is likely what your toggleMenu() function adds/removes */
    .mobile-menu-overlay.active {
        display: block !important;
    }
}
@media (max-width: 992px) {
    /* 1. Reset & Global Fixes */
    header:not(.mobile-header), 
    nav, 
    .about-sub-nav, 
    .social-icons, 
    .reserve-wrapper {
        display: none !important;
    }

    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* 2. Fixed Header Alignment */
    .mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 80px;
        background: #197b7e;
        padding: 0 20px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    }

    .logo-left img {
        width: 150px;
        height: auto;
        display: block;
    }

    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
        cursor: pointer;
    }

    .bar {
        width: 28px;
        height: 2px;
        background-color: #c5a059;
    }

    /* 3. Menu Overlay & Content */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 100%;
        height: 100%;
        background: #197b7e;
        z-index: 9999;
        transition: 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        padding: 90px 30px 40px 30px;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .mobile-menu-overlay.active {
        right: 0;
    }

    .close-menu {
        position: absolute;
        top: 20px;
        right: 25px;
        font-size: 40px;
        color: #c5a059;
        cursor: pointer;
    }

    .menu-section {
        margin-bottom: 35px;
        width: 100%;
    }

    .menu-label {
        color: #c5a059;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(197, 160, 89, 0.2);
        padding-bottom: 5px;
        display: block;
    }

    /* 4. Shared List Styling for Both Menus */
    .mob-list, .about-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .mob-list li, .about-menu-list li {
        width: 100%;
    }

    .mob-list li a, 
    .about-menu-list li a, 
    .mob-drop-btn {
        color: #ffffff;
        text-decoration: none;
        font-size: 20px;
        font-family: 'Cormorant Garamond', serif;
        display: block;
        padding: 12px 0;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* 5. Destination Dropdown with Icon Gap */
    .mob-drop-btn {
        display: flex !important;
        justify-content: space-between; /* Pushes + to the right */
        align-items: center;
    }

    .mob-drop-btn i {
        font-size: 14px;
        color: #c5a059;
        margin-right: 5px;
    }

    .mob-sub {
        display: none;
        list-style: none;
        padding-left: 20px;
        background: rgba(255, 255, 255, 0.03);
    }

    .mob-sub li a {
        font-size: 18px;
        color: rgba(255,255,255,0.7);
        border-bottom: none;
    }

    /* 6. Book Now Button */
    .mobile-book-container {
        margin-top: 15px;
        width: 100%;
    }

    .mob-book-btn {
        display: block;
        width: 100%;
        background: #c5a059;
        color: #fff;
        text-align: center;
        padding: 16px;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
}

/* Helper to hide mobile header on desktop */
@media (min-width: 993px) {
    .mobile-header { display: none !important; }
}
/* --- UPDATED LOGO SIZE SECTION --- */
@media (max-width: 992px) {
    .logo-left {
        /* Increased from 150px to 220px to allow for a larger logo */
        max-width: 220px; 
    }

    .logo-left img {
        /* This ensures the image fills the 220px container */
        width: 100%; 
        height: auto;
        display: block;
        /* Optional: adjust vertical alignment if the logo feels too close to the top */
        padding: 5px 0; 
    }

    .mobile-header {
        /* Increased height slightly to 90px to accommodate the larger logo comfortably */
        height: 90px; 
    }
}
.logo-left img {
    width: 180px;
    height: auto;
    /* This boosts the brightness and contrast slightly to make it pop */
    filter: brightness(1.1) contrast(1.1); 
}
@media (max-width: 992px) {
    /* --- LOGO CLEARNESS FIX --- */
    .logo-left img {
        width: 120px; 
        height: auto;
        display: block;

        /* 1. Remove the 'Glass' filters that cause blur on white */
        filter: none !important; 

        /* 2. Sharpen the image rendering for mobile screens */
        image-rendering: -webkit-optimize-contrast; 
        image-rendering: crisp-edges;

        /* 3. Add a very faint shadow to give it a "3D" clear look */
        filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.1)) !important;
        
        /* 4. Ensure no opacity is hiding the details */
        opacity: 1 !important;
    }

    /* --- HEADER BACKGROUND (STAYS WHITE) --- */
    .mobile-header {
        background: #ffffff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        height: 80px;
        display: flex;
        align-items: center;
        padding: 0 20px;
    }

    /* --- ICON TOGGLE (REDUCED GAP) --- */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px !important; 
        padding: 10px;
    }

    .bar {
        background-color: #197b7e !important;
        height: 2px;
        width: 28px;
        margin: 0 !important;
    }
}

@media (max-width: 992px) {
    /* 1. Reset the Container to ensure no desktop "leak" affects it */
    .book-now-container, 
    .mobile-book-container {
        display: flex !important;
        justify-content: flex-start !important; /* Align left to match menu items */
        width: 100% !important;
        margin-top: 30px !important; /* Space between the last menu item and button */
        padding: 0 !important;
    }

    /* 2. The Unique Button Styling */
    .book-now-standalone, 
    .mob-book-btn {
        /* Keep your OK width/height, but refine the scale */
        width: 280px !important;  /* Slightly narrower looks more "boutique" */
        height: 18px !important;  
        
        /* Font Fix: Small & Spaced Out = Premium */
        font-family: 'Montserrat', sans-serif !important;
        font-size: 11px !important;      /* Reduced size makes the button feel smaller */
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 2.5px !important; /* Extra space makes it look high-end */
        font-style: normal !important;   /* No italics here either */

        /* Design Fix */
        background-color: #c5a059 !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 0 !important;      /* Sharp edges like the screenshot */
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }
}
@media (max-width: 992px) {
    /* 1. Add the gap to the second button container */
    .quick-pay-margin {
        margin-top: 12px !important; /* Adjust this number for more or less gap */
        pointer-events: none; /* Makes the 12px gap non-clickable */
    }

    /* 2. Ensure the link inside remains clickable */
    .quick-pay-margin .mob-book-btn {
        pointer-events: auto;
        display: block;
        /* Inherits all gold styling from your existing .mob-book-btn */
    }

    /* 3. Global fix: ensure the container itself doesn't trigger clicks in the gaps */
    .mobile-book-container {
        width: 100%;
        display: block;
    }
}
/* next */
@media (max-width: 992px) {
    /* 1. Overall Section Spacing */
    .modern-pool-section {
        margin-top: 100px !important;    /* Moves the whole div down */
        padding: 0 !important;
        background: transparent !important;
        width: 100% !important;
    }

    /* 2. Image Container: Adding the Left/Right Gap */
    .modern-pool-image {
        width: 100% !important;
        height: 250px !important;        /* Controlled height */
        padding: 0 15px !important;      /* THE FIX: Small gap on left and right */
        box-sizing: border-box !important;
        flex: none !important;
    }

    .modern-pool-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px !important;   /* Slight roundness for premium feel */
    }

    
   
    /* 4. Tags Alignment */
    .modern-list {
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 25px !important;
    }

    .modern-list li {
        font-size: 12px !important;
        padding: 6px 12px !important;
        background: #f8f9f9 !important;
    }

    .modern-statement {
        font-size: 19px !important;
        line-height: 1.5 !important;
        color: #555 !important;
        margin-left: -10px !important;
    }
        /* Changes the background from black to white to remove the dark gaps */
        .modern-pool-section {
            background-color: #ffffff !important;
            background: #ffffff !important;
        }
}
@media (max-width: 992px) {
    /* 1. Main Content Container */
    .modern-pool-content {
        padding: 25px 20px !important;
        text-align: left !important;
        display: block !important;
    }

    /* 2. Category Label (Small Gold Text) */
    .modern-pool-content .category {
        font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        color: #b38e44 !important;
        margin-bottom: 5px !important;
        display: block;
    }

    /* 3. Heading */
    .modern-pool-content h2 {
       font-family: 'DM Sans', sans-serif !important;
        font-size: 22px !important; /* Adjusted to fit one line */
        color: #201f1f !important;
        white-space: nowrap !important; /* Forces one line */
        margin: 0 0 10px 0 !important; /* FIX: Removes the -40px desktop margin */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

    }

    /* 4. Description Paragraph */
    .modern-pool-content p {
       font-family:'Times New Roman', Times, serif !important;
        font-weight: 300 !important;
        font-size: 19px !important;
        line-height: 1.6 !important;
        color: #353333 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        white-space: 1.6px !important;
    }

    /* 5. The Tags List */
    .modern-list {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important; /* Aligns tags to the left */
        gap: 8px !important;
        list-style: none !important;
        padding: 0 !important;
        margin-bottom: 25px !important;
        margin-top: -20px !important;
    }

    .modern-list li {
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        padding: 5px 12px !important;
        background: #f8f9f9 !important;
        
        border-radius: 2px !important;
    }

    /* 6. Bottom Statement */
    .modern-statement {
      font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: left !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-left: -50px !important;
    }
}
@media (max-width: 992px) {
    /* Adding 'body' and the section class makes this much stronger */
    body .modern-pool-section .modern-pool-grid .modern-pool-content p {
      font-family: 'DM Sans', sans-serif !important;
        /* font-weight: 400 !important; */
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #313030 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-left: -2px !important;
        margin-bottom: 30px !important;
    }
}
/* next */


@media (max-width: 992px) {
    /* 1. COMPRESS VERTICAL GAPS */
    .activity-zone-section {
        margin-top: 10px !important;    /* Reduced from 40px - brings it closer to the section above */
        margin-bottom: 10px !important; /* Pulls the section below up closer */
        padding: 20px 0 !important;      /* Reduced from 40px - tightens internal space */
    }

    /* 2. Tighten gap between Text and Swipe Images */
    .zone-text {
        padding: 0 6% !important; 
        margin-bottom: 20px !important; /* Reduced from 30px */
    }
 .zone-text h4 {
        font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        color: #b38e44 !important;
        margin-bottom: 5px !important;
        display: block;
        font-weight: 600 !important;
        margin-left: 10px !important;
    }
    .zone-text h2 {
        font-family: 'DM Sans', sans-serif !important;
        font-size: 22px !important; /* Adjusted to fit one line */
        color: #201f1f !important;
        white-space: nowrap !important; /* Forces one line */
        margin: 0 0 10px 0 !important; /* FIX: Removes the -40px desktop margin */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 10px !important;
        margin-left: 7px !important;
    }

    /* 3. The Swipe Container Spacing */
    .zone-visuals {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 0 0 15px 0 !important; /* Reduced bottom padding from 30px */
        height: auto !important;
        scrollbar-width: none;
    }

    /* Maintain the "Secret Gap" for left alignment */
    .zone-visuals::before {
        content: '' !important;
        flex: 0 0 6% !important; 
        display: block !important;
    }
    
    .zone-visuals::after {
        content: '' !important;
        flex: 0 0 6% !important;
        display: block !important;
    }

    /* 4. Keep Image Heights compact */
    .zone-img, .img-main, .img-sub-1, .img-sub-2 {
        flex: 0 0 75% !important;
        height: 260px !important;       /* Slightly shorter height to save vertical space */
        scroll-snap-align: center !important;
        border: none !important;
    }
}
@media (max-width: 767px) {
    /* Specific target for the Activity Zone List */
    .activity-zone-section .zone-list {
        padding: 0 !important;
        margin: 25px 0 0 0 !important;
        list-style: none !important;
        display: flex;
        flex-direction: column;
        gap: 20px; /* Space between each activity item */
        margin-top: -20px !important;
        margin-bottom: -40px !important;
    }

    .activity-zone-section .zone-list li {
      font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-bottom: 5px !important;
    }

    /* Premium custom bullet point */
    .activity-zone-section .zone-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: 8px;
        height: 8px;
        background-color: #c5a059; /* Your gold accent color */
        border-radius: 50%;
    }

  .activity-zone-section .zone-list li span {
    display: block; /* Forces the browser to respect line-height */
    font-size: 15px !important;
    
    /* 1.1 or 1.2 is the lowest you should go for readability */
    line-height: 1.2 !important; 
    
    color: #555 !important;
    margin-top: 4px !important; /* Adjust this to control gap from the title */
}
.zone-intro {
       font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-left: 7px !important;

    }
}

/* next */

@media (max-width: 992px) {
    /* 1. Move section down and tighten internal padding */
    .indoor-lounge-section {
        margin-top: -40px !important;    /* Gap from Activity Zone above */
        padding: 40px 6% !important;     /* Reduced top/bottom gap */
        background-color: #f9fbfb !important;
    }

    /* 2. Order: Text first, then Images */
    .lounge-wrapper {
        flex-direction: column !important; /* Text on top for context */
        gap: 40px !important;
    }

    .lounge-text {
        text-align: left !important;
    }
.lounge-text h4 {
       font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        color: #b38e44 !important;
        margin-bottom: 5px !important;
        display: block;
        margin-left: 10px !important;
    }
    .lounge-text h2 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    /* 3. High-End 2-Column Activity List */
    .activity-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Keep 2 columns on mobile for "premium" feel */
        gap: 20px !important;
        margin-top: 30px !important;
    }

    .activity-item strong {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    .activity-item span {
        font-size: 0.8rem !important;
    }

    /* 4. The Visuals: Clean 2-Column Mosaic */
    .lounge-visuals {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: -50px !important;
    }

    /* Main image stays full width of the grid */
    .lounge-img.main-shot {
        grid-column: 1 / 3 !important;
        height: 250px !important;
    }

    /* Detail shots sit side-by-side */
    .lounge-img.detail-shot {
        height: 150px !important;
        grid-column: auto !important;
    }

    .lounge-img img {
        border-radius: 4px !important;
    }
}
@media (max-width: 992px) {
    /* 1. Reduce external and internal gaps */
    .indoor-lounge-section {
        margin-top: 20px !important;    /* Tightened from 60px */
        margin-bottom: 20px !important; /* Tightened gap for the next section */
        padding: 30px 6% !important;    /* Reduced top/bottom padding from 100px/40px */
    }

    /* 2. Tighten gap between text and images */
    .lounge-wrapper {
        flex-direction: column !important;
        gap: 25px !important;           /* Reduced gap between text and photo grid */
    }

    /* 3. Content spacing cleanup */
    .lounge-text h2 {
        font-size: 22px !important;
        margin-top: 10px !important;    /* Pulls title closer to subtitle */
        margin-bottom: 10px !important; 
        margin-left: 10px !important;
    }

    .lounge-intro {
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-left: 10px !important;
    }

    /* 4. Activity List Spacing */
    .activity-list {

        gap: 15px !important;           /* Tighter grid for the items */
        margin-top: -20px !important;
        margin-left: 10px !important;
    }
.activity-item span {
      font-family: 'DM Sans', sans-serif !important;
        font-weight: 200 !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        color: #504e4e !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;

    }
    /* 5. Image Grid Height */
    .lounge-visuals {
        gap: 10px !important;           /* Tighter spacing between photos */
    }

    .lounge-img.main-shot {
        height: 220px !important;       /* Slightly shorter to save vertical space */
    }

    .lounge-img.detail-shot {
        height: 130px !important;       /* Compact detail shots */
    }
}

/* next */

@media (max-width: 992px) {
    /* 1. Tighten the overall section gaps */
    .kids-zone-section {
        margin-top: -50px !important;    /* Pulls it closer to the section above */
        padding: 30px 6% !important;    /* Compressed top/bottom padding */
    }

    /* 2. Order: Text first, then Images */
    .kids-container {
        flex-direction: column !important;
        text-align: left !important;    /* Premium left-alignment */
        gap: 30px !important;           /* Closer gap between text and images */
    }
.kids-info h4 {
          font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        color: #b38e44 !important;
        margin-bottom: 5px !important;
        display: block;
        margin-left: 7px !important;

    }
    .kids-info h2 {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-left: 3px !important;
        margin-top: 10px !important;
    }
    .kids-info p {
       font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;


    }

    /* 3. Refine the Features List */
    .kids-features {
        justify-content: flex-start !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .kids-features li {
        padding: 8px 16px !important;
       font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;

        background: #f4f7f6 !important;
        border: none !important;
    }

    /* 4. Restore the Overlapping Duo (The Premium Look) */
    .kids-visuals {
        display: block !important;      /* Switch from flex to block for positioning */
        width: 100% !important;
        height: 330px !important;       /* Set a fixed height for the container */
        margin-top: -10px !important;
        position: relative !important;
    }

    .kids-img-large {
        width: 85% !important;
        height: 250px !important;
        margin-left: auto !important;   /* Push large image to the right */
        border-radius: 4px !important;
        display: block !important;
    }

    .kids-img-small {
        display: block !important;      /* Bring back the small image */
        width: 55% !important;
        height: 180px !important;
        position: absolute !important;
        bottom: 20px !important;        /* Positioned over the large one */
        left: 0 !important;
        border: 6px solid #ffffff !important; /* Thinner border for mobile */
        border-radius: 4px !important;
        z-index: 2 !important;
    }
}

/* next */

@media (max-width: 900px) {
    /* 1. Tighten the overall section footprint */
    .zen-relaxation-section {
        padding: 40px 8% !important;   /* Reduced top/bottom padding */
        margin-top: 10px !important;    /* Gap from section above */
        margin-bottom: 10px !important; /* Gap for section below */
    }

    /* 2. Header Refinement */
    .zen-header {
        margin-bottom: 30px !important; /* Reduced from 80px */
    }

    .zen-header h4 {
         font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        color: #b38e44 !important;
        margin-bottom: 5px !important;
        display: block;
        text-align: left !important;
        margin-top: -40px !important;
margin-left: -7px !important;
    }

    .zen-header h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        text-align: left !important;
        margin-left: -8px !important;
    }

    /* 3. Body Layout: Centered & Calm */
    .zen-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 0px !important;           /* We'll use margins for better control */
    }

    .zen-intro {
        text-align: center !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }

    .zen-intro p {
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-bottom: 5px !important;

    }

    /* 4. The Divider: Switch from Vertical to Horizontal Gold Line */
    .zen-divider {
        display: block !important;
        width: 60px !important;         /* Small elegant line */
        height: 1px !important;
        margin: 0 auto 35px auto !important;
        opacity: 0.6 !important;
        margin-top: -20px !important;
    }

    /* 5. The List: Elegant & Symmetrical */
    .zen-list-col {
        padding: 0 !important;
    }

    .zen-list li {
       font-size: 6px !important;
        line-height: 1.5 !important;
        color: #555 !important;
    }

    .zen-list li::before {
        content: "—" !important;
        font-size: 12px !important;
        margin-right: 10px !important;
    }

    /* 6. The Footer Statement */
    .zen-footer {
        margin-top: 10px !important;    /* Reduced from 80px */
        font-size: 22px !important;
        text-align: center !important;
        width: 100%;
    }
}
@media (max-width: 900px) {
    /* 1. Remove padding from the column container */
    .zen-list-col {
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* Centers the list on the screen */
    }

    /* 2. Style the List itself */
    .zen-list {
        display: inline-block !important; /* Keeps items aligned to their own left edge */
        text-align: left !important;      /* Text stays left-aligned for readability */
        margin: 0 auto !important;
        margin-top: -10px !important;
    }

    /* 3. Style the Individual Items */
    .zen-list li {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Bullet stays on the left */
        font-size: 0.8rem !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 18px !important; /* Balanced gap between items */
        color: #252525 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important; /* Prevents awkward text wrapping */
        
    }

    /* 4. The Premium Gold Divider/Bullet */
    .zen-list li::before {
        content: "—" !important; /* The elegant em-dash */
        margin-right: 12px !important;
        color: #c5a059 !important;
        font-weight: 300 !important;
        opacity: 0.8;
    }
}


/* next */

@media (max-width: 992px) {
    /* 1. Reduce external and internal vertical gaps */
    .huts-section {
        padding: 10px 6% !important;   /* Significantly reduced from 100px */
        margin-top: 10px !important;    /* Pulls it closer to the Zen section */
        margin-bottom: 40px !important; /* Reduced bottom margin */
    }
.huts-header h4 {
          font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        color: #b38e44 !important;
        margin-bottom: 5px !important;
        display: block;
        margin-left: -110px !important;
        margin-top: -40px !important;

    }
    /* 2. Header Tightening */
    .huts-header h2 {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-top: 10px !important;
          margin-left: -100px !important;
    }

    .huts-intro {
      font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;

    }

    /* 3. The Grid: Elegant 2-Column Mosaic */
    .huts-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 cards per row */
        gap: 12px !important;           /* Tight, clean gaps */
        margin-bottom: 40px !important; /* Reduced from 80px */
    }

    .hut-item {
        padding: 30px 15px !important;  /* More compact cards */
        background-color: #fdfdfd !important;
        border: 1px solid #eee !important;
    }

    .hut-item span {
        font-size: 1rem !important;     /* Balanced font size */
        letter-spacing: 0.5px !important;
    }

    /* 4. Footer & Statement Spacing */
    .huts-footer {
        padding-top: 30px !important;
    }

    .huts-footer p {
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-top: -10px !important;
    }

    .huts-statement {
        font-size: 22px !important;     /* Scaled for mobile */
        line-height: 1.4 !important;
    }

    .huts-statement span {
        font-size: 21px !important;
        display: block;                 /* Forces "Experiential spaces" to new line for impact */
        margin-top: -5px;
    }
}
@media (max-width: 992px) {
    /* 1. COMPRESS BOTTOM GAP */
    .huts-section {
        padding: 40px 6% 10px 6% !important; /* Bottom padding reduced from 40px to 10px */
        margin-top: 10px !important;
        margin-bottom: 0px !important;       /* Margin removed entirely to pull next div up */
    }

    /* 2. Tighten internal footer spacing */
    .huts-grid {
        margin-bottom: 25px !important;      /* Reduced from 40px */
    }

    .huts-footer {
        padding-top: 15px !important;        /* Reduced from 30px */
    }

    .huts-footer p {
        margin-bottom: 15px !important;      /* Reduced from 25px */
    }

    /* 3. Ensure the statement doesn't push the next section away */
    .huts-statement {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Keep existing grid logic */
    .huts-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .hut-item {
        padding: 30px 15px !important;
        background-color: #fdfdfd !important;
        border: 1px solid #eee !important;
    }
}
@media (max-width: 992px) {
    .huts-section {
        /* This keeps your 40px padding and 40px margin exactly as they are */
        padding-bottom: 0px !important; 
        margin-bottom: 0px !important;
    }
}
/* next */

@media (max-width: 1024px) {
    /* 1. Tighten the overall section gaps */
    .editorial-section {
        padding: 0px 6% !important;   /* Compressed top/bottom */
        margin-top: 0px !important;     /* Remove top margin */
        margin-bottom: 30px !important; /* Tightened bottom gap */
    }

    /* 2. Top Branding Line: Stacked and Sleek */
    .editorial-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 35px !important; /* Reduced from 60px */
        padding-bottom: 15px !important;
    }

    .editorial-top h4 {
          font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        color: #b38e44 !important;
        margin-bottom: 5px !important;
        display: block;
        margin-top: -30px !important;

    }

    .editorial-top .coord {
       font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-top: -5px !important;

    }

    /* 3. The "Eden Waters" Title */
    .editorial-title {
        margin-bottom: 25px !important;
    }

    .editorial-title h2 {
        font-size: 22px !important;    /* Large, bold editorial statement */
        line-height: 1 !important;
        margin-bottom: 30px !important;
    }

    .editorial-title span {
        font-size: 0.9rem !important;
        letter-spacing: 0.5px !important;
        display: block;
        margin-bottom: 0px !important;
    }

    /* 4. Narrative & Activity Grid */
    .editorial-content {
        gap: 30px !important;
    }

    .editorial-narrative p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 35px !important;
        margin-top: 0px !important;
        text-align: justify !important;
    }

    /* 5. Activity List: Clean 2-Column Grid */
    .editorial-activities {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Balanced grid */
        gap: 20px 15px !important;
        padding-top: 30px !important;
    }

    .activity-box {
        padding-left: 12px !important;
        border-left: 1.5px solid #c5a059 !important; /* Slightly thicker gold line */
    }

    .activity-box h5 {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
    }
}

/* Extra Tightening for very small screens */
@media (max-width: 600px) {
    .editorial-title h2 {
        font-size: 36px !important;
    }
    
    .editorial-activities {
        grid-template-columns: 1fr !important; /* Stack only on very small phones */
        gap: 15px !important;
    }
}
@media (max-width: 1024px) {
    /* 1. Tighten Section Spacing */
    .editorial-section {
        padding: 20px 6% !important;   /* Reduced top/bottom from 30px to 20px */
        margin-top: -20px !important;   /* Slight negative margin to pull it even closer to Huts */
        margin-bottom: 10px !important; /* Reduced from 50px */
    }

    /* 2. Tighten Header Spacing */
    .editorial-top {
        margin-bottom: 25px !important; /* Reduced from 35px */
        padding-bottom: 10px !important; /* Tighter line */
    }

    /* 3. Title Compression */
    .editorial-title {
        margin-bottom: 15px !important; /* Reduced gap before narrative */
    }

    .editorial-title h2 {
        font-size: 38px !important;
        margin-bottom: 15px !important;
    }

    /* 4. Narrative & List Spacing */
    .editorial-content {
        gap: 20px !important; /* Gap between title and text */
    }

    .editorial-narrative p {
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;
        margin-bottom: 10px !important;

    }

    .editorial-activities {
        padding-top: 20px !important; /* Reduced gap from narrative */
        gap: 15px 10px !important;    /* Tighten the grid itself */
    }

    .activity-box {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}
/* 1. Remove the bottom of the Huts Section */
@media (max-width: 992px) {
    .huts-section {
        padding-bottom: 0px !important; 
        margin-bottom: 0px !important;
    }

    /* Tighten the spacing inside the Huts footer so the text is close to the bottom */
    .huts-footer {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
    .huts-statement {
        margin-bottom: 0px !important;
        padding-bottom: 10px !important; /* Tiny bit of breathing room */
    }
}

/* 2. Remove the top of the Editorial Section */
@media (max-width: 1024px) {
    .editorial-section {
        padding-top: 0px !important;    /* Glue to the top */
        margin-top: 0px !important;     /* Reset any negative margins */
    }

    /* Pull the 'Heart of Property' line even closer to the top */
    .editorial-top {
        margin-top: 0px !important;
        padding-top: 10px !important;
    }
}
@media (max-width: 1024px) {
    /* 1. Kill the bottom of the HUTS section */
    .huts-section {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    /* 2. Tighten the HUTS footer (the italic text area) */
    .huts-footer {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    .huts-statement {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    /* 3. Kill the top of the EDEN WATERS section */
    .editorial-section {
        padding-top: 0px !important;
        margin-top: -30px !important; /* Pulls the section UP to close the gap */
    }

    /* 4. Remove extra space above the gold header line */
    .editorial-top {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }
}
@media (max-width: 1024px) {
    /* 1. Eliminate the gap between the Title area and the Narrative area */
    .editorial-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 0px !important; /* Force zero gap between grid items */
    }

    /* 2. Zero out the margins on the title elements */
    .editorial-title {
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
    }

    .editorial-title h2 {
font-family: 'DM Sans', sans-serif !important;
        font-size: 28px !important; /* Adjusted to fit one line */
        color: #201f1f !important;
        white-space: nowrap !important; /* Forces one line */
        margin: 0 0 10px 0 !important; /* FIX: Removes the -40px desktop margin */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: -10px !important;
    }

    .editorial-title span {
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #363535 !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;

    }

    /* 3. Zero out the top margin of the paragraph */
    .editorial-narrative p:first-of-type {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
}


/* next */

@media (max-width: 768px) {
    /* 1. Tighten the overall section padding and margins */
    .gallery-compact-section {
        padding: 10px 0 20px 0 !important; /* Zero top padding, minimal bottom */
        margin-top: -50px !important;
        margin-bottom: 0px !important;
        overflow: hidden; /* Prevents unwanted horizontal scroll on the whole page */
    }

    /* 2. Convert Grid to Horizontal Swipe Mode */
    .gallery-grid-refined {
        display: flex !important;
        overflow-x: auto !important; /* Enables horizontal swipe */
        scroll-snap-type: x mandatory; /* Makes images 'snap' into place */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        gap: 12px !important;
        padding: 0 20px 15px 20px !important; /* Peek-a-boo padding for first/last images */
        scrollbar-width: none; /* Hides scrollbar on Firefox */
    }

    /* Hide scrollbar for Chrome/Safari */
    .gallery-grid-refined::-webkit-scrollbar {
        display: none;
    }

    /* 3. Refine the Frame for Swipe Mode */
    .gallery-frame {
        flex: 0 0 75% !important; /* Each image takes 75% of screen width */
        height: 280px !important; /* Slightly taller for premium feel */
        scroll-snap-align: center; /* Snaps image to center of screen */
        border-radius: 4px; /* Optional: Softens the edges */
    }

    /* 4. Show tags by default on mobile (since there is no 'hover') */
    .gallery-tag {
        opacity: 0.9 !important;
        background: rgba(26, 47, 35, 0.8) !important;
        font-size: 0.6rem !important;
    }

    /* 5. Keep images vivid but elegant */
    .gallery-frame img {
        filter: grayscale(0%); /* Full color on mobile for better engagement */
    }
}

/* next */

@media (max-width: 768px) {
    /* 1. Reset container for better mobile flow */
    .sunset-parallax-section {
        background-attachment: scroll !important; /* Performance fix */
        height: auto !important;
        padding: 10px 20px !important; /* Reduced top/bottom gap */
        margin: 10px 0 !important;      /* Subtle separation from other divs */
        display: block !important;       /* Better for content height */
        margin-top: -50px !important;
    }

    /* 2. Enhanced Overlay for a "Cinema" look */
    .sunset-overlay {
        background: linear-gradient(
            to bottom, 
            rgba(0,0,0,0.5) 0%, 
            rgba(0,0,0,0.3) 50%, 
            rgba(0,0,0,0.6) 100%
        ) !important;
    }

    /* 3. Typography refinement */
    .sunset-content {
        padding: 20px 10px !important;
    }

    .sunset-content h4 {
        font-size: 0.65rem !important;
        letter-spacing: 4px !important;
        margin-bottom: 15px !important;
    }

    .sunset-content h2 {
        font-size: 22px !important; /* Premium boutique size */
        line-height: 1.3 !important;
        margin-bottom: 25px !important; /* Tightened gap */
    }

    .sunset-description {
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #ececec !important;
        text-align: justify !important; /* Kept your requested alignment */
        -webkit-font-smoothing: antialiased;

    }

    /* 4. Elegant Vertical Highlights */
    .sunset-highlights {
        margin-top: 30px !important;
        padding-top: 25px !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        border-top: 1px solid rgba(197, 160, 89, 0.3) !important; /* Gold tinted line */
    }

    .sunset-point {
        font-family: 'DM Sans', sans-serif !important;

        font-size: 0.65rem !important;
        letter-spacing: 1.5px !important;
        opacity: 0.9;
    }

    /* Smaller gold dot for mobile */
    .sunset-point::before {
        width: 4px !important;
        height: 4px !important;
    }
}
@media (max-width: 768px) {
    /* 1. Force the Sunset section to end exactly where the image ends */
    .sunset-parallax-section {
        margin-bottom: 0px !important;
        padding-bottom: 60px !important; /* Adjust internal padding only */
    }

    /* 2. Target the section immediately following it to pull it up */
    .sunset-parallax-section + section, 
    .sunset-parallax-section + div {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }

    /* 3. Reset the container if it's wrapped in a standard layout div */
    .sunset-content {
        margin-bottom: 0px !important;
    }
}

/* next */


/* next */
/* --- PREMIUM FOOTER MOBILE OPTIMIZATION --- */
/* --- THE ULTIMATE BAGO MOBILE FOOTER (CONSOLIDATED) --- */
@media screen and (max-width: 768px) {
    
    /* 1. SECTION RESET: Center & Kill Top Gaps */
    footer.premium-footer {
        padding: 20px 0 30px !important; /* Tight top space */
        text-align: center !important;
        margin-top: 0 !important;
    }

    /* 2. CONTAINER: Force Stack & Zero Gap */
    footer.premium-footer .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important; /* Kills all mechanical gaps between blocks */
        padding: 0 25px !important;
    }

    /* 3. LOGO: Perfect Center & Overlap */
    footer.premium-footer .footer-hotel-info {
        margin-top: -55px !important; /* Overlap control */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    footer.premium-footer .footer-hotel-info img {
        width: 220px !important; /* Boutique logo size */
        margin-left: 0 !important;
        margin-bottom: -15px !important; /* Sucks pillars up to logo */
    }

    /* 4. BRAND PILLARS: Zero Gap Sentences */
    footer.premium-footer .brand-pillars {
        margin: 0 0 15px 0 !important; /* 15px is the ONLY gap before Explore */
        padding: 0 !important;
        width: 100% !important;
    }

    footer.premium-footer .brand-pillars p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 17px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* 5. EXPLORE SECTION: Tight Center */
    footer.premium-footer .footer-explore,
    footer.premium-footer .footer-about {
        margin-top: 10px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    footer.premium-footer .footer-heading {
        font-size: 16px !important;
        margin-bottom: 15px !important;
        letter-spacing: 2px !important;
    }

    footer.premium-footer .footer-heading::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* 6. CONTACT & SOCIALS: Alignment Fix */
    footer.premium-footer .social-icons {
        justify-content: center !important;
        margin-bottom: 20px !important;
    }

    footer.premium-footer .contact-details {
        align-items: center !important;
        gap: 10px !important;
    }

    footer.premium-footer .contact-details p {
        justify-content: center !important;
        font-size: 13px !important;
        margin: 0 !important;
    }
}
@media screen and (max-width: 768px) {
    /* 1. Neutralize the container */
    footer.premium-footer .footer-hotel-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Force children to center */
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. Force the Image to center */
    footer.premium-footer .footer-hotel-info img {
        display: block !important;
        margin-left: auto !important;  /* The "Magic" centering trick */
        margin-right: auto !important; /* The "Magic" centering trick */
        float: none !important;        /* Kills any left-float */
        width: 200px !important;       /* Adjust size as needed */
    }

    /* 3. Ensure Brand Pillars follow the center */
    footer.premium-footer .brand-pillars {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
}
@media screen and (max-width: 768px) {

    /* 1. Pull the text UP to the logo */
    footer.premium-footer .footer-hotel-info img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 200px !important;
        
        /* AGGRESSIVE GAP KILLER */
        margin-bottom: -25px !important; /* Pulls the brand pillars up into the logo's space */
        padding-bottom: 0 !important;
    }

    /* 2. Zero out the Brand Pillars spacing */
    footer.premium-footer .brand-pillars {
        margin-top: 0 !important; 
        padding-top: 0 !important;
        margin-bottom: 20px !important; /* This is the ONLY gap before 'Explore' */
    }

    /* 3. Tighten the individual lines of text */
    footer.premium-footer .brand-pillars p {
        margin-bottom: 2px !important; 
        line-height: 1.2 !important;
    }
}
/* --- FOLLOW US MOBILE SPACING FIX --- */
@media screen and (max-width: 768px) {

    /* 1. Gap between 'Follow Us' heading and the icons */
    .premium-footer .footer-about .footer-heading {
        margin-bottom: 15px !important; /* Increase this to move underline further from text */
    }

   

    
}