@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); /* Safety net: a stray unwrapped Bootstrap .row (negative gutter margins with no .container to offset them) is the classic cause of a few extra pixels of horizontal scroll. This keeps the page from ever scrolling sideways even if that happens again. IMPORTANT: this lives on ONLY. Putting `overflow-x:hidden` on as well forces it to become its own scroll container (per the CSS overflow spec, a non-visible value on one axis makes the other axis compute to `auto`) — which is exactly what breaks `position: sticky` navbars: the nav ends up stuck to 's box instead of the real viewport scroll box, so it desyncs and scrolls out of view. Never repeat that on . */ html{ overflow-x: hidden; } img, svg, video, canvas{ max-width: 100%; height: auto; } :root{ --primary:#0284C7; --primary-dark:#0369A1; --primary-orange: #f97216; --dark:#0F172A; --heading:#1E293B; --body-text:#64748B; --bg-light:#F8FAFC; --badge-bg:#E0F2FE; --icon-bg:#F0F9FF; --border-c:#E2E8F0; --bs-body-font-family:"Inter", sans-serif; } html,body{ font-family: 'Inter',sans-serif !important; color: var(--body-text) !important; scroll-behavior: smooth; } h1,h2,h3,h4,h5,.fw-heading{ color: var(--heading) !important; font-weight: 700; } h2 { font-weight: 700 !important; } .badge-pill{ background: var(--badge-bg); color: var(--primary); border-radius: 50px; padding: .4rem 1rem; font-weight: 600; font-size: .8rem; display: inline-block; letter-spacing: .02em; } .btn-primary-custom{ background: var(--primary); border: none; color: #fff; border-radius: 8px; padding: .75rem 1.75rem; font-weight: 600; transition: .2s ease; text-decoration: none; } .btn-primary-custom:hover{ background: var(--primary-dark); color: #fff; } .btn-outline-custom{ border: 1px solid #fff; color: #fff; border-radius: 8px; padding: .75rem 1.75rem; font-weight: 600; background: transparent; transition: .2s ease; text-decoration: none; } .btn-outline-custom:hover{ background: rgba(255,255,255,.15); color: #fff; } .navbar-custom{ height: 90px; box-shadow: 0 1px 0 var(--border-c); background: #fff; } .navbar-custom .container{ padding-left: 1.5rem; padding-right: 1.5rem; } .navbar-brand{ gap: .75rem; } .brand-mark{ width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; flex-shrink: 0; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50px; } .brand-text{ display: flex; flex-direction: column; justify-content: center; line-height: 1; } .brand-title{ font-size: 1rem; font-weight: 800; color: var(--heading); text-transform: uppercase; white-space: nowrap; } .brand-subtitle{ margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; } /* Mobile menu panel — taken OUT of normal flow (position: absolute, anchored to the sticky