/* Footer Container */
.footer {
    background: #1a1a1a; /* Dark background */
    color: #cccccc; /* Light text color for contrast */
    padding: 60px 0;
    font-family: Arial, sans-serif;
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; /* Center text within container */
    width: 100%; /* Allow footer to take full width */
}

/* Logo Section */
.footer-logo img {
    width: 150px;
    margin-bottom: 20px;
    filter: brightness(0.9); /* Keeps the logo slightly visible on a dark background */
}

/* Contact Form Section */
.footer-form h2, .footer-contact h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #ffffff; /* White for titles */
}

.footer-form form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center form content */
    width: 400px; /* Allow form to take full width of its container */
}

/* Inputs and textarea */
.footer-form input,
.footer-form textarea {
    width: 100%; /* Make the input and textarea full width */
    max-width: 500px; /* Increased max-width to make form elements bigger */
    padding: 14px;
    margin-bottom: 20px; /* Increased margin for more spacing */
    background: #333333; /* Dark input background */
    border: none;
    border-radius: 5px;
    font-size: 16px;
    color: #ffffff; /* Light text color for inputs */
}

.footer-form input::placeholder,
.footer-form textarea::placeholder {
    color: #999999;
}

.footer-form textarea {
    resize: none;
    height: 120px; /* Make the textarea a bit taller */
}

/* Button Styling */
.footer-form button {
    width: 100%; /* Make the button take full width */
    max-width: 500px; /* Match button width to form elements */
    background-color: #444444; /* Dark button background */
    color: #ffffff;
    padding: 14px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-top: 10px; /* Add space above the button */
}

.footer-form button:hover {
    transform: translateY(-3px);
    background-color: #666666; /* Lightens button on hover */
}

/* Contact Details Section */
.footer-contact p {
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center; /* Center contact info text */
    align-items: center;
}

.footer-contact p i {
    margin-right: 10px;
    font-size: 20px;
    color: #cccccc; /* Icon color matches text */
    transition: color 0.3s ease;
}

.footer-contact p:hover i {
    color: #ffffff; /* Icon turns white on hover */
}

/* Full-width adjustment for smaller screens */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Stack sections vertically */
        text-align: center; /* Center text */
    }
	.footer-form form{
		width: 300px;
	}

    .footer-logo,
    .footer-form,
    .footer-contact {
        margin-bottom: 30px; /* Add more space between sections */
    }

    .footer-form input,
    .footer-form textarea,
    .footer-form button {
        width: 90%; /* Ensure form elements take up most of the screen width */
    }

    .footer-logo img {
        width: 120px; /* Resize logo to fit smaller screens */
    }
}

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");