body{

font-family:Arial, sans-serif;

margin:0;

background:#f5f7fa;

color:#222;

}


header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 8%;

background:white;

}


.logo{

width:230px;

}



nav a{

margin:15px;

text-decoration:none;

color:#006b73;

font-weight:bold;

}



.hero{


background:#003b46;

color:white;

text-align:center;

padding:90px 10%;


}



.hero h1{

font-size:45px;

}



.hero p{

font-size:20px;

}



button{


padding:15px 35px;

font-size:18px;

cursor:pointer;


}



section{

padding:50px 10%;


}



h2{

text-align:center;

color:#006b73;

}



.cards{


display:grid;

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

gap:25px;


}



.card{


background:white;

padding:25px;

border-radius:10px;

box-shadow:0 5px 15px #ddd;


}



footer{


background:#003b46;

color:white;

text-align:center;

padding:20px;


}