/* Base styles */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f172a; /* slate-900 */
            color: #cbd5e1; /* slate-300 */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Custom gradient text */
        .gradient-text {
            background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Navbar glass effect on scroll */
        .glass-nav {
            background-color: rgba(15, 23, 42, 0.7); /* slate-900 with alpha */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(51, 65, 85, 0.5); /* slate-700 with alpha */
        }

        /* Active navigation link */
        .active-nav-link {
            color: #38bdf8 !important; /* sky-400 */
            font-weight: 600;
        }

        /* Primary button style */
        .btn-primary {
            @apply px-6 py-3 rounded-xl bg-gradient-to-r from-sky-500 to-violet-500 text-white font-semibold shadow-lg hover:shadow-xl hover:scale-105 transform transition-all duration-300 ease-in-out;
        }
        
        /* Secondary button style */
        .btn-secondary {
            @apply px-6 py-3 rounded-xl bg-slate-700 text-white font-semibold shadow-md hover:bg-slate-600 hover:scale-105 transform transition-all duration-300 ease-in-out;
        }

        /* Base card style */
        .info-card {
            @apply bg-slate-800 rounded-2xl shadow-lg p-6 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
        }

        /* Recommended plan highlight */
        .recommended-plan {
            @apply border-2 border-sky-400 scale-105;
        }
        
        /* Pricing toggle */
        .toggle-checkbox:checked + .toggle-label {
            background-color: #38bdf8; /* sky-400 */
        }
        .toggle-checkbox:checked + .toggle-label::after {
            transform: translateX(100%);
            background-color: white;
        }
        .toggle-label {
            @apply w-12 h-6 bg-slate-600 rounded-full relative transition-colors duration-300 ease-in-out cursor-pointer;
        }
        .toggle-label::after {
            @apply content-[''] w-5 h-5 bg-white rounded-full absolute top-0.5 left-0.5 transition-transform duration-300 ease-in-out;
        }

        /* Testimonial slider */
        .slider-track {
            transition: transform 0.5s ease-in-out;
        }
        .slider-item {
            flex: 0 0 100%;
        }
        @media (min-width: 768px) {
            .slider-item {
                flex: 0 0 50%;
            }
        }
        @media (min-width: 1024px) {
            .slider-item {
                flex: 0 0 33.3333%;
            }
        }

        /* Scroll-triggered animations */
        .scroll-fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        }
        .scroll-fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hamburger menu animation */
        .hamburger line {
            transition: all 0.3s ease-in-out;
            transform-origin: center;
        }
        .hamburger.open .line-1 {
            transform: rotate(45deg) translate(5px, 6px);
        }
        .hamburger.open .line-2 {
            opacity: 0;
        }
        .hamburger.open .line-3 {
            transform: rotate(-45deg) translate(5px, -6px);
        }
        
        /* Modal transitions */
        .modal {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .modal-content {
            transition: transform 0.3s ease, opacity 0.3s ease;
            transform: scale(0.95);
            opacity: 0;
        }
        .modal.open {
            opacity: 1;
            visibility: visible;
        }
        .modal.open .modal-content {
            transform: scale(1);
            opacity: 1;
        }

        /* Custom form focus */
        .form-input {
            @apply w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 transition-all duration-300;
        }
        .form-input:focus {
            @apply outline-none ring-2 ring-sky-400 border-sky-400;
        }
        
        /* Hero Slider */
        .hero-slider-track {
            display: flex;
            transition: transform 0.7s ease-in-out;
        }
        .hero-slide {
            flex: 0 0 100%;
            width: 100%;
            height: 100vh; /* Use vh for full viewport height */
            @apply bg-cover bg-center;
        }
        .hero-dot {
            @apply w-3 h-3 bg-white rounded-full opacity-50 transition-all cursor-pointer;
        }
        .hero-dot.active {
            @apply opacity-100 scale-125;
        }

        /* FAQ Accordion */
        details {
            @apply bg-slate-800 border border-slate-700 rounded-lg;
        }
        details summary {
            @apply cursor-pointer font-semibold text-lg text-white list-none p-5 relative;
        }
        details summary::-webkit-details-marker {
            display: none;
        }
        details summary::after {
            @apply content-['+'] absolute right-5 top-1/2 -translate-y-1/2 font-bold text-sky-400 text-2xl transition-transform duration-300;
        }
        details[open] summary {
            @apply border-b border-slate-700;
        }
        details[open] summary::after {
            @apply transform rotate-45;
        }
        details div {
            @apply p-5 text-slate-300;
        }
        .hero-slide {
    background-size: cover;       /* Make image cover the container */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating */
    width: 100%;
    height: 100%;
}
.animate-marquee {
    display: flex;
    gap: 2rem;
    animation: marquee 20s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }