/* body {
    font-family: Arial, sans-serif;
    margin: 20px;
} */
.response, .choices {
    margin: 20px 0;
    padding: 10px;
    /* background-color: #f0f0f0; */
    /* border: 1px solid #ddd; */
}
.card {
    background-color: #ffffff; /* Light background for the card */
    border: 1px solid #ddd; /* Light border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin: 20px 0; /* Margin for spacing */
    padding: 20px; /* Padding inside the card */
    text-align: center; /* Centering the text */
}

.card h3 {
    color: #333; /* Darker text for the title */
    font-size: 24px; /* Larger font size for the title */
    margin-bottom: 15px; /* Spacing below the title */
}

.card p {
    color: #666; /* Medium darkness for the text */
    font-size: 16px; /* Standard font size for the text */
    margin-bottom: 20px; /* Spacing below the paragraph */
}

.card img {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Rounded corners for the image */
    margin-bottom: 20px; /* Spacing below the image */
}

.card button {
    background-color: #007bff; /* Example button color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners for the button */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding inside the button */
    text-transform: uppercase; /* UPPERCASE text */
    font-weight: bold; /* Bold font */
    margin: 5px; /* Margin around the button */
    cursor: pointer; /* Pointer cursor on hover */
}

.card button:hover {
    background-color: #0056b3; /* Darker button color on hover */
}

.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Optional: Enables snap scrolling for each carousel item */
    -webkit-overflow-scrolling: touch; /* Allows smooth scrolling on iOS devices */
    gap: 20px; /* Space between carousel items */
    padding: 20px 0; /* Padding around the carousel */
}

.carousel-item2 {
    scroll-snap-align: start; /* Optional: Ensures the carousel item snaps into place on scroll */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-right: 16px; /* Space between items, adjust as needed */
    width: 300px; /* Adjust based on your design */
    flex-shrink: 0; /* Prevents the item from shrinking */
    text-align: center;
    padding: 20px;
}

.carousel-item2 img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Enhancements for buttons inside carousel */
.carousel-item2 button {
    display: block; /* Ensure buttons are block-level for better control */
    width: 100%; /* Optional: Makes the button extend full width of the card */
    box-sizing: border-box; /* Ensures padding doesn't affect overall width */
}


#loadingIndicator {
    display: none;
}

#userInput {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    text-align: center; /* Center text within input field */
}

#voiceflowInput {
    width: 60%;
    padding: 10px;
    border-radius: 20px; /* Rounded corners */
    border: 1px solid #ccc; /* Add border for better visibility */
    font-size: 16px; /* Set font size */
}

#sendInput {
    margin-left: 10px; /* Adjust margin between input and button */
}

/* Style placeholder text */
#voiceflowInput::placeholder {
    font-size: 16px;
    color: #999; /* Adjust placeholder text color */
}

#myCarousel .carousel-item2 {
    display: block !important;
}