* { margin:0; padding:0; box-sizing:border-box; font-family:Arial, sans-serif; }

body { color:#333; line-height:1.6; }

.container { max-width:1200px; margin:auto; padding:0 20px; }

/* TOP BAR */
.topbar {
  background:#0b5ed7;
  color:#fff;
  padding:8px;
  text-align:center;
}
.topbar a { color:#fff; text-decoration:none; }

/* HEADER */
.header { background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.1); position:sticky; top:0; z-index:10; }
.header-flex { display:flex; justify-content:space-between; align-items:center; padding:15px 0; }
.logo { font-weight:bold; color:#0b5ed7; }
nav a { margin-left:20px; text-decoration:none; color:#333; }

/* HERO */
.hero {
  height:80vh;
  background:url("https://images.unsplash.com/photo-1590490360182-c33d57733427") center/cover no-repeat;
  position:relative;
}
.overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.hero-content { position:relative; color:#fff; text-align:center; top:50%; transform:translateY(-50%); }
.hero h1 { font-size:40px; margin-bottom:15px; }
.hero-btns .btn { margin:10px; }

/* BUTTONS */
.btn { padding:10px 18px; color:#fff; text-decoration:none; border-radius:4px; display:inline-block; }
.primary { background:#0b5ed7; }
.whatsapp { background:#25d366; }

/* INTRO */
.intro { padding:40px 0; text-align:center; background:#f8f9fa; }

/* SERVICES */
.services { padding:60px 0; }
.services h2 { text-align:center; margin-bottom:40px; }
.service-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}
.service-card {
  background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  border-radius:6px;
  overflow:hidden;
  text-align:center;
}
.service-card img { width:100%; height:180px; object-fit:cover; }
.service-card h3 { margin:15px 0 5px; }
.service-card p { padding:0 15px 20px; }

/* WHY */
.why { background:#f1f1f1; padding:60px 0; }
.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:15px;
  text-align:center;
}
.why-grid div {
  background:#fff;
  padding:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}

/* CONTACT */
.contact { padding:60px 0; }
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
input, textarea {
  width:100%;
  padding:10px;
  margin-bottom:10px;
}

/* FOOTER */
footer {
  background:#0b5ed7;
  color:#fff;
  text-align:center;
  padding:20px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .contact-grid { grid-template-columns:1fr; }
  .hero h1 { font-size:28px; }
}