:root {
  --swiper-navigation-color: #520C54;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-top-offset: 40%;
}

.swiper-button-next,
.swiper-button-prev {
  /* background-color: red */
}

.swiper-button-next {
  background-image: url('icon-arrow.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-button-prev {
  background-image: url('icon-arrow.svg');
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}

@media (max-width: 1980px) {
  .swiper-button-next {
    right: -38px !important;
    background-size: cover;
  }
  .swiper-button-prev {
    left: -38px !important;
    background-size: cover;
  }
}

:dir(rtl) .swiper-button-next {
  left: -38px !important;
  right: auto !important;
  transform: rotate(180deg);
}
:dir(rtl) .swiper-button-prev {
  right: -38px !important;
  left: auto !important;
  transform: rotate(0deg);
}

@media (max-width: 1500px) {
  .swiper-button-next {
    right: 0px !important;
    background-size: auto 20px;
  }
  .swiper-button-prev {
    left: 0px !important;
    background-size: auto 20px;
  }

  :dir(rtl) .swiper-button-next {
    left: 0px !important;
    right: auto !important;
    background-size: auto 20px;
    transform: rotate(180deg);
  }
  :dir(rtl) .swiper-button-prev {
    right: 0px !important;
    left: auto !important;
    background-size: auto 20px;
    transform: rotate(0deg);
  }
}