:root {
            --brand-green: #4a4d2e;
            --brand-gold: #bca364;
            --white: #ffffff;
            --header-h: 80px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; }
        body { overflow-x: hidden; }

        /* ================= HEADER ================= */
        #main-header {
            position: fixed;
            top: 0; width: 100%; z-index: 1000;
            background: rgba(255, 255, 255, 0.85);
            height: var(--header-h);
            display: flex; align-items: center;
            border-bottom: 1px solid rgba(188, 163, 100, 0.2);
        }

        .nav-container {
            max-width: 1440px; margin: auto; width: 100%; padding: 0 30px;
            display: flex; justify-content: space-between; align-items: center; height: 100%;
        }

        .brand-logo { height: 55px; }

        .main-nav { height: 100%; }
        .main-nav ul { display: flex; list-style: none; height: 100%; align-items: center; }
        .main-nav li { height: 100%; position: relative; }

        .main-nav a {
            padding: 0 15px; height: 100%;
            display: flex; align-items: center;
            text-decoration: none; color: var(--brand-gold);
            font-size: 15px; font-weight: 600; text-transform: uppercase;
        }

        .dropdown-content {
            display: none;
            position: absolut`e;
            top: 100%; right: 50;
            background: rgba(255, 255, 255, 0.95);
            min-width: 320px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border-top: 3px solid var(--brand-gold);
        }
        
        .main-nav li:hover .dropdown-content { display: block; }
        .dropdown-content a {
            display: block; padding: 15px 20px; height: auto;
            color: var(--brand-gold) !important; border-bottom: 1px solid rgba(0,0,0,0.05);
            text-transform: none;
        }
        
        /* ================= FIXED MENU HOVER (TARGETED) ================= */

        /* 1. Only apply the gold line to the TOP menu items, NOT dropdown items */
        .main-nav > ul > li > a {
            position: relative;
            transition: color 0.3s ease;
        }
        
        .main-nav > ul > li > a::after {
            content: '';
            position: absolute;
            bottom: 20px; 
            left: 15px;
            right: 15px;
            height: 2px;
            background-color: var(--brand-gold);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .main-nav > ul > li:hover > a::after {
            transform: scaleX(1);
        }
        
        /* 2. FIX DROPDOWN: Reset height and remove the lines from inside the box */
         .dropdown-content {
            display: none;
            position: absolute;
            top: 100%; right: 50;
            background: rgba(255, 255, 255, 0.95);
            min-width: 320px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border-top: 3px solid var(--brand-gold);
        }
        
        .dropdown-content a {
            display: block !important;
            padding: 12px 20px !important; /* Proper spacing */
            height: auto !important;       /* Prevents overlapping */
            line-height: 1.5 !important;    /* Clean text spacing */
            color: #4a4d2e !important;     /* Brand Green for better contrast */
            text-transform: none !important;
            border-bottom: 1px solid #eee;
        }
        
        /* 3. IMPORTANT: This removes the gold line cutting through dropdown text */
        .dropdown-content a::after {
            display: none !important;
        }
        
        /* 4. Dropdown Hover Effect */
        .dropdown-content a:hover {
            background-color: #fdfaf3 !important;
            color: var(--brand-gold) !important;
            padding-left: 25px !important;
        }

        /* ================= HERO SLIDER ================= */
        .hero { position: relative; height: 100vh; overflow: hidden; background: #000; }
        .slide {
            position: absolute; inset: 0; opacity: 0;
            transition: opacity 1.5s ease-in-out;
            background-size: cover; background-position: center;
            transform: scale(1);
        }
        .slide.active { opacity: 1; animation: kenburns 12s infinite alternate ease-in-out; }
        @keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }

        .slider-nav-btn {
            position: absolute; top: 50%; transform: translateY(-50%); z-index: 100;
            background: rgba(0,0,0,0.5); color: #fff; border: none;
            width: 45px; height: 45px; border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .prev-btn { left: 20px; } .next-btn { right: 20px; }

        /* ================= GLOBAL BUTTON STYLE ================= */
        .btn-go { 
            background: var(--brand-green); 
            color: #fff; 
            border: none; 
            height: 40px; 
            padding: 0 25px; 
            cursor: pointer; 
            font-weight: bold; 
            border-radius: 4px;
            text-transform: uppercase;
        }
        .btn-go:hover { background: #3a3d24; }

        /* ================= BOOKING BAR (DESKTOP ONLY) ================= */
        .booking-bar { position: absolute; bottom: 40px; width: 100%; display: flex; justify-content: center; z-index: 20; }
        .booking-inner { background: rgba(0,0,0,0.8); padding: 20px; display: flex; gap: 15px; width: 95%; max-width: 1200px; border-radius: 5px; align-items: flex-end; }
        .field { flex: 1; display: flex; flex-direction: column; color: #fff; font-size: 11px; }
        .field select, .field input { height: 40px; margin-top: 5px; border: none; padding: 0 10px; border-radius: 2px; }

        /* ================= MOBILE UI ================= */
        .mobile-header { display: none; text-align: center; padding: 10px; background: #fff; border-bottom: 1px solid #eee; }
        .mobile-outlet-bar { display: none; width: 100%; }
        .mobile-outlet-bar select { 
            width: 100%; padding: 15px; border: none; font-size: 18px; 
            background: #fff; appearance: none; color: #333; text-align: center;
        }

        .mobile-action-nav { 
            display: none; grid-template-columns: 1fr 1fr 1fr; 
            background: var(--brand-green); color: #fff; text-align: center;
            border-top: 1px solid rgba(255,255,255,0.2);
        }

        .action-item { 
            padding: 20px 0; cursor: pointer; 
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            position: relative;
        }
        .action-item:not(:last-child)::after {
            content: ""; position: absolute; right: 0; top: 20%; height: 60%; width: 1px;
            background: rgba(255,255,255,0.15);
        }

        .action-item i { font-size: 26px; } 
        .action-item span { font-size: 16px; font-weight: 500; letter-spacing: 0.5px; }

        .mobile-expand-menu { display: none; background: var(--brand-green); width: 100%; }
        .mobile-expand-menu.active { display: block; border-top: 1px solid rgba(255,255,255,0.1); }
        .mobile-expand-menu a {
            display: block; padding: 18px 25px; color: #fff; text-decoration: none;
            text-transform: uppercase; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
            background: rgba(0,0,0,0.05);
        }

        @media (max-width: 1200px) {
            #main-header, .booking-bar { display: none; }
            .mobile-header, .mobile-outlet-bar, .mobile-action-nav { display: grid; }
            .hero { height: 35vh; }
        }

        /* ================= MODAL FORM ================= */
        .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
        .modal-content { background: #fff; width: 100%; max-width: 400px; border-radius: 8px; position: relative; padding: 30px; }
        .close-modal { position: absolute; right: 15px; top: 15px; font-size: 20px; cursor: pointer; color: #666; }
        .modal-content h2 { margin-bottom: 20px; color: #333; font-size: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        .modal-field { margin-bottom: 15px; }
        .modal-field label { display: block; font-size: 12px; color: #666; margin-bottom: 5px; }
        .modal-field select, .modal-field input { width: 100%; height: 45px; border: 1px solid #ddd; padding: 0 10px; border-radius: 4px; }
        .btn-modal-book { width: 100%; background: var(--brand-green); color: #fff; border: none; height: 45px; font-weight: bold; border-radius: 4px; margin-top: 10px; cursor: pointer; }

        /* ================= FOOTER OLD ================= */
        footer { background: var(--brand-green); color: #fff; padding: 60px 20px; text-align: center; }
        .contact-grid { display: flex; justify-content: center; gap: 30px; margin: 25px 0; flex-wrap: wrap; }
        .contact-grid span { font-size: 14px; }
        .social-icons { display: flex; justify-content: center; gap: 15px; margin: 20px 0; }
        .social-icons a { background: #fff; color: var(--brand-green); width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 4px; text-decoration: none; }
        .footer-nav { margin: 25px 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; font-size: 14px; }
        .footer-nav a { color: #fff; text-decoration: none; opacity: 0.8; }
        
        /* ================= FOOTER NEW ================= */
        
        /* --- Professional Triple-Property Footer --- */
        .main-footer {
            background-color: #4a5d33; /* Brand Green from logo background */
            color: #ffffff;
            padding: 60px 0 20px;
            font-family: 'Arial', sans-serif;
        }
        
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Property Maps Grid */
        .footer-properties-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .property-box {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 8px;
            border-bottom: 3px solid #d4af37; /* Gold accent */
        }
        
        .property-box h4 {
            color: #d4af37;
            margin-bottom: 12px;
            font-size: 16px;
            text-transform: uppercase;
        }
        
        .map-wrapper {
            width: 100%;
            height: 180px;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        
        .map-wrapper iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* Bottom Footer Area */
        .footer-bottom-info {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 40px;
            gap: 30px;
        }
        
        .footer-contact-info a {
            color: #ffffff;
            text-decoration: none;
            display: block;
            margin-bottom: 10px;
        }
        
        .footer-social-icons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            justify-content: center; /* This centers the icons horizontally */
            align-items: center;     /* This ensures they are vertically aligned */
        }
        
        .footer-social-icons a {
            background: #ffffff;
            color: #4a5d33;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }
        
        .footer-social-icons a:hover {
            background: #d4af37;
            color: white;
        }
        
        .footer-copyright {
            text-align: center;
            margin-top: 40px;
            font-size: 13px;
            opacity: 0.7;
        }
        
        @media (max-width: 992px) {
            .footer-properties-grid { grid-template-columns: 1fr; }
        }
        
        /* --- Home page ABout us , Our Hotels , Hotel Amenities New Content Styles --- */
        .card-contact-bar {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 15px;
            padding-top: 10px;
        }
        
        .contact-icon-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 18px;
            transition: 0.3s;
            border: 1px solid #eee;
        }
        
        /* Specific Colors for Icons */
        .icon-call { color: #4a5d33; background: #fdfaf3; }
        .icon-email { color: #d4af37; background: #fdfaf3; }
        .icon-wa { color: #25D366; background: #f0fff4; border-color: #25D366; }
        
        .contact-icon-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        
        .section-padding { 
            padding: 80px 20px; 
            max-width: 1200px; 
            margin: 0 auto; 
            text-align: center; 
        }
        
        .headline { 
            font-size: 32px; 
            color: var(--brand-green); 
            margin-bottom: 15px; 
            text-transform: uppercase; 
            position: relative; 
            padding-bottom: 15px; 
        }
        
        /* Gold line under headings */
        .headline::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 60px; 
            height: 3px; 
            background: var(--brand-gold); 
        }
        
        .sub-text { 
            font-size: 17px; 
            color: #666; 
            line-height: 1.8; 
            margin-top: 25px; 
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Hotel Grid */
        .hotels-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 30px; 
            margin-top: 50px; 
        }
        
        .hotel-card { 
            background: #fff; 
            border: 1px solid #eee; 
            transition: 0.3s; 
            text-align: left; 
            overflow: hidden; 
            border-radius: 4px;
        }
        
        .hotel-card:hover { 
            transform: translateY(-10px); 
            box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
        }
        
        .hotel-card img { 
            width: 100%; 
            height: 220px; 
            object-fit: cover; 
        }
        
        .card-body { padding: 20px; }
        .card-body h3 { color: var(--brand-green); margin-bottom: 10px; font-size: 18px; }
        .card-body p { font-size: 14px; color: #777; line-height: 1.5; margin-bottom: 15px; }
        
        /* Amenities Block */
        .amenities-bg { background: #f9f9f9; padding: 20px 0; }
        .amenities-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 40px; 
            max-width: 1100px; 
            margin: 40px auto 0; 
        }
        
        .amenity-item { text-align: center; }
        .amenity-item i { font-size: 40px; color: var(--brand-gold); margin-bottom: 15px; }
        .amenity-item h4 { color: var(--brand-green); margin-bottom: 10px; }
        .amenity-item p { font-size: 14px; color: #777; }
        
        /* Responsive adjustments */
        @media (max-width: 992px) {
            .hotels-grid, .amenities-grid { 
                grid-template-columns: 1fr; 
                max-width: 500px;
            }
        }
        
        /* Stylized Headline - Perfectly Centered & Proportional */
        .headline { 
            font-size: 28px; 
            color: var(--brand-green); 
            margin: 0 auto 30px auto; /* Centers the 'table' on the page */
            text-transform: uppercase; 
            position: relative; 
            padding-bottom: 15px; 
            display: table; /* Shrinks container to text width */
            text-align: center;
            letter-spacing: 1px;
        }
        
        .headline::after { 
            content: ''; 
            position: absolute; 
            bottom: 0; 
            left: 50%; /* Start at the dead center */
            transform: translateX(-50%); /* Pull back by half its own width to center */
            width: 80%; /* 20% shorter than the text container */
            height: 1.2px; 
            background: linear-gradient(to right, transparent, var(--brand-gold), transparent); 
        }
        
        /* Ensure sections have centered text overall */
        .section-padding {
            padding: 60px 20px;
            text-align: center;
        }
        
        
        /* Hotel amentieis section
        
        /* Amenities Section Styles */
        .amenities-bg { background: #fdfaf3; padding: 60px 0; }
        
        .amenities-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
            gap: 30px; 
            margin-top: 40px; 
        }
        
        .amenity-item { text-align: center; padding: 20px; }
        .amenity-item i { font-size: 35px; color: var(--brand-gold); margin-bottom: 15px; }
        .amenity-item p { font-size: 15px; font-weight: 600; color: var(--brand-green); }
        
        /* Hidden Amenities Drawer */
        #more-amenities {
            display: none;
            padding-top: 30px;
            border-top: 1px dashed var(--brand-gold);
            margin-top: 30px;
        }
        
        #more-amenities.active {
            display: block;
        }
        
        .other-amenities-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            text-align: left;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .other-item {
            font-size: 14px;
            color: #555;
            display: flex;
            align-items: center;
        }
        
        .other-item::before {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            margin-right: 10px;
            color: var(--brand-gold);
            font-size: 12px;
        }
        
        .btn-toggle-amenities {
            margin-top: 40px;
            background: transparent;
            border: 1px solid var(--brand-gold);
            color: var(--brand-gold);
            padding: 12px 30px;
            cursor: pointer;
            font-weight: bold;
            text-transform: uppercase;
            transition: 0.3s;
        }
        
        .btn-toggle-amenities:hover {
            background: var(--brand-gold);
            color: #fff;
        }
        
        /* Events & Group Booking Styles */
        .events-section { padding: 80px 20px; background: #fff; }
        
        .event-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        
        .event-content { text-align: left; }
        .event-tag { 
            color: var(--brand-gold); 
            font-weight: bold; 
            text-transform: uppercase; 
            font-size: 14px; 
            letter-spacing: 2px;
        }
        
        .event-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 30px 0;
        }
        
        .stat-box {
            background: #fdfaf3;
            padding: 20px;
            border-left: 4px solid var(--brand-gold);
        }
        
        .stat-box h4 { color: var(--brand-green); font-size: 18px; margin-bottom: 5px; }
        .stat-box p { font-size: 13px; color: #666; }
        
        .event-image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .event-img { 
            width: 100%; 
            height: 200px; 
            object-fit: cover; 
            border-radius: 8px; 
        }
        
        .event-img.large { grid-row: span 2; height: 415px; }
        
        @media (max-width: 992px) {
            .event-container { grid-template-columns: 1fr; }
            .event-content { text-align: center; }
        }
        
        /* Whatsapp chat
        
    /* Sticky WhatsApp Mobile */
        .sticky-wa-mobile {
            display: none; /* Hidden on Desktop */
            position: fixed;
            bottom: 30px; /* Positioned above the mobile action nav */
            left: 20px;
            z-index: 999;
            width: 55px;
            height: 55px;
            background-color: #25D366;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: 2px 4px 15px rgba(0,0,0,0.2);
            text-decoration: none;
            transition: transform 0.3s ease;
        }
        
        .sticky-wa-mobile:active {
            transform: scale(0.9);
        }
        
        /* Show only on Mobile/Tablets */
        @media (max-width: 200px) {
            .sticky-wa-mobile {
                display: flex;
            }
        }



/* --- Golden Moment: Full Transparent Sub-Bar-Menu --- */
:root {
    --sub-bar-bg: rgba(74, 77, 46, 0.85); /* Brand Green #4a4d2e at 85% */
    --sub-bar-height: 40px;
}

.hotel-sub-bar {
    background-color: var(--sub-bar-bg) !important;
    width: 100%;
    position: fixed; 
    top: var(--header-h); /* Aligns below 80px main header */
    left: 0;
    z-index: 999;
    height: var(--sub-bar-height); 
    display: flex;
    align-items: center;
    backdrop-filter: blur(0px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sub-flex {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

/* Hotel Name Tag - Transparent Green with White Text */
.hotel-name-tag {
    background-color: transparent !important; /* Blends with bar */
    color: #ffffff !important;
    padding: 0 25px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    /* The Rockland Divider */
    border-right: 1px solid rgba(255, 255, 255, 0.4); 
    transition: all 0.3s ease;
}

.hotel-name-tag:hover {
    background-color: var(--brand-gold) !important;
    color: #ffffff !important;
}

/* Navigation Links List */
.hotel-sub-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    height: 100%;
}

.hotel-sub-links li {
    height: 100%;
    /* Subtle separators between menu items */
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.hotel-sub-links li a {
    color: #ffffff !important;
    text-decoration: none;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    height: 100%;
    transition: all 0.3s ease;
}

/* Active & Hover States */
.hotel-sub-links li a:hover, 
.hotel-sub-links li a.active {
    background-color: var(--brand-gold) !important; /* Gold #bca364 */
    color: #ffffff !important;
}

/* Fix for Body Content Overlapping */
body.hotel-page {
    padding-top: calc(var(--header-h) + var(--sub-bar-height)) !important;
}

/* Mobile Responsiveness: Horizontal Scroll */
@media (max-width: 768px) {
    .sub-flex {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .hotel-sub-links {
        display: flex;
    }
}

/* 1. Fix the Wrapper Position */
.hotel-main-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    width: 100%;
}

/* 2. Style the Page Banner (The section in your screenshot) */
.page-banner {
    background: #000b1d !important; /* Matches your dark navy */
    min-height: 250px;              /* Gives it height to center in */
    display: flex;                  /* Centers content */
    align-items: center;            /* Vertical Center */
    justify-content: center;        /* Horizontal Center */
    margin-top: 0;                  /* Ensures it sits right under header */
    padding: 60px 20px !important;  /* Responsive padding */
}

/* 3. Fix the Title Color and Blue "L" */
.page-banner h1 {
    color: #b5c18e !important;      /* Theme Light Green */
    font-size: 42px;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0;
    font-weight: 700;
}

/* Force kill any blue links or spans inside h1 */
.page-banner h1, 
.page-banner h1 span {
    color: #b5c18e !important;
    text-decoration: none !important;
}

/* 4. Responsive adjustments */
@media (max-width: 768px) {
    .page-banner {
        min-height: 180px;
        padding: 40px 10px !important;
    }
    .page-banner h1 {
        font-size: 28px;
        letter-spacing: 2px;
    }
}