/* Base styles using Space Grotesk font */
body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #0D1117; /* A very dark, almost black blue */
    color: #C9D1D9; /* Light grey for text */
    overflow-x: hidden; /* Prevent horizontal scroll */

    /* NEW: Firefox scrollbar compatibility */
    scrollbar-width: thin;
    scrollbar-color: #242739 #161722; /* UPDATED thumb color (bottom color), track color */
}

/* Gradient Scrollbar - NEW PALETTE */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #0D1117;
}
::-webkit-scrollbar-thumb {
    /* UPDATED: Reverted to Gradient with NEW requested colors */
    background: linear-gradient(to bottom, #242739, #161722);
    border-radius: 10px;
    /* border: 2px solid #757575; <--- REMOVED per request to go back to gradient style */
}

/* Custom gradient text - NEW PALETTE */
.gradient-text {
    /* UPDATED: New 4-Stop Gradient (90deg) with CORRECTED ORDER */
    background: linear-gradient(90deg, #cec2fa, #9289fa, #0008fa, #0000fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    /* REMOVED text-shadow */
}

/* REMOVED the entire .gradient-text-animated rule block */

/* Styling for the hero section background */
.hero-bg {
    background-image: url('images/landingpage1.jpg');
    background-size: cover;
    background-position: center;
    /* Default: Parallax effect for Desktop */
    background-attachment: fixed;
}

/* FIX: Final adjustment to pure black overlay at 55% opacity */
.bg-overlay-darker {
    background-color: rgba(0, 0, 0, 0.55); /* Pure black at 55% opacity */
}

/* New background for the contact section */
.contact-bg {
    background-image: url('images/contact-bg.jpg');
    background-size: cover;
    background-position: center center; 
}

/*
 * ========================================================================
 * NEW JELLYFISH GLOW-ONLY BUTTON STYLES
 * ========================================================================
 */

.btn-gradient {
    background-image: none;
    background-color: transparent;
    color: #C9D1D9;
    border: 2px solid transparent;
    box-shadow: 0 0 15px rgba(233, 224, 255, 0.3);
    /* UPDATED: Refined animation timing */
    animation: jellyfish-glow 2.5s ease-in-out infinite alternate; 
    backdrop-filter: none;
    transition: all 0.4s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px; /* rounded-full */
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    cursor: pointer;
}

/* NEW: Utility classes for wider/med buttons */
.btn-gradient-wider {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.btn-gradient-med {
    padding-left: 2rem;
    padding-right: 2rem;
}


.btn-gradient:hover {
    /* FIX: Removed 'animation: none;' to keep glow in sync */
    box-shadow: 0 0 30px rgba(233, 224, 255, 0.7);
    transform: scale(1.05);
}

.btn-icon-only {
    padding: 0.75rem; /* p-3 */
}

/* Cascading Glow Delays */
.glow-delay-1 {
    animation-delay: 0s;
}
.glow-delay-2 {
    animation-delay: 0.3s; 
}
.glow-delay-3 {
    animation-delay: 0.6s; 
}

.btn-gradient svg {
    color: #C9D1D9;
    transition: color 0.4s ease;
}

/* New Gradient Background for elements - NEW PALETTE */
.gradient-bg {
    /* UPDATED: New 4-Stop Gradient (90deg) with CORRECTED ORDER */
    background: linear-gradient(90deg, #cec2fa, #9289fa, #0008fa, #0000fa);
}

/* Cursor Glow Effect - NEW Lighter Lavender Glow */
.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 224, 255, 0.1) 0%, rgba(233, 224, 255, 0) 70%); 
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: opacity 0.3s;
    opacity: 0;
}

/*
 * ========================================================================
 * NEW SERVICE LIST STYLES (for index.html)
 * ========================================================================
 */

/* New style for the service list link */
.service-link {
    color: #C9D1D9; /* Default text color */
    transition: all 0.3s ease;
    /* UPDATED: Use flexbox for vertical alignment */
    display: flex;
    align-items: flex-start; /* Aligns bullet with the top of the text block */
    padding: 0.5rem 0; /* py-2 */
    background: transparent;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    /* UPDATED: Left-aligned text */
    text-align: left;
    position: relative; /* For the bullet */
    padding-left: 1.5rem; /* Space for the bullet */
}

/* NEW: Added transition for span AND fit-content fix */
.service-link span {
    transition: color 0.3s ease;
    /* CRITICAL FIX: This ensures the element only takes up the width of the text,
       so the gradient (background-size: 100%) spans exactly from the first to last letter. */
    width: fit-content; 
    display: block; /* Keeps it on its own line if needed, but width is constrained */
}

/* Gradient bullet point */
.service-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65rem; /* Manually align with first line of text */
    transform: translateY(0);
    width: 4px; /* Bullet width */
    height: 1.25rem; /* Bullet height */
    /* UPDATED: New 4-Stop Gradient (180deg) with CORRECTED ORDER */
    background: linear-gradient(180deg, #cec2fa, #9289fa, #0008fa, #0000fa);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.service-link:hover {
    transform: scale(1.05);
}

/* NEW: Gradient animation now applies only to the span */
.service-link:hover span {
    /* UPDATED: Static gradient on hover, no animation with CORRECTED ORDER */
    background: linear-gradient(90deg, #cec2fa, #9289fa, #0008fa, #0000fa);
    background-size: 100% auto; /* Was 200% for animation */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* animation: gradient-flow 7s linear infinite; -- REMOVED */
}

/* NEW: Bullet hover effect */
.service-link:hover::before {
    filter: brightness(1.2);
    transform: translateY(0) scale(1.05);
}


/* NEW: Gradient Bullet points for Service Pages */
.gradient-bullets li {
    font-size: 1.125rem; /* text-lg - This is for the LI, so title inherits it */
    color: #C9D1D9; /* Light grey text */
    padding: 0.5rem 0; /* py-2, no px */
    padding-left: 1.5rem; /* Space for the new gradient bullet */
    margin-bottom: 2.5rem; /* Increased spacing */
    position: relative; 
    break-inside: avoid; 
    transition: all 0.2s ease; 
}

/* Gradient bullet point */
.gradient-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem; /* Manually align with first line of text */
    transform: none; /* Reset transform */
    width: 4px; /* Bullet width */
    height: 1.25rem; /* Bullet height */
    /* UPDATED: New 4-Stop Gradient (180deg) with CORRECTED ORDER */
    background: linear-gradient(180deg, #cec2fa, #9289fa, #0008fa, #0000fa);
    border-radius: 2px;
}

/* REMOVED .gradient-bullets li p rule, fix is now in HTML */


/* Gallery Modal Styles */
#gallery-modal {
    transition: opacity 0.3s ease-in-out;
}
#gallery-modal.hidden {
    opacity: 0;
    pointer-events: none;
}
#gallery-main-image {
    transition: opacity 0.4s ease-in-out;
}
.gallery-thumbnail {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.6;
    border-radius: 0.5rem;
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-thumbnail:hover, .gallery-thumbnail.active {
    border-color: transparent;
    box-shadow: 0 0 15px rgba(233, 224, 255, 0.5);
    opacity: 1;
    /* UPDATED: Refined animation timing */
    animation: jellyfish-glow 2.5s ease-in-out infinite alternate; 
}

.gallery-thumbnail:hover img {
    transform: scale(1.05);
}
.gallery-thumbnail.active {
    transform: scale(1.05);
}
.thumbnail-scroller {
    overflow-x: scroll;
    scrollbar-width: none;
}
.thumbnail-scroller::-webkit-scrollbar {
    display: none;
}

 /* Changed btn-arrow to glow-only */
 .btn-arrow {
     background-image: none;
     background-color: transparent;
     border: 2px solid transparent;
     box-shadow: 0 0 15px rgba(233, 224, 255, 0.3);
     /* UPDATED: Refined animation timing */
     animation: jellyfish-glow 2.5s ease-in-out infinite alternate; 
     backdrop-filter: none;
     transition: all 0.4s ease;
     padding: 0.75rem 0.25rem;
     border-radius: 9999px;
 }
 
 .btn-arrow svg {
     color: #C9D1D9; 
     transition: color 0.4s ease;
     width: 1.5rem;
     height: 1.5rem;
 }
 .btn-arrow:hover {
     /* FIX: Removed 'animation: none;' to keep glow in sync */
     box-shadow: 0 0 30px rgba(233, 224, 255, 0.7);
 }

/* Pulse animation for the scroll arrow */
@keyframes pulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}
.scroll-arrow-interactive {
    animation: pulse 2s infinite;
    filter: drop-shadow(0 0 8px rgba(233, 224, 255, 0.7));
    transition: filter 0.3s ease;
}
.scroll-arrow-interactive:hover {
     filter: drop-shadow(0 0 16px rgba(233, 224, 255, 1));
}


/*
 * ========================================================================
 * MOBILE MENU BACKGROUND FIX
 * ========================================================================
 */

/* Glassmorphism style for scrolled header OR open menu */
.header-scrolled, 
.header-menu-open {
    /* UPDATED: REVERTED to 20% opacity for lighter touch */
    background-color: rgba(13, 17, 23, 0.2) !important; 
    /* UPDATED: REVERTED blur to 2px for subtle effect */
    backdrop-filter: blur(2px) !important;
    /* UPDATED: REVERTED border to none */
    border-bottom: none !important;
}

/* The mobile menu dropdown itself should ALWAYS be transparent */
#mobile-menu {
    background-color: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
}


/* New Transparent Form Input Styles */
.form-input {
    background-color: transparent;
    border: 2px solid #30363D;
    color: #C9D1D9;
    transition: all 0.3s ease;
}

.form-input::placeholder {
    color: #8B949E;
}
.form-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(233, 224, 255, 0.5);
    /* UPDATED: Refined animation timing */
    /* FIX: Removed 'animation: none;' to keep glow in sync */
    animation: jellyfish-glow 2.5s ease-in-out infinite alternate; 
}

/* Style for the select dropdown */
.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* TYPO FIX: Corrected SVG data string */
    background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
    color: #C9D1D9; /* Default text */
}
/* Style for the placeholder option */
.form-select:invalid {
    color: #8B949E; /* Placeholder color */
}
/* Style for selected options */
.form-select option {
    background-color: #0D1117;
    color: #C9D1D9;
}


.file-upload-label {
    border: 2px dashed #4A5568;
    background-color: rgba(22, 27, 34, 0.5);
    transition: all 0.3s ease;
}

.file-upload-label:hover {
    border-color: transparent;
    box-shadow: 0 0 10px rgba(233, 224, 255, 0.5);
    /* UPDATED: Refined animation timing */
    /* FIX: Removed 'animation: none;' to keep glow in sync */
    animation: jellyfish-glow 2.5s ease-in-out infinite alternate; 
    background-color: rgba(22, 27, 34, 0.8);
}

/* Glassmorphism container for Contact Form & Testimonial */
.glass-container {
    background-color: rgba(13, 17, 23, 0.5);
    backdrop-filter: blur(2px);
}

/* NEW: Glassmorphism container for Booking Widget */
.glass-container-widget {
    /* UPDATED: Darker background (0.85 opacity) for a deeper look */
    background-color: rgba(13, 17, 23, 0.85);
    backdrop-filter: blur(2px);
    /* UPDATED: Darker, subtle border */
    border: 1px solid #21262d;
}


/*
 * ========================================================================
 * NEW: Booking Widget Styles
 * ========================================================================
 */
#booking-widget-container {
    position: relative; /* Establishes a positioning context for the overlay */
    overflow: hidden; /* Clips the widget to the container's rounded corners */
}

/* NEW: Target the iframe inside the widget container to round the white corners */
#booking-widget-container iframe {
    border-radius: 12px !important;
    overflow: hidden;
}

/* REMOVED the old iframe opacity rule */

#booking-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* This is a cool-toned, semi-transparent blue. 
       Using the "Melrose" color from our gradient at 15% opacity */
    background-color: rgba(170, 173, 253, 0.20); 
    /* This is the magic: lets clicks pass through to the widget below */
    pointer-events: none; 
    z-index: 10; /* Ensures it's on top */
    /* Match the parent's rounding (rounded-xl is 0.75rem) */
    border-radius: 0.75rem; 
}


/* Shimmer Animation for Banner */
@keyframes shimmer {
     0% { background-position: 600% 0; } 
     100% { background-position: -600% 0; } 
}
/* Base style for banner text lines - NEW PALETTE */
.shimmer-text-line {
    /* UPDATED: New 4-Stop Gradient (90deg) adapted for shimmer with CORRECTED ORDER */
    background: linear-gradient(90deg, 
        transparent 20%, 
        #cec2fa 30%, 
        #9289fa 40%, 
        #0008fa 50%, 
        #0000fa 60%, 
        transparent 80%
    );
    background-size: 600% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; 
    font-weight: 700;
}
.animate-line-1 {
     animation: shimmer 60s linear infinite;
}
.animate-line-2 {
     animation: shimmer 60s linear 2s infinite;
}

/* Keyframes for gradient flow on service link hover - REMOVED */
/*
@keyframes gradient-flow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}
*/

/* Keyframes for jellyfish glow */
@keyframes jellyfish-glow {
    from {
        box-shadow: 0 0 15px rgba(233, 224, 255, 0.3);
    }
    to {
        box-shadow: 0 0 25px rgba(233, 224, 255, 0.5);
    }
}

/* REMOVED: Keyframes for the "Book Now" text glow */
/* @keyframes text-glow-wave { ... } */
/* REMOVED: Keyframes for the INTENSE "Book Now" text glow on hover */
/* @keyframes text-glow-wave-hover { ... } */


/*
 * ========================================================================
 * NEW: Nav "Book Now" Button Styles
 * ========================================================================
 */
.nav-book-now {
    /* UPDATED: Removed all gradient text properties */
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-size: auto;
    
    /* UPDATED: Set solid text color to white */
    color: #FFFFFF;

    /* UPDATED: Animation removed */
    /* animation: text-glow-wave 2.5s ease-in-out infinite alternate; */
    
    /* UPDATED: Smooth transition for color */
    transition: all 0.3s ease;
}

/* UPDATED: Hover state for "Book Now" */
.nav-book-now:hover {
    color: #c5c5ff; /* UPDATED: New hover color */
    /* UPDATED: Animation removed */
    /* animation: text-glow-wave-hover 2.0s ease-in-out infinite alternate;  */
}

/*
 * ========================================================================
 * NEW: Footer Text Styles
 * ========================================================================
 */
.footer-text {
  /* 1. The Color: Make it bright and clear */
  color: #FFFFFF; /* Or your lightest, near-white lavender like #F5F0FF */

  /* 2. The "Pop" (The Magic Bullet) */
  /* This is a very subtle, soft, dark shadow. */
  /* It just "lifts" the text from the background. */
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);

  /* 3. Make sure it's readable */
  font-weight: 500; /* Use a "medium" weight, not "light" */
  line-height: 1.6; /* Give it space to breathe */
}

/* NEW: Style for footer links */
.footer-link-styled {
    color: #d7caff;
    transition: color 0.3s ease;
    /* Copied styles from footer-text to ensure consistency */
    font-weight: 500;
    line-height: 1.6;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);
}
.footer-link-styled:hover {
    color: #e4dcff;
}

/* NEW: Style for the hero subtitle shadow */
.hero-subtitle-no-shadow {
    text-shadow: none;
}

/* NEW: Hover color for header phone */
.header-phone {
    transition: all 0.3s ease;
}
.header-phone:hover {
    color: #c5c5ff; /* UPDATED: New hover color */
}

/* NEW: Hover color for header logo link */
.header-logo-link {
    transition: all 0.3s ease;
}
.header-logo-link:hover span {
    color: #c5c5ff; /* UPDATED: New hover color */
}


/* Media Queries */
@media (max-width: 768px) {
    .cursor-glow {
        display: none !important; /* Added !important to ensure override */
    }
    
    /* Override background-attachment to scroll for mobile to fix jitter/springiness */
    .hero-bg {
        background-attachment: scroll !important; /* Added !important to ensure override */
    }
    
    /* NEW: Specifically zoom in the footer background on mobile */
    footer.hero-bg {
        background-size: 200%; /* UPDATED: Changed from 400% to 200% */
        background-position: center center;
    }
    
     .shimmer-text-line {
         animation-duration: 45s; 
     }
     .animate-line-2 {
         animation-delay: 2s; 
     }

     /* FIX: Disable button scaling on mobile to prevent "jump" on tap */
     /* This applies to btn-gradient, service-link, gallery-thumbnail, etc. */
     .btn-gradient:hover,
     .service-link:hover,
     .gallery-thumbnail:hover,
     .gallery-thumbnail.active,
     .nav-book-now:hover,
     .btn-arrow:hover {
        transform: none !important; /* Force scaling to stay at 1 (original size) */
     }
}