.locations-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
}

.location-card {
    display: flex;
    flex-direction: row;
    min-height: 500px;
    overflow: hidden;
    background: #eeeeee;
    border-radius: 1em;
    filter: drop-shadow(2px 4px 6px #818181);
}

        /* Left Side: Text Info */
        .info-section {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
        }

        .location-title {
    font-size: 1em;
    margin: 0 0 15px 0;
    font-weight: 700;
        }

.contact-info {
    margin-bottom: 30px;
    font-size: .75em;
}

        .contact-info strong {
            display: inline-block;
        }

        .hours-title {
    font-size: 1em;
            margin: 0 0 15px 0;
            font-weight: 700;
        }

        .hours-grid {
            display: flex;
            gap: 60px;
            margin-bottom: auto; /* Pushes ATM text to the bottom */
        }

        .hours-col strong {
            display: block;
            margin-bottom: 5px;
        }

        .atm-info {
            margin-top: 40px;
            font-size: 1rem;
        }

        /* Right Side: Map */
        .map-section {
        flex: 1;
        background-color: var(--map-placeholder);
        position: relative;
        margin: 1em;
        width: 100%;
        }

        .map-section iframe {
            width: 100%;
            height: 100%;
            border: 0;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* Responsive: Stack columns on mobile */
        @media (max-width: 768px) {
            .location-card {
                flex-direction: column;
            }
            .map-section {
                height: 300px;
            }
}


hours-col strong {
    font-size:.75em;
}

@media (max-width: 1024px) {
    .locations-container {
        grid-template-columns: 1fr;
    }
}

/*Font Size*/
p {
    font-size: .75em;
}

/*New Styling*/
.branch-card {
    color: #333;
    line-height: 1.4;
    margin: 1em;
}

.branch-title {
    color: #002D3E; /* Dark navy blue from the screenshot */
    font-size: 24px;
    margin-bottom: 15px;
}

.contact-info p, 
.hours-grid p, 
.additional-info p {
    margin: 4px 0;
}

.address-block {
    margin-top: 12px;
}

.hours-header {
    color: #888; /* Gray header */
    font-size: 18px;
    margin: 20px 0 10px 0;
    text-transform: capitalize;
}

/* Flexbox for the two-column hours */
.hours-grid {
    display: flex;
    justify-content: space-between;
}

.hours-column {
    flex: 1;
}

/* Right-aligned footer info */
.additional-info {
    text-align: right;
    margin-top: 20px;
    font-size: 15px;
}