.contianer-loader{
  position: fixed;
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  z-index: 200;
  justify-content: center;
  display: none;
  background-color: white;
}

.background-loader, .car-loader{
  position: absolute;
}

.background-loader{
  height: 600px;
  background-image: url('/images/Background_loader.webp');
  background-size: cover; /* Ensures the background fills the element */
  background-position: center;
  background-repeat: no-repeat;
  top:80px;
  width: 1428px;
  overflow:hidden;
}

.car-loader {
  height: 118px;
  z-index: 2001;
  bottom: 40px;
  transform: scaleX(-1);
  animation: carMove 5s linear infinite;
  --background-width: 100%;
  right:-228px;
}

@keyframes carMove {
  0% {
      transform: translateX(0) scaleX(-1); /* Start at the left edge */
  }
  100% {
      transform: translateX(calc(100% - var(--background-width))) scaleX(-1); /* Move to the right edge */
  }
}

.fetching-text {
  font-size: 40px;
  font-weight: bold;
  color: #333;
}

.dots::after {
  content: '';
  animation: dots 2s steps(3, end) infinite;
}

@keyframes dots {
  0% {
      content: '';
  }
  33% {
      content: '.';
  }
  66% {
      content: '..';
  }
  100% {
      content: '...';
  }
}

@media (max-width: 480px) {
  .container_loader{
    width: 100vw;
    height: 860px;
  }
  .background-loader{
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    overflow: hidden;
    background-size: 1400px;
    height: 113%;
  }

  .fetching-text {
    font-size: 31px;
    font-weight: bold;
    color: #333;
    margin-right: 20px;
  }

  .car-loader{
    height: 118px;
    z-index: 200;
    top: 639px;
    transform: scaleX(-1);
    animation: carMove 2s linear infinite;
    --background-width: 100%;
    right: -228px;
  }
}