/* ===========================================================================
   EPOREX — shared UI overrides (loaded AFTER style.css on the pages that use
   these components). Keep selectors at the theme's specificity + !important so
   they reliably win.
   =========================================================================== */

/* ---- Stats / counter section (home + about) ------------------------------
   The theme spaced the label 80px above the number and rendered the "+" at a
   tiny 16px, which read as a stray subscript. Tighten the label→number gap,
   give the number the brand green, and size the "+" to match. */
.counter-area { padding-top: 80px !important; padding-bottom: 100px !important; }
.counter-title { margin-bottom: 45px !important; }
.counter-box { padding-bottom: 0 !important; }

.counter-box .content .title {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  color: #0d403e !important;
}

.counter-box .content .info {
  display: flex !important;
  align-items: flex-start !important;
}

.counter-box .content .info .counter {
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #20bb99 !important;
}

.counter-box .content .info .unit {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #20bb99 !important;
  margin-left: 3px !important;
  margin-top: 2px !important;
}

/* Make sure the numeric counter and its unit sit above any pseudo-elements/overlays */
.counter-box .content .info .counter,
.counter-box .content .info .unit {
  position: relative !important;
  z-index: 2 !important;
  display: inline-block !important;
}

/* HARD GUARANTEE that the stat numbers stay put and visible.
   The counter spans carry data-speed="3000" for the countTo plugin, and any
   scroll library that treats [data-speed] as a parallax hook (GSAP
   ScrollSmoother did — see assets/js/gsap-custom.js) will transform them
   thousands of pixels away, leaving only the "+" on screen. Pinning transform
   here means no animation library can move or fade the number, whatever it
   tries. The counter must never be animated positionally. */
.counter-box .content .info .counter {
  transform: none !important;
  translate: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  will-change: auto !important;
}

/* Mobile responsive formatting for stats counter section */
@media (max-width: 767px) {
  .counter-area {
    padding-top: 45px !important;
    padding-bottom: 55px !important;
  }

  .counter-title {
    margin-bottom: 25px !important;
  }

  .counter-title h4 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    padding: 0 10px !important;
  }

  .counter-area .row {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 1.25rem !important;
  }

  .counter-box {
    padding-bottom: 0 !important;
    text-align: center !important;
  }

  /* Remove full-width horizontal underline on mobile */
  .counter-box::before {
    display: none !important;
  }

  .counter-box .content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .counter-box .content .title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    text-align: center !important;
    color: #0d403e !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .counter-box .content .info {
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .counter-box .content .info .counter {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #20bb99 !important;
  }

  .counter-box .content .info .unit {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #20bb99 !important;
    margin-left: 2px !important;
  }

  /* Add subtle vertical divider between side-by-side items on mobile */
  .counter-area .row > .col-4:not(:nth-child(3n)) .counter-box,
  .counter-area .row > .col-6:nth-child(odd) .counter-box {
    border-right: 1px solid #e7e3dc !important;
  }
}

/* ---- "Get in touch with us" quote section --------------------------------
   The background layer used to carry data-speed="0.5", so GSAP ScrollSmoother
   translated it vertically while you scrolled. The theme sized it at exactly
   height:100%/top:0, so ANY parallax offset uncovered an edge: the background
   slid up ~126px and the bottom of the form (the Submit / WhatsApp buttons)
   ended up on bare page instead of on the image.

   Enlarging the layer does NOT fix this — ScrollSmoother's travel is
   proportional to the element's own height, so a 160%-tall layer moves ~500px
   instead of ~385px and the gap gets worse (measured: 126px -> 321px). The
   only way a full-bleed background reliably contains its content is to not
   move it, so data-speed has been removed from .quote-bg in the markup and
   the layer is pinned to an exact fit here.

   If you ever want the motion back, use a very gentle speed (0.9, not 0.5)
   AND give the layer ~15% overscan — at 0.5 no realistic overscan is enough. */
.quote-wrap .quote-bg {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;   /* belt and braces if a scroll lib grabs it */
  background-position: center !important;
  background-size: cover !important;
}

@media (max-width: 991px) {
  /* Stacked layout: the (currently empty) left column collapses, so the
     vertical rhythm comes from the section padding, not a min-height. */
  .quote-wrap { padding-top: 60px !important; padding-bottom: 60px !important; }
  .quote-form { padding: 30px 24px !important; }
}