/* Efect hover cu transparență și formă similară */
.stat-item {
  position: relative;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  background-color: transparent; /* Fundal transparent */
  border: 2px solid rgba(255, 255, 255, 0.15); /* Border subtil */
  border-radius: 8px; /* Colțuri rotunjite */
}

.stat-item:hover {
  transform: scale(1.05) rotate(0deg); /* Mărim elementul puțin */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Adăugăm o umbră ușor vizibilă */
  background-color: rgba(255, 255, 255, 0.1); /* Fundal transparent cu alb */
}

.stat-item p {
  transition: color 0.3s ease; /* Tranșitia culorii textului */
}

.stat-item:hover p {
  color: #00d2ff; /* Schimbăm culoarea textului la hover pentru contrast */
}

/* Animația pentru textul care se mișcă de la dreapta la stânga */
@keyframes slide-right-to-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Animația pentru textul care se mișcă de la stânga la dreapta */
@keyframes slide-left-to-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Aplicarea animației pe textul din titlu (dreapta spre stânga) */
.review-title {
  animation: slide-right-to-left 1s ease-out forwards;
}

/* Aplicarea animației pe textul din răspuns (stânga spre dreapta) */
.review-reply {
  animation: slide-left-to-right 1s ease-out forwards;
}