/* ========================================================= MUKLAWA_APP_HEADER_CONTROLS_UNIFIED_V4 ========================================================= */ .muklawa-main-navbar-v2 { width: 100% !important; background: #fff !important; } /* ========================================================= DESKTOP / LAPTOP ========================================================= */ @media (min-width: 1200px) { .muklawa-main-navbar-v2 { min-height: 76px !important; padding: 0 !important; } .muklawa-main-navbar-v2 > .container { width: calc(100% - 32px) !important; max-width: 1720px !important; margin: 0 auto !important; padding-left: 0 !important; padding-right: 0 !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; } /* LOGO */ .muklawa-main-navbar-v2 .navbar-brand { flex: 0 0 auto !important; padding: 10px 0 !important; margin-right: 28px !important; } .muklawa-main-navbar-v2 .navbar-brand img { height: 43px !important; width: auto !important; max-height: 43px !important; } /* MAIN MENU */ .muklawa-main-navbar-v2 #navbarNav { min-width: 0 !important; align-items: center !important; } .muklawa-main-navbar-v2 .navbar-nav { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 2px !important; } .muklawa-main-navbar-v2 .navbar-nav .nav-link { display: flex !important; align-items: center !important; min-height: 76px !important; padding: 0 12px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; } .muklawa-main-navbar-v2 .navbar-nav .nav-link.active::after { left: 12px !important; right: 12px !important; } /* RIGHT SIDE WRAPPER */ .muklawa-main-navbar-v2 #navbarNav > .d-flex { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 10px !important; margin-left: 22px !important; } .muklawa-main-navbar-v2 .country-dropdown, .muklawa-main-navbar-v2 .currency-dropdown { margin: 0 !important; } /* ===================================================== ONE CANONICAL CONTROL SIZE Pakistan / PKR / Dashboard / Logout ===================================================== */ .muklawa-main-navbar-v2 .btn-country, .muklawa-main-navbar-v2 .btn-currency, .muklawa-main-navbar-v2 .btn-nav { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 17px !important; border-radius: 999px !important; font-family: var(--font-sans, 'Inter', sans-serif) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; gap: 8px !important; vertical-align: middle !important; } /* Same border thickness */ .muklawa-main-navbar-v2 .btn-country, .muklawa-main-navbar-v2 .btn-currency, .muklawa-main-navbar-v2 .btn-outline-nav { border: 1px solid var(--border, #f0e4ec) !important; } .muklawa-main-navbar-v2 .btn-dashboard-nav { border: 1px solid var(--rose, #FE2B73) !important; } /* Controlled widths so header feels balanced */ .muklawa-main-navbar-v2 .btn-country { min-width: 154px !important; } .muklawa-main-navbar-v2 .btn-currency { min-width: 116px !important; } .muklawa-main-navbar-v2 .btn-dashboard-nav { min-width: 132px !important; } .muklawa-main-navbar-v2 .btn-outline-nav { min-width: 102px !important; } /* Icons all visually same scale */ .muklawa-main-navbar-v2 .btn-country i, .muklawa-main-navbar-v2 .btn-currency i, .muklawa-main-navbar-v2 .btn-nav i { font-size: 14px !important; line-height: 1 !important; } /* Dropdown chevrons */ .muklawa-main-navbar-v2 .dropdown-toggle::after { margin-left: 5px !important; vertical-align: middle !important; } } /* ========================================================= COMPACT LAPTOP ========================================================= */ @media (min-width: 1200px) and (max-width: 1399px) { .muklawa-main-navbar-v2 .navbar-brand { margin-right: 18px !important; } .muklawa-main-navbar-v2 .navbar-brand img { height: 39px !important; max-height: 39px !important; } .muklawa-main-navbar-v2 .navbar-nav .nav-link { padding-left: 9px !important; padding-right: 9px !important; font-size: 14px !important; } .muklawa-main-navbar-v2 #navbarNav > .d-flex { gap: 7px !important; margin-left: 13px !important; } .muklawa-main-navbar-v2 .btn-country, .muklawa-main-navbar-v2 .btn-currency, .muklawa-main-navbar-v2 .btn-nav { height: 43px !important; min-height: 43px !important; padding-left: 13px !important; padding-right: 13px !important; font-size: 14px !important; } .muklawa-main-navbar-v2 .btn-country { min-width: 140px !important; } .muklawa-main-navbar-v2 .btn-currency { min-width: 105px !important; } .muklawa-main-navbar-v2 .btn-dashboard-nav { min-width: 118px !important; } .muklawa-main-navbar-v2 .btn-outline-nav { min-width: 92px !important; } } /* ========================================================= TABLET / MOBILE Keep Bootstrap collapse behaviour. ========================================================= */ @media (max-width: 1199.98px) { .muklawa-main-navbar-v2 { min-height: 68px !important; } .muklawa-main-navbar-v2 > .container { width: calc(100% - 24px) !important; } .muklawa-main-navbar-v2 .navbar-brand img { height: 37px !important; max-height: 37px !important; } .muklawa-main-navbar-v2 .navbar-toggler { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border-radius: 11px !important; } .muklawa-main-navbar-v2 #navbarNav { padding: 12px 0 16px !important; } .muklawa-main-navbar-v2 .navbar-nav .nav-link { min-height: 44px !important; padding: 10px 12px !important; font-size: 15px !important; font-weight: 600 !important; } .muklawa-main-navbar-v2 #navbarNav > .d-flex { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; margin-top: 10px !important; } .muklawa-main-navbar-v2 .btn-country, .muklawa-main-navbar-v2 .btn-currency, .muklawa-main-navbar-v2 .btn-nav { width: 100% !important; height: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; margin: 0 !important; } .muklawa-main-navbar-v2 .country-dropdown, .muklawa-main-navbar-v2 .currency-dropdown { width: 100% !important; margin: 0 !important; } } @media (max-width: 520px) { .muklawa-main-navbar-v2 #navbarNav > .d-flex { grid-template-columns: 1fr !important; } .muklawa-main-navbar-v2 .navbar-brand img { height: 34px !important; max-height: 34px !important; } } /* END MUKLAWA_APP_HEADER_CONTROLS_UNIFIED_V4 */ /* MUKLAWA_HEADER_MENU_FINAL_V25 */ /* ========================================================= CURRENCY SYMBOL ========================================================= */ .muklawa-main-navbar-v2 .currency-header-dollar { font-size: 20px !important; line-height: 1 !important; font-weight: 700 !important; } /* ========================================================= DESKTOP / LAPTOP >= 1200 Explicitly restore full desktop navigation. ========================================================= */ @media (min-width: 1200px) { .muklawa-main-navbar-v2 .navbar-toggler { display: none !important; } .muklawa-main-navbar-v2 #navbarNav, .muklawa-main-navbar-v2 #navbarNav.collapse, .muklawa-main-navbar-v2 #navbarNav.collapse:not(.show) { display: flex !important; visibility: visible !important; position: static !important; width: auto !important; height: auto !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; flex-grow: 1 !important; align-items: center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .muklawa-main-navbar-v2 #navbarNav .navbar-nav { display: flex !important; flex-direction: row !important; align-items: center !important; } } /* ========================================================= MOBILE + TABLET < 1200 ========================================================= */ @media (max-width: 1199.98px) { .muklawa-main-navbar-v2 { min-height: 68px !important; padding: 0 !important; background: #fff !important; border-bottom: 1px solid #f0e4ec !important; overflow: visible !important; position: relative !important; z-index: 1100 !important; } .muklawa-main-navbar-v2 > .container { width: 100% !important; max-width: none !important; min-height: 68px !important; padding: 0 14px !important; margin: 0 !important; position: relative !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; } /* Logo */ .muklawa-main-navbar-v2 .navbar-brand { margin-right: auto !important; padding: 7px 0 !important; } .muklawa-main-navbar-v2 .navbar-brand img { height: 38px !important; max-height: 38px !important; width: auto !important; } /* Hamburger */ .muklawa-main-navbar-v2 .navbar-toggler { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; background: #fff !important; border: 1px solid #f0e4ec !important; border-radius: 12px !important; box-shadow: 0 3px 12px rgba(15,10,20,.06) !important; } .muklawa-main-navbar-v2 .navbar-toggler:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(254,43,115,.10), 0 3px 12px rgba(15,10,20,.06) !important; } .muklawa-main-navbar-v2 .navbar-toggler-icon { width: 21px !important; height: 21px !important; background-size: 21px 21px !important; } /* CLOSED MENU */ .muklawa-main-navbar-v2 #navbarNav.collapse:not(.show) { display: none !important; } /* OPEN MENU */ .muklawa-main-navbar-v2 #navbarNav.show, .muklawa-main-navbar-v2 #navbarNav.collapsing { display: block !important; position: absolute !important; top: calc(100% + 8px) !important; left: 12px !important; right: 12px !important; width: auto !important; height: auto !important; max-height: calc(100vh - 100px) !important; margin: 0 !important; padding: 10px !important; background: #fff !important; border: 1px solid #f0e4ec !important; border-radius: 16px !important; box-shadow: 0 20px 55px rgba(15,10,20,.14), 0 4px 12px rgba(15,10,20,.05) !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 1300 !important; } .muklawa-main-navbar-v2 #navbarNav.collapsing { transition: none !important; } /* NAV LINKS */ .muklawa-main-navbar-v2 #navbarNav .navbar-nav { width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .muklawa-main-navbar-v2 #navbarNav .nav-item { width: 100% !important; margin: 0 !important; padding: 0 !important; } .muklawa-main-navbar-v2 #navbarNav .navbar-nav .nav-link { width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 10px 12px !important; display: flex !important; align-items: center !important; border-radius: 10px !important; color: #484848 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; } .muklawa-main-navbar-v2 #navbarNav .navbar-nav .nav-link:hover { background: #fff7fa !important; color: #FE2B73 !important; } .muklawa-main-navbar-v2 #navbarNav .navbar-nav .nav-link.active { background: #FFEEF5 !important; color: #FE2B73 !important; font-weight: 700 !important; } /* REMOVE DESKTOP LONG PINK LINE */ .muklawa-main-navbar-v2 #navbarNav .navbar-nav .nav-link::after, .muklawa-main-navbar-v2 #navbarNav .navbar-nav .nav-link.active::after { display: none !important; content: none !important; } /* RIGHT-SIDE CONTROLS */ .muklawa-main-navbar-v2 #navbarNav > .d-flex { width: 100% !important; margin: 8px 0 0 !important; padding: 10px 0 0 !important; border-top: 1px solid #f0e4ec !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; align-items: stretch !important; } .muklawa-main-navbar-v2 #navbarNav > .d-flex > * { min-width: 0 !important; margin: 0 !important; } /* COUNTRY + CURRENCY */ .muklawa-main-navbar-v2 #navbarNav .country-dropdown, .muklawa-main-navbar-v2 #navbarNav .currency-dropdown { width: 100% !important; } .muklawa-main-navbar-v2 #navbarNav .btn-country, .muklawa-main-navbar-v2 #navbarNav .btn-currency { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; border: 1px solid #f0e4ec !important; border-radius: 10px !important; font-size: 14px !important; line-height: 1 !important; } .muklawa-main-navbar-v2 #navbarNav .currency-header-dollar { font-size: 18px !important; line-height: 1 !important; } /* DOWNLOAD / SIGN UP / SIGN IN / DASHBOARD */ .muklawa-main-navbar-v2 #navbarNav .btn-nav { grid-column: 1 / -1 !important; width: 100% !important; min-height: 42px !important; height: 42px !important; padding: 0 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1 !important; } /* DROPDOWNS */ .muklawa-main-navbar-v2 #navbarNav .dropdown-menu { margin-top: 5px !important; max-height: 48vh !important; overflow-y: auto !important; border: 1px solid #f0e4ec !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(15,10,20,.12) !important; } } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 420px) { .muklawa-main-navbar-v2 > .container { padding-left: 10px !important; padding-right: 10px !important; } .muklawa-main-navbar-v2 #navbarNav.show, .muklawa-main-navbar-v2 #navbarNav.collapsing { left: 8px !important; right: 8px !important; border-radius: 14px !important; } .muklawa-main-navbar-v2 .navbar-brand img { height: 35px !important; max-height: 35px !important; } } /* END MUKLAWA_HEADER_MENU_FINAL_V25 */