:root {
  --bodybg: #ffffff;
  --primary: #2C618A;
  --secondary: #000000;
  --tertiary: #1487BF;
  --title:#1D5B86;
  /* --topnavbar-bg: #FBFCFD; */
  --menuactive: #000000;
  --menuhover: #000000;
  --white: #ffffff;
  --subtext: #1B2128;
  --transition: all 0.3s ease;
  --linkhover: #000000;
  --card-title: #066D7C;
  --text: #4B5563;
  --bs-accordion-bg: #FBFCFD;
  --footer: #075981;
  --footer-icon: #ffffff;
  --footerlink:#ffffff;
  --footerlinkhover:#000000;
  --footer-text: #ffffff;
}

.loop-wrapper {
  margin: 0;
  display: block;
  width: 100%;
  overflow: hidden;
  color: #fff;
  background-image: url(../images/petrol-pump.svg);
  background-repeat: no-repeat;
  background-position: right 40px bottom 0;
  background-size: 140px auto;
}

.road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25px;
  background: #938d8d;
}
.road::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    90deg,
    #d9dee7 0,
    #d9dee7 18px,
    transparent 18px,
    transparent 36px
  );
  opacity: 0.9;
}
.tree{
  position: absolute;
  height: 100px; 
  width: 90px;
  bottom: 0;
  right: 39%;
  background: url(../images/petrol-pump.svg) no-repeat;
}
.rock {
  margin-top: -17%;
  height: 2%; 
  width: 2%;
  bottom: -2px;
  border-radius: 20px;
  position: absolute;
  background: #ddd;
}
.truck, .wheels {
  transition: all ease;
  width: 85px;
  margin-right: 0;
  bottom: 0px;
  left: -120px;
  position: absolute;
  background: #eee;
}
.truck {
  background: url(../images/truck.svg) no-repeat;
  background-size: contain;
  height: 60px;
}
.truck:before {
  content: " ";
  position: absolute;
  width: 25px;
  box-shadow:
    -30px 28px 0 1.5px #fff,
     -35px 18px 0 1.5px #fff;
}
.wheels {
  background: url(../images/wheels.svg) no-repeat;
  height: 15px;
  margin-bottom: 0;
}

.rock  { animation: rock 4s   -0.530s linear infinite; }
.truck  { animation: truck-move 10s 0.000s linear infinite; }
.wheels { animation: truck-move 10s 0.000s linear infinite; }
.truck:before { animation: wind 1.5s   0.000s ease infinite; }


@keyframes rock {
  0%   { right: -200px; }
  100% { right: 2000px; }
}
@keyframes truck-move {
  0% { transform: translateX(-120px); }
  40% { transform: translateX(60vw); }
  73.333% { transform: translateX(60vw); bottom: 5px; }
  100% { transform: translateX(120vw); }
}
@keyframes wind {
  0%   {  }
  50%   { transform: translateY(3px) }
  100%   { }
}