/* ==========================================================
   🔥 THE ULTIMATE "EVIL / CYBERPUNK" CSS 
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Dark Theme */
    --bg-main: #050505;          
    --bg-alternate: #0a0a0a;     
    --surface-color: rgba(15, 23, 42, 0.7); 
    --text-main: #ffffff;        
    --text-muted: #94a3b8;       
    --primary-color: #00ffcc;    
    --primary-hover: #00ccaa;
    --accent-red: #ff003c;       
    --accent-purple: #8b5cf6;
    --border-color: rgba(0, 255, 204, 0.2); 
    --nav-bg: rgba(5, 5, 5, 0.8);
    --glow-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
    --red-glow: 0 0 20px rgba(255, 0, 60, 0.5);
}

/* Light Theme */
.light-theme {
    --bg-main: #f8fafc;
    --bg-alternate: #ffffff;
    --surface-color: #ffffff;
    --text-main: #0f172a;
    --text-muted: #475569;
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --accent-red: #ef4444;
    --border-color: #e2e8f0;
    --nav-bg: rgba(255, 255, 255, 0.95);
    --glow-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
    --red-glow: 0 10px 30px rgba(239, 68, 68, 0.15);
}

/* GLOBAL RESET & STRICT OVERFLOW LOCK */
* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    font-family: 'Space Grotesk', sans-serif; 
    text-decoration: none; list-style: none; scroll-behavior: smooth; 
}

html, body { 
    background: var(--bg-main); 
    color: var(--text-main); 
    overflow-x: hidden !important; 
    width: 100%; max-width: 100vw;
    transition: background-color 0.3s, color 0.3s; 
}
.bg-alternate { background: var(--bg-alternate) !important; }

/* 🌟 BACKGROUND GLOW EFFECTS */
.evil-glow { position: absolute; border-radius: 50%; filter: blur(100px); z-index: -1; pointer-events: none; }
.orb-1 { width: 400px; height: 400px; background: rgba(0, 255, 204, 0.15); top: -100px; left: -100px; }
.orb-2 { width: 500px; height: 500px; background: rgba(255, 0, 60, 0.1); top: 40%; right: -200px; }

/* 🌟 NEON TEXT UTILITY */
.neon-text { color: var(--primary-color); text-shadow: 0 0 10px rgba(0, 255, 204, 0.5); }


/* ==========================================================
   1. HEADER & NAVBAR (DESKTOP)
========================================================== */
.header {
    position: fixed; top: 0; left: 0; width: 100%; padding: 15px 8%; background: var(--nav-bg); 
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    display: flex; justify-content: space-between; align-items: center; z-index: 1000; 
    border-bottom: 1px solid var(--border-color); flex-wrap: nowrap; 
}
.logo { font-size: 26px; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.logo i { color: var(--primary-color); font-size: 32px; text-shadow: var(--glow-shadow); }

.navbar .nav-links { display: flex; gap: 25px; align-items: center; }
.navbar a { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text-muted); transition: 0.3s; }
.navbar a:hover, .navbar a.active { color: var(--primary-color); text-shadow: 0 0 8px rgba(0, 255, 204, 0.6); }

.btn-resume { background: linear-gradient(45deg, #ff003c, #8b5cf6); color: white !important; padding: 8px 18px; border-radius: 6px; font-weight: bold; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: var(--red-glow); }
.btn-resume:hover { transform: scale(1.05); }

.auth-container { display: flex; gap: 15px; align-items: center; }
.btn-login { color: var(--text-main); font-weight: 600; font-size: 15px; }
.btn-login:hover { color: var(--primary-color); }
.evil-btn {
    background: transparent; color: var(--primary-color); padding: 10px 25px; border-radius: 4px; 
    font-weight: 700; border: 1px solid var(--primary-color); transition: 0.3s;
    box-shadow: inset 0 0 10px rgba(0, 255, 204, 0.2), 0 0 15px rgba(0, 255, 204, 0.2);
    text-transform: uppercase; letter-spacing: 1px; display: inline-block;
}
.evil-btn:hover { background: var(--primary-color); color: #000; box-shadow: 0 0 25px var(--primary-color); transform: translateY(-2px); }

/* ☰ Hamburger Icon Default Hide */
#menu-icon { font-size: 32px; color: var(--text-main); cursor: pointer; display: none; z-index: 10002; transition: 0.3s; }
.mobile-login { display: none; }

/* ==========================================================
   2. HERO SECTION
========================================================== */
.hero { min-height: 100vh; padding: 150px 8% 80px; display: flex; align-items: center; justify-content: space-between; gap: 50px; position: relative; }
.hero-text-content { flex: 1.2; z-index: 2; }
.hero-image-content { flex: 1; text-align: right; z-index: 2; }
.cyber-img { width: 100%; max-width: 550px; border-radius: 20px; border: 2px solid var(--border-color); box-shadow: var(--glow-shadow); animation: float 4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.evil-badge { display: inline-block; padding: 8px 18px; background: rgba(255, 0, 60, 0.1); color: var(--accent-red); border-radius: 4px; font-weight: 700; font-size: 13px; margin-bottom: 25px; border: 1px solid rgba(255, 0, 60, 0.3); text-transform: uppercase; letter-spacing: 2px; }
.hero h1 { font-size: 58px; line-height: 1.1; margin-bottom: 20px; color: var(--text-main); font-weight: 800;}
.multiple-text { display: inline-block; white-space: pre-wrap !important; }
.hero p { color: var(--text-muted); font-size: 17px; line-height: 1.7; margin-bottom: 40px; max-width: 550px; }

.hero-buttons { display: flex; gap: 20px; margin-bottom: 50px; }
.outline-btn { background: transparent; color: var(--text-main); border: 1px solid var(--text-muted); padding: 10px 25px; border-radius: 4px; font-weight: 600; text-transform: uppercase; transition: 0.3s;}
.outline-btn:hover { border-color: var(--primary-color); color: var(--primary-color); box-shadow: inset 0 0 10px rgba(0, 255, 204, 0.2); }

.glass-box { background: var(--surface-color); backdrop-filter: blur(10px); border: 1px solid var(--border-color); padding: 20px; border-radius: 12px; }
.hero-stats { display: flex; gap: 40px; max-width: 500px;}
.stat-item h3 { font-size: 32px; font-weight: 800;}
.stat-item p { font-size: 13px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}

/* ==========================================================
   3. GLASSMORPHISM CARDS (COURSES)
========================================================== */
.learning-path, .live-exams { padding: 100px 8%; position: relative;}
.section-heading { text-align: center; margin-bottom: 60px; }
.section-heading h2 { font-size: 42px; color: var(--text-main); margin-bottom: 15px; font-weight: 800;}
.section-heading p { color: var(--text-muted); font-size: 16px; }
.loading-text { text-align: center; width: 100%; grid-column: 1 / -1; color: var(--primary-color); font-size: 18px; text-transform: uppercase; letter-spacing: 2px;}

.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 35px; }
.glass-card { background: var(--surface-color); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: 0.4s; display: flex; flex-direction: column; }
.glass-card:hover { transform: translateY(-10px); box-shadow: var(--glow-shadow); border-color: var(--primary-color); }
.img-wrapper { overflow: hidden; height: 220px; border-bottom: 1px solid var(--border-color); }
.img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; filter: grayscale(30%) contrast(120%); }
.glass-card:hover .img-wrapper img { transform: scale(1.1); filter: grayscale(0%); }

.card-content { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.tags { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.tag-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; border: 1px solid;}
.web-badge { background: rgba(0, 255, 204, 0.1); color: #00ffcc; border-color: #00ffcc; }
.ai-badge { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border-color: #8b5cf6; }
.app-badge { background: rgba(255, 0, 60, 0.1); color: #ff003c; border-color: #ff003c; }
.rating { color: #f59e0b; font-size: 14px; font-weight: 700; }

.card-content h3 { font-size: 22px; margin-bottom: 12px; color: var(--text-main); font-weight: 700;}
.card-content p { color: var(--text-muted); font-size: 14px; margin-bottom: 25px; line-height: 1.6; flex-grow: 1;}
.btn-card { display: block; text-align: center; background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); padding: 12px; border-radius: 4px; font-weight: 700; text-transform: uppercase; transition: 0.3s; margin-top: auto;}
.btn-card:hover { background: var(--primary-color); color: #000; box-shadow: var(--glow-shadow); }

.exam-card { border-top: 3px solid var(--accent-red); }
.exam-title { color: var(--accent-red) !important; text-shadow: 0 0 10px rgba(255,0,60,0.4); }
.exam-btn { color: var(--accent-red); border-color: var(--accent-red); }
.exam-btn:hover { background: var(--accent-red); color: white; box-shadow: var(--red-glow); }

/* ==========================================================
   4. FEATURES & INSTRUCTOR
========================================================== */
.features { padding: 100px 8%; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);}
.features-content { display: flex; align-items: center; gap: 60px; }
.features-text { flex: 1; }
.features-text h2 { font-size: 42px; margin-bottom: 15px; font-weight: 800;}
.features-list li { display: flex; gap: 20px; margin-bottom: 30px; }
.neon-icon { font-size: 32px; color: var(--accent-red); margin-top: 3px; text-shadow: var(--red-glow); }
.features-list h4 { font-size: 20px; color: var(--text-main); margin-bottom: 5px; }

.instructor { padding: 100px 8%; }
.instructor-container { display: flex; align-items: center; gap: 60px; padding: 50px; border-radius: 12px; }
.instructor-image img { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-color); box-shadow: var(--glow-shadow); filter: contrast(120%);}
.instructor-info h2 { font-size: 40px; margin: 15px 0 5px; font-weight: 800;}
.social-links { display: flex; gap: 15px; margin-top: 25px; }
.social-links a { width: 45px; height: 45px; background: var(--bg-main); display: flex; justify-content: center; align-items: center; border-radius: 50%; color: var(--primary-color); font-size: 22px; border: 1px solid var(--primary-color); transition: 0.3s;}
.social-links a:hover { background: var(--primary-color); color: #000; box-shadow: var(--glow-shadow); transform: translateY(-5px);}

/* ==========================================================
   5. CTA & FOOTER
========================================================== */
.cta-section { background: linear-gradient(45deg, var(--bg-main), var(--bg-alternate)); padding: 100px 8%; text-align: center; border-top: 1px solid var(--border-color);}
.cta-box { max-width: 800px; margin: 0 auto; border-color: var(--primary-color); padding: 50px; box-shadow: var(--glow-shadow);}
.cta-box h2 { font-size: 46px; color: var(--text-main); margin-bottom: 20px; font-weight: 800; text-transform: uppercase;}

.footer { background: #020202; padding: 80px 8% 30px; border-top: 1px solid var(--border-color);}
.footer-container { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; margin-bottom: 60px; }
.brand-col .logo { color: var(--text-main); margin-bottom: 20px; display: inline-flex;}
.links-col h4, .newsletter-col h4 { font-size: 18px; margin-bottom: 25px; color: var(--primary-color); text-transform: uppercase; letter-spacing: 1px;}
.links-col ul li { margin-bottom: 15px; }
.links-col ul li a { color: var(--text-muted); font-size: 14px; transition: 0.3s; }
.links-col ul li a:hover { color: var(--primary-color); padding-left: 5px; }
.newsletter-form { display: flex; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden;}
.newsletter-form input { flex: 1; padding: 12px 15px; background: transparent; border: none; color: var(--text-main); outline: none; }
.btn-newsletter { padding: 12px 20px; background: var(--primary-color); color: #000; border: none; cursor: pointer; font-size: 18px; transition: 0.3s;}
.footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid var(--border-color); font-size: 14px; color: var(--text-muted); }

/* ==========================================================
   🌟 LIGHT MODE PERFECTION FIXES (PREMIUM DARK HEADER & FOOTER)
========================================================== */
.light-theme .evil-glow { display: none !important; } 
.light-theme .neon-text { text-shadow: none !important; }
.light-theme .exam-title, .light-theme .neon-icon { text-shadow: none !important; }
.light-theme .evil-btn:hover { color: #ffffff !important; } 
.light-theme .cta-section { background: var(--bg-main); }
.light-theme .newsletter-form input::placeholder { color: var(--text-muted); }

/* 🔥 LIGHT MODE ME BHI HEADER DARK RAHEGA */
.light-theme .header {
    background: rgba(5, 5, 5, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.light-theme .header .logo, 
.light-theme .header .nav-links a, 
.light-theme #menu-icon,
.light-theme .btn-login { /* 🌟 NAYA: Desktop Login button fix */
    color: #ffffff !important; /* Text White Rahega */
}
.light-theme .header .nav-links a:hover {
    color: var(--primary-color) !important;
}

/* 🔥 LIGHT MODE ME MOBILE MENU BHI DARK RAHEGA */
.light-theme .navbar {
    background: rgba(5, 5, 5, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.light-theme .navbar a {
    color: #ffffff !important;
}

/* 🔥 LIGHT MODE ME FOOTER BHI DARK RAHEGA */
.light-theme .footer {
    background: #050505 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.light-theme .footer-container h4, 
.light-theme .brand-col .logo {
    color: #ffffff !important;
}
.light-theme .footer p, 
.light-theme .links-col ul li a, 
.light-theme .footer-bottom {
    color: #94a3b8 !important;
}

/* ==========================================================
   🌟 FLOATING BUTTONS (HOME & DARK MODE) 🌟
========================================================== */
.back-to-home-btn, .dark-mode-btn {
    position: fixed; bottom: 30px; width: 55px; height: 55px; 
    border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    font-size: 26px; z-index: 9999; cursor: pointer; transition: 0.3s;
}
.back-to-home-btn { right: 30px; background: var(--accent-red); color: white; border: 1px solid var(--accent-red); box-shadow: var(--red-glow); }
.dark-mode-btn { left: 30px; background: var(--primary-color); color: #000; border: none; box-shadow: var(--glow-shadow); }
.back-to-home-btn:hover, .dark-mode-btn:hover { transform: scale(1.1) translateY(-5px); }

/* ==========================================================
   📱 100% FIXED MOBILE RESPONSIVE & THREAD DROPDOWN
========================================================== */
@media (max-width: 850px) {
    /* Hide glowing orbs on mobile to stop horizontal scroll */
    .evil-glow { display: none !important; }

    /* 1. Header & Alignments */
    .header { padding: 10px 5% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; height: 70px; }
    .logo { font-size: 20px !important; }
    
    .auth-container { display: flex !important; align-items: center; margin-left: auto; margin-right: 12px; }
    .auth-container .btn-login { display: none !important; } /* Hidden inside menu */
    .btn-signup { padding: 6px 12px !important; font-size: 12px !important; white-space: nowrap; }

    #menu-icon { display: block !important; font-size: 28px !important; z-index: 10002; }

    /* 2. Thread-Style Dropdown Menu */
   /* 2. Pro Dropdown (100% Supported Fade & Slide) */
    .navbar {
        position: absolute; top: 100%; right: 5%;
        width: auto; min-width: 190px; height: auto;
        background: var(--nav-bg); 
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-color); border-radius: 12px;
        padding: 15px; 
        display: flex !important; 
        flex-direction: column;
        
        /* 🔥 THE FIX: यूनिवर्सल एनिमेशन (जो हर फोन में चलेगा) */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
        z-index: 10001;
    }
    
    .navbar.active { 
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    }
    
    .light-theme .navbar.active { 
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    }

    .navbar .nav-links { flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; width: 100%; }
    .mobile-login { display: block !important; width: 100%; }
    
    .navbar a {
        font-size: 15px !important; font-weight: 600; width: 100%; padding: 10px;
        color: var(--text-main) !important; border-bottom: 1px solid rgba(128, 128, 128, 0.2);
        display: flex !important; align-items: center; gap: 10px;
    }

    /* 3. Strict Horizontal Scroll Locks */
   /* 3. Strict Horizontal Scroll Locks (Header Fix) */
    section, .footer { 
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; 
    }
    
    .header { 
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; 
        overflow: visible !important; /* 🔥 यही मेनू को कटने से बचाएगा! */
    }
    h1, h2, h3, p, span, a { word-wrap: break-word !important; white-space: normal !important; }
    
    .hero { flex-direction: column !important; padding-top: 100px !important; text-align: center !important; gap: 30px; }
    .hero h1 { font-size: 38px !important; }
    .hero-image-content { display: none !important; }
    .hero-stats { display: flex !important; flex-direction: column !important; gap: 15px !important; padding: 20px !important; width: 100%; }
    .stat-item { width: 100%; }
    
    .learning-path, .live-exams, .features, .instructor { padding: 60px 15px !important; width: 100%; }
    .course-grid { display: flex !important; flex-direction: column !important; width: 100% !important; }
    .course-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
    
    .features-content { flex-direction: column !important; text-align: left; }
    .features-image { display: none !important; }
    
    .instructor-container { flex-direction: column !important; padding: 30px 15px !important; }
    .instructor-image img { width: 180px !important; height: 180px !important; }
    
    .footer-container { display: flex !important; flex-direction: column !important; text-align: center; gap: 30px; }
}

@media (max-width: 480px) {
    .navbar { width: 65%; right: 5%; }
    .hero h1 { font-size: 28px !important; }
    .hero-buttons { flex-direction: column; width: 100%; gap: 15px; }
    .hero-buttons a { width: 100%; justify-content: center; }
    .back-to-home-btn, .dark-mode-btn { width: 45px; height: 45px; font-size: 20px; bottom: 20px; }
    .dark-mode-btn { left: 15px; }
    .back-to-home-btn { right: 15px; }
}