#chat-messages {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: 68vh;
        padding: 5%;
    }

    /* General Message Styling */
    .message {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between messages */
    max-width: 80%;
       }
   /* Bot Message (Left Side) */
    .chat-message.bot {
    width:auto;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 1%;
    max-width: 80%;
    margin-bottom: 2%
    }

   /* User Message (Right Side) */
   .chat-message.user {
    width: auto;
    padding: 8px 16px 8px 16px;
    border-radius: 8px;
    background: rgba(63, 77, 203, 0.10);
    color: rgba(36, 36, 36, 1);
    justify-content: flex-end;
    align-self: flex-end;
    text-align: right;
    gap: 1%;
    max-width: 70%;
    margin-bottom: 2%

    }


    .text {
    padding: 8px 16px;
    border-radius: 8px;
    word-wrap: break-word;
    max-width: 70%;
    }

    .text.bot-text {
    background: #f1f1f1;
    color: black;
   }

    .text.user-text {
    color: rgba(36, 36, 36, 1);
    }

    .numbered-item {
        display: inline; /* Keep the number inline */
        font-weight: bold;
        margin-right: 5px; /* Space after number */
    }

    #chat-input {
        display: flex;
        position: fixed;
        bottom: 10vh;
        left: 11%;
        width: 80%;
        height: 65px;
        border-radius: 30px;
        border: 1px solid rgba(140, 140, 140, 0.10);
        background:#fff;
        backdrop-filter: blur(0px);
        margin: 10px 20px; /* Reduced margin for compactness */
        padding: 10px 10px 10px 15px;
        align-items: center;
        justify-content: center;
    }

    #chat-input input {
       border: none;
        outline: none;
        padding: 8px; /* Reduced padding */
        flex-grow: 1;
        background:#fff;
        
        
    }

    #chat-input button {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        background: #3f4dcb !important; /* Change to desired color */
        padding: 10px !important; /* Adjust padding for better spacing */
        outline: none !important; /* Removes outline when clicked */
        border-radius: 50% !important; /* Makes it circular */
        width: 45px !important; /* Set a fixed width */
        height: 45px !important; /* Set a fixed height */
    }


    .chat-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 27px;
        background-size: cover;
    }

    

    .chat-icon.user-icon {
        width:100%;
    }

    .message-time {
        font-size: 12px;
        color: #888;
        margin-left: 10px;
        align-self: flex-end; /* Align time to the right for bot */
    }

    .message.user .message-time {
        order: 1; /* Time comes before message for user */
        margin-left: 0;
        margin-right: 8px; /* Adjusted margin for compact layout */
        align-self: flex-start; /* Align time to the left for user */
    }

    .message.bot .message-time {
        order: 2; /* Time comes after message for bot */
        margin-left: 8px; /* Adjusted margin for compact layout */
        align-self: flex-end; /* Align time to the right for bot */
    }


    .ai-chat-box{
        padding: 0% 5% 0% 5%; 
    }
       
    .chat-divider {
        width: 100%; /* Make it responsive */
        max-width: 1166px; /* Limit max width */
        height: 1px;
        background: #D1D1D1;
        margin: 10px auto; /* Center it with spacing */
    }

 
             /*---------------the above css is used for ai-chatbot --------------------------*/


      /*----------- the below css is used for side bar in ai chatot page---------------*/


            /* Sidebar Styling */
            #custom-sidebar {
                position: fixed;
                top: 0;
                left: -390px; /* Initially hidden on the left */
                display: flex;
                flex-direction: column;
                width: 370px;
                height: 100vh;
                padding: 16px 20px;
                background: #000039;
                transition: left 0.3s ease-in-out;
                z-index: 1101;
                overflow-y: auto;
            }
            
    
            /* Sidebar Button */
            .sidebar-toggle-btn-bar {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                gap: 20px;
                position: fixed;
                top: 10%;
                left: 0px; /* Placed on the left side */
                transform: translateY(-10%);
                padding: 50px 0 20px 0;
                border-right: 1px solid rgba(132, 132, 132, 0.1);
                width: 60px;
                height: auto;
                min-height: 100vh;
                z-index: 1100;
            }

            .sidebar-toggle-buttons {
                position: relative; /* Needed for tooltip positioning */
                border-radius: 12px;
                box-shadow: 40px 40px 100px -5px rgba(24, 48, 63, 0.20);
                background: #FFF;
                width: 35px;
                height: 35px;
                border: none;
                cursor: pointer;
                z-index: 1100;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            /* Keep your hover color reset */
            .sidebar-toggle-buttons:hover {
                color: #fff;
                background-color: #000039;
            }
            
            /* Keep your existing image styling */
            .sidebar-toggle-buttons img {
                width: 100px;
                height: 50px;
            }
            
            /* Tooltip using data-tooltip attribute */
            .sidebar-toggle-buttons::after {
                content: attr(data-tooltip);
                position: absolute;
                left: 100%; /* show tooltip to the right of button */
                top: 50%;
                transform: translateY(-50%);
                margin-left: 8px;
                background-color: #333;
                color: #fff;
                padding: 5px 8px;
                border-radius: 4px;
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
                font-size: 12px;
            }
            
            /* Show tooltip on hover */
            .sidebar-toggle-buttons:hover::after {
                opacity: 1;
            }

            





            
    
            /* Close Button */
            #close-sidebar {
                position: absolute;
                   right: 3%;
                    background: unset;
                     color: white;
                   border: none;
                    padding: 5px 10px;
                      /* margin-top: 5%; */
                       cursor: pointer;
                   top: 3%;
            }
    
            /* Overlay to detect outside clicks */
            #sidebar-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
            }
    
            /* Sidebar Content */
            #custom-sidebar-content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-grow: 1;
                width: 100%;
                padding-top: 20%;
                margin-top: 15%;
            }
    
            /* Menu Items */
            .menu-items {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: auto;
            }
    
            .sidebar-option {
                display: flex;
                align-items: center;
                padding: 16px 20px;
                gap: 10px;
                cursor: pointer;
                color: white;
                transition: background 0.3s;
            }
    
            .sidebar-option:hover {
                background: #FFF;
                color: #000;
            }
    
            /* Separator Line */
            .separator {
                width: 320px;
                height: 1px;
                background: #FFF;
                margin: 20px 0;
            }
    
            /* Pro Section */
            .pro-section {
                text-align: center;
                color: #ffffff;
            }
    
            .pro-btn {
                width: 320px;
                height: 46px;
                display: flex;
                padding: 10px 51px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                align-self: stretch;
                border-radius: 8px;
                background: #3F4DCB;
                color: white;
                border: none;
                cursor: pointer;
                margin-top: 10px;
                box-shadow: 
                    14px 22px 7px rgba(0, 0, 0, 0.00), 
                    9px 14px 7px rgba(0, 0, 0, 0.01), 
                    5px 8px 6px rgba(0, 0, 0, 0.05), 
                    2px 4px 4px rgba(0, 0, 0, 0.09), 
                    1px 1px 2px rgba(0, 0, 0, 0.10);
            }
    
            .pro-btn:hover {
                background: #2D3BB5;
            }
            #sidebar-logo img {
                width: 50%;
                    height: 4vh;
                  position: absolute;
                    top: 3%;
                       left: 3%;
                   object-fit: contain;
                        max-width: 185px;
                         object-position: left
            }
    
    
    
             /*----------- the above css is used for side bar in ai chatot page---------------*/


 /*----------------------------------------------Laptop screen starts-------------------------------------------*/
             @media screen and (min-width: 1025px) and (max-width: 1440px){


                #chat-messages {
                    height: 68vh;
                    }
                
                    /* General Message Styling */
                    .message {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px; /* Space between messages */
                    max-width: 80%;
                       }
                   /* Bot Message (Left Side) */
                    .chat-message.bot {
                    width:auto;
                    justify-content: flex-start;
                    align-self: flex-start;
                    gap: 1%;
                    max-width: 80%;
                    margin-bottom: 2%
                    }
                
                   /* User Message (Right Side) */
                   .chat-message.user {
                    width: auto;
                    padding: 8px 16px 8px 16px;
                    border-radius: 8px;
                    background: rgba(63, 77, 203, 0.10);
                    color: rgba(36, 36, 36, 1);
                    justify-content: flex-end;
                    align-self: flex-end;
                    text-align: right;
                    gap: 1%;
                    max-width: 70%;
                    margin-bottom: 2%
                
                    }
                
                
                    .text {
                    padding: 8px 16px;
                    border-radius: 8px;
                    word-wrap: break-word;
                    max-width: 70%;
                    }
                
                    .text.bot-text {
                    background: #f1f1f1;
                    color: black;
                   }
                
                    .text.user-text {
                    color: rgba(36, 36, 36, 1);
                    }
                
                    .numbered-item {
                        display: inline; /* Keep the number inline */
                        font-weight: bold;
                        margin-right: 5px; /* Space after number */
                    }
                
                    .message-time {
                        font-size: 12px;
                        color: #888;
                        margin-left: 10px;
                        align-self: flex-end; /* Align time to the right for bot */
                    }
                
                    .message.user .message-time {
                        order: 1; /* Time comes before message for user */
                        margin-left: 0;
                        margin-right: 8px; /* Adjusted margin for compact layout */
                        align-self: flex-start; /* Align time to the left for user */
                    }
                
                    .message.bot .message-time {
                        order: 2; /* Time comes after message for bot */
                        margin-left: 8px; /* Adjusted margin for compact layout */
                        align-self: flex-end; /* Align time to the right for bot */
                    }

                    .ai-chat-box{
                        padding: 0% 5% 0% 5%; 
                    }
                       
                    .chat-divider {
                        width: 100%; /* Make it responsive */
                        max-width: 1166px; /* Limit max width */
                        height: 1px;
                        background: #D1D1D1;
                        margin: 10px auto; /* Center it with spacing */
                    }
                
                 
                /*---------------the above css is used for ai-chatbot --------------------------*/


                /*----------- the below css is used for side bar in ai chatot page---------------*/


                /* Sidebar Styling */
                #custom-sidebar {
                    position: fixed;
                    top: 0;
                    left: -390px; /* Initially hidden on the left */
                    display: flex;
                    flex-direction: column;
                    width: 370px;
                    height: 100vh;
                    padding: 16px 20px;
                    background: #000039;
                    transition: left 0.3s ease-in-out;
                    z-index: 1101;
                }

        
                /* Close Button */
                #close-sidebar {
                    position: absolute;
                    right: 3%;
                    background: unset;
                    color: white;
                    border: none;
                    padding: 5px 10px;
                    cursor: pointer;
                    top: 3%;
                }
        
                /* Overlay to detect outside clicks */
                #sidebar-overlay {
                    display: none;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.5);
                    z-index: 999;
                }
        
                /* Sidebar Content */
                #custom-sidebar-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex-grow: 1;
                    width: 100%;
                    padding-top: 20%;
                    margin-top: 15%;
                }
        
                /* Menu Items */
                .menu-items {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    margin-bottom: auto;
                }
        
                .sidebar-option {
                    display: flex;
                    align-items: center;
                    padding: 16px 20px;
                    gap: 10px;
                    cursor: pointer;
                    color: white;
                    transition: background 0.3s;
                }
        
                .sidebar-option:hover {
                    background: #FFF;
                    color: #000;
                }
        
                /* Separator Line */
                .separator {
                    width: 320px;
                    height: 1px;
                    background: #FFF;
                    margin: 20px 0;
                }
        
                /* Pro Section */
                .pro-section {
                    text-align: center;
                    color: #ffffff;
                }
        
                .pro-btn {
                    width: 320px;
                    height: 46px;
                    display: flex;
                    padding: 10px 51px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    align-self: stretch;
                    border-radius: 8px;
                    background: #3F4DCB;
                    color: white;
                    border: none;
                    cursor: pointer;
                    margin-top: 10px;
                    box-shadow: 
                        14px 22px 7px rgba(0, 0, 0, 0.00), 
                        9px 14px 7px rgba(0, 0, 0, 0.01), 
                        5px 8px 6px rgba(0, 0, 0, 0.05), 
                        2px 4px 4px rgba(0, 0, 0, 0.09), 
                        1px 1px 2px rgba(0, 0, 0, 0.10);
                }
        
                .pro-btn:hover {
                    background: #2D3BB5;
                }
                #sidebar-logo img {
                    width: 50%;
                        height: 4vh;
                        position: absolute;
                        top: 3%;
                            left: 3%;
                        object-fit: contain;
                            max-width: 185px;
                                object-position: left
                }
        
        
        
                    /*----------- the above css is used for side bar in ai chatot page---------------*/



             }

       /*----------------------------------------------Laptop screen Ends-------------------------------------------*/
       
       

    /*----------------------------------------------Mobile screen starts-------------------------------------------*/

    @media screen and (min-width: 320px) and (max-width: 480px){


        #chat-input {
            display: flex;
            position: fixed;
            bottom: 5vh;
            left: 7vw;
            margin: unset;
            width: 86vw;
        }

        #chat-messages {
            height: 70vh;
            padding: 5%;
            }
        
            /* General Message Styling */
            .message {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* Space between messages */
            max-width: 80%;
               }
          /* Bot Message (Left Side) */
           .chat-message.bot {
        width:90%;
        justify-content: flex-start;
        align-self: flex-start;
        gap: 1%;
        max-width: 90%;
        margin-bottom: 2%
        }
    
       /* User Message (Right Side) */
       .chat-message.user {
        width: auto;
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        background: rgba(63, 77, 203, 0.10);
        color: rgba(36, 36, 36, 1);
        justify-content: flex-end;
        align-self: flex-end;
        text-align: right;
        gap: 1%;
        max-width: 70%;
        margin-bottom: 2%
    
        }
        
        
            .text {
            padding: 8px 16px;
            border-radius: 8px;
            word-wrap: break-word;
            max-width: 70%;
            }
        
            .text.bot-text {
            background: #f1f1f1;
            color: black;
           }
        
            .text.user-text {
            color: rgba(36, 36, 36, 1);
            }
        
            .numbered-item {
                display: inline; /* Keep the number inline */
                font-weight: bold;
                margin-right: 5px; /* Space after number */
            }
        
            
        
            .message-time {
                font-size: 12px;
                color: #888;
                margin-left: 10px;
                align-self: flex-end; /* Align time to the right for bot */
            }
        
            .message.user .message-time {
                order: 1; /* Time comes before message for user */
                margin-left: 0;
                margin-right: 8px; /* Adjusted margin for compact layout */
                align-self: flex-start; /* Align time to the left for user */
            }
        
            .message.bot .message-time {
                order: 2; /* Time comes after message for bot */
                margin-left: 8px; /* Adjusted margin for compact layout */
                align-self: flex-end; /* Align time to the right for bot */
            }
        
        
            .ai-chat-box{
                padding: 1% 1% 1% 1%; 
            }

            
             /*---------------the above css is used for ai-chatbot --------------------------*/


      /*----------- the below css is used for side bar in ai chatot page---------------*/


            /* Sidebar Styling */
        #custom-sidebar {
            position: fixed;
            top: 0;
            left: -500px; /* Initially hidden on the left */
            display: flex;
            flex-direction: column;
            width: 70%;
            height: auto;
            min-height: 80vh;
            padding: 16px 20px;
            background: #000039;
            transition: left 0.3s ease-in-out;
            z-index: 1101;
        }

        .sidebar-toggle-btn-bar {
            position: fixed;
            top: 20px;
            left: 0; 
            padding: unset;
            transform: translateY(-10%);
            border-right: unset;
            width: 50px;
            height: auto;
            min-height: unset;
        }
        

        /* Close Button */
        #close-sidebar {
            position: absolute;
            right: 3%;
            background: unset;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            top: 3%;
        }

        /* Overlay to detect outside clicks */
        #sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        /* Sidebar Content */
        #custom-sidebar-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
            width: 100%;
            padding-top: 20%;
            margin-top: 15%;
        }

        /* Menu Items */
        .menu-items {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: auto;
        }

        .sidebar-option {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            gap: 10px;
            cursor: pointer;
            color: white;
            transition: background 0.3s;
        }

        .sidebar-option:hover {
            background: #FFF;
            color: #000;
        }

        /* Separator Line */
        .separator {
            width: 320px;
            height: 1px;
            background: #FFF;
            margin: 20px 0;
        }

        /* Pro Section */
        .pro-section {
            text-align: center;
            color: #ffffff;
        }

        .pro-btn {
            width: 320px;
            height: 46px;
            display: flex;
            padding: 10px 51px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            align-self: stretch;
            border-radius: 8px;
            background: #3F4DCB;
            color: white;
            border: none;
            cursor: pointer;
            margin-top: 10px;
            box-shadow: 
                14px 22px 7px rgba(0, 0, 0, 0.00), 
                9px 14px 7px rgba(0, 0, 0, 0.01), 
                5px 8px 6px rgba(0, 0, 0, 0.05), 
                2px 4px 4px rgba(0, 0, 0, 0.09), 
                1px 1px 2px rgba(0, 0, 0, 0.10);
        }

        .pro-btn:hover {
            background: #2D3BB5;
        }
        #sidebar-logo img {
            width: 50%;
            height: 4vh;
          position: absolute;
            top: 3%;
               left: 3%;
           object-fit: contain;
                max-width: 185px;
                 object-position: left
        }



/*----------- the above css is used for side bar in ai chatot page---------------*/

    }

/*----------------------------------------------Mobile screen Ends-------------------------------------------*/






     

/*----------------------------------------------Tablet screen Starts-------------------------------------------*/

    @media screen and (min-width: 481px) and (max-width: 1024px){


        #chat-input {
            display: flex;
            position: fixed;
            bottom: 7vh;
            left: 7vw;
            margin: unset;
            width: 86vw;
        }

        #chat-messages {
            height: 68vh;
            }
        
            /* General Message Styling */
            .message {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* Space between messages */
            max-width: 80%;
               }
           /* Bot Message (Left Side) */
        .chat-message.bot {
        width:auto;
        justify-content: flex-start;
        align-self: flex-start;
        gap: 1%;
        max-width: 80%;
        margin-bottom: 2%
                   }
    
       /* User Message (Right Side) */
       .chat-message.user {
        width: auto;
        padding: 8px 16px 8px 16px;
        border-radius: 8px;
        background: rgba(63, 77, 203, 0.10);
        color: rgba(36, 36, 36, 1);
        justify-content: flex-end;
        align-self: flex-end;
        text-align: right;
        gap: 1%;
        max-width: 70%;
        margin-bottom: 2%
    
        }
        
        
            .text {
            padding: 8px 16px;
            border-radius: 8px;
            word-wrap: break-word;
            max-width: 70%;
            }
        
            .text.bot-text {
            background: #f1f1f1;
            color: black;
           }
        
            .text.user-text {
            color: rgba(36, 36, 36, 1);
            }
        
            .numbered-item {
                display: inline; /* Keep the number inline */
                font-weight: bold;
                margin-right: 5px; /* Space after number */
            }
        
        
            .message-time {
                font-size: 12px;
                color: #888;
                margin-left: 10px;
                align-self: flex-end; /* Align time to the right for bot */
            }
        
            .message.user .message-time {
                order: 1; /* Time comes before message for user */
                margin-left: 0;
                margin-right: 8px; /* Adjusted margin for compact layout */
                align-self: flex-start; /* Align time to the left for user */
            }
        
            .message.bot .message-time {
                order: 2; /* Time comes after message for bot */
                margin-left: 8px; /* Adjusted margin for compact layout */
                align-self: flex-end; /* Align time to the right for bot */
            }
        
        
            .ai-chat-box{
                padding: 1% 1% 1% 1%; 
            }
               
            .chat-divider {
                width: 100%; /* Make it responsive */
                max-width: 1166px; /* Limit max width */
                height: 1px;
                background: #D1D1D1;
                margin: 10px auto; /* Center it with spacing */
            }

         
             /*---------------the above css is used for ai-chatbot --------------------------*/


      /*----------- the below css is used for side bar in ai chatot page---------------*/


            /* Sidebar Styling */
            #custom-sidebar {
                position: fixed;
                top: 0;
                left: -390px; /* Initially hidden on the left */
                display: flex;
                flex-direction: column;
                width: 370px;
                height: 100vh;
                padding: 16px 20px;
                background: #000039;
                transition: left 0.3s ease-in-out;
                z-index: 1101;
            }

            .sidebar-toggle-btn-bar {
                position: fixed;
                top: 20px;
                left: 0; 
                transform: translateY(-10%);
                border-right: unset;
                width: 50px;
                height: auto;
                min-height: unset;
            }
    
            /* Close Button */
            #close-sidebar {
                position: absolute;
                right: 3%;
                 background: unset;
                  color: white;
                border: none;
                 padding: 5px 10px;
                   /* margin-top: 5%; */
                    cursor: pointer;
                top: 3%;
            }
    
            /* Overlay to detect outside clicks */
            #sidebar-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
            }
    
            /* Sidebar Content */
            #custom-sidebar-content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-grow: 1;
                width: 100%;
                padding-top: 20%;
                margin-top: 15%;
            }
    
            /* Menu Items */
            .menu-items {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: auto;
            }
    
            .sidebar-option {
                display: flex;
                align-items: center;
                padding: 16px 20px;
                gap: 10px;
                cursor: pointer;
                color: white;
                transition: background 0.3s;
            }
    
            .sidebar-option:hover {
                background: #FFF;
                color: #000;
            }
    
            /* Separator Line */
            .separator {
                width: 320px;
                height: 1px;
                background: #FFF;
                margin: 20px 0;
            }
    
            /* Pro Section */
            .pro-section {
                text-align: center;
                color: #ffffff;
            }
    
            .pro-btn {
                width: 320px;
                height: 46px;
                display: flex;
                padding: 10px 51px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                align-self: stretch;
                border-radius: 8px;
                background: #3F4DCB;
                color: white;
                border: none;
                cursor: pointer;
                margin-top: 10px;
                box-shadow: 
                    14px 22px 7px rgba(0, 0, 0, 0.00), 
                    9px 14px 7px rgba(0, 0, 0, 0.01), 
                    5px 8px 6px rgba(0, 0, 0, 0.05), 
                    2px 4px 4px rgba(0, 0, 0, 0.09), 
                    1px 1px 2px rgba(0, 0, 0, 0.10);
            }
    
            .pro-btn:hover {
                background: #2D3BB5;
            }
            #sidebar-logo img {
                width: 50%;
                height: 4vh;
              position: absolute;
                top: 3%;
                   left: 3%;
               object-fit: contain;
                    max-width: 185px;
                     object-position: left
            }
    
    
    
    /*----------- the above css is used for side bar in ai chatot page---------------*/

    }
        
    
/*----------------------------------------------Tablet screen Ends-------------------------------------------*/