body{

margin:0;
font-family:Arial;
background:#0f2027;
color:white;
text-align:center;

}

/* HEADER */

header{

background:#1e3c72;
padding:15px;

}

.header-container{

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

}

/* LOGO */

.logo{

width:70px;

}

/* SITE NAME */

.site-name{

font-size:22px;

}

/* MENU */

.menu button{

padding:10px 18px;
margin:5px;
border:none;
border-radius:6px;
background:#3a7bd5;
color:white;
cursor:pointer;

}

.menu button:hover{

background:#5aa0ff;

}

/* LANGUAGE */

.language{

padding:6px;
border-radius:6px;

}
/* HERO SECTION */

.hero{

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

background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);

}

.hero-title{

font-size:40px;
margin-bottom:15px;
animation:fadeIn 2s;

}

.hero-text{

font-size:20px;
margin-bottom:25px;
opacity:0.9;

}

.start-btn{

padding:14px 28px;
font-size:18px;
border:none;
border-radius:8px;
background:#3a7bd5;
color:white;
cursor:pointer;
transition:0.3s;

}

.start-btn:hover{

background:#5aa0ff;
transform:scale(1.1);

}

/* ANIMATION */

@keyframes fadeIn{

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

  }
/* COURSES SECTION */

.courses{
padding:60px 20px;
background:#0b1f26;
}

.section-title{
font-size:32px;
margin-bottom:30px;
}

/* GRID */

.course-container{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
max-width:500px;
margin:auto;

}

/* CARD */

.course-card{

background:#3a7bd5;
padding:25px;
border-radius:12px;
font-size:20px;
font-weight:bold;
text-align:center;
cursor:pointer;
transition:0.3s;
box-shadow:0 4px 10px rgba(0,0,0,0.3);

}

/* HOVER */

.course-card:hover{

background:#5aa0ff;
transform:translateY(-5px);

}
/* REGISTER SECTION */

.register{

padding:60px 20px;
background:#0f2027;

}

.register-form{

max-width:400px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;

}

.register-form input,
.register-form select{

padding:12px;
border:none;
border-radius:8px;
font-size:16px;

}

.register-form button{

padding:14px;
border:none;
border-radius:8px;
background:#3a7bd5;
color:white;
font-size:18px;
cursor:pointer;
transition:0.3s;

}

.register-form button:hover{

background:#5aa0ff;

}
/* PAYMENT SECTION */

.payment{

padding:60px 20px;
background:#0b1f26;

}

.payment-container{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
max-width:500px;
margin:auto;

}

.payment-card{

background:#3a7bd5;
padding:25px;
border-radius:12px;
font-size:18px;
font-weight:bold;
text-align:center;
cursor:pointer;
transition:0.3s;
box-shadow:0 4px 10px rgba(0,0,0,0.3);

}

.payment-card:hover{

background:#5aa0ff;
transform:translateY(-5px);

  }
/* MATERIALS SECTION */

.materials{

padding:60px 20px;
background:#0f2027;

}

.materials-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
max-width:700px;
margin:auto;

}

.material-card{

background:#3a7bd5;
padding:25px;
border-radius:12px;
text-align:center;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
transition:0.3s;

}

.material-card:hover{

transform:translateY(-5px);
background:#5aa0ff;

}

.material-card button{

margin-top:10px;
padding:10px 18px;
border:none;
border-radius:6px;
background:white;
color:#3a7bd5;
cursor:pointer;
font-weight:bold;

}