/* div for keeping button and label in right botoom side */
        .chatbot-div_btn{
            bottom: 50px;
            right: 25px;
            display: flex;
            width: auto;
            height: auto;
            align-items: center;
            position: fixed;
            justify-content: flex-end;
            gap: 10px;
            z-index: 1000;
            transition: all 0.5s ease;

        }
        .chatbot-div_btn.deactive{
            visibility: hidden;
            opacity: 0;
        }
        .chatbot-div_btn.active{
            visibility: visible;
            opacity: 100%;
        }
        
        /*button in right bottom side for when we start chating*/
        .chatbot-btn {
            background-color: #f7ad0f;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 1px 1px 2px rgb(211, 112, 112);
            border-style: none;
            background-image: url("../pictures/Picture2.png");
            background-position: center;
            background-size: 60%;
            background-repeat: no-repeat;
            transition: all 0.3s ease;
            flex-shrink: 0;

        }

        .chatbot-btn:hover {
            background-color: #dd9c11;
            transform: scale(1.2, 1.2);
        }

        /*label for class div_btn*/
        .chatbot-lbl {
            font-size: clamp(11px , 3vw , 13px);
            background-color: white;
            color: black;
            padding: 5px 10px;
            border-radius: 5px;
            white-space: nowrap;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }