/* ==========================================================
   Brand Slider for Flatsome
   Version: 1.0.0
   Author: Đức Hiếu Web
========================================================== */

.brand-slider{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:10px 45px 40px;
    box-sizing:border-box;
}

.brand-slider .swiper{
    width:100%;
}

.brand-slider .swiper-wrapper{
    align-items:center;
}

.brand-slider .swiper-slide{
    display:flex;
    justify-content:center;
    align-items:center;
    height:auto;
}

.brand-slider .brand-item{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    background:#fff;
    border:1px solid #eee;
    border-radius:8px;
    padding:15px;
    transition:.3s;
    box-sizing:border-box;
}

.brand-slider .brand-item:hover{
    border-color:#ddd;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.brand-slider .brand-item a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    text-decoration:none;
}

.brand-slider .brand-item img{
    display:block;
    width:100%;
    max-width:160px;
    height:80px;
    object-fit:contain;
    transition:.3s;
    filter:grayscale(100%);
}

.brand-slider .brand-item:hover img{
    filter:none;
    transform:scale(1.05);
}

/* =====================================
   Navigation
===================================== */

.brand-slider .swiper-button-prev,
.brand-slider .swiper-button-next{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    border:1px solid #ddd;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    color:#333;
    transition:.3s;
}

.brand-slider .swiper-button-prev:hover,
.brand-slider .swiper-button-next:hover{
    background:#0073aa;
    color:#fff;
    border-color:#0073aa;
}

.brand-slider .swiper-button-prev:after,
.brand-slider .swiper-button-next:after{
    font-size:18px;
    font-weight:700;
}

/* =====================================
   Pagination
===================================== */

.brand-slider .swiper-pagination{
    bottom:0 !important;
}

.brand-slider .swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#bbb;
    opacity:1;
    transition:.3s;
}

.brand-slider .swiper-pagination-bullet-active{
    background:#0073aa;
    width:26px;
    border-radius:10px;
}

/* =====================================
   Responsive
===================================== */

@media (max-width:849px){

    .brand-slider{
        padding:10px 35px 35px;
    }

    .brand-slider .brand-item{
        padding:12px;
    }

    .brand-slider .brand-item img{
        max-width:120px;
        height:65px;
    }

}

@media (max-width:549px){

    .brand-slider{
        padding:10px 28px 30px;
    }

    .brand-slider .swiper-button-prev,
    .brand-slider .swiper-button-next{
        width:34px;
        height:34px;
    }

    .brand-slider .swiper-button-prev:after,
    .brand-slider .swiper-button-next:after{
        font-size:14px;
    }

    .brand-slider .brand-item{
        padding:10px;
    }

    .brand-slider .brand-item img{
        max-width:90px;
        height:50px;
    }

}