.cyber-bg { 
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #e94560 100%); 
            position: relative;
            overflow: hidden;
        }
        .cyber-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(15, 52, 96, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(26, 26, 46, 0.1) 0%, transparent 50%);
        }
        
        .neon-card { 
            background: rgba(10, 10, 10, 0.8);
            border: 1px solid rgba(233, 69, 96, 0.3);
            box-shadow: 0 0 20px rgba(233, 69, 96, 0.1);
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
        }
        .neon-card:hover { 
            border-color: rgba(233, 69, 96, 0.6);
            box-shadow: 0 0 30px rgba(233, 69, 96, 0.2);
            transform: translateY(-5px);
        }
        
        .cyber-button {
            background: linear-gradient(45deg, #e94560, #f27121);
            border: none;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .cyber-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(233, 69, 96, 0.4);
        }
        .cyber-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        .cyber-button:hover::before {
            left: 100%;
        }
        
        .typing-text {
            border-right: 3px solid #e94560;
            animation: blink 1s infinite, neon-glow 2s ease-in-out infinite alternate;
        }
        @keyframes blink { 0%, 50% { border-color: transparent; } 51%, 100% { border-color: #e94560; } }
        @keyframes neon-glow { 
            from { text-shadow: 0 0 5px #e94560, 0 0 10px #e94560; } 
            to { text-shadow: 0 0 10px #e94560, 0 0 20px #e94560, 0 0 30px #e94560; } 
        }
        
        .slide-in { animation: slideIn 0.8s ease-out; }
        @keyframes slideIn { 
            from { opacity: 0; transform: translateX(-50px); } 
            to { opacity: 1; transform: translateX(0); } 
        }
        
        .pulse-ring {
            animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
        }
        @keyframes pulse-ring {
            0% { transform: scale(0.8); opacity: 1; }
            80%, 100% { transform: scale(1.2); opacity: 0; }
        }
        
        .cyber-grid {
            background-image: 
                linear-gradient(rgba(233, 69, 96, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(233, 69, 96, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        .testimonial-card {
            background: linear-gradient(135deg, rgba(233, 69, 96, 0.1), rgba(15, 52, 96, 0.1));
            border: 1px solid rgba(233, 69, 96, 0.2);
            backdrop-filter: blur(15px);
        }
        
        .contact-form {
            background: rgba(10, 10, 10, 0.9);
            border: 1px solid rgba(233, 69, 96, 0.3);
            backdrop-filter: blur(20px);
        }
        
        .contact-input {
            background: rgba(26, 26, 46, 0.5);
            border: 1px solid rgba(233, 69, 96, 0.3);
            color: white;
            transition: all 0.3s ease;
        }
        .contact-input:focus {
            border-color: #e94560;
            box-shadow: 0 0 15px rgba(233, 69, 96, 0.3);
            outline: none;
        }
        
        .mobile-menu-slide { 
            transform: translateX(-100%); 
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
        }
        .mobile-menu-slide.active { transform: translateX(0); }
        
        @media (max-width: 768px) {
            .hero-title { font-size: 2.5rem !important; }
            .hero-subtitle { font-size: 1.1rem !important; }
        }
        
        @media (max-width: 640px) {
            .hero-title { font-size: 2rem !important; }
            .hero-subtitle { font-size: 1rem !important; }
        }
        .loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.spinner {
    border: 6px solid #444;
    border-top: 6px solid #f87171;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Ensure mobile menu is scrollable without changing layout */
#mobileMenu {
    overflow-y: auto;               /* allow scrolling on the fixed menu */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

/* Make the immediate content inside mobileMenu able to grow and scroll */
#mobileMenu > * {
    max-height: 80vh;              /* never exceed viewport height */
    overflow-y: auto;               /* scroll inner content when needed */
}

/* Safety: if inner element used h-full, let it shrink to content */
#mobileMenu .h-full {
    min-height: auto !important;
    height: auto !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
}

/* Contact page: improve mobile responsiveness without changing layout */
@media (max-width: 768px) {
    /* Ensure cards and form always use available width and box-sizing */
    .contact-form,
    .neon-card,
    .contact-form .contact-input,
    .contact-form textarea,
    .contact-form select,
    .contact-form button {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Collapse any two-column utility grids into a single column on small screens */
    .grid.md\:grid-cols-2,
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Reduce card padding for narrow viewports */
    .contact-form,
    .neon-card {
        padding: 1rem !important;
    }

    /* Make social buttons stack nicely and wrap */
    .neon-card .grid.grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Make long text wrap and avoid overflow */
    .neon-card, .contact-form {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Ensure the main container has safe horizontal padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Small screens - tighten spacing for very narrow devices */
@media (max-width: 420px) {
    .contact-form,
    .neon-card {
        padding: 0.75rem !important;
    }
    .hero-title { font-size: 1.8rem !important; }
}
/* ...existing code... */

/* Improve course cards and video/playlist responsiveness */
@media (max-width: 1024px) {
    /* Ensure cards shrink nicely on tablets/phones */
    .neon-card {
        min-height: 0;
    }
    .neon-card .flex-grow {
        flex-grow: 1;
    }

    /* My Courses: force single column on narrow screens if Tailwind classes fail */
    .grid.grid-cols-1,
    .grid.md\:grid-cols-2,
    .grid.grid-cols-2 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    /* Video player: constrain height and keep aspect ratio */
    #main-video-player {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        object-fit: contain;
    }

    /* Playlist: on smaller screens show full list below the player */
    #playlist {
        max-height: 35vh !important;
        overflow-y: auto !important;
    }

    /* Increase playlist item touch target */
    .playlist-item {
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }
}

/* Small phones: stack playlist under player and disable playlist scrolling limits */
@media (max-width: 640px) {
    .grid.grid-cols-1.lg\:grid-cols-3,
    .grid.grid-cols-1.lg\:grid-cols-3 > * {
        grid-template-columns: 1fr !important;
    }

    /* Place playlist below and allow full height scrolling of page */
    .lg\:col-span-2 { grid-column: auto !important; }

    #main-video-player {
        max-height: 40vh !important;
    }

    #playlist {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Make course cards use full width and consistent spacing */
    .neon-card.rounded-2xl.p-6 {
        padding: 1rem !important;
    }
}

/* Ensure mobile menu and navbar stay above content and don't hide action links */
nav, header {
    z-index: 60; /* keep navbar above page cards */
}

/* Small accessibility/touch improvements */
.playlist-item,
.cyber-button,
.cyber-button-small {
    -webkit-tap-highlight-color: rgba(233,69,96,0.15);
    touch-action: manipulation;
}

/* Improve course cards and video/playlist responsiveness */
@media (max-width: 1024px) {
    /* Ensure cards shrink nicely on tablets/phones */
    .neon-card {
        min-height: 0;
    }
    .neon-card .flex-grow {
        flex-grow: 1;
    }

    /* My Courses: force single column on narrow screens if Tailwind classes fail */
    .grid.grid-cols-1,
    .grid.md\:grid-cols-2,
    .grid.grid-cols-2 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    /* Video player: constrain height and keep aspect ratio */
    #main-video-player {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        object-fit: contain;
    }

    /* Playlist: on smaller screens show full list below the player */
    #playlist {
        max-height: 35vh !important;
        overflow-y: auto !important;
    }

    /* Increase playlist item touch target */
    .playlist-item {
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }
}

/* Small phones: stack playlist under player and disable playlist scrolling limits */
@media (max-width: 640px) {
    .grid.grid-cols-1.lg\:grid-cols-3,
    .grid.grid-cols-1.lg\:grid-cols-3 > * {
        grid-template-columns: 1fr !important;
    }

    /* Place playlist below and allow full height scrolling of page */
    .lg\:col-span-2 { grid-column: auto !important; }

    #main-video-player {
        max-height: 40vh !important;
    }

    #playlist {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Make course cards use full width and consistent spacing */
    .neon-card.rounded-2xl.p-6 {
        padding: 1rem !important;
    }
}

/* Ensure mobile menu and navbar stay above content and don't hide action links */
nav, header {
    z-index: 60; /* keep navbar above page cards */
}

/* Small accessibility/touch improvements */
.playlist-item,
.cyber-button,
.cyber-button-small {
    -webkit-tap-highlight-color: rgba(233,69,96,0.15);
    touch-action: manipulation;
}