:root {
     --primary: #38bdf8;
     --secondary: #6366f1;
     --dark-bg: #0f172a;
     --deeper-bg: #020617;
     --text-gray: #94a3b8;
     --glass: rgba(30, 41, 59, 0.7);
 }

 body {
     font-family: 'Poppins', sans-serif;
     background: var(--dark-bg);
     color: #f1f5f9;
     overflow-x: hidden;
     scroll-behavior: smooth;
 }

 /* Loader */
 #loader {
     position: fixed;
     inset: 0;
     background: var(--deeper-bg);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
 }

 .spinner {
     width: 50px;
     height: 50px;
     border: 3px solid rgba(56, 189, 248, 0.1);
     border-top: 3px solid var(--primary);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* Navbar */
 .navbar {
     transition: 0.4s;
     padding: 20px 0;
     background: transparent;
 }

 .navbar.scrolled {
     background: rgba(2, 6, 23, 0.95);
     padding: 12px 0;
     backdrop-filter: blur(15px);
     border-bottom: 1px solid rgba(56, 189, 248, 0.2);
 }

 .nav-link {
     color: #cbd5e1 !important;
     font-weight: 500;
 }

 /* Hero */
 .hero {
     height: 100vh;
     display: flex;
     align-items: center;
     background: linear-gradient(rgba(2, 6, 23, 0.85), rgba(2, 6, 23, 0.85)), url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1920');
     background-size: cover;
     background-position: center;
 }

 .hero h1 {
     font-size: clamp(2.5rem, 6vw, 4rem);
     background: linear-gradient(to right, #fff, var(--primary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* Course Mega Grid */
 .course-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 20px;
 }

 .course-card {
     background: var(--glass);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     padding: 25px;
     transition: 0.3s;
     position: relative;
 }

 .course-card:hover {
     transform: translateY(-8px);
     border-color: var(--primary);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
 }

 .badge-type {
     font-size: 10px;
     padding: 4px 10px;
     border-radius: 50px;
     text-transform: uppercase;
     margin-bottom: 15px;
     display: inline-block;
     font-weight: 700;
 }

 .bg-tech {
     background: rgba(56, 189, 248, 0.1);
     color: var(--primary);
     border: 1px solid var(--primary);
 }

 .bg-lang {
     background: rgba(16, 185, 129, 0.1);
     color: #10b981;
     border: 1px solid #10b981;
 }

 .course-tags span {
     background: #0f172a;
     font-size: 11px;
     padding: 2px 8px;
     border-radius: 5px;
     margin-right: 5px;
     color: var(--text-gray);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Contact Box */
 .contact-box {
     background: #050a18;
     border-radius: 30px;
     padding: 40px;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .form-control {
     background: #0f172a;
     border: 1px solid #1e293b;
     color: #fff;
     border-radius: 12px;
     height: 55px;
 }

 .form-control:focus {
     background: #0f172a;
     color: #fff;
     border-color: var(--primary);
     box-shadow: none;
 }

 .btn-submit {
     background: linear-gradient(90deg, #38bdf8, #6366f1);
     border: none;
     color: #fff;
     font-weight: 700;
     border-radius: 12px;
     height: 55px;
     width: 100%;
     transition: 0.3s;
     cursor: pointer;
 }

 .btn-submit:hover {
     opacity: 0.9;
     transform: scale(1.02);
 }

 footer {
     background: #010409;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }