*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#0f0f0f;color:white;overflow-x:hidden}

/* Animated Background */
.bg-animation{
position:fixed;width:100%;height:100%;
background:linear-gradient(45deg,#111,#222,#111);
z-index:-1;animation:move 10s infinite alternate;
}
@keyframes move{
0%{filter:hue-rotate(0deg)}
100%{filter:hue-rotate(360deg)}
}

/* Navbar */
.navbar{
position:fixed;width:100%;
display:flex;justify-content:space-between;
padding:20px;background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);
}
.navbar a{color:white;margin:0 10px;text-decoration:none}
.hamburger{display:none;cursor:pointer}

/* Hero */
.hero{
height:100vh;
background:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c') center/cover;
display:flex;justify-content:center;align-items:center;text-align:center;
}
.hero-content{background:rgba(0,0,0,0.6);padding:40px;border-radius:10px}

/* Courses */
.courses{padding:80px;text-align:center}
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.course-card{background:#1a1a1a;border-radius:10px;overflow:hidden;transition:0.4s}
.course-card:hover{transform:translateY(-10px)}
.course-card img{width:100%;height:200px;object-fit:cover}

/* Counter */
.counter-section{display:flex;justify-content:space-around;padding:50px;background:#111}
.counter{font-size:40px;color:gold}

/* Modal */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center}
.modal-content{background:#1a1a1a;padding:30px;border-radius:10px;display:flex;flex-direction:column;gap:15px}

/* Dashboard */
.dashboard{display:none;flex-direction:row;height:100vh}
.sidebar{width:250px;background:#111;padding:20px}
.dash-content{flex:1;padding:30px}
.student-card{background:#222;padding:15px;margin-bottom:10px;border-radius:8px}

/* WhatsApp */
.whatsapp{position:fixed;bottom:20px;right:20px;font-size:30px;background:green;padding:10px;border-radius:50%;color:white;text-decoration:none}

/* Responsive */
@media(max-width:768px){
.navbar nav{display:none;flex-direction:column}
.hamburger{display:block}
.counter-section{flex-direction:column;text-align:center}
.dashboard{flex-direction:column}
.sidebar{width:100%}
}
.switch{
color:gold;
cursor:pointer;
font-weight:500;
}

.modal-content input,
.modal-content select{
padding:10px;
border-radius:6px;
border:none;
background:#222;
color:white;
}

.modal-content input:focus{
outline:1px solid gold;
}

.modal-content button{
background:gold;
color:black;
padding:10px;
border:none;
border-radius:6px;
cursor:pointer;
}
/* FOOTER */

.footer{
background:#111;
color:white;
padding:60px 20px 20px 20px;
margin-top:80px;
}

.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
max-width:1200px;
margin:auto;
}

.footer-box h3{
margin-bottom:15px;
color:gold;
}

.footer-box p{
font-size:14px;
line-height:1.6;
}

.footer-box ul{
list-style:none;
padding:0;
}

.footer-box ul li{
margin-bottom:8px;
font-size:14px;
}

.footer-box ul li a{
color:white;
text-decoration:none;
transition:0.3s;
}

.footer-box ul li a:hover{
color:gold;
}

.social{
margin-top:15px;
}

.social a{
margin-right:10px;
font-size:18px;
text-decoration:none;
color:white;
transition:0.3s;
}

.social a:hover{
color:gold;
}

.footer-bottom{
text-align:center;
margin-top:30px;
padding-top:20px;
border-top:1px solid #333;
font-size:14px;
color:#aaa;
}
.section-title{
text-align:center;
font-size:32px;
margin-bottom:50px;
color:gold;
}

.courses{
padding:100px 20px;
max-width:1200px;
margin:auto;
}

.course-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.course-card{
background:#1a1a1a;
border-radius:15px;
overflow:hidden;
transition:0.4s;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

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

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

.course-content{
padding:20px;
}

.course-content h3{
margin-bottom:15px;
color:gold;
}

.course-content p{
font-size:14px;
line-height:1.7;
color:#ccc;
}