/* --- VARIABLES & RESETS ------------------------------------------------ */
:root {
    --color-primary: #9E7C33; 
    --color-secondary: #C29F54; 
    --color-text: #333333; 
    --color-light-bg: #F8F8F8; 
    --color-light-accent: #F9F4E5; 
    --color-shadow: rgba(0, 0, 0, 0.1);
    --font-family: 'Georgia', serif; 
    --font-alt: 'Helvetica Neue', sans-serif;
    --border-radius: 6px;
    --max-width: 1200px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color-text);
    background-color: white;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--color-secondary);
}

h1, h2, h3, h4 {
    font-family: var(--font-family);
    margin-bottom: 0.5em;
    font-weight: 700;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section-container {
    padding: 80px 0;
    text-align: center;
}

.section-header {
    margin-bottom: 50px;
    padding: 0 20px;
}

.section-header h2 {
    font-size: 2.5em;
    color: var(--color-primary);
}

.section-header p {
    font-size: 1.1em;
    color: #666;
}

/* --- FLEX & GRID LAYOUTS ----------------------------------------------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: center;
    text-align: left;
}

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

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: block;
}

/* --- BUTTONS ----------------------------------------------------------- */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s;
    font-family: var(--font-alt);
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    border: 2px solid var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: white;
}

/* --- ANIMATION BASE STATE ---------------------------------------------- */
.anim-target {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up {
    transform: translateY(30px);
}
.fade-in-left {
    transform: translateX(-50px);
}
.fade-in-right {
    transform: translateX(50px);
}

.anim-target.animate {
    opacity: 1;
    transform: none; 
}

@keyframes drop-in {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- NAVBAR ------------------------------------------------------------ */
.navbar {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 15px 10px;
    box-shadow: 0 2px 10px var(--color-shadow);
    z-index: 9999; 
    width: 100%;
}

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-image {
    height: 60px; 
    margin-left: 10px; 
    
}

img.logo-image{
    border-radius: 60px;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
}

.nav-links li {
    margin: 0 10px;
    position: relative;
}

.nav-links a {
    color: var(--color-text);
    font-weight: 500;
    padding: 5px 0;
    font-family: var(--font-alt);
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px var(--color-shadow);
    z-index: 1;
    padding: 10px 0;
    border-radius: var(--border-radius);
    top: 100%; 
    left: 0;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: var(--color-text);
    padding: 8px 16px;
    display: block;
    text-align: left;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: var(--color-light-accent);
}


/* --- MOBILE MENU SETUP (Hidden by default on Desktop) --- */

/* Hide the toggle checkbox itself */
.menu-toggle {
    display: none;
}

/* Style the hamburger icon button */
.menu-icon {
    display: none; /* Hide by default (desktop first) */
    font-size: 1.5em;
    cursor: pointer;
    color: var(--color-primary);
    padding: 10px;
    z-index: 10000; /* Ensure it's above everything */
}

/* --- HERO CAROUSEL FIXES ----------------------------------------------- */
.hero-carousel {
    position: relative;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
    margin-top: 90px; 
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
    filter: brightness(0.7);
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    z-index: 10;
}

.hero-overlay h1 {
    font-size: 4em;
    margin-bottom: 10px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-overlay p {
    font-size: 1.5em;
    margin-bottom: 30px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* --- VALUE BAR (Below Hero) -------------------------------------------- */
.value-bar {
    display: flex;
    justify-content: space-around;
    padding: 20px 40px;
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px var(--color-shadow);
    margin-top: -50px; 
    position: relative;
    z-index: 20;
    text-align: center;
}

.value-item {
    flex-basis: 20%; 
    padding: 10px;
}

.value-item i {
    font-size: 2em;
    color: var(--color-primary); 
    margin-bottom: 8px;
}

.value-item p {
    font-size: 0.9em;
    font-family: var(--font-alt);
    font-weight: bold;
    color: #555;
}

/* --- USP/DINING LIST --------------------------------------------------- */
.usp-list {
    list-style: none;
    padding-left: 0;
    text-align: left;
}

.usp-list li {
    font-size: 1.1em;
    margin-bottom: 15px;
    line-height: 1.4;
    font-family: var(--font-alt);
}

.usp-list i {
    color: var(--color-primary); 
    margin-right: 10px;
}

/* ----------------------------------------------------------------------- */
/* --- RESIDENCE CARDS & HOVER EFFECT ------------------------------------ */
/* ----------------------------------------------------------------------- */

/* Base Card Style (Used for Residences and Events) */
.residence-card {
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: white;
    box-shadow: 0 4px 12px var(--color-shadow);
    position: relative; /* Essential for positioning the overlay */
    min-height: 350px; /* Set a minimum height for the card container */
    display: flex; 
    flex-direction: column;
    justify-content: flex-end; 
}

/* New: Container for the background image and overlay (The whole card is now this link) */
.residence-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    text-decoration: none; 
    transition: filter 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Initial position for text at the bottom */
}

/* Overlay for text content - initial visibility (Bottom Bar) */
.card-content-overlay {
    background-color: rgba(0, 0, 0, 0.4); 
    color: white;
    padding: 20px;
    transition: all 0.4s ease; /* Transition both color and opacity */
    text-align: left; 
}

/* Centered Button Overlay - Hidden by default */
.hover-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for button visibility */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.4s ease;
}

/* Hover effect on the entire card */
.residence-card:hover .card-content-overlay {
    /* Hide/fade out the bottom text bar */
    background-color: rgba(0, 0, 0, 0.0);
    opacity: 0;
}

.residence-card:hover .hover-button-overlay {
    opacity: 1; /* Fade in the button */
}

/* Ensure text inside the initial overlay is visible */
.card-content-overlay h3 {
    color: white;
    margin-bottom: 5px;
}
.card-content-overlay p {
    color: #ccc;
    font-size: 0.9em;
    margin-bottom: 0;
}

/* Style the button inside the hover overlay */
.hover-button-overlay .btn-secondary,
.hover-button-overlay .btn-primary { 
    text-align: center;
}


/* --- GALLERY NAVIGATION BAR STYLING (NEW SECTION) --- */
.gallery-navigation {
    /* Centers the buttons horizontally */
    text-align: center;
    /* Adds separation from the header and the grid */
    margin-bottom: 30px; 
    margin-top: -20px; /* Adjust spacing above the buttons */
}

.gallery-btn {
    /* Uses your existing .btn-secondary styles */
    /* Add margin to separate the buttons from each other */
    margin: 0 10px; 
    min-width: 220px; /* Gives the buttons a modern, substantial look */
}

/* ----------------------------------------------------------------------- */
/* --- CONTACT FORMS (Separated Card Look) ------------------------------- */
/* ----------------------------------------------------------------------- */

/* CONTACT FORMS GRID - Outer Container for Grid Layout ONLY */
.contact-forms-grid {
    padding: 40px;
    /* Background and shadow are now on the inner elements */
}

/* Styling for INDIVIDUAL Form Cards */
#booking, #event-inquiry {
    padding: 40px;
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px var(--color-shadow);
    height: 100%; /* Ensures both cards are the same height */
}

.contact-forms-grid h3 {
    color: var(--color-primary); 
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.9em;
    color: #555;
}

.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-family: var(--font-alt);
    font-size: 1em;
}

/* --- STICKY ICONS ------------------------------------------------------ */
.sticky-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px; 
    background-color: #25d366; 
    color: white;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    font-size: 2.2em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 900;
}

.scroll-up-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background-color: var(--color-primary); 
    color: white;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 900;
    opacity: 0;
    transition: opacity 0.3s;
}

.scroll-up-btn.visible {
    opacity: 1;
}

/* --- FOOTER ------------------------------------------------------------ */
.main-footer {
    background-color: #222;
    color: white;
    padding-top: 50px;
    font-family: var(--font-alt);
}

.footer-grid {
    display: grid;
    /* Adjusted last column size for better horizontal room */
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr 2.7fr; 
    gap: 30px;
    padding-bottom: 40px;
    text-align: left;
}

.footer-column h4 {
    color: white;
    font-size: 1.2em;
    margin-bottom: 20px;
    font-family: var(--font-alt);
    font-weight: bold;
}

.footer-column a, .footer-column p {
    display: block;
    color: #ccc;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.footer-column a:hover {
    color: var(--color-secondary); 
}

/* --- FOOTER MAP ALIGNMENT FIX (Side-by-Side Layout) --- */
.address-map-container {
    /* Use Flexbox to align address and map horizontally */
    display: flex; 
    justify-content: space-between; 
    align-items: center; /* Align items to the top */
    margin-bottom: 10px; 
    /* Ensures the container wraps the content of both address and map */
}

/* New rule: This targets the inner div containing the address text */
.address-map-container > div {
    flex-grow: 1; /* Allows the address text to take up most of the available space */
    padding-right: 15px; /* Adds a little separation from the map */
}

/* Ensure the address text is not constrained too much */
.address-map-container p {
    margin-bottom: 0;
    max-width: 100%; /* Important: Allows text to use full width of the 'div' above */
    display: block; /* Overrides inline-block potential */
}

/* --- MAP EMBED SIZING (Fixed size for side-by-side display) --- */
.map-embed-container {
    /* Fixed width/height for the map when it's next to the address */
    width: 150px; 
    height: 120px; 
    flex-shrink: 0; /* Prevents map from shrinking */
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px var(--color-shadow);
    margin-top: 5px; 
    margin-bottom: 20px; 
}

.map-embed-container iframe {
    /* Ensures the iframe fills its container */
    width: 100%;
    height: 100%;
    display: block;
}


.social-links a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 10px;
    color: white;
    transition: background-color 0.3s, border-color 0.3s;
}

.social-links a:hover {
    background-color: var(--color-secondary); 
    border-color: var(--color-secondary);
}

.footer-bottom {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid #333;
    font-size: 0.8em;
    color: #888;
}
/* --- MEDIA QUERIES FOR RESPONSIVENESS (Ensures correct stacking on mobile) --- */

/* Tablet & Smaller Desktops */
@media (max-width: 992px) {
    .nav-container {
        flex-wrap: wrap;
    }
    .nav-links {
        order: 3; 
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    /* OVERRIDE: Keep contact forms side-by-side on tablet */
    .contact-forms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .value-bar {
        flex-wrap: wrap;
    }
    .value-item {
        flex-basis: 50%;
        margin-bottom: 20px;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Adjusted footer grid for tablet */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .logo-image {
        height: 50px; 
        margin-left: 0; 
    }
    .hero-carousel {
        margin-top: 120px; /* Increased for mobile/tablet safety */
    }
    
    .address-map-container {
        display: block; 
    }
    .address-map-container > div {
        padding-right: 0; 
    }
    .map-embed-container {
        /* Ensure map is full width of column when stacked vertically */
        max-width: 100%;
        width: 100%;
        height: 180px; 
    }
    
}

/* Mobile Devices */
@media (max-width: 600px) {
    /* --- NAVBAR OVERHAUL FOR MOBILE --- */
    
    .nav-container {
        flex-wrap: nowrap; 
        justify-content: space-between;
        padding: 0 20px;
    }
    
    /* 1. SHOW THE HAMBURGER ICON */
    .menu-icon {
        display: block; 
        order: 2; 
    }

    /* 2. HIDE THE FULL MENU AND MAKE IT COLLAPSIBLE */
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        position: absolute;
        top: 90px;
        left: 0;
        width: 100%;
        
        height: 0; /* STARTING HEIGHT: HIDDEN */
        overflow: hidden;
        transition: height 0.4s ease-in-out, padding 0.4s ease-in-out; 
        
        background-color: white; 
        border-top: 1px solid #eee;
        box-shadow: 0 4px 10px var(--color-shadow);
        z-index: 9990; 
        padding: 0;
    }
    
    .nav-links li {
        width: 100%;
        margin: 0;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .nav-links a {
        display: block;
        padding: 15px 0;
    }
    
    /* 3. OPEN THE MENU WHEN THE CHECKBOX IS CHECKED */
    .menu-toggle:checked ~ .nav-links {
        /* I increased the height here to accommodate the nested dropdowns */
        height: 600px; 
        padding: 10px 0;
    }
    
    /* 4. FIXING THE NESTED DROPDOWNS */
    
    /* Force the dropdown content to display when the mobile menu is open */
    .dropdown-content {
        /* Overrides the desktop default of display: none */
        display: block; 
        
        /* Resets positioning from desktop (static makes it flow naturally) */
        position: static;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        background-color: var(--color-light-accent); /* Lighter background for nested links */
    }
    
    /* Hide the caret icon on mobile since the menu is already open */
    .dropdown-toggle i {
        display: none; 
    }
    
    /* Make the top-level dropdown link (e.g., "Our Hotels") visible and clickable */
    .nav-links .dropdown-toggle {
        display: block;
    }

    /* Style for the individual nested links */
    .nav-links .dropdown-content a {
        padding: 10px 20px;
        text-align: center;
        border-bottom: none;
        font-size: 0.9em;
    }

    /* Ensure desktop hover functionality doesn't interfere */
    .dropdown:hover .dropdown-content {
        display: block; /* We want it visible on mobile */
    }

    /* 5. HIDE THE DESKTOP BUTTON */
    .navbar .desktop-only {
        display: none; 
    }
    
    /* ... (rest of your existing mobile rules) ... */
    .hero-overlay h1 {
        font-size: 2.5em;
    }
    .hero-overlay p {
        font-size: 1.1em;
    }
    .value-bar {
        padding: 20px;
        flex-direction: column;
        margin-top: -20px; 
    }
    .value-item {
        flex-basis: 100%;
        margin-bottom: 10px;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Inside @media (max-width: 600px) { ... } */

/* NEW: Stacking the gallery navigation buttons on mobile */
.gallery-navigation {
    display: flex; /* Enables flex for vertical stacking */
    flex-direction: column;
    gap: 15px; /* Adds space between stacked buttons */
    margin-top: 10px;
    margin-bottom: 20px;
}

.gallery-btn {
    width: 100%; /* Makes buttons full-width on mobile */
    margin: 0;
}
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .logo-image {
        height: 45px; 
        margin-left: 0; 
    }
    .contact-forms-grid {
        grid-template-columns: 1fr;
    }
    #booking, #event-inquiry {
        padding: 30px;
    }
    .no-wrap-text,
    .section-header p,
    .usp-list li,
    .footer-column p,
    .footer-column a,
    .value-item p {
        white-space: normal; 
    }
}