.site-header{

height:70px;

background:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 25px;

box-shadow:0 2px 10px #ddd;

}


.logo{

font-size:22px;

font-weight:bold;

color:#087f73;

}




.hero{


margin:25px;

padding:45px 20px;

border-radius:25px;

background:linear-gradient(
135deg,
#087f73,
#25b89c
);

color:white;

text-align:center;

}



.hero h1{

font-size:35px;

}



.hero a{

display:inline-block;

margin-top:20px;

background:white;

color:#087f73;

padding:12px 30px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

}



.grades{

padding:20px;

}



.grades h2{

text-align:center;

color:#087f73;

}



.grade-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:20px;

}



.grade-card{


background:white;

border-radius:20px;

padding:25px;

text-align:center;

text-decoration:none;

color:#333;

box-shadow:

0 5px 20px rgba(0,0,0,.08);

transition:.3s;


}



.grade-card:hover{

transform:translateY(-5px);

}



.icon{

font-size:45px;

}



.footer{

text-align:center;

padding:30px;

color:#777;

}





@media(max-width:600px){


.grade-grid{

grid-template-columns:1fr;

}


}