/* Slide-in from the bottom */
.slide-bottom {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
  }
  
  .slide-bottom.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Slide-in from the top */
  .slide-top {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
  }
  
  .slide-top.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Slide-in from the right */
  .slide-right {
    opacity: 0;
    transform: translateX(100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
  }
  
  .slide-right.visible {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Slide-in from the left */
  .slide-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
  }
  
  .slide-left.visible {
    opacity: 1;
    transform: translateX(0);
  }
  
  
  /* Keyframes */
  @keyframes slideInBottom {
    0% {
      transform: translateY(100%); /* Start off-screen below */
      opacity: 0; /* Initially hidden */
    }
    100% {
      transform: translateY(0); /* Slide into place */
      opacity: 1; /* Fully visible */
    }
  }
  
  @keyframes slideInTop {
    0% {
      transform: translateY(-100%); /* Start off-screen above */
      opacity: 0; /* Initially hidden */
    }
    100% {
      transform: translateY(0); /* Slide into place */
      opacity: 1; /* Fully visible */
    }
  }
  
  @keyframes slideInRight {
    0% {
      transform: translateX(100%); /* Start off-screen to the right */
      opacity: 0; /* Initially hidden */
    }
    100% {
      transform: translateX(0); /* Slide into place */
      opacity: 1; /* Fully visible */
    }
  }
  
  @keyframes slideInLeft {
    0% {
      transform: translateX(-100%); /* Start off-screen to the left */
      opacity: 0; /* Initially hidden */
    }
    100% {
      transform: translateX(0); /* Slide into place */
      opacity: 1; /* Fully visible */
    }
  }