* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial, sans-serif; background:#f9f9f9; color:#333; }

.navbar {
  background:#6b48ff; color:white; padding:1rem 5%;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:100;
}
.logo-img { height:60px; }
.nav-links { list-style:none; display:flex; gap:2rem; }
.nav-links a { color:white; text-decoration:none; font-weight:bold; }
.menu-toggle { display:none; font-size:2rem; cursor:pointer; }

.hero {
  position:relative; text-align:center; color:white; min-height:70vh;
  display:flex; align-items:center; justify-content:center;
}
.hero-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.85;
}
.hero-content { position:relative; z-index:2; padding:2rem; }
.hero h1 { font-size:3rem; margin-bottom:1rem; }
.btn { background:#25D366; color:white; padding:1rem 2rem; border-radius:50px; text-decoration:none; font-weight:bold; display:inline-block; margin-top:1rem; }

.section { padding:5rem 5%; max-width:1200px; margin:0 auto; text-align:center; }
h2 { color:#6b48ff; margin-bottom:2rem; font-size:2.5rem; }

.services-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:2rem; }
.service-card { background:white; padding:2rem; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,0.1); }

@media (max-width:768px) {
  .nav-links { display:none; position:absolute; top:100%; left:0; background:#6b48ff; width:100%; flex-direction:column; padding:1rem 0; }
  .nav-links.active { display:flex; }
  .menu-toggle { display:block; }
}