/* ==========================================================================
   Hospital Location Section — contact info rectangle + embedded Google Map
   ========================================================================== */

#contactUs {
    scroll-margin-top: 4rem;
}

/*------------------------ contact info ---------------------*/
.contact-container {
    display: flex;
}

.contact-title {
    width: 83%;
}

.contact-numbers {
    width: 43.2%;
    padding: 2rem 0;
}

.phone-icon {
    width: 1.5rem;
}

.contact-info-rectangle {
    border: 1px solid #211f5f33;
    border-radius: 0.5rem;
    padding: 10px 20px;
    flex-wrap: wrap;
    width: 83%;
}

.small-number {
    padding-inline-end: 6rem;
}

.postal-code {
    padding-inline-end: 5.5rem;
}

/*------------------------ google map -------------------*/
.map-container {
    width: 56.7%;
    height: 30rem;
    position: relative;
    padding: 0px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 991.88px) {
    #contactUs {
        scroll-margin-top: 5rem;
    }

    .contact-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .contact-numbers {
        width: 100%;
        padding: 0.8rem;
    }

    .map-container {
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .contact-numbers,
    .map-container {
        width: 100% !important;
        margin: 0;
    }

    .contact-info-rectangle {
        border: 1px solid #211f5f33;
        border-radius: 0.5rem;
        padding: 10px 20px;
        flex-wrap: wrap;
        width: 83%;
    }

    html[dir="rtl"] .contact-info-rectangle {
        border: 1px solid #211f5f33;
        border-radius: 0.5rem;
        padding: 10px 20px;
        flex-wrap: wrap;
        width: 90%;
    }
}