/* ==========================================================================
   RUCHI ENTERPRISES — Design System
   Built on Bootstrap 5.3 (loaded via CDN in includes/header.php / footer.php).
   Bootstrap supplies the grid (row/col), buttons, forms, accordion, alerts
   and responsive utilities used throughout the markup; this file layers the
   brand's navy / green / gold visual identity on top of those components
   and adds the handful of bespoke pieces (mega menu, hero, cards, chips,
   reveal animation) that Bootstrap doesn't provide out of the box.

   Brand colors extracted from the company card:
   Navy #0a1f44 / #0d2b5c, Green #6fae2e / #8cc63f, Gold #d98a1f,
   Teal #1f8a8a, plus supporting accent colors used across the
   "What We Offer" icon set (blue, purple, pink).
   ========================================================================== */

:root {
  /* Brand core */
  --navy-950: #061330;
  --navy-900: #0a1f44;
  --navy-800: #0d2b5c;
  --navy-700: #123a75;
  --navy-100: #e7ecf5;

  --green-700: #4f8a22;
  --green-600: #6fae2e;
  --green-500: #8cc63f;
  --green-100: #eaf6dd;

  --gold-600: #b96f14;
  --gold-500: #d98a1f;
  --gold-400: #f0a83a;
  --gold-100: #fbead2;

  --teal-600: #106b6b;
  --teal-500: #1f8a8a;
  --teal-100: #ddf3f2;

  --blue-500: #2b7de1;
  --blue-100: #e2eefc;

  --purple-500: #7b4fc9;
  --purple-100: #eee6fb;

  --pink-500: #d9457a;
  --pink-100: #fce3ec;

  /* Neutrals */
  --ink: #16213b;
  --ink-soft: #4a5670;
  --grey-50: #f6f8fb;
  --grey-100: #eef1f6;
  --grey-200: #e2e6ee;
  --white: #ffffff;

  /* Semantics */
  --brand-primary: var(--navy-900);
  --brand-secondary: var(--green-600);
  --brand-accent: var(--gold-500);

  /* Layout */
  --container-w: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(10, 31, 68, 0.06);
  --shadow-md: 0 10px 30px rgba(10, 31, 68, 0.10);
  --shadow-lg: 0 20px 50px rgba(10, 31, 68, 0.16);
  --shadow-nav: 0 6px 24px rgba(10, 31, 68, 0.08);

  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --header-h: 84px;
  --topbar-h: 40px;
}

/* ==========================================================================
   Reset & base
   (Loaded after Bootstrap's reboot, so these rules take the brand fonts/
   colors/line-height beyond Bootstrap's own defaults for these elements.)
   ========================================================================== */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
}
p { margin: 0 0 1em; color: var(--ink-soft); }

/* Bootstrap's own .container is fixed-width per breakpoint (540/720/960px…);
   this keeps the site's single 1200px container + 24px gutter look exactly
   as designed while still using the real Bootstrap .container class. */
.container {
  max-width: var(--container-w);
  padding-right: 24px;
  padding-left: 24px;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy-900); color: #fff;
  padding: 10px 16px; z-index: 9999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

section { position: relative; }

::selection { background: var(--green-500); color: var(--navy-900); }

/* Scrollbar accent (progressive enhancement) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--grey-100); }
::-webkit-scrollbar-thumb { background: var(--navy-800); border-radius: 10px; }

/* ==========================================================================
   Buttons — themed via Bootstrap 5.3's own per-component CSS variables
   (--bs-btn-*) rather than fighting the compiled CDN CSS with overrides.
   ========================================================================== */
.btn {
  --bs-btn-font-family: var(--font-head);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .95rem;
  --bs-btn-padding-y: .8125rem;   /* 13px */
  --bs-btn-padding-x: 1.625rem;   /* 26px */
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-border-width: 2px;
  --bs-btn-disabled-opacity: .55;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn i { font-size: .85em; }
.btn:disabled, .btn.disabled { transform: none !important; box-shadow: none !important; }

.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--navy-900); --bs-btn-border-color: var(--navy-900);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy-800); --bs-btn-hover-border-color: var(--navy-800);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--navy-800); --bs-btn-active-border-color: var(--navy-800);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--navy-900); --bs-btn-disabled-border-color: var(--navy-900);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: var(--green-600); --bs-btn-border-color: var(--green-600);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--green-500); --bs-btn-hover-border-color: var(--green-500);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--green-500); --bs-btn-active-border-color: var(--green-500);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--green-600); --bs-btn-disabled-border-color: var(--green-600);
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
}
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(111,174,46,.35); }

.btn-outline-primary {
  --bs-btn-color: var(--navy-900); --bs-btn-border-color: var(--navy-900); --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy-900); --bs-btn-hover-border-color: var(--navy-900);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--navy-900); --bs-btn-active-border-color: var(--navy-900);
}
.btn-outline-primary:hover { transform: translateY(-2px); }

.btn-outline-light {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.5); --bs-btn-bg: rgba(255,255,255,.08);
  --bs-btn-hover-color: var(--navy-900); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--navy-900); --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff;
}
.btn-outline-light:hover { transform: translateY(-2px); }

.btn-lg { --bs-btn-padding-y: 1rem; --bs-btn-padding-x: 2rem; --bs-btn-font-size: 1.02rem; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.top-bar {
  background: var(--navy-950);
  color: #cdd7ec;
  font-size: .82rem;
}
.top-bar-inner { height: var(--topbar-h); }
.top-bar-info a { color: #dfe6f5; transition: color .2s; }
.top-bar-info a:hover { color: var(--green-500); }
.top-bar-info i { color: var(--green-500); margin-right: 6px; }
.top-bar-badges { color: #9fb0d0; }
.top-bar-badges i { color: var(--gold-400); margin-right: 5px; }
.top-bar-divider { width: 1px; height: 14px; background: rgba(255,255,255,.2); }

/* ==========================================================================
   Header / Navigation
   (Kept as a bespoke component — the hover-driven mega menu and the
   slide-in mobile panel are a custom interaction Bootstrap's navbar
   doesn't model natively, so this piece stays hand-built rather than
   risking a visual/behavioural regression by forcing it into
   navbar-collapse. Every other section of the site below uses Bootstrap's
   grid, buttons, forms and accordion.)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 500;
  /* Solid (not translucent+blurred) background is intentional here:
     backdrop-filter on this ancestor would create a new CSS containing
     block, which breaks the mobile nav panel's fixed positioning below. */
  background: #ffffff;
  box-shadow: var(--shadow-nav);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-icon { height: 52px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 1.28rem; color: var(--navy-900); letter-spacing: .3px; }
.brand-r { color: var(--navy-900); }
.brand-tagline { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-600); font-weight: 600; margin-top: 2px; }
.brand-name-light { color: #fff; }
.brand-tagline-light { color: var(--green-500); }

.main-nav ul { display: flex; align-items: center; gap: 4px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  font-family: var(--font-head);
  font-weight: 600; font-size: .95rem;
  color: var(--navy-900);
  border-radius: var(--radius-pill);
  transition: background .2s, color .2s;
}
.main-nav > ul > li > a i { font-size: .7em; opacity: .7; transition: transform .2s; }
.main-nav > ul > li:hover > a,
.main-nav > ul > li > a.active {
  background: var(--green-100);
  color: var(--green-700);
}
.main-nav > ul > li.has-mega:hover > a i { transform: rotate(180deg); }

.header-actions { flex-shrink: 0; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--grey-200); background: #fff; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 20px; background: var(--navy-900); margin: 0 auto; transition: transform .25s, opacity .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mega menu */
.main-nav > ul > li.has-mega::after {
  /* Invisible hover "bridge" spanning the gap between the nav link and
     the dropdown panel below it. Without this, that empty gap has no
     element in it, so moving the mouse down from the link to the panel
     breaks :hover on the li right before the pointer reaches the menu —
     causing it to flicker shut. This pseudo-element sits exactly in that
     gap (same width/position as .mega-menu) so hover stays continuous.
     It's positioned out of flow, so it doesn't affect the nav's layout. */
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  width: 720px; max-width: 90vw; height: 14px;
}
.mega-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 720px; max-width: 90vw;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  border: 1px solid var(--grey-100);
  display: grid; grid-template-columns: 1.1fr 1.4fr;
  padding: 22px;
  gap: 20px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 50;
}
.main-nav > ul > li.has-mega:hover .mega-menu,
.main-nav > ul > li.has-mega:focus-within .mega-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega-menu-label {
  display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 10px;
}
.mega-menu-pillars { border-right: 1px solid var(--grey-100); padding-right: 20px; }
.mega-menu-item.pillar {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px; border-radius: var(--radius-sm);
  margin-bottom: 4px;
  transition: background .2s;
}
.mega-menu-item.pillar:hover { background: var(--grey-50); }
.mega-menu-item.pillar i {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;
}
.mega-menu-item.pillar strong { display: block; font-family: var(--font-head); font-size: .9rem; color: var(--navy-900); }
.mega-menu-item.pillar small { display: block; font-size: .76rem; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }

.mega-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega-menu-item.small {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: .84rem; color: var(--ink-soft); font-weight: 500;
  transition: background .2s, color .2s;
}
.mega-menu-item.small i { color: var(--green-600); width: 16px; text-align: center; }
.mega-menu-item.small:hover { background: var(--grey-50); color: var(--navy-900); }
.mega-menu-viewall {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700;
  font-family: var(--font-head); font-size: .85rem; color: var(--green-700);
}
.mega-menu-viewall:hover { text-decoration: underline; }

/* Color badges reused everywhere (icons, tags) */
.color-navy .service-card-icon, .mega-menu-item.pillar.color-navy i, .icon-badge.navy { background: var(--navy-900); }
.color-green .service-card-icon, .mega-menu-item.pillar.color-green i, .icon-badge.green { background: var(--green-600); }
.color-teal .service-card-icon, .mega-menu-item.pillar.color-teal i, .icon-badge.teal { background: var(--teal-500); }
.color-gold .service-card-icon, .mega-menu-item.pillar.color-gold i, .icon-badge.gold { background: var(--gold-500); }
.color-blue .service-card-icon, .icon-badge.blue { background: var(--blue-500); }
.color-purple .service-card-icon, .icon-badge.purple { background: var(--purple-500); }
.color-pink .service-card-icon, .icon-badge.pink { background: var(--pink-500); }

/* ==========================================================================
   Hero (Home) — inner layout now runs on Bootstrap's .row/.col grid
   (see index.php); this keeps only the decorative, non-grid pieces.
   ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
  color: #fff;
  overflow: hidden;
  padding: 96px 0 120px;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(140,198,63,.25), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(217,138,31,.18), transparent 40%);
  pointer-events: none;
}
.hero-swoosh {
  position: absolute; right: -10%; top: -20%; width: 70%; height: 140%;
  border: 90px solid rgba(140,198,63,.06);
  border-radius: 50%;
  transform: rotate(-15deg);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(140,198,63,.15); border: 1px solid rgba(140,198,63,.4);
  color: var(--green-500); font-weight: 600; font-size: .82rem;
  padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 22px;
}
.hero h1 { color: #fff; font-size: 3rem; margin-bottom: .4em; letter-spacing: -.5px; }
.hero h1 span { color: var(--green-500); }
.hero-sub { color: #c3cde3; font-size: 1.12rem; max-width: 560px; margin-bottom: 34px; }
.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-family: var(--font-head); font-size: 1.7rem; color: #fff; }
.hero-stats div span { font-size: .82rem; color: #9fb0d0; }

.hero-visual { position: relative; }
.hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  padding: 26px;
  display: grid; gap: 14px;
}
.hero-pillar-mini {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: transform .25s, background .25s;
}
.hero-pillar-mini:hover { transform: translateX(6px); background: rgba(255,255,255,.09); }
.hero-pillar-mini i { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; flex-shrink: 0; }
.hero-pillar-mini strong { display: block; color: #fff; font-family: var(--font-head); font-size: .92rem; }
.hero-pillar-mini span { color: #a9b6d4; font-size: .78rem; }

/* ==========================================================================
   Section utilities
   ========================================================================== */
.section { padding: 92px 0; }
.section-alt { background: var(--grey-50); }
.section-head { max-width: 680px; margin: 0 auto 54px; text-align: center; }
.section-head.align-left { margin-left: 0; text-align: left; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700); background: var(--green-100);
  padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); }
.eyebrow-light { background: rgba(255,255,255,.12); color: var(--green-400, var(--green-500)); }
.section-head h2 { font-size: 2.2rem; margin-bottom: .4em; }
.section-head p { font-size: 1.05rem; }

/* ==========================================================================
   4 Pillars showcase (grid handled by Bootstrap .row/.col in markup)
   ========================================================================== */
.pillar-card {
  display: block;
  background: #fff; border-radius: var(--radius-lg); padding: 34px 26px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--grey-100);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative; overflow: hidden;
  height: 100%;
}
.pillar-card::after {
  content: ''; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px;
  border-radius: 50%; background: var(--pillar-tint, var(--green-100)); opacity: .5; transition: transform .4s;
}
.pillar-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pillar-card:hover::after { transform: scale(1.3); }
.pillar-card.tint-navy { --pillar-tint: var(--navy-100); }
.pillar-card.tint-green { --pillar-tint: var(--green-100); }
.pillar-card.tint-teal { --pillar-tint: var(--teal-100); }
.pillar-card.tint-gold { --pillar-tint: var(--gold-100); }
.pillar-card-num { position: absolute; top: 20px; right: 24px; font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--grey-100); z-index: 0; }
.pillar-card-icon {
  width: 62px; height: 62px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem; margin-bottom: 20px; position: relative; z-index: 1;
}
.pillar-card h3 { font-size: 1.18rem; margin-bottom: 10px; position: relative; z-index: 1; }
.pillar-card p { font-size: .92rem; margin-bottom: 18px; position: relative; z-index: 1; }
.pillar-card-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .86rem; color: var(--navy-900); position: relative; z-index: 1; }
.pillar-card-link i { transition: transform .25s; font-size: .8em; }
.pillar-card:hover .pillar-card-link i { transform: translateX(5px); }

/* ==========================================================================
   Service grid / cards (grid handled by Bootstrap .row/.col in markup)
   ========================================================================== */
.service-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--grey-100); border-radius: var(--radius-md);
  padding: 28px; position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
  height: 100%;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.pillar-tag {
  position: absolute; top: 18px; right: 18px; background: var(--navy-100); color: var(--navy-800);
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.service-card-icon {
  width: 54px; height: 54px; border-radius: 14px; color: #fff; font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.service-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.service-card p { font-size: .89rem; margin-bottom: 16px; flex-grow: 1; }
.service-card-link { font-family: var(--font-head); font-weight: 700; font-size: .84rem; color: var(--green-700); display: inline-flex; align-items: center; gap: 6px; }
.service-card-link i { font-size: .8em; transition: transform .25s; }
.service-card:hover .service-card-link i { transform: translateX(5px); }

/* ==========================================================================
   Why choose us / feature list (grid handled by Bootstrap .row/.col)
   ========================================================================== */
.feature-item { text-align: center; padding: 10px; height: 100%; }
.feature-item .icon-badge { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; margin: 0 auto 18px; }
.feature-item h4 { font-size: 1.02rem; margin-bottom: 8px; }
.feature-item p { font-size: .88rem; }

.about-visual { position: relative; }
.about-visual-card {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800));
  border-radius: var(--radius-lg); padding: 40px; color: #fff; position: relative; overflow: hidden;
}
.about-visual-card::before { content:''; position:absolute; width:220px; height:220px; border-radius:50%; background: rgba(140,198,63,.18); top:-60px; right:-60px; }
.about-stats-grid { position: relative; z-index: 1; }
.about-stats-grid div strong { display:block; font-family: var(--font-head); font-size: 2.1rem; color: var(--green-500); }
.about-stats-grid div span { font-size: .84rem; color: #c3cde3; }

.checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: .96rem; color: var(--ink-soft); list-style: none; }
.checklist li i { color: var(--green-600); margin-top: 4px; flex-shrink: 0; }

/* ==========================================================================
   Testimonial / quote strip
   ========================================================================== */
.quote-strip {
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
  color: #fff; padding: 70px 0; text-align: center; position: relative; overflow: hidden;
}
.quote-strip i.fa-quote-left { font-size: 2.4rem; color: var(--green-500); opacity: .6; margin-bottom: 18px; }
.quote-strip blockquote { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; max-width: 780px; margin: 0 auto 18px; color: #fff; }
.quote-strip cite { color: var(--green-500); font-style: normal; font-weight: 600; }

/* ==========================================================================
   Partners strip (layout via Bootstrap flex utilities in markup)
   ========================================================================== */
.partners-strip { padding: 60px 0; }
.partner-chip {
  display: flex; align-items: center; justify-content: center;
  min-width: 130px; height: 68px; padding: 0 22px;
  background: #fff; border: 1px solid var(--grey-200); border-radius: var(--radius-md);
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--navy-900);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.partner-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

/* ==========================================================================
   CTA banner (inner layout via Bootstrap flex utilities in markup)
   ========================================================================== */
.cta-banner {
  background: linear-gradient(120deg, var(--green-700), var(--green-600) 55%, var(--gold-500));
  padding: 60px 0; color: #fff;
}
.cta-banner-text h2 { color: #fff; font-size: 1.8rem; margin-bottom: 8px; }
.cta-banner-text p { color: rgba(255,255,255,.9); margin-bottom: 0; max-width: 520px; }
.cta-banner .btn-success {
  --bs-btn-color: var(--green-700); --bs-btn-bg: #fff; --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy-950); --bs-btn-hover-border-color: var(--navy-950);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--navy-950); --bs-btn-active-border-color: var(--navy-950);
  background: #fff;
}

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(125deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800));
  color: #fff; padding: 76px 0 60px; text-align: center;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 10%, rgba(140,198,63,.22), transparent 45%), radial-gradient(circle at 15% 100%, rgba(217,138,31,.16), transparent 40%);
}
.page-hero-inner { position: relative; }
.page-hero-icon {
  width: 74px; height: 74px; border-radius: 20px; margin: 0 auto 18px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: var(--green-500);
}
.page-hero h1 { color: #fff; font-size: 2.5rem; margin-bottom: .35em; }
.page-hero-sub { color: #c3cde3; max-width: 640px; margin: 0 auto 22px; font-size: 1.05rem; }
.breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .84rem; color: #9fb0d0; }
.breadcrumb a { color: #cdd7ec; }
.breadcrumb a:hover { color: var(--green-500); }
.breadcrumb i { font-size: .65rem; }
.breadcrumb span { color: var(--green-500); font-weight: 600; }

/* ==========================================================================
   Service detail page layout (2-col split handled by Bootstrap .row/.col)
   ========================================================================== */
.detail-overview .lead { font-size: 1.1rem; color: var(--ink); }
.offer-list li {
  list-style: none; display: flex; gap: 14px; align-items: flex-start;
  background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: var(--radius-md);
  padding: 16px 18px;
}
.offer-list li i { color: #fff; background: var(--green-600); width: 30px; height: 30px; border-radius: 9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size: .82rem; margin-top: 2px; }
.offer-list li strong { display: block; color: var(--navy-900); font-family: var(--font-head); font-size: .96rem; margin-bottom: 2px; }
.offer-list li span { font-size: .87rem; color: var(--ink-soft); }

.side-card {
  background: #fff; border: 1px solid var(--grey-100); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 24px);
}
.side-card h4 { font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.side-card h4 i { color: var(--green-600); }
.side-card ul { display: grid; gap: 11px; margin-bottom: 20px; }
.side-card ul li { font-size: .9rem; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.side-card ul li i { color: var(--green-600); margin-top: 4px; }
.side-card .btn { width: 100%; margin-top: 4px; }
.side-card-divider { height: 1px; background: var(--grey-100); margin: 20px 0; }
.side-contact { display: flex; align-items: center; gap: 12px; font-size: .9rem; margin-bottom: 10px; }
.side-contact i { width: 34px; height: 34px; border-radius: 10px; background: var(--navy-100); color: var(--navy-900); display: flex; align-items: center; justify-content: center; }

/* Process steps (grid handled by Bootstrap .row/.col; connector dashes
   are positioned relative to each .process-step and line up with
   Bootstrap's col-lg-3 gutter, shown from the lg breakpoint up). */
.process-step { position: relative; height: 100%; padding: 30px 22px 22px; background: #fff; border: 1px solid var(--grey-100); border-radius: var(--radius-md); }
.process-step-num {
  width: 42px; height: 42px; border-radius: 12px; background: var(--navy-900); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800;
  margin-bottom: 16px;
}
.process-step h4 { font-size: .98rem; margin-bottom: 8px; }
.process-step p { font-size: .86rem; margin-bottom: 0; }
.process-step-col:not(:last-child) .process-step::after {
  content: ''; position: absolute; top: 50px; right: -28px; width: 24px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--grey-200) 0 6px, transparent 6px 10px);
  display: none;
}
@media (min-width: 992px) { .process-step-col:not(:last-child) .process-step::after { display: block; } }

.industry-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: var(--radius-pill);
  font-size: .88rem; font-weight: 600; color: var(--navy-900);
}
.industry-chip i { color: var(--green-600); }

.related-services { padding: 80px 0 96px; background: var(--grey-50); }

/* ==========================================================================
   FAQ — Bootstrap accordion component, restyled to the brand's flat,
   rounded-card look with a rotating plus icon instead of Bootstrap's
   default chevron.
   ========================================================================== */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-list .accordion-item {
  background: #fff; border: 1px solid var(--grey-100); border-radius: var(--radius-md) !important;
  overflow: hidden; margin-bottom: 14px;
}
.faq-list .accordion-item:last-child { margin-bottom: 0; }
.faq-list .accordion-button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem; color: var(--navy-900);
  box-shadow: none;
}
.faq-list .accordion-button:hover,
.faq-list .accordion-button:not(.collapsed),
.faq-list .accordion-button:focus {
  background: none; color: var(--navy-900); box-shadow: none;
}
.faq-list .accordion-button::after { display: none; } /* replaced with our own <i class="fa-solid fa-plus"> */
.faq-list .accordion-button i.fa-plus { transition: transform .25s; color: var(--green-600); flex-shrink: 0; }
.faq-list .accordion-button:not(.collapsed) i.fa-plus { transform: rotate(45deg); }
.faq-list .accordion-body { padding: 0 22px 20px; font-size: .92rem; color: var(--ink-soft); }

/* ==========================================================================
   Forms (Contact page) — Bootstrap .form-control / .form-select /
   .form-check / .alert, restyled to the brand look.
   ========================================================================== */
.contact-info-card {
  background: linear-gradient(150deg, var(--navy-950), var(--navy-800));
  color: #fff; border-radius: var(--radius-lg); padding: 38px 32px; position: relative; overflow: hidden;
}
.contact-info-card::before { content:''; position:absolute; width:200px; height:200px; border-radius:50%; background: rgba(140,198,63,.15); bottom:-70px; left:-70px; }
.contact-info-card h3 { color: #fff; position: relative; z-index: 1; }
.contact-info-card > p { color: #c3cde3; position: relative; z-index: 1; }
.contact-info-list { display: grid; gap: 20px; margin-top: 26px; position: relative; z-index: 1; }
.contact-info-list li { display: flex; gap: 16px; align-items: flex-start; list-style: none; }
.contact-info-list i { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: var(--green-500); flex-shrink: 0; }
.contact-info-list strong { display: block; color: #fff; font-family: var(--font-head); font-size: .92rem; }
.contact-info-list span, .contact-info-list a { font-size: .88rem; color: #c3cde3; }
.contact-hours { margin-top: 28px; position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; }
.contact-hours h5 { color: #fff; font-family: var(--font-head); font-size: .88rem; margin-bottom: 10px; }
.contact-hours div { display: flex; justify-content: space-between; font-size: .85rem; color: #c3cde3; padding: 4px 0; }

.form-card { background: #fff; border: 1px solid var(--grey-100); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-sm); }

.form-notice.alert {
  display: flex; gap: 12px; align-items: flex-start;
  --bs-alert-bg: var(--gold-100); --bs-alert-border-color: var(--gold-400); --bs-alert-color: var(--gold-600);
  padding: 14px 16px; border-radius: var(--radius-sm); font-size: .87rem; margin-bottom: 26px;
}
.form-notice i { margin-top: 2px; }

.form-label { font-family: var(--font-head); font-weight: 600; font-size: .87rem; color: var(--navy-900); }
.form-label .req { color: var(--pink-500); }
.form-control, .form-select {
  padding: 13px 16px; border: 1.5px solid var(--grey-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .93rem; color: var(--ink); background: var(--grey-50);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--green-600); background: #fff; box-shadow: 0 0 0 4px var(--green-100);
}
textarea.form-control { resize: vertical; min-height: 130px; }
.form-check { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--ink-soft); padding-left: 0; margin-bottom: 0; min-height: 0; }
.form-check .form-check-input { margin: 0; flex-shrink: 0; }
.form-check .form-check-input:checked { background-color: var(--green-600); border-color: var(--green-600); }
.form-check .form-check-input:focus { border-color: var(--green-600); box-shadow: 0 0 0 4px var(--green-100); }
.form-check-label { margin: 0; font-weight: 400; }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--grey-100); height: 340px; margin-top: 20px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Footer (grid handled by Bootstrap .row/.col in markup)
   ========================================================================== */
.site-footer { background: var(--navy-950); color: #aab6d2; }
.footer-top { padding: 68px 0 40px; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 20px; }
.footer-about p { color: #9aa7c4; font-size: .9rem; margin: 18px 0 22px; }
.footer-links { display: grid; gap: 12px; }
.footer-links a { font-size: .9rem; color: #aab6d2; transition: color .2s, padding-left .2s; }
.footer-links a:hover { color: var(--green-500); padding-left: 4px; }
.footer-contact { display: grid; gap: 16px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; font-size: .87rem; }
.footer-contact i { color: var(--green-500); margin-top: 3px; }
.footer-contact a { color: #aab6d2; }
.footer-contact a:hover { color: var(--green-500); }
.footer-socials a {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s;
}
.footer-socials a:hover { background: var(--green-600); color: #fff; transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
.footer-bottom-inner { font-size: .82rem; }
.footer-credit { color: #7c88a8; }

.back-to-top {
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy-900); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s; z-index: 400;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--green-600); }

.whatsapp-float {
  position: fixed; left: 24px; bottom: 24px; width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: var(--shadow-md); z-index: 400; animation: pulse-wa 2.4s infinite;
}
@keyframes pulse-wa {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ==========================================================================
   Scroll reveal animation
   ========================================================================== */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-up.in-view { opacity: 1; transform: translateY(0); }
.reveal-up.delay-1 { transition-delay: .08s; }
.reveal-up.delay-2 { transition-delay: .16s; }
.reveal-up.delay-3 { transition-delay: .24s; }
.reveal-up.delay-4 { transition-delay: .32s; }

/* ==========================================================================
   404 page
   ========================================================================== */
.error-page { padding: 120px 0; text-align: center; }
.error-page .code { font-family: var(--font-head); font-size: 7rem; font-weight: 800; color: var(--navy-100); line-height: 1; }
.error-page h1 { font-size: 1.8rem; margin: 10px 0 14px; }

/* ==========================================================================
   Responsive
   (Column stacking/reflow for the site's grids is now handled by
   Bootstrap's responsive col-* classes directly in the markup; the rules
   below cover the bespoke pieces Bootstrap doesn't already handle.)
   ========================================================================== */
@media (max-width: 991.98px) {
  .side-card { position: static; }
}

@media (max-width: 860px) {
  .top-bar-badges { display: none; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; top: calc(var(--header-h) + var(--topbar-h)); left: 0; right: 0; bottom: 0;
    background: #fff; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto;
    padding: 10px 20px 40px; z-index: 400;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav > ul > li > a { padding: 16px 10px; border-bottom: 1px solid var(--grey-100); border-radius: 0; justify-content: space-between; }
  .mega-menu {
    /* !important is needed here: the desktop hover/focus-within rule
       (.has-mega:hover/:focus-within .mega-menu) has higher specificity
       and would otherwise win over this plain .mega-menu override,
       re-applying the desktop centering transform when a tapped link
       on mobile receives :focus-within. */
    position: static !important; transform: none !important; left: auto !important; top: auto !important;
    width: 100%; box-shadow: none; border: none; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    grid-template-columns: 1fr; display: none; padding: 10px 0 16px;
  }
  .main-nav > ul > li.has-mega.open .mega-menu { display: grid; }
  .mega-menu-pillars { border-right: none; padding-right: 0; }
  .header-actions .btn { padding: 11px 18px; font-size: .86rem; }
  .brand-tagline { display: none; }
  .hero { padding: 60px 0 80px; }
  .hero h1 { font-size: 2.1rem; }
  .hero-stats { gap: 22px; }
  .section { padding: 64px 0; }
  .hero-actions .btn, .cta-banner-actions .btn { width: 100%; }
}

@media (max-width: 640px) {
  .section-head h2, .page-hero h1 { font-size: 1.6rem; }
  .top-bar-info span.top-bar-address { display: none; }
}

@media (max-width: 480px) {
  .top-bar-info { gap: 14px; }
  .top-bar-info a.top-bar-email { display: none; }
  .top-bar { font-size: .76rem; }
  .brand-icon { height: 42px; }
  .brand-name { font-size: 1.05rem; }
}