.bg-presence{ background-color: #3a4655;}
 .bg-dark-grey h2, .bg-dark-grey p, .bg-dark-grey h5, .bg-dark-grey span, .bg-dark-grey .page-intro  { color: #fff !important;}
.clr-red{  color:var(--color-red) !important; }
.clr-white{ color: #fff !important; }
.clr-yellow{  color: #fec22a !important; }
.bg-presence .highlte { padding: 15px 6px; }
.bg-presence .highlte .count {padding:  10px; }

.bg-presence .counter { font-family: var(--font-Acumin-Pro);  }

.bg-dark-grey{ background-color: #3a4655; }
.clr-light-grey{ color: #939598; }

.indicator-container { display: flex; align-items: center;  gap: 20px; color: #ffffff;}
.indicator-logo img {   width: 30px;  height: 30px;  border-radius: 50%;  }
.brand-text {  font-size: 1.1rem;  margin-right: 10px; }
.legend-item { display: flex; align-items: center;  gap: 5px; font-size: 0.95rem;  color: #d1d1d1;}
.color-box { width: 15px;  height: 15px; border-radius: 2px;  display: inline-block;}
.clr-blue { color:#226d97; }
.clr-light-org { color: #d76c60; }
.north { background-color: #c84848; }
.south { background-color: #f6c343; }
.west  { background-color: #cfd1d4; }

.br-rt{ border-right: 1px solid #FFF; }
.indicator-container .indicator{ display: flex;  }
.indicator-container .indicator .brand-text{ line-height: 100%; margin: 0 0 0 10px;}

.cream-bg{ background-color: #f8f4e9; padding: 20px; }
.br-btm{     border-bottom: 2px solid #000; }
.cream-bg h5 {    font-family: var(--font-Acumin-Pro);  font-size: 18px; color: var(--color-red);  line-height: 1.1;  font-weight: 700; letter-spacing: 0.5px; }

.pnb-logo{
    position: absolute;
    z-index: 1;
    top: 5%;
    right: 50%;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    width: 160px;
}

@media handheld, only screen and (max-width: 575px){
    .br-rt{ border-right: 1px solid transparent; }
    .pnb-logo{ position: relative; top: 0; right: 0%; left: 50%;}
}

@media handheld, only screen and (max-width: 767px){
    .br-rt{ border-right: 1px solid transparent; }
     .pnb-logo{ position: relative; top: 0; right: 0%; left: 50%;}
}
@media handheld, only screen and (max-width: 575px){
    .indicator-container{ flex-wrap: wrap; padding-top: 30px;}
    .indicator-container .indicator{ display: flex; width: 45%; font-size: 16px;}
    .indicator-container .indicator .brand-text{  font-size: 16px; margin: 0 0 0 10px;}
    .bg-presence .highlte { padding: 15px 0px; }
     .pnb-logo{ position: relative; top: 0; right: 0%; left: 50%;}
}