[class^="number-slide"],
[class*=" number-slide"] {
  background: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #fff;
  font-weight: 500;
  height: 300px;
  max-height: 100vh;
}

.number-slide1 {
  background: rgb(64, 175, 255);
  background: linear-gradient(
    128deg,
    rgba(64, 175, 255, 1) 0%,
    rgba(63, 97, 255, 1) 100%
  );
}

.number-slide2 {
  background: rgb(255, 75, 64);
  background: linear-gradient(
    128deg,
    rgba(255, 154, 63, 1) 0%,
    rgba(255, 75, 64, 1) 100%
  );
}

.number-slide3 {
  background: rgb(182, 255, 64);
  background: linear-gradient(
    128deg,
    rgba(182, 255, 64, 1) 0%,
    rgba(63, 255, 71, 1) 100%
  );
  background: linear-gradient(
    128deg,
    rgba(189, 255, 83, 1) 0%,
    rgba(43, 250, 82, 1) 100%
  );
}

.number-slide4 {
  background: rgb(64, 255, 242);
  background: linear-gradient(
    128deg,
    rgba(64, 255, 242, 1) 0%,
    rgba(63, 188, 255, 1) 100%
  );
}

.number-slide5 {
  background: rgb(255, 64, 156);
  background: linear-gradient(
    128deg,
    rgba(255, 64, 156, 1) 0%,
    rgba(255, 63, 63, 1) 100%
  );
}
.number-slide6 {
  background: rgb(64, 76, 255);
  background: linear-gradient(
    128deg,
    rgba(64, 76, 255, 1) 0%,
    rgba(174, 63, 255, 1) 100%
  );
}

.navigation-wrapper {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.dots {
  display: flex;
  padding: 10px 0;
  justify-content: start;
  margin: 40px 0;
}

.dot {
  border: none;
  width: 10px;
  height: 10px;
  background: black;
  opacity: 0.2;
  border-radius: 50%;
  margin: 0 5px;
  padding: 5px;
  cursor: pointer;
}

.dot:focus {
  outline: none;
}

.dot--active {
  background: black;
  opacity: 1;
}

.arrow {
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 10px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  fill: #fff;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(8, 4, 5, 0.15);
}

.arrow--left {
  /* left: 5px; */
  right: 65px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --%3E%3Cpath fill='currentColor' d='M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l176 176c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272 496 272c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 240 203.3 91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-176 176z'/%3E%3C/svg%3E");
}

.arrow--right {
  /* left: auto; */
  right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --%3E%3Cpath fill='currentColor' d='M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-176-176c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0-148.7 148.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l176-176z'/%3E%3C/svg%3E");
}

.arrow--disabled.arrow--left {
  background-color: #323232;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --%3E%3Cpath fill='currentColor' d='M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l176 176c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272 496 272c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 240 203.3 91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-176 176z'/%3E%3C/svg%3E");
}

.arrow--disabled.arrow--right {
  background-color: #323232;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --%3E%3Cpath fill='currentColor' d='M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-176-176c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0-148.7 148.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l176-176z'/%3E%3C/svg%3E");
}

.showroom-carousel ~ .arrow {
  display: none !important;
}
.showroom-carousel ~ .dots {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .arrow {
    display: none !important;
  }
  .dots {
    justify-content: center;
  }
  .shorts-carousel ~ .arrow {
    display: block !important;
  }
  .shorts-carousel ~ .dots {
    justify-content: start;
  }
  .blog-shorts-carousel ~ .arrow {
    display: block !important;
  }
  .blog-shorts-carousel ~ .dots {
    justify-content: start;
  }
}

@media screen and (min-width: 768px) {
  .grid-carousel ~ .arrow {
    display: none !important;
  }
  .grid-carousel ~ .dots {
    display: none !important;
  }
  .reviews-carousel ~ .arrow {
    display: none !important;
  }
  .reviews-carousel ~ .dots {
    display: none !important;
  }
  .four-carousel ~ .arrow {
    display: none !important;
  }
  .four-carousel ~ .dots {
    display: none !important;
  }
  .blog-shorts-carousel ~ .arrow {
    display: none !important;
  }
  .blog-videos-carousel ~ .arrow {
    bottom: -20px !important;
  }
  .blog-shorts-carousel ~ .dots {
    display: none !important;
  }
}

.fader {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.fader__slide {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  opacity: 0;
}

.fader img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

@media (max-width: 768px) {
  .fader img {
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 768px) {
  .arrow-fader ~ .dots {
    display: none !important;
  }

  .arrow-fader ~ .arrow {
    bottom: -100px;
  }
  .arrow-fader ~ .arrow--left {
    left: calc(48% - 48px);
    margin-left: -5px;
  }
  .arrow-fader ~ .arrow--right {
    left: 52%;
    margin-left: 5px;
  }
}

.thumbnail .keen-slider__slide {
  font-size: 30px;
  margin-top: 10px;
  height: 100px;
}
.thumbnail .keen-slider__slide {
  cursor: pointer;
}
.thumbnail .keen-slider__slide.active {
  border: 2px dashed black;
}

.recent-cars-carousel + .dots {
  .dot {
    background-color: #868686 !important;
    opacity: 0.2 !important;
  }

  .dot--active {
    background: #868686 !important;
    opacity: 1 !important;
  }
}