<header class="mobile-header flex fixed bg-dark">
  <nav>
    <a href="/#" class="mobile-nav-link" data-nav="home">
      <svg
        id="svg-home"
        data-nav="home"
        class="clickable-svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path
          d="m23.43,5.17L12.85.19C12.58.06,12.29,0,12,0s-.58.06-.85.19L.57,5.17c-.35.16-.57.52-.57.9v14.39c0,1.95,1.57,3.53,3.5,3.53h17c1.93,0,3.5-1.58,3.5-3.53V6.08c0-.39-.22-.74-.57-.9Zm-14.43,16.83v-11.5s6,0,6,0v11.5h-6Zm13-1.53c0,.84-.67,1.53-1.5,1.53h-3.5v-11.5c0-1.1-.9-2-2-2h-6c-1.1,0-2,.9-2,2v11.5h-3.5c-.83,0-1.5-.69-1.5-1.53V6.71L12,2l10,4.71v13.76Z"
        />
      </svg>
    </a>
    <a href="/projetos" class="mobile-nav-link" data-nav="projetos"
      ><svg
        id="svg-projects"
        data-nav="projetos"
        class="clickable-svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path
          d="m8.4,0H3C1.3,0,0,1.3,0,3v5.4c0,1.1.9,2,2,2h8.4V2c0-1.1-.9-2-2-2Zm0,8.4H2V3c0-.6.4-1,1-1h5.4v6.4Z"
        />
        <path
          d="m21,0h-5.4c-1.1,0-2,.9-2,2v8.4h8.4c1.1,0,2-.9,2-2V3c0-1.7-1.3-3-3-3Zm-5.4,8.4V2h5.4c.6,0,1,.4,1,1v5.4s-6.4,0-6.4,0Z"
        />
        <path
          d="m22,13.6h-8.4v8.4c0,1.1.9,2,2,2h5.4c1.7,0,3-1.3,3-3v-5.4c0-1.1-.9-2-2-2Zm0,7.4c0,.6-.4,1-1,1h-5.4v-6.4h6.4v5.4Z"
        />
        <path
          d="m0,15.6v5.4c0,1.7,1.3,3,3,3h5.4c1.1,0,2-.9,2-2v-8.4H2c-1.1,0-2,.9-2,2Zm8.4,6.4H3c-.6,0-1-.4-1-1v-5.4h6.4v6.4Z"
        />
      </svg>
    </a>

    <div class="header-logo color-cycle-btn">
      <svg id="logo" height="2.5em" viewBox="0 0 36 36">
        <g>
          <path
            d="m22.2,4.6c-1.8-1.9-2.6-2.8-4.2-4.6C11.6,7.2,7.2,11.6,0,18c7.2,6.4,11.6,10.8,18,18,1.6-1.8,2.5-2.7,4.2-4.6,5.3-5.6,8.4-8.6,13.8-13.4-5.4-4.8-8.5-7.8-13.8-13.4Zm.2,21.2c-.6-.6-1-1-1.6-1.6,2.5-2.5,3.7-3.8,6.2-6.2-2.5-2.4-3.7-3.7-6.2-6.2-1.1-1.1-1.7-1.7-2.8-2.8-3.5,3.6-5.4,5.5-9,9,3.6,3.5,5.5,5.4,9,9,.6.7,1,1,1.6,1.7-.7.7-1,1-1.6,1.7-4.7-4.9-7.4-7.7-12.3-12.3,4.9-4.7,7.7-7.4,12.3-12.3.6.7,1,1,1.6,1.7,1.1,1.1,1.7,1.7,2.8,2.9,3.1,3.2,4.8,4.8,7.9,7.8-3.1,3-4.8,4.6-7.9,7.8Zm-4.4-4.4c-1.3-1.3-2-2-3.3-3.3,1.3-1.3,2-2,3.3-3.3,1.3,1.3,2,2,3.3,3.3-1.3,1.3-2,2-3.3,3.3Z"
          />
        </g>
      </svg>
    </div>

    <a href="/#sobre" class="mobile-nav-link" data-nav="sobre">
      <svg
        id="svg-about"
        data-nav="sobre"
        class="clickable-svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path
          d="m16,0h-8C3.58,0,0,3.58,0,8v8c0,4.42,3.58,8,8,8h8c4.42,0,8-3.58,8-8v-8c0-4.42-3.58-8-8-8Zm-8,22c-.51,0-1.01-.07-1.48-.19l1.34-3.03c.48-1.08,1.56-1.78,2.74-1.78h2.8c1.18,0,2.26.7,2.74,1.78l1.34,3.03c-.48.12-.97.19-1.48.19h-8Zm4-7.76l-4.24-4.24,3.54-3.54c.19-.19.44-.29.71-.29s.52.1.71.29l3.54,3.54-4.24,4.24Zm10,1.76c0,2.08-1.07,3.92-2.68,5l-1.35-3.03c-.71-1.61-2.23-2.71-3.94-2.92l3.63-3.63c.78-.78.78-2.05,0-2.83l-3.54-3.54c-1.13-1.13-3.11-1.13-4.24,0l-3.54,3.54c-.78.78-.78,2.05,0,2.83l3.63,3.63c-1.72.22-3.23,1.32-3.94,2.92l-1.35,3.03c-1.62-1.08-2.68-2.91-2.68-5v-8c0-3.31,2.69-6,6-6h8c3.31,0,6,2.69,6,6v8Z"
        />
      </svg>
    </a>
    <a href="/#contato" class="mobile-nav-link" data-nav="contato">
      <svg
        id="svg-contact"
        data-nav="contato"
        class="clickable-svg"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path
          d="m16,0h-8C3.58,0,0,3.58,0,8v8c0,4.42,3.58,8,8,8h8c4.42,0,8-3.58,8-8v-8c0-4.42-3.58-8-8-8Zm-8,2h8c3.29,0,5.97,2.66,6,5.95l-10,5.14L2,7.95c.03-3.28,2.71-5.95,6-5.95Zm8,20h-8c-3.31,0-6-2.69-6-6v-5.8l9.09,4.67c.29.15.6.22.91.22s.63-.07.91-.22l9.09-4.67v5.8c0,3.31-2.69,6-6,6Z"
        />
      </svg>
    </a>
  </nav>
</header>
