/* Basic Reset and Variables */
:root {
    --primary-text-color: #ffffff;      /* White, used for hero text, logo, and desktop nav links */
    --accent-color: #b38c6b;            /* Tan/Brown, used for the button, headings, and link hovers */
    --background-color: #e8d7c4;        /* The light tan/beige background color for mobile menu and site body */
    --dark-text-color: #444444;         /* Dark color, used for mobile nav links and text */
    --cursor-color: #8b5d49;            /* Dark brown color for the custom cursor */
    --max-width: 1200px;
}

/* ADDED: Smooth scrolling property */
html {
    scroll-behavior: smooth;
}

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

body {
    font-family: 'Arial', sans-serif;
    /* NEW: Set Hero Image as Fixed Website Background */
    background-image: url('Images/Hero.jpg');
    background-size: cover;
    background-position: center top; 
    background-attachment: fixed; /* Makes the content scroll over the image */
    
    background-color: var(--background-color); /* Fallback */
    color: var(--primary-text-color);
    line-height: 1.6;
    cursor: none; /* Hide default cursor globally on desktop */
}

/* ---------------------------------- */
/* HEADER & NAVIGATION STYLING */
/* ---------------------------------- */

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Logo Wrapper */
.logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
}

/* Logo Link (Home Button) Styling */
.logo a {
    text-decoration: none; 
    color: var(--primary-text-color); 
    display: flex; 
    align-items: center;
    gap: 5px; 
}

.logo a:hover {
    cursor: pointer;
}

/* Desktop Navigation Menu Container */
.navbar {
    /* STYLING FOR TRANSLUCENT BACKGROUND */
    background-color: rgba(0, 0, 0, 0.15); 
    padding: 10px 25px; 
    border-radius: 50px; 
    backdrop-filter: blur(5px); 
}

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

.navbar a {
    text-decoration: none;
    color: var(--primary-text-color); 
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 
    cursor: none; 
    position: relative; 
}

/* Styling for the Underline Animation */
.navbar a::after {
    content: '';
    position: absolute;
    width: 0; 
    height: 1px;
    bottom: -5px; 
    left: 0;
    background-color: var(--accent-color); 
    transition: width 0.3s ease-out; 
}

/* On hover, expand the width to 100% */
.navbar a:hover::after {
    width: 100%;
}

/* ---------------------------------- */
/* HERO SECTION STYLING (Standard Flow) */
/* ---------------------------------- */

.hero-section {
    position: relative;
    min-height: 100vh; 
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: none !important;
}

.hero-section::before {
    content: none;
}

.hero-background-img {
    display: none;
}

/* Hero Content (Text and Button) */
.hero-content {
    position: relative;
    z-index: 20; 
    max-width: 50%;
    /* Added 100px bottom padding for separation from the next section */
    padding: 0 40px 100px 40px; 
    margin-left: 10%;
    color: var(--primary-text-color);
    cursor: none; 
}

/* Ensure children elements also hide the default cursor */
.hero-content *, .hero-content *:hover {
    cursor: none !important;
}

.headline {
    font-family: serif; 
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.description {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Book Appointment Button - Desktop Styles */
.book-button {
    display: inline-block;
    padding: 15px 35px;
    background-color: var(--accent-color);
    color: var(--primary-text-color);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.1s;
    border: none;
    cursor: none !important;
    text-transform: uppercase;
}

.book-button:hover {
    background-color: #a07a5d; 
}

/* ---------------------------------- */
/* CSS ANIMATIONS */
/* ---------------------------------- */

/* Floating Leaf Keyframes */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Rotating Flower & Cursor Keyframes */
@keyframes slow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* NEW KEYFRAMES FOR MARQUEE (CSS Control) */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } 
}

/* NEW KEYFRAMES FOR IMAGE PAN/SLIDE */
@keyframes image-pan {
    0% { background-position: center 0%; }
    100% { background-position: center 100%; }
}

/* NEW KEYFRAMES for Pop-Up Modal */
@keyframes pop-in {
    0% {
        transform: scale(0.5) translateY(50%);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Animated Elements Container (Hero Section) */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 3;
}

.leaf-float {
    position: absolute; top: 15%; left: 30%; width: 100px; height: 100px;
    animation: float 4s ease-in-out infinite alternate; animation-delay: 1.1s; 
    transform: translateX(-150px); opacity: 0; transition: transform 1s ease-out, opacity 1s ease-out;
}

.flower-rotate {
    position: absolute; bottom: 10%; right: 20%; width: 80px; height: 80px; transform-origin: center center;
    animation: slow-rotate 15s linear infinite; animation-delay: 1.1s; 
    transform: translateX(150px); opacity: 0; transition: transform 1s ease-out, opacity 1s ease-out;
}

.floating-elements.section-visible .leaf-float { transform: translateX(0); opacity: 1; }
.floating-elements.section-visible .flower-rotate { transform: translateX(0); opacity: 1; }

/* ---------------------------------- */
/* CUSTOM ROTATING CURSOR STYLING */
/* ---------------------------------- */

.custom-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; }
.hero-section:hover ~ .custom-cursor { opacity: 1; }
.cursor-circle { width: 100px; height: 100px; border-radius: 50%; background-color: var(--cursor-color); display: flex; justify-content: center; align-items: center; position: relative; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
.cursor-circle::before { content: ''; position: absolute; width: 60%; height: 60%; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 100%; }
.cursor-arrow { position: absolute; font-size: 2rem; color: var(--primary-text-color); line-height: 1; transform: rotate(0deg); }
.cursor-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; animation: slow-rotate 15s linear infinite; transform-origin: center; transform: scale(0.75); }
.rotating-text { font-family: Arial, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---------------------------------- */
/* MARQUEE SCROLLING TEXT STYLING (CSS-controlled) */
/* ---------------------------------- */

.marquee-wrapper { width: 100%; padding: 30px 0; background-color: var(--accent-color); overflow: hidden; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.marquee-text { display: inline-block; width: max-content; animation: marquee-scroll 25s linear infinite; }
.marquee-text span { font-size: 1.8rem; font-weight: 700; color: var(--primary-text-color); text-transform: uppercase; letter-spacing: 2px; padding: 0 15px; }

/* ---------------------------------- */
/* ABOUT US SECTION STYLING */
/* ---------------------------------- */

.about-us-section { position: relative; padding: 100px 40px; background-color: var(--background-color); color: var(--dark-text-color); overflow: hidden; }
.about-content-wrapper { max-width: var(--max-width); margin: 0 auto; display: flex; gap: 60px; align-items: flex-start; position: relative; z-index: 20; }
.about-text-column .subtitle, .about-text-column .section-headline, .about-text-column p, .about-text-column .primary-button { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.about-image { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.about-us-section.is-visible .subtitle { opacity: 1; transform: translateY(0); }
.about-us-section.is-visible .section-headline { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.about-us-section.is-visible .about-text-column p { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.about-us-section.is-visible .primary-button { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.about-us-section.is-visible .about-image { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.about-floating-decorations { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 10; }
.about-leaf-1 { position: absolute; width: 100px; height: 100px; top: 5%; left: 85%; animation: float 4s ease-in-out infinite alternate; animation-delay: 1.1s; transform: translateX(150px); opacity: 0; transition: transform 1s ease-out, opacity 1s ease-out; }
#about-us.is-visible .about-leaf-1 { transform: translateX(0); opacity: 1; }
.about-text-column { flex: 1; max-width: 50%; }
.subtitle { font-size: 1rem; font-weight: 600; color: var(--accent-color); letter-spacing: 2px; margin-bottom: 10px; }
.section-headline { font-size: 3rem; font-weight: 300; margin-bottom: 30px; line-height: 1.2; }
.about-text-column p { margin-bottom: 20px; font-size: 1.1rem; }
.primary-button {
    display: inline-block; padding: 12px 25px; margin-top: 10px; background-color: var(--accent-color);
    color: var(--primary-text-color); text-decoration: none; font-size: 0.9rem; font-weight: 600;
    letter-spacing: 1px; border-radius: 5px; transition: background-color 0.3s; text-transform: uppercase;
}
.primary-button:hover { background-color: #a07a5d; }
.about-image-column { flex: 1; max-width: 50%; }
.about-image { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

/* ---------------------------------- */
/* SERVICES SECTION STYLING */
/* ---------------------------------- */

.services-section { padding: 100px 40px; background-color: rgba(232, 215, 196, 0.5); color: var(--dark-text-color); text-align: center; }
.services-header { max-width: var(--max-width); margin: 0 auto 50px auto; }
.services-header .section-headline { color: var(--primary-text-color); font-size: 3rem; font-weight: 300; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }
.services-section .subtitle { color: var(--primary-text-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }
.services-grid { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.service-card { background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
.service-icon { display: none; } /* Hide old img tag */

/* Service Image Slider Wrapper */
.service-image-slider {
    width: 100%; height: 180px; border-radius: 6px; margin-bottom: 20px;
    background-size: 110% auto; background-repeat: no-repeat; background-position: center center;
    transition: background-size 0.5s ease-out;
}
.service-card:hover .service-image-slider { background-size: 120% auto; animation: image-pan 12s linear infinite alternate; }

.card-title { font-size: 1.5rem; font-weight: 600; color: var(--dark-text-color); margin-bottom: 10px; }
.card-description { font-size: 0.95rem; color: #666; margin-bottom: 20px; line-height: 1.5; }
.card-link { display: inline-block; text-decoration: none; color: var(--accent-color); font-weight: 600; font-size: 0.9rem; transition: color 0.3s; }
.card-link:hover { color: var(--dark-text-color); }

/* ---------------------------------- */
/* PACKAGES SECTION STYLING */
/* ---------------------------------- */

.packages-section { padding: 100px 40px; background-color: var(--background-color); color: var(--dark-text-color); text-align: center; }
.packages-header { max-width: var(--max-width); margin: 0 auto 60px auto; }
.packages-header .subtitle { color: var(--accent-color); text-shadow: none; }
.packages-header .section-headline { color: var(--dark-text-color); font-size: 3rem; font-weight: 300; }
.packages-grid { max-width: var(--max-width); margin: 0 auto; display: flex; gap: 30px; justify-content: center; }
.package-card { background-color: #ffffff; flex: 1 1 300px; padding: 40px 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); position: relative; border-top: 3px solid transparent; transition: border-top-color 0.3s; }
.package-card.featured { border-top-color: var(--accent-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transform: translateY(-5px); }
.badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--accent-color); color: var(--primary-text-color); padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.package-title { font-size: 1.8rem; font-weight: 600; color: var(--dark-text-color); margin-bottom: 10px; }
.package-price { font-size: 3rem; font-weight: 300; color: var(--accent-color); margin-bottom: 5px; }
.package-duration { font-size: 0.9rem; color: #888; margin-bottom: 25px; }
.package-features { list-style: none; padding: 0; margin-bottom: 30px; text-align: center; }
.package-features li { font-size: 1rem; color: var(--dark-text-color); padding: 8px 0; border-bottom: 1px dashed #eee; }
.package-features li:last-child { border-bottom: none; }
.package-button { width: 100%; max-width: 200px; }

/* ---------------------------------- */
/* GALLERY SECTION STYLING */
/* ---------------------------------- */

.gallery-section { padding: 100px 40px; background-color: var(--background-color); color: var(--dark-text-color); text-align: center; }
.gallery-header { max-width: var(--max-width); margin: 0 auto 50px auto; }
.gallery-header .subtitle { color: var(--accent-color); text-shadow: none; }
.gallery-header .section-headline { color: var(--dark-text-color); font-size: 3rem; font-weight: 300; }
.gallery-grid { 
    max-width: var(--max-width); margin: 0 auto 40px auto; 
    /* DESKTOP: Flex for continuous slide */
    display: flex; 
    flex-wrap: nowrap;
    gap: 25px; 
    /* Hide scrollbar on desktop */
    overflow-x: hidden; 
    -ms-overflow-style: none; 
    scrollbar-width: none;
}
.gallery-grid::-webkit-scrollbar { display: none; }

.gallery-item { 
    /* CRITICAL: Fixed width for slider items */
    flex: 0 0 350px; 
    height: 300px; 
    overflow: hidden; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
}

/* Gallery Image Slider Wrapper */
.gallery-image-slider {
    width: 100%; height: 100%; 
    background-size: 110% auto; 
    background-repeat: no-repeat; 
    background-position: center center;
    transition: transform 0.5s ease-out;
}
.gallery-item:hover .gallery-image-slider { 
    transform: scale(1.05); /* Only scale on hover, JS controls continuous movement */
}
.gallery-image { display: none; } /* Hide old img tag */

.gallery-item.large, .gallery-item.wide, .gallery-item.tall { grid-column: span 1; grid-row: span 1; }
.gallery-button { margin-top: 20px; }

/* ---------------------------------- */
/* CONTACT SECTION STYLING */
/* ---------------------------------- */

.contact-section { padding: 100px 40px; background-color: #ffffff; color: var(--dark-text-color); }
.contact-wrapper { max-width: var(--max-width); margin: 0 auto; display: flex; gap: 60px; align-items: stretch; }
.contact-form-column,
.contact-info-column { flex: 1; max-width: 50%; }
.contact-form-column .section-headline { color: var(--dark-text-color); margin-bottom: 40px; }
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form select,
.booking-form textarea { width: 100%; padding: 15px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; font-family: inherit; box-sizing: border-box; color: var(--dark-text-color); }
.booking-form select { 
    appearance: none; 
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4%206L8%2010L12%206Z%22%20fill%3D%22%23444444%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
}
.booking-form textarea { resize: vertical; min-height: 150px; }
.submit-button { width: 100%; margin-top: 10px; padding: 15px 0; }
.contact-info-header { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; color: var(--accent-color); text-align: left; }
.map-placeholder { width: 100%; height: 350px; margin-bottom: 30px; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.map-placeholder iframe { width: 100%; height: 100%; border: 0; }
.contact-info-details { text-align: left; line-height: 1.8; }

/* ---------------------------------- */
/* FOOTER STYLING (FINAL DARK VERSION) */
/* ---------------------------------- */

.site-footer { display: none; } /* Hide old simple footer */

.footer-section {
    background-color: #000000; 
    color: var(--primary-text-color);
    font-family: Arial, sans-serif;
    position: relative;
    box-shadow: 0 -10px 30px rgba(179, 140, 107, 0.4); 
    padding-top: 50px;
    padding-bottom: 20px;
}

.footer-top-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px 50px 40px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2; 
}

.footer-column { flex: 1 1 200px; padding-right: 15px; }
.footer-logo-col { flex-basis: 250px; }

.footer-heading {
    font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 25px;
    color: var(--accent-color); 
    text-transform: uppercase;
}

.footer-logo { display: flex; align-items: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 15px; }
.footer-logo img { height: 30px; margin-right: 5px; }
.footer-mission { font-size: 0.9rem; line-height: 1.5; margin-bottom: 25px; color: #b0b0b0; }

.footer-social-icons a {
    color: var(--primary-text-color); 
    font-size: 1.5rem; margin-right: 15px; transition: color 0.3s;
}
.footer-social-icons a:hover { color: var(--accent-color); }

.footer-links { list-style: none; padding: 0; }
.footer-links li a {
    text-decoration: none; color: #b0b0b0; font-size: 0.95rem; line-height: 2.2; transition: color 0.3s;
}
.footer-links li a:hover { color: var(--accent-color); }

.footer-contact-info { list-style: none; padding: 0; }
.footer-contact-info li { display: flex; align-items: flex-start; margin-bottom: 15px; color: #b0b0b0; font-size: 0.95rem; }
.footer-contact-info li i { color: var(--accent-color); font-size: 1.1rem; margin-right: 10px; margin-top: 3px; }

.footer-subscribe-col p { font-size: 0.95rem; margin-bottom: 15px; color: #b0b0b0; }
.footer-subscribe-form input[type="email"] { width: 100%; padding: 10px; background-color: #1a1a1a; border: 1px solid #333; color: var(--primary-text-color); border-radius: 4px; margin-bottom: 15px; font-size: 1rem; box-sizing: border-box; }
.subscribe-button {
    width: 100%; padding: 12px; background: linear-gradient(to right, var(--accent-color), #d0a582);
    color: #000000; font-weight: 700; font-size: 1rem; border: none; border-radius: 4px; cursor: pointer; transition: opacity 0.3s;
}
.subscribe-button:hover { opacity: 0.9; }

/* Divider and Bottom Bar */
.footer-divider { max-width: var(--max-width); margin: 0 auto; border: none; border-top: 1px solid #333; padding-bottom: 10px; }

.footer-bottom-bar {
    text-align: center;
    padding: 10px 40px;
}

.footer-copyright-line {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px; /* Spacing above policy links */
}

/* NEW: Attribution Link Styling */
.footer-attribution-link {
    color: #b0b0b0; /* Light gray text color */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-attribution-link:hover {
    color: var(--accent-color); /* Tan accent color on hover */
    text-decoration: underline;
}

.footer-policies a {
    color: #666;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s;
}

.footer-policies a:hover {
    color: var(--accent-color);
}

/* ---------------------------------- */
/* WHATSAPP FLOATING BUTTON STYLING */
/* ---------------------------------- */

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px; /* Space from the bottom of the viewport */
    right: 40px; /* Space from the right of the viewport */
    background-color: #25d366; /* WhatsApp Green */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    line-height: 60px; /* Vertically center the icon */
    z-index: 1000; /* Ensure it floats above all other content */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transition: transform 0.3s ease-out;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* ---------------------------------- */
/* POP-UP MODAL STYLING (CRITICAL FIX) */
/* ---------------------------------- */

.modal {
    /* CRITICAL FIX 1: Ensure it's fixed relative to the viewport, overriding any parent transforms */
    position: fixed !important; 
    
    z-index: 99999; /* Highest priority */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    background-color: rgba(0, 0, 0, 0.7); 
    
    /* Initially hidden state */
    display: none; 
    opacity: 0;
    
    /* Centering content */
    justify-content: center;
    align-items: center;
    /* FIX: Set the desired 1-second duration for fade-in */
    transition: opacity 1s ease-in-out;
}

.modal.show {
    /* CRITICAL FIX 2: Use display:flex to show the overlay and opacity: 1 for fade-in */
    display: flex !important;
    opacity: 1;
}

.modal-content {
    background-color: var(--background-color); 
    margin: auto;
    padding: 40px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    /* ADDED: INITIAL SCALE for pop-up animation */
    transform: scale(0.9);
    transition: transform 0.5s ease-out; /* Transition for the pop effect */
    position: relative;
    text-align: center;
    color: var(--dark-text-color);
}

/* Apply final scale when modal is shown */
.modal.show .modal-content {
    transform: scale(1);
}

.close-button {
    color: var(--dark-text-color);
    float: right;
    font-size: 36px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.close-button:hover,
.close-button:focus {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
}

.modal-subtitle {
    color: var(--accent-color);
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.modal-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark-text-color);
}

.modal-description {
    font-size: 1rem;
    margin-bottom: 30px;
    line-height: 1.5;
}

.modal-button {
    display: inline-block;
    padding: 15px 40px;
    /* Reuse primary-button style but ensure it looks solid */
}

/* ---------------------------------- */
/* RESPONSIVENESS & MOBILE MENU */
/* ---------------------------------- */

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 101; }
.menu-toggle .bar { display: block; width: 25px; height: 3px; margin: 5px 0; background-color: var(--primary-text-color); transition: all 0.3s ease-in-out; }

@media (max-width: 992px) {
    /* Mobile styles overrides */
    
    body { cursor: auto; }
    .custom-cursor { display: none; }
    .hero-content, .hero-section, .hero-content *, .hero-content *:hover, .navbar a, .book-button { cursor: auto !important; }
    
    .menu-toggle { display: block; }
    .menu-toggle .bar { background-color: var(--dark-text-color); }

    .header { padding: 20px 20px; }
    .logo a { color: var(--dark-text-color); }

    .navbar {
        position: fixed; top: 0; right: 0; height: 100vh; width: 100vw; background-color: var(--background-color); 
        padding-top: 0; transform: translateX(100%); transition: transform 0.4s ease-in-out; box-shadow: none; z-index: 99;
        display: flex; justify-content: center; align-items: center; padding: 0; border-radius: 0; backdrop-filter: none;
    }
    .navbar.is-open { transform: translateX(0); }
    .navbar ul { flex-direction: column; align-items: center; justify-content: center; gap: 25px; padding: 0; display: flex; }
    .navbar a { font-size: 1.2rem; color: var(--dark-text-color); text-shadow: none; }
    .navbar a::after { display: none; }
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Adjust Hero Content */
    .hero-section { padding-top: 100px; min-height: auto; margin-bottom: 20%; }
    .hero-content { max-width: 90%; margin: 0 auto; padding: 0 20px; text-align: center; margin-bottom: 20px; }
    .headline { font-size: 3.5rem; line-height: 1.1; margin-bottom: 30px; text-align: center; }
    
    .description { text-align: center; font-size: 1.1rem; margin-bottom: 20px; }

    .book-button { display: block; width: 100%; max-width: 350px; margin: 0 auto; font-size: 1.1rem; padding: 18px 0; }
    
    /* Reposition animated elements */
    .leaf-float, .flower-rotate { display: none; }
    
    /* Responsive adjustments for the About section */
    .about-content-wrapper { flex-direction: column; gap: 40px; }
    .about-text-column, .about-image-column { max-width: 100%; text-align: center; }
    .section-headline { font-size: 2.5rem; }
    .primary-button { display: block; width: fit-content; margin: 10px auto; }
    .about-leaf-1 { display: none; }
    
    /* Responsive adjustments for Marquee */
    .marquee-wrapper { padding: 20px 0; }
    .marquee-text span { font-size: 1.2rem; }

    /* SERVICES SCROLLING GRID FIX (Flexbox Horizontal Scroll) */
    .services-grid {
        display: flex; overflow-x: scroll; overflow-y: hidden; flex-wrap: nowrap; width: 100%;
        padding-bottom: 20px; padding-left: 20px; padding-right: 20px; gap: 20px;
        -ms-overflow-style: none; scrollbar-width: none;
    }
    .services-grid::-webkit-scrollbar { display: none; }
    .service-card { flex: 0 0 auto; width: 80vw; max-width: 300px; white-space: normal; }
    .services-section { padding: 60px 0; }
    .services-header { padding: 0 20px; margin-bottom: 30px; }
    .services-header .section-headline { font-size: 2.5rem; }
    
    /* Responsive adjustments for Packages section */
    .packages-grid { flex-direction: column; gap: 40px; }
    .package-card { flex: 1 1 auto; max-width: 400px; margin: 0 auto; }

    /* Responsive adjustments for Gallery section */
    .gallery-section { padding: 60px 20px; }
    .gallery-grid { 
        display: flex; flex-wrap: nowrap; overflow-x: scroll; padding-left: 20px; padding-right: 20px; gap: 15px;
        grid-template-columns: none; grid-auto-rows: 250px; -ms-overflow-style: none; scrollbar-width: none;
    }
    .gallery-grid::-webkit-scrollbar { display: none; }
    .gallery-item { flex: 0 0 80vw; height: 250px; }
    .gallery-item.large, .gallery-item.wide, .gallery-item.tall { grid-column: span 1; grid-row: span 1; }
    .gallery-header .section-headline { font-size: 2.5rem; }
    
    /* Responsive adjustments for Contact section */
    .contact-wrapper { flex-direction: column; gap: 40px; }
    .contact-form-column, .contact-info-column { max-width: 100%; }
    .contact-info-header, .contact-info-details { text-align: center; }
    .map-placeholder { height: 300px; }
    .contact-section { padding: 60px 20px; }
    
    /* Responsive adjustments for Footer */
    .footer-top-wrapper { flex-direction: column; align-items: center; text-align: center; padding-left: 20px; padding-right: 20px; }
    .footer-column { flex-basis: 100%; max-width: 300px; margin-bottom: 30px; }
    .footer-heading { margin-bottom: 15px; }
    .footer-links li a, .footer-contact-info li, .footer-subscribe-col p { text-align: center; }
    .footer-social-icons { justify-content: center; display: flex; }
    .footer-logo-col { padding-bottom: 20px; border-bottom: 1px solid #333; }
    .footer-contact-info li { justify-content: center; }
    .footer-contact-info li i { margin-right: 5px; }
    
    /* Mobile Adjustments for WhatsApp button */
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
        line-height: 50px;
    }
}