/* Define the animation for slide-in-up */
    @keyframes slideInUp {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Define the animation for slide-in-down */
    @keyframes slideInDown {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Define the animation for fade-in */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    /* Apply the animation to the image */
    .slide-in-up {
      animation: slideInUp 1s ease-out;
    }

    .slide-in-down {
      animation: slideInDown 1s ease-out;
    }

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