/* --------------- chat-banner styles --------------- */
.chat-banner.style-3{
    background-color: var(--color-blue2);
    position: relative;
    &::after{
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 60%;
        background-image: url(../img/0011.png);
        background-size: 80%;
        background-repeat: repeat;
        background-position: bottom;
        opacity: 0.08;
        -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(1003%) contrast(103%);
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(1003%) contrast(103%);
    }
    .info{
        h3{
            font-size: 27px;
            color: #fff;
            text-transform: capitalize;
            span{
                font-weight: 400;
                font-style: italic;
                position: relative;
                &::before{
                    position: absolute;
                    content: "";
                    left: 0;
                    top: 100%;
                    width: 240px;
                    height: 35px;
                    background-image: url(../img/header/info_h1_line1.png);
                    background-size: 240px;
                    background-repeat: no-repeat;
                    background-position: left;
                }
            }
        }
    }
    .bttns{
        .btn{
        }
    }
}


/* --------------- chat-banner styles --------------- */
.chat-banner.style-7{
    background-color: #8169f1;
    padding-top: 100px;

    .info{
        text-align: center;
        color: #fff;
        padding-bottom: 100px;
        p{
            font-size: 16px;
            font-weight: 300;
            margin-bottom: 15px;
        }
        h3{
            font-size: 40px;
            font-weight: 500;
        }
    }
}


/* --------------- chat-banner styles --------------- */
.chat-banner.style-9{
    position: relative;
    padding: 180px 0;
    background-image: url(../img/header/head9_back.png);
    background-size: cover;
    background-position: center;
    .container{
        position: relative;
        z-index: 10;
    }
    .img_back{
        position: absolute;
        left: 0;
        top: -50px;
        bottom: -50px;
        width: 100%;
        height: calc(100% + 100px);
        max-height: unset;
        pointer-events: none;
        object-fit: contain;
    }
    .section-head{
        h6{
            &::after,
            &::before{
                background-color: #fff;
            }
        }
    }
}