/* Custom Header Top Bar - base styles */ .chtb-topbar { width: 100%; font-size: 14px; line-height: 1.4; box-sizing: border-box; position: relative; z-index: 999999; } .chtb-topbar .chtb-inner { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 8px 40px; flex-wrap: wrap; } .chtb-topbar.chtb-align-left .chtb-inner { justify-content: flex-start; } .chtb-topbar.chtb-align-center .chtb-inner { justify-content: center; } .chtb-topbar.chtb-align-right .chtb-inner { justify-content: flex-end; } .chtb-topbar .chtb-phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; white-space: nowrap; } .chtb-topbar .chtb-phone i { font-size: 15px; } .chtb-topbar .chtb-socials { display: inline-flex; align-items: center; gap: 14px; } .chtb-topbar .chtb-socials a { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; } .chtb-topbar .chtb-socials a:hover { opacity: 0.85; } /* ---------------------------------------------------- Responsive visibility — matches Elementor's default breakpoints: Mobile <768px, Tablet 768–1024px, Desktop ≥1025px. ---------------------------------------------------- */ /* Desktop */ @media (min-width: 1025px) { .chtb-topbar.chtb-hide-desktop { display: none !important; } } /* Tablet */ @media (min-width: 768px) and (max-width: 1024px) { .chtb-topbar.chtb-hide-tablet { display: none !important; } .chtb-topbar .chtb-inner { padding: 8px 20px; gap: 16px; } } /* Mobile */ @media (max-width: 767px) { .chtb-topbar.chtb-hide-mobile { display: none !important; } .chtb-topbar .chtb-inner { padding: 6px 20px; gap: 12px; justify-content: center !important; } .chtb-topbar .chtb-phone span { font-size: 13px; } /* Keep the bar pinned to the top of the screen while scrolling. chtb-position-fix.js measures this bar's height and adds matching top padding to plus pushes any fixed/sticky theme header down below it, so nothing gets covered. */ .chtb-topbar.chtb-sticky-mobile { position: fixed; top: 0; left: 0; right: 0; } }