/* Left slide animation */
 .slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: slide-in-left-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes slide-in-left-animation {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Right slide animation */
  .slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    animation: slide-in-right-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes slide-in-right-animation {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Fade up animation */
  .fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes fade-in-up-animation {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Fade down animation */
  .fade-in-down {
    opacity: 0;
    transform: translateY(-20px);
    animation: fade-in-down-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes fade-in-down-animation {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Zoom in animation */
  .zoom-in {
    opacity: 0;
    transform: scale(0.5);
    animation: zoom-in-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes zoom-in-animation {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Zoom out animation */
  .zoom-out {
    opacity: 0;
    transform: scale(1.5);
    animation: zoom-out-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes zoom-out-animation {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Flip animation */
  .flip {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
    animation: flip-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes flip-animation {
    to {
      opacity: 1;
      transform: perspective(400px) rotateY(0);
    }
  }
  
  /* Bounce animation */
  .bounce {
    opacity: 0;
    animation: bounce-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes bounce-animation {
    0% {
      opacity: 0;
      transform: translateY(40px);
    }
    60% {
      opacity: 1;
      transform: translateY(-10px);
    }
    80% {
      transform: translateY(5px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Rotate animation */
  .rotate {
    opacity: 0;
    transform: rotate(-90deg);
    animation: rotate-animation 0.7s forwards;
    animation-play-state: paused;
  }

  @keyframes rotate-animation {
    to {
      opacity: 1;
      transform: rotate(0);
    }
  }