/* ============================================================== USTMR HEADER — responsive + display fixes (in-page CSS layer) -------------------------------------------------------------- Markup wahi Elementor wala rahega. Ye sirf CSS + site-fixes.js ke sath kaam karta hai. Header design pehle se aisa hai: - Desktop/Laptop : mega menu (e-n-menu) - Tablet/Mobile : hamburger menu (classic nav-menu) Isko header.php ke mein ke andar paste karo, ya file ko link kar do. ============================================================== */ /* 0) chhoti screens pe header ki rows overflow na karein -------- */ @media (max-width:1024px){ .elementor-location-header .e-con-inner{ flex-wrap:wrap; row-gap:8px; } .elementor-location-header img{ max-width:100%; height:auto; } } /* ============================================================== 1) MOBILE hamburger menu (classic nav-menu widget) site-fixes.js toggle pe widget par .uh-menu-open lagata hai ============================================================== */ .elementor-location-header .elementor-widget-nav-menu{ position:relative; } /* dropdown default hidden */ .elementor-location-header .elementor-widget-nav-menu nav.elementor-nav-menu--dropdown{ display:none; } /* open hone par full-width dropdown */ .elementor-location-header .elementor-widget-nav-menu.uh-menu-open nav.elementor-nav-menu--dropdown{ display:block; position:absolute; left:0; right:0; top:100%; background:#fff; box-shadow:0 16px 36px rgba(10,33,73,.16); max-height:80vh; overflow-y:auto; z-index:9999; } /* menu items tidy rows */ .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-nav-menu>li{ width:100%; border-top:1px solid #eef2f7; } .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-item{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px !important; font-weight:600; color:#0a2149; } /* submenu accordion: default hidden, .uh-sub-open par show */ .elementor-location-header nav.elementor-nav-menu--dropdown .sub-menu{ display:none; background:#f6faff; } .elementor-location-header nav.elementor-nav-menu--dropdown .menu-item-has-children.uh-sub-open>.sub-menu{ display:block; } .elementor-location-header nav.elementor-nav-menu--dropdown .sub-menu .elementor-item{ padding-left:38px !important; font-weight:500; } /* parent item ke aage arrow */ .elementor-location-header nav.elementor-nav-menu--dropdown .menu-item-has-children>a::after{ content:"\25BE"; font-size:12px; margin-left:10px; transition:transform .2s; } .elementor-location-header nav.elementor-nav-menu--dropdown .menu-item-has-children.uh-sub-open>a::after{ transform:rotate(180deg); } /* hamburger open/close icon swap (agar Elementor ki default CSS na chale) */ .elementor-location-header .elementor-menu-toggle{ cursor:pointer; } .elementor-location-header .elementor-menu-toggle .elementor-menu-toggle__icon--close{ display:none; } .elementor-location-header .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open{ display:none; } .elementor-location-header .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close{ display:inline-block; } /* ============================================================== 2) DESKTOP mega menu — viewport se bahar na jaye ============================================================== */ @media (min-width:1025px){ .elementor-location-header .e-n-menu-content{ max-width:100vw; } } /* agar kabhi chhoti screen par mega content dikhe to static kar do */ @media (max-width:1024px){ .elementor-location-header .e-n-menu-content{ position:static !important; width:auto !important; max-width:none !important; transform:none !important; box-shadow:none !important; border:0 !important; left:auto !important; right:auto !important; } .elementor-location-header .e-n-menu-content>.e-con{ width:auto !important; } } .elementor-element.elementor-element-b06f313.e-con-full.e-grid.e-con.e-child { width: 980px !important; } @media (min-width: 768px) and (max-width: 1440px) { .elementor-element.elementor-element-b06f313.e-con-full.e-grid.e-con.e-child { width: 1050px !important; } }