body {
            background-color: var(--background-color);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            transition: all 0.5s ease-in-out;
        }
.search-bar {
            display: flex;
            align-items: center;
            background-color: #121212;
            #border-radius: 25px;
            padding: 10px 20px;
            width: 100%;
        }
        .search-bar textarea {
        width: 100%;
            border: none;
            background-color: #121212;
            color: white;
            outline: none;
            flex: 1;
            font-size: 18px;
            
        }
        .search-bar textarea::placeholder {
            color: white;
           
        }
        .search-bar .icon {
            color: white;
            font-size: 30px;
            float:right;
        }
        .search-bar .microphone {
            color: white;
            font-size: 30px;
            padding-right: 10px;
             float:left;
        }
        .search-bar .speaker {
            color: white;
            font-size: 30px;
            #padding-right: 10px;
             float:left;
        }


        .container {
            display: flex;
            gap: 50px;
        }

        img {
            object-fit: cover;
        }

        button {
            background-color: var(--background-color);
            border: none;
            #border-radius: 20px;
            padding: 10px 20px;
            font-size: 1em;
            color: var(--heart-color);
            cursor: pointer;
            box-shadow: var(--box-shadow);
            transition: all 0.3s ease-in-out;
        }

        button:hover {
            color: var(--heart-hover-color);
        }

        button:active {
            box-shadow: none;
        }
      

        .chatbot-header {

            background-color: #121212;

            padding: 10px;

            border-bottom: 1px solid #666;

        }

        .chatbot-header h1 {

            color: #fff;

            margin: 0;

        }

        .chatbot-messages {

            padding: 20px;

        }

        #messages {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        #messages li {

            padding: 10px;

            border-bottom: 1px solid #666;

            background-color: #282828;

            margin-top: 20px;

            color: white;
            border-radius:10px;

        }

        #messages li:last-child {

            border-bottom: none;

        }

        .chatbot-input {

            padding: 20px;

        }