#nextControl, #prevControl {
  width: 40px;
  height: 40px;
}

#carousel-container {
  margin: 50px 0;
  z-index: 999;
}

.carousel-control-prev-icon {
  background-image: url('../img/fuel-arrows-01.svg') ! important;
}

.carousel-control-next-icon {
  background-image: url("../img/fuel-arrows-02.svg") ! important;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

/* zero to small screens */
@media (max-width: 576px) {
  .carousel-item {
      width: 100%;
      position: relative;
      min-height: 1px;
      overflow: hidden;
  }

  .carousel-inner {
      width: 50%;
      margin-left: 25%;
      height: auto;
  }

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(100%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-100%);
  }

  .fuel-img {
      top: 0;
      left: 0;
      height: 200px;
      width: 200px;
      object-fit: contain;
  }
}

/* small to medium screens */
@media (min-width: 577px) and (max-width: 767px) {
  .carousel-item {
      width: 100%;
      position: relative;
      min-height: 1px;
      overflow: hidden;
  }

  .carousel-inner {
      width: 80%;
      margin-left: 10%;
      height: auto;
  }

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(50%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-50%);
  }

  .fuel-img {
      top: 0;
      left: 0;
      height: 200px;
      width: 200px;
      object-fit: contain;
  }
}

/* Medium to large screens */
@media (min-width: 768px) and (max-width: 991px) {
  .carousel-item {
      width: 100%;
      position: relative;
      min-height: 1px;
      overflow: hidden;
  }

  .carousel-inner {
      width: 80%;
      margin-left: 10%;
      height: auto;
  }

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
  }
}

/* large and up screens */
@media (min-width: 992px) {
  .carousel-item {
      width: 100%;
      position: relative;
      min-height: 1px;
      overflow: hidden;
  }

  .carousel-inner {
      width: 80%;
      margin-left: 10%;
      height: auto;
  }

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0);
}