html, body {
      margin: 0;
      padding: 0;
    }

    .scroll-wrapper {
     height: min(60vh, 550px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  cursor: grab;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-image: url('/frontend/assets/carimages/rd.png'); 
  background-repeat: repeat-x;
  background-size: auto 100%;
  image-rendering: pixelated;
  background-position-x: 0;
  background-position-y: center;
  position: relative;
    }

    .scroll-wrapper::-webkit-scrollbar {
      display: none;
    }

    .scroll-wrapper:active {
      cursor: grabbing;
    }

    .road-track {
      min-width: 100vw;
      height: 100%;
    }
    .image-one img {
    max-width: 28px;
    position: absolute;
    left: 20%;
    top: 1%;
    z-index: 99;
}

.image-two img {
    max-width: 28px;
    position: absolute;
    bottom: 11%;
    left: 20%;
    z-index: 99;
}
.image-three img {
    max-width: 50px;
    top: 46%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 99;
}

.image-four img {
    max-width: 20px;
    position: absolute;
    left: 30%;
    top: 0%;
}

/*animation*/
img.img-fluid.bus {
    max-width: 128px;
    top: 21%;
    position: absolute;
    left: -13%;
     animation: driveBus 9s linear infinite;
  animation-delay: 2s; 
}
img.img-fluid.car {
    max-width: 100px;
    position: absolute;
    top: 33%;
    left: -6%;
    animation: driveCar 8s linear infinite;
}
img.img-fluid.truck {
    max-width: 105px;
    position: absolute;
    bottom: 14%;
    right: 0%;
    animation: driveRightToLeft 8s linear infinite;
}

@keyframes driveCar {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(120vw); 
  }
}

@keyframes driveBus {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(120vw);
  }
}

@keyframes driveRightToLeft {
  0% {
    transform: translateX(120vw); 
  }
  100% {
    transform: translateX(-150vw);
  }
}

img.img-fluid.big-truck {
    max-width: 136px;
    position: absolute;
    bottom: 26%;
    right: -12%;
    animation: drivesRightToLeft 8s linear infinite;
    animation-delay: 2s;
}

@keyframes drivesRightToLeft {
  0% {
    transform: translateX(120vw); 
  }
  100% {
    transform: translateX(-150vw);
  }
}
.gantry {
    position: absolute;
    top: 2%;
    max-width: 5%;
    left: 10%;
    z-index: 999;
}

.gantry-two{
   position: absolute;
    bottom: 0%;
    max-width: 65px;
    left: 90%;
    z-index: 999;
}
@media(max-width: 1440px){
 .scroll-wrapper{
   min-height: 550px;
 }

      .gantry {
        position: absolute;
        top: 3%;
        max-width: 65px;
        left: 53%;
        z-index: 999;
    }
}

@media(max-width: 1250px){
      .gantry {
        position: absolute;
        top: 3%;
        max-width: 65px;
        left: 56%;
        z-index: 999;
    }
    .gantry-two {
    position: absolute;
    bottom: 1%;
    max-width: 65px;
    left: 90%;
    z-index: 999;
}
}

@media(max-width: 1024px){
   .gantry-two {
    left: 70%;
}
.gantry {
        left: 10%;
       
    }
}