/* Contact and social icons on the left of the top bar. */
.topbar { padding: 7px 0; }
.topbar-layout { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.topbar .topbar-contact-link { display: inline-flex; align-items: center; gap: 7px; color: #e0e8ee; font-size: 10px; white-space: nowrap; }
.topbar-contact-link svg { width: 14px; height: 14px; stroke: #c4a07d; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.topbar .topbar-contact-link:hover { color: #fff; }
.topbar-social { display: flex; align-items: center; gap: 7px; border-left: 1px solid #ffffff26; padding-left: 16px; }
.topbar-social button,.topbar .topbar-social a { display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 4px; background: #ffffff08; color: #dce6ee; }
.topbar-social button:disabled { opacity: .65; }
.topbar-social svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.topbar .topbar-social a:hover { color: #fff; background: #ffffff18; }
.topbar-tagline { color: #a9bac8; font-size: 9px; white-space: nowrap; }
@media (max-width: 991px) { .topbar-tagline { display: none; } }
@media (max-width: 575px) { .topbar-contact { gap: 5px 14px; } .topbar .topbar-contact-link { font-size: 9px; } .topbar-social { flex-basis: 100%; padding: 2px 0 0; border-left: 0; gap: 8px; } .topbar-social button,.topbar .topbar-social a { width: 24px; height: 24px; } .topbar { padding: 7px 0; } }