:root {
    --swiper-theme-color: var(--color-primary) !important;
}


.swiper-button-next,
.swiper-button-prev {
    position: relative !important;
    border: 1px solid var(--color-gray-300);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    left: unset;
    right: unset;
    margin-top: unset;

    &:after {
        content: '\F12C';
        font-family: 'bootstrap-icons';
    }
}
.swiper-button-next{
    &:after {
        content: '\F135';
    }
}

.swiper-theme-secondary {
    --swiper-pagination-color: var(--color-secondary);
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: relative;
    width: auto;
}

.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 1rem;
    height: 6px;
    border-radius: 99px;
    transition: width 0.3s;

    &.swiper-pagination-bullet-active {
        width: 2rem;
    }
}