.wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  margin-top: -555px;
}

.animation-container {
  position: absolute;
  top: 0;
  left: 5%; /* Crop left side */
  right: 0%; /* Crop right side */
  width: 91%; /* Adjust the width accordingly */
  height: 100%;
  overflow: hidden;
}

/* Define different widths and starting positions for each line */
.line {
  position: absolute;
  height: 10px; /* Common height for all lines */
  background-color: #ffffff; /* Line color */
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.line:nth-child(1) {
  width: 50%;
  top: 10%;
  left: 100%;
  animation-name: moveLine1;
  animation-delay: 2s;
}

.line:nth-child(2) {
  width: 30%;
  top: 30%;
  left: 100%;
  animation-name: moveLine2;
  animation-delay: 3s;
}

.line:nth-child(3) {
  width: 70%;
  top: 50%;
  left: 100%;
  animation-name: moveLine3;
  animation-delay: 5s;
}

.line:nth-child(4) {
  width: 40%;
  top: 70%;
  left: 100%;
  animation-name: moveLine4;
  animation-delay: 13s;
}

.line:nth-child(5) {
  width: 60%;
  top: 90%;
  left: 100%;
  animation-name: moveLine5;
  animation-delay: 2s;
}

.line:nth-child(6) {
  width: 80%;
  top: 20%;
  left: 100%;
  animation-name: moveLine6;
  animation-delay: 10s;
}

.line:nth-child(7) {
  width: 25%;
  top: 40%;
  left: 100%;
  animation-name: moveLine7;
  animation-delay: 4s;
}

.line:nth-child(8) {
  width: 55%;
  top: 60%;
  left: 100%;
  animation-name: moveLine8;
  animation-delay: 8s;
}

.line:nth-child(9) {
  width: 45%;
  top: 80%;
  left: 100%;
  animation-name: moveLine9;
  animation-delay: 2s;
}

.line:nth-child(10) {
  width: 70%;
  top: 15%;
  left: 100%;
  animation-name: moveLine10;
  animation-delay: 6s;
}

@keyframes moveLine1 {
  0% {
      left: 100%;
  }
  100% {
      left: -50%;
  }
}

@keyframes moveLine2 {
  0% {
      left: 100%;
  }
  100% {
      left: -30%;
  }
}

@keyframes moveLine3 {
  0% {
      left: 100%;
  }
  100% {
      left: -70%;
  }
}

@keyframes moveLine4 {
  0% {
      left: 100%;
  }
  100% {
      left: -40%;
  }
}

@keyframes moveLine5 {
  0% {
      left: 100%;
  }
  100% {
      left: -60%;
  }
}

@keyframes moveLine6 {
  0% {
      left: 100%;
  }
  100% {
      left: -80%;
  }
}

@keyframes moveLine7 {
  0% {
      left: 100%;
  }
  100% {
      left: -25%;
  }
}

@keyframes moveLine8 {
  0% {
      left: 100%;
  }
  100% {
      left: -55%;
  }
}

@keyframes moveLine9 {
  0% {
      left: 100%;
  }
  100% {
      left: -45%;
  }
}

@keyframes moveLine10 {
  0% {
      left: 100%;
  }
  100% {
      left: -70%;
  }
}