.slide-in-box {

      /* Link the keyframe animation */
     
      animation: slideInLeft 1s ease-out forwards;
      animation-timeline: scroll();
      animation-range: entry 10% exit 80%; 
    }

    /* Define the animation steps */
    @keyframes slideInLeft {
      0% {
        transform: translateX(-100%); /* Start completely hidden off-screen to the left */
        opacity: 0;                   /* Optional: fade in simultaneously */
      }
      100% {
        transform: translateX(0);     /* End at its natural layout position */
        opacity: 1;
      }
    }

    .slide-in-box-right {

      /* Link the keyframe animation */
     
      animation: slideInRight 1s ease-out forwards;
      animation-timeline: scroll();
      animation-range: entry 10% exit 80%; 
    }

    /* Define the animation steps */
    @keyframes slideInRight {
      0% {
        transform: translateX(+100%); /* Start completely hidden off-screen to the left */
        opacity: 0;                   /* Optional: fade in simultaneously */
      }
      100% {
        transform: translateX(0);     /* End at its natural layout position */
        opacity: 1;
      }
    }
 
    body {
      overflow-x: visible;
    }