body{

margin:0;
font-family:Arial;
background:#0b132b;
color:white;

}

header{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#0f1c3a;

}

nav a{

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

}

.hero{

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

}

.hero h1{

font-size:42px;

}

.hero p{

color:#9bbcff;
font-size:18px;
max-width:600px;
margin:auto;

}

button{

margin-top:30px;
background:#00c2ff;
border:none;
padding:14px 28px;
border-radius:6px;
font-size:18px;
cursor:pointer;

}

.services{

padding:80px 20px;
text-align:center;
background:#101935;

}

.grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
max-width:900px;
margin:auto;

}

.card{

background:#182449;
padding:25px;
border-radius:10px;

}

footer{

text-align:center;
padding:30px;
background:#0f1c3a;

}