/*
|--------------------------------------------------------------------------
| Swiper Slider
|--------------------------------------------------------------------------
*/

.sw-products-slider {
    overflow: hidden;
    padding-bottom: 50px;
}

.sw-products-slider .swiper-slide {
    height: auto;
}

.sw-products-slider .swiper-button-next,
.sw-products-slider .swiper-button-prev {
    color: #000;
}

.sw-products-slider .swiper-pagination-bullet-active {
    background: #000;
}

/*
|--------------------------------------------------------------------------
| Swiper Navigation Arrows
|--------------------------------------------------------------------------
*/

.swiper-button-next,
.swiper-button-prev{
    width: 38px;
    height: 38px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
    background: #000000;
    transform: scale(1.05);
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after{
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Arrow Position
|--------------------------------------------------------------------------
*/

.swiper-button-prev{
    left: 10px;
}

.swiper-button-next{
    right: 10px;
}

/*
|--------------------------------------------------------------------------
| Pagination Styling
|--------------------------------------------------------------------------
*/

.swiper-pagination-bullet{
    width: 8px;
    height: 8px;
    background: #000;
    opacity: 0.3;
}

.swiper-pagination-bullet-active{
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Hide Pagination On Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767px){

    .swiper-pagination{
        display: none !important;
    }

    .swiper-button-next,
    .swiper-button-prev{
        width: 32px;
        height: 32px;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after{
        font-size: 12px;
    }

}