/* Add these styles to your existing CSS */
       <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    .hero-slider .slick-list,
    .hero-slider .slick-track,
    .hero-slider .slick-slide > div {
        height: 100vh !important;
    }

    .hero-slider .slick-slide {
        height: 100vh;
    }
   body {
       font-family: 'Poppins', sans-serif;
   }
    @media (max-height: 640px) {
        .hero-slider .slick-slide {
            min-height: 640px;
        }
    }
        .hero-slider .slick-dots {
            bottom: 40px;
        }

        .hero-slider .slick-dots li button:before {
            color: #fde047;
            font-size: 14px;
            opacity: 0.5;
        }

        .hero-slider .slick-dots li.slick-active button:before {
            color: #7c3aed;
            opacity: 1;
        }

        .slick-arrow {
            z-index: 10;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(10px);
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .slick-arrow:hover {
            background: rgba(124, 58, 237, 0.8) !important;
        }

        @keyframes slide-up {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .animate-slide-up {
            animation: slide-up 1s ease-out forwards;
        }

        .animate-fade-in {
            animation: fade-in 1s ease-out forwards;
        }

        .delay-300 {
            animation-delay: 300ms;
        }

        .delay-500 {
            animation-delay: 500ms;
        }

        .cta-btn-primary {
            @apply px-8 py-4 bg-violet-600 hover:bg-violet-700 text-white rounded-lg font-medium text-lg shadow-lg transition-all duration-300 transform hover:scale-105;
        }

        .slick-slide.slick-active .slide-content [class*="animate-"] {
            animation-play-state: running !important;
        }