*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI', sans-serif;
scroll-behavior:smooth;
}

/* 🔥 BACKGROUND */
body{
background:linear-gradient(-45deg,#020617,#0f172a,#1e293b,#020617);
background-size:400% 400%;
animation:bgMove 12s ease infinite;
color:#fff;
overflow-x:hidden;
}

@keyframes bgMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

/* 🔥 HEADER */
header{
height:100vh;
background:url('1.avif') center/cover no-repeat;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
position:relative;
text-align:center;
}

header::before{
content:"";
position:absolute;
width:100%;
height:100%;
background:linear-gradient(180deg,rgba(0,0,0,0.7),rgba(0,0,0,0.95));
backdrop-filter:blur(8px);
z-index:1;
}

/* 🔥 NAVBAR */
nav{
position:absolute;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
z-index:2;
}

.logo{
width:170px;
filter:drop-shadow(0 0 10px rgba(0,255,255,0.6));
}

/* NAV LINKS */
.nav-links{
display:flex;
list-style:none;
}

.nav-links li{
margin-left:25px;
}

.nav-links a{
color:#fff;
text-decoration:none;
position:relative;
transition:0.3s;
}

.nav-links a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0%;
height:2px;
background:#00f7ff;
box-shadow:0 0 10px #00f7ff;
transition:0.3s;
}

.nav-links a:hover::after{
width:100%;
}

/* 🔥 HAMBURGER */
.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
z-index:1000;
}

.hamburger span{
width:25px;
height:3px;
background:#fff;
margin:4px;
transition:0.4s;
}

/* ANIMATION */
.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* 🔥 HERO */
.header-content{
z-index:2;
max-width:800px;
animation:fadeUp 1s ease;
}

.header-content h1{
font-size:42px;
background:linear-gradient(90deg,#00f7ff,#3b82f6);
-webkit-background-clip:text;
color:transparent;
}

/* BUTTON */
#learn{
margin-top:20px;
padding:14px 35px;
border:none;
border-radius:40px;
font-size:18px;
background:linear-gradient(45deg,#00f7ff,#3b82f6);
cursor:pointer;
transition:0.3s;
}

#learn:hover{
transform:scale(1.1);
box-shadow:0 0 25px rgba(0,255,255,0.7);
}

/* 🔥 SECTIONS */
section{
padding:70px 8%;
text-align:center;
}

/* 🔥 CARDS */
.card-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:25px;
margin-top:30px;
}

.card{
padding:30px;
border-radius:20px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.1);
transition:0.4s;
}

.card:hover{
transform:translateY(-12px) scale(1.03);
box-shadow:0 20px 40px rgba(0,255,255,0.3);
}

.card h3{
color:#00f7ff;
margin-bottom:10px;
}

/* IMAGE */
.image-container img{
width:80%;
border-radius:20px;
margin-top:30px;
transition:0.4s;
}

.image-container img:hover{
transform:scale(1.08);
}

/* 🔥 HIGHLIGHTS */
#highlights{
background:rgba(255,255,255,0.05);
border-radius:15px;
}

.highlight-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:30px;
}

.highlight-card{
padding:25px;
border-radius:20px;
background:rgba(255,255,255,0.05);
transition:0.4s;
}

.highlight-card:hover{
transform:translateY(-10px);
box-shadow:0 15px 30px rgba(0,255,255,0.3);
}

/* 🔥 QUALIFICATIONS */
.qualification-list p{
margin:12px auto;
padding:15px;
max-width:600px;
border-radius:12px;
background:rgba(255,255,255,0.05);
transition:0.3s;
}

.qualification-list p:hover{
transform:scale(1.05);
background:rgba(0,255,255,0.15);
}

/* 🔥 CTA */
#cta button{
padding:18px 45px;
font-size:22px;
border:none;
border-radius:40px;
background:linear-gradient(45deg,#00f7ff,#3b82f6);
cursor:pointer;
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(0,255,255,0.6);}
70%{box-shadow:0 0 0 20px rgba(0,255,255,0);}
100%{box-shadow:0 0 0 0 rgba(0,255,255,0);}
}

/* 🔥 FOOTER */
footer{
background:#020617;
padding:25px;
text-align:center;
font-size:14px;
border-top:1px solid rgba(255,255,255,0.1);
}

footer img.footer-img{
width:80px;
margin-top:10px;
}

/* 🔥 SCROLL ANIMATION */
.reveal{
opacity:0;
transform:translateY(60px);
transition:all 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* 🔥 ANIMATION */
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* 📱 MOBILE */
@media(max-width:768px){

.header-content h1{
font-size:28px;
}

/* SLIDE MENU */
.nav-links{
position:fixed;
top:0;
right:-100%;
height:100vh;
width:250px;
background:rgba(0,0,0,0.95);
flex-direction:column;
align-items:center;
justify-content:center;
transition:0.5s ease;
}

.nav-links.active{
right:0;
}

.nav-links li{
margin:20px 0;
}

.hamburger{
display:flex;
}

}