/* Start Swiper Carousel  Styles */
.swiper {
    height: 100%;
    width: 100%
}
.swiper:where([dir="rtl"], [dir="rtl"] *) {
    direction: ltr
}

.swiper-cube .swiper-cube-shadow:before {
    background-color: transparent
}

.swiper-slide img {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 0.375rem;
    object-fit: cover
}

.swiper-button-next,
.swiper-button-prev {
    height: auto !important;
    border-radius: 9999px !important;
    background-color: rgb(0 0 0 / 0.2) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

:is(.dark .swiper-button-next),:is(.dark 
.swiper-button-prev) {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1rem !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important
}

.swiper-pagination-bullet-active {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: rgb(var(--primary)) !important
}

.mySwiper7.swiper-free-mode.swiper-horizontal > .swiper-pagination-bullets,
.mySwiper7.swiper-free-mode .swiper-pagination-bullets.swiper-pagination-horizontal,
.mySwiper7.swiper-free-mode .swiper-pagination-custom,
.mySwiper7.swiper-free-mode .swiper-pagination-fraction {
    position: sticky !important;
    bottom: -1rem !important;
    padding-top: 0.25rem !important
}

[dir=rtl] .swiper {
    direction: ltr
}

.swiper-slide img {
    display: block !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important
}

/* End Swiper Carousel  Styles */