#contact {
    background-color: #000000; /* Light background color */
    padding: 40px 20px; /* Padding for spacing */
    text-align: center; /* Centered text */
}

.contact-container {
    max-width: 1200px; /* Maximum width for the container */
    margin: auto; /* Centering the container */
    padding: 20px; /* Inner padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    background-color: white; /* White background for the content */

}
#contact h2 {
    font-size: 2.5rem; /* Font size for the heading */
    margin-bottom: 20px; /* Margin below the heading */
    color: #0ef; /* Primary color for the heading */
}

.contact-boxes {
    display: flex; /* Flexbox for side-by-side layout */
    justify-content: center; /* Center the boxes */
    margin-top: 20px; /* Margin above the boxes */
    width: 100%; /* Set width of the flex container */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    gap: 5px;
}
@media (max-width: 768px) {
    .contact-boxes {
        flex-direction: column; /* Change to column layout */
        align-items: center; /* Center the items */
        width: 100%;
    }

    .form-container,
    .contact-details {
        width: 100%; /* Full width for smaller screens */
        margin: 10px 0; /* Margin above and below the boxes */
    }
}


.form-container,
.contact-details {
    flex: 1; /* Equal width for both boxes */
    margin: 0 10px; /* Margin between the boxes */
    padding: 20px; /* Inner padding */
    border-radius: 10px; /* Rounded corners */
    background-color: white; /* White background for the boxes */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    min-width: 250px; /* Minimum width to prevent collapsing */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-notice {
    background-color: #ffcccb; /* Light red background to indicate a warning */
    color: #a94442; /* Dark red text color for contrast */
    padding: 10px; /* Padding for spacing */
    margin-bottom: 15px; /* Space below the notice */
    border-radius: 5px; /* Rounded corners for a softer look */
    text-align: center; /* Center the text */
    font-weight: bold; /* Make the text bold for emphasis */
}

h2, h3 {
    color: #0ef; /* Primary color for headings */
}

.form-group {
    margin-bottom: 15px; /* Margin below each form group */
    text-align: left; /* Align label and input to the left */
}

label {
    display: block; /* Label takes full width */
    margin-bottom: 5px; /* Margin below the label */
    font-weight: bold; /* Bold label text */
}

input, 
textarea {
    width: 100%; /* Full width inputs */
    padding: 10px; /* Inner padding for inputs */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Font size for inputs */
}

button {
    background-color: #0ef; /* Primary color for the button */
    color: white; /* White text color */
    padding: 10px 15px; /* Padding for button */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 1rem; /* Font size for button */
    transition: background-color 0.3s; /* Smooth background transition */
}

button:hover {
    background-color: rgb(0, 205, 219); /* Darker shade on hover */
}
.contact-details a #mail{
    text-align: center; /* Center the text in the contact details section */
}

.contact-details a #mail {
    color: #304ffe; /* Primary color for links */
    text-decoration: none; /* No underline for links */
    display: inline-block; /* Use inline-block to allow padding and margin */
    margin: 5px 10px; /* Margin for spacing between links */
}

.contact-details a:hover {
    text-decoration: underline; /* Underline on hover for better visibility */
}