/* p {
    font-family: 'cera';
    font-size: 16px;
    color: #000000;
} */


:root {
    --primary: #3E5B25 !important;
}

#header .header-nav.header-nav-line nav>ul li:hover>a {
    color: #3E5B25;
}

#header .header-btn-collapse-nav {
    background: #3E5B25;
}

/* li {
    color: #000000;
    font-family: 'cera' !important;
    font-size: 16px !important;
} */

#footer a:not(.btn):not(.no-footer-css):hover {
    text-decoration: none;
    color: #000000;
}


#footer {
    background: #ffffff !important;
    border-top: none !important;
}

#footer .footer-copyright {
    background: #ffffff !important;
}

/* Paragraphs - Body Copy (matches brand guide '3. Body copy: Cera Pro light | Font size: 10pt') */
p {
    font-family: 'Cera Pro', 'Times New Roman', Times, serif;
    /* Adjusted to 'Cera Pro' */
    /* font-size: 10px; */
    font-size: 16px;
    /* Changed from 16px to 10pt as per brand guide */
    color: #000000;
    font-weight: 300;
    /* Changed to 300 for 'light' as per brand guide */
    line-height: 1.5;
}

/* Headings (h1, h2, h3, etc.) - This is where the main feedback applies */
/* This rule will primarily cover the "1. Headlines" style from the brand guide. */
h1, h2, h3, h4, h5, h6 {
    font-family: "Cinzel", 'Times New Roman', Times, serif;
    font-weight: 400;
    /* Correct: Cinzel Regular as per feedback and guide visual */
    color: #000000;
    line-height: 1.2;
    /* Spacing/tracking:
       - '50pt gap' is highly ambiguous for letter-spacing.
       - Your current '0.05em' provides a slight, positive track.
       - If they *literally* mean 50 points, that would be:
         (50 / 72) * 1em (or relative to font size).
         For a 38pt font, 50pt gap is larger than the letter itself.
         This would be extremely wide.
         I'll use a more common interpretation of "wide tracking."
         Let's try a higher 'em' value first. If they want wider, we can adjust.
    */
    letter-spacing: 0.1em;
    /* Increased from 0.05em for a more noticeable gap. Adjust as needed. */
    /* Font size for Headlines (38pt) needs to be set specifically for the relevant heading level */
}

/* SPECIFIC HEADING STYLES based on Brand Guide */
/* This is crucial to correctly implement the brand guide's hierarchy */

/* Style for "1. Headlines: Cinzel | Font size: 38pt" */
/* Assuming h1 is your primary headline */
h1 {
    font-size: 38pt;
    /* As per brand guide */
    font-weight: 400;
    /* Cinzel Regular */
    letter-spacing: 0.1em;
    /* Apply the tracking here */
    text-transform: uppercase;
    /* Headlines in the guide are uppercase */
}

/* Style for "2. Heading: Times New Roman Italic | Font size: 14pt" */
/* You'll need to decide which heading tag (e.g., h2 or h3) will represent this style.
   Let's assume h2 for now. */
h2 {
    font-family: 'Times New Roman', Times, serif;
    /* Specific font for this heading */
    /* font-style: italic; */
    /* As per brand guide */
    font-size: 14pt;
    /* As per brand guide */
    font-weight: normal;
    /* Times New Roman usually doesn't need specific weight for italic */
    letter-spacing: normal;
    /* No special tracking mentioned for this one in the guide */
}



.overlay.overlay-color-green {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 128, 0, 0.2));
    z-index: 1;
}

/* .overlay.overlay-color-green {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 128, 0, 0.3);
    z-index: 1;
} */

.retreat-subtext {
    font-size: 0.85rem;
    color: #ffffff;
    margin-top: 5px;
    letter-spacing: 1px;
    opacity: 0.9;
}



/* Ensure the parent container has a positioning context for z-index to work */
.position-relative {
    position: relative;
}

/* Adjust banner-title to ensure it's on top of the overlay */
.banner-title,
.welcome-text,
.retreat-info,
.banner-logo {
    z-index: 2;
    /* Needs to be higher than the overlay's z-index */
    position: relative;
    /* z-index only works on positioned elements */
}

/* Your existing CSS for banner-logo, welcome-text, banner-title, retreat-info goes here */
/* (omitted for brevity, assume you have these already) */
.banner-logo {
    max-width: 120px;
    height: auto;
    margin-bottom: 20px;
}

hr {
    background: #ffffff !important;
}

.welcome-text {
    color: white;
    font-size: 1.2em;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    /* CHANGE: Apply Cinzel font family as per feedback */
    font-family: 'Cinzel', serif;
    /* Changed from 'Cera' */
    font-weight: 500;
    /* Cinzel Regular is typically 400 or 500 depending on the font file */
}

.banner-title {
    color: white;
    font-size: 3.5em;
    /* CHANGE: Ensure it's Cinzel Regular. Your original was 'bold', but feedback asks for 'Regular'. */
    font-weight: 400;
    /* Changed from 'bold' to 400 (Regular) for Cinzel */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    line-height: 1;
    margin-bottom: 15px;
    /* This was already Cinzel, which is correct */
    font-family: "Cinzel", 'Times New Roman', Times, serif;
    /* Ensure all caps as per feedback, though Cinzel often renders this way by default */
    text-transform: uppercase;
    /* Added for explicit all-caps */
}

.retreat-info {
    color: white;
    /* CHANGE: Make font-size smaller. You will need to fine-tune this value visually. */
    /* Starting with 0.9em as a good reduction from 1.5em. Adjust as needed! */
    font-size: 1.5em;
    /* Changed from 1.5em */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    /* Keep its original font-family as no change was requested for this specific line's typeface */
    font-family: 'Cera', 'Times New Roman', Times, serif;
    font-weight: 500;

    /* To help it fit within "The Mangrove" width, in addition to reducing font-size,
       you might want to add a max-width, especially if the text is long. */
    max-width: 100%;
    /* Optional: Adjust this percentage based on 'The Mangrove' width */
    margin-left: auto;
    /* Center the block if max-width is applied */
    margin-right: auto;
    /* Center the block if max-width is applied */
}


/* Style for the new overlay div */

.overlay.overlay-color-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* This is what overlay-color-dark overlay-op-6 might translate to */
    z-index: 1;
    /* Place it just above the background image */
}

.header-booknow .btn {
    background-color: #3E5B25;
    color: #fff;
    border: none;
}

.header-booknow .btn:hover {
    background-color: #3E5B25;
}

/* .btn-register {
    background-color: #3E5B25;
    color: #fff;
    border: none;
}

.btn-register:hover {
    background-color: #3E5B25;
} */
.btn01 {
    background-color: #3E5B25;
    color: #fff;
    border: none;
    font-size: 15px;
    border-radius: 50px;
    padding: 15px 35px;
}

.btn01:hover {
    background-color: #3E5B25;
    color: #fff;
}

@media (max-width: 767.98px) {
    .booking-widget .row>div {
        border-right: none !important;
        border-bottom: 1px solid #ddd;
    }
}

/* General section padding and background */
.villas-section {
    background-color: #bd9960;
}

/* Heading and paragraph styling */
/* .villas-section h2 {
    font-size: 2.8rem;
    color: #343a40;
}

.villas-section p.lead {
    font-size: 1.1rem;
    line-height: 1.6;
} */

/* --- Individual Card with Overlay Styling (mostly retained) --- */
.villa-card-overlay-small {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease-in-out;
    height: 450px;
    /* Adjusted height for consistent card size */
    margin-bottom: 20px;
    /* Add some margin for spacing between cards in rows if not using Owl margin */
}


.villa-card-overlay-small .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem !important;
}

/* Overlay Content for each small card (bottom-left) */
.villa-card-overlay-small .card-img-overlay-content-small {
    position: absolute;
    bottom: 0px;
    /* Distance from the bottom */
    left: 0px;
    /* Distance from the left */
    width: 70%;
    /* Adjust the width as needed */
    background-color: rgba(255, 255, 255, 0.9);
    /* Semi-transparent white background */
    padding: 1.5rem !important;
    /* Adjust padding as needed */
    color: #343a40;
    /* Darker text color */
    border-radius: 0 0.75rem 0 0;
    /* Rounded top-left and bottom-left corners */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
}

.villa-card-overlay-small .card-img-overlay-content-small .card-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.villa-card-overlay-small .card-img-overlay-content-small .card-text {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.villa-card-overlay-small .card-img-overlay-content-small a {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: #343a40 !important;
}

/* Overlay Arrows for each individual card (can be kept but Owl carousel will generate its own) */
.villa-card-overlay-small .overlay-arrows-top-small {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    width: auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 2;
}

.villa-card-overlay-small:hover .overlay-arrows-top-small {
    opacity: 1;
}

.villa-card-overlay-small .overlay-arrows-top-small .btn {
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #343a40;
}

.villa-card-overlay-small .overlay-arrows-top-small .btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* --- Styles specific to #multiItemOverlayCarousel --- */
#multiItemOverlayCarousel .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #3E5B25 !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    /* This hides the default text */
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

#multiItemOverlayCarousel .owl-nav button:hover {
    opacity: 1;
    background-color: #3E5B25 !important;
}

#multiItemOverlayCarousel .owl-nav button i {
    font-size: 1rem !important;
    /* Adjust icon size as needed */
    line-height: 1 !important;
    /* Ensures proper vertical alignment of the icon */
}

#multiItemOverlayCarousel .owl-nav .owl-prev {
    left: -50px;
    /* Adjust position outside the container */
}

#multiItemOverlayCarousel .owl-nav .owl-next {
    right: -50px;
    /* Adjust position outside the container */
}

/* Adjust position on smaller screens for multiItemOverlayCarousel */
@media (max-width: 991.98px) {
    #multiItemOverlayCarousel .owl-nav .owl-prev {
        left: 10px;
        /* Inside the container */
    }

    #multiItemOverlayCarousel .owl-nav .owl-next {
        right: 10px;
        /* Inside the container */
    }
}

/* Hide default Owl dots for multiItemOverlayCarousel if you don't want them */
#multiItemOverlayCarousel.owl-dots {
    display: none;
}


/* General Section Styling - RENAMED from .offers-section to .promotions-section */
.promotions-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #f8f9fa;
    /* Light background similar to image */
}

.promotions-section .display-5 {
    color: #343a40;
    /* Darker heading color */
}

.promotions-section .lead {
    color: #6c757d;
    /* Muted text color */
}

/* --- Card Item Styles --- */

.villa-item-card {
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    background-color: #fff;
    height: 100%;
    /* Important for equal card heights within a flex/grid parent */
    transition: transform 0.3s ease-in-out;
    border-bottom-left-radius: 1.5rem !important;
    border-bottom-right-radius: 1.5rem !important;
}

.villa-item-card .card-img-top {
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}

.villa-item-card .card-body {
    background-color: #E6E0DA;
    padding: 1.5rem;
    text-align: center;

    display: flex;
    flex-direction: column;
    /* Keep justify-content: space-between; if you want a CTA at the very bottom.
       If no CTA and you just want content aligned top, remove this. */
    justify-content: space-between;

    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;

    min-height: 240px !important;
}


.villa-item-card .card-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #343a40;
    margin-bottom: 0.75rem;
    font-family: "Cinzel", 'Times New Roman', Times, serif;
    text-transform: uppercase;
    /* This ensures the title takes minimal space and sits at the top */
    flex-shrink: 0;
}

.villa-item-card .card-text {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 1.5rem;
    /* Space below the text */
    font-family: 'Cera Pro', 'Times New Roman', Times, serif;
    font-weight: 300;

    /* Allows text to take all available space, pushing subsequent elements (like a CTA) down */
    flex-grow: 1;
    /* This is the key for alignment if a bottom element exists */
    height: auto;
    /* Ensure it grows */
    overflow: visible;
    /* Ensure content is not hidden */
    display: block;
    /* Standard display */
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    text-overflow: unset;
}

/* If you re-introduce the CTA link */
.villa-item-card .cta-link {
    /* Styles for your "LEARN MORE" link */
    margin-top: auto;
    /* This will push it to the bottom if the card-text flex-grows */
}

/* Call-to-action Link Styling - RENAMED from .learn-more-link to .cta-link */
.cta-link {
    font-weight: bold;
    color: #000000 !important;
    /* Dark color for link */
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    /* Use inline-flex for alignment */
    align-items: center;
    justify-content: center;
    margin-top: auto;
    /* Pushes the link to the bottom */
}

.cta-link i {
    margin-left: 0.5rem;
    transition: transform 0.2s ease-in-out;
}

.cta-link:hover i {
    transform: translateX(3px);
    /* Slight movement on hover */
}

a:not(.btn):hover {
    text-decoration: none !important;
}

/* --- Styles specific to #featuredVillasCarousel (from previous iteration) --- */
#featuredVillasCarousel .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9) !important;
    /* Semi-transparent white background for arrows */
    width: 45px;
    height: 45px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #3E5B25 !important;
    /* Softer shadow */
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    font-size: 1.5rem !important;
    /* Larger font size for arrow icon */
    border: none !important;
    /* Remove any default border */
    opacity: 1;
    /* Always visible as per image */
}

#featuredVillasCarousel .owl-nav button.owl-prev {
    left: -25px;
    /* Position relative to container */
}

#featuredVillasCarousel .owl-nav button.owl-next {
    right: -25px;
    /* Position relative to container */
}

#featuredVillasCarousel .owl-nav button:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: #000 !important;
    transform: translateY(-50%) scale(1.05);
    /* Slight scale on hover */
}

/* Owl Carousel Dots Styling for #featuredVillasCarousel */
#featuredVillasCarousel .owl-dots {
    text-align: center;
    margin-top: 30px;
    /* Space above dots */
}


/* Responsive adjustments for nav arrows for #featuredVillasCarousel */
@media (max-width: 991.98px) {

    /* Tablets and smaller */
    #featuredVillasCarousel .owl-nav button {
        width: 35px;
        height: 35px;
        font-size: 1.2rem !important;
    }

    #featuredVillasCarousel .owl-nav button.owl-prev {
        left: 0px;
        /* Bring inside on smaller screens */
    }

    #featuredVillasCarousel .owl-nav button.owl-next {
        right: 0px;
        /* Bring inside on smaller screens */
    }
}

@media (max-width: 767.98px) {

    /* Mobile devices */
    #featuredVillasCarousel .owl-nav {
        display: none;
        /* Hide arrows on very small screens if desired */
    }
}

/* Custom styles for the home-intro section */
#home-intro {
    background-color: #E6E0DA;
    /* Light grey background from image_3f63b9.png */
    padding: 1.5rem 0;
    /* Adjust padding as needed */
    font-size: 0.95rem;
    /* Slightly smaller font for the text */
}

#home-intro .intro-text {
    color: #555;
    /* Darker grey text color */
    margin-right: 1.5rem;
    /* Space between text and button */
}

#home-intro .subscribe-btn {
    background-color: #5a5a5a;
    /* Dark grey button color from image_3f63b9.png */
    border-color: #5a5a5a;
    /* Same border color */
    color: #fff;
    /* White text color */
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    /* Padding for the button */
    font-size: 0.85rem;
    /* Smaller font size for button text */
    text-transform: uppercase;
    /* Uppercase text */
    border-radius: 0.25rem;
    /* Slightly rounded corners */
    transition: background-color 0.3s ease;
}

#home-intro .subscribe-btn:hover {
    background-color: #4a4a4a;
    /* Darker on hover */
    border-color: #4a4a4a;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    #home-intro .intro-text {
        margin-right: 0;
        /* Remove margin on small screens */
        margin-bottom: 0.5rem;
        /* Add some space below text on small screens */
    }
}


.content-wrapper {
    background-color: #f8f8f8;
    padding: 30px;
    border-radius: 5px;
}

.dining-item img {
    border-radius: 8px;
}

.custom-section {
    height: 100%;
}

.custom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-text-col {
    display: flex;
    align-items: center;
    background-color: #f4f4f4;
    padding: 40px;
}

/* .custom-text-box {
        background-color: #fff;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    } */

/* NEW RULE: Specific styling for h1s in your custom sections */
.section-heading {
    /* Adjust this font-size until it looks good in the section */
    /* Starting smaller than 38pt, e.g., 2em or 2.5em, or even a specific px value */
    font-size: 2.5em;
    /* Experiment with this value (e.g., 2em, 2.8em, 30px, 36px) */
    /* Other properties (font-weight, letter-spacing, text-transform, font-family)
       will be inherited from the general h1 rule unless you specifically override them here.
       If you want them to be exactly the same as the general h1, you don't need to repeat them. */
}


.custom-heading-line {
    width: 60px;
    height: 2px;
    background-color: #000;
    margin: 20px 0;
}

@media (max-width: 991.98px) {
    .flex-lg-row-reverse {
        flex-direction: column !important;
    }

    .custom-text-col {
        padding: 20px;
    }

    .custom-text-box {
        padding: 20px;
    }
}


/* Additions for Clubhouse Carousel and Lightbox */
.spa-section .owl-carousel .item img {
    height: 250px;
    /* Or desired fixed height for uniformity */
    object-fit: cover;
    /* Ensures images cover the area without distortion */
    width: 100%;
    transition: transform 0.2s ease-in-out;
}

.spa-section .owl-carousel .item img:hover {
    transform: scale(1.02);
    /* Slight zoom on hover */
}

.cursor-pointer {
    cursor: pointer;
}

/* Lightbox Modal Customizations */
#imageLightbox .modal-content {
    background-color: rgba(0, 0, 0, 0.8);
    /* Dark transparent background for the modal content */
}

#imageLightbox .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 80vh;
    /* Limit modal height */
}

#imageLightbox #lightboxImage {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Ensure the image fits within the modal without cropping */
}

#imageLightbox .btn-close-white {
    background-color: rgba(255, 255, 255, 0.7);
    /* White close button for visibility on dark background */
    border-radius: 50%;
    padding: 0.5rem;
    opacity: 1;
    /* Ensure visible */
}

.owl-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span {
    background-color: #3E5B25;
}


.banner-logo {
    max-width: 120px;
    margin-bottom: 20px;
}

/* .banner-title {
    color: white !important;
    font-size: 36px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
} */

/* --- New Section for Intro Layout --- */
.intro-section {
    display: flex;
    /* Use flexbox for horizontal layout */
    align-items: stretch;
    /* Make columns fill entire height */
    width: 100%;
    /* Ensure it spans full width */
    min-height: 500px;
    /* Adjust min-height as needed, or remove if content defines height */
    padding: 0;
    /* Remove padding from the main section */
}

.intro-image-col {
    flex: 1;
    /* Allows image column to grow and take available space */
    min-width: 50%;
    /* Image will take at least 50% width on larger screens */
    overflow: hidden;
    /* Important for ensuring image doesn't cause overflow */
}

.intro-image-col img {
    width: 100%;
    /* Make image fill its column */
    height: 100%;
    /* Make image fill its column's height */
    object-fit: cover;
    /* Cover ensures the image fills without distorting, cropping as needed */
    border-radius: 0;
    /* Remove border-radius as it's full width now */
}

.intro-text-col {
    flex: 1;
    /* Allows text column to grow */
    display: flex;
    /* Use flexbox to center content vertically */
    justify-content: center;
    /* Horizontally center content */
    align-items: center;
    /* Vertically center content */
    padding: 20px;
    /* Add some padding around the text content */
    box-sizing: border-box;
    /* Include padding in the element's total width and height */
    min-width: 50%;
    /* Text column will take at least 50% width */
}

.intro-text-content {
    max-width: 550px;
    /* Constrain text width for readability, adjust as needed */
    text-align: center;
    /* Center the text itself */
    padding: 20px;
    /* Add internal padding to the text block */
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {

    /* For small to medium screens (Bootstrap's md breakpoint) */
    .intro-section {
        flex-direction: column;
        /* Stack columns vertically */
    }

    .intro-image-col {
        min-width: 100%;
        /* Image takes full width */
        height: 350px;
        /* Adjust height for smaller screens */
    }

    .intro-text-col {
        min-width: 100%;
        /* Text takes full width */
        padding-top: 40px;
        /* More space above text */
        padding-bottom: 40px;
        /* More space below text */
    }
}

.map-responsive {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    /* Optional: rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Optional: subtle shadow */
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.activities-section {
    position: relative;
    /* Needed for absolute positioning of airplane graphic */
    overflow: hidden;
    /* Ensures graphic doesn't spill out */
}

/* Specific styling for "Our Best Activities" */
.activities-sub-title {
    /* font-family: 'Playfair Display', serif; Or any other cursive font you prefer */
    font-style: italic;
    color: #F87D56;
    /* A reddish-orange color from the example */
    font-size: 1.25rem;
    /* Adjust size as needed */
}

/* Adjust heading color for contrast on light background */
.activities-section .section-title h2 {
    color: #333;
    /* Darker color for headings */
}

/* Adjust paragraph color for contrast on light background */
.activities-section .section-title p {
    color: #666;
    /* Slightly lighter dark color for paragraphs */
}

/* Add this to center the text within the section-title */
.section-title {
    text-align: left;
    margin: 0 auto;
}

/* Add this to your CSS file */
.text-column-spacing {
    margin-right: 90px;
    /* Adjust this value as needed to create more space */
}


@media (max-width: 768px) {
    .section-title {
        width: 100%;
        padding: 0 20px;
        /* Add padding so text doesn't touch screen edges */
        text-align: center;
    }

    .section-title h2,
    .section-title p,
    .section-title .activities-sub-title {
        text-align: center;
    }

    .section-title .mt-4 {
        display: flex;
        justify-content: center;
    }
}


/* Card specific styles */
.activity-card {
    height: 460px;
    /* Fixed height for the card, matching your previous setting */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Pushes content to the bottom if there was internal content */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    /* Adjust shadow to match example */
    border: none;
    /* Ensure no border */
    background-color: transparent;
    /* Card itself is transparent, image fills it */
}

.activity-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the entire card area without distortion */
    border-radius: var(--bs-border-radius-4) !important;
    /* Apply Bootstrap's rounded-4 to image */
}

.activity-overlay {
    /* --- MODIFIED FOR BETTER VISIBILITY --- */
    /* Increased bottom opacity (0.7 -> 0.8) and extended the darker part higher (to 50%) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%) !important;
    width: 100%;
    /* Adjusted padding: increased top padding for better text placement within the darker gradient */
    padding: 30px 20px 20px !important;
    transition: opacity 0.3s ease;
    /* Optional: smooth fade for overlay */
    box-sizing: border-box;
    /* Ensures padding is included in the total dimensions */
    /* --- END MODIFICATION --- */
}

.activity-text {
    color: #fff !important;
    font-size: 20px;
}


.activity-overlay h5 {
    /* --- MODIFIED FOR BETTER VISIBILITY --- */
    font-size: 1.8rem;
    /* Increased font size (1.6rem -> 1.8rem) */
    margin-bottom: 0;
    /* Ensure no extra margin */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    /* Added subtle text shadow for contrast */
    /* --- END MODIFICATION --- */
}

/* Ensure the custom nav buttons used in your HTML work with the carousel */
.nav-buttons .btn {
    border: 1px solid #ddd;
    /* Subtle border */
    color: #333 !important;
    /* Dark icons */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

.nav-buttons .btn:hover {
    background-color: #f0f0f0 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.owl-carousel.activity-carousel {
    margin-left: auto;
    /* Centers the element horizontally */
    margin-right: auto;
    /* Centers the element horizontally */
    display: block;
    /* Ensures it behaves as a block element for margin auto to work */
}

@media (max-width: 768px) {
    .activity-card {
        height: 320px;
        /* Reduced height for smaller screens */
    }

    .activity-overlay {
        padding: 20px 15px 15px !important;
    }

    .activity-overlay h5 {
        font-size: 1.4rem;
    }

    .activity-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .activity-card {
        height: 280px;
    }

    .activity-overlay {
        padding: 15px 12px 12px !important;
    }

    .activity-overlay h5 {
        font-size: 1.2rem;
    }

    .activity-text {
        font-size: 0.9rem;
    }
}


@media (max-width: 768px) {
    .clubhouse-banner {
        height: 400px;
        background-position: center top;
    }

    .clubhouse-banner h2 {
        font-size: 28px;
    }

    .clubhouse-banner p {
        font-size: 16px;
    }
}

.clubhouse-banner,
.clubhouse-banner .overlay,
.clubhouse-banner h2,
.clubhouse-banner p {
    transition: none !important;
}

.clubhouse-banner:hover,
.clubhouse-banner .overlay:hover,
.clubhouse-banner h2:hover,
.clubhouse-banner p:hover {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.gem-card {
    border: none;
    background-color: #fff;
    text-align: center;
}

.gem-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.gem-info {
    margin-top: 0.75rem;
    min-height: 65px;
}

.gem-info h6 {
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}

.gem-info p {
    margin: 0;
    color: #777;
}


.local-gems-title {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.book-now-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 35px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    background-color: #f6f3e9;
    /* light beige background */
    border: 1px solid #b9a36b;
    /* soft gold border */
    border-radius: 50px;
    /* pill shape */
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1.2;
    box-shadow: none;
}

.book-now-btn .arrow-icon {
    font-size: 13px;
    color: #b9a36b;
    margin-left: 5px;
    transition: transform 0.3s ease, color 0.3s ease;
    position: relative;
    top: 1px;
}

.book-now-btn:hover {
    background-color: #b9a36b;
    color: #fff;
    border-color: #b9a36b;
}

.book-now-btn:hover .arrow-icon {
    color: #fff;
    transform: translateX(3px);
}

/*contact us*/


.join-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.join-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease;
}

.join-image:hover {
    transform: scale(1.02);
}

.join-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.join-content {
    padding: 20px;
}



.benefits-list {
    list-style: none;
    margin-bottom: 35px;
}

.benefits-list li {
    padding: 12px 0;
    font-size: 1rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 12px;
}

.benefits-list li:before {
    content: "✓";
    color: #3E5B25;
    font-weight: bold;
    font-size: 1.2rem;
}

/*dining*/

.chef-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.chef-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.chef-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.chef-image:hover img {
    transform: scale(1.05);
}

.chef-placeholder {
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, #3d7a60 0%, #2c5f4e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 8px;
}


.food-gallery h2 {
    text-align: center;
}

#foodCarousel .item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
}

#imageLightbox .modal-dialog {
    max-width: 800px;
    /* Adjust modal width */
}

#imageLightbox .modal-body img {
    width: 100%;
    /* Scale inside modal */
    height: 500px;
    /* Set your custom height */
    object-fit: contain;
    /* Or 'cover' */
}

/* ===================================== */
/* RESPONSIVE — TABLETS (max 992px)      */
/* ===================================== */
@media (max-width: 992px) {

    /* Chef Section */
    .chef-section {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .chef-image img {
        height: 380px;
    }

    .chef-content h2,
    .chef-content h3 {
        text-align: center;
    }

    /* Food Carousel */
    #foodCarousel .item img {
        height: 260px;
    }

    #imageLightbox .modal-body img {
        height: 420px;
    }
}


/* ===================================== */
/* RESPONSIVE — MOBILE LANDSCAPE (max 768px) */
/* ===================================== */
@media (max-width: 768px) {




    /* Food Carousel Images */
    #foodCarousel .item img {
        height: 220px;
    }

    #imageLightbox .modal-body img {
        height: 360px;
    }
}


/* ===================================== */
/* RESPONSIVE — MOBILE PORTRAIT (max 576px) */
/* ===================================== */
@media (max-width: 576px) {

    /* Food Images */
    #foodCarousel .item img {
        height: 180px;
        border-radius: 10px;
    }

    /* Modal */
    #imageLightbox .modal-dialog {
        max-width: 95%;
    }

    #imageLightbox .modal-body img {
        height: auto;
        max-height: 70vh;
    }
}


/* Experience */
/* Section Styles */
.section-experience {
    text-align: center;
}

.section-experience p {
    max-width: 600px;
    /* adjust until it becomes exactly 2 lines */
    margin: 0 auto;
}


/* Thumb Gallery */
.thumb-gallery {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    height: 280px;
}

.thumb-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.thumb-gallery:hover img {
    transform: scale(1.15);
}

.thumb-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

span {
    font-family: 'Cera Pro', 'Times New Roman', Times, serif;
}

.thumb-gallery:hover .thumb-gallery-overlay {
    opacity: 1;
    background: linear-gradient(to top, #3E5B25 0%, transparent 80%);
}

.thumb-gallery-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Responsive */
/* Attractions Slider Styles */
.attractions-slider-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.attractions-slider {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.1);
}

.attraction-slide {
    display: none;
    animation: fadeIn 0.6s ease;
}

.attraction-slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.attraction-slide-image {
    height: 500px;
    overflow: hidden;
}

.attraction-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attraction-slide-content {
    padding: 60px 50px;
    position: relative;
}

.attraction-slide-content h3 {
    margin-bottom: 20px;
    position: relative;
}

.attraction-slide-content p {
    line-height: 1.8;
    margin-bottom: 30px;
}

.attraction-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attraction-features span {
    display: flex;
    align-items: center;
    color: #000000;
}

.attraction-features i {
    margin-right: 10px;
}

.slider-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.slider-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary-color);
    color: #000000;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    /* smaller arrow */
}



.slider-btn:hover {
    color: #000000;
    transform: scale(1.1);
}

.slider-dots {
    display: flex;
    gap: 10px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active {
    width: 30px;
    border-radius: 6px;
}

@media (max-width: 991px) {
    .attraction-slide-image {
        height: 300px;
    }

    .attraction-slide-content {
        padding: 40px 30px;
    }

    .attraction-slide-content h3 {
        font-size: 28px;
    }

    .attraction-number {
        font-size: 60px;
        top: 10px;
        right: 20px;
    }
}

/* dining */
/* meeting events */
/* Hall Showcase */
.meeting-hall-showcase {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.meeting-hall-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.meeting-hall-image img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.meeting-hall-image:hover img {
    transform: scale(1.05);
}

.meeting-feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;

}

.meeting-feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #000000;
}

.meeting-feature-item i {
    font-size: 1.5rem;
    color: #BD9960;
}

/* Event Cards */
.meeting-event-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.meeting-event-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.meeting-event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.meeting-event-card-image {
    height: 350px;
    overflow: hidden;
    position: relative;
}

.meeting-event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.meeting-event-card:hover .meeting-event-card-image img {
    transform: scale(1.1);
}

.meeting-event-card-content {
    padding: 2.5rem;
}

.dining-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 3rem;
}

/* Thumb Gallery */
.dining-thumb-gallery {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    height: 280px;
}

.dining-thumb-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dining-thumb-gallery:hover img {
    transform: scale(1.15);
}

.dining-thumb-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 1;
    transition: opacity 0.3s ease;
}


.dining-thumb-gallery:hover .dining-thumb-gallery-overlay {
    opacity: 1;
    background: linear-gradient(to top, #3E5B25 0%, transparent 80%);
}

.dining-thumb-gallery-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ---------------------- */
/* RESPONSIVE DESIGN      */
/* ---------------------- */

/* Max Width 992px (Tablets) */
@media (max-width: 992px) {

    .meeting-hall-showcase {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .meeting-hall-image img {
        height: 450px;
    }

    .meeting-feature-list {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .meeting-event-cards {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .meeting-event-card-image {
        height: 300px;
    }
}

/* Max Width 768px (Mobile Landscape) */
@media (max-width: 768px) {

    .meeting-hall-image img {
        height: 350px;
    }


    .meeting-event-card-content {
        padding: 1.8rem;
    }

    .meeting-event-card-image {
        height: 250px;
    }
}

/* Max Width 576px (Mobile Portrait) */
@media (max-width: 576px) {

    .meeting-hall-showcase {
        gap: 2rem;
    }

    .meeting-hall-image img {
        height: 260px;
    }

    .meeting-event-card-image {
        height: 220px;
    }

}

/* offers */
/* Featured Event Card */
.offers-featured-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.offers-featured-card .offers-card-img {
    height: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #ffffff;
}

.offers-featured-card .offers-card-img img {

    width: 100%;
    object-fit: contain;
    max-width: 380px;
    height: auto;
    border-radius: 10px;

}

.offers-featured-card .offers-card-body {
    padding: 50px;
}

.offers-badge-featured {
    background: #384B40;
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: inline-block;

    /* Space for the button */
}

/* Event card equal height with flex */
.offers-event-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

/* Image */
.offers-event-card .offers-card-img-top {
    height: 280px;
    position: relative;
    overflow: hidden;
}

/* Body grows to fill */
.offers-event-card .offers-card-body {
    flex: 1;
    padding: 30px 30px 90px;
    position: relative;
}

/* Button at bottom */
.offers-event-card .btn01 {
    position: absolute;
    bottom: 25px;
    text-align: center;
}

.offers-event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
}


.offers-event-card .offers-card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.offers-event-card:hover .offers-card-img-top img {
    transform: scale(1.1);
}

.offers-event-card .offers-badge-event {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #384B40;
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
}

.offers-event-date {
    color: #B6542B;
    font-weight: 600;
    font-size: 0.95rem;
}

.offers-event-date i {
    margin-right: 8px;
}

.offers-event-card .offers-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 15px;
}

.offers-event-card .offers-card-text {
    color: #000000;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Animations */
.appear-animation {
    animation-duration: 0.75s;
    animation-fill-mode: both;
}

.promo-image-wrapper {
    display: flex;
    justify-content: center;
}

.promo-image-wrapper img {
    width: 100%;
    max-width: 420px;
    /* Keeps image centered and proportional */
    height: auto;
    border-radius: 10px;
}


.promo-buttons .btn {
    padding: 12px 30px;
    margin: 0 8px;
}

/* villa-01 */
.gallery-section {
    margin-bottom: 50px;
}

.main-gallery {
    margin-bottom: 15px;
}

.main-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.villa-badge-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #2c5530;
    color: #fff;
    padding: 10px 25px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    z-index: 10;
}

/* Owl Carousel for thumbnails */
.thumbnail-carousel {
    width: 100%;
    padding: 10px 0;
}

.thumbnail-carousel .owl-stage-outer {
    overflow: hidden;
}

.thumbnail-carousel .owl-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-carousel .item {
    width: 100%;
    display: flex;
    justify-content: center;
}

.villa-item {
    height: 120px;
    width: 180px;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s;
}

.villa-item:hover {
    border-color: #2c5530;
    transform: scale(1.05);
}

.villa-item.active {
    border-color: #2c5530;
    box-shadow: 0 4px 15px rgba(44, 85, 48, 0.4);
}

.villa-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Owl Navigation */
.thumbnail-carousel .owl-nav button::before,
.thumbnail-carousel .owl-nav button::after {
    content: none !important;
}

/* Fix span so it centers perfectly */
.thumbnail-carousel .owl-nav button span {
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.thumbnail-carousel .owl-nav button span {
    padding: 0 !important;
    margin: 0 !important;
}


/* Wrapper button */
.thumbnail-carousel .owl-nav button.owl-prev,
.thumbnail-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #3E5B25 !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    /* Prevent any browser spacing */
}

/* Position Left/Right */
.thumbnail-carousel .owl-nav button.owl-prev {
    left: -20px;
}

.thumbnail-carousel .owl-nav button.owl-next {
    right: -20px;
}

/* Hover */
.thumbnail-carousel .owl-nav button:hover {
    background: #3E5B25 !important;
}


.thumbnail-carousel .owl-dots {
    display: none;
}

/* Villa Details */
.villa-details {
    margin-bottom: 50px;
}

/* Features Grid */
.features-section {
    margin-bottom: 50px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    transition: all 0.3s;
}

.feature-item:hover {
    border-color: #3E5B25;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: #f7f7f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #3E5B25;
    flex-shrink: 0;
}

.feature-text h4 {
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.feature-text p {
    margin: 0;
}

/* Sidebar - Sticky on large screens */
.sidebar {
    position: sticky;
    top: 100px;
}

.booking-box {
    background: #f7f7f7;
    padding: 35px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.booking-box h3 {
    color: #000000;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #ddd;
}

.info-item {
    text-align: center;
}

.info-item .number {
    font-size: 32px;
    font-weight: 700;
    color: #2c5530;
    display: block;
    line-height: 1;
}

.info-item .label {
    text-transform: uppercase;
    color: #000000;
    margin-top: 8px;
}

/* Villa Selector */
.villa-selector-box {
    background: #fff;
    border: 1px solid #e7e7e7;
    padding: 30px;
    border-radius: 5px;
}

.villa-selector-box h4 {
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.villa-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 2px solid #e7e7e7;
    margin-bottom: 15px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s;
}

.villa-option:hover {
    border-color: #384B40;
}

.villa-option.selected {
    background: #f7f7f7;
    border-color: #384B40;
}

.villa-thumb {
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: 3px;
    flex-shrink: 0;
}

.villa-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.villa-option-info h5 {
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.villa-option-info p {
    color: #000000;
    margin: 0;
}

/* Special Feature Box */
.special-box {
    background: #3E5B25;
    padding: 40px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    margin-top: 50px;
}

.special-box h3 {
    text-transform: uppercase;
}


/* Amenities List */
.amenities-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.amenity-check {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #000000;
}

.amenity-check i {
    color: #2c5530;
    font-size: 16px;
}

/* ====================================================== */
/* ====================  TABLETS  ======================== */
/* ====================================================== */
@media (max-width: 992px) {

    /* Main image shrink */
    .main-image {
        height: 380px;
    }

    /* Sidebar becomes normal flow */
    .sidebar {
        position: static;
        margin-top: 40px;
    }

    /* Features grid → 2 columns still ok */
    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    /* Amenities still 2 columns */
    .amenities-list {
        grid-template-columns: 1fr 1fr;
    }

    .booking-box {
        padding: 25px;
    }
}


/* ====================================================== */
/* ==============  MOBILE LANDSCAPE  ===================== */
/* ====================================================== */
@media (max-width: 768px) {

    /* Main image */
    .main-image {
        height: 300px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        /* 1 column */
    }

    .feature-item {
        padding: 18px;
    }

    .amenities-list {
        grid-template-columns: 1fr;
    }

    .booking-box {
        padding: 20px;
    }

    .villa-selector-box {
        padding: 20px;
    }

    .villa-option {
        padding: 12px;
    }
}


/* ====================================================== */
/* ================  MOBILE PORTRAIT  ==================== */
/* ====================================================== */
@media (max-width: 576px) {

    /* Main image */
    .main-image {
        height: 220px;
    }


    /* Disable nav buttons if they overflow */
    .thumbnail-carousel .owl-nav button.owl-prev {
        left: -10px;
    }

    .thumbnail-carousel .owl-nav button.owl-next {
        right: -10px;
    }

    /* Features = 1 column clean layout */
    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-item {
        gap: 12px;
        padding: 15px;
    }

    .feature-icon {
        width: 45px;
        height: 45px;
    }

    /* Amenities */
    .amenities-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Booking Box */
    .booking-box {
        padding: 18px;
    }

    /* Quick info grid: 2 items per row still okay */
    .quick-info {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }


    /* Special box */
    .special-box {
        padding: 30px;
        margin-top: 30px;
    }
}


/* wellness */

/* Wellness Classes Section */
.classes-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.classes-text-block {
    padding: 40px;
}

.wellness-frame {
    position: relative;
    height: 500px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.wellness-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.wellness-frame:hover img {
    transform: scale(1.05);
}

/* Spa Section */
.spa-area {
    background: linear-gradient(to bottom, #f8f9f9 0%, #ffffff 100%);
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.photo-grid-cell {
    height: 300px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.photo-grid-cell.highlight {
    grid-column: span 2;
    grid-row: span 2;
    height: 620px;
}

.photo-grid-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
}

.photo-grid-cell:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.description-block {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px;
}

/* Responsive */
@media (max-width: 968px) {
    .banner-text-container h1 {
        font-size: 2.5rem;
    }

    .classes-layout {
        grid-template-columns: 1fr;
    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

    .photo-grid-cell.highlight {
        grid-column: span 1;
        grid-row: span 1;
        height: 300px;
    }

    .content-container {
        padding: 60px 5%;
    }

    .heading-primary {
        font-size: 2.2rem;
    }
}

/* Villa list */
/* Grid */
.villas-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    padding: 3rem 0 5rem;
}

/* Card */
.villas-list-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;

    /* IMPORTANT: equal height */
    display: flex;
    flex-direction: column;
}

.villas-list-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Image */
.villas-list-image {
    height: 250px;
    position: relative;
    overflow: hidden;
}

.villas-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.villas-list-card:hover .villas-list-image img {
    transform: scale(1.1);
}

/* Content */
.villas-list-content {
    flex: 1;
    /* stretch to fill card */
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.villas-list-features {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
    color: #000000;
    font-size: 0.9rem;
}

.villas-list-feature-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.villas-list-description {
    color: #000000;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* BUTTON ALWAYS AT BOTTOM */
.villas-list-btn-wrapper {
    margin-top: auto;
    /* pushes button to bottom */
}