body{

margin:0;
font-family: 'Montserrat', sans-serif;
color:#222;
background:white;
overflow-x:hidden;

}


/* animated grid background */

.grid-bg{

position:fixed;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(13,71,161,0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,71,161,0.08) 1px, transparent 1px);

background-size:60px 60px;

animation: moveGrid 20s linear infinite;

z-index:-1;

}

@keyframes moveGrid{

0%{transform:translateY(0)}
100%{transform:translateY(60px)}

}


/* layout */

.container{

max-width:1100px;
margin:auto;
padding:60px 20px;

}


header{

border-bottom:1px solid #eee;
background:white;

}

header .container{

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

}


.logo{

font-size:26px;
font-weight:800;

}

.logo span{

color:#0D47A1;

}


nav a{

margin-left:25px;
text-decoration:none;
color:#222;
font-weight:500;

}



/* hero */

.hero{

text-align:center;
padding:160px 20px;

}

.hero h1{

font-size:70px;
margin-bottom:10px;

}

.tagline{

font-size:22px;
color:#0D47A1;

}

.desc{

margin:20px 0 40px;
color:#555;

}


/* CTA */

.cta{

background:#0D47A1;
color:white;
padding:14px 30px;
border-radius:4px;
text-decoration:none;

box-shadow:0 0 0 rgba(13,71,161,0.7);

animation: glow 2s infinite;

}

@keyframes glow{

0%{box-shadow:0 0 0 rgba(13,71,161,0.7)}

50%{box-shadow:0 0 15px rgba(13,71,161,0.6)}

100%{box-shadow:0 0 0 rgba(13,71,161,0.7)}

}



/* sections */

.section h2{

font-size:34px;
margin-bottom:20px;

}


/* services */

.services{

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

}


.card{

border:1px solid #eee;
padding:25px;
transition:all 0.3s;

}

.card:hover{

transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.05);

}



/* footer */

footer{

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

}


/* fade animation */

.fade{

opacity:0;
transform:translateY(30px);
transition:all 1s ease;

}

.fade.show{

opacity:1;
transform:translateY(0);

}