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

/*============= CTA CSS AREA ===============*/
.cta-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-4);
    @media #{$xs} {
        padding: 0;
    }
    @media #{$md} {
        padding: 0;
    }
    .cta-bg1 {
        position: absolute;
        top: 0;
        right: 0;
    }
    .cta-bg2 {
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .cta-header-area {
        background: var(--ztc-text-text-4);
        border-radius: 4px;
        position: relative;
        h2 {
            color: var(--ztc-text-text-1);
        }
        p {
            color: var(--ztc-text-text-1);
            opacity: 80%;
        }
        .btn-area {
            display: inline-block;
            margin-top: 32px;
            a {
                &::after {
                display: none;
                }
                color: var(--ztc-text-text-4);
                background: var(--ztc-text-text-1);
                span {
                    background: var(--ztc-text-text-4);
                    color: var(--ztc-text-text-1);
                }
                &:hover {
                    color: var(--ztc-text-text-1);
                    background: var(--ztc-text-text-13);
                    span {
                        background: var(--ztc-text-text-1);
                        color: var(--ztc-text-text-4);
                        transition: all .4s;
                    }
                }
            }
        }
    }
}

// hoomepage2 //
.cta2-section-area {
    .cta-author-area {
        position: relative;
        z-index: 1;
        padding: 50px;
        border-radius: 8px;
        overflow: hidden;
        &::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            transition: all .4s;
            background: var(--ztc-text-text-1);
            opacity: 15%;
            border-radius: 8px;
            z-index: -1;
        }
        .images {
            position: relative;
            text-align: end;
            .cta-img1 {
                text-align: end;
                height: 250px;
                width: 250px;
                @media #{$xs} {
                    height: 100%;
                    width: 100%;
                    border: 8px;
                    transition: all .4s;
                    margin-top: 30px; 
                }
                @media #{$md} {
                    height: 100%;
                    width: 100%;
                    border: 8px;
                    transition: all .4s;
                }

            }
            .bg1 {
                position: absolute;
                top: -50px;
                right: -100px;
            }
            .elements7 {
                position: absolute;
                bottom: -100px;
                left: -60%;
            }
            .elements6 {
                position: absolute;
                top: 30px;
                left: -30%;
            }
        }
    }
}

// hoomepage3 //
.cta3-section-area {
    position: relative;

    .cta-author-area {
        position: relative;
        z-index: 1;
        padding: 50px;
        border-radius: 8px;
        overflow: hidden;
        background: var(--ztc-bg-bg-14);
        .images {
            position: relative;
            text-align: end;
            .cta-img1 {
                text-align: end;
                height: 250px;
                width: 250px;
                @media #{$xs} {
                    height: 100%;
                    width: 100%;
                    border: 8px;
                    transition: all .4s;
                    margin-top: 30px; 
                }
                @media #{$md} {
                    height: 100%;
                    width: 100%;
                    border: 8px;
                    transition: all .4s;
                }

            }
            .bg1 {
                position: absolute;
                top: -50px;
                right: -100px;
            }
            .elements7 {
                position: absolute;
                bottom: -100px;
                left: -60%;
            }
            .elements6 {
                position: absolute;
                top: 30px;
                left: -30%;
            }
        }
    }
}

// homepage4 //
.cta4-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-6);
    @media #{$xs} {
        padding: 0;
    }
    @media #{$md} {
        padding: 0;
    }
    .cta-bg1 {
        position: absolute;
        top: 0;
        right: 0;
    }
    .cta-bg2 {
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .cta-header-area {
        background: var(--ztc-text-text-6);
        border-radius: 4px;
        position: relative;
        h2 {
            color: var(--ztc-text-text-1);
        }
        p {
            color: var(--ztc-text-text-1);
            opacity: 80%;
        }
        .btn-area {
            display: inline-block;
            margin-top: 32px;
            .header-btn7 {
                color: var(--ztc-text-text-1);
                border-top:1px solid var(--ztc-text-text-1);
                border-bottom: 1px solid var(--ztc-text-text-1);
            }
            .header-btn12 {
                color: var(--ztc-text-text-1);
                background: var(--ztc-text-text-2);
            }
        }
    }
}

// homepage5 //
.cta5-section-area {
    position: relative;
    z-index: 1;
    .cta-header-area {
        h2 {
            color: var(--ztc-text-text-10);
        }
        p {
            color: var(--ztc-text-text-10);
            opacity: 80%;
        }
        .btn-area1 {
            .header-btn9 {
                margin-top: 32px;
            }
            .header-btn10 {
                margin-top: 32px;
                margin-left: 20px;
                @media #{$xs} {
                    margin-left: 0;
                }
            }
        }
    }
}

.cta-section-area.others-cta {
    .form-area {
        form {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--ztc-text-text-1);
            padding: 20px;
            border-radius: 90px;
            z-index: 1;
            @media #{$xs} {
                width: 100%;
                left: 0;
                display: inline-block;
                position: relative;
                left: 0;
                z-index: 1;
                top: 0;
                margin-bottom: 50px;
                border-radius: 4px;
            }
            @media #{$md} {
                left: 0;
                width: 100%;
                top: 0;
                margin-bottom: 50px;
                position: relative;
            }
            .input-area {
                display: flex;
                align-items: center;
                @media #{$xs} {
                    margin-bottom: 20px;
                }
                input {
                    width: 100%;
                    margin-left: 6px;
                    font-family: var(--ztc-family-font1);
                    font-size: var(--ztc-font-size-font-s16);
                    font-weight: var(--ztc-weight-semibold);
                    color: var(--ztc-text-text-2);
                    &::placeholder {
                        color: var(--ztc-text-text-3);
                        font-weight: var(--ztc-weight-regular);
                    }
                }
            }
        }
        .btn-area {
            margin-top: 0;
            a {
                background: var(--ztc-text-text-4);
                color: var(--ztc-text-text-1);
                span {
                    background: var(--ztc-text-text-1);
                    color: var(--ztc-text-text-4);
                }
            }
        }
    }
    ul {
        text-align: start !important;
        margin-top: 24px;
        li {
            display: inline-block;
            &:nth-child(1) {
                color: var(--ztc-text-text-1);
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s18);
                font-style: normal;
                font-weight: var(--ztc-weight-semibold);
                line-height: 18px;            
            }
            a {
                color: var(--ztc-text-text-2);
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s16);
                font-style: normal;
                font-weight: var(--ztc-weight-regular);
                line-height: 16px; 
                transition: all .4s;
                padding: 8px 12px;
                border-radius: 40px; 
                background: var(--ztc-text-text-1);
                display: inline-block; 
                margin: 0 0 0 12px; 
                &:hover {
                    background: var(--ztc-text-text-2);
                    color: var(--ztc-text-text-1);
                    transition: all .4s;
                }
            }
        }
    }
}

  .analysis-area {
    .analysis-inner-section {
        margin-bottom: 60px;
        @media #{$xs} {
            margin-bottom: 30px;
        }
        @media #{$md} {
            margin-bottom: 30px;
        }

    }
    .services-seo-scroll {
        @media #{$md} {
            width: 200%;
            overflow-y:auto;
            position: relative;
        }
        @media #{$xs} {
            width: 400%;
            overflow-y:auto;
            position: relative;
        }
    }
    .services-seo {
        border-radius: 8px;
        position: relative;
        background: var(--ztc-text-text-1);
        box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.08);
        @media #{$md} {
            overflow-x: auto;
        }
        @media #{$xs} {
            overflow-x: auto;
        }
    }
    .services-seo-head {
        background-color: var(--ztc-text-text-4);
        padding: 16px 65px 16px 24px;
        border-radius:4px;
      }

      .services-seo-item {
        padding-right: 65px;
        padding-left: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid #E8EAEC;
      }
      .services-seo-heading-title {
        margin: 0;
      }
      .services-seo-heading-title label {
        font-family: var(--ztc-family-font1);
        color: var(--ztc-text-text-1);
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        font-style: normal;
        font-weight: var(--ztc-weight-regular);
        line-height: 16px;
        padding-left: 22px;
        position: relative;
        cursor: pointer;
      }
      .services-seo-heading-title label::after {
        position: absolute;
        content: "";
        top: -1px;
        left: 0;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border: 1px solid #C3C7C9;
        -webkit-transition: all 0.2s ease-out 0s;
        -moz-transition: all 0.2s ease-out 0s;
        -ms-transition: all 0.2s ease-out 0s;
        -o-transition: all 0.2s ease-out 0s;
        transition: all 0.2s ease-out 0s;
        border-radius: 4px;
      }
      .services-seo-heading-title label::before {
        position: absolute;
        content: url("../img/icons/check8.svg");
        top: -1px;
        left: 0;
        width: 16px;
        height: 16px;
        line-height: 15px;
        text-align: center;
        visibility: hidden;
        opacity: 0;
        color: var(--tp-common-white);
        -webkit-transition: all 0.2s ease-out 0s;
        -moz-transition: all 0.2s ease-out 0s;
        -ms-transition: all 0.2s ease-out 0s;
        -o-transition: all 0.2s ease-out 0s;
        transition: all 0.2s ease-out 0s;
        z-index: 1;
      }
      .services-seo-heading-title input {
        display: none;
      }
      .services-seo-heading-title input:checked ~ label::after {
        background-color: var(--ztc-text-text-4);
        border-color: var(--ztc-text-text-4);
      }
      .services-seo-heading-title input:checked ~ label::before {
        visibility: visible;
        opacity: 1;
      }
      .services-seo-heading-item span {
        color: var(--ztc-text-text-1);
        font-family: var(--ztc-family-font1);
        font-size: var(--ztc-font-size-font-s16);
        font-style: normal;
        font-weight: var(--ztc-weight-regular);
        line-height: 16px;
        padding-left: 70px;
      }
      .services-seo-heading-item span i {
        font-weight: 600;
        transform: translateY(2px);
        margin-right: 5px;
      }
      .services-seo-link-check label {
        font-family: var(--ztc-family-font1);
        font-weight: var(--ztc-weight-regular);
        font-size: var(--ztc-font-size-font-s16);
        line-height: 1;
        color: var(--ztc-text-text-2);
        position: relative;
        cursor: pointer;
        padding-left: 22px;
      }
      .services-seo-link-check label::after {
        position: absolute;
        content: "";
        top: 1px;
        left: 0;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border: 1px solid #C3C7C9;
        -webkit-transition: all 0.2s ease-out 0s;
        -moz-transition: all 0.2s ease-out 0s;
        -ms-transition: all 0.2s ease-out 0s;
        -o-transition: all 0.2s ease-out 0s;
        transition: all 0.2s ease-out 0s;
        border-radius: 4px;
      }
      .services-seo-link-check label::before {
        position: absolute;
        content: url("../img/icons/check7.svg");
        top: 1px;
        left: 0;
        width: 16px;
        height: 16px;
        line-height: 15px;
        text-align: center;
        visibility: hidden;
        opacity: 0;
        color: var(--tp-common-white);
        -webkit-transition: all 0.2s ease-out 0s;
        -moz-transition: all 0.2s ease-out 0s;
        -ms-transition: all 0.2s ease-out 0s;
        -o-transition: all 0.2s ease-out 0s;
        transition: all 0.2s ease-out 0s;
        z-index: 1;
      }
      .services-seo-link-check input {
        display: none;
      }
      .services-seo-link-check input:checked ~ label::after {
        background-color: var(--ztc-text-text-4);
        border-color: var(--ztc-text-text-4);
      }
      .services-seo-link-check input:checked ~ label::before {
        visibility: visible;
        opacity: 1;
      }
      .services-seo-link-check span {
        color: var(--ztc-text-text-4);
        font-family: var(--ztc-family-font1);
        font-weight: var(--ztc-weight-regular);
        font-size: var(--ztc-font-size-font-s12);
        line-height: 1;
        padding-left: 22px;
        display: block;
      }
      
      .services-seo-catagory-item {
        padding-left: 70px;
        a {
            color: var(--ztc-text-text-2);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s16);
            font-style: normal;
            font-weight: var(--ztc-weight-regular);
            line-height: 16px;
            display: inline-block;
            
        }
        .incridable-rank {
            i {
                margin-left: 4px;
                margin-top: -15px;
                font-size: 8px;
            }
        }
    }
  }
// Homepage 07 //

  .cta7-section-area {
    position: relative;
    background: var(--ztc-text-text-15);
    .cta-header {
       .bnt-area1 {
        .header-btn14 {
            margin-top: 32px;
            &:hover {
                background: var(--ztc-text-text-1);
                color: var(--ztc-text-text-15);
            }
        }
        .header-btn14.btn2 {
            background: none;
            border: 1px solid var(--ztc-text-text-1);
            color: var(--ztc-text-text-1);
            margin-left: 20px;
            margin-top: 32px;
            @media #{$xs} {
                margin-left: 0;
            }
            &:hover {
                background: var(--ztc-text-text-14);
                border: 1px solid var(--ztc-text-text-14);
            }
        }
       } 
    }
  }
  
//   Homepage 08 //
.cta8-section-area {
    position: relative;
    z-index: 1;
    background: var(--ztc-text-text-16);
    .cta-bg1 {
        position: absolute;
        top: 0;
        right: 0;
    }
    .cta-bg2 {
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .cta-header-area {
        border-radius: 4px;
        position: relative;
        h2 {
            color: var(--ztc-text-text-1);
        }
        p {
            color: var(--ztc-text-text-1);
            opacity: 80% !important;
        }
        .btn-area {
            display: inline-block;
            margin-top: 32px;
            .header-btn15 {
                background: var(--ztc-bg-bg-27);
                color: var(--ztc-text-text-2);
                &:hover {
                    background: var(--ztc-text-text-2);
                    transition: all .4s;
                    color: var(--ztc-text-text-1);
                }
            }
            .header-btn15.btn2 {
                background: none;
                border: 1px solid var(--ztc-text-text-1);
                color: var(--ztc-text-text-1);
                margin-left: 20px;
                @media #{$xs} {
                    margin-left: 0;
                    margin-top: 20px;
                }
                &:hover {
                    background: var(--ztc-bg-bg-27);
                    color: var(--ztc-text-text-2);
                    border: 1px solid var(--ztc-bg-bg-27);
                }
            }
        }
    }
}

// Homepage 08 //
.ctaanalycis-section-area.others-cta {
    background: var(--ztc-bg-bg-26);
    position: relative;
    .cta-bg1 {
        position: absolute;
        top: 0;
        right: 0;
    }
    .cta-bg2 {
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .cta-header-area {
        h5 {
            color: var(--ztc-text-text-1);
            &::after {
                background: var(--ztc-text-text-1);
            }
            &::before {
                background: var(--ztc-text-text-1);
            }
        }

        h2 {
            color: var(--ztc-text-text-1);
        }
    }
    .form-area {
        form {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--ztc-text-text-1);
            padding: 20px;
            border-radius: 90px;
            z-index: 1;
            @media #{$xs} {
                width: 100%;
                left: 0;
                display: inline-block;
                position: relative;
                left: 0;
                z-index: 1;
                top: 0;
                margin-bottom: 50px;
                border-radius: 4px;
            }
            @media #{$md} {
                left: 0;
                width: 100%;
                top: 0;
                margin-bottom: 50px;
                position: relative;
            }
            .input-area {
                display: flex;
                align-items: center;
                @media #{$xs} {
                    margin-bottom: 20px;
                }
                input {
                    width: 100%;
                    margin-left: 6px;
                    font-family: var(--ztc-family-font1);
                    font-size: var(--ztc-font-size-font-s16);
                    font-weight: var(--ztc-weight-semibold);
                    color: var(--ztc-text-text-2);
                    &::placeholder {
                        color: var(--ztc-text-text-3);
                        font-weight: var(--ztc-weight-regular);
                    }
                }
            }
        }
        .btn-area {
            margin-top: 0;
        }
    }
    ul {
        text-align: start !important;
        margin-top: 24px;
        li {
            display: inline-block;
            &:nth-child(1) {
                color: var(--ztc-text-text-1);
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s18);
                font-style: normal;
                font-weight: var(--ztc-weight-semibold);
                line-height: 18px;            
            }
            a {
                color: var(--ztc-text-text-2);
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s16);
                font-style: normal;
                font-weight: var(--ztc-weight-regular);
                line-height: 16px; 
                transition: all .4s;
                padding: 8px 12px;
                border-radius: 40px; 
                background: var(--ztc-text-text-1);
                display: inline-block; 
                margin: 0 0 0 12px; 
                &:hover {
                    background: var(--ztc-text-text-2);
                    color: var(--ztc-text-text-1);
                    transition: all .4s;
                }
            }
        }
    }
}

// Homepage 09 //
.cta9-section-area {
    position: relative;
    z-index: 2;
    margin-bottom: -150px;
    @media #{$xs} {
        margin-bottom: 50px;
    }
    .images {
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

    }

    .cta-content-area {
        background: var(--ztc-bg-bg-28);
        border-radius: 8px;
        position: relative;
        padding: 24px 32px;
        @media #{$xs} {
            margin-top: 30px;
        }
        @media #{$md} {
            margin-top: 30px;
        }
        h2 {
            color: var(--ztc-text-text-1);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s44);
            font-style: normal;
            font-weight: var(--ztc-weight-semibold);
            line-height: var(--ztc-font-size-font-s52); 
            @media #{$xs} {
                font-size: var(--ztc-font-size-font-s30);
                line-height: var(--ztc-font-size-font-s40);
            }
        }
        p {
            color: var(--ztc-text-text-1);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s16);
            font-style: normal;
            font-weight: var(--ztc-weight-regular);
            line-height: 26px;            
        }
        .btn-area1 {
            a {
                background: var(--ztc-text-text-1);
                color: var(--ztc-bg-bg-28);
                span {
                    background: var(--ztc-text-text-17);
                    color: var(--ztc-text-text-1);
                }
                &:hover {
                    background: var(--ztc-text-text-2);
                    color: var(--ztc-text-text-1);
                    
                }
            }
        }
    }
}

// Homepage 10 //
.cta10-section-area {
    position: relative;
    z-index: 2;
    margin-bottom: -150px;
    @media #{$xs} {
        margin-bottom: 50px;
    }
    .images {
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

    }

    .cta-content-area {
        background: var(--ztc-bg-bg-25);
        border-radius: 8px;
        position: relative;
        padding: 24px 32px;
        @media #{$xs} {
            margin-top: 30px;
        }
        @media #{$md} {
            margin-top: 30px;
        }
        h2 {
            color: var(--ztc-text-text-1);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s44);
            font-style: normal;
            font-weight: var(--ztc-weight-semibold);
            line-height: var(--ztc-font-size-font-s52); 
            @media #{$xs} {
                font-size: var(--ztc-font-size-font-s30);
                line-height: var(--ztc-font-size-font-s40);
            }
        }
        p {
            color: var(--ztc-text-text-1);
            font-family: var(--ztc-family-font1);
            font-size: var(--ztc-font-size-font-s16);
            font-style: normal;
            font-weight: var(--ztc-weight-regular);
            line-height: 26px;            
        }
        .btn-area1 {
            a {
                background: var(--ztc-text-text-1);
                color: var(--ztc-bg-bg-25);
                span {
                    background: var(--ztc-text-text-14);
                    color: var(--ztc-text-text-1);
                }
                &:hover {
                    background: var(--ztc-text-text-2);
                    color: var(--ztc-text-text-1);
                    
                }
            }
        }
    }
}

// Homepage 11 //
.cta11-section-area {
    position: relative;
    z-index: 1;
    background-image: url(../img/bg/cta-bg6.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .cta-header {
        @media #{$xs} {
            margin-bottom: 30px;
        }
        @media #{$md} {
            margin-bottom: 30px;
        }
        h2 {
            color: #FFF;
            font-family: var(--ztc-family-font1);
            font-size: 44px;
            font-style: normal;
            font-weight: 700;
            line-height: 54px; 
            @media #{$xs} {
                font-size: 32px;
                line-height: 40px;
            }          
        }
        form {
            position: relative;
            z-index: 1;

            input {
                border-radius: 8px;
                background: var(--White-Colors, #FFF);
                position: relative;
                width: 100%;
                color: var(--Paragraph-Color, #464D58);
                font-family: var(--ztc-family-font1);
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px; 
                padding: 27px;
                height: 72px;              
            }
            button {
                border-radius: 8px;
                background: var(--Linner-Color, linear-gradient(268deg, #408BFF 0.24%, #0A18A1 98.24%));
                color: #FFF;
                font-family: var(--ztc-family-font1);
                font-size: 18px;
                font-style: normal;
                font-weight: 700;
                line-height: 18px;
                padding: 18px 24px;
                outline: none;
                border: none; 
                position: absolute;
                right: 8px;
                top: 8px; 
                i {
                    margin-left: 4px;
                    transform: rotate(-45deg);
                }            
            }
        }
    }
    .cta-box {
        display: flex;
        align-items: center;
        border-radius: 8px;
        background: #4272E1;
        padding: 24px;

        .icon {
            height: 60px;
            width: 60px;
            text-align: center;
            line-height: 60px;
            border-radius: 50%;
            display: inline-block;
            transition: all .4s;
            background: var(--ztc-text-text-1);
        }
        .text {
            padding-left: 16px;
            p {
                color: #FFF;
                font-family: var(--ztc-family-font1);
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;  
                opacity: 0.8;           
            }
            a {
                color: #FFF;
                font-family: var(--ztc-family-font1);
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: 20px;
                display: inline-block;

            }
        }
    }
}

// Homepage 12 //
.cta12-section-area {
    position: relative;
    z-index: 1;
    background-image: url(../img/bg/cta-bg7.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .cta-header {
        @media #{$xs} {
            margin-bottom: 30px;
        }
        @media #{$md} {
            margin-bottom: 30px;
        }
        h2 {
            color: #055346;
            font-family: var(--ztc-family-font1);
            font-size: 44px;
            font-style: normal;
            font-weight: 700;
            line-height: 54px; 
            @media #{$xs} {
                font-size: 32px;
                line-height: 40px;
            }          
        }
        form {
            position: relative;
            z-index: 1;

            input {
                border-radius: 8px;
                background: var(--White-Colors, #FFF);
                position: relative;
                width: 100%;
                color: var(--Paragraph-Color, #464D58);
                font-family: var(--ztc-family-font1);
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 18px; 
                padding: 27px;
                height: 72px;              
            }
            button {
                outline: none;
                border: none; 
                position: absolute;
                right: 8px;
                top: 8px;            
            }
        }
    }
    .cta-box {
        display: flex;
        align-items: center;
        border-radius: 8px;
        background: #C7E960;
        padding: 24px;

        .icon {
            height: 60px;
            width: 60px;
            text-align: center;
            line-height: 60px;
            border-radius: 50%;
            display: inline-block;
            transition: all .4s;
            background: var(--ztc-text-text-1);
        }
        .text {
            padding-left: 16px;
            p {
                color: #055346;
                font-family: var(--ztc-family-font1);
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;  
                opacity: 0.8;           
            }
            a {
                color: #055346;
                font-family: var(--ztc-family-font1);
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: 20px;
                display: inline-block;

            }
        }
    }
}

// Homepage 13 //
.cta13-section-area {
    position: relative;
    z-index: 1;
    background-image: url(../img/bg/cta-bg13.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    .cta13-bg1 {
        position: absolute;
        top: -10px;
        left: -50px;
        height: 100%;
        width: 100%;
        object-fit: contain;
        @media #{$xs} {
            display: none;
        }
    }
    .cta13-header {
        h2 {
            color: var(--ztc-text-text-1);
        }
        p {
            color: #fff;
            opacity: 80%;
        }
        a {
            border: 1px solid #FF5417;
        }
        .header-btn21 {
            background: #fff;
            color: #FF5417;
            &:hover {
                color: var(--ztc-text-text-1);
            }
        }
        .header-btn21.btn2 {
            margin-left: 16px;
            background: transparent;
            border: 1px solid #fff;
            color: #fff;
            &:hover {
                border: 1px solid var(--ztc-text-text-2);
            }
            @media #{$xs} {
                margin-left: 0;
                margin-top: 20px;
            }
        }
    }
}

// Homepage 14 //
.cta14-section-area {
    position: relative;
    z-index: 1;
    background-image: url(../img/bg/haeder-bg14.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .elements27 {
        position: absolute;
        right: 0;
        height: 100%;
        top: 0;
    }
    .cta14-header {
        .header-btn23.btn2 {
            margin-left: 16px;
            background: none;
            border: 1px solid #fff;
            color: #fff;
            &::after {
                border: 1px solid #090B0E !important;
            }
            @media #{$xs} {
                margin-left: 0;
                margin-top: 20px;
            }
        }       
    }
    .rating-box {
        background: var(--ztc-text-text-1);
        border-radius: 4px;
        padding: 20px;
        text-align: center;
        display: inline-block;
        position: relative;
        left: 50px;
        @media #{$md} {
            left: 300px;
            margin-top: 30px;
        }
        @media #{$xs} {
            left: 150px;
            margin-top: 30px;
        }
        p {
            color: var(--black, #000);
            text-align: center;
            font-family: var(--ztc-family-font1);
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px;         
        }
        ul {
            li {
                height: 32px;
                width: 32px;
                text-align: center;
                line-height: 32px;
                border-radius: 4px;
                transition: all .4s;
                color: var(--ztc-text-text-1);
                border-radius: var(--rounded-sm, 2px);
                background: var(--Color, linear-gradient(90deg, #202CD3 1.1%, #0778F9 100%));                
                display: inline-block;
            }
        }
    }
    .cta-images {
        position: relative;
        @media #{$xs} {
            margin-top: 30px;
            left: -59px;
            top: -88px;
        }
        @media #{$md} {
            margin-top: 30px;
        }
        .img1 {
            position: absolute;
            top: -72px;
            z-index: 1;
            @media #{$md} {
                top: -150px;
            }
            .cta-img1-h14 {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
        .elements29 {
            left: -60px;
            top: 150px;
        }
    }
}

// Homepage 15 //
.cta15-section-area {
    position: relative;
    z-index: 1;
    background: #090B0E;
    .cta-header-area {
        h2 {
            color: var(--white, var(--white, #FFF));
            text-align: center;
            font-family: var(--ztc-family-font1);
            font-size: 36px;
            font-style: normal;
            font-weight: 700;
            line-height: 125%;
            letter-spacing: -0.36px;
            transition: all .4s;            
        }
        p {
            color: var(--gray-400, var(--gray-400, #9CA3AF));
            text-align: center;
            font-family: var(--ztc-family-font1);
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
                        
        }
        form {
            position: relative;
            z-index: 1;
            border-radius: 111111px;
            border-top: 1px solid var(--gray-600, #4B5563);
            border-bottom: 1px solid var(--gray-600, #4B5563);
            border-left: 1px solid var(--gray-600, #4B5563);
            background: var(--gray-700, #374151);
            padding: 14px 16px;
            width: 500px;
            margin: 0 auto;
            @media #{$xs} {
                width: 100%;
            }
            input {
                width: 100%;
                font-family: var(--ztc-family-font1);
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
                padding-left: 22px;
                color: #fff;
                &::placeholder {
                    color: var(--gray-400, var(--gray-400, #9CA3AF));
                    font-family: var(--ztc-family-font1);
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 150%;  
                }             
            }
            button {
                position: absolute;
                right: 0;
                outline: none;
                border: none;
                transition: all .4s;
                top: 0;
            }
            i {
                position: absolute;
                left: 0;
                color: #9CA3AF;
                padding-left: 16px;
                top: 9px;
            }
        }
        span {
            color: var(--gray-400, var(--gray-400, #9CA3AF));
            font-family: var(--ztc-family-font1);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 14px; /* 100% */  
            display: inline-block;
            transition: all .4s;
            @media #{$xs} {
                line-height: 20px;
            }
            a {
                color: #fff !important;
                transition: all .4s;
                display: inline-block;
                font-weight: 700;
            }          
        }
    }
}
/*============= CTA CSS AREA ENDS===============*/