/* Define the initial state of the element */
.fade-slide-up {
  opacity: 0;
  transform: translateY(20px); /* Initial position below */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Adjust transition duration */
}

/* Usage example */
.fade-slide-up.delayed {
  opacity: 1; /* Ensure opacity is set to 1 initially for smooth transition */
  transform: translateY(0); /* Ensure initial position is at the top */
  transition-delay: 0.5s; /* Add a delay */
}

  /* 2nd animation */
  .fade-in {
    animation: fadeIn 1s ease forwards;
  }
  
  .fade-out {
    animation: fadeOut 1s ease forwards;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }