/* Base Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', sans-serif; }
body { background:#f0f2f5; color:#222; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:15px 40px; background:#111; color:#fff; position:sticky; top:0; z-index:100; }
header .logo { font-size:22px; font-weight:700; }
header nav a { margin-left:20px; color:#fff; text-decoration:none; font-weight:500; }
header nav a:hover { text-decoration:underline; }

/* Hero Section */
.hero {
  position:relative; height:90vh; background: url('https://images.unsplash.com/photo-1531482615713-2afd69097998?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') no-repeat center/cover;
  display:flex; justify-content:center; align-items:center; text-align:center; color:#fff;
}
.hero .overlay {
  position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);
}
.hero-content { position:relative; z-index:1; padding:20px; }
.hero-content h1 { font-size:42px; margin-bottom:20px; }
.hero-content p { font-size:18px; margin-bottom:25px; }
.hero-content button {
  background:#0d6efd; color:#fff; border:none; padding:12px 25px; font-size:16px; border-radius:5px; cursor:pointer; transition:all .3s;
}
.hero-content button:hover { background:#0056b3; }

/* Sections */
.about, .services, .contact { padding:60px 20px; text-align:center; }
.about h2, .services h2, .contact h2 { font-size:32px; margin-bottom:20px; }

/* Services Cards */
.services { background:#e9ecef; }
.service-cards { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; }
.card {
  background:#fff; padding:25px; width:280px; border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1); transition:transform .3s;
}
.card:hover { transform:translateY(-5px); }

/* Contact Form */
.contact form { display:flex; flex-direction:column; gap:15px; max-width:400px; margin:0 auto; }
input, textarea {
  padding:12px; border:1px solid #ccc; border-radius:5px; font-size:16px;
}
.contact button {
  background:#0d6efd; color:#fff; border:none; padding:12px; border-radius:5px; cursor:pointer; transition:background .3s;
}
.contact button:hover { background:#0056b3; }
.contact-info { margin-top:20px; }

/* Footer */
footer { background:#111; color:#fff; text-align:center; padding:15px; margin-top:40px; }

/* Responsive */
@media (max-width:768px) {
  .hero-content h1 { font-size:28px; }
  .service-cards { flex-direction:column; align-items:center; }
}