/* ========= Base / Reset ========= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; color: #333; line-height: 1.5; background: #fff; -webkit-font-smoothing: antialiased; }

/* ========= Header ========= */
header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: #fff;
  border-bottom: 2px solid #FEC20F;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 1000;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
}
.brand { display:flex; align-items:center; gap:12px; }
.site-logo { height:56px; display:block; }
.brand-text h1 { font-size:1.2rem; color:#333; margin-bottom:4px; }
.tagline { font-size:0.85rem; color:#666; margin:0; }

/* Navigation */
.main-nav ul { list-style:none; display:flex; gap:18px; align-items:center; margin:0; padding:0; }
.main-nav a { color:#333; font-weight:600; text-decoration:none; padding:6px 0; }
.main-nav a.active, .main-nav a:hover { color:#0082CA; }

/* Buttons */
.btn {
  display:inline-block;
  padding:10px 20px;
  border-radius:28px;
  font-weight:700;
  text-decoration:none;
  transition: all .22s ease;
}
.btn-primary { background:#0082CA; color:#fff; }
.btn-primary:hover { background:#B76E3B; color:#fff; }
.btn-outline { background:transparent; border:2px solid #0082CA; color:#0082CA; }
.btn-outline:hover { background:#0082CA; color:#fff; }

/* ========= Page wrapper ========= */
.content-wrap { margin-top: 96px; max-width: 1200px; margin-left:auto; margin-right:auto; padding:20px; }

/* ========= Hero ========= */
.hero { 
  background: linear-gradient(135deg, #FEC20F 0%, #0082CA 100%);
  color:#fff; border-radius:8px; padding:64px 20px; text-align:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.hero h2 { font-size:2rem; margin-bottom:8px; }
.lead { font-size:1.05rem; color: rgba(255,255,255,0.95); margin-bottom:18px; }
.hero-cta .btn { margin:0 8px; }

/* ========= About / Services ========= */
.page-intro { padding:16px 6px 8px 6px; text-align:left; }
.page-intro h2 { margin-bottom:6px; color:#0082CA; }

.about-grid { display:grid; grid-template-columns: 2fr 1fr; gap:18px; padding:18px 0; }
.about-badge { width:100%; max-width:220px; display:block; margin-top:6px; }

.why { padding:36px 6px; text-align:center; }
.why h3 { margin-bottom:16px; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:16px; }
.why-card { background:#fff; padding:18px; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,0.04); text-align:left; }
.why-card h4 { color:#0082CA; margin-bottom:8px; }

/* Services preview */
.services-preview { padding:28px 6px; background: #f9f9f9; border-radius:8px; margin-top:18px; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:14px; }
.service { background:#fff; padding:16px; border-radius:8px; box-shadow:0 6px 12px rgba(0,0,0,0.04); }

/* center helper */
.center { text-align:center; margin-top:18px; }

/* ========= Testimonials ========= */
.testimonials { padding:30px 6px; }
.test-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.test-grid blockquote { background:#fff; padding:16px; border-left:4px solid #FEC20F; border-radius:6px; }
.test-grid cite { display:block; margin-top:10px; font-size:0.9rem; color:#666; }

/* ========= Contact ========= */
.contact-cta { background:#0082CA; color:#fff; padding:32px; border-radius:8px; margin-top:18px; text-align:center; }
.contact-cta p { margin-bottom:12px; }

.contact-form { background:#fff; padding:18px; border-radius:8px; box-shadow:0 6px 12px rgba(0,0,0,0.04); margin:auto; max-width:500px; }
.contact-form label { display:block; margin-top:10px; font-weight:600; font-size:0.95rem; }
.contact-form input, .contact-form textarea, .contact-form select {
  width:100%; padding:10px; margin-top:6px; border:1px solid #ddd; border-radius:6px; font-size:1rem;
}
.contact-form button { margin-top:12px; width:48%; }

/* ========= Footer ========= */
.site-footer { margin-top:28px; padding:18px 20px; background:#333; color:#fff; border-radius:6px; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.footer-logo { height:36px; }

/* ========= Responsive ========= */
@media (max-width:960px) {
  .about-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .test-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .content-wrap { padding:12px; margin-top:110px; }
  .header-inner { padding:10px 12px; flex-wrap:wrap; }
  .main-nav ul { flex-wrap:wrap; gap:12px; justify-content:center; }
}