<html><head></head><body><header class="w-full relative top-0 left-0 z-50 bg-black" data-component-type="Navigation" data-component-slug="portfolio-template-header">
  <div class="w-full px-4 md:px-10 lg:px-24 py-6 md:py-8 flex items-center justify-between">
    <!-- LOGO -->
    <img src="{{logo}}" class="w-12 h-12" data-node="logo" data-node-type="file" data-node-label="Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362105/seltrix/templates/portfolio-template/Logo.svg">

    <!-- DESKTOP NAV -->
    <nav class="hidden md:flex items-center gap-5 lg:gap-12">
      {{#if show_nav_item_1}}
      <a href="{{nav_item_1}}" class="font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300" data-node="nav_item_1" data-node-type="page_links" data-node-label="Nav Link 1" data-node-default="Home">
        <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>
      {{/if}} {{#if show_nav_item_2}}
      <a href="{{nav_item_2}}" class="font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300" data-node="nav_item_2" data-node-type="page_links" data-node-label="Nav Link 2" data-node-default="Services">
        <span data-node="nav_item_2_text" data-node-type="text" data-node-label="Nav Link 2 Text" data-node-default="Services">{{nav_item_2_text}}</span>
      </a>
      {{/if}} {{#if show_nav_item_3}}
      <a href="{{nav_item_3}}" class="font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300" data-node="nav_item_3" data-node-type="page_links" data-node-label="Nav Link 3" data-node-default="About Us">
        <span data-node="nav_item_3_text" data-node-type="text" data-node-label="Nav Link 3 Text" data-node-default="About Us">{{nav_item_3_text}}</span>
      </a>
      {{/if}} {{#if show_nav_item_4}}
      <a href="{{nav_item_4}}" class="font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300" data-node="nav_item_4" data-node-type="page_links" data-node-label="Nav Link 4" data-node-default="Our Works">
        <span data-node="nav_item_4_text" data-node-type="text" data-node-label="Nav Link 4 Text" data-node-default="Our Works">{{nav_item_4_text}}</span>
      </a>
      {{/if}} {{#if show_nav_item_5}}
      <a href="{{nav_item_5}}" class="font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-normal leading-[100%] text-[#676767] hover:text-white transition-colors duration-300" data-node="nav_item_5" data-node-type="page_links" data-node-label="Nav Link 5" data-node-default="#">
        <span data-node="nav_item_5_text" data-node-type="text" data-node-label="Nav Link 5 Text" data-node-default="Blogs">{{nav_item_5_text}}</span>
      </a>
      {{/if}}
    </nav>

    <!-- CTA BUTTON -->
    {{#if show_cta_button}}
    <a class="hidden md:flex items-center justify-center bg-[#d3ff5b] py-2.5 px-4 w-[133px] h-11 rounded-xl font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] text-black hover:opacity-85 transition-opacity duration-300" href="{{cta_button}}" data-node="cta_button" data-node-type="page_links" data-node-label="CTA Button" data-node-default="#">
      <span data-node="cta_button_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Book a Call">{{cta_button_text}}</span>
    </a>
    {{/if}}

    <!-- MOBILE TOGGLE -->
    <button id="menuToggle" class="md:hidden text-white text-3xl">☰</button>
  </div>

  <!-- MOBILE MENU -->
  <div id="mobileMenu" class="absolute top-0 left-0 z-50 inset-0 w-full h-screen bg-black/[0.88] backdrop-blur-[8px] hidden z-[9999] flex-col justify-center items-center">
    <button id="closeMenu" class="absolute top-10 right-10 text-[38px] text-white bg-transparent border-none">✕</button>

    <div class="flex flex-col items-center gap-7">
      {{#if show_mobile_nav_item_1}}
      <a href="{{mobile_nav_item_1}}" class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_1" data-node-type="page_links" data-node-label="Mobile Nav Link 1" data-node-default="#">
        <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 href="{{mobile_nav_item_2}}" class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_2" data-node-type="page_links" data-node-label="Mobile Nav Link 2" data-node-default="#">
        <span data-node="mobile_nav_item_2_text" data-node-type="text" data-node-label="Mobile Nav Link 2 Text" data-node-default="Services">{{mobile_nav_item_2_text}}</span>
      </a>
      {{/if}} {{#if show_mobile_nav_item_3}}
      <a href="{{mobile_nav_item_3}}" class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_3" data-node-type="page_links" data-node-label="Mobile Nav Link 3" data-node-default="#">
        <span data-node="mobile_nav_item_3_text" data-node-type="text" data-node-label="Mobile Nav Link 3 Text" data-node-default="About Us">{{mobile_nav_item_3_text}}</span>
      </a>
      {{/if}} {{#if show_mobile_nav_item_4}}
      <a href="{{mobile_nav_item_4}}" class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_4" data-node-type="page_links" data-node-label="Mobile Nav Link 4" data-node-default="#">
        <span data-node="mobile_nav_item_4_text" data-node-type="text" data-node-label="Mobile Nav Link 4 Text" data-node-default="Our Works">{{mobile_nav_item_4_text}}</span>
      </a>
      {{/if}} {{#if show_mobile_nav_item_5}}
      <a href="{{mobile_nav_item_5}}" class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[24px] text-white py-2.5 px-10 w-60 text-center rounded-lg transition-all duration-200 hover:bg-white/[0.15]" data-node="mobile_nav_item_5" data-node-type="page_links" data-node-label="Mobile Nav Link 5" data-node-default="#">
        <span data-node="mobile_nav_item_5_text" data-node-type="text" data-node-label="Mobile Nav Link 5 Text" data-node-default="Blogs">{{mobile_nav_item_5_text}}</span>
      </a>
      {{/if}} {{#if show_mobile_button}}
      <a href="{{mobile_button}}" class="mt-5 py-4 px-10 border border-white text-white font-['Cabin'] text-[16px] sm:text-[18px] md:text-[20px] rounded-[10px]" data-node="mobile_button" data-node-type="page_links" data-node-label="Mobile CTA Button" data-node-default="#">
        <span data-node="mobile_button_text" data-node-type="text" data-node-label="Mobile CTA Text" data-node-default="Book a Call">{{mobile_button_text}}</span>
      </a>
      {{/if}}
    </div>
  </div>

  
</header></body></html>