/* ═══════════════════════════════════════════ MEWARA GROUP — SHARED STYLES v2 Colour theme: Navy & White (mockup2 palette) ═══════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap'); :root { --navy: #0B2545; --navy-mid: #1A3A6B; --navy-lite: #2D5499; --red: #C0392B; --red-lite: #E74C3C; --white: #FFFFFF; --off-white: #F7F8FA; --grey-100: #F0F2F5; --grey-200: #E1E5EC; --grey-400: #9AA3B0; --grey-600: #5C6575; --grey-800: #2C333E; --text: #1A1F2B; --shadow-sm: 0 2px 8px rgba(11,37,69,0.08); --shadow-md: 0 8px 32px rgba(11,37,69,0.12); --shadow-lg: 0 20px 60px rgba(11,37,69,0.18); } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; } body { font-family:'DM Sans', sans-serif; background:var(--white); color:var(--text); } /* ── SCROLLBAR — prominent, on-brand ── */ ::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-track { background:#e8edf5; } ::-webkit-scrollbar-thumb { background:var(--navy); border-radius:4px; border:2px solid #e8edf5; } ::-webkit-scrollbar-thumb:hover { background:var(--red); } * { scrollbar-width: thin; scrollbar-color: var(--navy) #e8edf5; } /* Reserve space for the async-loaded header so the page doesn't jump/flicker when the header fragment loads after a fresh navigation. Total: topbar 38px + nav 108px = 146px. */ [data-include="header"] { display:block; min-height:146px; } .topbar { background: var(--navy); padding: 0 5vw; display: flex; justify-content:space-between; align-items:center; height: 38px; } .topbar-left { display:flex; gap:24px; align-items:center; } .topbar-left span { font-size:12px; color:rgba(255,255,255,0.6); font-family:'Rajdhani', sans-serif; letter-spacing:0.5px; } .topbar-left span strong { color:rgba(255,255,255,0.9); } .topbar-right { display:flex; gap:16px; align-items:center; } .topbar-right a { font-size:12px; color:rgba(255,255,255,0.55); text-decoration:none; font-family:'Rajdhani', sans-serif; letter-spacing:0.5px; transition:color 0.2s; } .topbar-right a:hover { color:var(--white); } .topbar-pill { background:var(--red); color:var(--white) !important; padding:3px 12px; font-size:11px !important; font-weight:600 !important; letter-spacing:1px !important; } /* ── MAIN NAV ── */ nav { /* The whole header wrapper is now the sticky element (see [data-include="header"] below). A position:sticky nav on its own only sticks WITHIN its parent's box, and that parent is only 146px tall — so it scrolled away almost immediately. nav stays position:relative so the mobile hamburger (position:absolute) still centres against it. */ position:relative; z-index:1000; background:var(--white); border-bottom:1px solid var(--grey-200); padding:0 5vw; display:flex; align-items:center; justify-content:center; height:108px; box-shadow: var(--shadow-sm); transition: box-shadow 0.3s; } nav.elevated { box-shadow: var(--shadow-md); } .nav-logo { position:absolute; left:5vw; top:calc(38px + 54px); transform:translateY(-50%); display:flex; align-items:center; gap:0; text-decoration:none; z-index:1002; } .nav-logo img { height:100px; width:auto; } .nav-menu { display:flex; align-items:center; gap:4px; list-style:none; } /* The nav-menu is now a sibling AFTER