/* ==========================================================================
   Hyper Grow Consultancy — Bootstrap 5 theme layer
   Loaded AFTER bootstrap.min.css — overrides Bootstrap's CSS variables and
   adds the small set of custom components Bootstrap doesn't ship with
   (hero gradients, icon circles, process step numbers, etc).
   ========================================================================== */

:root {
  --bs-body-font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  --bs-body-color: #37415a;
  --bs-link-color: #0d9668;
  --bs-link-hover-color: #0b7d57;
}

body {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .accordion-button {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 { color: #0b1f3a; font-weight: 600; }

a { text-decoration: none; }

/* Extra spacing utilities beyond Bootstrap's py-5 cap */
.py-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-7 { padding-top: 6.5rem !important; padding-bottom: 6.5rem !important; }

/* ---------- Brand-color utility overrides (CDN theming, no Sass build) ---------- */
.text-success { color: #0d9668 !important; }
.border-success { border-color: #0d9668 !important; }
.bg-success-subtle { background-color: #e3f7ee !important; }
.text-success-emphasis { color: #0b7d57 !important; }
.btn-success {
  --bs-btn-bg: #0d9668;
  --bs-btn-border-color: #0d9668;
  --bs-btn-hover-bg: #0b7d57;
  --bs-btn-hover-border-color: #0b7d57;
  --bs-btn-active-bg: #0b7d57;
  --bs-btn-active-border-color: #0b7d57;
  --bs-btn-disabled-bg: #0d9668;
  --bs-btn-disabled-border-color: #0d9668;
  --bs-btn-focus-shadow-rgb: 13, 150, 104;
  border-radius: 50rem;
}
.btn-outline-light:hover { color: #0b1f3a; }
.btn { font-weight: 600; }

/* ---------- Navbar ----------
   White bar matched to the logo artwork: navy text, green accent. A single
   --nav-height drives the bar, the brand mark and the mobile panel offset so
   the three can never disagree. */
.site-navbar {
  --nav-height: 78px;
  --bs-navbar-color: #37415a;
  --bs-navbar-hover-color: #0d9668;
  --bs-navbar-active-color: #0b7d57;
  --bs-navbar-brand-color: #0b1f3a;
  --bs-navbar-toggler-border-color: rgba(11,31,58,.14);
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230b1f3a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background: #ffffff;
  border-bottom: 1px solid #e2e8f2;
  transition: box-shadow .3s ease;
  padding-top: 0;
  padding-bottom: 0;
  min-height: var(--nav-height);
}
.site-navbar > .container { min-height: var(--nav-height); }
.site-navbar.is-scrolled { box-shadow: 0 6px 22px rgba(11, 31, 58, .10); }
.site-navbar .navbar-toggler { padding: .35rem .55rem; line-height: 1; }
.site-navbar .navbar-toggler:focus { box-shadow: none; }
.site-navbar .nav-link { font-weight: 500; }
.site-navbar .nav-link.active { font-weight: 600; }

.brand-logo {
  height: 42px; width: auto; display: block;
  background: #fff; border-radius: 10px;
  padding: 4px 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  flex-shrink: 0;
}
/* The bar is already white — the logo needs no plate of its own here. */
.site-navbar .brand-logo {
  height: 44px;
  max-width: 62vw;
  object-fit: contain;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.dropdown-menu-services { min-width: 320px; }
@media (min-width: 992px) {
  .site-navbar .nav-link { padding-left: .8rem; padding-right: .8rem; border-radius: .5rem; }
  .site-navbar .nav-link.active { background: #e3f7ee; }
  .dropdown-menu-services.show { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 460px; }
}

/* Mobile / tablet: shorter bar, and the collapsed panel scrolls inside the
   viewport instead of running off the bottom on small screens. */
@media (max-width: 991.98px) {
  .site-navbar { --nav-height: 64px; }
  .site-navbar .brand-logo { height: 34px; }
  .site-navbar .navbar-collapse {
    margin: 0 calc(var(--bs-gutter-x) * -.5);
    padding: .25rem calc(var(--bs-gutter-x) * .5) 1rem;
    border-top: 1px solid #e2e8f2;
  }
  /* Clamp only once open — while .collapsing, Bootstrap owns height/overflow. */
  .site-navbar .navbar-collapse.show {
    max-height: calc(100vh - var(--nav-height));
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-navbar .navbar-nav { margin-top: .25rem !important; margin-bottom: .25rem !important; }
  .site-navbar .nav-item + .nav-item { border-top: 1px solid #eef2f8; }
  .site-navbar .nav-link { padding: .8rem .25rem; }
  .site-navbar .dropdown-menu {
    min-width: 0; background: transparent;
    border: 0; box-shadow: none !important;
    padding: 0 0 .5rem .5rem !important;
  }
  .site-navbar .dropdown-item { white-space: normal; border-radius: .5rem; }
  .site-navbar .navbar-collapse > .btn { display: block; width: 100%; margin-top: .75rem; }
}

.dropdown-item:active, .dropdown-item.active { background-color: #e3f7ee; color: #0b7d57; }

/* ---------- Hero ---------- */
.hero-section {
  position: relative;
  background: linear-gradient(180deg, #071427, #0b1f3a);
  overflow: hidden;
}
.hero-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(20,184,129,.28), transparent 60%),
    radial-gradient(45% 55% at 10% 90%, rgba(207,154,76,.18), transparent 60%);
}
.hero-section::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 70% at 50% 30%, black 20%, transparent 85%);
}
.hero-section .container { position: relative; z-index: 1; }

.hero-visual { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); }
.hero-visual-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }

/* ---------- Icon circle ---------- */
.icon-circle {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(20,184,129,.16), rgba(207,154,76,.16));
  color: #0d9668; font-size: 1.3rem; flex-shrink: 0;
}
.icon-circle.on-dark { background: rgba(255,255,255,.08); color: #34d399; }
.icon-circle.gold { background: linear-gradient(135deg, rgba(224,181,108,.22), rgba(207,154,76,.14)); color: #cf9a4c; }
.icon-circle.sm { width: 40px; height: 40px; font-size: 1.05rem; border-radius: 10px; }

.tick-circle {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(20,184,129,.18); color: #34d399;
  display: inline-flex; align-items: center; justify-content: center;
}

.avatar-circle {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #122a4d);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: 'Poppins', sans-serif;
}
.avatar-photo {
  width: 46px; height: 46px; object-fit: cover; flex-shrink: 0;
  border: 2px solid #e3f7ee;
}

/* ---------- Cards ---------- */
.hover-lift { transition: transform .28s ease, box-shadow .28s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(11,31,58,.12) !important; }

.media-block {
  aspect-ratio: 4 / 3.1;
  background: linear-gradient(160deg, #eef2f8, #f7f9fc);
  border: 1px solid #e2e8f2;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.media-block::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 85% 15%, rgba(207,154,76,.18), transparent 60%); }
.media-block i { font-size: 5rem; color: #0d9668; opacity: .85; position: relative; z-index: 1; }

/* ---------- Process steps ---------- */
.step-circle {
  width: 68px; height: 68px; border-radius: 50%;
  border: 2px solid #e2e8f2; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.25rem; color: #0d9668;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.process-col:hover .step-circle { border-color: #0d9668; box-shadow: 0 0 0 6px rgba(20,184,129,.12); }

/* ---------- CTA banner ---------- */
.cta-banner { background: linear-gradient(120deg, #071427, #122a4d 60%, #0e3a2c); }

/* ---------- Blog cover ---------- */
.blog-cover {
  height: 170px; background: linear-gradient(135deg, #0b1f3a, #1b3a63);
  position: relative; overflow: hidden;
}
.blog-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 20% 0, rgba(20,184,129,.4), transparent 60%); }
.blog-cover i { position: relative; z-index: 1; }

/* ---------- Case studies ---------- */
.case-panel-dark { background: linear-gradient(160deg, #071427, #122a4d); }
.stat-tile { background: #f7f9fc; border: 1px solid #e2e8f2; }

/* ---------- Contact ---------- */
.contact-info-card { background: linear-gradient(160deg, #071427, #0b1f3a); position: relative; overflow: hidden; }
.contact-info-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 90% 0, rgba(20,184,129,.25), transparent 60%); }
.contact-info-card > * { position: relative; z-index: 1; }
.map-embed { height: 320px; border-radius: 1rem; overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Breadcrumb (on dark hero) ---------- */
.breadcrumb-dark {
  --bs-breadcrumb-divider-color: rgba(255,255,255,.4);
  --bs-breadcrumb-item-active-color: #ffffff;
}
.breadcrumb-dark a { color: rgba(255,255,255,.65); }
.breadcrumb-dark a:hover { color: #fff; }

/* ---------- Accordion (FAQ) ---------- */
.accordion {
  --bs-accordion-active-color: #0b7d57;
  --bs-accordion-active-bg: #e3f7ee;
  --bs-accordion-btn-focus-box-shadow: none;
}

/* ---------- Footer ---------- */
.site-footer a { color: #9aa4bd; }
.site-footer a:hover { color: #34d399; }

/* ---------- Blockquote ---------- */
.blockquote-accent {
  border-left: 3px solid #0d9668;
  padding-left: 1.1rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  color: #0b1f3a;
  font-style: italic;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Misc ---------- */
.badge-pill-outline { background: #fff; border: 1px solid #e2e8f2; color: #0b1f3a; }
.form-control, .form-select { padding: .7rem .95rem; border-color: #e2e8f2; background: #f7f9fc; }
.form-control:focus, .form-select:focus { border-color: #0d9668; box-shadow: 0 0 0 .2rem rgba(13,150,104,.15); background: #fff; }