/* Contact Section Mobile Styles (max-width: 768px) */
.contact-section {
    padding: 50px 0;
    text-align: center; /* Ensure the entire section content is centered */
}

.contact-section .section-title {
    font-size: 2rem;
    margin-bottom: 8px;
}

.contact-section .section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.contact-content-wrapper {
    flex-direction: column; /* Stack columns vertically on mobile */
    gap: 30px;
    padding: 20px; /* Add padding to the wrapper itself */
    max-width: 90%; /* NEW: Constrain max width for better appearance */
    margin: 0 auto; /* NEW: Center the content wrapper */
    box-sizing: border-box; /* NEW: Include padding in width calculation */
}

.contact-form-column {
    padding-right: 0; /* Remove padding */
    width: 100%;
    box-sizing: border-box; /* NEW: Include padding in width calculation */
}

/* NEW: General Form Styling for Mobile */
.contact-form-column .form-group {
    margin-bottom: 15px;
    text-align: left; /* Keep labels/inputs left-aligned for readability */
    width: 100%;
}

.contact-form-column label {
    font-size: 0.9rem; /* Slightly smaller label font */
    margin-bottom: 5px; /* Tighter spacing for labels */
}

.contact-form-column input[type="text"],
.contact-form-column input[type="tel"],
.contact-form-column input[type="email"],
.contact-form-column input[type="subject"],
.contact-form-column select,
.contact-form-column textarea {
    width: 100%; /* Ensure inputs take full width */
    padding: 10px 12px;
    font-size: 0.95rem; /* Slightly smaller input font */
    box-sizing: border-box; /* Important for width calculation */
}

.btn-submit-contact {
    width: 100%; /* Full width button on mobile */
    padding: 12px 25px; /* Adjusted padding for mobile */
    font-size: 1rem; /* Adjusted font size */
    margin-top: 15px; /* Space above button */
    box-sizing: border-box; /* Important for width calculation */
}

.contact-info-map-column {
    padding-left: 0; /* Remove padding */
    width: 100%;
    box-sizing: border-box; /* NEW: Include padding in width calculation */
}

.company-info-card {
    margin-bottom: 20px;
    padding: 20px;
    text-align: left; /* Ensure text inside card is left-aligned */
}

.company-info-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.company-info-card p {
    font-size: 0.95rem;
    flex-direction: row; /* Keep icon and text side-by-side */
    justify-content: flex-start; /* Align to the start */
}

.company-info-card .fas {
    margin-right: 10px;
    font-size: 1rem;
    min-width: 15px;
}

.google-map-placeholder {
    height: 250px; /* Smaller map height on mobile */
    width: 100%; /* Ensure map takes full width */
}

/* Ensure message area is responsive */
.contact-form-column .message-area {
    margin-top: 10px;
    font-size: 0.9rem;
}