body{margin:0;font-family:Arial;background:#0b1220;color:white}
.header{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#020617}
.logo{font-weight:bold}
nav a{color:white;margin:0 10px;text-decoration:none}
.menu{display:none}
.hero{background:url('../images/hero.png') center/cover;height:70vh;display:flex;align-items:center;padding:60px}
.hero h1{font-size:42px}
.btn{background:#2563eb;padding:12px 20px;border-radius:6px;display:inline-block;margin-top:15px}
.services{padding:60px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#1e293b;padding:25px;border-radius:10px;transition:0.3s}
.card:hover{transform:translateY(-5px)}
.about{display:flex;gap:40px;padding:60px}
.about img{width:400px;border-radius:10px}
.page{padding:60px}
footer{text-align:center;padding:30px;background:#020617}
@media(max-width:900px){
.grid{grid-template-columns:1fr 1fr}
.about{flex-direction:column}
.menu{display:block}
nav{display:none}
}