@use '../../utils' as *;
/*----------------------------------------*/
/*  3.1 banner Style 4
/*----------------------------------------*/
.banner-4{
    &__shapes{
        &-shape-1{
            position: absolute;
            width: 271px;
            height: 273px;
            top: 185px;
            left: 15px;
            z-index: 2;
            @media #{$xxl, $xl, $lg, $md, $sm, $xs} {
                display: none;
            }
        }
    }
    &__thumb-bg{
        &::before{
            background: linear-gradient(89.91deg, #034833 0.07%, rgba(3, 72, 51, 0) 99.91%);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            width: 100%;
            height: 100%;
            content: "";
            top: 0;
            left: 0;
        }
    }
    &__space{
        padding: 176px 0 191px 0;
        @media #{$sm, $xs} {
            padding: 80px 0 80px 0;
        }
        @media #{$md} {
            padding: 100px 0 100px 0;
        }
        @media #{$lg} {
            padding: 110px 0 110px 0;
        }
        @media #{$xl} {
            padding: 130px 0 130px 0;
        }
    }
    &__content{
        p{
            font-family: var(--rr-ff-heading);
            font-weight: var(--rr-fw-regular);
            color: var(--rr-common-white);
            font-style: normal;
            font-size: 18px;
            line-height: 30px;
            margin-bottom: 0;
        }
    }
    &__title{
        margin-bottom: 20px;
        @media #{$lg} {
            font-size: 45px;
            line-height: 60px;
        }
        @media #{$sm, $xs} {
            margin-bottom: 10px;
        }
    }
    &__btn-wrapper{
        display: flex;
        align-items: center;
        gap: 34px;
        flex-wrap: wrap;
        row-gap: 20px;
        margin-top: 40px;
        @media #{$sm, $xs} {
            margin-top: 25px;
        }
        &-btn{
            padding: 10px 29px;
        }
    }
    &__icon-box{
        display: flex;
        align-items: center;
        gap: 10px;
        .icon{
            background: var(--rr-common-white);
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .text{
            font-family: var(--rr-ff-heading);
            color: var(--rr-common-white);
            font-style: normal;
            font-size: 14px;
            line-height: 30px;
            transition: all 0.3s ease-in-out;
            &:hover{
                color: var(--rr-theme-primary);
            }
        }
    }
    &__slider-arrow-4{
        .slider-nav{
            background: rgba(255, 255, 255, 0.3);
            color: var(--rr-heading-primary);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 777px;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 50px;
            transform: translateY(-50%);
            transition: 0.3s;
            z-index: 2;
            position: absolute;
            transition: all 0.3s ease-in-out;
            &:hover{
                background: var(--rr-common-white);
            }
        }
        .slider-next{
            right: 315px;
            left: auto;        
        }
        .slider-prev{
            left: auto;
            right: 385px;
        }
    }
}
