/* ==========================================================================
   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 ---------- */
.site-navbar {
  --bs-navbar-color: #cfd9ec;
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(255,255,255,.25);
  background: rgba(7, 20, 39, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .3s ease, box-shadow .3s ease;
  padding-top: .85rem;
  padding-bottom: .85rem;
}
.site-navbar.is-scrolled { background: rgba(7, 20, 39, .95); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.site-navbar .navbar-toggler { padding: .35rem .55rem; }
.site-navbar .navbar-toggler:focus { box-shadow: none; }

.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #34d399, #0d9668 60%, #cf9a4c);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1rem;
  box-shadow: 0 6px 16px rgba(20, 184, 129, .35);
  flex-shrink: 0;
}

.dropdown-menu-services { min-width: 320px; }
@media (min-width: 992px) {
  .dropdown-menu-services.show { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 460px; }
}
.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; }