/* ================= GLOBAL ================= */

body{
margin:0;
font-family:Segoe UI, sans-serif;
background:#0b0d22;
color:white;
scroll-behavior:smooth;
}

h1,h2,h3{
margin:0;
}

.section{
padding:80px 60px;
text-align:center;
}


/* ================= NAVBAR ================= */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 60px;
background:#0e1028;
position:sticky;
top:0;
z-index:1000;
}

.logo img{
height:55px;
}

nav{
display:flex;
align-items:center;
gap:25px;
}

nav a{
color:white;
text-decoration:none;
font-weight:500;
transition:.3s;
}

nav a:hover{
color:#ff2d86;
}


/* BUTTONS */

.trial-btn{
background:#ff2d86;
border:none;
padding:10px 20px;
border-radius:25px;
color:white;
cursor:pointer;
font-weight:600;
}

.login-btn{
background:transparent;
border:1px solid white;
padding:10px 20px;
border-radius:25px;
color:white;
cursor:pointer;
}

.login-btn:hover{
background:white;
color:black;
}


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

.hero{
padding:130px 60px;
background:linear-gradient(120deg,#090b1f,#2b0060);
}

.hero h1{
font-size:60px;
line-height:1.2;
margin-bottom:20px;
}

.hero p{
font-size:18px;
margin-bottom:35px;
color:#ccc;
}

.hero-btn{
background:#ff2d86;
border:none;
padding:16px 35px;
border-radius:30px;
color:white;
font-size:16px;
cursor:pointer;
font-weight:600;
transition:.3s;
}

.hero-btn:hover{
transform:scale(1.05);
}


/* ================= WHY CARDS ================= */

.cards{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
margin-top:50px;
}

.card{
background:#171a3c;
padding:35px;
border-radius:18px;
width:260px;
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
background:#1f2250;
}


/* ================= COURSE SCROLL ================= */

.course-scroll{
display:flex;
gap:25px;
overflow-x:auto;
padding:30px 10px;
scrollbar-width:none;
}

.course-scroll::-webkit-scrollbar{
display:none;
}

.course-card{
min-width:280px;
background:#1c1f3a;
padding:30px;
border-radius:18px;
flex-shrink:0;
transition:.3s;
text-align:left;
}

.course-card h3{
margin-bottom:10px;
}

.course-card p{
color:#bbb;
}

.course-card:hover{
transform:translateY(-8px);
background:#242865;
}


/* ================= PERFORMANCE SCROLL ================= */

.performance-scroll{
display:flex;
gap:25px;
overflow-x:auto;
padding:30px 10px;
scrollbar-width:none;
}

.performance-scroll::-webkit-scrollbar{
display:none;
}

.performance-card{
min-width:260px;
background:#1b1e40;
border-radius:18px;
overflow:hidden;
flex-shrink:0;
transition:.3s;
}

.performance-card img{
width:100%;
height:180px;
object-fit:cover;
}

.performance-info{
padding:15px;
text-align:left;
}

.performance-card:hover{
transform:scale(1.05);
}


/* ================= FOOTER ================= */

footer{
text-align:center;
padding:40px;
background:black;
margin-top:80px;
color:#aaa;
}


/* ================= MOBILE ================= */

@media(max-width:900px){

.navbar{
padding:15px 20px;
}

.hero{
padding:100px 25px;
}

.hero h1{
font-size:38px;
}

.section{
padding:60px 20px;
}

}