/* ===========================================
   Sigma Home Tutorials v2
   Premium UI System
=========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Reset */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:#050816;

color:#fff;

overflow-x:hidden;

line-height:1.7;

}

/* Theme Variables */

:root{

--primary:#6C3BFF;

--secondary:#4F46E5;

--accent:#00E5FF;

--bg:#050816;

--bg2:#0B1120;

--bg3:#111827;

--white:#ffffff;

--text:#D1D5DB;

--muted:#94A3B8;

--border:rgba(255,255,255,.08);

--glass:rgba(255,255,255,.05);

--shadow:0 20px 60px rgba(0,0,0,.35);

--radius:22px;

--transition:.35s ease;

}

/* Selection */

::selection{

background:var(--primary);

color:#fff;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#050816;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(180deg,#6C3BFF,#00E5FF);

border-radius:30px;

}

/* Container */

.container{

width:90%;

max-width:1320px;

margin:auto;

}

/* Links */

a{

text-decoration:none;

color:inherit;

transition:.3s;

}

/* Images */

img{

max-width:100%;

display:block;

}

/* Buttons */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:999px;

background:linear-gradient(90deg,#6C3BFF,#00E5FF);

font-weight:600;

color:#fff;

transition:.35s;

border:none;

cursor:pointer;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 20px 40px rgba(108,59,255,.35);

}

/* Glass Card */

.glass{

background:rgba(255,255,255,.05);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

box-shadow:var(--shadow);

}

/* Section */

section{

position:relative;

padding:120px 0;

}

/* Heading */

.section-title{

font-family:'Poppins',sans-serif;

font-size:52px;

font-weight:700;

line-height:1.2;

margin-bottom:18px;

}

.section-text{

font-size:18px;

color:var(--text);

max-width:760px;

}

/* Gradient Text */

.gradient{

background:linear-gradient(90deg,#6C3BFF,#00E5FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* Glow */

.glow{

box-shadow:

0 0 25px rgba(108,59,255,.45),

0 0 50px rgba(0,229,255,.20);

}
/* ===========================================
   PREMIUM NAVBAR
=========================================== */

.navbar{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:92%;

max-width:1380px;

z-index:9999;

padding:18px 30px;

background:rgba(255,255,255,.05);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

transition:.35s;

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:14px;

}

.logo-icon{

width:56px;

height:56px;

border-radius:18px;

background:linear-gradient(135deg,#6C3BFF,#00E5FF);

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#fff;

box-shadow:0 15px 40px rgba(108,59,255,.4);

}

.logo-text h2{

font-size:26px;

font-family:Poppins,sans-serif;

font-weight:700;

}

.logo-text span{

color:#94A3B8;

font-size:14px;

}

.desktop-menu{

display:flex;

gap:36px;

}

.desktop-menu a{

font-weight:500;

color:#D1D5DB;

position:relative;

}

.desktop-menu a:hover{

color:#fff;

}

.desktop-menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:#00E5FF;

transition:.35s;

}

.desktop-menu a:hover::after{

width:100%;

}

.nav-buttons{

display:flex;

align-items:center;

gap:18px;

}

.demo-btn{

padding:15px 28px;

border-radius:50px;

background:linear-gradient(90deg,#6C3BFF,#00E5FF);

font-weight:600;

box-shadow:0 15px 35px rgba(108,59,255,.35);

transition:.35s;

}

.demo-btn:hover{

transform:translateY(-5px);

}

.mobile-menu-btn{

display:none;

background:none;

border:none;

font-size:28px;

color:#fff;

cursor:pointer;

}

/* ===========================================
   HERO
=========================================== */

#hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

padding-top:140px;

background:
radial-gradient(circle at top left,#312E81 0%,transparent 40%),
radial-gradient(circle at bottom right,#00E5FF20 0%,transparent 40%),
#050816;

}

.hero-content{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.hero-left h1{

font-family:Poppins;

font-size:72px;

line-height:1.08;

margin-bottom:25px;

font-weight:800;

}

.hero-left p{

font-size:20px;

color:#D1D5DB;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.hero-image{

position:relative;

}

.hero-image img{

border-radius:28px;

box-shadow:0 30px 80px rgba(0,0,0,.45);

}

/* Floating Glow */

.hero-image::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:#6C3BFF;

filter:blur(140px);

opacity:.35;

top:-80px;

right:-80px;

z-index:-1;

}

.hero-image::after{

content:"";

position:absolute;

width:300px;

height:300px;

background:#00E5FF;

filter:blur(120px);

opacity:.20;

bottom:-60px;

left:-40px;

z-index:-1;

}

/* Aurora */

body::before{

content:"";

position:fixed;

top:-200px;

left:-200px;

width:900px;

height:900px;

background:radial-gradient(circle,#6C3BFF55,transparent 70%);

filter:blur(150px);

animation:aurora1 18s linear infinite;

z-index:-3;

}

body::after{

content:"";

position:fixed;

bottom:-300px;

right:-200px;

width:800px;

height:800px;

background:radial-gradient(circle,#00E5FF33,transparent 70%);

filter:blur(160px);

animation:aurora2 20s linear infinite;

z-index:-3;

}

@keyframes aurora1{

0%{transform:translate(0,0);}
50%{transform:translate(180px,120px);}
100%{transform:translate(0,0);}

}

@keyframes aurora2{

0%{transform:translate(0,0);}
50%{transform:translate(-160px,-120px);}
100%{transform:translate(0,0);}

}
/* HERO BUTTON VARIANT */

.hero-buttons .glass{

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.12);

}

.hero-buttons .glass:hover{

background:rgba(255,255,255,.15);

}

/* HERO IMAGE FLOAT */

.hero-image img{

animation:floatImage 6s ease-in-out infinite;

}

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}
/* ===========================================
   STATS SECTION
=========================================== */

#stats{

padding:80px 0;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.stat-card{

padding:40px;

text-align:center;

transition:.35s;

}

.stat-card:hover{

transform:translateY(-12px);

border:1px solid rgba(0,229,255,.25);

box-shadow:0 20px 60px rgba(0,229,255,.15);

}

.stat-card h2{

font-size:52px;

font-family:Poppins,sans-serif;

margin-bottom:10px;

background:linear-gradient(90deg,#6C3BFF,#00E5FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.stat-card p{

font-size:18px;

color:#CBD5E1;

}
/* ===========================
   COURSES
=========================== */

.courses-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.course-card{

padding:40px 30px;

text-align:center;

transition:.35s;

}

.course-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(108,59,255,.25);

}

.course-card h3{

font-size:28px;

margin-bottom:15px;

font-family:Poppins,sans-serif;

}

.course-card p{

margin-bottom:25px;

color:#CBD5E1;

}
/* ===========================
   FACULTY
=========================== */

.faculty-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.faculty-card{

padding:30px;

text-align:center;

transition:.35s;

}

.faculty-card:hover{

transform:translateY(-12px);

}

.faculty-card img{

width:160px;

height:160px;

border-radius:50%;

margin:auto;

object-fit:cover;

margin-bottom:25px;

border:5px solid rgba(255,255,255,.08);

}

.faculty-card h3{

font-size:28px;

margin-bottom:10px;

font-family:Poppins,sans-serif;

}

.faculty-card span{

display:block;

color:#00E5FF;

margin-bottom:10px;

}

.faculty-card p{

color:#CBD5E1;

}
/* ===========================
   TESTIMONIALS
=========================== */

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.testimonial-card{

padding:35px;

text-align:center;

transition:.35s;

font-size:18px;

}

.testimonial-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(108,59,255,.25);

}

.testimonial-card h3{

margin:20px 0 12px;

font-size:24px;

font-family:Poppins,sans-serif;

}

.testimonial-card p{

color:#CBD5E1;

line-height:1.8;

}