/* Scoped navbar to avoid Bootstrap/theme collisions */
:root {
  --bgkkm: #ffffff;
  --bgkkm2: #ffffff;
  --textwhitekkm: #fff;
  --textkkm: #0b2a4a; /* main nav text */
  --mutedkkm: #0b2a4a;
  --accentkkm: #f59e0b; /* orange accent */
  --borderkkm: rgba(15, 23, 42, 0.1);
  --radiuskkm: 16px;
  --shadowkkm: 0 18px 50px rgba(2, 8, 23, 0.12);
}
* {
  box-sizing: border-box;
}

/* MENU MARKUP RULE: Inside the menu there are NO classes/ids — only ul/li/a.
       We only scope CSS/JS using data attributes on the NAV + buttons. */

/* Scoped navbar to avoid Bootstrap/theme collisions */
nav[data-xk-nav] {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  z-index: 9999;
  background: transparent;
}
nav[data-xk-nav] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Toggle button (default hidden; shown on mobile) */
nav[data-xk-nav] > button[data-xk-toggle] {
  display: none;
  margin: 0px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--bgkkm);
  color: var(--textwhitekkm);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  z-index: 10000;
  justify-content: flex-end !important;
}

/* Close button (mobile only; shown when menu is open) */
nav[data-xk-nav] > button[data-xk-close] {
  display: none;
  position: fixed;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #0f1a33;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 10002;
}

/* Desktop layout */
nav[data-xk-nav] > ul {
  max-width: 100%;
  justify-content: center !important;
  padding: 0px 12px;
  margin-left: auto !important; /* ⬅️ THIS IS THE KEY */
  display: flex;
  gap: 10px;
  align-items: center;
}

@media only screen and (max-width: 1366px) {
    nav[data-xk-nav] > ul {
  max-width: 100%;
  justify-content: center !important;
  padding: 0px 12px;
  margin-left: auto !important; /* ⬅️ THIS IS THE KEY */
  display: flex;
  gap: 5px;
  align-items: center;
}
}

nav[data-xk-nav] li {
  position: relative;
}

nav[data-xk-nav] a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 20px 10px;
  color: var(--textkkm);
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}

nav[data-xk-nav] a:hover {
  color: var(--accentkkm);
  background: transparent;
}

/* Desktop dropdown */
nav[data-xk-nav] li > ul {
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-top: 4px solid var(--accentkkm);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadowkkm);
  display: none;
  z-index: 9999;
}

nav[data-xk-nav] li > ul a {
  color: #0b2a4a;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 600;
  background: transparent;
}

nav[data-xk-nav] li > ul a:hover {
  color: #0b2a4a;
  background: rgba(245, 158, 11, 0.14);
}

/* Show dropdown on hover (desktop) */
@media (min-width: 1099px) {
  nav[data-xk-nav] li:hover > ul {
    display: block;
  }
  nav[data-xk-nav] li:has(ul) > a::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accentkkm);
    opacity: 0.95;
    flex: 0 0 auto;
  }
}

/* Level 3+ opens to the right */
nav[data-xk-nav] li > ul li > ul {
  top: 0;
  left: calc(100% + 0px);
}

/* Caret for any LI that contains a UL (CSS-only) */
/* Caret for any LI that contains a UL (CSS-only) */

/* --- Mobile overlay behaviour --- */
@media (max-width: 1098px) {
  /* Force toggle button visible on small screens even if theme overrides button rules */
  nav[data-xk-nav] > button[data-xk-toggle] {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    right: 15px;
    position: relative;
    z-index: 10001;
    color: #0b2a4a;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #ffffff;
  }

  nav[data-xk-nav][aria-expanded="true"] > button[data-xk-close] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #0b2a4a;
  }

  /* Backdrop overlay */
  nav[data-xk-nav][aria-expanded="true"]::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
  }

  /* Menu panel as overlay (does NOT push page content) */
  nav[data-xk-nav] > ul {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--borderkkm);
    border-radius: 16px;
    background: var(--bgkkm2);
    max-height: calc(100vh - 100px);
    overflow: auto;
    z-index: 10000;
  }
  nav[data-xk-nav] li:has(ul) > a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.75;
  }

  nav[data-xk-nav][aria-expanded="true"] > ul {
    display: flex;
  }

  /* Mobile dropdowns become inline collapsibles */
  nav[data-xk-nav] li > ul {
    position: static;
    display: none;
  }
  nav[data-xk-nav] li[aria-expanded="true"] > ul {
    display: block;
  }

  /* Lock background scroll when open */
  body[data-xk-nav-open="true"] {
    overflow: hidden;
  }
}

.pbmit-header-content {
  display: flex;
}

.pbmit-logo-menuarea {
  flex: 1 1 auto; /* IMPORTANT: take remaining space */
}

.pbmit-menuarea {
  margin-left: auto; /* push menu to the right inside logo area */
}

/* optional: keep menu items aligned right inside ul */
.pbmit-menuarea nav[data-xk-nav] > ul {
  justify-content: flex-end;
}