/* Div 7 - Contact Section Reset and Styling */
.div7 {
    padding: 40px 20px; /* Consistent padding with other sections */
    text-align: center; /* Center-align content */
    background-color: #f9f9f9; /* Light background for contrast */
    margin-top: 20px; /* Space from previous section (e.g., div6) */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

.contact-table {
    width: 100%; /* Full width of container */
    max-width: 1000px; /* Limit width for better readability */
    margin: 0 auto; /* Center the table */
    border-collapse: collapse; /* Remove table cell spacing */
    table-layout: fixed; /* Prevent uneven column stretching */
}

.contact-info, .contact-form {
    vertical-align: top; /* Align content at the top */
    padding: 20px; /* Inner spacing */
}

.contact-info {
    text-align: left; /* Left-align text for readability */
    color: #333; /* Dark text for contrast */
    width: 50%; /* Half the table width */
}

    .contact-info h2 {
        color: #C89B3C; /* Match theme color */
        margin-bottom: 15px; /* Space below heading */
        font-size: 24px; /* Readable heading size */
    }

    .contact-info p {
        margin: 5px 0; /* Consistent spacing between paragraphs */
        font-size: 16px; /* Readable text size */
    }

    .contact-info a {
        color: #C89B3C; /* Match theme for links */
        text-decoration: none; /* Remove default underline */
    }

        .contact-info a:hover {
            text-decoration: underline; /* Add underline on hover */
        }

.contact-form {
    text-align: left; /* Left-align form elements */
    width: 50%; /* Half the table width */
}

    .contact-form h3 {
        color: #C89B3C; /* Match theme color */
        margin-bottom: 15px; /* Space below heading */
        font-size: 20px; /* Slightly smaller than h2 */
    }

    .contact-form form {
        display: flex; /* Use flexbox for form layout */
        flex-direction: column; /* Stack elements vertically */
        gap: 10px; /* Space between form elements */
    }

    .contact-form input,
    .contact-form textarea {
        padding: 10px; /* Inner padding */
        border: 1px solid #ddd; /* Light border */
        border-radius: 4px; /* Rounded corners */
        font-size: 14px; /* Readable input text */
        width: 100%; /* Full width of container */
        box-sizing: border-box; /* Include padding in width */
    }

    .contact-form textarea {
        height: 100px; /* Fixed height for textarea */
        resize: vertical; /* Allow vertical resizing only */
    }

.submit-btn {
    padding: 10px; /* Inner padding */
    background-color: #C89B3C; /* Theme color */
    color: white; /* White text for contrast */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Hand cursor on hover */
    font-size: 16px; /* Readable button text */
    transition: background-color 0.3s; /* Smooth color transition */
}

    .submit-btn:hover {
        background-color: #A87A2F; /* Darker shade on hover */
    }

    .submit-btn:disabled {
        background-color: #ccc; /* Grayed out when disabled */
        cursor: not-allowed; /* No cursor change when disabled */
    }

/* Responsive Design */
@media (max-width: 768px) {
    .contact-table {
        display: block; /* Stack table on mobile */
    }

    .contact-info, .contact-form {
        display: block; /* Stack cells */
        width: 100%; /* Full width */
        padding: 10px; /* Reduced padding */
    }

        .contact-info h2 {
            font-size: 20px; /* Smaller heading on mobile */
        }

        .contact-form h3 {
            font-size: 18px; /* Smaller heading on mobile */
        }

        .contact-form input,
        .contact-form textarea {
            font-size: 14px; /* Maintain readability */
        }
}