@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
      @import "tailwindcss";  
        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #b63303 0%, #4A42E8 100%);
        }
        
        .hero-clip-path {
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        }
        
        .feature-card {
            @apply hover:transform hover:-translate-y-2.5 transition duration-300;
        }
        
        .feature-card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
        }
        
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #FF6584;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover:after {
            width: 100%;
        }
        
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
        }
        
        .mobile-menu.open {
            max-height: 500px;
        }

        /* Dark mode specific styles */
        .dark .bg-white {
            @apply bg-gray-800;
        }

        .dark .bg-gray-50 {
            @apply bg-gray-800;
        }

        .dark .text-gray-600 {
            @apply text-gray-300;
        }

        .dark .text-gray-700 {
            @apply text-gray-200;
        }

        .dark .text-gray-900 {
            @apply text-white;
        }

        .dark .bg-gray-100 {
            @apply bg-gray-700;
        }

        .dark .border-gray-300 {
            @apply border-gray-600;
        }

        .dark .shadow-md {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
        }

        .dark .shadow-lg {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.12);
        }