@charset "utf-8";
/* CSS Document */

  :root {
    --nav-bg: #000;   /* dark navy like your screenshot; change to #000 for black */
    --nav-height: 62px;
    --gap: 28px;         /* space between items */
    --logo-h: 28px;      /* desktop logo height */
    --logo-h-m: 30px;    /* mobile logo height */
  }

  .nav-outer {
    position: sticky; top: 0; z-index: 1000;
    background: var(--nav-bg); color: #fff; width: 100%;
  }
  .nav-inner {
    max-width: 1400px; margin: 0 auto; padding: 0 18px;
    display: flex; align-items: center; height: var(--nav-height);
    box-sizing: border-box;
  }

  /* left: logo; right: links (desktop) */
  .brand {
    display: flex; align-items: center;
    margin-right: var(--gap);
	
  }
  .brand img { height: var(--logo-h); width: auto; display:block; margin-top: 5px; }

  .nav-links {
    display: flex; align-items: center; gap: var(--gap);
    list-style: none; margin: 0; padding: 0;
    /* push links to start, right after logo */
    flex: 1;
  }
  .nav-links a {
    color:#fff; text-decoration:none; font: 500 16px/1 system-ui, Arial, sans-serif;
    white-space: nowrap;
  }
  .nav-links a:hover, .nav-links a:focus { color:#d8d8d8; outline: none; }

  /* mobile header row: logo left, toggle right */
  .nav-top {
    display: none;
    width: 100%; justify-content: space-between; align-items: center;
    padding: 10px 0;
  }
  .nav-top img { height: var(--logo-h-m); width:auto; }

  .nav-toggle {
    display: none; background: none; border: 0; color: gold; cursor: pointer;
    font-size: 30px; line-height: 1;
  }

  /* Mobile */
  @media (max-width: 820px) {
    .nav-inner { flex-direction: column; height: auto; padding: 0 12px 10px; }
    .nav-top   { display: flex; }
    .brand     { display: none; } /* hide desktop brand row */
    .nav-toggle { display: block; }

    .nav-links {
      width: 100%; flex-direction: column; gap: 0; display: none;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .nav-links li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .nav-links a  { display: block; padding: 14px 6px; }
    .nav-links.active { display: flex; }
  }