/* =========================================================
   HEADER STYLES — v4.5-final
   - Nuclear box-shadow reset (kill all, re-apply where wanted)
   - Wrapper backgrounds nuked (kills double-pill halo)
   - Active state forced via broad match + submenu reset
   - v4.3: Pill max-width reduced 1150px → 980px to remove
     empty space after Login button
   - v4.4-final: Force-override the inline style="height:60px;
     width:60px" on the logo image
   - v4.5-final: Lock every wrapper around the logo (a, picture,
     theme-logo-parent, data-zs-logo-container, data-zs-branding,
     theme-branding-info) to 44px height with zero padding so
     the Home page can't inflate the pill via the wrapper.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* ============================================
   DESKTOP (>= 992px)
   ============================================ */
@media (min-width: 992px) {

  /* Open Sans */
  html body .theme-header,
  html body .theme-header *,
  html body .theme-header *::before,
  html body .theme-header *::after {
    font-family: 'Open Sans', sans-serif !important;
  }

  /* ============================================
     NUCLEAR RESET — kill ALL shadows and wrapper bgs
     under the header. We'll re-apply where wanted below.
     ============================================ */
  html body .theme-header,
  html body .theme-header *,
  html body .theme-header *::before,
  html body .theme-header *::after {
    box-shadow: none !important;
  }

  /* Kill backgrounds on every wrapper-y element
     (divs, sections, navs inside the header).
     This eliminates the double-pill halo. */
  html body .theme-header div,
  html body .theme-header section,
  html body .theme-header nav,
  html body .theme-header [class*="submenu"]:not(ul):not(li),
  html body .theme-header [class*="dropdown"]:not(ul):not(li),
  html body .theme-header [class*="wrapper"]:not(ul):not(li),
  html body .theme-header [class*="container"]:not(ul):not(li) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Also kill the <li>'s own background/shadow so it can't paint a halo */
  html body .theme-header li,
  html body .theme-header li:hover,
  html body .theme-header li:focus,
  html body .theme-header li:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* ============================================
     HEADER HEIGHT
     ============================================ */
  html body .theme-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html body .theme-header > *,
  html body .theme-header .theme-header-body,
  html body .theme-header .theme-header-inner,
  html body .theme-header .theme-navigation-and-icons,
  html body .theme-header .theme-menu-area,
  html body .theme-header .theme-menu,
  html body .theme-header [class*="header-body"],
  html body .theme-header [class*="header-inner"],
  html body .theme-header [class*="header-content"],
  html body .theme-header [class*="header-wrapper"] {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  html body .theme-header .theme-menu ul li,
  html body .theme-header ul li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
  }

  /* ============================================
     HEADER PILL — re-apply background + shadow
     v4.3: max-width reduced 1150px → 980px
     ============================================ */
  html body .theme-header,
  html body .theme-header.scrolled,
  html body .theme-header.sticky,
  html body .theme-header.fixed,
  html body .theme-header[class*="scroll"],
  html body .theme-header[class*="sticky"] {
    width: 90% !important;
    max-width: 980px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    border-radius: 16px !important;
    position: fixed !important;
    top: 10px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    min-height: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(11, 11, 96, 0.08) !important;
  }

  /* Logo — generic fallback */
  html body .theme-header img,
  html body .theme-header [class*="logo"] img {
    max-height: 50px !important;
    height: auto !important;
    width: auto !important;
  }

  /* ============================================
     LOGO IMAGE — FORCED OVERRIDE
     Targets Zoho's actual logo attributes/wrappers to
     beat the inline style="height:60px;width:60px"
     injected on the <img> tag.
     ============================================ */
  html body .theme-header img[data-zs-logo],
  html body .theme-header [data-zs-logo-container] img,
  html body .theme-header .theme-logo-parent img,
  html body .theme-header .theme-logo-parent picture img,
  html body .theme-header picture img,
  html body .theme-header [data-zs-branding] img {
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  /* ============================================
     LOGO WRAPPERS — FORCED HEIGHT (v4.5-final)
     Lock every container around the logo to 44px
     so the Home page can't inflate the pill via the
     wrapper's height/padding/line-height. Crushes
     whatever Zoho injects in transparent-mode leftover.
     ============================================ */
  html body .theme-header [data-zs-logo-container],
  html body .theme-header .theme-logo-parent,
  html body .theme-header [data-zs-branding],
  html body .theme-header .theme-branding-info,
  html body .theme-header .theme-branding-info > div,
  html body .theme-header [data-zs-logo-container] a,
  html body .theme-header .theme-logo-parent a,
  html body .theme-header .theme-logo-parent picture {
    height: 44px !important;
    max-height: 44px !important;
    min-height: 0 !important;
    line-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ============================================
     TOP-LEVEL MENU LINKS — base state
     ============================================ */
  html body .theme-header .zpmenu-item a,
  html body .theme-header li a,
  html body .theme-header .zpmenu-item a span,
  html body .theme-header li a span,
  html body .theme-header .theme-menu-content,
  html body .theme-header .theme-menu-name {
    color: #0B0B60 !important;
    font-weight: 400 !important;
    font-family: 'Open Sans', sans-serif !important;
    text-decoration: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
  }

  html body .theme-header .zpmenu-item a,
  html body .theme-header li a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    transition: font-weight 0.2s ease, color 0.2s ease, text-decoration 0.2s ease, background 0.2s ease !important;
  }

  /* ============================================
     TOP-LEVEL HOVER — bold + underline
     ============================================ */
  html body .theme-header .zpmenu-item:hover > a,
  html body .theme-header .zpmenu-item:hover > a span,
  html body .theme-header .zpmenu-item:hover > a .theme-menu-content,
  html body .theme-header .zpmenu-item:hover > a .theme-menu-name,
  html body .theme-header > ul > li:hover > a,
  html body .theme-header > ul > li:hover > a span,
  html body .theme-header .theme-menu > ul > li:hover > a,
  html body .theme-header .theme-menu > ul > li:hover > a span,
  html body .theme-header .zpmenu-item > a:hover,
  html body .theme-header .zpmenu-item > a:hover span,
  html body .theme-header > ul > li > a:hover,
  html body .theme-header > ul > li > a:hover span {
    color: #0B0B60 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #0B0B60 !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 6px !important;
    background: transparent !important;
    transform: none !important;
  }

  /* ============================================
     ACTIVE STATE — BRUTE FORCE
     STEP 1: Apply broadly to ANY element with active-like class
     and to all its descendants. Don't worry about cascade yet.
     ============================================ */
  html body .theme-header [class*="active"],
  html body .theme-header [class*="active"] a,
  html body .theme-header [class*="active"] a span,
  html body .theme-header [class*="active"] span,
  html body .theme-header [class*="active"] .theme-menu-name,
  html body .theme-header [class*="active"] .theme-menu-content,
  html body .theme-header [class*="selected"],
  html body .theme-header [class*="selected"] a,
  html body .theme-header [class*="selected"] a span,
  html body .theme-header [class*="selected"] span,
  html body .theme-header [class*="selected"] .theme-menu-name,
  html body .theme-header [class*="selected"] .theme-menu-content,
  html body .theme-header [class*="current"],
  html body .theme-header [class*="current"] a,
  html body .theme-header [class*="current"] a span,
  html body .theme-header [class*="current"] span,
  html body .theme-header [class*="current"] .theme-menu-name,
  html body .theme-header [class*="current"] .theme-menu-content,
  /* Active class on the <a> directly */
  html body .theme-header a.active,
  html body .theme-header a.active *,
  html body .theme-header a[class*="active"],
  html body .theme-header a[class*="active"] *,
  html body .theme-header a.selected,
  html body .theme-header a[class*="selected"],
  html body .theme-header a[class*="selected"] *,
  html body .theme-header a.current,
  html body .theme-header a[class*="current"],
  html body .theme-header a[class*="current"] * {
    color: #0B0B60 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #0B0B60 !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 6px !important;
    background: transparent !important;
    transform: none !important;
  }

  /* ============================================
     ACTIVE STATE STEP 2: Reset submenu items that DON'T
     have their own active class. (Step 1 cascaded into them.)
     :not(:hover) excludes hovered items so hover styles can win.
     ============================================ */
  html body .theme-header ul ul li:not([class*="active"]):not([class*="selected"]):not([class*="current"]) > a:not(:hover),
  html body .theme-header ul ul li:not([class*="active"]):not([class*="selected"]):not([class*="current"]) > a:not(:hover) *,
  html body .theme-header ul ul li:not([class*="active"]):not([class*="selected"]):not([class*="current"]) > a:not(:hover) span,
  html body .theme-header [class*="submenu"] li:not([class*="active"]):not([class*="selected"]):not([class*="current"]) > a:not(:hover),
  html body .theme-header [class*="submenu"] li:not([class*="active"]):not([class*="selected"]):not([class*="current"]) > a:not(:hover) *,
  html body .theme-header [class*="submenu"] li:not([class*="active"]):not([class*="selected"]):not([class*="current"]) > a:not(:hover) span,
  html body .theme-header [class*="dropdown"] li:not([class*="active"]):not([class*="selected"]):not([class*="current"]) > a:not(:hover),
  html body .theme-header [class*="dropdown"] li:not([class*="active"]):not([class*="selected"]):not([class*="current"]) > a:not(:hover) * {
    color: #0B0B60 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
  }

  /* ============================================
     ACTIVE STATE STEP 3: Re-apply when submenu item ITSELF
     is active.
     ============================================ */
  html body .theme-header ul ul li[class*="active"] > a,
  html body .theme-header ul ul li[class*="active"] > a *,
  html body .theme-header ul ul li[class*="active"] > a span,
  html body .theme-header ul ul li[class*="selected"] > a,
  html body .theme-header ul ul li[class*="current"] > a,
  html body .theme-header ul ul li > a.active,
  html body .theme-header ul ul li > a.active *,
  html body .theme-header ul ul li > a[class*="active"],
  html body .theme-header ul ul li > a[class*="active"] *,
  html body .theme-header [class*="submenu"] li[class*="active"] > a,
  html body .theme-header [class*="submenu"] li[class*="active"] > a *,
  html body .theme-header [class*="submenu"] li > a.active,
  html body .theme-header [class*="submenu"] li > a[class*="active"] {
    color: #0B0B60 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #0B0B60 !important;
    text-underline-offset: 4px !important;
    background: transparent !important;
  }

  /* ============================================
     SUBMENU CONTAINER — pill shape, single source of shadow
     ============================================ */
  html body .theme-header .zpmenu-item ul,
  html body .theme-header > ul > li > ul,
  html body .theme-header .theme-menu > ul > li > ul,
  html body .theme-header li > ul,
  html body .theme-header ul.zpsubmenu,
  html body .theme-header ul[class*="submenu"],
  html body .theme-header ul[class*="dropdown"],
  html body .theme-header ul ul {
    border-radius: 16px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 8px !important;
    box-shadow: none !important;
    margin-top: 12px !important;
    border: none !important;
    min-width: 180px !important;
    overflow: visible !important;
    position: absolute !important;
  }

  /* ============================================
     HOVER BRIDGE — invisible 14px gap
     ============================================ */
  html body .theme-header .zpmenu-item ul::before,
  html body .theme-header li > ul::before,
  html body .theme-header ul.zpsubmenu::before,
  html body .theme-header ul[class*="submenu"]::before,
  html body .theme-header ul[class*="dropdown"]::before,
  html body .theme-header ul ul::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    left: 0 !important;
    right: 0 !important;
    height: 14px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    display: block !important;
    pointer-events: auto !important;
  }

  /* ============================================
     SUBMENU ITEMS
     ============================================ */
  html body .theme-header .zpmenu-item ul li,
  html body .theme-header ul ul li,
  html body .theme-header [class*="submenu"] li {
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  html body .theme-header .zpmenu-item ul li a,
  html body .theme-header ul ul li a,
  html body .theme-header [class*="submenu"] li a {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    color: #0B0B60 !important;
    text-decoration: none !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: background 0.2s ease, font-weight 0.2s ease !important;
    display: block !important;
  }

  /* Submenu hover — clean: bold + underline only */
  html body .theme-header .zpmenu-item ul li > a:hover,
  html body .theme-header .zpmenu-item ul li > a:hover span,
  html body .theme-header ul ul li > a:hover,
  html body .theme-header ul ul li > a:hover span,
  html body .theme-header [class*="submenu"] li > a:hover,
  html body .theme-header [class*="submenu"] li > a:hover span {
    background: transparent !important;
    background-color: transparent !important;
    color: #0B0B60 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #0B0B60 !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
  }

  /* ============================================
     CHEVRON ARROW
     ============================================ */
  html body .theme-header .theme-submenu-down-arrow {
    display: none !important;
  }

  html body .theme-header a[aria-haspopup="true"] .theme-menu-content::after {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    margin-left: 8px !important;
    border-right: 2px solid #0B0B60 !important;
    border-bottom: 2px solid #0B0B60 !important;
    transform: rotate(45deg) !important;
    position: relative !important;
    top: -2px !important;
    transition: transform 0.3s ease, top 0.3s ease !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .theme-header .zpmenu-item:hover a[aria-haspopup="true"] .theme-menu-content::after,
  html body .theme-header li:hover a[aria-haspopup="true"] .theme-menu-content::after,
  html body .theme-header a[aria-haspopup="true"]:hover .theme-menu-content::after {
    transform: rotate(225deg) !important;
    top: 1px !important;
  }

  /* ============================================
     LOGIN BUTTON — purple pill (last child only)
     Comes AFTER active-state rules so it wins.
     ============================================ */
  html body .theme-header .theme-menu > ul > li:last-child > a,
  html body .theme-header > ul > li:last-child > a,
  html body .theme-header .theme-navigation-and-icons .theme-menu-area .theme-menu > ul > li:last-child > a {
    background: #0B0B60 !important;
    background-color: #0B0B60 !important;
    color: #ffffff !important;
    padding: 8px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    margin-left: 8px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
  }

  html body .theme-header .theme-menu > ul > li:last-child > a *,
  html body .theme-header > ul > li:last-child > a *,
  html body .theme-header .theme-menu > ul > li:last-child > a span,
  html body .theme-header > ul > li:last-child > a span {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  html body .theme-header .theme-menu > ul > li:last-child > a:hover,
  html body .theme-header > ul > li:last-child > a:hover,
  html body .theme-header .theme-menu > ul > li:last-child:hover > a,
  html body .theme-header > ul > li:last-child:hover > a {
    background: #3D1A8C !important;
    background-color: #3D1A8C !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  html body .theme-header .theme-menu > ul > li:last-child > a:hover *,
  html body .theme-header > ul > li:last-child > a:hover * {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* Login active — STRONG override (the brute-force active rule
     above would otherwise underline it). Last in source = wins. */
  html body .theme-header .theme-menu > ul > li:last-child[class*="active"] > a,
  html body .theme-header .theme-menu > ul > li:last-child[class*="active"] > a *,
  html body .theme-header .theme-menu > ul > li:last-child[class*="active"] > a span,
  html body .theme-header .theme-menu > ul > li:last-child[class*="selected"] > a,
  html body .theme-header .theme-menu > ul > li:last-child[class*="selected"] > a *,
  html body .theme-header > ul > li:last-child[class*="active"] > a,
  html body .theme-header > ul > li:last-child[class*="active"] > a *,
  html body .theme-header > ul > li:last-child[class*="active"] > a span,
  html body .theme-header > ul > li:last-child[class*="selected"] > a,
  html body .theme-header > ul > li:last-child > a.active,
  html body .theme-header > ul > li:last-child > a.active *,
  html body .theme-header > ul > li:last-child > a[class*="active"],
  html body .theme-header > ul > li:last-child > a[class*="active"] *,
  html body .theme-header .theme-menu > ul > li:last-child > a.active,
  html body .theme-header .theme-menu > ul > li:last-child > a[class*="active"] {
    background: #0B0B60 !important;
    background-color: #0B0B60 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

} /* END desktop */


/* ============================================
   MOBILE / TABLET (<= 991px)
   ============================================ */
@media (max-width: 991px) {

  html body .theme-header,
  html body .theme-header * {
    font-family: 'Open Sans', sans-serif !important;
  }

  /* Mobile shadow nuke too */
  html body .theme-header *,
  html body .theme-header *::before,
  html body .theme-header *::after {
    box-shadow: none !important;
  }

  html body .theme-header,
  html body .theme-header > *,
  html body .theme-header .theme-header-body,
  html body .theme-header .theme-header-inner,
  html body .theme-header .theme-navigation-and-icons,
  html body .theme-header [class*="header-body"],
  html body .theme-header [class*="header-inner"],
  html body .theme-header [class*="header-content"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
  }

  html body .theme-header {
    border-radius: 16px !important;
  }

  /* Mobile logo image — same forced override as desktop */
  html body .theme-header img[data-zs-logo],
  html body .theme-header [data-zs-logo-container] img,
  html body .theme-header .theme-logo-parent img,
  html body .theme-header .theme-logo-parent picture img,
  html body .theme-header picture img,
  html body .theme-header [data-zs-branding] img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  /* Mobile logo wrappers — locked height */
  html body .theme-header [data-zs-logo-container],
  html body .theme-header .theme-logo-parent,
  html body .theme-header [data-zs-branding],
  html body .theme-header .theme-branding-info,
  html body .theme-header .theme-branding-info > div,
  html body .theme-header [data-zs-logo-container] a,
  html body .theme-header .theme-logo-parent a,
  html body .theme-header .theme-logo-parent picture {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 0 !important;
    line-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Mobile menu items — reset to weight 400 */
  html body .theme-header .zpmenu-item a,
  html body .theme-header li a,
  html body .theme-header .zpmenu-item a span,
  html body .theme-header li a span,
  html body .theme-header .theme-menu-content,
  html body .theme-header .theme-menu-name {
    color: #0B0B60 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
  }

  /* Mobile active — bold + underline (excludes login).
     Brute-force: covers <li class="active">, <a class="active">,
     and <li aria-current="page">. Uses `*` selector to catch
     theme-menu-name, theme-menu-content, span, etc. */
  html body .theme-header > ul > li:not(:last-child)[class*="active"],
  html body .theme-header > ul > li:not(:last-child)[class*="active"] *,
  html body .theme-header > ul > li:not(:last-child)[class*="selected"],
  html body .theme-header > ul > li:not(:last-child)[class*="selected"] *,
  html body .theme-header > ul > li:not(:last-child)[class*="current"],
  html body .theme-header > ul > li:not(:last-child)[class*="current"] *,
  html body .theme-header .zpmenu-item:not(:last-child)[class*="active"],
  html body .theme-header .zpmenu-item:not(:last-child)[class*="active"] *,
  html body .theme-header .zpmenu-item:not(:last-child)[class*="selected"],
  html body .theme-header .zpmenu-item:not(:last-child)[class*="selected"] *,
  html body .theme-header .zpmenu-item:not(:last-child)[class*="current"],
  html body .theme-header .zpmenu-item:not(:last-child)[class*="current"] *,
  html body .theme-header li:not(:last-child)[class*="active"],
  html body .theme-header li:not(:last-child)[class*="active"] *,
  html body .theme-header li:not(:last-child)[class*="selected"],
  html body .theme-header li:not(:last-child)[class*="selected"] *,
  html body .theme-header li:not(:last-child)[class*="current"],
  html body .theme-header li:not(:last-child)[class*="current"] *,
  /* Active class on the <a> directly */
  html body .theme-header .zpmenu-item:not(:last-child) > a.active,
  html body .theme-header .zpmenu-item:not(:last-child) > a.active *,
  html body .theme-header .zpmenu-item:not(:last-child) > a[class*="active"],
  html body .theme-header .zpmenu-item:not(:last-child) > a[class*="active"] *,
  html body .theme-header .zpmenu-item:not(:last-child) > a[class*="selected"],
  html body .theme-header .zpmenu-item:not(:last-child) > a[class*="current"],
  html body .theme-header li:not(:last-child) > a.active,
  html body .theme-header li:not(:last-child) > a.active *,
  html body .theme-header li:not(:last-child) > a[class*="active"],
  html body .theme-header li:not(:last-child) > a[class*="active"] *,
  /* aria-current standard */
  html body .theme-header li:not(:last-child)[aria-current="page"],
  html body .theme-header li:not(:last-child)[aria-current="page"] *,
  html body .theme-header li:not(:last-child) > a[aria-current="page"],
  html body .theme-header li:not(:last-child) > a[aria-current="page"] *,
  html body .theme-header .zpmenu-item:not(:last-child)[aria-current="page"],
  html body .theme-header .zpmenu-item:not(:last-child)[aria-current="page"] *,
  html body .theme-header .zpmenu-item:not(:last-child) > a[aria-current="page"],
  html body .theme-header .zpmenu-item:not(:last-child) > a[aria-current="page"] * {
    color: #0B0B60 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #0B0B60 !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
  }

  /* Mobile login button */
  html body .theme-header .theme-menu > ul > li:last-child,
  html body .theme-header > ul > li:last-child {
    margin: 12px 16px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    list-style: none !important;
    width: auto !important;
  }

  html body .theme-header .theme-menu > ul > li:last-child > a,
  html body .theme-header > ul > li:last-child > a {
    background: #0B0B60 !important;
    background-color: #0B0B60 !important;
    color: #ffffff !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
  }

  html body .theme-header .theme-menu > ul > li:last-child > a *,
  html body .theme-header > ul > li:last-child > a *,
  html body .theme-header .theme-menu > ul > li:last-child > a span,
  html body .theme-header > ul > li:last-child > a span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

} /* END mobile */