
:root {
  --blue: #1C2EA4;
  --accent: #1E53D9;
  --gray: #9A9A9A;
  --bg: #EFF1EE;
  --text: #000000;
  --surface: #ffffff;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --shadow-soft: 0 3px 12px rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: "Segoe UI", Inter, system-ui, Arial, sans-serif; background: var(--bg); color: var(--text); line-height:1.6; }
.container { width: min(1160px, 92%); margin: 0 auto; }

/* Header */
header { position: sticky; top:0; z-index:1000; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom:1px solid #e9e9e9; }
.navbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand img { height:64px; width:auto; border-radius:8px; }
.brand span { font-weight:900; color: var(--blue); letter-spacing:.2px; font-size: 1.1rem; }
.nav-links { list-style:none; display:flex; gap:.6rem; padding:0; margin:0; }
.nav-links a { text-decoration:none; color:#111; font-weight:700; padding:.5rem .8rem; border-radius: 10px; }
.nav-links a:hover { background:#f1f4ff; color: var(--blue); }
.menu-toggle { display:none; border:1px solid #e1e1e1; padding:.45rem .6rem; border-radius: 10px; background:#fff; }

/* Hero */
.hero { position:relative; display:flex; align-items:center; min-height:58vh; background-color:#0E1633; background-image: url('assets/img/hero.png'); background-position:center; background-repeat:no-repeat; background-size:contain; color:#fff; }
.hero::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,0.0); }
.hero .inner { position:relative; z-index:1; padding:5rem 0; }
.hero h1 { margin:0 0 .6rem; font-size: clamp(2.2rem, 4vw, 3rem); font-weight:900; }
.hero p { margin:0 0 1rem; max-width: 820px; font-size:1.05rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:none; cursor:pointer; font-weight:800; text-decoration:none; padding:.9rem 1.1rem; border-radius:12px; box-shadow: var(--shadow-soft); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn.primary { background:#fff; color: var(--blue); }
.btn.primary:hover { transform:translateY(-1px); box-shadow: var(--shadow); }
.btn.solid { background: var(--blue); color:#fff; }
.btn.solid:hover { background: var(--accent); transform:translateY(-1px); }

.section { padding:3rem 0; }
.section h2 { margin:0 0 1rem; color: var(--blue); font-size:1.9rem; }
.subtle { color: var(--gray); }

.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }
.card { background: var(--surface); border:1px solid #eeeeee; border-radius: var(--radius); padding:1.1rem; box-shadow: var(--shadow-soft); }
.card h3 { margin:.2rem 0 .4rem; }

/* Stars */
.stars { display:inline-flex; gap:2px; vertical-align: middle; }
.star { width:18px; height:18px; color:#f5b301; display:inline-block; }

/* Testimonials */
.testi { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; }
.testi .item { background:#fff; border:1px solid #edf0ff; border-top:4px solid var(--blue); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow-soft); }
.testi header { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.testi img { width:44px; height:44px; border-radius:999px; border:1px solid #e6e6e6; }

/* Gallery */
.gallery { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:.8rem; }
.gallery img { width:100%; height:210px; object-fit:cover; border-radius:12px; border:1px solid #ececec; background:#fafafa; }

/* Embeds */
.map-embed { position:relative; width:100%; padding-top:56.25%; border-radius: var(--radius); overflow:hidden; border:1px solid #ececec; background:#fff; }
.map-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Footer */
footer { background:#0e1633; color:#e2e8ff; padding:2rem 0; margin-top:3rem; }
footer a { color:#fff; text-decoration:none; }
footer h4 { margin:.2rem 0 .8rem; color:#fff; }
.social { display:flex; align-items:center; gap:.4rem; }
.social img { width:18px; height:18px; display:inline-block; }

/* FAB */
.fab { position:fixed; right:16px; bottom:16px; z-index:1200; background: var(--blue); color:#fff; text-decoration:none; border-radius:999px; padding:.95rem 1.15rem; font-weight:900; box-shadow:0 12px 24px rgba(28,46,164,.35); }
.fab:hover { background: var(--accent); }

/* Animations */
.fade-section { opacity:0; transform: translateY(20px); transition: opacity 700ms ease-out, transform 700ms ease-out; }
.fade-section.visible { opacity:1; transform: translateY(0); }

/* Responsive */
@media (max-width: 860px) {
  .nav-links { display:none; position:absolute; right:1rem; top:82px; background:#fff; border:1px solid #eaeaea; border-radius: 12px; padding:.6rem; flex-direction:column; gap:.2rem; }
  .nav-links.open { display:flex; }
  .menu-toggle { display:inline-flex; }
}

.about-owner-img { width:100%; max-height: 520px; object-fit: contain; background:#fff; border:1px solid #ececec; border-radius:12px; }

.hero-logo{
  display:block;
  margin: 0 auto 1.2rem;
  width: min(92%, 560px);
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.45));
}
@media (max-width: 520px){
  .hero-logo{ width: min(92%, 420px); }
}

/* Services - fluent cards with icon and accent */
.service-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; }
.service-card{ background:#fff; border:1px solid #edf0ff; border-top:4px solid var(--blue); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow-soft); display:grid; grid-template-columns: 48px 1fr; gap:.8rem; align-items:flex-start; }
.service-card .icon{ width:48px; height:48px; border-radius:12px; background:#eef2ff; display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:24px; }
.service-card h3{ margin:.1rem 0 .2rem; }
.service-card p{ margin:0 0 .4rem; }
.service-card .meta{ font-size:.9rem; color:var(--gray); display:flex; align-items:center; gap:.4rem; }
