/* ============================================================================
   VENTUREHEAP ACADEMY — CORE THEME
   Reusable design tokens + base + components. Imported by every page.
   Brand: Yellow #FAE80B (fills/highlights, always with black text) + Black.
   Stack: Bootstrap 5.3 (loaded before this file) + these overrides/tokens.
   ============================================================================ */

/* ------------------------------------------------------------------ *
 * 1. DESIGN TOKENS
 * ------------------------------------------------------------------ */
:root {
  /* Brand colors */
  --vh-primary: #FAE80B;        /* brand yellow — use as FILL with black text */
  --vh-primary-600: #E4D200;    /* deeper yellow (hover) */
  --vh-primary-050: #FEFBE0;    /* pale yellow tint (soft backgrounds) */
  --vh-primary-100: #FBF4A3;
  --vh-secondary: #000000;      /* black */
  --vh-accent: #0A0A0A;         /* near-black accent */
  --vh-accent-050: #F2F2F3;     /* light neutral */
  --vh-success: #16A34A;
  --vh-warning: #F59E0B;

  /* Surfaces */
  --vh-bg: #F8FAFC;
  --vh-card: #FFFFFF;
  --vh-dark: #0A0A0A;
  --vh-dark-2: #17171C;

  /* Ink / text (warm-neutral grays to sit with black) */
  --vh-ink: #0A0A0A;
  --vh-ink-soft: #3A3A40;
  --vh-ink-mute: #6B6B73;
  --vh-line: #EAEAEE;
  --vh-line-strong: #D6D6DC;

  /* Gradients */
  --vh-grad-blue: linear-gradient(135deg, #FFEE55 0%, #FAE80B 55%, #F2DD00 100%); /* yellow */
  --vh-grad-purple: linear-gradient(135deg, #1B1B20 0%, #000000 100%);            /* dark */
  --vh-grad-sky: linear-gradient(135deg, #FFF59B 0%, #FAE80B 100%);               /* soft yellow */
  --vh-grad-hero: linear-gradient(120deg, #FFF04D 0%, #FAE80B 50%, #E4D200 100%); /* yellow (text) */
  --vh-grad-ink: linear-gradient(160deg, #0A0A0A 0%, #17171C 100%);               /* black */

  /* Typography */
  --vh-font-head: "Poppins", system-ui, sans-serif;
  --vh-font-body: "Inter", system-ui, sans-serif;
  --vh-font-num:  "Space Grotesk", "Inter", sans-serif;

  /* Type scale (fluid) */
  --vh-fs-display: clamp(2.6rem, 1.6rem + 4vw, 4.75rem);
  --vh-fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
  --vh-fs-h2: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  --vh-fs-h3: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --vh-fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);

  /* Spacing / shape */
  --vh-radius-sm: 12px;
  --vh-radius: 18px;
  --vh-radius-lg: 26px;
  --vh-radius-xl: 34px;
  --vh-section-y: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* Shadows (soft, layered) */
  --vh-shadow-xs: 0 1px 2px rgba(10, 10, 10, .06);
  --vh-shadow-sm: 0 4px 14px rgba(10, 10, 10, .06);
  --vh-shadow: 0 12px 30px -10px rgba(10, 10, 10, .12);
  --vh-shadow-lg: 0 30px 60px -18px rgba(10, 10, 10, .22);
  --vh-shadow-brand: 0 16px 38px -14px rgba(250, 232, 11, .6);   /* yellow glow */
  --vh-shadow-accent: 0 18px 40px -14px rgba(10, 10, 10, .4);

  /* Motion */
  --vh-ease: cubic-bezier(.22, 1, .36, 1);
  --vh-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vh-t-fast: .18s;
  --vh-t: .32s;
  --vh-t-slow: .6s;
}

/* ------------------------------------------------------------------ *
 * 2. BASE
 * ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 120px; overflow-x: hidden; overflow-x: clip; }
/* Anchor targets stop below the sticky nav (+ sub-nav), not hidden behind it */
[id] { scroll-margin-top: 120px; }

body {
  font-family: var(--vh-font-body);
  color: var(--vh-ink-soft);
  background: var(--vh-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .vh-head {
  font-family: var(--vh-font-head);
  color: var(--vh-ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.vh-display { font-size: var(--vh-fs-display); font-weight: 800; letter-spacing: -0.035em; }
h1, .vh-h1 { font-size: var(--vh-fs-h1); font-weight: 800; }
h2, .vh-h2 { font-size: var(--vh-fs-h2); }
h3, .vh-h3 { font-size: var(--vh-fs-h3); }

p { margin-bottom: 1rem; }
.vh-lead { font-size: var(--vh-fs-lead); color: var(--vh-ink-mute); line-height: 1.6; }

a { color: var(--vh-secondary); text-decoration: none; transition: color var(--vh-t-fast); }
a:hover { color: #000; }

.vh-num { font-family: var(--vh-font-num); font-feature-settings: "tnum"; letter-spacing: -0.02em; }

::selection { background: var(--vh-primary); color: #0A0A0A; }

/* Utility: gradient text (yellow — intended for DARK backgrounds) */
.vh-grad-text {
  background: var(--vh-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Section rhythm */
.vh-section { padding-block: var(--vh-section-y); position: relative; }
.vh-section--tight { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.vh-container { max-width: 1320px; }

/* Dark section */
.vh-dark-section {
  background: var(--vh-grad-ink);
  color: #CBD5E1;
}
.vh-dark-section h1, .vh-dark-section h2, .vh-dark-section h3,
.vh-dark-section h4, .vh-dark-section .vh-head { color: #F8FAFC; }
.vh-dark-section .vh-lead { color: #9A9AA2; }

/* ------------------------------------------------------------------ *
 * 3. DECOR — eyebrows, dividers, backgrounds
 * ------------------------------------------------------------------ */
.vh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--vh-font-head);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0A0A0A;
  background: var(--vh-primary-050);
  padding: .45rem .9rem;
  border-radius: 100px;
  border: 1px solid rgba(10, 10, 10, .10);
}
.vh-eyebrow--accent { color: var(--vh-primary); background: #111114; border-color: rgba(255,255,255,.08); }
.vh-eyebrow--on-dark { color: #0A0A0A; background: var(--vh-primary); border-color: transparent; }

/* Noise + shape backgrounds */
.vh-noise::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}
.vh-blob--blue { background: radial-gradient(circle, rgba(250,232,11,.6), transparent 70%); }   /* yellow glow */
.vh-blob--purple { background: radial-gradient(circle, rgba(250,232,11,.32), transparent 70%); } /* soft yellow glow */

/* Grid backdrop */
.vh-grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,10,10,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ------------------------------------------------------------------ *
 * 4. BUTTONS
 * ------------------------------------------------------------------ */
.vh-btn {
  --vh-btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--vh-font-head);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  padding: .95rem 1.6rem;
  border-radius: 100px;
  border: 1px solid transparent;
  background: var(--vh-secondary);
  color: var(--vh-btn-fg);
  cursor: pointer;
  transition: transform var(--vh-t) var(--vh-ease), box-shadow var(--vh-t), background var(--vh-t), color var(--vh-t), border-color var(--vh-t);
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.vh-btn i { font-size: 1.1em; position: relative; z-index: 1; }
.vh-btn:hover { transform: translateY(-2px); color: var(--vh-btn-fg); }
.vh-btn:active { transform: translateY(0); }
/* Shine sweep on hover */
.vh-btn::after {
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); pointer-events:none; transition:left .6s var(--vh-ease);
}
.vh-btn:hover::after { left:150%; }

/* Primary = yellow fill, black text */
.vh-btn--primary { --vh-btn-fg: #0A0A0A; background: var(--vh-grad-blue); box-shadow: var(--vh-shadow-brand); }
.vh-btn--primary:hover { box-shadow: 0 22px 48px -12px rgba(250,232,11,.8); }

/* Accent = black fill, yellow text */
.vh-btn--accent { --vh-btn-fg: var(--vh-primary); background: #0A0A0A; box-shadow: var(--vh-shadow-accent); }
.vh-btn--accent:hover { background: #000; }

.vh-btn--dark { --vh-btn-fg:#fff; background: var(--vh-secondary); box-shadow: var(--vh-shadow); }
.vh-btn--dark:hover { background: #000; }

.vh-btn--ghost {
  --vh-btn-fg: #0A0A0A;
  background: transparent;
  border-color: var(--vh-line-strong);
  box-shadow: none;
}
.vh-btn--ghost:hover { --vh-btn-fg:#0A0A0A; border-color: #0A0A0A; background: var(--vh-primary-050); }

.vh-btn--on-dark { --vh-btn-fg:#fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.vh-btn--on-dark:hover { background: rgba(255,255,255,.16); }

.vh-btn--whatsapp { --vh-btn-fg:#062e16; background: #25D366; }
.vh-btn--whatsapp:hover { box-shadow: 0 18px 40px -14px rgba(37,211,102,.6); }

.vh-btn--lg { padding: 1.15rem 2rem; font-size: 1.05rem; }
.vh-btn--sm { padding: .65rem 1.1rem; font-size: .85rem; }
.vh-btn--block { display: flex; width: 100%; }

/* Magnetic wrapper (JS-driven) */
.vh-magnetic { display: inline-block; }

/* ------------------------------------------------------------------ *
 * 5. CARDS
 * ------------------------------------------------------------------ */
.vh-card {
  background: var(--vh-card);
  border: 1px solid var(--vh-line);
  border-radius: var(--vh-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--vh-shadow-sm);
  transition: transform var(--vh-t) var(--vh-ease), box-shadow var(--vh-t), border-color var(--vh-t);
  position: relative;
}
.vh-card--hover:hover { transform: translateY(-6px); box-shadow: var(--vh-shadow-lg); border-color: var(--vh-primary); }

/* Glass card (for dark/gradient backgrounds) */
.vh-glass {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--vh-radius-lg);
  padding: 1.75rem;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: #E2E8F0;
}
.vh-glass h1, .vh-glass h2, .vh-glass h3, .vh-glass h4 { color:#fff; }

/* Icon chip inside cards */
.vh-icon {
  display: inline-grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  font-size: 1.5rem;
  color: #0A0A0A;
  background: var(--vh-primary-050);
  margin-bottom: 1.1rem;
}
.vh-icon--accent { color: var(--vh-primary); background: #0A0A0A; }
.vh-icon--grad { color:#0A0A0A; background: var(--vh-grad-blue); box-shadow: var(--vh-shadow-brand); }
.vh-icon--grad-accent { color: var(--vh-primary); background: var(--vh-grad-purple); box-shadow: var(--vh-shadow-accent); }

/* Course card */
.vh-course-card { padding: 0; overflow: hidden; }
.vh-course-card .vh-course-top {
  padding: 1.5rem 1.6rem;
  background: var(--vh-grad-ink);
  color:#fff;
  position: relative;
}
.vh-course-card .vh-course-body { padding: 1.5rem 1.6rem; }
.vh-course-meta { display:flex; gap:1.2rem; flex-wrap:wrap; color: var(--vh-ink-mute); font-size:.9rem; }
.vh-course-meta span { display:inline-flex; align-items:center; gap:.35rem; }

/* Stat card (numbers) */
.vh-stat { text-align: left; }
.vh-stat .vh-stat-num {
  font-family: var(--vh-font-num);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  line-height: 1;
  color: var(--vh-ink);
}
.vh-glass .vh-stat-num {
  background: linear-gradient(135deg,#fff 0%, var(--vh-primary) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.vh-stat .vh-stat-label { color: var(--vh-ink-mute); font-size:.95rem; margin-top:.35rem; }
.vh-glass .vh-stat-label { color:#9A9AA2; }

/* Mentor card */
.vh-mentor-card { display:flex; gap:1.25rem; align-items:flex-start; }
.vh-mentor-photo {
  width:76px; height:76px; border-radius: 20px; object-fit:cover; flex-shrink:0;
  background: var(--vh-grad-purple); color:#fff; box-shadow: var(--vh-shadow-accent);
}

/* Floating glass chips (hero depth) */
.vh-float-chip {
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  color:#fff; font-family:var(--vh-font-head); font-weight:600; font-size:.85rem;
  padding:.6rem .95rem; border-radius:100px; box-shadow: var(--vh-shadow-lg);
  animation: vh-float 5.5s var(--vh-ease) infinite;
}
.vh-float-chip i { color: var(--vh-primary); font-size:1.05em; }
.vh-float-chip--slow { animation-duration:7s; }
@keyframes vh-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }
@media (prefers-reduced-motion: reduce){ .vh-float-chip{ animation:none } }

/* Certificate card (premium seal look) */
.vh-cert {
  background: var(--vh-card); border:1px solid var(--vh-line); border-radius: var(--vh-radius-lg);
  padding:1.5rem 1.35rem; height:100%; position:relative; overflow:hidden;
  box-shadow: var(--vh-shadow-sm);
  transition: transform var(--vh-t) var(--vh-ease), box-shadow var(--vh-t), border-color var(--vh-t);
}
.vh-cert::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background: var(--vh-grad-blue); }
.vh-cert:hover { transform: translateY(-5px); box-shadow: var(--vh-shadow-lg); border-color: var(--vh-primary); }
.vh-cert-seal {
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background: var(--vh-primary-050); color:#0A0A0A; font-size:1.4rem; margin-bottom:.9rem;
  border:1px solid rgba(10,10,10,.06);
}

/* Certificate image card (shows the actual certificate) */
.vh-certimg {
  margin:0; background: var(--vh-card); border:1px solid var(--vh-line);
  border-radius: var(--vh-radius); padding:.7rem; box-shadow: var(--vh-shadow-sm);
  text-align:center; transition: transform var(--vh-t) var(--vh-ease), box-shadow var(--vh-t), border-color var(--vh-t);
}
.vh-certimg img { width:100%; border-radius:10px; display:block; border:1px solid var(--vh-line); background:#fff; }
.vh-certimg figcaption { font-family: var(--vh-font-head); font-weight:600; font-size:.82rem; margin-top:.65rem; color: var(--vh-ink); }
.vh-certimg:hover { transform: translateY(-5px); box-shadow: var(--vh-shadow-lg); border-color: var(--vh-primary); }

/* Image slot (for real photos later) */
.vh-imgslot {
  border-radius: var(--vh-radius); overflow:hidden; position:relative;
  background: var(--vh-grad-ink); display:grid; place-items:center;
  color:#5A5A62; text-align:center; padding:1rem;
}
.vh-imgslot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vh-imgslot i { font-size:1.6rem; color: var(--vh-primary); opacity:.7; }

/* Aurora animated gradient (dark sections) */
.vh-aurora { position: relative; overflow: hidden; }
.vh-aurora::after {
  content:""; position:absolute; inset:-45%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 28%, rgba(250,232,11,.34), transparent 62%),
    radial-gradient(32% 32% at 82% 18%, rgba(250,232,11,.18), transparent 62%),
    radial-gradient(42% 42% at 72% 82%, rgba(250,232,11,.14), transparent 62%),
    radial-gradient(40% 40% at 30% 85%, rgba(255,255,255,.06), transparent 62%);
  filter: blur(36px);
  animation: vh-aurora 16s var(--vh-ease) infinite alternate;
}
@keyframes vh-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2%,-4%,0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce){ .vh-aurora::after { animation: none; } }

/* Gradient-border card (premium yellow ring) */
.vh-gradient-border { position: relative; }
.vh-gradient-border::before {
  content:""; position:absolute; inset:0; padding:1.6px; border-radius:inherit;
  background: var(--vh-grad-blue);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; z-index:2;
}

/* Bento grid */
.vh-bento { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; grid-auto-rows: 1fr; }
.vh-bento > * { border-radius: var(--vh-radius-lg); margin:0; }
.vh-bento .b-2 { grid-column: span 2; }
.vh-bento .b-2r { grid-row: span 2; }
.vh-bento-cell {
  background: var(--vh-card); border:1px solid var(--vh-line); box-shadow: var(--vh-shadow-sm);
  padding:1.5rem; display:flex; flex-direction:column; justify-content:center;
  transition: transform var(--vh-t) var(--vh-ease), box-shadow var(--vh-t), border-color var(--vh-t);
}
.vh-bento-cell:hover { transform: translateY(-4px); box-shadow: var(--vh-shadow-lg); border-color: var(--vh-primary); }
.vh-bento-cell--dark { background: var(--vh-grad-ink); border-color:#1c1c22; color:#CBD5E1; }
.vh-bento-cell--dark h3, .vh-bento-cell--dark h2 { color:#fff; }
.vh-bento-cell--yellow { background: var(--vh-primary); border-color: var(--vh-primary-600); color:#0A0A0A; }
.vh-bento-cell--yellow h3 { color:#0A0A0A; }
@media (max-width: 991px){
  .vh-bento { grid-template-columns: repeat(2, 1fr); }
  .vh-bento .b-2 { grid-column: span 2; }
  .vh-bento .b-2r { grid-row: auto; }
}
@media (max-width: 575px){
  .vh-bento { grid-template-columns: 1fr; }
  .vh-bento .b-2 { grid-column: span 1; }
}

/* Alumni / placement card */
.vh-alumni {
  background: var(--vh-card);
  border:1px solid var(--vh-line);
  border-radius: var(--vh-radius-lg);
  padding:1.5rem 1rem;
  box-shadow: var(--vh-shadow-sm);
  height:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.vh-alumni b { font-family: var(--vh-font-head); color: var(--vh-ink); font-size:1rem; line-height:1.2; }
.vh-alumni-av {
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center; overflow:hidden;
  color:#fff; font-family: var(--vh-font-head); font-weight:700; font-size:1.2rem;
  background: var(--vh-grad-ink); box-shadow:0 0 0 3px var(--vh-primary-050);
  margin-bottom:.9rem;
}
.vh-alumni-av img { width:100%; height:100%; object-fit:cover; }
.vh-alumni-role { color: var(--vh-ink-mute); font-size:.78rem; margin:.4rem 0 .55rem; }
.vh-mentor-photo { overflow:hidden; }
.vh-mentor-photo img { width:100%; height:100%; object-fit:cover; }

/* Rating trust pills */
.vh-rating {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--vh-card); border:1px solid var(--vh-line); box-shadow: var(--vh-shadow-xs);
  border-radius:100px; padding:.5rem .95rem; font-family: var(--vh-font-head);
}
.vh-rating b { color: var(--vh-ink); font-size:1.05rem; }
.vh-rating .vh-stars { color: var(--vh-warning); letter-spacing:1px; font-size:.85rem; }
.vh-rating small { color: var(--vh-ink-mute); }

/* WsCube-style hero: two-tone live pill, hero stat strip, student collage */
.vh-livepill { display:inline-flex; align-items:center; gap:.2rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:.26rem; font-family:var(--vh-font-head); font-weight:600; font-size:.8rem; }
.vh-livepill .p1 { color:#fff; padding:.2rem .7rem; }
.vh-livepill .p2 { display:inline-flex; align-items:center; gap:.4rem; background:var(--vh-primary); color:#0A0A0A; border-radius:100px; padding:.26rem .8rem; letter-spacing:.04em; }

.vh-hstat { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:.9rem .5rem; text-align:center; backdrop-filter:blur(8px); height:100%; }
.vh-hstat > i { color:var(--vh-primary); font-size:1.1rem; }
.vh-hstat-num { font-family:var(--vh-font-num); font-weight:700; font-size:1.45rem; color:#fff; line-height:1.1; margin-top:.15rem; }
.vh-hstat-lbl { color:#fff; font-family:var(--vh-font-head); font-weight:600; font-size:.82rem; }
.vh-hstat-sub { color:#9A9AA2; font-size:.7rem; }

.vh-place-collage {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; height:540px; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent, #000 11%, #000 89%, transparent);
          mask-image:linear-gradient(transparent, #000 11%, #000 89%, transparent);
}
.vh-pcol { overflow:hidden; }
.vh-pcol-track { display:flex; flex-direction:column; animation:vh-vscroll-up 26s linear infinite; will-change:transform; }
.vh-pcol--down .vh-pcol-track { animation-name:vh-vscroll-down; animation-duration:31s; }
.vh-place-collage:hover .vh-pcol-track { animation-play-state:paused; }
@keyframes vh-vscroll-up   { from{transform:translateY(0)}     to{transform:translateY(-50%)} }
@keyframes vh-vscroll-down { from{transform:translateY(-50%)}  to{transform:translateY(0)} }
.vh-place-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:.5rem; margin-bottom:.75rem; text-align:center; backdrop-filter:blur(8px); transition:border-color var(--vh-t); }
.vh-place-card:hover { border-color:var(--vh-primary); }
.vh-pname { color:#fff; font-family:var(--vh-font-head); font-weight:600; font-size:.8rem; margin-bottom:.35rem; }
.vh-pphoto { width:100%; aspect-ratio:1; object-fit:cover; border-radius:11px; display:block; background:#1a1a20; }
.vh-plogo { max-height:18px; max-width:75%; margin-top:.45rem; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; }
@media (max-width:991px){ .vh-place-collage{ height:460px; } }
/* Mobile: single horizontal scrolling strip (scrolls left) */
.vh-place-strip { display:none; }
.vh-place-strip .vh-marquee-track { gap:.75rem; }
.vh-place-strip .vh-place-card { width:140px; flex:0 0 auto; margin-bottom:0; }
@media (max-width:767px){
  .vh-collage-col .vh-place-collage { display:none; }
  .vh-place-strip { display:block; }
}
@media (prefers-reduced-motion: reduce){ .vh-pcol-track{ animation:none; } }
/* Full-height collage that bleeds to the top & bottom of the hero (lg+) */
@media (min-width:992px){
  .vh-collage-col {
    position:absolute; right:0;
    top:calc(-1 * var(--vh-section-y)); bottom:calc(-1 * var(--vh-section-y));
    width:40%; padding-left:0; padding-right:0;
  }
  .vh-collage-col .vh-place-collage { height:100%; }
}

/* Hiring logo wall (placeholder logos — swap with verified) */
.vh-logowall { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; align-items:center; }
.vh-logo-box { background: var(--vh-card); border:1px solid var(--vh-line); border-radius: var(--vh-radius-sm); height:66px; display:grid; place-items:center; padding:.6rem; box-shadow: var(--vh-shadow-xs); }
.vh-logo-box img { max-width:100%; max-height:34px; filter:grayscale(1); opacity:.65; transition: all var(--vh-t); }
.vh-logo-box:hover img { filter:none; opacity:1; }
@media (max-width:991px){ .vh-logowall{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:575px){ .vh-logowall{ grid-template-columns:repeat(2,1fr);} }

/* Photo gallery */
.vh-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
.vh-gallery figure { margin:0; border-radius: var(--vh-radius); overflow:hidden; aspect-ratio:4/3; position:relative; box-shadow: var(--vh-shadow-sm); }
.vh-gallery img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .55s var(--vh-ease); }
.vh-gallery figure:hover img { transform: scale(1.07); }
.vh-gallery .g-wide { grid-column: span 2; aspect-ratio: auto; }
@media (max-width:767px){ .vh-gallery{ grid-template-columns:repeat(2,1fr);} .vh-gallery .g-wide{ grid-column:span 2;} }

/* Pricing */
.vh-price { font-family: var(--vh-font-num); font-weight:700; color: var(--vh-ink); }
.vh-price s { color: var(--vh-ink-mute); font-weight:500; font-size:.7em; }

/* ------------------------------------------------------------------ *
 * 6. BADGES & PILLS
 * ------------------------------------------------------------------ */
.vh-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--vh-font-head); font-weight:600; font-size:.78rem;
  padding:.35rem .75rem; border-radius:100px;
  background: var(--vh-primary); color: #0A0A0A;
}
.vh-badge--success { background:#E7F6EC; color: var(--vh-success); }
.vh-badge--warning { background:#FEF3E2; color:#B45309; }
.vh-badge--accent  { background: #0A0A0A; color: var(--vh-primary); }
.vh-badge--dot::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }
.vh-badge--live { background:#FEECEC; color:#DC2626; }
.vh-badge--live .vh-pulse { width:7px;height:7px;border-radius:50%;background:#DC2626; box-shadow:0 0 0 0 rgba(220,38,38,.5); animation: vh-pulse 1.8s infinite; }

@keyframes vh-pulse { 0%{box-shadow:0 0 0 0 rgba(220,38,38,.5);} 70%{box-shadow:0 0 0 8px rgba(220,38,38,0);} 100%{box-shadow:0 0 0 0 rgba(220,38,38,0);} }

/* ------------------------------------------------------------------ *
 * 7. FORMS
 * ------------------------------------------------------------------ */
.vh-field { margin-bottom: 1.1rem; }
.vh-label { display:block; font-family: var(--vh-font-head); font-weight:600; font-size:.9rem; color: var(--vh-ink); margin-bottom:.45rem; }
.vh-input, .vh-select, .vh-textarea {
  width:100%;
  font-family: var(--vh-font-body); font-size:1rem;
  color: var(--vh-ink);
  background: var(--vh-card);
  border:1px solid var(--vh-line-strong);
  border-radius: var(--vh-radius-sm);
  padding: .85rem 1rem;
  transition: border-color var(--vh-t-fast), box-shadow var(--vh-t-fast);
}
.vh-input::placeholder, .vh-textarea::placeholder { color:#9A9AA2; }
.vh-input:focus, .vh-select:focus, .vh-textarea:focus {
  outline:none; border-color: #0A0A0A;
  box-shadow: 0 0 0 4px rgba(250,232,11,.5);
}
.vh-textarea { min-height: 120px; resize: vertical; }
.vh-input-icon { position:relative; }
.vh-input-icon i { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#9A9AA2; }
.vh-input-icon .vh-input { padding-left: 2.7rem; }

/* Lead card container */
.vh-lead-card {
  background: var(--vh-card);
  border-radius: var(--vh-radius-lg);
  padding: 1.9rem;
  box-shadow: var(--vh-shadow-lg);
  border:1px solid var(--vh-line);
}

/* ------------------------------------------------------------------ *
 * 8. NAVBAR + ANNOUNCEMENT
 * ------------------------------------------------------------------ */
.vh-announce {
  background: var(--vh-secondary);
  color:#fff; text-align:center;
  font-size:.9rem; padding:.55rem 1rem;
  font-family: var(--vh-font-head); font-weight:500;
}
.vh-announce b { color: var(--vh-primary); }
.vh-announce a { color: var(--vh-primary); text-decoration:underline; font-weight:600; }
.vh-announce a:hover { color:#fff; }

.vh-nav {
  position: sticky; top:0; z-index:1030;
  background: rgba(248,250,252,.8);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition: box-shadow var(--vh-t), border-color var(--vh-t), background var(--vh-t);
}
.vh-nav.is-stuck { box-shadow: var(--vh-shadow-sm); border-bottom-color: var(--vh-line); background: rgba(255,255,255,.92); }
.vh-nav .vh-brand { font-family: var(--vh-font-head); font-weight:800; font-size:1.25rem; color: var(--vh-ink); letter-spacing:-.02em; }
.vh-nav .vh-brand span { background: linear-gradient(transparent 60%, var(--vh-primary) 0); padding: 0 .06em; }
.vh-nav-link {
  font-family: var(--vh-font-head); font-weight:500; font-size:.95rem; color: var(--vh-ink-soft);
  padding:.5rem .1rem; position:relative;
}
.vh-nav-link:hover { color: var(--vh-ink); }
.vh-nav-link::after { content:""; position:absolute; left:0; bottom:-2px; height:3px; width:0; background: var(--vh-primary); border-radius:3px; transition: width var(--vh-t) var(--vh-ease); }
.vh-nav-link:hover::after { width:100%; }

/* Mobile menu — hamburger + slide-in drawer (built by vh.js) */
.vh-burger { display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--vh-line-strong); background:var(--vh-card); color:var(--vh-ink); font-size:1.5rem; place-items:center; cursor:pointer; flex:0 0 auto; }
@media (max-width:991px){
  .vh-burger { display:inline-grid; }
  .vh-nav .vh-magnetic { display:none; }        /* nav CTA lives in the drawer on mobile */
}

.vh-drawer { position:fixed; inset:0; z-index:1060; visibility:hidden; overflow:hidden; }
.vh-drawer.is-open { visibility:visible; }
.vh-drawer-scrim { position:absolute; inset:0; background:rgba(5,5,8,.5); opacity:0; transition:opacity .3s; }
.vh-drawer.is-open .vh-drawer-scrim { opacity:1; }
.vh-drawer-panel {
  position:absolute; top:0; right:0; height:100%; width:min(330px,86vw);
  background:var(--vh-card); box-shadow:var(--vh-shadow-lg); padding:1.25rem;
  transform:translateX(100%); transition:transform .32s var(--vh-ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.vh-drawer.is-open .vh-drawer-panel { transform:translateX(0); }
.vh-drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.vh-drawer-head .vh-brand { font-family:var(--vh-font-head); font-weight:800; color:var(--vh-ink); }
.vh-drawer-head .vh-brand span { background:linear-gradient(transparent 60%, var(--vh-primary) 0); padding:0 .06em; }
.vh-drawer-close { width:42px; height:42px; border:none; background:var(--vh-bg); border-radius:10px; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--vh-ink); }
.vh-drawer-links { display:flex; flex-direction:column; }
.vh-drawer-links a { font-family:var(--vh-font-head); font-weight:500; font-size:1.05rem; color:var(--vh-ink); padding:.9rem .25rem; border-bottom:1px solid var(--vh-line); }
.vh-drawer-links a:hover { color:var(--vh-primary-600); padding-left:.6rem; transition:padding .2s; }
.vh-drawer-panel .vh-btn:first-of-type { margin-top:auto; }

/* Keep floating buttons clear of the sticky CTA bar on small screens */
@media (max-width:575px){
  body.has-sticky-cta .vh-float-wa { bottom:84px; }
  body.has-sticky-cta .vh-totop { bottom:150px; }
}

/* ------------------------------------------------------------------ *
 * 9. TIMELINE / CURRICULUM
 * ------------------------------------------------------------------ */
.vh-timeline { position: relative; padding-left: 2rem; }
.vh-timeline::before { content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background: linear-gradient(var(--vh-primary), #0A0A0A); }
.vh-timeline-item { position: relative; padding-bottom: 1.6rem; }
.vh-timeline-item::before {
  content:""; position:absolute; left:-2rem; top:4px; width:24px; height:24px; border-radius:50%;
  background: var(--vh-primary); border:3px solid #0A0A0A;
  box-shadow: 0 0 0 4px var(--vh-primary-050);
}
.vh-timeline-item[data-accent]::before { background:#0A0A0A; border-color: var(--vh-primary); box-shadow:0 0 0 4px var(--vh-primary-050); }

/* Curriculum module cards */
.vh-module {
  background: var(--vh-card); border:1px solid var(--vh-line); border-radius: var(--vh-radius-lg);
  padding:1.6rem; box-shadow: var(--vh-shadow-sm);
  display:flex; flex-direction:column; align-items:flex-start; position:relative; overflow:hidden;
}
.vh-module::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--vh-grad-blue); opacity:0; transition: opacity var(--vh-t); }
.vh-module:hover::before { opacity:1; }
.vh-module-num {
  display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 .6rem;
  border-radius:12px; background: var(--vh-grad-blue); color:#0A0A0A;
  font-family: var(--vh-font-num); font-weight:700; font-size:1.1rem; box-shadow: var(--vh-shadow-brand);
}
.vh-module h3 { color: var(--vh-ink); }

/* Tool chip (used in curriculum modules) */
.vh-tool {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--vh-font-head); font-weight:500; font-size:.78rem;
  color: var(--vh-ink-soft); background: var(--vh-bg);
  border:1px solid var(--vh-line); border-radius:100px; padding:.32rem .7rem;
}
.vh-tool i { color: var(--vh-ink); font-size:1em; }
.vh-tool img { width:16px; height:16px; object-fit:contain; display:inline-block; }
.vh-tools-label { font-family: var(--vh-font-head); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--vh-ink-mute); }

/* Sticky section sub-navigation (scroll-spy) */
.vh-subnav {
  position: sticky; z-index:1028;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom:1px solid var(--vh-line); box-shadow: var(--vh-shadow-xs);
}
.vh-subnav-inner { display:flex; justify-content:center; gap:.35rem; overflow-x:auto; padding:.55rem 0; scrollbar-width:none; -ms-overflow-style:none; }
.vh-subnav-inner::-webkit-scrollbar { display:none; }
.vh-subnav a {
  white-space:nowrap; font-family: var(--vh-font-head); font-weight:500; font-size:.9rem;
  color: var(--vh-ink-soft); padding:.45rem .95rem; border-radius:100px; transition: all var(--vh-t);
}
.vh-subnav a:hover { color: var(--vh-ink); background: var(--vh-primary-050); }
.vh-subnav a.is-active { background: var(--vh-secondary); color: var(--vh-primary); }
@media (max-width:768px){ .vh-subnav-inner { justify-content:flex-start; } }

/* Video popup (YouTube lightbox) */
.vh-video-thumb { cursor: pointer; }
.vh-vmodal {
  position: fixed; inset:0; z-index:3000; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
  background: rgba(5,5,8,.86); backdrop-filter: blur(6px);
}
.vh-vmodal.is-open { display:flex; animation: vh-fade .25s var(--vh-ease); }
.vh-vmodal-box { position:relative; width:100%; max-width:920px; aspect-ratio:16/9; box-shadow: var(--vh-shadow-lg); }
.vh-vmodal-holder { position:absolute; inset:0; border-radius: var(--vh-radius); overflow:hidden; background:#000; }
.vh-vmodal-holder iframe { width:100%; height:100%; border:0; display:block; }
.vh-vmodal-close {
  position:absolute; top:-16px; right:-16px; width:42px; height:42px; border-radius:50%;
  border:none; background: var(--vh-primary); color:#0A0A0A; font-size:1.3rem; line-height:1;
  display:grid; place-items:center; cursor:pointer; box-shadow: var(--vh-shadow); z-index:3;
}
.vh-vmodal-close:hover { background: var(--vh-primary-600); }
@media (max-width:600px){ .vh-vmodal-close{ top:8px; right:8px; } }
@keyframes vh-fade { from{ opacity:0 } to{ opacity:1 } }

/* ------------------------------------------------------------------ *
 * 10. ACCORDION (FAQ)
 * ------------------------------------------------------------------ */
.vh-accordion-item { background: var(--vh-card); border:1px solid var(--vh-line); border-radius: var(--vh-radius); margin-bottom:.9rem; overflow:hidden; transition: box-shadow var(--vh-t), border-color var(--vh-t); }
.vh-accordion-item.is-open { box-shadow: var(--vh-shadow); border-color: var(--vh-primary); }
.vh-accordion-head { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:1.15rem 1.4rem; font-family: var(--vh-font-head); font-weight:600; color: var(--vh-ink); display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:1.02rem; }
.vh-accordion-head i { transition: transform var(--vh-t) var(--vh-ease); color: #0A0A0A; }
.vh-accordion-item.is-open .vh-accordion-head i { transform: rotate(180deg); }
.vh-accordion-body { max-height:0; overflow:hidden; transition: max-height var(--vh-t) var(--vh-ease); }
.vh-accordion-body > div { padding: 0 1.4rem 1.25rem; color: var(--vh-ink-mute); }

/* Dark accordion variant (black bars + yellow toggle) — matches live curriculum */
.vh-acc-dark .vh-accordion-item { background: var(--vh-secondary); border-color:#000; }
.vh-acc-dark .vh-accordion-item.is-open { border-color: var(--vh-primary); box-shadow: var(--vh-shadow); }
.vh-acc-dark .vh-accordion-head { color:#fff; }
.vh-acc-dark .vh-accordion-head .vh-num { color: var(--vh-primary) !important; }
.vh-acc-dark .vh-accordion-head i { color: var(--vh-primary); }
.vh-acc-dark .vh-accordion-item.is-open .vh-accordion-head i { transform: rotate(45deg); }
.vh-acc-dark .vh-accordion-body { background:#fff; }
.vh-acc-dark .vh-accordion-body > div { padding: 1.1rem 1.4rem 1.25rem; color: var(--vh-ink-soft); }

/* ------------------------------------------------------------------ *
 * 11. COMPARISON TABLE
 * ------------------------------------------------------------------ */
.vh-compare { width:100%; border-collapse:separate; border-spacing:0; background: var(--vh-card); border-radius: var(--vh-radius-lg); overflow:hidden; box-shadow: var(--vh-shadow-sm); }
.vh-compare th, .vh-compare td { padding:1rem 1.2rem; text-align:left; border-bottom:1px solid var(--vh-line); }
.vh-compare thead th { font-family: var(--vh-font-head); font-size:.95rem; background:#F4F4F5; color: var(--vh-ink); }
.vh-compare thead th.is-us { background: var(--vh-secondary); color: var(--vh-primary); }
.vh-compare td.is-us { background: var(--vh-primary-050); font-weight:600; color: var(--vh-ink); }
.vh-compare .vh-yes { color: var(--vh-ink); } .vh-compare .vh-no { color:#C9C9CF; }

/* ------------------------------------------------------------------ *
 * 12. LOGO MARQUEE
 * ------------------------------------------------------------------ */
.vh-marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vh-marquee-track { display:flex; gap:3rem; width:max-content; animation: vh-marquee 28s linear infinite; }
.vh-marquee:hover .vh-marquee-track { animation-play-state: paused; }
.vh-marquee-item { font-family: var(--vh-font-head); font-weight:700; font-size:1.35rem; color:#9A9AA2; white-space:nowrap; }
@keyframes vh-marquee { to { transform: translateX(-50%); } }

/* Scrolling image gallery (masonry-style horizontal wall, scrolls right) */
.vh-marquee--gallery .vh-marquee-track { gap:1rem; align-items:center; animation-duration:48s; animation-direction:reverse; }
.vh-marquee--gallery img { height:230px; width:auto; max-width:none; border-radius:var(--vh-radius); object-fit:cover; display:block; box-shadow:var(--vh-shadow-sm); }
.vh-marquee--gallery.vh-marquee--tall img { height:270px; }
@media (max-width:575px){ .vh-marquee--gallery img { height:170px; } }

/* Big video hero (click to play in popup) */
.vh-videohero { position:relative; overflow:hidden; border-radius:var(--vh-radius-lg); border:1px solid rgba(255,255,255,.16); max-width:920px; margin-inline:auto; cursor:pointer; box-shadow:var(--vh-shadow-lg); }
.vh-videohero img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .5s var(--vh-ease); }
.vh-videohero:hover img { transform:scale(1.04); }
.vh-videohero::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(10,10,10,.12), rgba(10,10,10,.5)); z-index:1; }
.vh-play-btn { position:absolute; inset:0; margin:auto; width:86px; height:86px; border-radius:50%; background:var(--vh-primary); color:#0A0A0A; display:grid; place-items:center; font-size:2.4rem; z-index:2; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.vh-play-btn::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--vh-primary); animation:vh-ring 2.2s infinite; }

/* ------------------------------------------------------------------ *
 * 13. FLOATING UI — WhatsApp, back-to-top, progress, sticky CTA
 * ------------------------------------------------------------------ */
.vh-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:2000; background: var(--vh-grad-hero); transition: width .1s linear; }

.vh-float-wa {
  position: fixed; right:20px; bottom:20px; z-index:1040;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; font-size:1.7rem;
  background:#25D366; color:#fff; box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  transition: transform var(--vh-t) var(--vh-ease);
}
.vh-float-wa:hover { transform: scale(1.08); color:#fff; }
.vh-float-wa::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation: vh-ring 2.2s infinite; }
@keyframes vh-ring { 0%{transform:scale(1);opacity:.7;} 100%{transform:scale(1.7);opacity:0;} }

.vh-totop {
  position: fixed; right:22px; bottom:88px; z-index:1040;
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background: var(--vh-secondary); color: var(--vh-primary); border:1px solid #0A0A0A;
  box-shadow: var(--vh-shadow); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all var(--vh-t) var(--vh-ease);
}
.vh-totop.is-show { opacity:1; visibility:visible; transform: translateY(0); }

.vh-sticky-cta {
  position: fixed; left:0; right:0; bottom:0; z-index:1035;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-top:1px solid var(--vh-line); box-shadow:0 -8px 30px -12px rgba(10,10,10,.18);
  transform: translateY(110%); transition: transform var(--vh-t) var(--vh-ease);
}
.vh-sticky-cta.is-show { transform: translateY(0); }

/* ------------------------------------------------------------------ *
 * 14. MOTION — AOS-friendly + reveal presets
 * ------------------------------------------------------------------ */
[data-aos] { will-change: transform, opacity; }
.vh-hover-lift { transition: transform var(--vh-t) var(--vh-ease); }
.vh-hover-lift:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------------------------ *
 * 15. HELPERS + BOOTSTRAP BRIDGES
 * ------------------------------------------------------------------ */
.vh-divider { height:1px; background: var(--vh-line); border:0; }
.vh-relative { position: relative; z-index:1; }
.vh-max-60 { max-width: 60ch; }
.text-balance { text-wrap: balance; }

/* Bootstrap .text-primary -> brand black on light surfaces (yellow is unreadable on white) */
.text-primary { color: var(--vh-secondary) !important; }
.bg-primary { background-color: var(--vh-primary) !important; color:#0A0A0A !important; }
.btn-check:focus + .btn, .btn:focus { box-shadow: 0 0 0 4px rgba(250,232,11,.5); }