*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',Arial,sans-serif;
}


body{

background:#f5f5f5;
color:#333;

}



header{

background:#092c5c;
color:white;
text-align:center;
padding:25px;

}


.logo{

width:90px;
height:90px;
object-fit:cover;
border-radius:50%;
background:white;
padding:5px;

}


.logo-area h1{

margin-top:10px;
font-size:32px;

}


nav{

margin-top:20px;

}


nav a{

color:white;
text-decoration:none;
margin:15px;
font-weight:bold;

}


nav a:hover{

color:#f4c542;

}




.hero{

height:500px;

background:
linear-gradient(
rgba(9,44,92,.8),
rgba(9,44,92,.8)
),
url("https://images.unsplash.com/photo-1507842217343-583bb7270b66");

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

display:flex;
align-items:center;
justify-content:center;

text-align:center;

color:white;

}



.hero-logo{

width:140px;
border-radius:50%;
background:white;
padding:10px;

}



.hero h2{

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

}



.hero p{

font-size:22px;

}



.button{

display:inline-block;
margin-top:25px;
padding:12px 30px;
background:#f4c542;
color:#222;
text-decoration:none;
border-radius:30px;

}




.box{

width:90%;
max-width:1000px;
margin:50px auto;

background:white;

padding:35px;

border-radius:15px;

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

}



.box h2{

color:#092c5c;
margin-bottom:20px;

}



.card-container{

display:flex;
gap:20px;

}



.card{

flex:1;
padding:25px;

background:#f1f5fa;

border-radius:10px;

}



.card h3{

margin-bottom:10px;

}



.wa{

position:fixed;

right:25px;
bottom:25px;

background:#25d366;

color:white;

font-size:30px;

width:60px;
height:60px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

text-decoration:none;

}



footer{

background:#092c5c;
color:white;
text-align:center;
padding:20px;

}



@media(max-width:700px){


.hero h2{

font-size:30px;

}


.card-container{

flex-direction:column;

}


nav a{

display:block;
margin:10px;

}

}