/* Basic reset & container */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #222; background:#fff; }
.container { max-width:1100px; margin:0 auto; padding: 0 18px; }

/* Header */
.site-header { background: #1e3a8a; color: #fff; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:96px; height:auto; display:block; object-fit:contain; background:transparent; border-radius:6px; }
.brand-text h1 { margin:0; font-size:1.125rem; letter-spacing:1px; }
.brand-text .tag { margin:0; font-size:0.85rem; opacity:0.9; }

/* Main nav */
.main-nav a { color:#fff; text-decoration:none; margin-left:18px; font-weight:600; }
.main-nav a:hover { opacity:0.9; }

/* Hero */
.hero { height:70vh; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; position:relative; }
.hero-overlay { background: rgba(0,0,0,0.45); padding:28px; border-radius:8px; text-align:center; color:#fff; max-width:900px; }
.hero-overlay h2 { font-size:2.4rem; margin:0 0 10px; }
.hero-overlay .sub { margin:0 0 18px; opacity:0.95; }

/* Buttons */
.btn { display:inline-block; padding:12px 20px; border-radius:8px; text-decoration:none; font-weight:700; }
.btn.primary { background:#ffcc00; color:#111; }
.btn.primary:hover { opacity:0.95; }

/* Sections */
.section { padding:48px 0; }
.section-title { font-size:1.6rem; text-align:center; margin-bottom:18px; }

/* Services grid */
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; align-items:start; }
.service-card { background:#fff; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06); overflow:hidden; text-align:center; }
.service-card img { width:100%; height:150px; object-fit:cover; display:block; }
.service-card h3 { padding:12px; margin:0; font-size:1rem; }

/* Icon placeholder style (when using emoji) */
.icon-placeholder { font-size:40px; padding:28px 0; }

/* About section */
.about p { max-width:900px; margin:0 auto; text-align:center; color:#444; }

/* Rich background sections */
.rich-bg { height:50vh; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; position:relative; }
.rich-overlay { background:rgba(0,0,0,0.45); padding:20px; border-radius:8px; color:#fff; text-align:center; max-width:900px; }

/* Contact */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items:start; }
.contact-info p { margin:8px 0; color:#333; font-weight:600; }
.contact-form form input, .contact-form form textarea { width:100%; padding:12px; border-radius:6px; border:1px solid #ddd; margin:8px 0; }
.contact-form form button { margin-top:8px; }

/* Footer */
.site-footer { background:#1e3a8a; color:#fff; padding:18px 0; }
.footer-inner { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.social-icons { display:flex; align-items:center; gap:8px; }
.social-icons img.icon { width:28px; height:28px; filter: invert(100%); transition: transform .25s, filter .25s; }
.social-icons img.icon:hover { transform: scale(1.2); filter: invert(70%) sepia(98%) saturate(748%) hue-rotate(3deg) brightness(104%) contrast(106%); }

/* Responsive */
@media (max-width:900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction:column; text-align:center; }
  .hero-overlay h2 { font-size:1.6rem; }
}