*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;

}


html{

scroll-behavior:smooth;

}



body{

background:#f4f9ff;
color:#1b1b1b;

}




header{

background:#0057b8;

color:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 8%;

position:sticky;

top:0;

z-index:1000;

}



.logo{

font-size:28px;

font-weight:700;

}




nav a{

color:white;

text-decoration:none;

margin-left:25px;

font-weight:500;

}



nav a:hover{

color:#d9ecff;

}




.hero{


height:90vh;


background:

linear-gradient(
rgba(0,50,120,.65),
rgba(0,50,120,.65)
),


url("https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1500&q=80");


background-size:cover;

background-position:center;


display:flex;

justify-content:center;

align-items:center;


}





.overlay{


background:rgba(0,0,0,.35);

padding:60px;

border-radius:15px;

text-align:center;

color:white;


}




.hero h1{

font-size:60px;

}



.hero p{

font-size:24px;

margin:20px 0 30px;

}




.btn{


display:inline-block;

background:#0077ff;

color:white;

padding:15px 35px;

text-decoration:none;

border-radius:40px;

font-weight:bold;


}



.btn:hover{

background:#0057b8;

}





section{

padding:80px 10%;

}





h2{

text-align:center;

font-size:40px;

margin-bottom:50px;

color:#0057b8;

}





.cards{


display:grid;

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

gap:30px;


}




.card{


background:white;

padding:30px;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,87,184,.12);

border-top:5px solid #0077ff;


}





.card h3{

color:#0057b8;

margin-bottom:15px;

}





.about{


display:grid;

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

gap:30px;

text-align:center;


}




.about div{


background:white;

padding:30px;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,87,184,.12);

border-top:5px solid #0077ff;


}





#contact{


background:#eaf4ff;

text-align:center;


}



#contact p{

font-size:20px;

margin:15px;

}





footer{


background:#0057b8;

color:white;

text-align:center;

padding:25px;


}




@media(max-width:768px){


header{

flex-direction:column;

}


nav{

margin-top:15px;

}



.hero h1{

font-size:38px;

}



.overlay{

padding:35px;

margin:20px;

}



}