@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

/* Slide in from the left */
@-webkit-keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* Slide in from the right */
@-webkit-keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* Classes to apply the animations */
.slide-in-left {
  -webkit-animation: slideInLeft 0.5s ease-in-out forwards;
  animation: slideInLeft 0.5s ease-in-out forwards;
}

.slide-in-right {
  -webkit-animation: slideInRight 0.5s ease-in-out forwards;
  animation: slideInRight 0.5s ease-in-out forwards;
}

/* Animazione del bounce per l'icona */
@keyframes iconBounce {
  0% {
    transform: translateY(0); /* posizione iniziale */
  }
  30% {
    transform: translateY(-10px); /* si solleva leggermente */
  }
  50% {
    transform: translateY(0); /* torna alla posizione iniziale */
  }
  70% {
    transform: translateY(-10px); /* altra piccola sollevata */
  }
  100% {
    transform: translateY(0); /* torna di nuovo alla posizione iniziale */
  }
}

/* Icona con animazione */
.bounce {
  animation: iconBounce 1.5s ease-in-out infinite; /* animazione bounce */
}

/* Card Zoom Hover */
.zoom {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ombra leggera */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* transizioni fluide */
}

/* Hover effect: ingrandisce e aggiunge un'ombra alla card */
.zoom:hover {
  transform: translateY(-10px); /* solleva la card */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ombra più forte */
}

.zoom_simple {
  transition: transform 0.3s ease; /* transizioni fluide */
}

.zoom_simple:hover {
  transform: scale(1.1); /* ingrandisce il numero al passaggio del mouse */
}