/* ============================================================
   Vonlee Premium Enhancements
   Design tokens, carousels, stats, testimonials, WhatsApp button
   ============================================================ */

:root {
  --vl-red: #c8102e;
  --vl-red-dark: #a50d26;
  --vl-gold: #d4af37;
  --vl-black: #0a0a0a;
  --vl-charcoal: #151515;
  --vl-off-white: #f5f5f0;
}

/* ---------- ROOT FIX: theme's base text colors were built for a light
   background (dark navy headings/paragraphs) and never adjusted for this
   site's black theme. This was the real cause of "invisible text" bugs
   showing up in different places throughout the build - fixing the source
   here instead of patching every occurrence individually. ---------- */
h1, h2, h3, h4, h5, h6 { color: #ffffff; }
p { color: rgba(255,255,255,.78); }
b, strong, sup, sub, u, del { color: inherit; }
.contact-info .media-body h3 a:hover { color: var(--vl-gold) !important; }

/* ---------- Awards / Certifications grid ---------- */
.vl-award-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 991px) { .vl-award-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .vl-award-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.vl-award-card {
  background: linear-gradient(160deg, #171717, #0e0e0e);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.vl-award-card:hover {
  border-color: var(--vl-gold);
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
}
.vl-award-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------- Testimonials grid ---------- */
.vl-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 991px) { .vl-testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .vl-testimonial-grid { grid-template-columns: 1fr; } }

.vl-testimonial-card {
  background: var(--vl-charcoal);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--vl-red);
  border-radius: 10px;
  padding: 28px 24px 22px;
  position: relative;
  transition: transform .25s ease, border-color .25s ease;
}
.vl-testimonial-card:hover {
  transform: translateY(-4px);
  border-left-color: var(--vl-gold);
}
.vl-testimonial-card .vl-quote-mark {
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 1;
  color: var(--vl-red);
  opacity: .5;
  margin-bottom: 6px;
}
.vl-testimonial-card .vl-quote {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.9);
  margin-bottom: 16px;
}
.vl-testimonial-card .vl-quote-author {
  color: #fff;
  font-size: 15px;
  margin-bottom: 2px;
}
.vl-testimonial-card .vl-quote-role {
  color: rgba(255,255,255,.5);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ---------- Homepage short pull-quote strip ---------- */
.vl-pullquote-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 767px) { .vl-pullquote-strip { grid-template-columns: 1fr; } }
.vl-pullquote {
  background: var(--vl-charcoal);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 22px 20px;
  text-align: center;
}
.vl-pullquote p {
  color: rgba(255,255,255,.9);
  font-size: 15px;
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vl-pullquote span {
  color: var(--vl-gold);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.vl-stars { color: var(--vl-gold); font-size: 13px; margin-bottom: 10px; }

/* ---------- Highlight badge rows (About page) ---------- */
.vl-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.vl-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(200,16,46,.12);
  border: 1px solid rgba(200,16,46,.4);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 7px 14px;
  border-radius: 20px;
}

/* ---------- Discipline detail pages ---------- */
.vl-info-card {
  background: var(--vl-charcoal);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 26px 26px 22px;
  height: 100%;
}
.vl-info-card h4 {
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 19px;
  margin-bottom: 14px;
  border-left: 3px solid var(--vl-red);
  padding-left: 12px;
}
.vl-info-card p {
  color: rgba(255,255,255,.78);
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 0;
}
.vl-info-card--highlight {
  border-color: rgba(212,175,55,.4);
  background: linear-gradient(160deg, rgba(212,175,55,.08), var(--vl-charcoal));
}
.vl-info-card--highlight h4 { border-left-color: var(--vl-gold); }
.vl-benefit-list { list-style: none; padding: 0; margin: 0; }
.vl-benefit-list li {
  color: rgba(255,255,255,.85);
  font-size: 14.5px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.vl-benefit-list li:last-child { border-bottom: none; }
.vl-benefit-list i { color: var(--vl-red); margin-right: 8px; }

.vl-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.vl-chip {
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 9px 20px;
  border-radius: 24px;
  font-size: 13.5px;
  font-weight: 600;
  transition: all .2s ease;
}
.vl-chip:hover {
  background: var(--vl-red);
  border-color: var(--vl-red);
  color: #fff;
}
.vl-learn-more {
  display: inline-block;
  margin-top: 6px;
  color: var(--vl-red);
  font-size: 13px;
  font-weight: 600;
}
.vl-learn-more:hover { color: var(--vl-gold); }
.vl-video-tag {
  display: inline-block;
  background: rgba(200,16,46,.85);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 10px;
  border-radius: 10px;
  margin-right: 8px;
}

/* ---------- Enquiry form action row: Submit + WhatsApp, unified (Contact page) ---------- */
.vl-enquiry-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.vl-enquiry-actions button[type=submit] { margin-top: 0; }
.vl-enquiry-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #25D366;
  color: #25D366;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: all .2s ease;
}
.vl-enquiry-wa-btn:hover { background: #25D366; color: #0e0e10; }

/* ---------- FitPass membership strip ---------- */
.vl-fitpass-area {
  background: var(--vl-charcoal);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 30px 0;
}
.vl-fitpass-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  border: 1px solid rgba(212,175,55,.4);
}
.vl-fitpass-badge img {
  max-width: 100%;
  height: auto;
  display: block;
}
.vl-fitpass-area h4 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.vl-fitpass-area p { color: rgba(255,255,255,.65); font-size: 13.5px; margin-bottom: 0; line-height: 1.6; }

/* =========================================================
   Lightweight 3D touches - pure CSS transforms, GPU-accelerated,
   no WebGL/three.js so mobile performance stays fast.
   ========================================================= */

/* ---------- 3D tilt-on-hover (class cards, award cards) ---------- */
.vl-tilt-3d {
  perspective: 900px;
}
.vl-tilt-3d .vl-tilt-inner,
.vl-tilt-3d.single-cat,
.vl-tilt-3d.vl-award-card {
  transition: transform .35s ease, box-shadow .35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
@media (hover: hover) {
  .vl-tilt-3d:hover .vl-tilt-inner,
  .single-cat.vl-tilt-3d:hover,
  .vl-award-card.vl-tilt-3d:hover {
    transform: perspective(900px) rotateX(6deg) rotateY(-6deg) translateY(-6px) translateZ(6px);
    box-shadow: -12px 22px 34px rgba(0,0,0,.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vl-tilt-3d:hover .vl-tilt-inner,
  .single-cat.vl-tilt-3d:hover,
  .vl-award-card.vl-tilt-3d:hover { transform: none; }
}

/* ---------- 3D flip cards (Coaches) ---------- */
.vl-flip-card { perspective: 1200px; height: 320px; }
.vl-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.vl-flip-card.vl-flipped .vl-flip-inner { transform: rotateY(180deg); }
.vl-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}
.vl-flip-front {
  background: var(--vl-charcoal);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  padding-bottom: 18px;
}
.vl-flip-back {
  background: linear-gradient(160deg, var(--vl-red-dark), #2a0a10);
  border: 1px solid rgba(200,16,46,.4);
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 20px;
}
.vl-flip-back h6 { color: var(--vl-gold); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.vl-flip-back p { font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.6; }
.vl-flip-hint {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ---------- Our Achievements section ---------- */
.vl-achieve-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 991px) { .vl-achieve-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vl-achieve-grid { grid-template-columns: 1fr; } }
.vl-achieve-card {
  background: var(--vl-charcoal);
  border: 1px solid rgba(200,16,46,.35);
  border-radius: 10px;
  padding: 30px 22px;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease;
}
.vl-achieve-card:hover { transform: translateY(-6px); border-color: var(--vl-red); }
.vl-achieve-card i { color: var(--vl-red); font-size: 28px; margin-bottom: 12px; }
.vl-achieve-num {
  font-family: "Oswald", sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
}
.vl-achieve-num .plus { color: var(--vl-red); }
.vl-achieve-card h6 { color: #fff; font-size: 15px; margin-bottom: 8px; }
.vl-achieve-card p { color: rgba(255,255,255,.55); font-size: 12.5px; margin: 0; line-height: 1.5; }

/* ---------- Affiliations marquee ---------- */
.vl-affil-area {
  padding: 55px 0 60px;
  background: var(--vl-black);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.vl-affil-marquee .vl-marquee-track {
  animation-duration: 40s;
}
.vl-affil-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--vl-charcoal);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 14px 20px;
  min-width: 280px;
  transition: border-color .2s ease;
}
a.vl-affil-badge:hover { border-color: var(--vl-gold); }
.vl-affil-plate {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
}
.vl-affil-plate img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.vl-affil-text h6 { color: #fff; font-size: 13.5px; margin-bottom: 3px; line-height: 1.3; }
.vl-affil-text span { color: rgba(255,255,255,.5); font-size: 11.5px; line-height: 1.3; display: block; }

/* ---------- Rotating 3D emblem badge (Stats section) ---------- */
.vl-emblem-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
  margin-bottom: 26px;
}
.vl-emblem {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2a2a, #0a0a0a 70%);
  border: 2px solid var(--vl-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--vl-gold);
  font-family: "Oswald", sans-serif;
  animation: vl-spin-3d 9s linear infinite;
  transform-style: preserve-3d;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.vl-emblem span:first-child { font-size: 20px; font-weight: 700; line-height: 1; }
.vl-emblem span:last-child { font-size: 9px; letter-spacing: .5px; margin-top: 2px; color: rgba(255,255,255,.7); }
@keyframes vl-spin-3d {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-emblem { animation: none; }
}

/* ---------- Coaches section (About page) ---------- */
.vl-coach-carousel .owl-stage-outer { padding-bottom: 6px; }
.vl-coach-carousel .owl-nav button.owl-prev,
.vl-coach-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 40%;
  background: var(--vl-red) !important;
  color: #fff !important;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
}
.vl-coach-carousel .owl-nav button.owl-prev { left: -14px; }
.vl-coach-carousel .owl-nav button.owl-next { right: -14px; }
.vl-coach-carousel { position: relative; }
.vl-coach-carousel .owl-dots { text-align: center; margin-top: 18px; }
.vl-coach-carousel .owl-dot span {
  width: 8px; height: 8px; margin: 0 3px;
  background: rgba(255,255,255,.25);
  display: inline-block; border-radius: 50%;
}
.vl-coach-carousel .owl-dot.active span { background: var(--vl-red); }
.vl-coach-photo {
  width: 100%;
  aspect-ratio: 4/3;
  background: #1c1c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.25);
  font-size: 42px;
}
.vl-coach-photo img { width: 100%; height: 100%; object-fit: cover; }
.vl-coach-card h5 { color: #fff; margin: 18px 0 2px; }
.vl-coach-card .vl-coach-role { color: var(--vl-red); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.vl-coach-card p { color: rgba(255,255,255,.65); font-size: 13.5px; margin: 10px 20px 0; }

/* ---------- Enquiry form (Contact page) ---------- */
.vl-enquiry-card {
  background: var(--vl-charcoal);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 30px 28px;
}
.vl-enquiry-card label {
  display: block;
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
  margin: 14px 0 6px;
}
.vl-enquiry-card input[type=text],
.vl-enquiry-card input[type=tel],
.vl-enquiry-card input[type=email],
.vl-enquiry-card select,
.vl-enquiry-card textarea {
  width: 100%;
  background: #101010;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
}
.vl-enquiry-card input:focus,
.vl-enquiry-card select:focus,
.vl-enquiry-card textarea:focus {
  outline: none;
  border-color: var(--vl-red);
}
.vl-enquiry-card button[type=submit] {
  margin-top: 22px;
  background: var(--vl-red);
  color: #fff;
  border: 0;
  padding: 13px 30px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .2s ease;
}
.vl-enquiry-card button[type=submit]:hover { background: var(--vl-red-dark); }
.vl-enquiry-card button[type=submit]:disabled { opacity: .6; cursor: default; }
.vl-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.vl-enquiry-msg { margin-top: 16px; font-size: 14px; }
.vl-enquiry-msg.vl-msg-ok { color: #8ef0b2; }
.vl-enquiry-msg.vl-msg-err { color: #ff9b9b; }

/* ---------- Legends quotes marquee (Homepage) ---------- */
.vl-legends-area {
  padding: 60px 0 65px;
  background: var(--vl-charcoal);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.vl-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.vl-marquee-track {
  display: flex;
  width: max-content;
  gap: 22px;
  animation: vl-scroll 55s linear infinite;
}
.vl-marquee:hover .vl-marquee-track { animation-play-state: paused; }
@keyframes vl-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.vl-marquee-card {
  flex: 0 0 auto;
  width: 320px;
  background: var(--vl-black);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--vl-gold);
  border-radius: 10px;
  padding: 22px 22px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.vl-marquee-photo {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--vl-gold);
  flex-shrink: 0;
}
.vl-marquee-card .vl-quote-mark {
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--vl-gold);
  opacity: .6;
  margin-bottom: 2px;
}
.vl-marquee-card p {
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 10px;
  min-height: 42px;
}
.vl-marquee-card span {
  color: var(--vl-gold);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
  display: block;
}
@media (max-width: 575px) {
  .vl-marquee-card { width: 260px; }
  .vl-marquee-photo { width: 48px; height: 48px; }
}

/* ---------- Footer v2 - multi-column with hierarchy ---------- */
.vl-footer-v2 .vl-footer-top { padding-top: 55px; }
.vl-footer-v2 .footer-logo { margin-bottom: 16px; }
.vl-footer-blurb {
  color: rgba(255,255,255,.6);
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: 20px;
}
.vl-footer-social.footer-social { display: flex; gap: 10px; }
.vl-footer-social.footer-social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 14px;
}
.vl-footer-social.footer-social a:hover { background: var(--vl-red); border-color: var(--vl-red); }

.vl-footer-heading {
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  letter-spacing: .4px;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
.vl-footer-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 32px; height: 2px;
  background: var(--vl-red);
}
.vl-footer-heading--spaced { margin-top: 24px; }

.vl-footer-links { list-style: none; padding: 0; margin: 0; }
.vl-footer-links li { margin-bottom: 10px; }
.vl-footer-links a { color: rgba(255,255,255,.62); font-size: 13.5px; transition: color .2s ease; }
.vl-footer-links a:hover { color: var(--vl-red); }

.vl-footer-contact { list-style: none; padding: 0; margin: 0 0 20px; }
.vl-footer-contact li {
  color: rgba(255,255,255,.65);
  font-size: 13.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.vl-footer-contact i { color: var(--vl-red); margin-top: 3px; width: 14px; flex-shrink: 0; }
.vl-footer-cta { display: inline-block; font-size: 13px; padding: 10px 22px; }

/* ---------- About page images - fit to content height, not full-res sprawl ---------- */
.vl-about-img-wrap {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  max-height: 560px;
}
.vl-about-img-wrap .vl-about-img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 14px;
}
@media (max-width: 991px) {
  .vl-about-img-wrap, .vl-about-img-wrap .vl-about-img { max-height: 420px; height: 420px; }
}

/* ---------- "What makes us different" grid (About page) ---------- */
.vl-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 480px) { .vl-diff-grid { grid-template-columns: 1fr; } }
.vl-diff-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--vl-charcoal);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px 16px;
}
.vl-diff-item i { color: var(--vl-red); font-size: 18px; margin-top: 3px; flex-shrink: 0; }
.vl-diff-item h6 { color: #fff; font-size: 13.5px; margin-bottom: 4px; }
/* ---------- Inner-page hero title now uses <h1> for SEO; mirror the original h2 styling ---------- */
.slider-area2 .hero-cap h1 {
  color: #fff;
  font-size: 70px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider-area2 .hero-cap h1 { font-size: 50px; }
}
@media (max-width: 575px) {
  .slider-area2 .hero-cap h1 { font-size: 35px; }
}
.vl-diff-item p { color: rgba(255,255,255,.6); font-size: 12.5px; margin: 0; line-height: 1.5; }

/* ---------- Fix: contact-info text was dark-on-dark (leftover light-theme colors) ---------- */
.contact-info .media-body h3 {
  color: #ffffff !important;
  font-weight: 600;
}
.contact-info .media-body h3 a { color: #ffffff !important; }
.contact-info .media-body h3 a:hover { color: var(--vl-red) !important; }
.contact-info .media-body p { color: rgba(255,255,255,.65) !important; }
.contact-info__icon i, .contact-info__icon span { color: var(--vl-red) !important; }

/* ---------- Stats / counter strip ---------- */
.vl-stats-area {
  background: linear-gradient(180deg, rgba(200,16,46,.08), transparent 60%), var(--vl-charcoal);
  padding: 55px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.vl-stat {
  text-align: center;
  padding: 10px;
}
.vl-stat .vl-stat-num {
  font-family: "Oswald", sans-serif;
  font-size: 46px;
  font-weight: 700;
  color: var(--vl-red);
  line-height: 1;
}
.vl-stat .vl-stat-num .plus { color: var(--vl-gold); }
.vl-stat .vl-stat-label {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ---------- Homepage hero subtitle / trust row ---------- */
.hero__caption .vl-hero-sub {
  color: rgba(255,255,255,.82) !important;
  font-size: 17px !important;
  max-width: 520px;
  margin: 6px 0 22px !important;
  padding-right: 0 !important;
  font-family: "Roboto Condensed", sans-serif;
}
.hero__caption .vl-hero-btn2 {
  margin-left: 14px;
}
@media (max-width: 575px) {
  .hero__caption .vl-hero-btn2 { margin-left: 0; margin-top: 12px; display: inline-block; }
}
.vl-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 30px;
}
.vl-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  font-family: "Roboto Condensed", sans-serif;
}
.vl-trust-item i { color: var(--vl-red); }

/* ---------- Section eyebrow ---------- */
.vl-eyebrow {
  display: inline-block;
  color: var(--vl-red);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* =========================================================
   FIX: Mobile logo/heading overlap
   The header floats absolutely on top of the hero (by original
   template design) with no reserved height, and the hero content
   is vertically centered inside a fixed-height box. On short mobile
   viewports this let the header's logo visually collide with the
   "Martial Arts" heading. Fixed by shrinking the logo on small
   screens and reserving real space at the top of the hero content
   so it always starts below the header, regardless of screen height.
   ========================================================= */
@media (max-width: 767px) {
  .header-area .logo img { width: 64px !important; height: auto; }
  .slider-area .hero__caption,
  .slider-area2 .hero-cap {
    padding-top: 100px !important;
  }
}
@media (max-width: 575px) {
  .header-area .logo img { width: 56px !important; }
  .slider-area .hero__caption,
  .slider-area2 .hero-cap {
    padding-top: 90px !important;
  }
}
/* Give the transparent header a subtle backdrop at all sizes so text/logo
   stay legible no matter what image or heading happens to sit behind it */
.header-transparent {
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
}