img, figure {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.swiper-button-disabled,
.swiper-button-disabled:disabled {
  background-color: var(--si-carousel-nav-btn-bg);
  color: var(--si-carousel-nav-btn-disabled-color) !important;
  box-shadow: var(--si-carousel-nav-btn-box-shadow) !important;
  opacity: 1;
}

.swiper-button-disabled.shadow-none,
.swiper-button-disabled:disabled.shadow-none {
  box-shadow: none !important;
}

.pagination .swiper-button-disabled,
.pagination .swiper-button-disabled:disabled {
  background-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.swiper .btn-prev:not(.position-static),
.swiper .btn-next:not(.position-static) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.swiper .btn-prev {
  left: 1.25rem;
}
.swiper .btn-next {
  right: 1.25rem;
}

.swiper-nav-onhover .btn-prev,
.swiper-nav-onhover .btn-next {
  opacity: 0 !important;
}
.swiper-nav-onhover:hover .btn-prev, .swiper-nav-onhover:hover .btn-next {
  opacity: 1 !important;
}

.swiper-pagination {
  --si-carousel-pagination-bullet-width: 0.3125rem;
  --si-carousel-pagination-bullet-height: 0.3125rem;
  --si-carousel-pagination-bullet-spacer: 0.875rem;
  --si-carousel-pagination-bullet-border-radius: 50rem;
  --si-carousel-pagination-bullet-bg: #b4b7c9;
  --si-carousel-pagination-bullet-active-width: 1.5rem;
  --si-carousel-pagination-bullet-active-bg: #6366f1;
  --si-carousel-pagination-progressbar-height: 0.1875rem;
  --si-carousel-pagination-progressbar-bg: #e2e5f1;
  --si-carousel-pagination-progressbar-fill-bg: #6366f1;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 1.25rem;
}

.swiper-pagination-bullet {
  width: var(--si-carousel-pagination-bullet-width);
  height: var(--si-carousel-pagination-bullet-height);
  transition: width 0.2s ease-in-out, height 0.2s ease-in-out, background-color 0.2s ease-in-out;
  border-radius: var(--si-carousel-pagination-bullet-border-radius);
  background-color: var(--si-carousel-pagination-bullet-bg);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: var(--si-carousel-pagination-bullet-active-bg);
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 1.25rem;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
  margin-right: calc(var(--si-carousel-pagination-bullet-spacer) * 0.5);
  margin-left: calc(var(--si-carousel-pagination-bullet-spacer) * 0.5);
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active,
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
  width: var(--si-carousel-pagination-bullet-active-width);
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-vertical {
  flex-direction: column;
  right: 1.25rem;
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-bullets.swiper-pagination-vertical .swiper-pagination-bullet {
  margin-top: calc(var(--si-carousel-pagination-bullet-spacer) * 0.5);
  margin-bottom: calc(var(--si-carousel-pagination-bullet-spacer) * 0.5);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet-active,
.swiper-pagination-bullets.swiper-pagination-vertical .swiper-pagination-bullet-active {
  height: var(--si-carousel-pagination-bullet-active-width);
}

.swiper-pagination-progressbar {
  background-color: var(--si-carousel-pagination-progressbar-bg);
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: var(--si-carousel-pagination-progressbar-fill-bg);
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  height: var(--si-carousel-pagination-progressbar-height);
}

.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical {
  width: var(--si-carousel-pagination-progressbar-height);
}

.swiper-scrollbar {
  --si-carousel-scrollbar-width: 0.1875rem;
  --si-carousel-scrollbar-bg: #e2e5f1;
  --si-carousel-scrollbar-drag-bg: #a2a6bc;
  background-color: var(--si-carousel-scrollbar-bg);
}

.swiper-scrollbar-drag {
  background-color: var(--si-carousel-scrollbar-drag-bg);
}

.swiper-vertical > .swiper-scrollbar {
  top: 0;
  height: 100%;
  width: var(--si-carousel-scrollbar-width);
}

.swiper-horizontal > .swiper-scrollbar {
  left: 0;
  width: 100%;
  height: var(--si-carousel-scrollbar-width);
}

.swiper-tabs {
  position: relative;
  height: 100%;
}

.swiper-tab {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
.swiper-tab.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.swiper-slide-active .from-top, .swiper-slide-active .from-bottom {
  transform: translateY(0);
  opacity: 1;
}
.swiper-slide-active .from-start, .swiper-slide-active .from-end {
  transform: translateX(0);
  opacity: 1;
}
.swiper-slide-active .scale-up, .swiper-slide-active .scale-down {
  transform: scale(1);
  opacity: 1;
}
.swiper-slide-active .fade-in {
  opacity: 1;
}


/* FOR HEADER CARDS SLIDER */
.wiper {
  position: relative;
  width: 240px;
  height: 100%;
}

#thumb {
  border-radius: 18px;
}

.swiper-slide img {
  width: 100%;
  object-fit: cover;
  border-radius: 18px;
}