<html><head></head><body><nav data-component-type="Navigation" class="navbar bg-transparent text-white relative top-0 left-0 right-0 z-50 transition-all duration-300" style="
    backdrop-filter: blur(3px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background: rgba(30, 41, 59, 0.15);
  " data-component-slug="ss-sports-running-navbar">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <!-- Logo -->
    <div class="z-50">
      <img data-node="logo" data-node-type="file" data-node-label="Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765526997/seltrix/templates/ss-sports-running/Logo.png" src="{{logo}}" alt="Logo" class="h-10 w-auto">
    </div>

    <!-- Desktop Menu -->
    <ul class="hidden md:flex space-x-8 items-center">
      {{#if show_nav_item_1}}
      <li>
        <a data-node="nav_item_1" data-node-type="page_links" data-node-label="Nav Link 1" href="{{nav_item_1}}" data-node-default="#" class="hover:text-gray-300 transition-colors">
          <span data-node="nav_item_1_text" data-node-type="text" data-node-label="Nav Link 1 Text" data-node-default="Home">{{nav_item_1_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_nav_item_2}}
      <li>
        <a data-node="nav_item_2" data-node-type="page_links" data-node-label="Nav Link 2" href="{{nav_item_2}}" data-node-default="#" class="hover:text-gray-300 transition-colors">
          <span data-node="nav_item_2_text" data-node-type="text" data-node-label="Nav Link 2 Text" data-node-default="About Us">{{nav_item_2_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_nav_item_3}}
      <li>
        <a data-node="nav_item_3" data-node-type="page_links" data-node-label="Nav Link 3" href="{{nav_item_3}}" data-node-default="#" class="hover:text-gray-300 transition-colors">
          <span data-node="nav_item_3_text" data-node-type="text" data-node-label="Nav Link 3 Text" data-node-default="Events">{{nav_item_3_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_nav_item_4}}
      <li>
        <a data-node="nav_item_4" data-node-type="page_links" data-node-label="Nav Link 4" href="{{nav_item_4}}" data-node-default="#" class="hover:text-gray-300 transition-colors">
          <span data-node="nav_item_4_text" data-node-type="text" data-node-label="Nav Link 4 Text" data-node-default="Club">{{nav_item_4_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_nav_item_5}}
      <li>
        <a data-node="nav_item_5" data-node-type="page_links" data-node-label="Nav Link 5" href="{{nav_item_5}}" data-node-default="#" class="hover:text-gray-300 transition-colors">
          <span data-node="nav_item_5_text" data-node-type="text" data-node-label="Nav Link 5 Text" data-node-default="Menu 5">{{nav_item_5_text}}</span>
        </a>
      </li>
      {{/if}}
    </ul>

    <!-- Desktop CTA -->
    <div class="hidden md:block">
      {{#if show_button}}
      <a data-node="button" data-node-type="page_links" data-node-label="Button" href="{{button}}" data-node-default="#" class="bg-white text-black border border-white px-6 py-2 font-medium hover:bg-gray-200 transition-colors">
        <span data-node="button_text" data-node-type="text" data-node-label="Button Text" data-node-default="Join Now">{{button_text}}</span>
      </a>
      {{/if}}
    </div>

    <!-- Mobile Menu Button -->
    <button class="mobile-menu-btn md:hidden z-[70] text-white focus:outline-none">
      <svg class="hamburger-icon h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
      <svg class="close-icon h-8 w-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</nav><div class="mobile-menu fixed inset-0 bg-black/95 transform translate-x-full transition-transform duration-300 md:hidden flex flex-col justify-center items-center space-y-8 z-40 p-4 h-[calc(100vh-0rem)]">
  {{#if show_mobile_nav_item_1}}
  <a data-node="mobile_nav_item_1" data-node-type="page_links" data-node-label="Mobile Nav Link 1" href="{{mobile_nav_item_1}}" data-node-default="#" class="text-white text-2xl font-medium hover:text-gray-300">
    <span data-node="mobile_nav_item_1_text" data-node-type="text" data-node-label="Mobile Nav Link 1 Text" data-node-default="Home">{{mobile_nav_item_1_text}}</span>
  </a>
  {{/if}} {{#if show_mobile_nav_item_2}}
  <a data-node="mobile_nav_item_2" data-node-type="page_links" data-node-label="Mobile Nav Link 2" href="{{mobile_nav_item_2}}" data-node-default="#" class="text-white text-2xl font-medium hover:text-gray-300">
    <span data-node="mobile_nav_item_2_text" data-node-type="text" data-node-label="Mobile Nav Link 2 Text" data-node-default="About Us">{{mobile_nav_item_2_text}}</span>
  </a>
  {{/if}} {{#if show_mobile_nav_item_3}}
  <a data-node="mobile_nav_item_3" data-node-type="page_links" data-node-label="Mobile Nav Link 3" href="{{mobile_nav_item_3}}" data-node-default="#" class="text-white text-2xl font-medium hover:text-gray-300">
    <span data-node="mobile_nav_item_3_text" data-node-type="text" data-node-label="Mobile Nav Link 3 Text" data-node-default="Events">{{mobile_nav_item_3_text}}</span>
  </a>
  {{/if}} {{#if show_mobile_nav_item_4}}
  <a data-node="mobile_nav_item_4" data-node-type="page_links" data-node-label="Mobile Nav Link 4" href="{{mobile_nav_item_4}}" data-node-default="#" class="text-white text-2xl font-medium hover:text-gray-300">
    <span data-node="mobile_nav_item_4_text" data-node-type="text" data-node-label="Mobile Nav Link 4 Text" data-node-default="Club">{{mobile_nav_item_4_text}}</span>
  </a>
  {{/if}} {{#if show_mobile_nav_item_5}}
  <a data-node="mobile_nav_item_5" data-node-type="page_links" data-node-label="Mobile Nav Link 5" href="{{mobile_nav_item_5}}" data-node-default="#" class="text-white text-2xl font-medium hover:text-gray-300">
    <span data-node="mobile_nav_item_5_text" data-node-type="text" data-node-label="Mobile Nav Link 5 Text" data-node-default="Menu 5">{{mobile_nav_item_5_text}}</span>
  </a>
  {{/if}} {{#if show_mobile_button}}
  <a data-node="mobile_button" data-node-type="page_links" data-node-label="Mobile CTA Button" href="{{mobile_button}}" data-node-default="#" class="bg-white text-black px-8 py-3 text-lg font-medium mt-4">
    <span data-node="mobile_button_text" data-node-type="text" data-node-label="Mobile CTA Button Text" data-node-default="Join Now">{{mobile_button_text}}</span>
  </a>
  {{/if}}
</div></body></html>