/* ------------------------------
    Companion CSS
------------------------------ */
/*Swiper CSS*/
.swiper-button-next,
.swiper-button-prev {
  color: var(--color-dark-3);
  right: 50px;
  left: auto;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-image: none;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 50px;
  padding-right: 50px;
  text-align: right;
  font-size: var(--font-size-medium);
}
.swiper-button-next {
  top: calc(50% + 50px);
}
.swiper-button-prev {
  top: calc(50% - 50px);
}
.swiper-pagination-current {
  color: var(--color-primary);
  font-size: var(--font-size-large);
}
.swiper-button-next::after,
.swiper-rtl .swiper-button-prev::after {
  content: "next";
  color: var(--color-primary);
}
.swiper-horizontal > .swiper-scrollbar {
  right: 27px;
  left: auto;
  top: 50%;
  width: 70px;
  height: 4px;
  -webkit-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
  background: var(--color-dark-3);
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 24px;
}
.swiper-scrollbar-drag {
  background: var(--color-white);
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--color-primary) !important;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  height: 8px;
  bottom: 0;
  top: auto;
}
@media screen and (max-width: 1024px) {
  .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 30px;
    padding-right: 30px;
  }
  .swiper-button-next,
  .swiper-button-prev {
    right: 30px;
  }
  .swiper-horizontal > .swiper-scrollbar {
    right: 8px;
  }
}
@media screen and (max-width: 575px) {
  .swiper-horizontal > .swiper-scrollbar {
    right: 3px;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 24px;
  }
  .swiper-button-next {
    top: calc(50% + 50px);
  }
  .swiper-button-prev {
    top: calc(50% - 50px);
  }
  .swiper-button-next,
  .swiper-button-prev {
    right: 25px;
  }
  .swiper-pagination-fraction {
    padding-right: 25px;
  }
}
@media screen and (max-width: 480px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
  .swiper-horizontal > .swiper-scrollbar {
    display: none;
  }
}
@media screen and (max-width: 360px) {
  .swiper-pagination-fraction {
    padding-right: 25px;
    bottom: 25px;
  }
}