/* Custom Color Scheme - Deep Blues, Greens, Gold Accents */
     :root {
    --primary-dark-blue: #1e3a8a;
    --primary-blue: #3b82f6;
    --primary-light-blue: #60a5fa;
    --primary-green: #059669;
    --primary-light-green: #10b981;
    --accent-gold: #f59e0b;
    --accent-light-gold: #fbbf24;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --background-light: #f8fafc;
    --secondary-gold: #d4af37; /* ADD THIS LINE */
}

        html {
            scroll-behavior: smooth;
             overflow-y: scroll;
        }

   body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
        }

        /* Gradient Backgrounds */
        .gradient-hero {
            background: linear-gradient(135deg, var(--primary-dark-blue) 0%, var(--primary-blue) 50%, var(--primary-green) 100%);
            position: relative;
        }

        .gradient-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity=".1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="300" r="100" fill="url(%23a)"/><circle cx="700" cy="200" r="80" fill="url(%23a)"/><circle cx="600" cy="600" r="120" fill="url(%23a)"/></svg>');
            animation: float 20s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }

                .logo-img {
            height: 36px;
            width: auto;
            display: block;
            object-fit: contain;
        }
        /* Modern Card Design */
        .modern-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            
        }

        .modern-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-green));
        }

        .modern-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        /* Icon Styling */
        .icon-gradient {
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Button Styles */
        .btn-primary-custom {
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
            border: none;
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: all 0.5s ease;
        }

        .btn-primary-custom:hover::before {
            left: 100%;
        }

        .btn-gold-custom {
            background: linear-gradient(135deg, var(--accent-gold), var(--accent-light-gold));
            border: none;
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
        }

        /* Counter Animation */
        .counter {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            font-size: 3rem;
            background: linear-gradient(135deg, var(--accent-gold), var(--accent-light-gold));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Testimonial Carousel */
        .testimonial-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,252,0.9));
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            margin: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* Parallax Effect */
        .parallax-section {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* Navigation */
        .navbar-custom {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .navbar-custom.scrolled {
            background: rgba(255, 255, 255, 0.98) !important;
            box-shadow: 0 2px 30px rgba(0,0,0,0.15);
        }

        /* Accordion Custom */
        .accordion-custom .accordion-item {
            border: none;
            margin-bottom: 15px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .accordion-custom .accordion-header button {
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
            color: white;
            font-weight: 600;
            padding: 20px;
        }

       
        /* Success Stats */
        .stats-section {
            background: linear-gradient(135deg, var(--primary-dark-blue) 0%, var(--primary-blue) 100%);
            position: relative;
        }

        /* Course Cards */
        .course-card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .course-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        /* Dark Mode Toggle */
        .dark-mode-toggle {
            background: var(--primary-dark-blue);
            border: none;
            color: white;
            width: 50px;
            height: 30px;
            border-radius: 15px;
            position: relative;
            transition: all 0.3s ease;
        }

        
  


      @keyframes pulse {
            0% { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3); }
            50% { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5); }
            100% { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3); }
        }

        /* Loading Animation */
        .loading-dots {
            display: inline-block;
        }

        .loading-dots::after {
            content: '.';
            animation: dots 2s steps(5, end) infinite;
        }

        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60% { content: '...'; }
            80%, 100% { content: ''; }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        /* Media Queries */
        @media (max-width: 768px) {
            .counter { font-size: 2rem; }
            .hero-title { font-size: 2.5rem !important; }
            .fab, .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; }
        }
    
                .perspective-container {
            perspective: 1000px;
            transform-style: preserve-3d;
            overflow: hidden;
        }
        
        .floating-element {
            position: absolute;
            transform-style: preserve-3d;
            animation: float 15s infinite ease-in-out;
            backdrop-filter: blur(5px);
            opacity: 0.7;
        }
        
        /* Shapes */
        .cube {
            width: 100px;
            height: 100px;
            top: 15%;
            left: 10%;
            background: rgba(226, 18, 18, 0.1);
            border: 1px solid rgba(94, 6, 6, 0.2);
            animation-delay: -2s;
        }
        
        .sphere {
            width: 150px;
            height: 150px;
            top: 60%;
            right: 15%;
            border-radius: 50%;
            background: rgba(245,158,11,0.1);
            border: 1px solid rgba(245,158,11,0.2);
            animation-delay: -4s;
        }
        
        .pyramid {
            width: 120px;
            height: 120px;
            bottom: 20%;
            left: 20%;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            background: rgba(156, 43, 145, 0.1);
            border: 1px solid rgba(156, 216, 37, 0.2);
            animation-delay: -6s;
        }
        
        .ring {
            width: 160px;
            height: 160px;
            top: 30%;
            right: 25%;
            border-radius: 50%;
            border: 20px solid rgba(255,255,255,0.1);
            animation-delay: -8s;
        }
        
        /* 3D Float Animation */
        @keyframes float {
            0%, 100% {
                transform: translateZ(0) rotateX(0) rotateY(0);
            }
            25% {
                transform: translateZ(100px) rotateX(45deg) rotateY(45deg);
            }
            50% {
                transform: translateZ(50px) rotateX(-45deg) rotateY(90deg);
            }
            75% {
                transform: translateZ(150px) rotateX(90deg) rotateY(45deg);
            }
        }
        
        /* Particle Effect */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, 
                rgba(48, 2, 2, 0.1) 0%,
                rgba(255,255,255,0) 70%);
            animation: particleMove 20s infinite linear;
        }
        
        @keyframes particleMove {
            0% {
                transform: translateZ(0) scale(1);
            }
            50% {
                transform: translateZ(50px) scale(1.2);
            }
            100% {
                transform: translateZ(0) scale(1);
            }
        }
        
        /* Add smooth transitions */
        .floating-element {
            transition: transform 0.3s ease-out;
        }
        
        /* Optional: Add hover effects */
        .floating-element:hover {
            transform: scale(1.1) translateZ(50px);
        }
                .gradient-hero {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
            position: relative;
        }
        
        .animated-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }
        
        .bubble-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        .bubble {
            position: absolute;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            animation: floatBubble 15s infinite ease-in-out;
            animation-delay: var(--delay);
            left: var(--x);
            top: var(--y);
            transition: all 0.3s ease;
            box-shadow: 
                inset 0 0 20px rgba(209, 66, 66, 0.2),
                0 0 30px rgba(213, 201, 223, 0.4);
        }
        
        .bubble::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.1),
                rgba(255, 255, 255, 0.05)
            );
            z-index: -1;
        }
        
        .bubble:nth-child(2n) {
            background: rgba(138, 43, 226, 0.1);
            box-shadow: 
                inset 0 0 20px rgba(138, 43, 226, 0.2),
                0 0 30px rgba(202, 184, 218, 0.4);
        }
        
        .bubble:nth-child(3n) {
            background: rgba(64, 224, 208, 0.1);
            box-shadow: 
                inset 0 0 20px rgba(64, 224, 208, 0.2),
                0 0 30px rgba(64, 224, 208, 0.4);
        }
        
        @keyframes floatBubble {
            0%, 100% {
                transform: translate(0, 0) scale(1) rotate(0deg);
            }
            25% {
                transform: translate(20px, -20px) scale(1.1) rotate(5deg);
            }
            50% {
                transform: translate(-10px, 20px) scale(0.9) rotate(-5deg);
            }
            75% {
                transform: translate(-20px, -10px) scale(1.05) rotate(3deg);
            }
        }
        
        /* Connecting lines effect on hover */
        .bubble:hover {
            transform: scale(1.1);
        }
        
        .bubble:hover::after {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: radial-gradient(
                circle at center,
                transparent 0%,
                rgba(138, 43, 226, 0.1) 50%,
                transparent 100%
            );
            animation: pulseGlow 2s infinite;
        }
        
        @keyframes pulseGlow {
            0%, 100% {
                transform: scale(1);
                opacity: 0.5;
            }
            50% {
                transform: scale(1.2);
                opacity: 0.8;
            }
        }
        
        /* Ensure content appears above the background */
        .container {
            position: relative;
            z-index: 2;
        }

                /* Adjust for fixed navbar */
        body {
            padding-top: 20px; /* Adjust this value to match your navbar height */
        }