<!-- start Simple Custom CSS and JS -->
<style type="text/css">
.icon-card {

  position: relative;

  cursor: pointer;

  transition:

    transform 350ms cubic-bezier(.22, 1, .36, 1),

    border-color 350ms ease,

    box-shadow 350ms ease;



  transform-origin: center;

  z-index: 1;

}



@media(min-width:992px) {

.icon-card {

}

}



.icon-card:hover {

  transform: translateY(-8px) scale(1.025);

  z-index: 5;



  border-color: var(--medium-grey);



  box-shadow:

    0 18px 40px rgba(0, 0, 0, 0.28);

}



@media(min-width:992px) {

.icon-card-title {

	margin-top: 32px;

}

}





/* ==========================================================================

   IMPACT CARDS

   ========================================================================== */

.impact-card-row {

  --impact-card-width: calc((100% - 24px) / 4);

  --impact-card-direction: row;

  --impact-card-basis: var(--impact-card-width);

}



.impact-card-row,

.impact-card-row > .elementor-container,

.impact-card-row > .elementor-container > .elementor-row,

.impact-card-row > .e-con-inner {

  display: flex;

  flex-direction: var(--impact-card-direction);

  gap: 8px;

  flex-wrap: wrap;

  align-items: stretch;

}



/* Card widths include the gutters so four cards fit on desktop. */

.impact-card-row > .impact-card,

.impact-card-row > .elementor-container > .impact-card,

.impact-card-row > .elementor-container > .elementor-row > .impact-card,

.impact-card-row > .e-con-inner > .impact-card {

  width: var(--impact-card-width) !important;

  max-width: var(--impact-card-width) !important;

  flex: 0 0 var(--impact-card-basis) !important;

}



@media (max-width: 1024px) {

  .impact-card-row {

    --impact-card-width: calc((100% - 8px) / 2);

  }

}



@media (max-width: 767px) {

  .impact-card-row {

    --impact-card-width: 100%;

    --impact-card-direction: column;

    --impact-card-basis: auto;

  }

}



.impact-card {

  position: relative;

  box-sizing: border-box;

  max-width: 100% !important;

  min-width: 0;

  overflow-wrap: anywhere;

  border-radius: 14px;

  transform-origin: center;

  z-index: 1;

  box-shadow:

    0 -1px 0 rgba(174, 255, 0, 0),

    0 -10px 30px rgba(174, 255, 0, 0),

    0 -24px 70px rgba(174, 255, 0, 0),

    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transition:

    transform 350ms cubic-bezier(.22, 1, .36, 1),

    border-color 350ms ease,

    box-shadow 350ms ease;

}



.impact-card:hover {

  transform: translateY(-8px) scale(1.025);

  z-index: 5;

  box-shadow:

    0 -1px 0 rgba(174, 255, 0, 0.28),

    0 -10px 30px rgba(174, 255, 0, 0.10),

    0 -24px 70px rgba(174, 255, 0, 0.05),

    inset 0 1px 0 rgba(255, 255, 255, 0.08);

}



/* Clipped to the card without clipping its outer shadow or hover lift. */

.impact-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  border-radius: inherit;

  pointer-events: none;

  background: radial-gradient(

    circle 220px at var(--impact-glow-x, 50%) var(--impact-glow-y, 50%),

    rgba(176, 240, 0, 0.20) 0%,

    rgba(176, 240, 0, 0.08) 38%,

    rgba(176, 240, 0, 0) 75%

  );

  box-shadow: inset 0 0 24px rgba(176, 240, 0, 0.07);

  opacity: 0;

  transition: opacity 350ms ease;

}



@media (hover: hover) and (pointer: fine) {

  .impact-card:hover::after {

    opacity: 1;

  }

}



/* Touch screens keep a stable layout without a sticky hover lift. */

@media (hover: none), (pointer: coarse) {

  .impact-card:hover {

    transform: none;

  }

}



@media (prefers-reduced-motion: reduce) {

  .impact-card,

  .impact-card::after {

    transition: none;

  }



  .impact-card:hover {

    transform: none;

  }

}


/* STRONGER — keep the word on one line at tablet widths.
   Supports impact-word on the Heading widget or its parent card.
   The literal-dot selector supports the class currently saved in Elementor. */
@media (min-width: 768px) and (max-width: 1440px) {
  .impact-card .impact-word .elementor-heading-title,
  .impact-card .elementor-heading-title.impact-word,
  .impact-card.impact-word .num-perc .elementor-heading-title,
  .impact-card[class~=".impact-word"] .num-perc .elementor-heading-title {
    font-size: clamp(32px, 4vw, 40px) !important;
    line-height: 1.05;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

</style>
<!-- end Simple Custom CSS and JS -->
