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

/*----------------------------------------*/
/*  7.9 cta css start
/*----------------------------------------*/

.#{$theme-prifix}-cta{
    &-wd{
        &-shape{
            position: absolute;
            bottom: -16px;
            right: 0;
            width: 36%;
            & svg{
                width: 100%;
            }
        }
        &-email{
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            padding: 21px 35px;
            background: var(--tp-common-black);
            @media #{$xs}{
                padding: 15px 21px;
            }
            &:hover{
                color: var(--tp-grey-1);
            }
        }
    }
    &-sa{
        &-btn{
            position: absolute;
            bottom: 0;
            right: 0;
            @media #{$sm,$xs}{
                position: inherit;
                margin-top: 30px;
            }
        }
    }
    &-it{
        &-form{
            & .cta-it-input{
                font-family: var(--tp-ff-inter);
                font-weight: 400;
                font-size: 18px;
                letter-spacing: -0.04em;
                color: var(--tp-common-black);
                opacity: 0.8;
                border: 1px solid rgba(16, 48, 42, 0.1);
                border-radius: 10px;
                width: 518px;
                height: 70px;
                background: transparent;
                @media #{$xs}{
                    width: 100%;
                }
                &:focus{
                    border-color: var(--tp-common-black-1);
                }
                &::placeholder{
                    font-family: var(--tp-ff-inter);
                    font-weight: 400;
                    font-size: 18px;
                    letter-spacing: -0.04em;
                    color: var(--tp-common-black-1);
                }
            }
        }
        &-trams{
            opacity: 0.8;
            & a{
                text-decoration: underline;
            }
        }
        &-scale{
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            z-index: -1;
        }
        &-shape{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 36%;
            -webkit-animation: levitate-lg 4s ease-in-out infinite;
            animation: levitate-lg 4s ease-in-out infinite;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
            &-2{
                position: absolute;
                top: 0;
                right: 0;
                width: 35%;
                -webkit-animation: levitate-lg 4s ease-in-out infinite;
                animation: levitate-lg 4s ease-in-out infinite;
                -webkit-animation-delay: 1s;
                animation-delay: 1s;
            }
        }
    }
    &-pb{
        &-wrap{
            padding: 77px 0px 55px 0px;
            flex-wrap: wrap;
        }
    }
    &-ai{
        &-bg{
            border-radius: 60px;
            padding: 187px 30px 200px 30px;
            @media #{$lg,$md,$sm,$xs}{
                padding: 100px 30px 100px 30px;
            }
        }
    }
}