.big-numbers-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
}

.big-number-item {
    padding: 16px;
    box-sizing: border-box;
    background: #ffffff26;
    border: 1px solid #fff;
    border-radius: 20px 0;
    display: flex;
    flex-wrap: wrap;
    width: 220px;
    align-items: center;
    justify-content: center;
}


.big-number-item.style-blue {
    background: #00ACB3;
    border: 1px solid #00ACB3;
}


.big-number-item.style-red{
  background: #BB243E;
  border:1px solid #BB243E;
}

.big-number-item.style-outline{
    background: transparent;
    border: 1px solid #fff;
}


.big-number-item.style-opacity{
    background: #ffffff26;
    border: 1px solid #fff;
}

.big-number-item span, .big-number-item p {
    margin: 0;
    color: #fff;
    text-align:center;
}

.big-number-item span {
    font-size: 36px;
    font-weight: 600;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

{#.fade-in-delay {
  opacity: 0;
  animation: fadeInScale 1s ease-in-out forwards; /* Ajuste a duração conforme necessário */
}#}

/* Adicione uma classe específica para cada .big-number-item para atrasar a animação sequencialmente */
{#.fade-in-delay:nth-child(1) {animation-delay: 0.2s; /* Ajuste o atraso conforme necessário */}
.fade-in-delay:nth-child(2) {animation-delay: 0.4s;}
.fade-in-delay:nth-child(3) {animation-delay: 0.6s;}
.fade-in-delay:nth-child(4) {animation-delay: 0.8s;}
.fade-in-delay:nth-child(5) {animation-delay: 1.0s;}
.fade-in-delay:nth-child(6) {animation-delay: 1.2s;}
.fade-in-delay:nth-child(7) {animation-delay: 1.4s;}
.fade-in-delay:nth-child(8) {animation-delay: 1.6s;}
.fade-in-delay:nth-child(9) {animation-delay: 1.8s;}
.fade-in-delay:nth-child(10) {animation-delay: 2.0s;}#}

/* Continue adicionando conforme o número de .big-number-item que você tem */
@media (max-width: 768px) {
  .big-number-item{
    width:260px;
  }
}