/*
=========================================
PRODUCTOS - MAIMEX
=========================================
*/

.products-section{

    position:relative;

    padding:140px 0;

    background:#F8F9FC;

    overflow:hidden;

}

/*=========================================
HEADER
=========================================*/

.section-header{

    max-width:760px;

    margin:0 auto 70px;

}

.products-section .section-title{

    margin-top:18px;

    margin-bottom:20px;

}

.products-section .section-description{

    max-width:650px;

    margin:auto;

}

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

.products-slider{

    position:relative;

    overflow:visible;

}

.products-slider .swiper{

    overflow:visible;

}

.products-slider .swiper-wrapper{

    padding-bottom:40px;

}

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

.product-card{

    position:relative;

    background:#FFF;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(15,23,42,.08);

    transition:.35s ease;

    height:100%;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 80px rgba(15,23,42,.16);

}

/*=========================================
IMAGE
=========================================*/

.product-image{

    position:relative;

    height:230px;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

.product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(10,22,51,.65),

        rgba(10,22,51,0)

    );

    opacity:0;

    transition:.35s;

}

.product-card:hover .product-image::after{

    opacity:1;

}

/*=========================================
ICON
=========================================*/

.product-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    position:absolute;

    left:28px;

    top:198px;

    z-index:5;

    box-shadow:0 15px 35px rgba(15,23,42,.12);

    transition:.35s;

}

.product-card:hover .product-icon{

    background:var(--secondary);

    transform:translateY(-6px);

}

.product-icon i{

    color:var(--secondary);

    font-size:28px;

    transition:.35s;

}

.product-card:hover .product-icon i{

    color:#FFF;

}

/*=========================================
BODY
=========================================*/

.product-body{

    padding:54px 28px 28px;

}

.product-body h3{

    font-size:24px;

    margin-bottom:14px;

    color:var(--primary);

}

.product-body p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:26px;

    min-height:58px;

}

/*=========================================
BUTTON
=========================================*/

.product-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--secondary);

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.product-link i{

    transition:.35s;

}

.product-card:hover .product-link{

    color:var(--primary);

}

.product-card:hover .product-link i{

    transform:translateX(6px);

}

/*=========================================
ARROWS
=========================================*/

.products-prev,

.products-next{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#FFF;

    box-shadow:0 15px 35px rgba(15,23,42,.10);

    transition:.35s;

}

.products-prev:hover,

.products-next:hover{

    background:var(--secondary);

}

.products-prev::after,

.products-next::after{

    font-size:18px;

    color:var(--primary);

}

.products-prev:hover::after,

.products-next:hover::after{

    color:#FFF;

}

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

.products-pagination{

    margin-top:30px;

    position:relative;

}

.products-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#C8CBD3;

    opacity:1;

}

.products-pagination .swiper-pagination-bullet-active{

    width:34px;

    border-radius:20px;

    background:var(--secondary);

}

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

@media(max-width:991px){

    .products-section{

        padding:100px 0;

    }

    .product-image{

        height:210px;

    }

}

@media(max-width:767px){

    .products-section{

        padding:80px 0;

    }

    .product-body{

        padding:48px 22px 22px;

    }

    .product-body h3{

        font-size:22px;

    }

    .product-image{

        height:200px;

    }

    .products-prev,

    .products-next{

        display:none;

    }

}