header {
      position: fixed;
      background-color: var(--bwj-white);
      z-index: 11;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid var(--bwj-background-dark);
      width: 100%;
      font-size: 1rem;
    }
    header a {
      text-decoration: none;
    }

    header h1 {
      margin: 0;
      padding: 1em 0;
      font-size: 1em;
    }

    .header-main {
      width: 100%;
      margin: 0 auto;
      max-width: var(--bwj-content-width);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0 2.5em;
    }

    .header-menu {
      margin: 0;
      padding: 0;
      display: flex;
      gap: 2.5em;
    }
    .header-menu > li {
      list-style: none;
      margin: 0;
      padding: 0;
      display: block;
      height: 7em;
    }
    .header-menu > li > a {
      display: flex;
      align-items: center;
      height: 100%;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--bwj-theme-primary);
    }
    .header-menu > li > a:hover {
      color: var(--bwj-black);
      box-shadow: inset 0 -0.25rem 0 0 var(--bwj-theme-primary);
    }

    .header-menu-mobile {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .header-menu-mobile > li {
      list-style: none;
      margin: 0;
      padding: 0;
      display: block;
      border-top: 1px solid var(--bwj-background-dark);
    }
    .header-menu-mobile > li > a {
      display: block;
      padding: 1em 2.5em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--bwj-theme-primary);
    }
    .header-menu-mobile > li > a:hover {
      color: var(--bwj-black);
    }

    .header-menu-mobile-container {
      position: relative;
      height: 0;
      background-color: var(--bwj-white);
      overflow: hidden;
    }

    .header-button {
      display: none;
      width: 5em;
      height: 5em;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      margin-bottom: 1em;
    }
    .header-button > i {
      font-size: 3em;
      color: var(--bwj-theme-primary);
    }
    .header-button.clear {
      display: none;
    }

    @media screen and (max-width: 1025px) {
        .header-main {
            align-items: flex-start;
        }
     .header-button {
      display: flex;
     }
     .header-menu {
      display: none;
     }
        header h1 {
            font-size: 0.6em;
        }
    }

    .header-shade {
      display: none;
      opacity: 0;
      position: fixed;
      background-color: var(--bwj-black);
      z-index: 10;
      width: 100%;
      height: 100vh;
    }