/* contact.css */

/* Hero Section */
.hero-subpage {
    background: white; /* Background color moved from .container */
    padding: 30px 0; /* Add some vertical padding */
    text-align: center;
    color: #003399; /* Changed to dark blue for consistency */
}

.hero-subpage .container {
    padding: 0; /* Remove padding here as it's on the section */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stack the h2's */
    gap: 15px; /* Space between the two h2 elements */
}

.hero-subpage .container h2 {
    font-family: Georgia, serif;
    font-size: 1.5em; /* Adjusted for better readability */
    color: #003399; /* Dark blue from header for consistency */
    font-weight: normal;
    font-style: italic;
    margin: 0; /* Remove default h2 margin */
    line-height: 1.4; /* Improve line spacing */
}

/* --- Contact Info Section --- */
.contact-info-section {
    padding: 40px 0; /* Add vertical padding to the section */
    background-color: #f8f8f8; /* Light background for this section */
}

.contact-info-section .contact-grid { /* New container for contact details & form */
    display: flex; /* Use Flexbox for side-by-side layout */
    justify-content: center;
    gap: 40px; /* Space between contact details and form */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: flex-start; /* Align items to the top */
}

.contact-details,
.contact-form-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    padding: 30px; /* Consistent padding inside the cards */
    flex: 1; /* Allow them to grow */
    min-width: 300px; /* Minimum width before wrapping */
    max-width: 500px; /* Max width to control size */
}

.contact-details h2,
.contact-form-container h2 {
    font-family: Georgia, serif;
    color: #003399;
    font-size: 1.8em;
    margin-bottom: 25px; /* Space below heading */
    text-align: center; /* Center these headings */
}

.contact-item {
    display: flex; /* Make contact items a flex container */
    align-items: center; /* Vertically align icon and text */
    gap: 15px; /* Space between icon and text */
    margin-bottom: 20px; /* Spacing between contact items */
}

.contact-item img {
    height: 32px; /* Set icon size */
    width: auto;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.contact-item .contact-link,
.contact-item address {
    font-style: normal; /* Override default address italic */
    text-decoration: none;
    color: #333;
    line-height: 1.5;
}

.contact-item .contact-title { /* New class for "Our Office", "Business Hours" headings */
    font-weight: normal;
    color: #003399;
    font-size: 1.1em;
    display: block; /* Make it block to stack address below it */
    margin-bottom: 5px; /* Space below title */
}

/* Contact Form Specific Styles - Corrected/Improved */
.contact-form-container form { /* Target the form directly */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between form elements (labels + inputs) */
}

.contact-form-container label {
    display: block; /* Ensure label is on its own line */
    font-weight: bold;
    color: #555;
    margin-bottom: 5px; /* Small space between label and input */
}

.contact-form-container input[type="text"],
.contact-form-container input[type="email"],
.contact-form-container input[type="tel"],
.contact-form-container textarea {
    width: 100%; /* Take full width of parent */
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Include padding/border in width */
    margin-top: 0; /* Remove default browser margin */
    margin-bottom: 0; /* Remove default browser margin */
}

.contact-form-container textarea {
    resize: vertical; /* Allow vertical resizing */
}

.contact-form-container .g-recaptcha { /* Target the reCAPTCHA button specifically */
    width: auto; /* Button can be auto width */
    padding: 12px 25px;
    font-size: 1.1em;
    margin-top: 10px; /* Space above button */
    display: block; /* Make button full width if desired, or inline-block */
    margin-left: auto;
    margin-right: auto; /* Center the button */
    background-color: #28a745; /* Green button */
    color: #fff; /* White text for green button */
    border: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.contact-form-container .g-recaptcha:hover {
    background-color: #218838;
}

/* Map Section */
/* Assuming .map-section will contain an iframe or image */
.map-section {
    padding: 40px 0;
    background-color: #eef2f5; /* Different background for map section */
    text-align: center;
}

/* Basic styling for the section and container */
.map-section {
    padding: 60px 0; /* Adds some space above and below the section */
    background-color: #f8f8f8; /* A light grey background for the section */
    text-align: center; /* Centers the content within the section */
}

.map-section .container {
    width: 90%; /* Makes the container responsive */
    max-width: 1200px; /* Sets a maximum width for large screens */
    margin: 0 auto; /* Centers the container horizontally */
}

/* Styling for the heading */
.map-section h2 {
    font-size: 2.5em; /* Larger font size for the heading */
    color: #333; /* Darker text color */
    margin-bottom: 10px; /* Adds space below the heading */
}

/* Styling for the iframe wrapper to make it responsive */
.responsive-map {
    position: relative; /* Needed for the padding-bottom trick */
    padding-bottom: 56.25%; /* 16:9 aspect ratio (450/800 = 0.5625) */
    height: 0; /* Initially set to 0 */
    overflow: hidden; /* Hides any content that overflows */
    border-radius: 8px; /* Adds rounded corners to the map */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
}

/* Styling for the iframe itself */
.responsive-map iframe {
    position: absolute; /* Positions the iframe relative to its parent */
    top: 0;
    left: 0;
    width: 100%; /* Makes the iframe take the full width of its parent */
    height: 100%; /* Makes the iframe take the full height of its parent */
    border: 0; /* Removes the default iframe border */
}

/* A simple media query for smaller screens */
@media (max-width: 768px) {
    .map-section h2 {
        font-size: 2em; /* Adjust font size for smaller screens */
    }
}