:root {
  --arrows-color: var(--color-primary);
  --arrows-bg-color: var(--color-white);
}

.arrow-button-up,
.arrow-button-down {
  position: relative;
  padding: 5px;
  margin: 30px auto;
  background: var(--arrows-bg-color);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transition: all 0.2s linear;
}

.arrow-button-down:hover {
  transform: translate3d(0, 10px, 0);
}

.arrow-button-up:hover {
  transform: translate3d(0, -10px, 0);
}

.arrow-button-up::after,
.arrow-button-down::after {
  content: "";
  position: absolute;
  left: 17px;
  z-index: 11;
  display: block;
  width: 25px;
  height: 25px;
  border-top: 2px solid var(--arrows-color);
  border-left: 2px solid var(--arrows-color);
}

.arrow-button-up::after {
  top: 20px;
  transform: rotate(45deg);
}

.arrow-button-down::after {
  top: 10px;
  transform: rotate(225deg);
}

.arrow-right,
.arrow-left,
.long-arrow-right,
.long-arrow-left {
  display: block;
  margin: 30px auto;
  width: 25px;
  height: 25px;
  border-top: 2px solid var(--arrows-color);
  border-left: 2px solid var(--arrows-color);
}

.arrow-right,
.long-arrow-right {
  transform: rotate(135deg);
}

.arrow-left,
.long-arrow-left {
  transform: rotate(-45deg);
}

.long-arrow-right::after,
.long-arrow-left::after {
  content: "";
  display: block;
  width: 2px;
  height: 45px;
  background-color: black;
  transform: rotate(-45deg) translate(15px, 4px);
  left: 0;
  top: 0;
}

.triangle-left,
.triangle-right,
.triangle-top,
.triangle-bottom {
  width: 0;
  height: 0;
  margin: 30px auto;
}

.triangle-left,
.triangle-right {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

.triangle-top,
.triangle-bottom {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
}

.triangle-right {
  border-left: 30px solid var(--arrows-color);
}

.triangle-left {
  border-right: 30px solid var(--arrows-color);
}

.triangle-top {
  border-bottom: 30px solid var(--arrows-color);
}

.triangle-bottom {
  border-top: 30px solid var(--arrows-color);
}

:root {
  --swiper-theme-color: var( --color-on-light );
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 2px;
  --swiper-pagination-bullet-size: 1rem;
  --swiper-pagination-bullet-width: 1rem;
  --swiper-pagination-bullet-height: 1rem;
  --swiper-pagination-bullet-inactive-color: transparent;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 1rem;
  --swiper-pagination-bullet-vertical-gap: 1rem;
  --swiper-pagination-bullet-border-radius: var(--swiper-pagination-bullet-size);
  --swiper-pagination-align: start;
  --swiper-pagination-margin-x: auto;
  --swiper-pagination-margin-y: 0;
  --swiper-pagination-padding-y: .5rem;
  --swiper-pagination-padding-x: 0;
}

.swiper-container {
  outline: none;
  margin: 0 auto;
  border-radius: var(--radius-md);
}

.swiper-pagination-bullet {
  border: 1px solid var(--swiper-theme-color);
}

.swiper-pagination-bullet:focus,
.swiper-pagination-bullet-active {
  outline: none;
}

.swiper-button-prev, .swiper-button-next {
  text-rendering: auto;
  outline: none;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  --swiper-navigation-color: #fff;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction,
.swiper-pagination {
  width: var(--swiper-pagination-width);
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: var(--swiper-pagination-bullet-width);
}

.swiper-pagination-bullet {
  transition: width 0.2s ease-in-out;
}
/*# sourceMappingURL=libraries.css.map */