.diagonal {
    margin-top: -2em;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0 10em 0 10em;
    --skew-angle: -2deg;
    --background: linear-gradient(42deg, rgba(2,0,36,1) 0%, rgba(19,35,80,1) 49%, rgba(40,70,157,1) 100%);
    position: relative;
    isolation: isolate;
    z-index: 2;
}



.diagonal::after {
    content: '';
    background: var(--background);
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(var(--skew-angle));
}




.statCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80vh;
    flex-direction: column;
    justify-content: center;

}

.statCardHeader {
    text-align: center;
    color: var(--orange-color);
    font-family: "ubuntoRegular";
    font-size: calc(5rem + 2vw);

}

.statCardHeader2 {
    text-align: center;
    font-family: "ubuntoRegular";
    font-size: calc(2rem + 1vw); 
    margin-top: -1em;
}

.statCardHeader3 {
max-width: 13vw;
    text-align:justify;
    font-family: "montserratMedium";
    font-size: calc(0.5rem + 0.5vw); 
    padding: 1em 0em 1em 0em;
    color: #b08968;
}


@media screen and (max-width: 1000px){
  .diagonal {
    padding: 0 1em 0 1em;

  }

  .statCard {
      height: 50vh;
  }

 .statCardHeader {
  font-size: 1.8em;
 }

  .statCardHeader2 {
  font-size: 1.3em;
 }

  .statCardHeader3 {
  font-size: 0.7em;
  max-width: 27vw;
  text-align:left;
 }


}



/* --- Odometer for stat cards --- */
.stat-odo {
  display: inline-flex;
  gap: .25ch;
  line-height: 1;
  font-variant-numeric: tabular-nums slashed-zero;
  /* Inherit your existing size/color from .statCardHeader */
}
.stat-odo__slot {
  position: relative;
  overflow: hidden;
  display: inline-block;
  border-radius: 6px;          /* subtle rounding */
}
.stat-odo__wheel {
  position: relative;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.stat-odo__digit {
  display: block;
  text-align: center;
  font-weight: 800;
  /* Height/width set via JS so the glyph fits perfectly */
}
.stat-odo__static {
  display: inline-block;
  font-weight: inherit;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .stat-odo__wheel { transition: none !important; }
}




  .slot { position: relative; width: var(--slotwpx); height: var(--slotpx); overflow: hidden; display:inline-block; }
  .wheel { position: relative; transform: translate3d(0,0,0); will-change: transform; }
  .digit { display:block; width: var(--slotwpx); height: var(--slotpx); font-size: var(--digit-size); line-height: var(--slotpx); text-align:center; font-weight:800; }
  .odo-group { display:inline-flex; align-items:center; gap:.1em; }