/**** STATS GRID TEXT Layout ****/
/**** STYLES DESKTOP, MOBILE AND TABLET FOR STATS GRID TEXT (Numbers are text) ****/
/**** Layout is Responsive ****/
.stats-grid-text {
  background: #f2f2f2;
  padding: 70px 0;
}

/* Control spacing between stacked stats in each 50% column */
.stats-grid-text .aem-GridColumn {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

/* Remove extra AEM text component spacing */
.stats-grid-text .cmp-text {
  margin-bottom: 0 !important;
}

/* Individual stat block */
.stats-grid-text .stat-block {
  text-align: center;
  padding: 0 25px;
}

/* Title */
.stats-grid-text .stat-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #000;
}

/* Main Number */
.stats-grid-text .stat-number {
  font-weight: 800;
  font-size: 58px;
  line-height: 1;

  /* Spacing between numbers and letters*/
  letter-spacing: -1px;   /* tighter characters */

  margin-bottom: 20px;
  color: #0071ac;

  display: inline-flex;
  align-items: baseline;

  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}

/* Number value */
.stats-grid-text .stat-value {
  display: inline-block;
  transform: scale(1.04);
}

/* Raised Plus Sign (leave as-is since you said it's good) */
.stats-grid-text .stat-plus {
  font-size: 0.55em;
  position: relative;
  top: -0.55em;
  margin-left: -1px; /* spacting between the number and + sign */
}

/* Description */
.stats-grid-text .stat-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 360px;
  margin: 0 auto;
}


@media (max-width: 991px) {
  .stats-grid-text {
    padding: 50px 0;
  }

  .stats-grid-text .aem-GridColumn {
    gap: 35px;
  }

  .stats-grid-text .stat-number {
    font-size: 48px;
  }
}

/* Fixes spacing between first row and second row */
@media (max-width: 767px) {
  .stats-grid-text .aem-Grid > .aem-GridColumn:nth-child(2) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 575px) {
  .stats-grid-text .stat-number {
    font-size: 42px;
  }

  .stats-grid-text .stat-title {
    font-size: 16px;
  }

  .stats-grid-text .stat-desc {
    font-size: 13px;
  }

  .stats-grid-text .aem-GridColumn {
    gap: 30px;
  }

  .stats-grid-text .aem-Grid > .aem-GridColumn:nth-child(2) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/*** END OF STATS GRID TEXT Layout ****/






/**** STATS GRID Layout ****/
/**** STYLES DESKTOP, MOBILE AND TABLET FOR STATS GRID COMPONENT ****/
/**** Layout is Responsive ****/

/* clear out margin inside each card area */
.stats-grid .columnctrcomp.section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* clear out padding inside each card area */
.stats-grid  .text.section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* MOBILE Phone: 1 column (stack), equal spacing between all cards */
@media (max-width: 767px) {
  .stats-grid  {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important; /* spacing between the 2 cards inside EACH row */
  }

  .stats-grid  > section {
    float: none !important;
    width: 100% !important;
  }

  /* spacing BETWEEN section 1 (row1) and section 2 (row2) */
  .stats-grid  + .columnctrcomp.section {
    margin-top: 20px !important; /* keep equal spacing in mobile */
  }
}

/* TABLET: 2 columns, equal spacing + equal card heights per row */
@media (min-width: 768px) and (max-width: 991px) {
  .stats-grid  {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
  }

  .stats-grid  > section {
    float: none !important;
    width: 100% !important;

    /* match heights within the row */
    align-self: stretch !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ONLY 15px under the first section (between row1 and row2) */
  .columnctrcomp.section + .columnctrcomp.section {
    margin-top: 15px !important;
  }
}

/* "card" feel for mobile + tablet only */
@media (max-width: 991px) {
  .stats-grid.stats-grid--bg  > section {
    padding: 25px 15px !important;
    background: #fff; /*this is optional, just makes it feel like a card */
  }
}

/* DESKTOP: ONLY 15px under the first section (between row1 and row2) */
@media (min-width: 992px) {
  .columnctrcomp.section + .columnctrcomp.section {
    margin-top: 80px !important;
  }
}
/**** END OF STYLES FOR STATS GRID Layout****/







/**** IMAGE DROP 1120 Layout ****/
/**** INSIDE OF 50/50 COLUMN CONTROL, DROPS IMAGE THAT IS LOCATED TO THE RIGHT OF TEXT UNDER TEXT STARTING AT RESOLUTION 1120PX ***/
/* When screen is 1120px or smaller, stack image under text */
@media (max-width: 1120px) {

  .image-drop-1120 {
    display: flex !important;
    flex-direction: column !important;
  }

  .image-drop-1120 > section {
    width: 100% !important;
    float: none !important;
  }

}/*** End IMAGE-DROP-1120 Layout ****/