:root {
            /* Rockland Branding Colors */
            --brand-green: #000040; /* Updated to Rockland Navy Blue */
            --brand-gold: #b4975a;  /* Updated to Rockland Muted Gold */
            --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.95); /* Slightly more solid for readability */
            height: var(--header-h);
            display: flex; align-items: center;
            border-bottom: 1px solid rgba(180, 151, 90, 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: absolute;
            top: 100%; right: 50;
            background: rgba(255, 255, 255, 0.98);
            min-width: 320px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border-top: 3px solid var(--brand-green); /* Navy Blue Top border */
        }
        
        .main-nav li:hover .dropdown-content { display: block; }
        .dropdown-content a {
            display: block !important; padding: 12px 20px !important; height: auto !important;
            line-height: 1.5 !important;
            color: var(--brand-green) !important; /* Navy Blue text */
            text-transform: none !important;
            border-bottom: 1px solid #eee;
        }
        
        /* ================= FIXED MENU HOVER (TARGETED) ================= */
        .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); }

        .dropdown-content a::after { display: none !important; }
        .dropdown-content a:hover {
            background-color: #f9f9f9 !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); /* Rockland Navy */
            color: #fff; border: none; height: 40px; padding: 0 25px; 
            cursor: pointer; font-weight: bold; border-radius: 4px;
            text-transform: uppercase;
        }
        .btn-go:hover { background: #00002b; }

        /* ================= BOOKING BAR ================= */
        .booking-bar { position: absolute; bottom: 40px; width: 100%; display: flex; justify-content: center; z-index: 20; }
        .booking-inner { background: rgba(0,0,0,0.65); 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; }

		/* ================= NEW THEMED FOOTER ================= */
		.main-footer {
			background-color: var(--brand-green); /* Rockland Navy Blue / Green */
			color: #ffffff;
			padding: 60px 0 20px;
			font-family: 'Arial', sans-serif;
		}

		.footer-container { 
			max-width: 1200px; 
			margin: 0 auto; /* Corrected typo: heightmargin -> margin */
			padding: 0 20px; 
		}

		/* Property Maps Grid - CENTERED */
		.footer-properties-grid { 
			display: grid; 
			/* This makes 2 columns but ensures they center if they don't fill the whole row */
			grid-template-columns: repeat(auto-fit, minmax(350px, 450px)); 
			gap: 30px; 
			margin-bottom: 50px; 
			justify-content: center; /* THIS KEY LINE CENTERS THE BOXES */
		}

		.property-box {
			background: rgba(255, 255, 255, 0.05);
			padding: 20px; 
			border-radius: 8px;
			border-bottom: 3px solid var(--brand-gold); /* Gold accent */
			text-align: center; /* Centers text inside the box */
		}

		.property-box h4 { 
			color: var(--brand-gold); 
			margin-bottom: 12px; 
			font-size: 16px; 
			text-transform: uppercase; 
		}

		.map-wrapper { 
			width: 100%; 
			height: 250px; 
			border-radius: 4px; 
			overflow: hidden; 
			margin-bottom: 15px; 
		}

		.map-wrapper iframe { 
			width: 100%; 
			height: 100%; 
			border: none; 
		}

		.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; 
			align-items: center; 
		}

		.footer-social-icons a {
			background: #ffffff; 
			color: var(--brand-green); 
			width: 35px; 
			height: 35px;
			border-radius: 50%; 
			display: flex; 
			align-items: center; 
			justify-content: center; 
			transition: 0.3s;
		}

		.footer-social-icons a:hover { 
			background: var(--brand-gold); 
			color: white; 
		}

		.footer-copyright { 
			text-align: center; 
			margin-top: 40px; 
			font-size: 13px; 
			opacity: 0.7; 
		}

		/* Responsive: Stacks to 1 column on smaller screens */
		@media (max-width: 992px) { 
			.footer-properties-grid { 
				grid-template-columns: 1fr; 
				max-width: 500px; 
				margin-left: auto; 
				margin-right: auto; 
			} 
		}

        /* ================= CONTENT SECTIONS ================= */
        .section-padding { padding: 60px 20px; max-width: 1200px; margin: 0 auto; text-align: center; }
        
        .headline { 
            font-size: 28px; color: var(--brand-green); margin: 0 auto 30px auto; 
            text-transform: uppercase; position: relative; padding-bottom: 15px; 
            display: table; text-align: center; letter-spacing: 1px;
        }
        
        .headline::after { 
            content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); 
            width: 80%; height: 1.2px; 
            background: linear-gradient(to right, transparent, var(--brand-gold), transparent); 
        }

        .sub-text { font-size: 17px; color: #666; line-height: 1.8; margin-top: 25px; max-width: 900px; margin: 25px auto 0; }
        
.hotels-grid { 
            display: grid; 
            /* This tells the grid to fit as many as possible (min 350px wide) 
               but expand to fill ALL available empty space (1fr) */
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
            gap: 30px; 
            margin-top: 50px;
            width: 100%;
            justify-content: center;
        }
        
        .hotel-card { 
            background: #fff; 
            border: 1px solid #eee; 
            transition: 0.3s; 
            text-align: left; 
            overflow: hidden; 
            border-radius: 4px;
            width: 100%; /* Ensures card fills the grid slot */
            display: flex;
            flex-direction: column;
        }
        
        /* Ensures the image stays proportional even when the card expands */
        .hotel-card img { 
            width: 100%; 
            height: 280px; /* Slightly taller for 2-column layout */
            object-fit: cover; 
        }

        /* Responsive: If the screen is too small for 350px cards, 
           it will stack them vertically automatically */
        @media (max-width: 768px) {
            .hotels-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 40px auto 0;
            }
        }        .hotel-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
        
        .card-body { padding: 20px; }
        .card-body h3 { color: var(--brand-green); margin-bottom: 10px; font-size: 18px; }
        
        .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; }
        .icon-call { color: var(--brand-green); background: #fdfaf3; }
        .icon-email { color: var(--brand-gold); background: #fdfaf3; }
        .icon-wa { color: #25D366; background: #f0fff4; border-color: #25D366; }

        /* ================= AMENITIES SECTION ================= */
        .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); }
        
        #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 SECTION ================= */
       /* 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 BUTTON ================= */
        .sticky-wa-mobile {
            position: fixed; bottom: 30px; 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;
        }