<header class="cm-text-body body-font sticky top-0 z-50 bg-gradient-to-r from-white to-secondary">
    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
      <a class="flex title-font font-medium items-center cm-lgt-txt mb-4 md:mb-0" href="/">
        <img src="/assets/logo.png" class="h-8">
        <span class="ml-3 text-xl">{{ site.title }}</span>
      </a>

      <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
        <a class="mr-5 hover:cm-lgt-txt" href="/">Home</a>
        <a class="mr-5 hover:cm-lgt-txt" href="{{ site.plugin-link }}">Plugins</a>
        <a class="mr-5 hover:cm-lgt-txt" href="{{ site.doc-link }}">Docs</a>
      </nav>

      <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center rounded border-2 border-primary">
        <a class="ml-2 mr-2 hover:cm-lgt-txt" href="#hobby">for <strong>hobby</strong></a>
        <a class="mr-2 hover:cm-lgt-txt" href="#business">for <strong>business</strong></a>
        <a class="mr-2 hover:cm-lgt-txt" href="#edu">for <strong>edu</strong></a>
      </nav>
      <button href="{{site.demo-link}}" class="inline-flex items-center bg-gray-100 ml-2 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
        Open demo
      </button>
    </div>
</header>