body{

font-family:Arial, Helvetica, sans-serif;
margin:0;
background:#f4f6fb;
color:#1c2a3a;

}


.hero{

background:#0b3d6d;
color:white;
padding:120px 20px;
text-align:center;

}


.logo{

width:140px;
margin-bottom:20px;

}


.cta{

background:#2b7cff;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;

}


.section{

padding:80px 20px;
max-width:1200px;
margin:auto;

}


.grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;

}


.card{

background:white;
padding:20px;
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);

}


.card img{

width:100%;
border-radius:6px;
margin-bottom:15px;

}


.dark{

background:#0f2c4a;
color:white;
text-align:center;

}


.cta-section{

text-align:center;

}


footer{

background:#e5e7ea;
padding:40px;
text-align:center;
font-size:14px;

}


.contact-box{

position:fixed;
right:20px;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:10px;

}


.contact-box a{

padding:12px 18px;
border-radius:6px;
color:white;
text-decoration:none;

}


.whatsapp{

background:#25d366;

}


.mail{

background:#2b7cff;

}


/* scroll animation */

.reveal{

opacity:0;
transform:translateY(60px);
transition:all .8s ease;

}


.reveal.active{

opacity:1;
transform:translateY(0);

}