@keyframes border-grow {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}

@keyframes fade-in-top-stat {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat__number .couter-suffix sup {
  font-size: var(--h5-fs);
}
.stats__wrapper {
  flex: 1;
  opacity: 0; /* Ensure the element is hidden initially */
  transform: translateY(-20px); /* Initial position */
}

.animate.stats__wrapper:nth-child(1) {
  animation: fade-in-top-stat calc(400ms * 1) ease-in forwards;
}

.animate.stats__wrapper:nth-child(2) {
  animation: fade-in-top-stat calc(400ms * 2) ease-in forwards;
}

.animate.stats__wrapper:nth-child(3) {
  animation: fade-in-top-stat calc(400ms * 3) ease-in forwards;
}

.animate.stats__wrapper:nth-child(4) {
  animation: fade-in-top-stat calc(400ms * 4) ease-in forwards;
}

.animate.stats__wrapper:nth-child(5) {
  animation: fade-in-top-stat calc(400ms * 5) ease-in forwards;
}

.stat::before {
  position: absolute;
  width: 1px;
  height: 0; /* Initial height */
  content: '';
  top: 0;
  left: 0;
  background: black;
  display: block;
}

.animate.stats__wrapper:nth-child(1) .stat::before {
  animation: border-grow 600ms calc(400ms * 1) ease-in forwards;
}

.animate.stats__wrapper:nth-child(2) .stat::before {
  animation: border-grow 600ms calc(400ms * 2) ease-in forwards;
}

.animate.stats__wrapper:nth-child(3) .stat::before {
  animation: border-grow 600ms calc(400ms * 3) ease-in forwards;
}

.animate.stats__wrapper:nth-child(4) .stat::before {
  animation: border-grow 600ms calc(400ms * 4) ease-in forwards;
}

.animate.stats__wrapper:nth-child(5) .stat::before {
  animation: border-grow 600ms calc(400ms * 5) ease-in forwards;
}
@media (max-width: 576px){
.stats__wrapper{
width: 50%;
flex: auto;
min-width: 50%;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .stats__wrapper {
    max-width: calc(50% - var(--sm-1));
  }
}