/*====================================================
                HERO SLIDER CSS PART - 1
====================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#b83330;
    --white:#ffffff;
    --black:#111111;

}

.hero-slider{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

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

.hero-wrapper{

    position:relative;

    width:100%;

    height:100%;

}

/*======================================
            SLIDE
======================================*/

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:1s ease;

}

.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:5;

}

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

.hero-bg{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1);

    transition:8s linear;

}

.hero-slide.active .hero-bg{

    transform:scale(1.12);

}

/*======================================
            OVERLAY
======================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

/*======================================
            CONTAINER
======================================*/

.hero-container{

    position:relative;

    z-index:20;

    max-width:1200px;

    height:100%;

    margin-left:100px;

    padding:0 20px;

    display:flex;

    align-items:center;

}

/*======================================
            CONTENT
======================================*/

.hero-content{

    max-width:650px;

}

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

.hero-title{

    color:#fff;

    font-size:86px;

    font-weight:800;

    line-height:1.15;

    letter-spacing:-2px;

    margin-top: 50px;

}

.hero-title .line{

    display:block;

}

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

.hero-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:140px;

    height:58px;

    background:#b83330;

    color:#fff;

    text-decoration:none;

    font-size:22px;

    font-weight:700;

    border-radius:6px;

    transition:.35s;

}

.hero-btn:hover{

    background:#fff;

    color:#111;

}

/*====================================================
            HERO SLIDER CSS PART - 2
====================================================*/


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

.hero-arrow{

    position:absolute;

    top:50%;

    width:68px;

    height:68px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    color:#fff;

    cursor:pointer;

    z-index:100;

    transform:translateY(-50%);

    transition:.4s;

}

.hero-arrow i{

    font-size:22px;

}

.hero-prev{

    left:40px;

}

.hero-next{

    right:40px;

}

.hero-arrow:hover{

    background:#b83330;

    transform:translateY(-50%) scale(1.08);

    box-shadow:0 20px 40px rgba(184,51,48,.35);

}


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

.hero-pagination{

    position:absolute;

    left:50%;

    bottom:45px;

    transform:translateX(-50%);

    display:flex;

    gap:14px;

    z-index:100;

}

.hero-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    cursor:pointer;

    transition:.35s;

}

.hero-dot.active{

    background:#b83330;

    transform:scale(1.35);

}


/*======================================
        CONTENT ANIMATION BASE
======================================*/

.hero-content{

    overflow:hidden;

}

.hero-title .line{

    display:block;

    overflow:hidden;

}

.hero-title .line span{

    display:inline-block;

    opacity:0;

    transform:translateY(120px);

}


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

.hero-btn{

    opacity:0;

    transform:translateY(40px);

}


/*======================================
        ACTIVE ANIMATION
======================================*/

.hero-slide.active .hero-title .line span{

    animation:titleUp .8s forwards;

}

.hero-slide.active .hero-btn{

    animation:buttonUp .8s .9s forwards;

}


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

@keyframes titleUp{

    from{

        opacity:0;

        transform:translateY(120px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@keyframes buttonUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.hero-btn{

    position:relative;

    overflow:hidden;

}

.hero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transition:.7s;

}

.hero-btn:hover::before{

    left:130%;

}


/*====================================================
            HERO SLIDER CSS PART - 3
            (FINAL)
====================================================*/


/*======================================
        ACTIVE BACKGROUND
======================================*/

.hero-slide.active .hero-bg{

    animation:heroZoom 8s linear forwards;

}

@keyframes heroZoom{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.12);

    }

}


/*======================================
        CONTENT WIDTH
======================================*/

.hero-content{

    position:relative;

    z-index:5;

}


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

.hero-btn{

    box-shadow:0 18px 45px rgba(184,51,48,.35);

}

.hero-btn:hover{

    box-shadow:0 25px 60px rgba(184,51,48,.45);

}


/*======================================
        SLIDE TRANSITION
======================================*/

.hero-slide{

    transition:
    opacity .9s ease,
    visibility .9s ease;

}


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

.hero-bg{

    will-change:transform;

}


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

@media(max-width:1400px){

.hero-title{

    font-size:72px;

}

}


@media(max-width:1200px){

.hero-container{

    max-width:1000px;

    margin-left:60px;

}

.hero-title{

    font-size:62px;

}

.hero-btn{

    width:210px;

    height:70px;

    font-size:20px;

}

}


@media(max-width:992px){

.hero-slider{

    height:90vh;

}

.hero-container{

    margin-left:40px;

    padding:0 20px;

}

.hero-title{

    font-size:52px;

}

.hero-arrow{

    width:58px;

    height:58px;

}

.hero-prev{

    left:20px;

}

.hero-next{

    right:20px;

}

.hero-pagination{

    bottom:30px;

}

}


@media(max-width:768px){

.hero-slider{

    height:80vh;

}

.hero-container{

    margin-left:0;

    max-width:100%;

    padding:0 25px;

}

.hero-content{

    max-width:100%;

}

.hero-title{

    font-size:42px;

    line-height:1.2;

}

.hero-btn{

    width:180px;

    height:62px;

    font-size:18px;

}

.hero-arrow{

    width:52px;

    height:52px;

}

.hero-arrow i{

    font-size:18px;

}

}


@media(max-width:576px){

.hero-slider{

    height:75vh;

}

.hero-title{

    font-size:34px;

}

.hero-btn{

    width:165px;

    height:56px;

    font-size:17px;

}

.hero-arrow{

    display:none;

}

.hero-pagination{

    bottom:20px;

}

.hero-dot{

    width:11px;

    height:11px;

}

}


@media(max-width:420px){

.hero-title{

    font-size:28px;

}

.hero-btn{

    width:150px;

    height:52px;

    font-size:16px;

}

}


/*======================================
        ACCESSIBILITY
======================================*/

.hero-btn:focus,
.hero-arrow:focus{

    outline:2px solid #ffffff;

    outline-offset:4px;

}


/*======================================
        PERFORMANCE
======================================*/

.hero-slide,
.hero-bg,
.hero-content,
.hero-btn{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}


/*======================================
        SELECTION
======================================*/

.hero-slider *::selection{

    background:#b83330;

    color:#fff;

}