html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Arial,sans-serif;
background:#0f172a;
color:white;
}

/* NAVBAR */

header{
position:sticky;
top:0;
z-index:1000;

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 60px;

background:rgba(15,23,42,0.9);

backdrop-filter:blur(10px);

border-bottom:1px solid rgba(255,255,255,0.1);
}

.logo{
font-size:32px;
font-weight:bold;

background:linear-gradient(to right,#818cf8,#38bdf8);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

nav a{
color:white;
text-decoration:none;
margin-left:30px;
font-weight:bold;
transition:0.3s;
}

nav a:hover{
color:#38bdf8;
}

/* HERO */

.hero{
height:100vh;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b,
#312e81
);
}

.hero h2{
font-size:70px;
margin-bottom:20px;
}

.hero p{
font-size:22px;
width:60%;
color:#cbd5e1;
line-height:1.6;
}

.hero button{
margin-top:30px;
}

/* BUTTONS */

button{
padding:14px 28px;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:bold;
font-size:15px;

transition:0.3s;

box-shadow:
0 4px 15px rgba(0,0,0,0.3);
}

button:hover{
transform:translateY(-3px);
}

/* SECTION */

section{
padding:80px 50px;
}

.heading{
text-align:center;
font-size:48px;
margin-bottom:50px;
}

/* COURSE SELECTOR */

.course-selector-card{
background:rgba(255,255,255,0.05);

backdrop-filter:blur(15px);

border-radius:20px;

padding:35px;

border:1px solid rgba(255,255,255,0.1);

box-shadow:
0 8px 30px rgba(0,0,0,0.3);
}

.course-buttons{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.course-btn{
background:
linear-gradient(
to right,
#4f46e5,
#7c3aed
);

color:white;

width:220px;
}

.course-btn:hover{
background:
linear-gradient(
to right,
#4338ca,
#6d28d9
);
}

/* CLASS CONTAINER */

.class-container{
margin-top:40px;
}

/* CARD */

.card{
background:rgba(255,255,255,0.06);

backdrop-filter:blur(14px);

border-radius:20px;

padding:30px;

border:1px solid rgba(255,255,255,0.1);

box-shadow:
0 10px 30px rgba(0,0,0,0.4);
}

.card h2,
.card h3{
color:#a5b4fc;
}

/* CLASS LIST */

.class-list{
margin-top:25px;
display:flex;
flex-direction:column;
gap:16px;
}

.class-item{
display:flex;
justify-content:space-between;
align-items:center;

padding:18px 22px;

background:rgba(255,255,255,0.08);

border-radius:14px;

transition:0.3s;
}

.class-item:hover{
transform:scale(1.01);

background:rgba(255,255,255,0.12);
}

/* PLAY BUTTON */

.play-btn{
background:
linear-gradient(
to right,
#ef4444,
#f97316
);

color:white;
}

.play-btn:hover{
background:
linear-gradient(
to right,
#dc2626,
#ea580c
);
}

/* ENROLL BUTTON */

.enroll-btn{
margin-top:25px;
width:100%;

background:
linear-gradient(
to right,
#4f46e5,
#06b6d4
);

color:white;
font-size:16px;
}

.enroll-btn:hover{
background:
linear-gradient(
to right,
#4338ca,
#0891b2
);
}

/* MY COURSES */

.course-grid{
display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:25px;
}

/* ENROLLED CARD */

.success-card{
background:
linear-gradient(
135deg,
#1e293b,
#312e81
);

border-radius:18px;

padding:30px;

text-align:center;

box-shadow:
0 10px 25px rgba(0,0,0,0.4);

border:1px solid rgba(255,255,255,0.1);
}

.success-card h3{
color:#a5b4fc;
font-size:28px;
}

.success-card p{
color:#cbd5e1;
font-size:18px;
margin-top:15px;
}

/* MOBILE */

@media(max-width:768px){

header{
flex-direction:column;
}

nav{
margin-top:15px;
}

.hero h2{
font-size:45px;
}

.hero p{
width:90%;
}

.course-buttons{
flex-direction:column;
}

.course-btn{
width:100%;
}

}

/* COURSE HEADER */

.course-header{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:25px;
}

.show-all-btn{

color:#a5b4fc;

font-size:18px;
font-weight:bold;

cursor:pointer;

transition:0.3s;
}

.show-all-btn:hover{

color:#38bdf8;
transform:translateX(5px);

}

/* ALL COURSES CARD */

.all-courses-card{

margin-top:30px;

display:none;

animation:fadeIn 0.4s ease;

}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* SUCCESS MESSAGE */

.success-message{

margin-top:25px;

animation:slideDown 0.4s ease;

border:1px solid rgba(34,197,94,0.4);

background:
linear-gradient(
135deg,
rgba(34,197,94,0.15),
rgba(15,23,42,0.9)
);

}

@keyframes slideDown{

from{
opacity:0;
transform:translateY(-15px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* CLEAR BUTTON */

.clear-btn-container{

display:flex;
justify-content:center;

margin-bottom:30px;
}

/* CLEAR BUTTON */

.clear-btn-container{

display:flex;
justify-content:center;

margin-bottom:30px;
}

.clear-btn{

background:
linear-gradient(
to right,
#dc2626,
#ef4444
);

color:white;

padding:14px 28px;

font-size:16px;

border:none;
border-radius:12px;

cursor:pointer;

transition:0.3s;
}

.clear-btn:hover{

transform:translateY(-3px);

background:
linear-gradient(
to right,
#b91c1c,
#dc2626
);

}

/* COURSE HEADER */

.course-top{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:20px;

gap:20px;
}

.top-enroll-btn{

width:auto;
padding:14px 24px;

white-space:nowrap;
}