@use '../../utils' as *;

/*----------------------------------------*/
/*  7.1 cta-4
/*----------------------------------------*/
.cta-4{
    background: var(--rr-heading-primary);
    padding: 137px 0 307px 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    &__bg{
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0.2;
    }
    &__wrapper{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 20px;
        column-gap: 20px;
    }
    &__text{
        &-title{
            font-family: var(--rr-ff-heading);
            color: var(--rr-common-white);
            font-weight: var(--rr-fw-bold);
            font-style: normal;
            font-size: 50px;
            line-height: 60px;
            @media #{$sm} {
                font-size: 42px;
                line-height: 52px; 
            }
            @media #{$xs} {
                font-size: 42px;
                line-height: 52px; 
            }
            @media #{$mxs} {
                font-size: 37px;
                line-height: 48px; 
            }
            @media #{$sm, $xs} {
                br{
                    display: none;
                }
            }
        }
    }
    &__icon{
        a{
            background: var(--rr-common-white);
            width: 126px;
            height: 126px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transform: translate(0);
            padding-left: 5px;
        }
        @media #{$sm, $xs} {
            margin: 0 auto;
            margin-top: 40px;
        }
        .video-btn{
            &::before{
                content: '';
                display: block;
                position: absolute;
                top: 0; 
                right: 0; 
                bottom: 0; 
                left: 0;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                animation: ripple 2s linear infinite;
            }
            &::after{
                content: '';
                display: block;
                position: absolute;
                top: 0; 
                right: 0; 
                bottom: 0; 
                left: 0;
                border: 2px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                animation: ripple 2s linear 1s infinite;
            }
        }
    }
}