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

/*============= CTA CSS AREA ===============*/

.vl-cta{
    &-bg{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
        border-radius: 8px;
        position: relative;
        &:after{
            position:absolute;
            content:"";
            left:0;
            top:0;
            height:100%;
            width:100%;
            background:#181713;
            opacity:.5;
        }
        &-8{
            background: var(--ztc-text-text-6);
            &::after{
                display: none;
            }
        }
    }
    &-content{
        padding-top: 70px;
        padding-bottom: 66px;
        position: relative;
        z-index: 1;
        @media #{$md} {
            padding:60px;
       }
        @media #{$xs} {
            padding:20px;
        }
        
        .title{
            font-size: var(--ztc-font-size-font-s44);
            line-height: var(--ztc-specing-height44);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            color: var(--ztc-text-text-1);
            @media #{$md}{
                font-size: var(--ztc-font-size-font-s34);
                line-height: var(--ztc-specing-height44);
            }
            @media #{$xs}{
                font-size: var(--ztc-font-size-font-s32);
                line-height: var(--ztc-specing-height40);
            }
        }
        p{
            color: rgba(255, 255, 255, 0.80);
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height28);
            font-family: var(--ztc-family-font1);
            font-weight: var(--ztc-weight-semibold);
            padding-top: 16px;
            padding-bottom: 28px;
        }
        &-8{
            padding-top: 80px;
            padding-bottom: 80px;
            & .title{
                 line-height: var(--ztc-specing-height52);
            }
        }
        &-9{
            background: var(--ztc-text-text-23);
            border-radius: 8px;
            padding: 32px;
            margin-top: 94px;
            margin-bottom: 50px;
            margin-right: 50px;
            & .title{
                 line-height: var(--ztc-specing-height52);
                 @media #{$md}{
                    font-size: 30px;
                    line-height: 40px;
                 }
            }
        }
        &-10{
            padding: 70px;
            @media #{$xs}{
                padding: 30px;
            }
        }
    }
    &-form{
        width: 370px;
        position: relative;
        @media #{$xs} {
            width: 100%;
        }
        input[type="email"]{
            border-radius: 50px;
            height: 64px;
            &::placeholder{
                color: var(--ztc-text-text-2);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
            }
        }
        &-8{
           input[type="email"]{
            border-radius: 8px;
            height: 66px;
            &::placeholder{
                color: var(--ztc-text-text-2);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
            }
        } 
    }
    &-10{
            input[type="email"]{
            border-radius: 8px;
            height: 61px;
            &::placeholder{
                color: var(--ztc-text-text-2);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
            }
        }
        & .primary-btn-10{
            background: var(--ztc-text-text-28);
            &:hover{
                background: var(--ztc-text-text-27);
            }
            @media #{$xs}{
                width: 100%;
            }
        } 
    }
        
    }
    &-btn {
        background: var(--ztc-text-text-7);
        color: var(--ztc-text-text-3);
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-specing-height18);
        font-family: var(--ztc-family-font1);
        font-weight: var(--ztc-weight-bold);
        padding: 8px 8px 8px 20px;
        border-radius: 50px;
        position: absolute;
        right: 6px;
        top: 6px;
        & span {
            background: #fff;
            height: 36px;
            width: 36px;
            display: inline-block;
            line-height: 36px;
            text-align: center;
            border-radius: 50px;
            transform: rotate(-45deg);
        }
    }
    &-shap {
        position: absolute;
        .shap{
            &-1{
                left: 0;
            }
            &-2{
                position: absolute;
                right: 0;
                bottom: 0;
            }
        }
    }
}


.vl-cta-shap.shap-2 {
    right: 0;
    bottom: 0;
}

.vl-bottom-hand-shape{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.vl-heart-cta-shape-8{
    position: absolute;
    top: 88px;
    right: 90px;
}

/*============= CTA CSS AREA ENDS===============*/

/*============= CTA CSS AREA ===============*/
.vl-cta2{
    background: var(--ztc-bg-bg-5);
    position:relative;
    z-index:1;
    overflow: hidden;
    & .shape{
        position: absolute;
        &-1{
            top: 17px;
            left: 26px;
        }
        &-2{
            bottom: 0px;
            left: 409px;
        }
        &-3{
            top: 0px;
            right:333px;
        }
        &-4{
            top: 138px;
            right:20px;
        }
        &-5{
            bottom: -20px;
            right:20px;
        }
    }
    & .vl-section-title-3{
        & .title{
            line-height: var(--ztc-specing-height54);
            padding-top: 28px;
            @media($xs){
                line-height: var(--ztc-specing-height36);
            }
        }
    }
}



// CTA Home 3

.vl-cta3{
    & .cta-bg{
        background: var(--ztc-text-text-12);
        padding-top:80px;
        padding-bottom: 50px;
        padding-left: 48px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        z-index: 1;
        @media #{$md,$xs}{
            padding:20px;
        }
        & .shap{
            position: absolute;
            right: 0;
            top:0;
            z-index: -1;
        }
        & .cta-thmb3 {
            text-align: end;
            padding-right: 100px;
            border-radius: 8px;
            overflow: hidden;
            @media #{$lg,$md}{
                padding-right: 20px;
                padding-top: 30px;
            }
            @media #{$xs}{
                padding-right: 0px;
            }
            & img{
                border-radius: 8px;
                @media #{$md}{
                    width: 100%;
                }
            }
        }
        & .vl-cta-content3{
            & .title{
                color: var(--ztc-text-text-1);
                font-size: var(--ztc-font-size-font-s44);
                line-height: var(--ztc-specing-height44);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                @media #{$xs}{
                    font-size: var(--ztc-font-size-font-s30);
                    line-height: var(--ztc-specing-height40);
                }
            }
            & .para{
                color: rgba(255, 255, 255, 0.80);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height28);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
                padding-top: 16px;
                padding-bottom: 32px;
            }
            & .cta-btn{
                & .cta-btn1 {
                    background: var(--ztc-text-text-1);
                    display: inline-block;
                    border-radius: 8px;
                    padding: 19px 23px 19px 25px;
                    font-size: var(--ztc-font-size-font-s20);
                    line-height: var(--ztc-specing-height18);
                    font-family: var(--ztc-family-font1);
                    font-weight: var(--ztc-weight-bold);
                    text-transform: uppercase;
                    transition: .3s;
                    color: var(--ztc-text-text-12);
                    position: relative;
                    z-index: 1;
                    margin-right: 14px;
                    &:after{
                        position:absolute;
                        content:"";
                        left:8px;
                        top:8px;
                        height:40px;
                        width:40px;
                        border-radius:50px;
                        background:#E6F3FF;
                        z-index:-1;
                        transition: .3s;

                    }
                    &::before{
                        position: absolute;
                        content: "";
                        left: 0;
                        top:0;
                        height:100%;
                        width: 100%;
                        background: var(--ztc-text-text-11);
                        z-index:-1;
                        border-radius: 8px;
                        transform:scaleX(0);
                        transition: .3s;
                    }
                    &:hover{
                        &::after{
                            width: 100%;
                            height: 100%;
                            left: 0;
                            top:0;
                            border-radius: 8px;
                            transition: .3s;
                        }
                    }
                }
                & .cta-btn2 {
                    display: inline-block;
                    color:var(--ztc-text-text-1);
                    border: 2px solid var(--ztc-text-text-1);
                    border-radius: 8px;
                    padding: 17px 23px 17px 25px;
                    font-size: var(--ztc-font-size-font-s20);
                    line-height: var(--ztc-specing-height18);
                    font-family: var(--ztc-family-font1);
                    font-weight: var(--ztc-weight-bold);
                    text-transform: uppercase;
                    transition: .3s;
                    position: relative;
                    z-index: 1;
                    @media #{$xs}{
                       margin-top: 20px;
                    }
                    &:after{
                        position: absolute;
                        content:"";
                        left: 8px;
                        top:8px;
                        height: 40px;
                        width:40px;
                        border-radius: 50px;
                        background:#339DFF;
                        transition: .3s;
                        z-index: -1;
                    }
                    &:hover{
                        &:after{
                            transition:.3s;
                            width: 100%;
                            height:100%;
                            left:0;
                            top:0;
                            border-radius: inherit;
                        }
                    }
                }
            }
        }
    }
}


// CTA Home 4
.vl-cta4{
    & .vl-cta-bg4{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 1;
        border-radius: 8px;
        padding-top: 100px;
        padding-left: 60px;
        padding-bottom: 70px;
        overflow:hidden;
        @media #{$md} {
            padding-right: 60px;
        }
        @media #{$xs} {
            padding: 30px;
        }

        & .shape{
            position: absolute;
            left:120px;
            top: 0;
            height:100%;
            width:100%;
            & img{
                height: 100%;
            }
        }
        &::after{
            position:absolute;
            content:"";
            left:0;
            top:0;
            height:100%;
            width:100%;
            background: #00263A;
            opacity:.7;
            z-index: -1;
        }
        & .cta-content{
            position:relative;
            z-index: 2;
            & .title{
                color:var(--ztc-text-text-1);
                font-size: var(--ztc-font-size-font-s44);
                line-height: var(--ztc-specing-height44);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                @media #{$md}{
                    font-size: var(--ztc-font-size-font-s34);
                    line-height: var(--ztc-specing-height44);
                }
                @media #{$xs}{
                    br{
                        display: none;
                    }
                    font-size: var(--ztc-font-size-font-s32);
                    line-height: var(--ztc-specing-height40);
                }
            }
            & .para{
                color: var(--ztc-text-text-1);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height28);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
                padding-top: 16px;
                padding-bottom:32px;
            }
            & .vl-ctaform{
                display:flex;
                @media #{$xs} {
                    display:block;
                }
               & input{
                    width: 270px;
                    border-radius: 50px;
                    height:52px;
                    margin-right:16px;
                    @media #{$xs} {
                        width: 100%;
                    }
                }

                & .btn-area4{
                   & .header-btn1{
                        @media #{$xs} {
                            width: 100%;
                            margin-top: 30px;
                        }
                   }
                    
                }
            }
        }
        & .vl-ctathumb {
            position: absolute;
            top: 0;
            right: -82px;
            @media #{$md,$xs} {
                position: relative;
                right:0;
           }
        }
    }
}


.vl-cta-btn5.btn5 {
    position: absolute;
    right: 6px;
    top: 6px;
    & .btn-priamry1 {
        border-radius: 50px !important;
        &::after{
            border-radius: 50px;
        }
    }  
}


// CTA Home 6

.cta-wrap-6{
    border-radius: 30px;
    position: relative;
    z-index: 1;
    padding-top: 80px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 50px;
    @media #{$md,$xs}{
        padding: 0;
    }
    & .vl-cta-content{
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 50px;
        @media #{$xl}{
            margin-right: 0;
        }
        & .title{
            line-height: var(--ztc-specing-height52);
            @media #{$md}{
                line-height: var(--ztc-specing-height42);
            }
            @media #{$xs}{
                line-height: var(--ztc-specing-height42);
            }
        }
        @media #{$md,$xs}{
            margin-right: 20px;
            padding: 40px;
            padding-bottom: 0;
        }
        &-7{
            background: var(--ztc-text-text-1);
            padding: 32px;
            border-radius: 8px;
            & .title{
                color: var(--ztc-text-text-20);
                line-height: var(--ztc-specing-height52);
                @media #{$xl}{
                    font-size: var(--ztc-font-size-font-s32);
                    line-height: var(--ztc-specing-height42);
                }
                @media #{$md}{
                    line-height: var(--ztc-specing-height42);
                }
                @media #{$xs}{
                    line-height: var(--ztc-specing-height42);
                }
            }
            & p{
                color: var(--ztc-text-text-21);
            }
        }
    }
    & .vl-shape{
        position: absolute;
        bottom: 0;
        right: 50px;
    }
    & .vl-cta-thumb-6 {
        position: absolute;
        right: 53px;
        bottom: 0;
        @media #{$lg}{
            right: -46px;
        }
        @media #{$md,$xs}{
            position: relative;
            right: 0;
            margin-bottom: -31px;
            text-align: center;
        }
    }
    &-7{
        padding-top: 120px;
        padding-left: 24px;
        padding-bottom: 24px;  
    }
}

.vl-cta-bg.green-bg.cta-wrap-6::after{
    background: none;
}

.vl-cta-bottom-shape-6 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.vl-cta-bottom-shape-6 img {
    width: 100%;
}

.vl-cta-right-shape {
    position: absolute;
    top: 0;
    left: 0;
}

// cta home 9

.vl-cta-wrap-9{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    object-fit: cover;
    & .shape-9{
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    & .right-shape{
        position: absolute;
        top: 0;
        right: 0;
    }
    & .hert-shape{
        position: absolute;
        top: 216px;
        right: 66px;
    }
}