@keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideBottom {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  /* Keyframe for sliding the text from left to right */
@keyframes slideInRight {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
}
.view-section{
    overflow: hidden;
}
.slideUpAnimate, .slideRightAnimate, .slideLeftAnimate, .slideBottomAnimate{
    opacity: 0;
  }
  
  /* Animation for cards (sliding up) */
   .animate-in-view .slideUpAnimate {
    animation: slideUp 1s ease forwards;
  }
  /* Animation for cards (sliding bottom) */
  .animate-in-view .slideBottomAnimate {
    animation: slideBottom 1s ease forwards;
  }
  /* Animation for text (sliding from left to right) */
  .animate-in-view .slideRightAnimate {
    animation: slideInRight 1s ease forwards;
    animation-delay: 0.5s; /* Slight delay for text animation */
  }
  .animate-in-view .slideLeftAnimate {
    animation: slideInLeft 1s ease forwards;
    animation-delay: 0.5s; /* Optional: Adjust delay if needed */
}