.cta-banner-section {
    position: relative;

    &::before {
        @include before;
        background-image: $color-gradient-2;
    }
}

.cta-banner-wrapper {
    position: relative;
    z-index: 1;
    @include flex;
    justify-content: space-between;

    @include breakpoint (max-xl){
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        text-align: center;
    }
}

.cta-chat-wrapper {
    background-color: $theme-color;
    padding: 55px 40px;
    border-radius: 7px;
    @include flex;
    justify-content: space-between;

    @include breakpoint (max-xl){
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        text-align: center;
    }

    @include breakpoint (max-sm){
        text-align: center;
    }

    .chat-items {
        @include flex;
        gap: 35px;

        @include breakpoint (max-xl){
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .icon {
            font-size: 52px;
            color: $white;
        }

        .content {
            h3 {
                font-size: 36px;
                color: $white;
                margin-bottom: 10px;

                @include breakpoint (max-sm){
                    font-size: 28px;
                }
            }

            p {
                font-size: 18px;
                color: rgba(255, 255, 255, 0.52);
            }
        }
    }

    &.style-2 {
        background-color: $theme-color-2;
    }
}

.cta-chat-section-2 {
    position: relative;

    &::before {
        @include before;
        background-color: $bg-color-6;
        z-index: -1;
        height: 50%;
    }
}

.cta-banner-2 {
    background-color: $theme-color;
    max-width: 800px;
    margin: 60px auto;
    border-radius: 10px;
    @include flex;
    justify-content: space-between;
    padding: 25px 30px;
    position: relative;
    z-index: 9;

    @include breakpoint (max-md){
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }


    .cta-items {
        @include flex;
        gap: 30px;

        @include breakpoint (max-md){
            flex-wrap: wrap;
            justify-content: center;
        }

        .content {
            p {
                font-weight: 600;
                color: #C5C3C3;

                @include breakpoint (max-xxs){
                    text-align: center;
                }
            }

            h6 {
                font-size: 16px;
                color: $white;
            }
        }
    }

    .theme-btn {
        line-height: 1;
    }
}

.cta-discuss-section {
   position: relative;

   &::before {
        @include before;
        background-color: $bg-color-5;    
        z-index: -1;
        left: 55%;
        width: initial;

        @include breakpoint (max-lg){
            left: 0;
        }
   }
}

.cta-discuss-wrapper {
    padding: 65px 30px;
    @include flex;
    gap: 65px;

    @include breakpoint (max-lg){
        flex-wrap: wrap;
        padding: 50px 30px;
        gap: 30px;
        justify-content: center;
        text-align: center;
    }

    .cta-discuss-image {
        position: relative;

        .icon {
            width: 85px;
            height: 85px;
            line-height: 90px;
            background-color: $theme-color;
            color: $white;
            font-size: 38px;
            text-align: center;
            position: absolute;
            top: -30px;
            left: 20px;

            &::before {
                width: 0;
                height: 0;
                border-top: 30px solid $theme-color;
                border-right: 22px solid transparent;
                content: "";
                left: -21px;
                position: absolute;
                top: 0px;
                transform: rotate(-180.509deg);
            }
        }
    }

    .cta-discuss-content {
        .section-title {
            span {
                i {
                    padding-right: 10px;
                    transform: rotate(-40deg);
                }
            }

            h2 {
                font-weight: 600;

                span {
                    color: $header-color;
                    letter-spacing: initial;
                    text-transform: capitalize;
                }
            }
        }

        .cta-button {
            margin-top: 10px;
        }
    }
}