/* ============================================================
   Mumbai Force — design system (2026-07-30)
   Loads AFTER the template's style.css and mf-extra.css.
   Palette is anchored on the logo: navy blue primary, logo-red
   as a small decorative accent, amber for action buttons,
   green reserved for WhatsApp.
   ============================================================ */

:root{
  --mf-navy-900:#0B1F3A;   /* footer, topbar, headings        */
  --mf-navy-800:#122B4F;
  --mf-blue-700:#1E3A8A;   /* brand primary (logo blue)       */
  --mf-blue-600:#2547A8;
  --mf-blue-050:#EEF3FB;
  --mf-amber-500:#F5A623;  /* CTA fill                        */
  --mf-amber-600:#E08E00;
  --mf-red-600:#C0272D;    /* logo red — decorative only      */
  --mf-green:#25D366;      /* WhatsApp only                   */
  --mf-ink:#0F172A;
  --mf-muted:#475569;
  --mf-bg-alt:#F4F7FB;
  --mf-line:#E3E9F2;
  --mf-radius:12px;
  --mf-radius-sm:10px;
  --mf-shadow-sm:0 1px 2px rgba(11,31,58,.06),0 1px 6px rgba(11,31,58,.05);
  --mf-shadow-md:0 6px 20px rgba(11,31,58,.10);
  --mf-font-head:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mf-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- base typography ---------- */
body{font-family:var(--mf-font-body);color:var(--mf-ink);line-height:1.65}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--mf-font-head);font-weight:800;color:var(--mf-navy-900);line-height:1.22}
.font-italic{font-style:normal!important}          /* retire template italics */
.text-capitalize{text-transform:none!important}
h1,.h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.7rem)}
h2,.h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.1rem)}
h3,.h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.55rem)}
.display-5{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.8rem)!important;font-weight:800}
p{color:var(--mf-muted)}
a{color:var(--mf-blue-700)}
a:hover{color:var(--mf-blue-600)}

/* ---------- recolor template utility classes ---------- */
.text-primary{color:var(--mf-blue-700)!important}
.bg-primary{background-color:var(--mf-blue-700)!important}
.btn-primary{
  background:var(--mf-amber-500)!important;border:none!important;color:var(--mf-navy-900)!important;
  font-family:var(--mf-font-head);font-weight:800;border-radius:var(--mf-radius-sm);
  padding:.6rem 1.35rem;box-shadow:var(--mf-shadow-sm);transition:transform .15s,box-shadow .15s}
.btn-primary:hover,.btn-primary:focus{background:var(--mf-amber-600)!important;color:#fff!important;
  transform:translateY(-1px);box-shadow:var(--mf-shadow-md)}
.btn-secondary{
  background:var(--mf-navy-900)!important;border:none!important;color:#fff!important;
  font-family:var(--mf-font-head);font-weight:700;border-radius:var(--mf-radius-sm);
  padding:.6rem 1.35rem;transition:transform .15s,box-shadow .15s}
.btn-secondary:hover{background:var(--mf-blue-700)!important;transform:translateY(-1px)}
.btn-lg{padding:.75rem 1.6rem!important;font-size:1.05rem!important}
.btn:focus,a:focus-visible{outline:3px solid rgba(37,71,168,.35);outline-offset:2px;box-shadow:none!important}
.bg-secondary{background-color:var(--mf-navy-900)!important}

/* ---------- topbar ---------- */
.mf-topbar .row.bg-secondary{background:var(--mf-navy-900)!important}
.mf-topbar .row.bg-secondary span{font-size:.85rem;letter-spacing:.02em}
.mf-contact-strip{border-bottom:1px solid var(--mf-line);background:#fff}
.mf-contact-strip .mf-strip-item{font-size:.9rem;color:var(--mf-muted)}
.mf-contact-strip a.mf-strip-item{color:var(--mf-navy-900);font-weight:600}
.mf-contact-strip a.mf-strip-item:hover{color:var(--mf-blue-700)}

/* ---------- navbar (white, sticky) ---------- */
.mf-navbar{background:#fff!important;box-shadow:var(--mf-shadow-sm)}
.mf-navbar .nav-link{
  font-family:var(--mf-font-head);font-weight:700;font-size:.98rem;color:var(--mf-ink)!important;
  padding:.65rem 1rem!important;border-bottom:3px solid transparent}
.mf-navbar .nav-link:hover{color:var(--mf-blue-700)!important}
.mf-navbar .nav-link.active{color:var(--mf-blue-700)!important;border-bottom-color:var(--mf-amber-500)}
.mf-navbar .navbar-toggler{border:1px solid var(--mf-line);border-radius:8px;padding:.45rem .6rem}
.mf-navbar .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%230B1F3A' stroke-width='2.4' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
.mf-sticky-wrap{position:sticky;top:0;z-index:1020}

/* ---------- hero ---------- */
.mf-hero{background:linear-gradient(180deg,#FFFFFF 0%,var(--mf-blue-050) 100%);
  padding:2.6rem 1rem 2.2rem;text-align:center}
.mf-hero .mf-eyebrow{
  display:inline-block;font-family:var(--mf-font-head);font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mf-blue-700);
  background:#fff;border:1px solid var(--mf-line);border-radius:999px;padding:.35rem .9rem;margin-bottom:1rem}
.mf-hero h1{margin:0 auto;max-width:820px}
.mf-hero h1 .text-primary{color:var(--mf-blue-700)!important}
.mf-hero .mf-sub{max-width:640px;margin:.8rem auto 0;font-size:1.06rem}
.mf-hero-cta{margin-top:1.25rem}
.mf-hero-cta .btn{margin:.3rem .35rem;font-size:1.02rem;padding:.7rem 1.5rem}
.mf-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.35rem}
.mf-trust span{
  background:#fff;border:1px solid var(--mf-line);border-radius:999px;
  padding:.4rem .95rem;font-size:.86rem;font-weight:600;color:var(--mf-navy-900)}
.mf-trust span i{color:var(--mf-amber-600);margin-right:.4rem}

/* ---------- service-line cards (replace hero tabs) ---------- */
.mf-lines{max-width:1080px;margin:2rem auto 0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));text-align:left}
.mf-line-card{background:#fff;border:1px solid var(--mf-line);border-radius:var(--mf-radius);
  overflow:hidden;box-shadow:var(--mf-shadow-sm);transition:transform .18s,box-shadow .18s}
.mf-line-card:hover{transform:translateY(-3px);box-shadow:var(--mf-shadow-md)}
.mf-line-card img{width:100%;height:230px;object-fit:cover;display:block}
.mf-line-card .mf-line-body{padding:1.1rem 1.25rem 1.3rem}
.mf-line-card h3{margin:0 0 .3rem;font-size:1.18rem}
.mf-line-card p{margin:0;font-size:.95rem}

/* ---------- section rhythm + headers ---------- */
.mf-section-head{text-align:center;margin-bottom:2.2rem}
.mf-section-head .mf-kicker{
  font-family:var(--mf-font-head);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mf-blue-700);display:block;margin-bottom:.35rem}
.mf-section-head h2{position:relative;display:inline-block;margin:0;padding-bottom:.55rem}
.mf-section-head h2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:56px;height:4px;border-radius:2px;background:var(--mf-red-600)}

/* ---------- cards (services grid & generic) ---------- */
.card{border:1px solid var(--mf-line)!important;border-radius:var(--mf-radius)!important;
  box-shadow:var(--mf-shadow-sm);transition:transform .18s,box-shadow .18s;overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:var(--mf-shadow-md)}
.card-img-top{border-radius:var(--mf-radius) var(--mf-radius) 0 0!important;object-fit:cover}
.card .card-body.bg-secondary{background:var(--mf-navy-900)!important;padding:.65rem .9rem!important}
.card .card-body.bg-secondary .card-title{font-size:1rem;font-weight:700}
.card .card-footer{background:#fff!important;border-top:1px solid var(--mf-line)!important;
  color:var(--mf-muted);font-size:.95rem;line-height:1.6}
.card h3[class*="flaticon"]{border-radius:10px}

/* feature icon squares */
h3[class*="flaticon"]{border-radius:10px;background:var(--mf-blue-700)!important}

/* ---------- forms ---------- */
.form-control{border:1.5px solid var(--mf-line);border-radius:var(--mf-radius-sm);
  padding:.7rem .9rem;font-family:var(--mf-font-body);color:var(--mf-ink)}
.form-control:focus{border-color:var(--mf-blue-600);box-shadow:0 0 0 3px rgba(37,71,168,.15)}
.contact-form.bg-white{border:1px solid var(--mf-line);border-radius:var(--mf-radius);
  box-shadow:var(--mf-shadow-sm);padding:1.4rem!important;max-width:860px;margin:0 auto}

/* ---------- footer ---------- */
.container-fluid.bg-secondary.text-white{background:var(--mf-navy-900)!important}
.container-fluid.bg-secondary.text-white h2,
.container-fluid.bg-secondary.text-white h5{color:#fff}
.container-fluid.bg-secondary.text-white h5.text-primary{color:var(--mf-amber-500)!important}
.container-fluid.bg-secondary.text-white p{color:#B9C4D6}
.container-fluid.bg-secondary.text-white a.text-white{color:#DCE4F0!important}
.container-fluid.bg-secondary.text-white a.text-white:hover{color:var(--mf-amber-500)!important;text-decoration:none}

/* ---------- sticky mobile bar (3-up: Call / WhatsApp / Enquire) ---------- */
.mf-sticky-bar{box-shadow:0 -4px 16px rgba(11,31,58,.18)}
.mf-sticky-bar a{
  font-family:var(--mf-font-head);font-weight:800;letter-spacing:0;
  font-size:.94rem;white-space:nowrap;padding:.8rem .35rem}
.mf-sticky-bar a i{margin-right:.3rem}
.mf-sticky-call{background:var(--mf-amber-500);color:var(--mf-navy-900)}
.mf-sticky-call:hover{background:var(--mf-amber-600);color:#fff}
.mf-sticky-wa{background:var(--mf-green);color:#fff;flex:1;text-align:center}
.mf-sticky-wa:hover{background:#1DA851;color:#fff;text-decoration:none}
.mf-sticky-enquire{background:var(--mf-navy-900)}
.mf-sticky-enquire:hover{background:var(--mf-blue-700)}
@media (max-width:359px){.mf-sticky-bar a{font-size:.84rem;padding:.75rem .2rem}}

/* WhatsApp button (in-page CTA) */
.mf-wa-btn{
  background:var(--mf-green)!important;color:#fff!important;border:none!important;
  font-family:var(--mf-font-head);font-weight:800;border-radius:var(--mf-radius-sm);
  padding:.6rem 1.35rem;box-shadow:var(--mf-shadow-sm);transition:transform .15s,box-shadow .15s}
.mf-wa-btn:hover,.mf-wa-btn:focus{background:#1DA851!important;color:#fff!important;
  transform:translateY(-1px);box-shadow:var(--mf-shadow-md)}
.mf-wa-btn.btn-lg{padding:.75rem 1.6rem!important;font-size:1.05rem!important}

/* ---------- accessibility ---------- */
/* Skip link: clip-hidden (not off-canvas — avoids RTL/scroll side effects),
   revealed on keyboard focus. */
.mf-skip{
  position:absolute;top:0;left:0;z-index:2000;
  width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
  background:var(--mf-navy-900);color:#fff;padding:.75rem 1.25rem;
  font-family:var(--mf-font-head);font-weight:700;border-radius:0 0 8px 0}
.mf-skip:focus,.mf-skip:focus-visible{
  width:auto;height:auto;overflow:visible;clip:auto;
  color:#fff;text-decoration:none;outline:3px solid var(--mf-amber-500);outline-offset:2px}
.mf-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* icon chips (were empty <h3> tags — now decorative spans) */
.mf-icon{
  width:45px;height:45px;border-radius:10px;
  background:var(--mf-blue-700)!important;color:#fff;
  display:flex;flex-shrink:0;align-items:center;justify-content:center;
  font-size:1.25rem;line-height:1;margin:0 .75rem 0 0}

/* Headings promoted for correct document outline keep their original
   visual weight — semantics changed, design did not. */
.mf-footer-head{font-size:1.15rem!important;margin-bottom:1.25rem}
.mf-feature-title{font-size:1rem!important;font-weight:700}
.mf-badge-title{font-size:1.15rem!important}
.card-title{font-size:1rem!important;font-weight:700}
.mf-kicker.d-block{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mf-blue-700);font-family:var(--mf-font-head);font-weight:700}

/* 404 popular-page cards (no image) */
.mf-line-card .mf-line-body h3 a{color:var(--mf-navy-900);text-decoration:none}
.mf-line-card .mf-line-body h3 a:hover{color:var(--mf-blue-700)}

/* ---------- misc polish ---------- */
.img-thumbnail{border:1px solid var(--mf-line);border-radius:var(--mf-radius);padding:.35rem}
::selection{background:var(--mf-amber-500);color:var(--mf-navy-900)}
@media (max-width:575px){
  .mf-hero{padding:2rem .9rem 1.8rem}
  .mf-line-card img{height:190px}
}