/* =====================================================
   HOT PRODUCTS
===================================================== */

.hot-products-section{

    position:relative;

    padding:90px 0;

    background:#f5f6f8;

    overflow:hidden;

}


.hot-products-container{

    position:relative;

    max-width:1920px;

    margin:0 auto;

    padding:0 30px;

    display:grid;

    grid-template-columns:42% 58%;

    align-items:center;

}


/* =====================================================
   LEFT INTRO
===================================================== */

.hot-products-intro{

    position:relative;

    z-index:2;

    min-height:400px;

    margin-right:-110px;

    display:flex;

    align-items:center;

    background:#0050a5;

    color:#fff;

}


.hot-products-intro-inner{

    width:100%;

    padding:70px 80px;

}


.hot-products-label{

    display:block;

    margin-bottom:20px;

    font-size:12px;

    font-weight:700;

    letter-spacing:2.5px;

    opacity:.85;

}


.hot-products-intro h2{

    margin:0 0 28px;

    font-size:46px;

    line-height:1.1;

    font-weight:700;

    color:#fff;

}


.hot-products-intro p{

    max-width:650px;

    margin:0 0 32px;

    font-size:15px;

    line-height:1.8;

    color:rgba(255,255,255,.92);

}


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

.hot-products-button{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:14px 22px;

    background:#fff;

    color:#26384d !important;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-decoration:none !important;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.hot-products-button span{

    font-size:18px;

    line-height:1;

}


.hot-products-button:hover{

    background:#0066cc;

    color:#fff !important;

    transform:translateY(-2px);

}


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

.hot-products-slider{

    position:relative;

    z-index:3;

    overflow:hidden;

}


.hot-products-track{

    display:flex;

    gap:12px;

    will-change:transform;

}


.hot-product-card{

    position:relative;

    flex:0 0 calc((100% - 24px) / 3);

    min-width:0;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


.hot-product-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(16,34,54,.14);

}


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

.hot-product-image{

    position:relative;

    display:block;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:#f1f3f5;

}


.hot-product-image img{

  display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);


}


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

    transform:scale(1.045);

}


/* =====================================================
   PRODUCT INFO
===================================================== */

.hot-product-info{

    position:relative;

    padding:22px 24px 25px;

    min-height:145px;

}


.hot-product-number{

    display:block;

    margin-bottom:10px;

    color:#0066cc;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

}


.hot-product-info h3{

    margin:0;

    padding-right:15px;

    font-size:18px;

    line-height:1.4;

    font-weight:600;

}


.hot-product-info h3 a{

    color:#111820 !important;

    text-decoration:none !important;

    transition:color .3s ease;

}


.hot-product-card:hover
.hot-product-info h3 a{

    color:#0066cc !important;

}


.hot-product-link{

    position:absolute;

    right:24px;

    bottom:25px;

    color:#0066cc !important;

    font-size:11px;

    font-weight:600;

    text-decoration:none !important;

    opacity:0;

    transform:translateX(-8px);

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

}


.hot-product-link span{

    margin-left:6px;

    font-size:15px;

}


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

    opacity:1;

    transform:translateX(0);

}


/* =====================================================
   PROGRESS
===================================================== */

.hot-products-progress{

    position:relative;

    width:100%;

    height:2px;

    margin-top:28px;

    background:#d9dee4;

}


.hot-products-progress-bar{

    display:block;

    width:33.33%;

    height:100%;

    background:#0066cc;

    transform-origin:left center;

}


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

@media (max-width:1200px){

    .hot-products-container{

        grid-template-columns:40% 60%;

    }


    .hot-products-intro-inner{

        padding:55px;

    }


    .hot-products-intro h2{

        font-size:40px;

    }

}


@media (max-width:900px){

    .hot-products-container{

        display:block;

        padding:0 25px;

    }


    .hot-products-intro{

        min-height:auto;

        margin-right:0;

        margin-bottom:30px;

    }


    .hot-products-intro-inner{

        padding:45px;

    }


    .hot-products-intro h2{

        font-size:38px;

    }


    .hot-product-card{

        flex-basis:calc((100% - 12px) / 2);

    }

}


@media (max-width:600px){

    .hot-products-section{

        padding:65px 0;

    }


    .hot-products-container{

        padding:0 18px;

    }


    .hot-products-intro-inner{

        padding:35px 28px;

    }


    .hot-products-intro h2{

        font-size:32px;

    }


    .hot-products-intro p{

        font-size:14px;

    }


    .hot-product-card{

        flex-basis:100%;

    }


    .hot-product-info{

        min-height:130px;

    }

}