/*==================================================
    TOP HIGHLIGHTED PROJECTS
    PART 3.4
    SWIPER / SLIDER CONTROLS
==================================================*/

/*==============================
    SLIDER WRAPPER
==============================*/

.projects-slider{

    position:relative;

    width:100%;

    overflow:hidden;

}

.swiper{

    width:100%;

    overflow:hidden;

    padding:10px 0 40px;

}

.swiper-wrapper{

    display:flex;

    align-items:stretch;

}

.swiper-slide{

    height:auto;

}

/*==============================
    NAVIGATION
==============================*/

.swiper-button-next,
.swiper-button-prev{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#ffffff;

    border:1px solid #ececec;

    color:#5B3DF5;

    box-shadow:0 10px 25px rgba(0,0,0,.10);

    transition:all .35s ease;

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:#5B3DF5;

    color:#ffffff;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(91,61,245,.35);

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:18px;

    font-weight:700;

}

/*==============================
    PAGINATION
==============================*/

.swiper-pagination{

    position:relative;

    margin-top:30px;

}

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#d9d9d9;

    opacity:1;

    transition:.3s;

}

.swiper-pagination-bullet-active{

    width:36px;

    border-radius:20px;

    background:#5B3DF5;

}

/*==============================
    SCROLLBAR
==============================*/

.swiper-scrollbar{

    background:#efefef;

    height:5px;

    border-radius:20px;

}

.swiper-scrollbar-drag{

    background:#5B3DF5;

}

/*==============================
    CARD ANIMATION
==============================*/

.swiper-slide{

    transition:transform .35s ease;

}

.swiper-slide-active{

    transform:scale(1);

}

.swiper-slide-next{

    transform:scale(.98);

}

.swiper-slide-prev{

    transform:scale(.98);

}

/*==============================
    HOVER
==============================*/

.swiper:hover .swiper-button-next,

.swiper:hover .swiper-button-prev{

    opacity:1;

    visibility:visible;

}

.swiper-button-next,

.swiper-button-prev{

    opacity:0;

    visibility:hidden;

}

/*==============================
    FADE EFFECT
==============================*/

.project-card{

    animation:fadeUp .6s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:1200px){

.swiper-button-next,

.swiper-button-prev{

width:50px;

height:50px;

}

}

@media(max-width:992px){

.swiper{

padding-bottom:35px;

}

.swiper-button-next{

right:10px;

}

.swiper-button-prev{

left:10px;

}

}

@media(max-width:768px){

.swiper{

padding-bottom:30px;

}

.swiper-button-next,

.swiper-button-prev{

display:none;

}

.swiper-pagination{

margin-top:20px;

}

.swiper-pagination-bullet{

width:10px;

height:10px;

}

.swiper-pagination-bullet-active{

width:28px;

}

}

@media(max-width:576px){

.projects-slider{

margin-top:15px;

}

.swiper{

padding-bottom:25px;

}

.project-card{

border-radius:18px;

}

}