/* General Body and Layout Styles */
body {
  font-family: Arial, sans-serif;
  background-image:url(Rectangle.png);
  background-size: cover;
  margin: 0;
  height: 100vh; /* Full viewport height */
  display: flex;
  justify-content: center; /* Centers horizontally */
  flex-direction: column; /* Stack elements vertically */
  box-sizing: border-box;
}

/* Welcome Section */
.welcome {
  text-align: center;
  width: 100%; /* Ensures content doesn't get too wide on large screens */
}

#welcomeText{
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}

/* Heading Styles */
h1 {
  color: #ffffff;
  margin-bottom: 20px;
}

/* Search Bar Styles */
.search {
  width: 100%;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Aligns items vertically */
}

.search-bar { 
  max-width: 1100px;
  width: 100%;
  padding: 15px;
  font-size: 18px;
  background-color: #1d002d;
  color: #ffffff;
  border-radius: 10px;
  
  border: none;
  height: 55px;
}


/* Button Group Styles */
.buttongroup {
  padding-top: 10px;
  padding-bottom: 20px;
  display: flex;                /* Enable flexbox */
  justify-content: center;      /* Centers buttons horizontally */
  align-items: center;          /* Centers buttons vertically */
  gap: 10px;                    /* Add some space between buttons */
  width: 100%;                  /* Ensures it takes full width */
  margin-top: 10px;

}

.button1 {
  width: 140px;
  height: 35px;
  border-radius: 10px;
  border: 2px solid #ccc;  /* Light border */
  background-color: white;
  box-shadow: none;  /* Remove any shadow */
  outline: none;  /* Remove focus outline */
  transition: background-color 0.3s;  /* Smooth color change on hover */
}
.button2 {
  width: 140px;
  height: 35px;
  border-radius: 10px;
  border: 2px solid #ccc;  /* Light border */
  background-color: white;
  box-shadow: none;  /* Remove any shadow */
  outline: none;  /* Remove focus outline */
  transition: background-color 0.3s;  /* Smooth color change on hover */

}

.button1:hover, .button2:hover {
  background-color: #f0f0f0;  /* Slight hover effect */
}

.chat-message ul {
  padding-left: 20px;
  margin: 5px 0;
  list-style-type: disc;
}

.chat-message p {
  margin-bottom: 5px;
}


.input-wrapper {
            display: flex;
            width: 70%;
            position: relative;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }

        .send-button {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            padding: 9px 12px;
            border: none;
            background-color: #ffffff6e;
            color: rgb(0, 0, 0);
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.2s ease;
        }

        .send-button:hover {
            background-color: #ffffff97;
        }

        .chat-container {
            width: 65%;
            max-width: 1100px;
            margin: 20px auto;
            padding: 10px;
            border-radius: 20px;
            height: 60%;
            overflow-y: auto;
            display: none;
            scrollbar-width: thin;
            scrollbar-color: #740097 rgba(255, 255, 255, 0.344);
            flex-direction: column-reverse;
        }

        .chat-message {
            background-color: #e1ffc7;
            padding: 10px;
            border-radius: 10px;
            margin: 5px;
            align-self: flex-end;
            text-align: right;
        }

        .search {
            position: relative;
            text-align: center;
        }

        .chat-message.bot {
            background-color: #e1ffc7;
            color: black;
            align-self: flex-start;
            text-align: left;
            margin: 0;
        }

        .chat-message.bot p {
            margin-block-start: 0;
            margin-block-end: 0;
            margin: 0;
        }