@use '../../utils' as *;
/*----------------------------------------*/
/*  3.1.8 Banner Style 8
/*----------------------------------------*/


.rs-banner{
    &-eight{
        position: relative;
        z-index: 1;
        .rs-banner-slider-wrapper{
            position: relative;
        }
        .rs-banner-bg-thumb{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            inset-inline-start: 0;
            background-repeat: no-repeat;
            z-index: -1;
        }
        .rs-banner-item-wrapper{
            padding: 190px 0 190px;
            @media #{$laptop}{
                padding: 150px 0 150px;
            }
            @media #{$lg}{
                padding: 120px 0 120px;
            }
            @media #{$sm}{
                padding: 80px 0 100px;
            }
        }
        .rs-banner-title{
            color: var(--rs-white);
            font-size: 70px;
            text-transform: uppercase;
            max-width: 720px;
            line-height: 1.07;
            @media #{$lg}{
                font-size: 60px;
            }
            @media #{$md}{
                font-size: 55px;
            }
            @media #{$sm}{
                font-size: 50px;
            }
            @media #{$xs}{
                font-size: 40px;
            }
        }
        .rs-banner-subtitle{
            color: var(--rs-white);
            position: relative;
            padding-inline-start: 135px;
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            &::before{
                position: absolute;
                color: var(--rs-white);
                counter-increment: count;
                content: "0" counter(count);
                z-index: 2;
                inset-inline-start: 105px;
                font-weight: 500;
                top: 0;
                transition: 0.3s;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .rs-border-line{
                position: absolute;
                content: "";
                width: 84px;
                height: 2px;
                background: var(--rs-theme-yellow);
                top: 50%;
                transform: translateY(-50%);
                inset-inline-start: 0;
            }
        }
        .rs-banner-descrip {
            max-width: 500px;
            margin: 25px 0 40px;
            p{
                color: var(--rs-white);
            }
        }
        .rs-banner-navigation {
            position: absolute;
            inset-inline-end: 110px;
            z-index: 55;
            bottom: 80px;
            display: flex;
            gap: 15px;
            .has-theme-black{
                &:hover{
                    background: var(--rs-theme-yellow);
                    color: var(--rs-black);
                }
            }
            @media #{$sm}{
                display: none;
            }
        }
        .rs-pagination.swiper-pagination {
            position: absolute;
            bottom: 40px;
        }
    }
}

// slider animation
.rs-banner-eight {
    &.rs-swiper{
       .swiper-slide-active{
           .rs-banner-subtitle,
           .rs-banner-title,
           .rs-banner-descrip,
           .rs-banner-btn{
            animation-fill-mode: both;
            animation-name: fadeInUp;
         }
       }
   }
    .swiper-slide-active {
       .rs-banner-subtitle{
           animation-delay: .3s;
           animation-duration: 0.7s;
       }
        .rs-banner-title {
           animation-delay: .5s;
           animation-duration: 0.9s;
       }
        .rs-banner-descrip {
           animation-delay: .7s;
           animation-duration: 1.1s;
       }
        .rs-banner-btn {
           animation-delay: .9s;
           animation-duration: 1.3s;
       }
   }
}