<header data-component-type="Navigation" class="absolute top-0 left-0 w-full z-50" data-component-slug="history-template-header">
  <!-- STYLES -->
  

  <!-- OUTER WRAPPER -->
  <div class="w-full px-4 sm:px-6 lg:px-[96px] pt-4 sm:pt-6">
    <!-- NAV BAR -->
    <nav class="glass-header max-w-[1728px] mx-auto w-full flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4">
      <!-- LOGO -->
      <img src="{{logo}}" class="w-[130px] sm:w-[150px] md:w-[160px] h-auto" data-node="logo" data-node-type="file" data-node-label="Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046266/seltrix/templates/history-template/history-logo.svg">

      <!-- ================= DESKTOP MENU ================= -->
      <ul class="hidden lg:flex items-center gap-6 lg:gap-10">
        {{#if show_nav_item_1}}
        <li>
          <a href="{{nav_item_1}}" class="nav-link font-['Albert_Sans'] text-[18px] lg:text-[20px] text-white" data-node="nav_item_1" data-node-type="page_links" data-node-default="home">
            <span data-node="nav_item_1_text" data-node-type="text" data-node-default="Home">
              {{nav_item_1_text}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_nav_item_2}}
        <li>
          <a href="{{nav_item_2}}" class="nav-link font-['Albert_Sans'] text-[18px] lg:text-[20px] text-white" data-node="nav_item_2" data-node-type="page_links" data-node-default="destinations">
            <span data-node="nav_item_2_text" data-node-type="text" data-node-default="Destinations">
              {{nav_item_2_text}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_nav_item_3}}
        <li>
          <a href="{{nav_item_3}}" class="nav-link font-['Albert_Sans'] text-[18px] lg:text-[20px] text-white" data-node="nav_item_3" data-node-type="page_links" data-node-default="tour-packs">
            <span data-node="nav_item_3_text" data-node-type="text" data-node-default="Tour Packs">
              {{nav_item_3_text}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_nav_item_4}}
        <li>
          <a href="{{nav_item_4}}" class="nav-link font-['Albert_Sans'] text-[18px] lg:text-[20px] text-white" data-node="nav_item_4" data-node-type="page_links" data-node-default="contact-us">
            <span data-node="nav_item_4_text" data-node-type="text" data-node-default="Contact Us">
              {{nav_item_4_text}}
            </span>
          </a>
        </li>
        {{/if}}
      </ul>

      <!-- ================= DESKTOP CTA ================= -->
      {{#if show_nav_cta}}
      <a href="{{nav_cta}}" class="hidden lg:flex items-center justify-center bg-white text-black font-['Albert_Sans'] font-semibold text-[18px] lg:text-[20px] px-5 py-3 lg:px-6 lg:py-4 w-[160px] lg:w-[178px]" data-node="nav_cta" data-node-type="page_links" data-node-default="tour-packs">
        <span data-node="nav_cta_text" data-node-type="text" data-node-default="Explore Egypt"> {{nav_cta_text}} </span>
      </a>
      {{/if}}

      <!-- MOBILE TOGGLE -->
      <button id="menuToggleBtn" class="lg:hidden text-white" aria-label="Toggle Menu">
        <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </nav>

    <!-- ================= MOBILE MENU ================= -->
    <div id="mobileMenu" class="lg:hidden glass-header rounded-[16px] overflow-hidden max-h-0 transition-all duration-500">
      <ul class="flex flex-col items-center gap-6 py-6">
        {{#if show_m_nav_item_1}}
        <li>
          <a href="{{m_nav_item_1}}" class="mobile-link font-['Albert_Sans'] text-[20px] text-white" data-node="m_nav_item_1" data-node-type="page_links" data-node-default="home">
            <span data-node="m_nav_item_1_text" data-node-type="text" data-node-default="Home">
              {{m_nav_item_1_text}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_m_nav_item_2}}
        <li>
          <a href="{{m_nav_item_2}}" class="mobile-link font-['Albert_Sans'] text-[20px] text-white" data-node="m_nav_item_2" data-node-type="page_links" data-node-default="destinations">
            <span data-node="m_nav_item_2_text" data-node-type="text" data-node-default="Destinations">
              {{m_nav_item_2_text}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_m_nav_item_3}}
        <li>
          <a href="{{m_nav_item_3}}" class="mobile-link font-['Albert_Sans'] text-[20px] text-white" data-node="m_nav_item_3" data-node-type="page_links" data-node-default="tour-packs">
            <span data-node="m_nav_item_3_text" data-node-type="text" data-node-default="Tour Packs">
              {{m_nav_item_3_text}}
            </span>
          </a>
        </li>
        {{/if}} {{#if show_m_nav_item_4}}
        <li>
          <a href="{{m_nav_item_4}}" class="mobile-link font-['Albert_Sans'] text-[20px] text-white" data-node="m_nav_item_4" data-node-type="page_links" data-node-default="contact-us">
            <span data-node="m_nav_item_4_text" data-node-type="text" data-node-default="Contact Us">
              {{m_nav_item_4_text}}
            </span>
          </a>
        </li>
        {{/if}}

        <!-- MOBILE CTA -->
        {{#if show_m_nav_cta}}
        <li class="pt-4">
          <a href="{{m_nav_cta}}" class="flex items-center justify-center bg-black text-white font-['Albert_Sans'] font-semibold text-[20px] rounded-[12px] px-6 py-4 w-[220px]" data-node="m_nav_cta" data-node-type="page_links" data-node-default="contact-us">
            <span data-node="m_nav_cta_text" data-node-type="text" data-node-default="Explore Egypt">
              {{m_nav_cta_text}}
            </span>
          </a>
        </li>
        {{/if}}
      </ul>
    </div>
  </div>

  <!-- TOGGLE SCRIPT -->
  
</header>