/* Swiper Css start */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}

.pagination-style-two {
    .swiper-pagination-bullet {
        background: var(--main-600);
        opacity: 1;
        &-active {
            background: #fff !important;
        }
    }
}

.pagination-style-three {
    .swiper-pagination-bullet {
        @extend .gradient-bg-six; 
        opacity: 1;
        &-active {
            background: #fff !important;
            box-shadow: 0px 4px 8px 0px #00000047 !important;
        }
    }
}

.pagination-style-four {
    .swiper-pagination-bullet {
        margin: 0px !important;
        opacity: 1;
        background-color: #D6D1D1;
        width: 9px;
        height: 9px;
        position: relative;
        transition: .3s linear;
        &::before {
            position: absolute;
            content: "";
            width: 26px;
            height: 26px;
            border: 2px solid #fff;
            border-radius: inherit;
            inset-inline-start: 50%;
            inset-block-start: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: inherit;
        }
        &-active {
            background: var(--main-600) !important;
            &::before {
                border: 2px solid var(--main-600);
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }
}

.pagination-style-five {
    .swiper-pagination-bullet { 
        width: 32px;
        height: 32px;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        font-weight: 600;
        color: var(--heading-color);
        &-active {
            background: transparent !important;
            color: var(--heading-color);
        }
    }
}


.shop-small-thumbs .swiper-slide.swiper-slide-thumb-active > div {
    border-color: var(--main-600) !important;
}
/* Swiper Css end */
