/* ============================================================ NAVBAR.CSS Styles for the navbar injected by navbar.js. All selectors scoped to #mainNav to avoid conflicts. Link in every page : ============================================================ */ /* ── 1. NAV WRAPPER ──────────────────────────────────────── */ #mainNav { background: rgb(24, 68, 107); border-bottom: 3px solid #f5b800; z-index: 1050; width: 100%; } /* ── 2. INNER CONTAINER ──────────────────────────────────── */ #mainNav .nav-inner { display: flex; align-items: center; width: 100%; gap: 0.5rem; } /* ── 3. TOGGLER ──────────────────────────────────────────── */ #mainNav .navbar-toggler { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; background: transparent; cursor: pointer; flex-shrink: 0; } #mainNav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; display: block; width: 1.5em; height: 1.5em; background-repeat: no-repeat; background-size: 100%; } /* ── 4. COLLAPSE WRAPPER ─────────────────────────────────── */ #mainNav .navbar-collapse { flex-grow: 1; } /* ── 5. NAV LIST ─────────────────────────────────────────── */ #mainNav .navbar-nav { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.05rem; list-style: none; margin: 0 !important; padding: 0 !important; } /* ── 6. NAV LINKS ────────────────────────────────────────── */ #mainNav .nav-link { font-family: "Poppins", "DM Sans", sans-serif; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.9) !important; padding: 0.38rem 0.75rem !important; border-radius: 6px; transition: color 0.2s, background 0.2s; white-space: nowrap; text-decoration: none; display: block; } #mainNav .nav-link:hover, #mainNav .nav-link.active { color: rgba(255, 255, 255, 0.9) !important; text-decoration: none; } /* Parent dropdown highlighted when child is active */ #mainNav .nav-item.dropdown.show > .nav-link, #mainNav .nav-item.dropdown > .nav-link.active { color: #f5b800 !important; background: whitesmoke; } /* Dropdown caret */ #mainNav .dropdown-toggle::after { margin-left: 0.3em; vertical-align: 0.18em; border-top-width: 0.28em; } /* ── 7. DROPDOWN MENU ────────────────────────────────────── */ #mainNav .navbar-nav .dropdown-menu { background-color: whitesmoke; border: 1px solid rgba(245, 184, 0, 0.25); border-radius: 10px; padding: 0.45rem; min-width: 210px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); margin-top: 0.35rem !important; /* Bootstrap 5 uses position:absolute by default — keep it */ } /* ── 8. DROPDOWN ITEMS ───────────────────────────────────── */ #mainNav .navbar-nav .dropdown-item { color: black; font-size: 16px; font-weight: 500; border-radius: 7px; padding: 0.48rem 0.85rem; transition: background 0.18s, color 0.18s; white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; } #mainNav .navbar-nav .dropdown-item:hover, #mainNav .navbar-nav .dropdown-item:focus { background-color: rgb(24, 68, 107); color: #ffffff; text-decoration: none; } #mainNav .navbar-nav .dropdown-item.active { background-color: rgba(245, 184, 0, 0.18); color: #f5b800; } /* Social media icons in dropdown items */ #mainNav .navbar-nav .dropdown-item i { font-size: 0.95rem; width: 16px; text-align: center; } /* LinkedIn */ #mainNav .navbar-nav .dropdown-item .fa-linkedin { color: #0a66c2; } /* Facebook */ #mainNav .navbar-nav .dropdown-item .fa-facebook { color: #1877f2; } /* Instagram */ #mainNav .navbar-nav .dropdown-item .fa-instagram { color: #e1306c; } /* Divider inside dropdown */ #mainNav .navbar-nav .dropdown-divider { border-color: rgba(255, 255, 255, 0.15); margin: 0.3rem 0.5rem; } /* ── 9. SUB-MENUS ────────────────────────────────────────── */ .dropdown-submenu { position: relative; } /* Sub-menu opens to the right */ .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-left: 0.15rem; margin-top: -0.45rem !important; display: none; border-radius: 10px; } /* Show on hover (desktop) */ .dropdown-submenu:hover > .dropdown-menu { display: none; } /* Arrow indicator on parent item */ .dropdown-submenu > .dropdown-item.dropdown-toggle::after { float: right; margin-top: 0.3em; border-top: 0.3em solid transparent; border-bottom: 0.3em solid transparent; border-left: 0.3em solid rgba(255, 255, 255, 0.7); border-right: none; vertical-align: unset; } /* ── 10. LARGE SCREENS 1200px+ ───────────────────────────── */ @media (min-width: 1200px) { #mainNav .navbar-nav { gap: 0.1rem; } #mainNav .nav-link { font-size: 17px; padding-left: 0.9rem !important; padding-right: 0.9rem !important; } } /* ── 11. LAPTOP 992px–1199px ─────────────────────────────── */ @media (min-width: 992px) and (max-width: 1199px) { #mainNav .nav-link { font-size: 16px; padding-left: 0.65rem !important; padding-right: 0.65rem !important; } } /* ── 12. TABLET 768px–991px (collapsed) ─────────────────── */ @media (min-width: 768px) and (max-width: 991px) { #mainNav .navbar-collapse { width: 100%; } #mainNav .navbar-nav { flex-direction: column !important; align-items: flex-start; width: 100%; gap: 0; padding: 0.5rem 0 !important; } #mainNav .nav-item { width: 100%; } #mainNav .nav-link { font-size: 14px; width: 100%; padding: 0.6rem 0.75rem !important; border-radius: 4px; white-space: normal; } #mainNav .nav-inner { flex-wrap: wrap; } /* Drop menus go full-width on collapse */ #mainNav .navbar-nav .dropdown-menu { position: static !important; float: none; width: 100%; border-radius: 6px; margin-top: 0.2rem !important; box-shadow: none; border-color: rgba(245, 184, 0, 0.15); } /* Sub-menus also full-width */ .dropdown-submenu > .dropdown-menu { left: 0; margin-left: 0.75rem; } } /* ── 13. MOBILE up to 767px ──────────────────────────────── */ @media (max-width: 767px) { #mainNav { padding-top: 0; padding-bottom: 0.4rem; } #mainNav .navbar-collapse { width: 100%; } #mainNav .navbar-nav { flex-direction: column !important; align-items: flex-start; width: 100%; gap: 0; padding: 0.4rem 0 !important; } #mainNav .nav-item { width: 100%; } #mainNav .nav-link { font-size: 16px; width: 100%; padding: 0.55rem 0.7rem !important; border-radius: 4px; white-space: normal; } #mainNav .nav-inner { flex-wrap: wrap; } #mainNav .navbar-nav .dropdown-menu { position: static !important; float: none; width: 100%; border-radius: 6px; margin-top: 0.2rem !important; box-shadow: none; border-color: rgba(245, 184, 0, 0.15); } .dropdown-submenu > .dropdown-menu { left: 0; margin-left: 0.75rem; } }