*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}


body{
background:#f2f2f2;
}


header{

height:90px;
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 6%;
box-shadow:0 2px 10px #ccc;

}


.logo{
display:flex;
align-items:center;
gap:15px;
}


.logo img{
width:60px;
}


nav a{

text-decoration:none;
color:#333;
margin:0 12px;

}


nav button{

background:#8b0000;
color:white;
border:none;
padding:12px 20px;
border-radius:25px;

}



.hero{

height:550px;

background:
linear-gradient(
rgba(0,0,0,.5),
rgba(0,0,0,.5)
),
url("images/school.jpg");

background-size:cover;
background-position:center;

display:flex;
align-items:center;

padding-left:8%;

}



.hero-text{

color:white;
max-width:600px;

}


.hero h1{

font-size:48px;

}


.hero p{

font-size:20px;
margin:20px 0;

}


.gold-btn,
.red-btn{

padding:14px 25px;
border-radius:30px;
text-decoration:none;
margin-right:10px;
display:inline-block;

}


.gold-btn{

background:#c89b00;
color:white;

}


.red-btn{

background:#8b0000;
color:white;

}



.cards{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
padding:50px 6%;

}



.card{

background:white;
padding:30px;
border-radius:15px;
box-shadow:0 5px 20px #ddd;
border-top:5px solid #c89b00;

}



footer{

background:#333;
color:white;
text-align:center;
padding:30px;

}