/* Contact Page Styling */
.contact-page {
    max-width: 1200px; /* Limit maximum width for desktop view */
    margin: 0 auto; 
    padding: 20px; 
}

/* Contact Information Styling */
.contact-info h2, .contact-info p {
    text-align: left;
    margin: 10px 0;
}

/* Hours Styling */
.hours ul {
    list-style-type: none; 
    padding: 0;
    margin: 0;
}

.hours li {
    display: flex; 
    justify-content: flex-start; 
    font-size: 16px; 
    padding: 5px 0; 
    margin-left: 20px; 
}

.hours strong {
    width: 150px; 
    text-align: left;
    flex-shrink: 0; 
}

.hours span {
    flex-grow: 0; 
    text-align: left; 
    margin-left: 15px; 
}

/* Map Styling */
iframe {
    width: 100%;   
    height: 50%; 
    border: 0;
    margin: 20px 0; 
    border-radius: 15px; /* Rounding the edges */
    overflow: hidden; 
}

/* Desktop View Adjustments */
@media (min-width: 1024px) {
    .contact-page {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns */
        column-gap: 40px; /* Space between map and contact info */
        padding: 40px; /* Increased padding for desktop */
    }

    /* Map takes up the left column */
    iframe {
        width: 100%;
        height: 450px; 
    }

    /* Contact Info on the right */
    .contact-info {
        padding: 20px; 
    }

    .hours ul {
        margin-top: 20px; 
    }
}