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


/* ==========================================
   LARGE DESKTOP
========================================== */

@media (max-width:1400px){

    #hero .container-hero{

        width:100%;

        padding-left:32px;
        padding-right:32px;

    }


    /* ==========================================
       TITLE
    ========================================== */

    .hero-title{

        font-size:72px;

        letter-spacing:-3.5px;

    }


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

    .hero-slider{

        width:100%;

    }


    .hero-slider-viewport{

        width:100%;

        padding:20px 0 32px;

    }


    .hero-slider-track{

        gap:24px;

    }


    .hero-slide{

        flex-basis:clamp(
            620px,
            76vw,
            980px
        );

    }


    /* ==========================================
       ACTION ROW
    ========================================== */

    .hero-action-row{

        gap:24px;

    }


    .hero-start-button,
    .hero-demo-button{

        min-width:220px;

        height:60px;

        font-size:19px;

    }


    .hero-slider-controls{

        gap:14px;

    }

}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width:1200px){

    #hero{

        padding:40px 0 100px;

    }


    #hero .container-hero{

        width:100%;

        padding-left:24px;
        padding-right:24px;

    }


    /* ==========================================
       TITLE
    ========================================== */

    .hero-title{

        font-size:68px;

        line-height:.99;

        letter-spacing:-3px;

        margin-bottom:0;

    }


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

    .hero-slider-viewport{

        padding:18px 0 30px;

    }


    .hero-slider-track{

        gap:22px;

    }


    .hero-slide{

        flex-basis:clamp(
            560px,
            78vw,
            900px
        );

    }


    .hero-slide img{

        border-radius:22px;

    }


    /* ==========================================
       ACTION ROW
    ========================================== */

    .hero-action-row{

        gap:20px;

    }


    .hero-start-button,
    .hero-demo-button{

        min-width:205px;

        height:58px;

        padding:0 24px;

        font-size:18px;

    }


    .hero-slider-controls{

        gap:12px;

    }


    .hero-slider-arrow{

        width:36px;

        height:36px;

        flex-basis:36px;

    }


    .hero-slider-arrow i{

        font-size:11px;

    }


    .hero-slider-dots{

        gap:6px;

    }


    .hero-slider-dots button{

        width:7px;

        height:7px;

    }


    .hero-slider-dots button.active{

        width:22px;

    }

}


/* ==========================================
   TABLET
========================================== */

@media (max-width:992px){

    #hero{

        padding:38px 0 90px;

    }


    #hero .container-hero{

        width:calc(100% - 40px);

        max-width:900px;

        padding-left:0;
        padding-right:0;

    }


    /* ==========================================
       TITLE
    ========================================== */

    .hero-title{

        font-size:58px;

        line-height:1.02;

        letter-spacing:-2.6px;

    }


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

    .hero-slider{

        width:100%;

    }


    .hero-slider-viewport{

        width:100%;

        overflow:hidden;

        padding:18px 0 30px;

    }


    .hero-slider-track{

        gap:18px;

    }


    .hero-slide{

        flex-basis:clamp(
            500px,
            82vw,
            820px
        );

    }


    .hero-slide img{

        width:100%;

        height:auto;

        border-radius:20px;

    }


    /* ==========================================
       ACTION ROW
    ========================================== */

    .hero-action-row{

        width:100%;

        gap:14px;

    }


    .hero-start-button,
    .hero-demo-button{

        min-width:0;

        flex:1 1 0;

        height:56px;

        padding:0 18px;

        font-size:17px;

        border-radius:14px;

    }


    .hero-slider-controls{

        gap:10px;

        flex:0 0 auto;

    }


    .hero-slider-arrow{

        width:34px;

        height:34px;

        flex-basis:34px;

    }


    .hero-slider-arrow i{

        font-size:10px;

    }


    .hero-slider-dots{

        gap:6px;

    }


    .hero-slider-dots button{

        width:6px;

        height:6px;

    }


    .hero-slider-dots button.active{

        width:20px;

    }


    /* ==========================================
       GLOW
    ========================================== */

    .hero-slider::before{

        width:700px;

        height:430px;

        filter:blur(110px);

    }

}


/* ==========================================
   MOBILE LARGE
========================================== */

@media (max-width:768px){

    #hero{

        padding:30px 0 78px;

    }


    #hero .container-hero{

        width:calc(100% - 32px);

        max-width:680px;

        padding-left:0;
        padding-right:0;

    }


    /* ==========================================
       TITLE
    ========================================== */

    .hero-title{

        font-size:50px;

        line-height:1.04;

        letter-spacing:-2.2px;

    }


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

    .hero-slider-viewport{

        padding:14px 0 28px;

    }


    .hero-slider-track{

        gap:14px;

    }


    .hero-slide{

        flex-basis:clamp(
            390px,
            88vw,
            650px
        );

    }


    .hero-slide img{

        width:100%;

        height:auto;

        border-radius:18px;

    }


    /* ==========================================
       ACTION ROW
    ========================================== */

    .hero-action-row{

        width:100%;

        gap:10px;

    }


    .hero-start-button,
    .hero-demo-button{

        min-width:0;

        height:52px;

        padding:0 14px;

        font-size:15px;

        border-radius:13px;

        gap:8px;

    }


    .hero-slider-controls{

        gap:7px;

    }


    .hero-slider-arrow{

        width:30px;

        height:30px;

        flex-basis:30px;

    }


    .hero-slider-arrow i{

        font-size:9px;

    }


    .hero-slider-dots{

        gap:5px;

    }


    .hero-slider-dots button{

        width:6px;

        height:6px;

    }


    .hero-slider-dots button.active{

        width:18px;

    }


    /* ==========================================
       GLOW
    ========================================== */

    .hero-slider::before{

        width:90%;

        height:65%;

        filter:blur(90px);

    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:576px){

    #hero{

        padding:26px 0 68px;

    }


    #hero .container-hero{

        width:calc(100% - 24px);

        max-width:none;

    }


    /* ==========================================
       TITLE
    ========================================== */

    .hero-title{

        font-size:38px;

        line-height:1.05;

        letter-spacing:-1.7px;

    }


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

    .hero-slider-viewport{

        padding:10px 0 24px;

    }


    .hero-slider-track{

        gap:12px;

    }


    .hero-slide{

        flex-basis:calc(100vw - 24px);

    }


    .hero-slide img{

        border-radius:15px;

    }


    /* ==========================================
       ACTION ROW
    ========================================== */

    .hero-action-row{

        gap:7px;

    }


    .hero-start-button,
    .hero-demo-button{

        height:48px;

        padding:0 11px;

        font-size:13px;

        border-radius:12px;

        gap:6px;

    }


    .hero-start-button i,
    .hero-demo-button i{

        font-size:11px;

    }


    .hero-slider-controls{

        gap:5px;

    }


    .hero-slider-arrow{

        width:27px;

        height:27px;

        flex-basis:27px;

    }


    .hero-slider-arrow i{

        font-size:8px;

    }


    .hero-slider-dots{

        gap:4px;

    }


    .hero-slider-dots button{

        width:5px;

        height:5px;

    }


    .hero-slider-dots button.active{

        width:16px;

    }


    /* ==========================================
       GLOW
    ========================================== */

    .hero-slider::before{

        width:100%;

        height:70%;

        filter:blur(80px);

    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width:420px){

    #hero{

        padding:22px 0 58px;

    }


    #hero .container-hero{

        width:calc(100% - 18px);

    }


    /* ==========================================
       TITLE
    ========================================== */

    .hero-title{

        font-size:33px;

        line-height:1.06;

        letter-spacing:-1.4px;

    }


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

    .hero-slider-viewport{

        padding:8px 0 22px;

    }


    .hero-slider-track{

        gap:10px;

    }


    .hero-slide{

        flex-basis:calc(100vw - 18px);

    }


    .hero-slide img{

        border-radius:13px;

    }


    /* ==========================================
       ACTION ROW
    ========================================== */

    .hero-action-row{

        gap:5px;

    }


    .hero-start-button,
    .hero-demo-button{

        height:44px;

        padding:0 9px;

        font-size:12px;

        border-radius:11px;

        gap:5px;

    }


    .hero-start-button i,
    .hero-demo-button i{

        font-size:10px;

    }


    .hero-slider-controls{

        gap:4px;

    }


    .hero-slider-arrow{

        width:25px;

        height:25px;

        flex-basis:25px;

    }


    .hero-slider-arrow i{

        font-size:7px;

    }


    .hero-slider-dots{

        gap:3px;

    }


    .hero-slider-dots button{

        width:5px;

        height:5px;

    }


    .hero-slider-dots button.active{

        width:15px;

    }

}


/* ==========================================
   VERY SMALL MOBILE
========================================== */

@media (max-width:360px){

    .hero-title{

        font-size:29px;

        letter-spacing:-1.2px;

    }


    .hero-start-button,
    .hero-demo-button{

        padding:0 7px;

        font-size:11px;

    }


    .hero-start-button i,
    .hero-demo-button i{

        display:none;

    }


    .hero-slider-arrow{

        width:23px;

        height:23px;

        flex-basis:23px;

    }


    .hero-slider-arrow i{

        font-size:7px;

    }

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion:reduce){

    .hero-slider-track{

        transition:none !important;

    }


    .hero-slide{

        transition:none !important;

    }


    .hero-action-row .btn-primary::before{

        animation:none !important;

    }

}