/* ==========================================================================
   Grand Resort Puri - Custom Premium Design System & Stylesheet
   Color Palette: Deep Luxury Navy/Slate, Brand Gold, Brand Lush Green
   ========================================================================== */

/* 1. Global Reset & Brand Design Tokens */
:root {
    --primary-bg: #F4F0E6;      /* Warm premium neutral resort beige */
    --secondary-bg: #FFFFFF;    /* Clean white card backgrounds */
    --glass-bg: rgba(255, 255, 255, 0.75); /* White glassmorphic transparency */
    
    /* Brand Logo Colors */
    --gold-primary: #AA7C11;    /* Vibrant Gold Yellow */
    --gold-medium: #AA7C11;     /* Logo gold shade */
    --gold-dark: #8C6207;       /* Deep rich gold */
    --green-primary: #1B5E20;   /* Forest green wave */
    --green-light: #2E7D32;     /* Vibrant leaf green */
    --green-dark: #0F380F;      /* Deep emerald green */
    
    /* Text Hues */
    --text-light: #2C2620;      /* Primary dark text on beige background */
    --text-muted: #6B6259;     /* Warm taupe/grey for descriptions */
    --text-dark: #FFFFFF;      /* Light text on dark elements */
    --text-on-gold: #0E1824;   /* Dark text for gold buttons/badges */
    
    /* Other Design Tokens */
    --border-gold: rgba(170, 124, 17, 0.2);
    --border-glass: rgba(0, 0, 0, 0.08);
    --shadow-premium: 0 10px 30px -10px rgba(44, 38, 32, 0.12);
    --shadow-gold-glow: 0 0 20px rgba(170, 124, 17, 0.15);
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Montserrat', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--primary-bg);
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--primary-bg);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-medium), var(--green-primary));
    border-radius: 5px;
    border: 2px solid var(--primary-bg);
}

/* Helper Typographies */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

/* 2. Reusable Layout Utilities & Buttons */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center { text-align: center; }
.gold-text { color: var(--gold-primary); }
.green-text { color: var(--green-light); }
.text-green { color: #81C784 !important; }
.w-100 { width: 100%; }

.section-padding {
    padding: 100px 0;
}

/* Section Header Styles */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    width: fit-content !important; /* Prevents stretching to 100% in column flex layouts */
    padding: 6px 16px;
    background: #0F4426 !important; /* Dark green background */
    border: 1px solid var(--gold-primary) !important; /* Gold border outline */
    border-radius: 50px;
    color: var(--gold-primary) !important; /* Vibrant gold text */
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--text-light), var(--gold-medium));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
}

.section-divider .line {
    width: 60px;
    height: 1px;
    background: var(--gold-medium);
}

.section-divider i {
    color: var(--gold-primary);
    font-size: 0.9rem;
    animation: pulseGlow 3s infinite ease-in-out;
}

.section-desc {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 1.05rem;
}

/* Premium Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    color: #ffffff !important; /* White text color */
    border: none;
    box-shadow: 0 4px 15px rgba(170, 124, 17, 0.3);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, #FFF, var(--gold-primary));
    color: #0E1824 !important; /* Keep original dark text color on hover */
}

.btn-outline {
    background: transparent;
    color: var(--gold-primary);
    border: 1px solid var(--gold-primary);
}

.btn-outline:hover {
    background: rgba(212, 175, 55, 0.1);
    color: #FFF;
    border-color: #FFF;
    transform: translateY(-2px);
}

/* Page Banner Header Override for Subpages (they have dark background images) */
.page-container > section:first-of-type {
    --text-light: #F8FAFC;
    --text-muted: #CBD5E1;
}

/* 3. Header Navbar CSS (Floating Glassmorphism) */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition-smooth);
    border-bottom: 1px solid transparent;
}

.main-header.scrolled {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-glass);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    padding: 10px 0;
}

.header-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    height: 83px !important;
    width: auto !important;
    object-fit: contain !important;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-text .brand-grand {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 2px;
}

.logo-text .brand-resort {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--green-light);
    letter-spacing: 4px;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 8px 0;
    position: relative;
}

.nav-link:hover {
    color: var(--gold-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--gold-primary), var(--green-light));
    transition: var(--transition-smooth);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--gold-primary);
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Mobile Hamburger Menu */
.hamburger-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1010;
}

.hamburger-toggle .bar {
    width: 25px;
    height: 2px;
    background-color: var(--gold-primary);
    transition: var(--transition-smooth);
}

/* 4. Mobile Drawer Overlay Navigation Drawer */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: var(--secondary-bg);
    border-left: 1px solid var(--border-gold);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    transition: var(--transition-smooth);
    overflow-y: auto !important; /* Enable scroll on mobile menu drawer */
}

.mobile-nav-drawer.active {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.drawer-close {
    background: transparent;
    border: none;
    color: var(--gold-primary);
    font-size: 1.8rem;
    cursor: pointer;
}

.drawer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.drawer-link {
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.drawer-link.active {
    color: var(--gold-primary);
    border-bottom-color: var(--gold-primary);
}

.drawer-footer {
    margin-top: auto;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 5. Hero Banner slider CSS */
.hero-banner {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(14,24,36,0.3) 0%, rgba(7,12,18,0.9) 100%), 
                url('/assets/images/logo-mockup.jpg') no-repeat center center/cover;
    padding: 0;
    overflow: hidden;
    
    /* Local Overrides for Widescreen Hero (dark background overlay) */
    --text-light: #F8FAFC;
    --text-muted: #94A3B8;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark navy overlay with brand gold-green ambient light layers */
    background: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(37, 126, 53, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, rgba(14, 24, 36, 0.45) 0%, rgba(14, 24, 36, 0.85) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: 20px;
    animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-logo-img {
    height: 120px !important;
    margin-bottom: 25px !important;
    margin-top: 42px !important;
    animation: pulseLogo 4s infinite ease-in-out;
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #FFD700; /* Bright metallic gold */
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 30px;
    font-family: var(--font-heading);
    background: linear-gradient(135deg, #FFFFFF 30%, #FFD700 100%); /* Highly visible white-to-gold gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 5px 25px rgba(0, 0, 0, 0.85); /* Strong drop shadow */
}

.hero-desc {
    font-size: 1.2rem;
    color: #F8FAFC; /* Bright off-white descriptions */
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    font-weight: 500;
}

.hero-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--gold-primary);
    font-size: 1.5rem;
    animation: bounceIndicator 2s infinite;
    cursor: pointer;
}

/* 6. Room Showcase Grid System CSS */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.room-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.room-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold-primary);
    box-shadow: var(--shadow-gold-glow);
}

.room-img-container {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.room-img-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #0A1128, var(--secondary-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.room-img-fallback i {
    font-size: 5rem;
    color: rgba(212, 175, 55, 0.15);
}

.room-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.room-price-tag {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(7, 12, 18, 0.85);
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-gold);
    padding: 8px 16px;
    border-radius: 4px;
    color: var(--gold-primary);
    font-weight: 700;
    font-size: 1.25rem;
}

.room-price-tag span {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.room-details {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.room-title {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--text-light);
}

.room-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 25px;
    flex-grow: 1;
}

.room-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.amenity-item {
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.amenity-item i {
    color: var(--gold-primary);
}

/* 7. Hotel Services & Amenities */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-glass);
    border-radius: 6px;
    padding: 40px 30px;
    text-align: center;
    transition: var(--transition-smooth);
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold-primary);
    box-shadow: var(--shadow-gold-glow);
}

.service-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px dashed var(--gold-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
    font-size: 2.2rem;
    color: var(--gold-primary);
    transition: var(--transition-smooth);
}

.service-card:hover .service-icon-wrapper {
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    color: var(--text-on-gold);
    transform: rotate(360deg);
}

.service-card-title {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--text-light);
}

.service-card-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* 8. Contact Section and Maps Layout */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: start;
}

.contact-card-info {
    background: var(--secondary-bg);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 40px;
}

.contact-card-title {
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--text-light);
}

.contact-item-box {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.contact-item-box:last-child {
    margin-bottom: 0;
}

.contact-item-icon {
    width: 50px;
    height: 50px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.contact-item-content h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--text-light);
}

.contact-item-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-item-content a {
    color: var(--gold-primary);
}

.contact-item-content a:hover {
    color: var(--text-light);
}

/* Maps Visual Iframe Wrap */
.map-visual-wrap {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-gold);
    box-shadow: var(--shadow-premium);
    height: 100%;
    min-height: 400px;
}

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

/* Contact Form Grid styling */
.contact-form-wrap {
    background: var(--secondary-bg);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 45px;
}

.form-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--text-light);
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    background: var(--primary-bg);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 12px 15px;
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold-primary);
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(170, 124, 17, 0.15);
}

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

.form-group.full-width {
    grid-column: span 2;
}

/* 9. Awards & Ratings Section Styles */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.award-card {
    background: linear-gradient(135deg, var(--secondary-bg), rgba(14,24,36,0.3));
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.award-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold-primary);
    box-shadow: var(--shadow-gold-glow);
}

.award-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.award-badge-icon {
    font-size: 3rem;
    color: var(--gold-primary);
    margin-bottom: 20px;
    animation: floatBadge 3s infinite ease-in-out;
}

.award-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 10px;
}

.award-organization {
    font-size: 0.85rem;
    color: var(--green-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.award-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Stars Rating */
.star-rating {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 15px 0;
    color: var(--gold-primary);
}

/* 10. Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.testimonial-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 40px 30px;
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    right: 30px;
    font-family: var(--font-heading);
    font-size: 6rem;
    line-height: 1;
    color: rgba(212, 175, 55, 0.08);
}

.testimonial-stars {
    color: var(--gold-primary);
    margin-bottom: 15px;
}

.testimonial-text {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-primary), var(--green-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-on-gold);
}

.author-info h4 {
    font-size: 1rem;
    color: var(--text-light);
}

.author-info span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* 11. Footer Section Styling */
.main-footer {
    background-color: #03060a;
    border-top: 1px solid var(--border-gold);
    color: var(--text-light);
    padding-top: 80px;
    
    /* Local Overrides for Dark Footer */
    --text-light: #F8FAFC;
    --text-muted: #94A3B8;
    --border-glass: rgba(255, 255, 255, 0.08);
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-logo-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.footer-logo {
    height: 45px;
    width: auto;
}

.footer-about-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.social-icon:hover {
    background: var(--gold-primary);
    color: var(--text-on-gold);
    border-color: var(--gold-primary);
    box-shadow: 0 0 10px rgba(170, 124, 17, 0.4);
    transform: translateY(-3px);
}

.social-icon.facebook:hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(24, 119, 242, 0.5) !important;
}

.social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border-color: #dc2743 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(220, 39, 67, 0.5) !important;
}

.footer-heading {
    font-size: 1.25rem;
    color: #FFF;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gold-primary);
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links-list a {
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links-list a:hover {
    color: var(--gold-primary);
    padding-left: 5px;
}

.footer-links-list a i {
    font-size: 0.7rem;
    color: var(--gold-primary);
}

.footer-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-contact-list li {
    display: flex;
    gap: 15px;
}

.footer-contact-list .contact-icon {
    color: var(--gold-primary);
    font-size: 1.1rem;
    margin-top: 3px;
}

.footer-contact-list .contact-info-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.footer-contact-list .contact-info-text a {
    color: var(--text-light);
}

.footer-contact-list .contact-info-text a:hover {
    color: var(--gold-primary);
}

.coordinates-glow {
    font-family: monospace;
    font-weight: bold;
    color: var(--green-light);
    letter-spacing: 0.5px;
}

.footer-bottom {
    background: #010306;
    padding: 30px 0;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-legal-links a:hover {
    color: var(--gold-primary);
}

.footer-legal-links .divider {
    color: rgba(255, 255, 255, 0.1);
}

/* 12. Booking Modal CSS - Pixel Perfect & High-End Responsive */
.booking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(3, 6, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.booking-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.booking-modal-card {
    background: var(--secondary-bg);
    border: 1px solid var(--gold-primary);
    border-radius: 12px;
    max-width: 920px; /* Expanded for desktop side-by-side split view */
    width: 100%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), var(--shadow-gold-glow);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    transform: scale(0.95);
    transition: var(--transition-smooth);
    overflow: hidden;
}

.booking-modal-overlay.active .booking-modal-card {
    transform: scale(1);
}

/* Relays the flex height constraints through the form tag */
#bookingForm {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.booking-modal-header {
    padding: 18px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-bg);
    flex-shrink: 0; /* Prevent header from shrinking */
}

.booking-modal-header h3 {
    font-size: 1.4rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.booking-modal-close:hover {
    color: var(--gold-primary);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(212, 175, 55, 0.2);
    transform: rotate(90deg);
}

/* Flex layout child with scroll capacity */
.booking-modal-body {
    padding: 25px;
    overflow-y: auto;
    flex: 1 1 auto; /* Allow expanding and shrinking */
    min-height: 0;   /* Allow shrinking below content height inside flex container */
}

.booking-modal-body::-webkit-scrollbar {
    width: 6px;
}
.booking-modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.booking-modal-body::-webkit-scrollbar-thumb {
    background: var(--gold-medium);
    border-radius: 3px;
}

/* Split Columns on Desktop (Side-by-side inputs and receipt calculations) */
.modal-split-container {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 30px;
    align-items: start;
}

.modal-split-left {
    display: flex;
    flex-direction: column;
}

.modal-split-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 0;
}

.modal-split-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

/* Compact spacings inside the booking form to save vertical space */
.booking-modal-card .form-grid {
    gap: 12px 20px;
}


.booking-modal-card .form-group {
    margin-bottom: 12px;
}

.modal-intro {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 15px;
    line-height: 1.4;
}


/* Premium Receipt Cost Breakdown Calculator Box */
.pricing-calc-panel {
    background: var(--primary-bg);
    border: 1px dashed var(--gold-primary);
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
    position: relative;
}

.pricing-calc-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 30px;
    width: 15px;
    height: 6px;
    background: var(--gold-primary);
    border-radius: 0 0 4px 4px;
    opacity: 0.7;
}

.panel-title {
    font-size: 0.95rem;
    color: var(--gold-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.price-row span:last-child,
.price-row strong {
    color: var(--text-light);
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.calc-divider {
    border: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 12px 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.grand-total-row {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0;
}

.grand-total-row span:last-child {
    color: var(--gold-primary) !important;
    font-size: 1.35rem;
    font-weight: 800;
    font-family: var(--font-body) !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.booking-modal-footer {
    padding: 15px 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    background: var(--primary-bg);
    flex-shrink: 0; /* Prevent footer from shrinking */
}


@media (max-width: 768px) {
    .booking-modal-card {
        max-height: 95vh;
        width: 100%;
        max-width: 580px;
    }
    
    .booking-modal-header,
    .booking-modal-body,
    .booking-modal-footer {
        padding: 15px 20px;
    }
    
    .modal-split-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .modal-split-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }
    
    .pricing-calc-panel {
        padding: 15px;
        margin-top: 15px;
    }


    .price-row {
        font-size: 0.85rem;
    }

    .price-row span:last-child,
    .price-row strong {
        font-size: 0.95rem;
    }

    .grand-total-row {
        font-size: 1rem;
    }

    .grand-total-row span:last-child {
        font-size: 1.15rem;
    }
}

/* 13. Legals Structure (Privacy / Terms) Page Styling */
.legal-content-wrap {
    background: var(--secondary-bg);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 50px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: var(--shadow-premium);
}

.legal-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--gold-primary);
    text-align: center;
}

.legal-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.legal-section {
    margin-bottom: 30px;
}

.legal-section h3 {
    font-size: 1.3rem;
    color: #0E1824;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.legal-section h3 i {
    color: var(--gold-primary);
}

.legal-section p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 15px;
    line-height: 1.7;
}

.legal-list {
    list-style: none;
    padding-left: 20px;
    margin-bottom: 20px;
}

.legal-list li {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.legal-list li::before {
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--gold-primary);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .legal-content-wrap {
        padding: 24px !important;
    }
    .legal-title {
        font-size: 1.8rem !important;
        margin-bottom: 20px !important;
    }
    .legal-section h3 {
        font-size: 1.15rem !important;
    }
}

/* About Us Story Grid Styles */
.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text-content h3 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--text-light);
}

.about-text-content p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.about-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.about-feature-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-glass);
    padding: 20px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-feature-card i {
    font-size: 1.5rem;
    color: var(--gold-primary);
}

.about-feature-card span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
}

.about-img-frame {
    position: relative;
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    height: 450px;
}

.about-img-mockup {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-bg), var(--primary-bg));
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-img-mockup i {
    font-size: 6rem;
    color: rgba(212, 175, 55, 0.08);
}

.floating-experience-badge {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    padding: 20px;
    border-radius: 8px;
    color: var(--text-on-gold);
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.floating-experience-badge h4 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}

.floating-experience-badge span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Gallery layouts */
.gallery-layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.gallery-photo-card {
    position: relative;
    height: 250px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-glass);
}

.gallery-photo-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--primary-bg), var(--secondary-bg));
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-photo-fallback i {
    font-size: 3rem;
    color: rgba(212, 175, 55, 0.08);
    transition: var(--transition-smooth);
}

.gallery-photo-card:hover .gallery-photo-fallback i {
    color: var(--gold-primary);
    transform: scale(1.1);
}

.gallery-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(7, 12, 18, 0.9) 0%, transparent 100%);
    padding: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition-smooth);
}

.gallery-photo-card:hover .gallery-overlay-text {
    opacity: 1;
    transform: translateY(0);
}

.gallery-overlay-text h4 {
    font-size: 1.1rem;
    color: #FFF;
}

.gallery-overlay-text p {
    font-size: 0.8rem;
    color: var(--gold-primary);
}

/* ==========================================================================
   Animations Code
   ========================================================================== */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseLogo {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.2));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.5));
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.6;
    }
}

@keyframes redDotPulse {
    0% {
        opacity: 0.3;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.9);
    }
}

/* Center the 7th card of the amenities grid on desktop only if there are exactly 7 cards */
@media (min-width: 1025px) {
    .amenities-comp-grid > .amenity-comp-card:first-child:nth-last-child(7) ~ .amenity-comp-card:last-child {
        grid-column: 2;
    }
}

@keyframes bounceIndicator {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-10px) translateX(-50%);
    }
    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

@keyframes floatBadge {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ==========================================================================
   Media Queries & Responsiveness
   ========================================================================== */
@media (max-width: 1024px) {
    .rooms-grid {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .awards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .hero-banner {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 100px !important;
        padding-bottom: 50px !important;
    }
    
    .hero-video-bg {
        transform: scale(1.15) !important; /* Keep scaled up to hide video black borders on mobile */
    }

    .hamburger-toggle {
        display: flex;
    }
    
    .nav-menu {
        display: none;
    }
    
    .btn-book-now {
        display: none; /* Keep drawer CTA */
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    
    .about-story-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .about-img-frame {
        height: 300px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-group.full-width {
        grid-column: span 1;
    }
    
    .gallery-layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .services-grid, 
    .footer-container, 
    .awards-grid,
    .testimonials-grid,
    .gallery-layout-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-title {
        font-size: 2.6rem;
    }
    
    .hero-btns {
        flex-direction: column;
        gap: 15px;
    }
    
    .section-padding {
        padding: 60px 0;
    }
    
    .booking-modal-card {
        max-height: 95vh;
    }
    
    .booking-modal-body {
        padding: 15px;
    }
    
    .booking-modal-footer {
        padding: 15px;
    }
}

/* ==========================================================================
   14. Extended High-End Resort Styles & Enhancements
   ========================================================================== */

/* Full-Screen Video Background in Hero Section */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    transform: scale(1.13); /* Scale up to hide the hardcoded 108px left and 109px right black borders in the video */
}

.hero-banner {
    background: none; /* Deactivate static image fallback if video is loaded */
}

/* Comprehensive Amenities Grid Style (9 Items) */
.amenities-comp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.amenity-comp-card {
    background: linear-gradient(145deg, #FFFFFF, #FAF8F5) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-left: 4px solid rgba(170, 124, 17, 0.3) !important; /* Gold left accent */
    border-radius: 8px !important;
    padding: 30px 25px !important;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 5px 15px rgba(44, 38, 32, 0.02) !important;
    transition: var(--transition-smooth) !important;
    color: var(--text-light) !important;
}

.amenity-comp-card:hover {
    transform: translateY(-6px) !important;
    border-left-color: var(--green-primary) !important; /* Green left accent on hover */
    border-color: rgba(27, 94, 32, 0.15) !important;
    box-shadow: 0 15px 35px -10px rgba(44, 38, 32, 0.1), 0 0 15px rgba(27, 94, 32, 0.03) !important;
}

.amenity-comp-icon {
    width: 60px !important;
    height: 60px !important;
    background: rgba(27, 94, 32, 0.06) !important; /* Green backdrop */
    border: 1px solid rgba(27, 94, 32, 0.2) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    color: var(--green-primary) !important; /* Green icon */
    flex-shrink: 0 !important;
    transition: var(--transition-smooth) !important;
}

.amenity-comp-card:hover .amenity-comp-icon {
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark)) !important; /* Transitions to Gold */
    border-color: var(--gold-primary) !important;
    color: #FFFFFF !important; /* White icon over gold gradient */
    transform: scale(1.08) !important;
}

.amenity-comp-info h4 {
    font-size: 1.15rem !important;
    color: var(--text-light) !important; /* Fix invisible white-on-white text */
    margin-bottom: 6px !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    transition: var(--transition-smooth) !important;
}

.amenity-comp-card:hover .amenity-comp-info h4 {
    color: var(--green-primary) !important; /* Highlights to brand green on hover */
}

.amenity-comp-info p {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

/* Why Choose Us Layout Section */
.why-choose-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.why-choose-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.why-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--secondary-bg) !important; /* Clean white card background */
    border: 1px solid rgba(170, 124, 17, 0.12) !important; /* Subtle gold border outline */
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(44, 38, 32, 0.015) !important;
    transition: var(--transition-smooth) !important;
}

.why-item:hover {
    background: var(--secondary-bg) !important;
    border-color: var(--green-primary) !important; /* Swaps border to brand green on hover */
    box-shadow: 0 10px 25px rgba(44, 38, 32, 0.05) !important;
    transform: translateY(-3px) !important;
}

.why-icon-box {
    font-size: 1.8rem;
    color: var(--gold-primary);
    margin-top: 3px;
}

.why-text h3 {
    font-size: 1.25rem;
    color: var(--green-primary) !important; /* Brand green for premium light section contrast */
    margin-bottom: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.why-text p {
    color: var(--text-muted) !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Dynamic Image Carousel Styling */
.carousel-slider-container {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-gold);
    box-shadow: var(--shadow-premium);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

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

.carousel-caption-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(7, 12, 18, 0.9) 0%, transparent 100%);
    padding: 30px;
    color: #FFF;
    z-index: 10;
}

.carousel-caption-bar h4 {
    font-size: 1.4rem;
    font-family: var(--font-heading);
    color: var(--gold-primary);
    margin-bottom: 5px;
}

.carousel-caption-bar p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Carousel Nav Controls */
.carousel-btn-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(7, 12, 18, 0.6);
    border: 1px solid var(--border-glass);
    color: var(--gold-primary);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: var(--transition-smooth);
}

.carousel-btn-arrow:hover {
    background: var(--gold-primary);
    color: var(--text-on-gold);
    border-color: var(--gold-primary);
}

.carousel-btn-prev { left: 20px; }
.carousel-btn-next { right: 20px; }

.carousel-dots-indicator {
    position: absolute;
    bottom: 20px;
    right: 30px;
    display: flex;
    gap: 8px;
    z-index: 15;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.carousel-dot.active {
    background: var(--gold-primary);
    transform: scale(1.2);
}

/* Image backgrounds inside room showcase container */
.room-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.room-card:hover .room-img-container img {
    transform: scale(1.05);
}

/* Award details image thumbnail setup */
.award-img-thumb {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background-color: #FFFFFF;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(170, 124, 17, 0.15);
    margin-bottom: 20px;
}

/* Responsiveness for extended sections */
@media (max-width: 1024px) {
    .amenities-comp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .amenities-comp-grid {
        grid-template-columns: 1fr;
    }
    .carousel-slider-container {
        height: 300px;
    }
}

/* 15. Floating WhatsApp Button & Tooltip */
.whatsapp-float-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1080; /* Position below mobile drawer (1100) and overlay (1090) */
    display: flex;
    align-items: center;
    flex-direction: row-reverse; /* Put tooltip on the left of button */
    gap: 12px;
}

.whatsapp-float-btn {
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0.5);
    cursor: pointer;
    transition: var(--transition-smooth);
    animation: waPulse 2s infinite ease-in-out;
    border: none;
}

.whatsapp-float-btn:hover {
    background-color: #20BA5A;
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
}

.whatsapp-tooltip {
    background: var(--secondary-bg);
    color: #FFF;
    border: 1px solid var(--border-gold);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--shadow-premium);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: var(--transition-smooth);
    white-space: nowrap;
    pointer-events: none;
}

.whatsapp-float-widget:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@keyframes waPulse {
    0% {
        box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4), 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0);
    }
}

/* Adjust position of WhatsApp floating button on small screens */
@media (max-width: 480px) {
    .whatsapp-float-widget {
        bottom: 20px;
        right: 20px;
        gap: 8px;
    }
    
    .whatsapp-float-btn {
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
    }
    
    .whatsapp-tooltip {
        display: none; /* Hide tooltip on small phones */
    }
}

/* ==========================================================================
   16. Luxury Visual Excellence - Premium Hover Sweeps & Section Glows
   ========================================================================== */

/* Golden/White Sweep Shine Overlay Effect on Cards */
.room-img-container,
.gallery-photo-card {
    position: relative;
    overflow: hidden;
}

.room-img-container::after,
.gallery-photo-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.25) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: var(--transition-smooth);
    pointer-events: none;
    z-index: 5;
}

.room-card:hover .room-img-container::after,
.gallery-photo-card:hover::after {
    left: 125%;
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Room & Scenery Image Zoom Transition */
.room-img-container img,
.gallery-photo-card img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.room-card:hover .room-img-container img,
.gallery-photo-card:hover img {
    transform: scale(1.06) rotate(0.5deg) !important;
}

/* Premium Ambient Glowing Backgrounds for Sections */
#welcome {
    background-image: radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.02) 0%, var(--primary-bg) 80%);
}

#rooms, #rooms-directory {
    background-image: radial-gradient(circle at center, rgba(212, 175, 55, 0.04) 0%, var(--primary-bg) 75%) !important;
}

#amenities {
    background-image: radial-gradient(circle at 90% 80%, rgba(37, 126, 53, 0.03) 0%, var(--primary-bg) 75%);
}

#why-choose-us {
    background-image: radial-gradient(circle at 10% 80%, rgba(212, 175, 55, 0.03) 0%, var(--primary-bg) 70%);
}

#exclusive-packages {
    background-image: radial-gradient(circle at center, rgba(37, 126, 53, 0.02) 0%, var(--primary-bg) 80%);
}

/* Micro-interaction Animated Icons - Continuous by default, enhanced on hover */
.service-icon-wrapper i,
.award-badge-icon i {
    animation: iconBounce 2.5s infinite ease-in-out;
}
.service-card:hover .service-icon-wrapper i,
.award-card:hover .award-badge-icon i {
    animation: iconBounce 1.2s infinite ease-in-out !important;
}

.amenity-comp-icon i {
    animation: iconBounce 2.8s infinite ease-in-out;
}
.amenity-comp-card:hover .amenity-comp-icon i {
    animation: iconBounce 1.2s infinite ease-in-out !important;
}

.why-icon-box i {
    animation: iconSwing 3s infinite ease-in-out;
}
.why-item:hover .why-icon-box i {
    animation: iconSwing 1.5s infinite ease-in-out !important;
}

.about-feature-card i {
    animation: iconPulseGlow 3.5s infinite ease-in-out;
}
.about-feature-card:hover i {
    animation: iconPulseGlow 1.5s infinite ease-in-out !important;
}

/* Premium Keyframe Animations for Icons */
@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
        filter: drop-shadow(0 5px 8px rgba(212, 175, 55, 0.4));
    }
}

@keyframes iconRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes iconSwing {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-12deg);
    }
    75% {
        transform: rotate(12deg);
    }
}

@keyframes iconPulseGlow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(212, 175, 55, 0));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
    }
}

/* Glowing Pulse for Header CTA buttons */
.btn-book-now {
    position: relative;
    overflow: hidden;
}

.btn-book-now::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.btn-book-now:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ==========================================================================
   17. Luxury Animated Grid & Slow Floating Glow Particles
   ========================================================================== */

/* Automatically apply to all page sections & inner page headers */
#welcome, 
#rooms, 
#rooms-directory, 
#amenities, 
#exclusive-packages, 
section[style*="padding-top: 180px"] {
    position: relative;
    /* Luxury Geometric Golden Grid Pattern */
    background-image: 
        radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%),
        linear-gradient(rgba(212, 175, 55, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.045) 1px, transparent 1px) !important;
    background-size: 100% 100%, 60px 60px, 60px 60px !important;
    background-position: center !important;
}

/* Pseudo-element for Floating Gold & Green Ambient Light Waves */
#welcome::before, 
#rooms::before, 
#rooms-directory::before, 
#amenities::before, 
#why-choose-us::before, 
#exclusive-packages::before, 
section[style*="padding-top: 180px"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Floating Gold and Green Light particles matching logo */
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(212, 175, 55, 0.035) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(37, 126, 53, 0.035) 0%, transparent 45%);
    pointer-events: none;
    z-index: 1;
    animation: floatingGlow 22s infinite ease-in-out alternate;
    opacity: 0.8;
}

/* Ensure section content sits cleanly above background particles */
#welcome > .container,
#rooms > .container,
#rooms-directory > .container,
#amenities > .container,
#why-choose-us > .container,
#exclusive-packages > .container,
section[style*="padding-top: 180px"] > .container {
    position: relative;
    z-index: 2;
}

/* Keyframes for Slow Luxury Wave/Particle Glow Floating */
@keyframes floatingGlow {
    0% {
        transform: scale(1) translate(0, 0);
        background-image: 
            radial-gradient(circle at 15% 25%, rgba(212, 175, 55, 0.035) 0%, transparent 45%),
            radial-gradient(circle at 85% 75%, rgba(37, 126, 53, 0.035) 0%, transparent 45%);
    }
    33% {
        transform: scale(1.05) translate(3%, -2%);
        background-image: 
            radial-gradient(circle at 25% 15%, rgba(212, 175, 55, 0.04) 0%, transparent 50%),
            radial-gradient(circle at 75% 85%, rgba(37, 126, 53, 0.03) 0%, transparent 40%);
    }
    66% {
        transform: scale(0.98) translate(-2%, 4%);
        background-image: 
            radial-gradient(circle at 10% 35%, rgba(212, 175, 55, 0.03) 0%, transparent 40%),
            radial-gradient(circle at 90% 65%, rgba(37, 126, 53, 0.04) 0%, transparent 50%);
    }
    100% {
        transform: scale(1) translate(0, 0);
        background-image: 
            radial-gradient(circle at 15% 25%, rgba(212, 175, 55, 0.035) 0%, transparent 45%),
            radial-gradient(circle at 85% 75%, rgba(37, 126, 53, 0.035) 0%, transparent 45%);
    }
}

/* ==========================================================================
   18. Premium Dark Contrast Section & Alternating Layout Enhancements
   ========================================================================== */

/* Package Card default styles (in light sections) */
.package-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 40px;
    text-align: left;
    transition: var(--transition-smooth);
}

.package-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.package-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Targeting specific sections for Premium Dark Navy backdrop */
#rooms, 
#rooms-directory, 
#exclusive-packages, 
#testimonials, 
#about-timeline, 
#about-founders {
    background-color: #0E1824 !important; /* Rich Luxury Navy */
    background-image: 
        radial-gradient(circle at center, rgba(212, 175, 55, 0.08) 0%, transparent 70%),
        linear-gradient(rgba(212, 175, 55, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.02) 1px, transparent 1px) !important;
    background-size: 100% 100%, 60px 60px, 60px 60px !important;
    background-position: center !important;
    color: #F8FAFC !important;
    border-top: 1px solid rgba(170, 124, 17, 0.25) !important;
    border-bottom: 1px solid rgba(170, 124, 17, 0.25) !important;
}

/* Floating gold/green glow effects inside dark sections */
#rooms::before, 
#rooms-directory::before, 
#exclusive-packages::before, 
#testimonials::before,
#about-timeline::before,
#about-founders::before {
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(212, 175, 55, 0.075) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(37, 126, 53, 0.075) 0%, transparent 45%) !important;
}

/* High contrast white-to-gold headings inside dark sections */
#rooms .section-title, 
#rooms-directory .section-title, 
#exclusive-packages .section-title,
#testimonials .section-title,
#about-timeline .section-title,
#about-founders .section-title {
    background: linear-gradient(135deg, #FFFFFF 30%, var(--gold-medium) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Sub-description styling inside dark sections */
#rooms .section-desc, 
#rooms-directory .section-desc, 
#exclusive-packages .section-desc,
#testimonials .section-desc,
#about-timeline .section-desc,
#about-founders .section-desc {
    color: #E2E8F0 !important;
}

/* Custom premium card backgrounds inside dark sections */
#rooms .room-card, 
#rooms-directory .room-card, 
#exclusive-packages .room-card, 
#exclusive-packages .package-card,
#testimonials .testimonial-card {
    background: #13202E !important; /* Deep luxury navy card background */
    border: 1px solid rgba(170, 124, 17, 0.25) !important;
    box-shadow: 0 15px 35px -15px rgba(0, 0, 0, 0.6) !important;
    color: #F8FAFC !important;
}

#rooms .room-card:hover, 
#rooms-directory .room-card:hover, 
#exclusive-packages .room-card:hover,
#exclusive-packages .package-card:hover,
#testimonials .testimonial-card:hover {
    border-color: var(--gold-primary) !important;
    box-shadow: 0 15px 35px -10px rgba(170, 124, 17, 0.2), 0 0 20px rgba(170, 124, 17, 0.15) !important;
}

/* Card titles inside dark sections */
#rooms .room-title, 
#rooms-directory .room-title, 
#exclusive-packages .room-title,
#exclusive-packages .package-title,
#testimonials .testimonial-author h4 {
    color: #FFFFFF !important;
}

/* Card body descriptions inside dark sections */
#rooms .room-desc, 
#rooms-directory .room-desc, 
#exclusive-packages .room-desc,
#exclusive-packages .package-desc,
#testimonials .testimonial-text {
    color: #94A3B8 !important;
}

/* Card amenities details */
#rooms .amenity-item, 
#rooms-directory .amenity-item, 
#exclusive-packages .amenity-item {
    color: #E2E8F0 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Price tags inside dark sections */
#rooms .room-price-tag, 
#rooms-directory .room-price-tag, 
#exclusive-packages .room-price-tag {
    background: var(--gold-primary) !important;
    color: #0E1824 !important;
    font-weight: 700 !important;
}

#rooms .room-price-tag span, 
#rooms-directory .room-price-tag span, 
#exclusive-packages .room-price-tag span {
    color: rgba(14, 24, 36, 0.75) !important;
}

#rooms .room-badge, 
#rooms-directory .room-badge {
    background: linear-gradient(135deg, var(--green-primary), var(--green-light)) !important;
    color: #FFFFFF !important;
}

/* Testimonial Author details in dark section */
#testimonials .testimonial-author span {
    color: var(--gold-primary) !important;
}

#testimonials .author-avatar {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--gold-primary) !important;
    border: 1px solid rgba(170, 124, 17, 0.3) !important;
}

/* Timeline elements adjustments */
#about-timeline .why-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 20px !important;
    border-radius: 8px !important;
}

#about-timeline .why-item h4 {
    color: #FFFFFF !important;
}

#about-timeline .why-item p {
    color: #94A3B8 !important;
}

#about-timeline span[style*="color: var(--green-light)"] {
    color: #81C784 !important;
}

/* ==========================================================================
   19. Subpage Headers (Breadcrumbs) High-Contrast Brand Redesign
   ========================================================================== */

/* Subpage header container overrides */
.page-container > section:first-of-type {
    position: relative;
    background-color: #0E1824 !important; /* Premium Dark Navy */
    padding-top: 180px !important;
    padding-bottom: 90px !important;
    border-bottom: 3px solid var(--gold-primary) !important;
    overflow: hidden;
}

/* Brand glow via gold and green ambient light layers inside headers */
.page-container > section:first-of-type::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(37, 126, 53, 0.15) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Subpage header titles: Metallic White-to-Gold premium gradient */
.page-container > section:first-of-type .section-title {
    background: linear-gradient(135deg, #FFFFFF 20%, var(--gold-primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 3rem !important;
    font-weight: 700 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 15px !important;
}

/* Subpage header description texts: Maximum Contrast Light Gray/Slate */
.page-container > section:first-of-type .section-desc {
    color: #F8FAFC !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
    max-width: 750px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* Subpage header section badges */
.page-container > section:first-of-type .section-badge {
    background: rgba(212, 175, 55, 0.2) !important;
    color: #FFD700 !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
    display: inline-block !important;
}

/* Subpage header divider overlays */
.page-container > section:first-of-type .section-divider .line {
    background: var(--gold-primary) !important;
}

.page-container > section:first-of-type .section-divider i {
    color: var(--gold-primary) !important;
}

/* ==========================================================================
   20. Premium Textured Grid Wallpaper Patterns for Light Sections
   ========================================================================== */

#amenities, #about-pillars, #services-core, #about-community {
    position: relative;
    background-color: var(--primary-bg) !important;
    /* Faded Gold-Green Royal Diamond Trellis Wallpaper matching logo colors */
    background-image: 
        radial-gradient(circle at center, rgba(212, 175, 55, 0.08) 0%, transparent 80%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' fill='none' stroke='%23AA7C11' stroke-width='0.95' stroke-opacity='0.12'/%3E%3Cpath d='M40 5 L75 40 L40 75 L5 40 Z' fill='none' stroke='%23AA7C11' stroke-width='0.6' stroke-opacity='0.08' stroke-dasharray='2,2'/%3E%3Cpath d='M40 33 Q40 40 33 40 Q40 40 40 47 Q40 40 47 40 Q40 40 40 33 Z' fill='none' stroke='%23AA7C11' stroke-width='0.8' stroke-opacity='0.12'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%231B5E20' fill-opacity='0.18'/%3E%3C/svg%3E") !important;
    background-size: 100% 100%, 80px 80px !important;
    background-position: center !important;
    border-top: 1px solid rgba(170, 124, 17, 0.15) !important;
    border-bottom: 1px solid rgba(170, 124, 17, 0.15) !important;
}

#services-core {
    padding-top: 60px !important;
}

#why-choose-us {
    position: relative;
    background-color: var(--primary-bg) !important;
    /* Clean plain background with very soft brand glow particles and gold borders, no pattern */
    background-image: radial-gradient(circle at center, rgba(212, 175, 55, 0.05) 0%, transparent 85%) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    border-top: 1px solid rgba(170, 124, 17, 0.15) !important;
    border-bottom: 1px solid rgba(170, 124, 17, 0.15) !important;
}







/* ==========================================================================
   Two-Tier Header Styles (White Top Bar & Black Bottom Bar)
   ========================================================================== */
.main-header {
    background: #ffffff !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: var(--transition-smooth) !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.header-top-bar {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: var(--transition-smooth);
}

.header-top-bar .header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-smooth);
}

.header-top-bar .nav-list {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-top-bar .nav-link {
    color: #2C2620 !important; /* Dark charcoal */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: var(--transition-smooth);
    position: relative;
    padding: 8px 0;
}

.header-top-bar .nav-link:hover,
.header-top-bar .nav-link.active {
    color: var(--green-primary) !important;
}

.header-top-bar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--green-primary);
    transition: var(--transition-smooth);
}

.header-top-bar .nav-link:hover::after,
.header-top-bar .nav-link.active::after {
    width: 100%;
}

.header-contact-info {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: #6B6259;
    font-weight: 600;
    margin-right: 15px;
    align-items: center;
}

.header-contact-info a {
    color: #6B6259;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.header-contact-info a:hover {
    color: var(--green-primary);
}

.header-contact-info i {
    color: var(--gold-primary);
    margin-right: 4px;
}

/* Bottom Bar (Black Strip) */
.header-bottom-bar {
    background: #0E1824; /* Deep dark blue/black matching Swosti black strip */
    border-bottom: 2px solid var(--gold-primary);
}

.header-bottom-bar .header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-tagline a {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--gold-primary) !important;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
}

.header-tagline a:hover {
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
}

.sub-nav-list {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-nav-list a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.sub-nav-list a:hover,
.sub-nav-list a.active {
    color: var(--gold-primary) !important;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
}

/* Scrolled Compact states */
.main-header.scrolled .header-top-bar .header-container {
    padding: 6px 25px;
}

.main-header.scrolled .header-contact-info {
    display: none; /* Hide contacts when scrolled to stay thin */
}

/* Drawer Divider for Mobile Menu list */
.drawer-divider {
    height: 1px;
    background: rgba(212, 175, 55, 0.15);
    margin: 15px 0;
}

/* Mobile Media Queries */
@media (max-width: 992px) {
    .header-bottom-bar {
        display: none !important;
    }
    .header-top-bar .nav-menu {
        display: none !important;
    }
    .header-contact-info {
        display: none !important;
    }
    .header-top-bar .header-container {
        padding: 8px 15px !important;
    }
    .main-header.scrolled {
        padding: 0 !important;
    }
    .main-header.scrolled .header-top-bar .header-container {
        padding: 8px 15px !important;
    }
}


/* ==========================================================================
   Quick Booking Bar Overlay Styles (Hero Section Form)
   ========================================================================== */
.quick-booking-bar {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    background: rgba(14, 24, 36, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 18px 25px;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: fadeUp 1.2s ease;
}

.booking-bar-form {
    display: grid;
    grid-template-columns: 1.2fr 1.1fr 1.1fr 0.8fr 0.8fr 1.2fr;
    gap: 15px;
    align-items: flex-end;
}

.bar-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bar-group label {
    color: var(--gold-primary);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bar-group label i {
    margin-right: 4px;
}

.bar-group select,
.bar-group input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 10px 12px;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 500;
    outline: none;
    transition: var(--transition-smooth);
    width: 100%;
}

.bar-group select option {
    background: #0e1824;
    color: #ffffff;
}

.bar-group select:focus,
.bar-group input:focus {
    border-color: var(--gold-primary);
    background: rgba(255, 255, 255, 0.15);
}

.btn-bar-submit {
    width: 100%;
    padding: 11px 0;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 0.88rem;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Responsive booking bar */
@media (max-width: 992px) {
    .quick-booking-bar {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        margin-top: 30px;
        background: rgba(14, 24, 36, 0.9);
        border-radius: 8px;
    }
    .booking-bar-form {
        grid-template-columns: 1fr 1fr;
    }
    .btn-group {
        grid-column: span 2;
    }
}

@media (max-width: 576px) {
    .booking-bar-form {
        grid-template-columns: 1fr;
    }
    .btn-group {
        grid-column: span 1;
    }
}


/* ==========================================================================
   Welcome Promo Modal Styles
   ========================================================================== */
.promo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 24, 36, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 2000; /* Higher than header and normal booking modal */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    padding: 20px;
}

.promo-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.promo-modal-card {
    position: relative;
    background: #0e1824; /* Deep dark blue */
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    width: 100%;
    max-width: 850px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.promo-modal-overlay.active .promo-modal-card {
    transform: scale(1);
}

.promo-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.promo-modal-close:hover {
    background: var(--gold-primary);
    color: #0e1824;
    border-color: var(--gold-primary);
}

.promo-modal-split {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
}

.promo-modal-image {
    position: relative;
    min-height: 450px;
}

.promo-image-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
}

.promo-badge {
    background: var(--gold-primary);
    color: #0e1824;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 4px;
}

.promo-modal-content {
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.promo-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: normal;
    letter-spacing: 1px;
}

.promo-message {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.promo-codes-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.promo-code-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: var(--transition-smooth);
}

.promo-code-card.featured {
    border-color: rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.02);
}

.promo-code-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold-primary);
}

.promo-code-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}

.code-percent {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-primary);
}

.code-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.promo-code-badge-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 6px 10px;
}

.promo-code-badge {
    font-family: monospace;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 1px;
}

.btn-copy-code {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 2px;
}

.btn-copy-code:hover {
    color: var(--gold-primary);
}

.promo-modal-actions {
    margin-top: 10px;
}

/* Responsive Welcome Promo modal */
@media (max-width: 768px) {
    .promo-modal-split {
        grid-template-columns: 1fr;
    }
    .promo-modal-image {
        min-height: 200px;
        height: 200px;
    }
    .promo-modal-content {
        padding: 25px 20px;
    }
    .promo-title {
        font-size: 1.6rem;
    }
    .promo-codes-container {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   UI Overrides to Prevent Menu Wrapping and Squishing
   ========================================================================== */
.header-top-bar .nav-list {
    gap: 14px !important;
}

.header-top-bar .nav-link {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.header-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
}

.header-contact-info {
    display: flex !important;
    gap: 8px !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    margin-right: 0 !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.contact-divider {
    color: rgba(0, 0, 0, 0.15) !important;
    font-size: 0.8rem !important;
    font-weight: normal !important;
}

.header-top-bar .header-container {
    padding: 6px 20px !important;
}

/* Scrolled compact states override */
.main-header.scrolled .header-top-bar .header-container {
    padding: 4px 20px !important;
}

.main-header.scrolled .header-contact-info {
    display: flex !important; /* Keep contact info visible on desktop when scrolled */
}

/* Mobile responsive layout overrides */
@media (max-width: 992px) {
    .header-actions {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .contact-divider {
        display: none !important;
    }
    .header-contact-info {
        display: none !important;
    }
}


/* ==========================================================================
   Header Mini Bar and Visual Alignment Fixes
   ========================================================================== */
.header-mini-bar {
    background: #0E1824 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    max-height: 40px !important;
    transition: all 0.3s ease-in-out !important;
    overflow: hidden !important;
}

.header-mini-bar .header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 25px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mini-left {
    font-size: 0.76rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    font-family: var(--font-primary) !important;
}

.mini-right {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.mini-right a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    transition: var(--transition-smooth) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.mini-right a:hover {
    color: var(--gold-primary) !important;
}

.mini-right i {
    color: var(--gold-primary) !important;
}

.mini-divider {
    color: rgba(255, 255, 255, 0.2) !important;
    font-size: 0.8rem !important;
}

/* Main Navigation Bar Alignment overrides */
.header-top-bar {
    background: #ffffff !important;
    height: 75px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease-in-out !important;
}

.header-top-bar .header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
}

.header-top-bar .nav-list {
    display: flex !important;
    gap: 22px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

.header-top-bar .nav-link {
    color: #1A1A1A !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    transition: var(--transition-smooth) !important;
    padding: 8px 0 !important;
    white-space: nowrap !important;
    position: relative !important;
}

.header-top-bar .nav-link:hover,
.header-top-bar .nav-link.active {
    color: var(--green-primary) !important;
}

.header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Scrolled compact mode transition */
.main-header.scrolled .header-mini-bar {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    opacity: 0 !important;
}

.main-header.scrolled .header-top-bar {
    height: 62px !important;
}

/* Mobile responsive fixes */
@media (max-width: 992px) {
    .header-mini-bar {
        display: none !important;
    }
    .header-top-bar {
        height: 60px !important;
    }
}


/* ==========================================================================
   Swosti-Style Header Navigation Layout & Spacing
   ========================================================================== */
.main-header {
    background: transparent !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out !important;
    border-bottom: none !important;
    padding: 0 !important;
}

/* White Top Bar */
.header-top-bar {
    background: #ffffff !important;
    height: 85px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
}

.header-top-bar .header-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    height: 100% !important;
}

/* Hanging Logo Box */
.logo-box {
    position: absolute !important;
    top: 0 !important;
    left: 30px !important;
    width: 150px !important;
    height: 125px !important;
    background: transparent !important; /* Transparent background */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important; /* No shadow */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: none !important; /* No green border */
    z-index: 1020 !important;
    transition: all 0.3s ease-in-out !important;
    padding: 10px !important;
}

.logo-box img {
    max-width: 130px !important;
    max-height: 105px !important;
    object-fit: contain !important;
    transition: all 0.3s ease-in-out !important;
}

/* Spacing out Menu after the absolute hanging logo */
.nav-menu {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: center !important;
    margin-left: 200px !important; /* Spaced out further for the larger logo */
}

.header-top-bar .nav-list {
    display: flex !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

.header-top-bar .nav-link {
    color: #333333 !important; /* Slate grey dark menu text */
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: var(--transition-smooth) !important;
    padding: 10px 0 !important;
    white-space: nowrap !important;
    position: relative !important;
}

.header-top-bar .nav-link:hover,
.header-top-bar .nav-link.active {
    color: #0F4426 !important; /* Forest Green active hover */
}

.header-top-bar .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #0F4426 !important;
    transition: var(--transition-smooth) !important;
}

.header-top-bar .nav-link:hover::after,
.header-top-bar .nav-link.active::after {
    width: 100% !important;
}

/* Actions Column (Contact + CTA button Stacked) */
.actions-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 100% !important;
}

.contact-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #0F4426 !important; /* Swosti Green text info */
    white-space: nowrap !important;
}

.contact-link {
    color: #0F4426 !important;
    text-decoration: none !important;
    transition: var(--transition-smooth) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.contact-link:hover {
    color: var(--gold-primary) !important;
}

.contact-link i {
    color: var(--gold-primary) !important;
}

.contact-divider {
    color: rgba(15, 68, 38, 0.3) !important;
    font-size: 0.75rem !important;
}

.cta-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.btn-swosti-book {
    background: #0F4426 !important; /* Swosti Forest Green */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 8px 18px !important;
    border-radius: 4px !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
}

.btn-swosti-book:hover {
    background: #082916 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Black Bottom Bar */
.header-bottom-bar {
    background: #111111 !important; /* Smooth solid black strip */
    border-bottom: 2px solid var(--gold-primary) !important;
}

.header-bottom-bar .header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.bottom-brand-tag {
    font-family: var(--font-heading) !important;
    font-size: 0.88rem !important;
    color: var(--gold-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.sub-nav-list {
    display: flex !important;
    gap: 20px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sub-nav-list a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    transition: var(--transition-smooth) !important;
}

.sub-nav-list a:hover,
.sub-nav-list a.active {
    color: var(--gold-primary) !important;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.4) !important;
}

/* ==========================================================================
   Sticky Scrolled Swosti Header State
   ========================================================================== */
.main-header.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.main-header.scrolled .header-top-bar {
    height: 70px !important;
}

.main-header.scrolled .logo-box {
    height: 95px !important;
    width: 120px !important;
}

.main-header.scrolled .logo-box img {
    max-width: 105px !important;
    max-height: 80px !important;
}

.main-header.scrolled .contact-row {
    display: none !important; /* Hide contact text to collapse height nicely on scroll */
}

/* ==========================================================================
   Mobile/Tablet responsive layouts
   ========================================================================== */
@media (max-width: 992px) {
    .logo-box {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 80px !important;
        height: 60px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }
    
    .logo-box img {
        max-width: 75px !important;
        max-height: 50px !important;
    }
    
    .header-logo {
        height: 50px !important;
    }
    
    .hero-logo-img {
        height: 120px !important;
        margin-bottom: 25px !important;
        margin-top: -45px !important;
    }
    
    .nav-menu {
        display: none !important;
    }
    
    .header-top-bar {
        height: 65px !important;
    }
    
    .header-top-bar .header-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .actions-col {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .contact-row {
        display: none !important;
    }
    
    .header-bottom-bar {
        display: none !important; /* Hide sub strip on mobile */
    }
}


/* ==========================================================================
   Revised Swosti-Style Spacing, Button Resizing & Menu Centering
   ========================================================================== */

/* 1. Set Top Bar height to match logo proportions on desktop */
.header-top-bar {
    height: 90px !important;
}

.logo-box {
    height: 110px !important;
    left: 40px !important;
}

/* 2. Wider and Larger Book Now button */
.btn-swosti-book {
    width: 220px !important;
    height: 40px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(15, 68, 38, 0.25) !important;
}

.contact-row {
    font-size: 0.78rem !important;
    gap: 12px !important;
    margin-bottom: 2px !important;
}

/* 3. Center bottom black bar sub-menus, while tagline stays left-aligned without overlapping logo */
.header-bottom-bar .header-container {
    display: grid !important;
    grid-template-columns: 1.2fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
}

.bottom-brand-tag {
    grid-column: 1 !important;
    justify-self: start !important;
    padding-left: 145px !important; /* Pushes brand tagline to clear the hanging logo box! */
}

.sub-nav-list {
    grid-column: 2 !important;
    justify-self: center !important;
}

/* 4. Mobile layout fixes for visibility and sizing */
@media (max-width: 992px) {
    /* Hide the black bottom bar entirely on mobile */
    .header-bottom-bar {
        display: none !important;
    }
    
    .header-top-bar {
        height: 70px !important;
    }
    
    .header-top-bar .header-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        height: 70px !important;
    }
    
    /* Make the logo container clean and inline */
    .logo-box {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 80px !important;
        height: 55px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: center !important;
    }
    
    .logo-box img {
        max-width: 75px !important;
        max-height: 50px !important;
    }
    
    /* Center nav menu must be hidden */
    .nav-menu {
        display: none !important;
        margin-left: 0 !important;
    }
    
    /* Arrange the mobile action block horizontally */
    .actions-col {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        height: 100% !important;
    }
    
    /* Resize Book Now button on mobile so it fits gracefully */
    .btn-swosti-book {
        width: 120px !important;
        height: 34px !important;
        font-size: 0.72rem !important;
        padding: 0 10px !important;
        box-shadow: none !important;
    }
    
    /* Fix mobile hamburger toggle color for contrast on white top bar */
    .hamburger-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        background: transparent !important;
        border: none !important;
        padding: 5px !important;
        cursor: pointer !important;
    }
    
    .hamburger-toggle .bar {
        background-color: #0F4426 !important; /* High contrast deep green bars */
        width: 24px !important;
        height: 3px !important;
        border-radius: 2px !important;
    }
}


/* ==========================================================================
   Swosti-Style Aligned Row (Phone | Book Now | Email) & Centered Bottom Menus
   ========================================================================== */

/* 1. Hide the mini-bar completely */
.header-mini-bar {
    display: none !important;
}

/* 2. Top bar layout alignment and height matching logo box */
.header-top-bar {
    height: 90px !important;
}

.logo-box {
    top: 0 !important;
    height: 110px !important;
    left: 45px !important;
}

/* 3. Actions column horizontally aligned: Phone | Book Now | Email */
.actions-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    height: 100% !important;
}

.contact-link {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #0F4426 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.btn-swosti-book {
    width: 170px !important;
    height: 40px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

/* 4. Center sub-menus in black bottom bar and remove margins */
.header-bottom-bar .header-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.bottom-brand-tag {
    display: none !important; /* Brand tagline removed as requested */
}

.sub-nav-list {
    margin: 0 auto !important;
}

/* 5. Scrolled state height shrink overrides */
.main-header.scrolled .header-top-bar {
    height: 72px !important;
}

.main-header.scrolled .logo-box {
    height: 92px !important;
}

.main-header.scrolled .logo-box img {
    max-width: 85px !important;
    max-height: 70px !important;
}

/* 6. Responsive mobile/tablet layout fixes */
@media (max-width: 992px) {
    .header-top-bar {
        height: 65px !important;
    }
    
    .header-top-bar .header-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Make actions col compact and align Book Now + Hamburger toggle */
    .actions-col {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .contact-link.phone-link,
    .contact-link.email-link {
        display: none !important; /* Hide phone/email links on mobile view to avoid squishing */
    }
    
    .btn-swosti-book {
        width: 110px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
    }
    
    .hamburger-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 5px !important;
    }
    
    .hamburger-toggle .bar {
        background-color: #0F4426 !important;
        width: 22px !important;
        height: 3px !important;
    }
}


/* ==========================================================================
   Fully Contained Logo, Stacked Center CTA & Spaced-Out Sub-Menus
   ========================================================================== */

/* 1. Make white top bar match the logo box height (110px) to fully fit it inside */
.header-top-bar {
    height: 110px !important;
}

.logo-box {
    top: 0 !important;
    height: 110px !important;
    left: 45px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 2. Actions column stacking layout (Contacts top, Book Now centered bottom) */
.actions-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers the button horizontally relative to the row above */
    justify-content: center !important;
    gap: 10px !important;
    height: 100% !important;
}

.contact-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    font-size: 0.8rem !important;
    color: #0F4426 !important;
    white-space: nowrap !important;
}

.contact-link {
    color: #0F4426 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.contact-divider {
    color: rgba(15, 68, 38, 0.25) !important;
    font-size: 0.8rem !important;
}

.cta-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Big and wide Book Now button */
.btn-swosti-book {
    width: 220px !important;
    height: 42px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(15, 68, 38, 0.2) !important;
}

/* 3. Add spacious gaps to black strip sub-menus to fix congested UI */
.header-bottom-bar {
    height: 45px !important;
}

.header-bottom-bar .header-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

.sub-nav-list {
    display: flex !important;
    gap: 38px !important; /* Increased spacing to prevent congestion */
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
}

.sub-nav-list a {
    font-size: 0.84rem !important;
    letter-spacing: 0.3px !important;
}

/* 4. Scrolled collapsed compact states (110px -> 80px) */
.main-header.scrolled .header-top-bar {
    height: 80px !important;
}

.main-header.scrolled .logo-box {
    height: 80px !important;
}

.main-header.scrolled .logo-box img {
    max-width: 80px !important;
    max-height: 60px !important;
}

.main-header.scrolled .contact-row {
    display: none !important; /* Collapses contact details on scroll for a thin header */
}

/* 5. Mobile responsive overrides */
@media (max-width: 992px) {
    .header-top-bar {
        height: 65px !important;
    }
    
    .header-top-bar .header-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        height: 65px !important;
    }
    
    /* Make inline action block for mobile */
    .actions-col {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .contact-row {
        display: none !important;
    }
    
    .btn-swosti-book {
        width: 110px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
        box-shadow: none !important;
    }
}


/* ==========================================================================
   Restored Left Tagline and Right Sub-menus (Swosti Layout)
   ========================================================================== */

/* 1. Reset bottom bar grid to flex space-between */
.header-bottom-bar .header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.bottom-brand-tag {
    display: block !important;
    padding-left: 0 !important; /* Flush left, since logo box doesn't hang down anymore */
}

.sub-nav-list {
    margin: 0 !important; /* Reset auto margins to sit on the right */
}


/* ==========================================================================
   Bottom Bar Layout (Tagline & Links left, Contact info right)
   ========================================================================== */
.header-bottom-bar .header-container {
    display: flex !important;
    justify-content: space-between !important; /* tagline + links group on left, contact info on right */
    align-items: center !important;
}

.bottom-brand-tag {
    display: block !important;
    padding-left: 0 !important;
    white-space: nowrap !important;
}

.bottom-bar-left {
    display: flex !important;
    align-items: center !important;
    gap: 60px !important; /* Original spacious tagline gap */
}

.sub-nav-list {
    display: flex !important;
    gap: 28px !important; /* Original spacious sub-menu links gap */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.sub-nav-list a {
    white-space: nowrap !important;
}

@media (max-width: 1366px) {
    .bottom-bar-left {
        gap: 30px !important; /* Tighter tagline gap on standard laptops */
    }
    .sub-nav-list {
        gap: 18px !important; /* Tighter sub-menu link gap */
    }
}

@media (max-width: 1200px) {
    .bottom-brand-tag {
        display: none !important; /* Hide tagline on smaller screens to ensure links stay on one line */
    }
    .bottom-bar-left {
        gap: 0 !important;
    }
    .sub-nav-list {
        gap: 12px !important;
    }
}

.bottom-bar-right-socials {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.social-icon-link {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.social-icon-link:hover {
    color: #0E1824 !important; /* Dark text color on gold background */
    background: var(--gold-primary) !important;
    border-color: var(--gold-primary) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5) !important;
    transform: translateY(-2px) !important;
}

.social-icon-link i {
    font-size: 0.8rem !important;
}


/* ==========================================================================
   Quick-Booking Bar Block Spacing Overrides
   ========================================================================== */
.quick-booking-bar {
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 40px auto 0 auto !important; /* Adds clear vertical breathing margin below text! */
    width: 100% !important;
    max-width: 1200px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 992px) {
    .quick-booking-bar {
        margin: 25px auto 0 auto !important;
    }
}


/* ==========================================================================
   Tagline Horizontal Baseline Alignment Override
   ========================================================================== */
.bottom-brand-tag {
    margin-left: 140px !important; /* Matches desktop nav offset so tagline aligns perfectly with top-bar ABOUT US */
    padding-left: 0 !important; /* Reset previous padding overrides */
    white-space: nowrap !important;
}

@media (max-width: 992px) {
    .bottom-brand-tag {
        margin-left: 0 !important;
    }
}


/* ==========================================================================
   Interactive Why Choose Us Tabs & Preview Grid
   ========================================================================== */
.why-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.why-item {
    cursor: pointer !important;
    display: flex !important;
    gap: 20px !important;
    padding: 18px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.why-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Active tab style */
.why-item.active {
    background: transparent !important;
    border-color: var(--gold-primary) !important;
    box-shadow: 0 4px 15px rgba(24, 94, 50, 0.15) !important;
}

.why-item.active .why-icon-box {
    background: transparent !important;
    color: var(--gold-primary) !important;
}

/* Interactive Preview Panel (Right Side) */
.interactive-preview-container {
    position: relative !important;
    width: 100% !important;
    height: 520px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
}

.preview-frame {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.preview-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: opacity 0.3s ease-in-out !important; /* Smooth fade when switching tabs */
    opacity: 1;
}

.preview-caption-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(14, 24, 36, 0.85) !important; /* Rich dark translucent panel background */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 25px !important;
    color: #ffffff !important;
    z-index: 2 !important;
}

.preview-caption-bar h4 {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    color: var(--gold-primary) !important;
    margin: 0 0 6px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.preview-caption-bar p {
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Responsive Mobile Rules */
@media (max-width: 992px) {
    .why-choose-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .interactive-preview-container {
        height: 400px !important;
    }
}

@media (max-width: 768px) {
    .why-items-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    .why-item {
        padding: 12px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
    }
    
    .why-icon-box {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
    }
    
    .why-text h3 {
        font-size: 0.84rem !important;
        margin-bottom: 0 !important;
    }
    
    .why-text p {
        display: none !important; /* Hide description on mobile grid buttons to keep it neat */
    }
    
    .interactive-preview-container {
        height: 320px !important;
    }
}


/* ==========================================================================
   Why Choose Us - Premium Minimalist Tile Grid Redesign
   ========================================================================== */

/* 1. Desktop Layout: Balanced 2-Column Tile Grid next to the Image Preview */
.why-items-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 Columns on Desktop */
    gap: 16px !important;
}

/* 2. Premium Card/Tile Design */
.why-item {
    cursor: pointer !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 16px !important;
    background: #ffffff !important; /* Clean white card */
    border: 1px solid rgba(0, 0, 0, 0.08) !important; /* Extremely thin subtle border */
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

/* 3. Remove Gold Icon Box Background completely */
.why-icon-box {
    background: transparent !important; /* REMOVE gold box background */
    border: none !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Style the icon itself */
.why-icon-box i {
    font-size: 1.5rem !important; /* Make icon larger and elegant */
    color: #0F4426 !important; /* Default forest green color */
    transition: all 0.3s ease !important;
}

.why-text h3 {
    font-family: var(--font-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin: 0 0 4px 0 !important;
}

.why-text p {
    font-size: 0.82rem !important;
    color: #666666 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* 4. Active Card State */
.why-item.active {
    background: rgba(15, 68, 38, 0.03) !important; /* Soft green tint on active */
    border-color: var(--gold-primary) !important; /* Gold border outline */
    box-shadow: 0 6px 18px rgba(15, 68, 38, 0.08) !important;
}

/* Make active icon turn gold */
.why-item.active .why-icon-box i {
    color: var(--gold-primary) !important;
    transform: scale(1.1) !important;
}

/* Hover Card State (Non-Active) */
.why-item:hover:not(.active) {
    background: rgba(0, 0, 0, 0.01) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    transform: translateY(-2px) !important;
}

.why-item:hover:not(.active) .why-icon-box i {
    color: var(--gold-primary) !important;
}

/* 5. Mobile & Tablet Responsiveness */
@media (max-width: 992px) {
    .why-items-list {
        grid-template-columns: 1fr 1fr !important; /* Keep 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .why-items-list {
        grid-template-columns: 1fr 1fr !important; /* 2 Columns on Mobile */
        gap: 12px !important;
    }
    
    .why-item {
        padding: 12px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
    }
    
    .why-icon-box i {
        font-size: 1.35rem !important;
    }
    
    .why-text h3 {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   FAQ Accordion Custom Premium Layout
   ========================================================================== */
.faq-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-question {
    padding: 20px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
}

.faq-question h3 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease !important;
}

.faq-icon {
    color: var(--gold-primary) !important;
    font-size: 0.95rem !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.faq-answer {
    max-height: 0;
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 24px !important;
}

.faq-answer p {
    margin: 0 !important;
    padding-bottom: 20px !important;
    color: #94A3B8 !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}

/* Active State Styles */
.faq-item.active {
    border-color: rgba(212, 175, 55, 0.25) !important;
    background: rgba(212, 175, 55, 0.02) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.faq-item.active .faq-question h3 {
    color: var(--gold-primary) !important;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg) !important;
}

@media (max-width: 768px) {
    .faq-question {
        padding: 16px 20px !important;
    }
    .faq-question h3 {
        font-size: 0.96rem !important;
    }
    .faq-answer {
        padding: 0 20px !important;
    }
    .faq-answer p {
        font-size: 0.88rem !important;
    }
}


/* ==========================================================================
   Premium FAQ Accordion Redesign & High-Contrast Styles
   ========================================================================== */
#home-faq {
    background: #fdfcf9 !important; /* Soft luxury warm light background for homepage FAQ section */
}

#home-faq .section-title,
section:has(.faq-container-box) .section-title {
    color: #0F4426 !important; /* Premium dark forest green heading text */
}

#home-faq .section-desc,
section:has(.faq-container-box) .section-desc {
    color: #555555 !important; /* Highly readable description text */
}

.faq-container-box {
    max-width: 850px !important;
    margin: 0 auto !important;
}

.faq-item {
    background: #ffffff !important; /* Clean white card layout */
    border: 1px solid rgba(15, 68, 38, 0.2) !important; /* Elegant brand green border line initially */
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-question {
    padding: 18px 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
}

.faq-question h3 {
    margin: 0 !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: #2c3e50 !important; /* Clear high contrast dark blue-grey text */
    transition: color 0.3s ease !important;
    line-height: 1.4 !important;
}

.faq-icon {
    color: #0F4426 !important;
    font-size: 0.9rem !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-answer {
    max-height: 0;
    overflow: hidden !important;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 25px !important;
}

.faq-answer p {
    margin: 0 !important;
    padding-bottom: 18px !important;
    color: #555555 !important; /* Highly readable grey text body */
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}

/* Active FAQ Item State */
.faq-item.active {
    border-color: var(--gold-primary) !important; /* Gold border boundary */
    background: rgba(24, 94, 50, 0.01) !important; /* Light green tint */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
}

.faq-item.active .faq-question h3 {
    color: #0F4426 !important; /* Green active heading */
}

.faq-item.active .faq-icon {
    color: var(--gold-primary) !important;
    transform: rotate(180deg) !important;
}

/* Premium Contact CTA Box */
.faq-contact-card {
    background: #0F4426 !important; /* Premium dark forest green background */
    border-radius: 12px !important;
    padding: 30px 40px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 45px !important;
    box-shadow: 0 10px 30px rgba(15, 68, 38, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.faq-contact-info {
    text-align: left !important;
}

.faq-contact-info h4 {
    font-family: var(--font-heading) !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: 0.5px !important;
}

.faq-contact-info p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.88rem !important;
    margin: 0 !important;
}

.faq-contact-actions {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

.btn-gold-solid {
    background: var(--gold-primary) !important;
    color: #0E1824 !important;
    font-weight: 800 !important;
    font-size: 0.84rem !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
}

.btn-gold-solid:hover {
    background: #c59b27 !important;
    color: #0E1824 !important;
    transform: translateY(-2px) !important;
}

.btn-green-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.84rem !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
}

.btn-green-outline:hover {
    border-color: var(--gold-primary) !important;
    color: var(--gold-primary) !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
    .faq-contact-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 25px 20px !important;
        gap: 20px !important;
    }
    
    .faq-contact-info {
        text-align: center !important;
    }
    
    .faq-contact-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .btn-gold-solid,
    .btn-green-outline {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ==========================================================================
   Cinema Showcase Video Screen Animations
   ========================================================================== */
@keyframes buttonPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.35);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes redDotPulse {
    0% {
        opacity: 0.3;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.9);
    }
}


/* Center the 7th card of the amenities grid on desktop only if there are exactly 7 cards */
@media (min-width: 1025px) {
    .amenities-comp-grid > .amenity-comp-card:first-child:nth-last-child(7) ~ .amenity-comp-card:last-child {
        grid-column: 2 !important;
    }
}


/* ONLY navigation menu hyperlinks get #FDBD27 hover/active color */
.sub-nav-list a:hover,
.sub-nav-list a.active {
    color: #FDBD27 !important;
}

.drawer-link:hover,
.drawer-link.active {
    color: #FDBD27 !important;
    border-bottom-color: #FDBD27 !important;
}


/* Justify all paragraphs by default but allow center-align classes to override */
p, .section-desc {
    text-align: justify !important;
}

.text-center, .text-center p, .section-header p, .hero-content p, .hero-banner p {
    text-align: center !important;
}

/* Ensure Quick Booking Bar does not overflow on 992px tablet view */
@media (max-width: 992px) {
    .hero-banner {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 140px !important;
        padding-bottom: 60px !important;
    }
}


/* Mobile responsive overrides for Special Offers page (coupon cards & packages) */
@media (max-width: 768px) {
    .promo-codes-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .coupon-box {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 18px !important;
        padding: 20px !important;
    }
    .coupon-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .coupon-box button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Target the flex container inside offer-list-card */
    .offer-list-card {
        flex-direction: column !important;
    }
    .offer-img-box {
        min-height: 220px !important;
        height: 220px !important;
        width: 100% !important;
    }
    .offer-desc-box {
        padding: 25px !important;
        width: 100% !important;
    }
    
    /* Target the bottom bar inside offer-desc-box which has display: flex */
    .offer-desc-box > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }
    .offer-desc-box > div[style*="display: flex"] button {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ==========================================================================
   Comprehensive Page-Level Mobile Responsiveness Fixes
   ========================================================================== */

/* 1. Contact Us Page Responsiveness */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .contact-card-info {
        padding: 20px !important;
    }
    .contact-form-wrap {
        padding: 20px !important;
    }
    .contact-item-box {
        gap: 15px !important;
        margin-bottom: 20px !important;
    }
    .contact-item-content p,
    .contact-item-content a {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 0.88rem !important;
    }
    .map-visual-wrap {
        min-height: 300px !important;
    }
    .map-visual-wrap iframe {
        height: 300px !important;
    }
}

/* 2. Discover Odisha Page Intro Card Fix */
@media (max-width: 768px) {
    .intro-card-odisha {
        padding: 20px !important;
        gap: 20px !important;
    }
    .intro-card-odisha > div {
        min-width: 100% !important;
        padding-left: 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(0,0,0,0.08) !important;
        padding-top: 20px !important;
        margin-top: 10px !important;
        text-align: center !important;
    }
    .intro-card-odisha > div:first-child {
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        text-align: left !important; /* Keep description text left/justified */
    }
}

/* 3. About Puri Page Travel Desk Card Fix */
@media (max-width: 768px) {
    section[style*="background: rgba(15, 68, 38, 0.03)"] div[style*="padding: 50px 40px"] {
        padding: 30px 20px !important;
        border-radius: 12px !important;
    }
    section[style*="background: rgba(15, 68, 38, 0.03)"] div[style*="padding: 50px 40px"] a.btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* 4. Facilities Page Mobile Tweaks */
@media (max-width: 767px) {
    .facility-content {
        padding: 30px 20px 20px 20px !important;
    }
}

/* 5. Services Page Mobile Visual Verification */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    .package-card {
        padding: 25px !important;
    }
    .package-card .btn {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }
}


/* ==========================================================================
   Golden Shimmer Skeleton Loading Placeholders
   ========================================================================== */
.room-img-container, 
.facility-img-box, 
.attraction-img-box, 
.offer-img-box, 
.interactive-preview-container,
.venue-card div[style*="height: 280px"],
.venue-card div[style*="height:280px"],
.intro-card-odisha,
.about-story-img-box {
    background: #f3edd8 linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%) !important;
    background-size: 200% 100% !important;
    animation: goldenSkeletonLoader 1.6s infinite linear !important;
}

@keyframes goldenSkeletonLoader {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}