body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .rotator {
    position: absolute;
    top: 0;
    left: 0;
    width: 475px;
    height: 190px;
    overflow: hidden;
  }

  .rotator img,
  .rotator video {
    width: 100%;
    height: 100%;
  }

  .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    opacity: 0; /* Ensure all slides are hidden initially */
    overflow: hidden;
  }

  .slide-in {
    animation: slideIn 1s forwards;
    opacity: 1; /* Make the slide visible when sliding in */
  }

  .slide-out {
    animation: slideOut 1s forwards;
    opacity: 1; /* Ensure the slide remains visible while sliding out */
    overflow: hidden;
  }

  @keyframes slideIn {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes slideOut {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }