.bp-nav a,
      .bp-mobile-nav-wrap a {
        text-decoration: none;
        color: inherit;
        transition: all 0.2s ease;
      }

      .bp-nav svg,
      .bp-mobile-nav-wrap svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      html.bp-no-scroll,
      html.bp-no-scroll body {
        overflow: hidden !important;
        height: 100% !important;
      }

      /* =========================================================================
        1. DESKTOP HEADER & MENU STYLES
        ========================================================================= */
      .bp-nav {
        position: relative !important;
        z-index: 1000 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content;
        /* If the theme's header row is itself display:flex (logo | nav | buttons),
          this makes .bp-nav grow to fill all the space left over between the
          logo and the action buttons, instead of only being as wide as the menu
          text. .bp-menu's justify-content:center then centers the menu items
          inside that full space, so the nav is visually centered between the
          logo and buttons rather than sitting closer to one side. Harmless if
          the parent isn't flex - flex-grow simply has no effect then. */
        flex: 1 1 auto !important;
        min-width: 0 !important;
      }

      .bp-menu,
      .bp-menu > li {
        list-style: none !important;
        list-style-type: none !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .bp-menu-item {
        position: static !important;
      }

      .bp-menu {
        display: flex !important;
        flex-direction: row !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
      }

      .bp-menu-item {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
      }

      .bp-menu-link {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 10px!important;
        height: auto !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1f2937 !important;
        cursor: pointer !important;
        line-height: normal !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
      }

      .bp-menu-link:hover,
      .bp-menu-item:hover .bp-menu-link {
        color: #1c244b !important;
      }

      .bp-chev {
        width: 14px !important;
        height: 14px !important;
        transition: transform 0.2s ease !important;
        stroke-width: 2.5 !important;
        color: #6b7280 !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
      }

      .bp-menu-item.bp-open .bp-chev {
        transform: rotate(180deg);
      }

      /* Mega Panel Container
        NOTE: position is fixed (not absolute) and top/left/width are set by JS
        (see positionMegaPanel() below) using getBoundingClientRect() against the
        real viewport - NOT centered on .bp-nav's own box. .bp-nav is just a flex
        item inside your theme's header row, so its width/position vary with
        screen size and header content (logo width, buttons, etc). Centering the
        panel on .bp-nav worked by coincidence on some screens and overflowed
        off-screen on others (e.g. a laptop display vs. a large desktop monitor).
        Fixed positioning + JS math centers on the actual browser window instead,
        so it's correct on every screen/resolution.

        IMPORTANT: top/left/width are deliberately WITHOUT !important below.
        The JS sets these three via element.style.* on open/resize/scroll -
        an !important rule in this stylesheet would always beat that inline
        style (CSS !important beats inline style regardless of specificity),
        which is what caused every panel to render pinned at top:0/left:0
        instead of under the actual nav item. Do not re-add !important to
        these three properties. */
      .bp-mega-panel {
        position: fixed !important;
        top: 0;
        left: 0;
        width: min(1120px, calc(100vw - 40px));
        max-width: calc(100vw - 40px) !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #eef0f6 !important;
        box-shadow: 0 20px 48px -10px rgba(28, 36, 75, 0.18) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        margin: 0 !important;
        transform: translateY(8px) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
        pointer-events: none !important;
        z-index: 99999 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }

      .bp-menu-item.bp-open .bp-mega-panel {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
      }

      .bp-mega-in {
        width: 100% !important;
        max-width: 1120px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: 280px 1fr !important;
        min-height: 380px !important;
        box-sizing: border-box !important;
      }

      /* Sidebar design (Quality Menu Only) */
      .bp-mega-side {
        background-color: #f8fafc !important;
        border-right: 1px solid #eef0f6 !important;
        padding: 32px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
      }

      .bp-mega-tabs {
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .qms-menu-section {
          border: 1px solid #eef0f6 !important;
          border-radius: 8px !important;
          padding: 10px 0px !important;
          cursor: pointer !important;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
          transition: all 0.2s ease !important;
          margin-bottom: 10px !important;
      }
      .qms-sub-menu-section{
        margin-top: 10px !important;
      }

      .bp-tab-btn {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        background: #ffffff !important;
        border: 1px solid #eef0f6 !important;
        border-radius: 8px !important;
        padding: 14px 16px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        white-space: normal !important;
      }

      .bp-tab-btn:hover {
        background-color: #f5f8ff !important;
        border-color: rgba(28, 36, 75, 0.15) !important;
      }

      .bp-tab-btn.active {
        background-color: #1c244b !important;
        border-color: #1c244b !important;
      }

      .bp-tab-btn.active .bp-tab-title {
        color: #fff !important;
      }

      .bp-tab-btn.active .bp-tab-desc {
        color: rgba(255, 255, 255, 0.8) !important;
      }

      .bp-tab-title {
        display: block !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1c244b !important;
        margin-bottom: 4px !important;
        line-height: normal !important;
      }

      .bp-tab-desc {
        display: block !important;
        font-size: 12px !important;
        color: #6b7280 !important;
        line-height: 1.4 !important;
      }

      /* Tab Content Visibility */
      .bp-tab-pane {
        display: none !important;
      }

      .bp-tab-pane.active {
        display: block !important;
        animation: bp-fade-in 0.2s ease !important;
      }

      @keyframes bp-fade-in {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .bp-mega-foot {
        margin-top: auto !important;
        font-size: 13px !important;
        color: #6b7280 !important;
        line-height: 1.5 !important;
      }

      .bp-mega-foot p {
        margin-bottom: 12px !important;
      }

      .bp-mega-foot a {
        font-weight: 600 !important;
        color: #1c244b !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
      }

      .bp-mega-foot a:hover {
        color: #45a5c1 !important;
      }

      .bp-mega-content {
        padding: 40px !important;
        box-sizing: border-box !important;
      }

      /* Simple dropdown without sidebars - same fixed-position system as
        .bp-mega-panel above, JS sets top/left/width for this one too.
        max-width/width caps here keep !important (they're just the CSS
        ceiling, JS never writes inline max-width/width overrides that need
        to beat them - the inline `width` JS sets on the shared .bp-mega-panel
        rule above is what actually needs to win). */
      .bp-mega-simple {
        max-width: min(1120px, calc(100vw - 40px)) !important;
        width: min(1120px, calc(100vw - 40px));
        border-radius: 8px !important;
        border: 1px solid #eef0f6 !important;
        margin-top: 0 !important;
      }

      .bp-mega-simple .bp-mega-in {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
      }

      .bp-mega-simple .bp-mega-content {
        padding: 32px 40px !important;
      }

      /* Grid Lists inside dropdown */
      .bp-grid-list {
        list-style: none !important;
        display: grid !important;
        gap: 24px 32px !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .bp-grid-list li {
        margin: 0 !important;
        padding: 0 !important;
      }

      .bp-grid-list li a {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          justify-content: flex-start !important;
          text-align: left !important;
          gap: 10px !important;
          padding: 5px 15px !important;
          border-radius: 8px !important;
          width: 100% !important;
          box-sizing: border-box !important;
      }

      .bp-grid-list li a:hover {
        background-color: #f5f8ff !important;
      }

      .bp-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
      }

      .bp-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .bp-cols-1 {
        grid-template-columns: 1fr !important;
      }

      /* Grid items style matching the live website mockup (Detailed Layout) */
      .bp-detailed-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      a.bp-detailed-item:hover {
        background-color: #f5f8ff !important;
      }

      .bp-grid-ico {
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .bp-grid-ico img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
        transition: transform 0.2s ease !important;
      }

      .bp-grid-list li a:hover .bp-grid-ico img,
      a.bp-detailed-item:hover .bp-grid-ico img {
        transform: scale(1.15) !important;
      }

      .bp-grid-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        flex: 1 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      .bp-grid-label {
        font-family: sans-serif;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1c244b !important;
        line-height: 1.2 !important;
      }

      .bp-grid-desc {
        font-size: 12px !important;
        color: #6b7280 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
      }

      /* Sub-links specifically for QMS Essentials columns */
      .bp-nested-column {
        grid-row: span 2 !important;
      }

      .bp-nested-sublinks {
          list-style: none !important;
          margin-top: 0px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 0px !important;
          padding: 0 !important;
      }

      .bp-nested-sublinks li {
        margin: 0 !important;
        padding: 0 !important;
      }

      .elementor-element .bp-nested-sublinks a {
        font-family: sans-serif;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #1c244b !important;
        display: inline-block !important;
        line-height: 1.4 !important;
      }
      .bp-grid-list li .bp-nested-sublinks a {
          padding: 5px 0px !important;
      }
      .bp-nested-sublinks a:hover {
        color: #45a5c1 !important;
      }

      .bp-empty-grid-cell {
        visibility: hidden !important;
      }

      /* Search Trigger & Actions */
      .bp-actions {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
      }

      .bp-btn {
        padding: 10px 22px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border: 1px solid transparent !important;
        cursor: pointer !important;
        white-space: nowrap !important;
      }

      .bp-btn-primary {
        background-color: #1c244b !important;
        color: #fff !important;
      }

      .bp-btn-primary:hover {
        background-color: #293466 !important;
      }

      .bp-btn-outline {
        background-color: transparent !important;
        border-color: #1c244b !important;
        color: #1c244b !important;
      }

      .bp-btn-outline:hover {
        background-color: rgba(28, 36, 75, 0.04) !important;
      }

      .bp-search-btn {
        background: none !important;
        border: none !important;
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #1c244b !important;
        border-radius: 50% !important;
        transition: background 0.2s ease !important;
      }

      .bp-search-btn:hover {
        background-color: #f1f5f9 !important;
      }

      .bp-search-btn svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.5 !important;
      }


      /* =========================================================================
        2. MOBILE MENU STYLES (self-contained: burger + full-screen panel)
        ========================================================================= */
      .bp-mobile-nav-wrap {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        z-index: 1000 !important;
      }

      /* Burger Button */
      .bp-burger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 24px !important;
        height: 18px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
      }

      .bp-burger span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background-color: #1c244b !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
      }

      .bp-burger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
      }

      .bp-burger.active span:nth-child(2) {
        opacity: 0 !important;
      }

      .bp-burger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
      }

      /* Helper to make hidden attribute work with flex displays */
      .bp-mobile-nav-wrap [hidden] {
        display: none !important;
      }

      /* Mobile Full-Screen Panel */
      .bp-mobile-panel {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        z-index: 999999 !important;
      }
      

      .bp-mobile-sub li.bp-nested-column {
            padding: 0 0 0 5px!important;
        }

      /* Header row: Close (left) / Logo (center) / Search (right) */
      .bp-mobile-panel-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 18px 20px !important;
        border-bottom: 1px solid #eef0f6 !important;
        flex-shrink: 0 !important;
      }

      .bp-mobile-close,
      .bp-mobile-search-btn {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #1c244b !important;
      }

      .bp-mobile-close svg,
      .bp-mobile-search-btn svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 2.2 !important;
      }

      .bp-mobile-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
      }

      .bp-mobile-logo img {
        height: 60px !important;
        width: auto !important;
        max-width: 170px !important;
        object-fit: contain !important;
      }

      /* Scrollable body: accordion menu */
      .bp-mobile-panel-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 20px 20px !important;
        box-sizing: border-box !important;
      }

      .bp-mobile-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .bp-mobile-menu > li {
        border-bottom: 1px solid #eef0f6 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
      }

      .bp-mobile-menu > li:last-child {
        border-bottom: none !important;
      }

      .bp-mobile-menu > li > a,
      .bp-mobile-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 16px 0 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1c244b !important;
        background: none !important;
        border: none !important;
        text-align: left !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
      }

      .bp-mobile-trigger .bp-chev {
        stroke-width: 2.5 !important;
        color: #1c244b !important;
      }

      .bp-mobile-trigger.active .bp-chev {
        transform: rotate(180deg) !important;
      }

      /* Left-hand icon + label group inside a trigger button (space-between
        pushes the chevron to the right, this group stays together on the left) */
      .bp-mobile-trigger-label {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
      }

      /* Icon + label used for plain (non-accordion) sub-links, e.g. Compliance
        Standards, Integration's Acumatica link, Resources items, About items */
      .bp-mobile-sub > li > a.bp-mobile-icon-link,
      .bp-mobile-sub-inner > li > a.bp-mobile-icon-link {
        padding: 9px 4px !important;
      }

      .bp-mobile-sub {
        list-style: none !important;
        margin: 0 !important;
        padding-left: 12px !important;
        padding-bottom: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
      }
      .bp-mobile-sub-inner li a {
          font-size: 14px;
          padding-left: 20px;
          font-weight: 500;
      }
      .bp-mobile-sub li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      .bp-mobile-sub > li > a {
        font-size: 14px !important;
        color: #1c244b !important;
        font-weight: 500 !important;
        padding: 8px 0 !important;
      }

      .bp-mobile-sub-inner {
        list-style: none !important;
        margin: 0 !important;
        padding-left: 4px !important;
        padding-bottom: 5px !important;
        flex-direction: column !important;
        gap: 2px !important;
      }

      .bp-mobile-sub-inner li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-block-end: 10px!important;

      }

      .bp-sub-trigger {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #1c244b !important;
        padding: 10px 0 !important;
      }

      /* Icon + label rows used for QMS Software sub-items */
      .bp-mobile-icon-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 9px 4px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #1c244b !important;
        border-radius: 8px !important;
      }

      .bp-mobile-icon-link:hover {
        background-color: #f5f8ff !important;
      }

      .bp-mobile-icon {
        flex-shrink: 0 !important;
        width: 26px !important;
        height: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .bp-mobile-icon img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
      }

      .bp-mobile-section-title {
        font-size: 12px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        color: #1c244b !important;
        margin-top: 8px !important;
        letter-spacing: 0.05em !important;
        list-style: none !important;
      }

      /* Footer: two buttons side by side */
      .bp-mobile-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        padding: 16px 20px !important;
        border-top: 1px solid #eef0f6 !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
      }

      .bp-mobile-actions .bp-btn {
        flex: 1 1 0 !important;
        display: block !important;
        text-align: center !important;
        padding: 12px !important;
      }


      /* =========================================================================
        3. RESPONSIVE MEDIA QUERIES
        ========================================================================= */
      @media (max-width: 1024px) {
        .bp-nav {
          display: none !important;
        }
      }

      @media (min-width: 1025px) {
        .bp-nav {
          display: flex !important;
        }

        .bp-mobile-nav-wrap {
          display: none !important;
        }
      }