/* Base Styles */
        body {
            font-family: 'Inter', sans-serif; /* Fallback for sans-serif body text */
            background-color: #FAF9F6; /* Off-White */
            color: #0E1A2B; /* Deep Navy */
            overflow-x: hidden;
        }

        /* Custom Tailwind Configuration */
        .ocean-teal { color: #1BBFBB; }
        .sunset-peach { color: #FFA47A; }
        .golden-sand { color: #EFCB68; }
        .deep-navy { color: #0E1A2B; }
        .bg-ocean-teal { background-color: #1BBFBB; }
        .bg-sunset-peach { background-color: #FFA47A; }
        .bg-deep-navy { background-color: #0E1A2B; }

        /* Elegant Serif Font Simulation (for titles) */
        .font-serif-elegant {
            font-family: 'Playfair Display', Georgia, serif; /* Using a common serif as a high-end approximation */
        }
        
        /* Custom Gradient for Accents (Teal to Peach) */
        .text-gradient-luxury {
            background-image: linear-gradient(90deg, #1BBFBB, #FFA47A);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        
        /* Hero Overlay Gradient */
        .bg-hero-overlay {
            /* Soft Ocean Teal to Sunset Peach */
            background-image: linear-gradient(135deg, rgba(27, 191, 187, 0.6) 0%, rgba(255, 164, 122, 0.6) 100%);
        }
        
        /* Floating Element Animation */
        @keyframes float-gentle {
            0% { transform: translate(0, 0); opacity: 0.8; }
            50% { transform: translate(5px, -8px); opacity: 1; }
            100% { transform: translate(0, 0); opacity: 0.8; }
        }
        .floating-element {
            animation: float-gentle 8s ease-in-out infinite;
        }

        /* Card Hover Effect */
        .card-hover-effect {
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .card-hover-effect:hover {
            transform: scale(1.05) translateY(-5px);
            box-shadow: 0 20px 40px rgba(14, 26, 43, 0.1); /* Deep Navy Shadow */
        }
        
        /* Scroll Reveal (Fade-Up) */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s ease-out, transform 0.9s ease-out;
        }
        .visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Elegance Button Glow */
        .glow-button-teal {
            box-shadow: 0 4px 20px rgba(27, 191, 187, 0.4);
            transition: all 0.4s ease;
        }
        .glow-button-teal:hover {
            box-shadow: 0 6px 25px rgba(27, 191, 187, 0.6);
            transform: translateY(-1px);
        }
    #mobileMenu {
    transition: all 0.3s ease;
}
/* Background Slideshow */
#hero-slideshow {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* Marquee */
.marquee-text {
    display: inline-block;
    animation: marquee 18s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

/* Typewriter */
#typewriter {
    border-right: 3px solid #EFCB68;
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
}
    /* Responsive Modal Animation */
    #subscribeModal:not(.hidden) .modal-content {
        transform: scale(1);
        opacity: 1;
    }
    
    /* Glow Button Enhancement */
    .glow-button-teal {
        box-shadow: 0 2px 12px rgba(27, 191, 187, 0.25);
    }
    .glow-button-teal:hover {
        box-shadow: 0 4px 20px rgba(27, 191, 187, 0.4);
    }
    
    /* Ensure third-party form fills width and is responsive */
    #subscribe-form {
        width: 100%;
    }
    
    #subscribe-form .subscribe-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    #subscribe-form .subscribe-form input,
    #subscribe-form .subscribe-form button,
    #subscribe-form .subscribe-form div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #subscribe-form .subscribe-form input {
        padding: 0.6rem 1rem !important;
        border-radius: 0.75rem !important;
        border: 2px solid rgba(239, 203, 104, 0.3) !important;
        font-size: 0.875rem !important;
        transition: all 0.2s ease !important;
        background: rgba(250, 249, 246, 0.8) !important;
        color: #0E1A2B !important;
    }
    
    #subscribe-form .subscribe-form input:focus {
        border-color: #1BBFBB !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(27, 191, 187, 0.15) !important;
    }
    
    #subscribe-form .subscribe-form button {
        padding: 0.65rem 1.5rem !important;
        border-radius: 0.75rem !important;
        background: linear-gradient(135deg, #1BBFBB, #0ea5a0) !important;
        color: white !important;
        font-weight: 700 !important;
        font-size: 0.875rem !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 15px rgba(27, 191, 187, 0.3) !important;
    }
    
    #subscribe-form .subscribe-form button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 25px rgba(27, 191, 187, 0.4) !important;
    }
    
    #subscribe-form .subscribe-form button:active {
        transform: scale(0.98) !important;
    }
    
    /* Custom scrollbar for modal */
    #subscribeModal::-webkit-scrollbar {
        width: 4px;
    }
    #subscribeModal::-webkit-scrollbar-track {
        background: transparent;
    }
    #subscribeModal::-webkit-scrollbar-thumb {
        background: #1BBFBB;
        border-radius: 10px;
    }
    
    #subscribeModal {
        scrollbar-width: thin;
        scrollbar-color: #1BBFBB transparent;
    }
    
    /* Extra small devices (phones < 480px) */
    @media (max-width: 480px) {
        #subscribeModal .px-4 {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }
        #subscribeModal .pb-4 {
            padding-bottom: 0.75rem;
        }
        #subscribeModal .pt-3 {
            padding-top: 0.5rem;
        }
        
        #subscribe-form .subscribe-form input {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.8rem !important;
        }
        
        #subscribe-form .subscribe-form button {
            padding: 0.55rem 1rem !important;
            font-size: 0.8rem !important;
        }
        
        #subscribeModal .modal-content {
            max-width: 98% !important;
        }
    }
    
    /* Small devices (phones 480-640px) */
    @media (min-width: 481px) and (max-width: 640px) {
        #subscribe-form .subscribe-form input {
            padding: 0.6rem 0.9rem !important;
            font-size: 0.85rem !important;
        }
        
        #subscribe-form .subscribe-form button {
            padding: 0.6rem 1.2rem !important;
            font-size: 0.85rem !important;
        }
    }
    
    /* Tablets and small laptops (641-1024px) */
    @media (min-width: 641px) and (max-width: 1024px) {
        #subscribe-form .subscribe-form input {
            padding: 0.7rem 1.1rem !important;
        }
    }
    
    /* Large screens > 1024px */
    @media (min-width: 1025px) {
        #subscribe-form .subscribe-form {
            gap: 0.9rem;
        }
    }