/* Reset some default styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body with position: relative to act as a reference */
body {
    font-family: Arial, sans-serif;
    background-image: url('./images/kfcbkg.png'); /* Corrected path */
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    position: relative; /* Make body the reference for absolute positioning */
    color: #333;
    overflow: hidden;
}

h1 {
    margin-bottom: 20px;
}

#chatContainer {
    position: fixed;
    bottom: 120px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #333;
    border-radius: 10px;
    padding: 10px;
    width: 300px;
}

#messages {
    height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
    border: 1px solid #ccc;
    padding: 5px;
}

#messageInput {
    width: calc(100% - 60px);
    padding: 10px;
}

#sendButton {
    width: 50px;
    padding: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#sendButton:hover {
    background-color: #0056b3;
}

/* Apply the animation to the #animation element */
#animation {
    position: fixed;
    top: 3%; /* Adjust position */
    left: 97%; /* Initial position from the right */
    width: 80px; /* Width of a single frame */
    height: 80px; /* Height of a single frame */
    background-image: url('./images/bird/birds.png'); /* Corrected path */
    background-repeat: no-repeat; /* Prevent sprite sheet repetition */
    background-size: 512px 512px; /* Set to the full size of your sprite sheet */
    cursor: pointer; /* Change cursor to pointer when hovering */
    z-index: 2000;
}



#contact-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the modal exactly */
    z-index: 9999; /* High z-index to ensure it stays on top */
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    display: flex; /* Use flexbox for centering content */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}

.modal-content {
    background-color: #fff; /* White background for the form */
    padding: 20px; /* Add padding inside the form */
    border-radius: 8px; /* Rounded corners */
    width: 100%; /* Take full width */
    max-width: 400px; /* Limit the width */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
    z-index: 10000; /* Ensure modal content is above the overlay */
}

#contact-form label,
#contact-form input,
#contact-form textarea,
#contact-form button {
    display: block;
    width: 100%; /* Full width inputs */
    margin-bottom: 15px; /* Space between form elements */
}

#contact-form input,
#contact-form textarea {
    padding: 10px; /* Space inside inputs */
    border: 1px solid #ccc; /* Light border */
    border-radius: 4px; /* Slightly rounded inputs */
    box-sizing: border-box; /* Include padding in width/height */
}

#contact-form button {
    background-color: #007BFF; /* Button color */
    color: #fff; /* White text */
    padding: 10px; /* Padding inside button */
    border: none; /* Remove border */
    border-radius: 4px; /* Rounded button */
    cursor: pointer; /* Pointer cursor */
}

#contact-form button:hover {
    background-color: #0056b3; /* Darken button on hover */
}

/* Thank You Message */
#thank-you-message {
    display: none; /* Hide by default */
    color: green;
    font-weight: bold;
}




.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular avatar */
    margin-right: 10px; /* Space between avatar and message text */
}

.avatar:hover {
    transform: scale(1.1); 
}