body{
font-family: sans-serif;
}

.hero{
background: radial-gradient(circle at center,#0f172a,#000);
}

.gradient-text{
background: linear-gradient(90deg,#3b82f6,#06b6d4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero{
background: radial-gradient(circle at center,#0f172a,#000);
}

.hero-title{
line-height:1.1;
}

.gradient-text{
background: linear-gradient(90deg,#3b82f6,#06b6d4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* floating cards */

.floating-card{

position:absolute;
padding:14px 20px;
background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);
border-radius:10px;
font-size:14px;
border:1px solid rgba(255,255,255,0.1);

}

/* card positions */

.card1{

top:40px;
left:20px;

}

.card2{

top:150px;
right:40px;

}

.card3{

bottom:40px;
left:80px;

}

.card4{

bottom:5px;
left:480px;

}
.card5{

bottom:120px;
left:260px;

}
.card6{

bottom:-200px;
left:180px;

}
.card7{
    bottom: -20px;
    left: 280px;
}

/* scroll indicator */

.scroll-indicator{

position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);

}

.scroll-indicator span{

display:block;
width:2px;
height:40px;
background:white;
animation:scrollAnim 1.5s infinite;

}

@keyframes scrollAnim{

0%{opacity:0;transform:translateY(-10px);}
50%{opacity:1;}
100%{opacity:0;transform:translateY(10px);}

}

/* NAVBAR */

#mainNavbar{

background: transparent;

}

.nav-link{

position: relative;
transition: 0.3s;

}

.nav-link::after{

content:"";
position:absolute;
bottom:-4px;
left:0;
width:0%;
height:2px;
background:#3b82f6;
transition:0.3s;

}

.nav-link:hover::after{

width:100%;

}

/* SCROLL NAVBAR */

.nav-scrolled{

background: rgba(0,0,0,0.6);
backdrop-filter: blur(10px);

}
#three-canvas canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
@media(max-width:768px){

.floating-card{
display:none;
}

}
.feature-card{

background: rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:12px;
padding:30px;
text-align:center;
transition:0.3s;

}

.feature-card:hover{

transform:translateY(-8px);
background: rgba(255,255,255,0.08);

}

.feature-card h3{

font-size:18px;
font-weight:600;
margin-top:10px;
margin-bottom:10px;

}

.feature-card p{

font-size:14px;
color:#9ca3af;

}

.feature-icon{

font-size:32px;

}
.course-card{

background: rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:12px;
padding:30px;
transition:0.3s;

}

.course-card:hover{

transform:translateY(-8px);
background: rgba(255,255,255,0.08);

}

.course-card h3{

font-size:20px;
font-weight:600;
margin-bottom:10px;

}

.course-card p{

color:#9ca3af;
font-size:14px;
margin-bottom:20px;

}

.course-btn{

display:inline-block;
background:#2563eb;
padding:8px 16px;
border-radius:6px;
font-size:14px;
transition:0.3s;

}

.course-btn:hover{

background:#1d4ed8;

}

.gallery-item{

overflow:hidden;
border-radius:10px;
position:relative;

}

.gallery-item img{

width:100%;
height:100%;
object-fit:cover;
transition:0.4s;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.testimonial-card{

background: rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:12px;
padding:30px;
text-align:center;
margin:10px;

}

.testimonial-card p{

color:#9ca3af;
margin:15px 0;

}

.testimonial-card h4{

font-weight:600;
margin-top:10px;

}

.stars{

color:#fbbf24;
font-size:18px;

}

.cta-box{

background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(6,182,212,0.15));
border:1px solid rgba(255,255,255,0.1);
border-radius:16px;
padding:60px 30px;

}
#cursor{
position:fixed;
width:250px;
height:250px;
background:radial-gradient(circle, rgba(59,130,246,0.25), transparent 70%);
border-radius:50%;
pointer-events:none;
transform:translate(-50%,-50%);
mix-blend-mode:screen;
z-index:9999;
transition:transform 0.05s linear;
}

.course-features{
margin:15px 0;
color:#9ca3af;
font-size:14px;
}

.course-features li{
margin-bottom:6px;
}

.gallery-img{
width:100%;
border-radius:12px;
transition:0.4s;
cursor:pointer;
}

.gallery-img:hover{
transform:scale(1.05);
}