/* Small, maintainable refinements applied after the generated Elementor CSS. */
.elementor-252 .elementor-element.elementor-element-90cadf9 {
  width: var(--container-widget-width, 31%);
  max-width: 34rem;
  --container-widget-width: 31%;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .elementor-252 .elementor-element.elementor-element-90cadf9 {
    width: var(--container-widget-width, 40%);
    --container-widget-width: 40%;
    font-size: 1.25rem;
  }
}

@media (max-width: 767px) {
  .elementor-252 .elementor-element.elementor-element-90cadf9 {
    width: var(--container-widget-width, 100%);
    max-width: 36rem;
    --container-widget-width: 100%;
    font-size: 1.125rem;
    line-height: 1.55;
  }
}

/* --- Entrance-animation fallback -----------------------------------------------
   Elementor tags every element that has an authored entrance animation with
   .elementor-invisible (visibility:hidden) and relies on its frontend JS handler
   to strip that class once the element scrolls into view. On this static port
   that handler does not run, so those elements stay hidden forever — most
   visibly the whole "Our impact across the continent" stat carousel, which
   leaves a tall blank gap.

   The rest of the page's entrance animations are dead too, so there is nothing
   to be consistent with: just make the content visible. No JS, nothing that can
   strand a section if a script or observer misbehaves.
   --------------------------------------------------------------------------- */
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- "Our impact across the continent" — static stat row ----------------------
   That block is an Elementor testimonial-carousel on the continuous-marquee
   preset (speed 3000 / autoplay 398 / loop). It initialises while its section is
   still hidden, mis-measures, and the marquee then parks the slide track a few
   thousand px off-screen and never settles — the section renders as a blank gap.

   Rather than repair the marquee, present the three stat cards as a static row
   and rebuild the card interior (soft surface, number → label → CTA stack).
   This is CSS-only and self-contained: every rule that fights Swiper uses
   !important, which beats Swiper's inline styles, so the layout is correct even
   though the Swiper JS keeps running in the background.

   Two Swiper side effects have to be countered explicitly:
     - the marquee's perpetual DOM mutation keeps the containers' `background`
       and `border` transitions permanently mid-flight from their initial
       (transparent / default) state, so the card fills never paint — hence the
       blanket `transition: none` on the slide subtree;
     - `gap` on .swiper-wrapper is overridden by an Elementor rule, so card
       spacing is done with slide margins instead.

   Scope: the widget id .elementor-element-1479cea only. Nothing else on the
   page — including the other carousels — is touched.
   --------------------------------------------------------------------------- */
.elementor-element-1479cea .elementor-swiper,
.elementor-element-1479cea .elementor-main-swiper,
.elementor-element-1479cea .swiper,
.elementor-element-1479cea .swiper-container {
  overflow: visible !important;
  height: auto !important;
}

.elementor-element-1479cea .swiper-wrapper {
  transform: none !important;
  transition: none !important;
  height: auto !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

/* Freeze every transition in the slide subtree — while the marquee JS keeps
   mutating it, unfinished background/border transitions leave the cards blank. */
.elementor-element-1479cea .swiper-slide,
.elementor-element-1479cea .swiper-slide *,
.elementor-element-1479cea .swiper-slide *::before,
.elementor-element-1479cea .swiper-slide *::after {
  transition: none !important;
}

/* Loop clones Swiper injects. */
.elementor-element-1479cea .swiper-slide.swiper-slide-duplicate {
  display: none !important;
}

/* The three real slides → responsive equal-width columns.
   Horizontal + row spacing via margin (see note above re: `gap`). */
.elementor-element-1479cea .swiper-slide {
  transform: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 14px 28px !important;
  flex: 1 1 300px;
  max-width: 380px;
}

/* Full-width chain so each card always fills its slide (the redesigned card
   interior is a flex column, which would otherwise shrink-wrap to its content). */
.elementor-element-1479cea .swiper-slide,
.elementor-element-1479cea .elementor-testimonial,
.elementor-element-1479cea .elementor-testimonial__content,
.elementor-element-1479cea .elementor-testimonial__text,
.elementor-element-1479cea .elementor-testimonial__text > .elementor,
.elementor-element-1479cea .elementor-element-22d1930 {
  width: 100% !important;
  box-sizing: border-box !important;
}
.elementor-element-1479cea .elementor-testimonial,
.elementor-element-1479cea .elementor-testimonial__content,
.elementor-element-1479cea .elementor-testimonial__text,
.elementor-element-1479cea .elementor-testimonial__text > .elementor {
  height: 100%;
}

/* --- Card interior --------------------------------------------------------- */

/* Card body: soft, modern surface. The source ships an invalid "070px" padding
   token so cards render with none; rebuild the box as a flex column. */
.elementor-element-1479cea .elementor-element-22d1930 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-height: 320px;
  height: 100% !important;
  padding: 34px 30px !important;
  border: 1px solid rgba(49, 112, 46, 0.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 16, 0.04),
              0 22px 46px -24px rgba(16, 24, 16, 0.20) !important;
}

/* Card 1 leads with a small, quiet partner-logo strip. */
.elementor-element-1479cea .elementor-element-0c7010c {
  width: auto !important;
  margin: 0 0 20px !important;
}
.elementor-element-1479cea .elementor-element-0c7010c .e-con-inner {
  gap: 18px !important;
  align-items: center !important;
  flex-wrap: wrap;
}
.elementor-element-1479cea .elementor-element-0c7010c img { opacity: 0.7; }

/* Main content block stacks: number → label, then the CTA is pinned to the
   card's bottom edge so the three "Learn More" links line up across the row. */
.elementor-element-1479cea .elementor-element-38b390d {
  flex: 1 1 auto !important;
  width: 100% !important;
  align-self: stretch !important;
}
.elementor-element-1479cea .elementor-element-38b390d > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  gap: 10px !important;
}

/* Drop the top spacer entirely — spacing is handled by the flex gaps. */
.elementor-element-1479cea .elementor-element-d62cd0d { --spacer-size: 0 !important; }
.elementor-element-1479cea .elementor-element-d62cd0d .elementor-spacer-inner {
  height: 0 !important;
}

/* The stat number — the card's hero. */
.elementor-element-1479cea .elementor-element-67b14ac .elementor-heading-title {
  font-size: 5.25rem !important;
  line-height: 1 !important;
  font-style: normal !important;
  letter-spacing: -0.015em;
  margin: 0 !important;
}

/* Card 3: number on its own line, flag strip beneath it. */
.elementor-element-1479cea .elementor-element-712c508 { width: 100% !important; }
.elementor-element-1479cea .elementor-element-712c508 > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.elementor-element-1479cea .elementor-element-76587b3 { max-width: 172px !important; }
.elementor-element-1479cea .elementor-element-76587b3 img {
  width: 100% !important;
  height: auto !important;
}

/* Label + "Learn More": label follows the number; the button drops to the
   bottom (margin-top:auto) so CTAs align across all three cards. */
.elementor-element-1479cea .elementor-element-e4f582b {
  flex: 1 1 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
}
.elementor-element-1479cea .elementor-element-e4f582b > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  gap: 12px !important;
}
.elementor-element-1479cea .elementor-element-82a15d4 {
  margin-top: auto !important;
  padding-top: 22px !important;
}
.elementor-element-1479cea .elementor-element-b57eac5 .elementor-heading-title {
  font-size: 1.375rem !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: #2b2e2b !important;
}
.elementor-element-1479cea .elementor-element-82a15d4 .elementor-button {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.01em;
  padding: 0 !important;
}
.elementor-element-1479cea .elementor-element-82a15d4 .elementor-button-text {
  font-style: normal !important;
  white-space: nowrap;
}
.elementor-element-1479cea .elementor-element-82a15d4 .elementor-button-content-wrapper {
  gap: 10px !important;
}

/* Below the 3-across breakpoint, go to a single centred column — column
   direction guarantees one card per row (avoids a 2 + 1 wrap). The breakpoint
   is set wide enough that 3-across only kicks in where each card clears ~370px. */
@media (max-width: 1200px) {
  .elementor-element-1479cea .swiper-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .elementor-element-1479cea .swiper-slide {
    flex: 0 0 auto;
    width: 100%;
    max-width: 440px;
    margin: 0 0 24px !important;
  }
  .elementor-element-1479cea .elementor-element-67b14ac .elementor-heading-title {
    font-size: 3.5rem !important;
  }
  /* stacked: let each card size to its content instead of pinning the CTA */
  .elementor-element-1479cea .elementor-element-22d1930 {
    min-height: 0 !important;
    padding: 30px 28px !important;
  }
  .elementor-element-1479cea .elementor-element-38b390d,
  .elementor-element-1479cea .elementor-element-e4f582b {
    flex: 0 0 auto !important;
  }
  .elementor-element-1479cea .elementor-element-38b390d > .e-con-inner,
  .elementor-element-1479cea .elementor-element-e4f582b > .e-con-inner {
    height: auto !important;
  }
  .elementor-element-1479cea .elementor-element-82a15d4 {
    margin-top: 0 !important;
    padding-top: 4px !important;
  }
}