@use '../../utils' as *;
/*----------------------------------------*/
/*  9.3 banner Style 1
/*----------------------------------------*/

// Banner style 3
.banner-3 {
    
    &__space {
        padding-top: 173px;

        @media #{$sm, $xs} {
            padding-top: 140px;
        }
    }
    
    .container {
        position: relative;
        z-index: 2;
    }
    
    &__shape {
        z-index: -1;
        top: -1115px;
        right: -635px;
        position: absolute;
        width: 1522.97px;
        content: "";
        height: 1356.07px;
        display: block;
        @include border-radius(500px);
        background: var(--rr-theme-primary);
        opacity: 0.2;
        filter: blur(217px);
        transform: rotate(-20deg);
    }

    
    &__content {
        position: relative;
        z-index: 3;

        p {
            padding-left: 31px;

            @media #{$xl, $lg,$md, $sm, $xs} {
                padding-left: 0;
            }
        }

        h1 {
            font-style: normal;
            font-weight: 900;
            font-size: 80px;
            line-height: 90px;

            span {
                color: var(--rr-theme-primary);
            }

            @media #{$xl} {
                font-size: 70px;
                line-height:80px;
            }
            @media #{$lg, $md} {
                font-size: 60px;
                line-height:70px;
            }
            @media #{$sm} {
                font-size: 47px;
                line-height:57px;
            }
            @media #{$xs} {
                font-size: 40px;
                line-height:50px;
            }
            @media #{$xxs} {
                font-size:34px;
                line-height: 38px;
            }
        }
    }


    &__slider {
        z-index: 2;
        position: relative;
    }

    &__item-media {
        @media #{$xs} {
            height: 250px;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    &__pagination {
        bottom: 227px !important;
        right: 50px !important;
        text-align: right;
        z-index: 3;
        position: absolute;
        width: inherit !important;

        @media #{$xl} {
            bottom: 130px !important;
        }

        @media #{$lg, $md, $sm, $xs} {
            bottom: 30px !important;
        }

        .swiper-pagination-bullet {
            width: inherit !important;
            height: inherit !important;
            background: transparent !important;
            font-style: normal;
            font-weight: 700;
            font-size: 18px;
            line-height: 25px;
            color: var(--rr-color-200) !important;
            opacity: 1 !important;
            margin: 0 10px !important;
            position: relative;

            &:after {
                width: 100%;
                height: 1px;
                position: absolute;
                content: "";
                bottom: 0;
                right: 0;
                background: var(--rr-color-200) !important;
                opacity: 0;
            }

            &.swiper-pagination-bullet-active {
                color: var(--rr-common-white) !important;

                &:after {
                    background: var(--rr-common-white) !important;
                    opacity: 1;
                }
            }
        }
    }
}