body{
    margin: 0;
    color: #141414;
}
@font-face {
    font-family: Roboto;
    src: url(./assets/fonts/Roboto-VariableFont_wdth\,wght.ttf);
}
header{
    position: relative;
    z-index: 1;
}
.headerBar{
    height: 50px;
    background-color: rgb(118, 173, 228);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5em;
    box-shadow: 0 2px 4px #656565;
}
.brand{
    display: flex;
    gap: 16px;
    align-items: center;
}
.brandLogo{
    width: 32px;
    height: 32px;
}
.brandTitle{
    font-family: Roboto;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 28px;
    letter-spacing: 0.2px;
    font-weight: 500;
    color: #0B213B;
}
.titleTag{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
main{
    max-width: 1200px;
    margin: auto;
}
.container{
    max-width: 800px;
    padding: 0 3%;
    margin: auto;
}
.imageBanner{
    height: clamp(185px,30vw,382px);
    background-image: url('assets/images/imageBanner.jpg');
    background-size: cover;
    background-position: center 10%;
    position: relative;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}
.darkOverlay{
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #00000050, #00000060);
}
.imageBanner h2{
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    font-size: 48px;
    color: white;
    /* color: rgb(118, 173, 228); */
    /* color: rgb(70, 138, 206); */
    /* color: rgb(38, 107, 179); */
    /* text-shadow: 0px 0px 10px white; */
    /* text-shadow:  -1px -1px 3px white,
            1px -1px 3px white,
            -1px  1px 3px white,
            1px  1px 3px white; */
    position: absolute;
    bottom: 10px; 
    right: 12px;
    margin: 0;
    text-align: right;
    max-width: 90%;
}
.imageBanner .rectangle{
    height: 5px;
    width: 100%;
    background-color: rgb(118, 173, 228);
    position: absolute;
    bottom: 0;
}
.info{
    font-family: Arial, Helvetica, sans-serif;
}
.info h2{font-size: 2em;}
.anchorLinks{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    margin-top: 2em;
    margin-bottom: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1em;
}
a:link, a:visited{
    color: rgb(70, 138, 206);
}
a:hover{
    color: rgb(118, 173, 228);
}
.regionHeading{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.4em;
    margin-bottom: 0;
    margin-top: 2em;
}
.columnContainer{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.columnContainer .column{
    flex: 1;
    min-width: 380px;
}
.regionGroupHeading{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.2em;
}
.memberSiteLink{
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    margin-bottom: 8px;
}
.memberSiteLink img{
    width: 16px;
}
.memberSiteLink a{text-decoration: none;}
.hospitalHPicon{
    width: 20px !important;
    margin: -2px;
}
.regionGroup div:first-child{
    margin-top: 1em;
}
footer p{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.flexContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: 2em;
    flex-wrap: wrap;
}
.companyLinkDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.companyLink{
    text-decoration: none;
    color: #0B213B !important;
    transition: 0.3s;
}
.companyLink:hover{
    color: darkslategray !important;
}
.companyLinkDiv img{
    width: 32px;
}
.companyLinkDiv p{
    font-size: 1.5em;
}
@media (max-width: 700px) {
   .titleTag{display: none;} 
}
@media (max-width: 500px) {
   .imageBanner h2{font-size: 2em;}
   .info h2{font-size: 1.5em;}
   .anchorLinks{gap: 30px;}
   .flexContainer{gap:0; flex-direction: column;}
}