/*=====================================================
Categories
=====================================================*/

.zup-categories-swiper{
    width:100%;
    overflow:hidden;
}


/*=====================================================
Desktop Layout
=====================================================*/

.zup-categories-swiper .swiper-wrapper{
    display:flex;
    flex-direction:column;
    gap:60px;

}

.zup-categories-swiper .swiper-slide{

    width:100% !important;
    height:auto !important;

}


.zup-categories-swiper .swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
  border-radius: 0;
}

/*=====================================================
Category
=====================================================*/

.zup-category{
    display:grid;
    grid-template-columns:2fr 3fr;
    gap:40px;
    align-items:center;
}

.zup-category.reverse{
    grid-template-columns:3fr 2fr;
}

.zup-category.reverse .zup-category-image{
    order:2;
}

.zup-category.reverse .zup-category-content{
    order:1;
}


/*=====================================================
Image
=====================================================*/

.zup-category-image{

    width:100%;

}

.zup-category-image img{

    width:100%;
    display:block;

}


/*=====================================================
Content
=====================================================*/

.zup-category-content{

    width:100%;

}

.zup-heading{
    margin:0 0 8px;
    color:#a8b0ba;
    font-size:20px;
    line-height:1.4;
    text-transform:uppercase;
    font-weight:700;
}

.zup-subtitle{
    margin-bottom:25px;
    color:#94cbe0;
    font-size:20px;
    line-height:1.2;
    font-weight:600;
}

.zup-description{
    margin-bottom:35px;
    color:#fff;
    line-height:1.6;
   font-size:20px;
}

.zup-description p{
    margin:0 0 18px;
}

.zup-description p:last-child{
    margin-bottom:0;
}


/*=====================================================
Button
=====================================================*/

.zup-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 20px;
    background:#a8b0ba;
    color:#1d2533;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
	font-size:20px;
}

.zup-button:hover{
    background:#94cbe0;
}


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

.zup-categories-swiper .swiper-pagination{
    display:none;
}


/*=====================================================
Tablet & Mobile
=====================================================*/

@media(max-width:991px){
    .zup-categories-swiper .swiper-wrapper{
        display:flex;
        flex-direction:row;
        gap:0;
    }

    .zup-categories-swiper .swiper-slide{
        height:auto;
    }

    .zup-category{
        grid-template-columns:1fr !important;
        gap:30px;
    }

    .zup-category.reverse .zup-category-image{
        order:1;
    }

    .zup-category.reverse .zup-category-content{
        order:2;
    }

    .zup-heading{
        font-size:18px;
    }

    .zup-subtitle{

        font-size:24px;

    }

    .zup-categories-swiper .swiper-pagination{

        display:block;

        position:relative;

        margin-top:40px;

    }

    .zup-categories-swiper .swiper-pagination-bullet{

        width:12px;

        height:12px;

        opacity:1;

        background:#7A8796;

    }

    .zup-categories-swiper .swiper-pagination-bullet-active{

        background:#fff;

    }

}


/*=========================================
Scroll Animation
=========================================*/

.zup-category{

    opacity:0;
    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:opacity, transform;

}

.zup-category.in-view{

    opacity:1;
    transform:translateY(0);

}