.contactBar { position: relative; width: 100%; background: var(--dark-blue); }
.contactBar .container { width: 100%; }
.contactBar .content { width: 100%; padding: 0.75rem 0; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; align-items: center; }
.contactBar p { color: var(--light-text); font-size: 0.9rem; font-weight: 500; line-height: 1.2; margin-bottom: 0; }
.contactBar p a { color: var(--light-text); text-decoration: none; }
.contactBar p .icon { filter: var(--light-icon); width: 1rem; height: 1rem; margin-right: 0.5rem; vertical-align: top; }
.contactBar :is(.hours, .contacts) { flex: 1 0 50%; width: 50%; }
.contactBar .contacts { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; align-items: center; column-gap: 1.5rem; row-gap: 0.25rem; }
.contactBar .contacts p { flex: 0 1 auto; width: auto; text-align: end; }

@media (max-width: 767.98px) {
    .contactBar .content { flex-direction: column; justify-content: center; row-gap: 0.5rem; padding: 0.65rem 0; }
    .contactBar :is(.hours, .contacts) { flex: 1 0 100%; width: 100%; text-align: center; }
    .contactBar .contacts { justify-content: center; flex-direction: column; align-items: center; }
    .contactBar .contacts p { text-align: center; width: 100%;}
}