<footer data-component-type="Footer" class="w-full bg-black text-white pt-20 pb-10 border-t border-[#313131]" data-component-slug="portfolio-template-footer">
  <!-- OUTER CONTAINER -->
  <div class="w-full px-4 md:px-12 lg:px-24">
    <!-- CENTERED INNER WRAPPER -->
    <div class="max-w-[1650px] mx-auto">
      <!-- ============ LOGO ============ -->
      <div class="mb-10 flex justify-start">
        <img src="{{footer_logo}}" class="w-[78px] block" style="margin-right: auto; margin-left: 0!important;" data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362105/seltrix/templates/portfolio-template/Logo.svg">
      </div>

      <!-- ============ NAVIGATION GRID ============ -->
      <!-- Mobile: 1 col | Tablet (md-lg): 3 cols + Newsletter full width | Desktop (xl+): flex row -->
      <div class="grid grid-cols-1 md:grid-cols-3 xl:flex xl:justify-between gap-10 xl:gap-16 w-full text-left">
        <!-- Quick Links -->
        <div class="order-1">
          <h3 class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-6" data-node="footer_quick_links_title" data-node-type="text" data-node-default="Quick Links">
            {{footer_quick_links_title}}
          </h3>

          <ul class="space-y-4">
            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_ql_link_1" data-node-type="page_links" data-node-default="home" data-node-label="Quick Link 1 Link" href="{{footer_ql_link_1}}"><span data-node="footer_ql_txt_1" data-node-type="text" data-node-default="Home" data-node-label="Quick Link 1 Text">{{footer_ql_txt_1}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_ql_link_2" data-node-type="page_links" data-node-default="Services" href="{{footer_ql_link_2}}"><span data-node="footer_ql_txt_2" data-node-type="text" data-node-default="Services" data-node-label="Quick Link 2 Text">{{footer_ql_txt_2}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_ql_link_3" data-node-type="page_links" data-node-default="About Us" href="{{footer_ql_link_3}}"><span data-node="footer_ql_txt_3" data-node-type="text" data-node-default="About Us" data-node-label="Quick Link 3 Text">{{footer_ql_txt_3}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_ql_link_4" data-node-type="page_links" data-node-default="Works" href="{{footer_ql_link_4}}"><span data-node="footer_ql_txt_4" data-node-type="text" data-node-default="Works" data-node-label="Quick Link 4 Text">{{footer_ql_txt_4}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_ql_link_5" data-node-type="page_links" data-node-default="Blogs" href="{{footer_ql_link_5}}"><span data-node="footer_ql_txt_5" data-node-type="text" data-node-default="Blogs" data-node-label="Quick Link 5 Text">{{footer_ql_txt_5}}</span></a>
            </li>
          </ul>
        </div>

        <!-- Resources -->
        <div class="order-2">
          <h3 class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-6" data-node="footer_resources_title" data-node-type="text" data-node-default="Resources" data-node-label="Resources Title">
            {{footer_resources_title}}
          </h3>

          <ul class="space-y-4">
            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_resource_case" data-node-type="page_links" data-node-default="Case Studies" href="{{footer_resource_case}}"><span data-node="footer_resource_case_txt" data-node-type="text" data-node-default="Case Studies" data-node-label="Resource Case Text">{{footer_resource_case_txt}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_resource_testimonials" data-node-type="page_links" data-node-default="Testimonials" href="{{footer_resource_testimonials}}"><span data-node="footer_resource_testimonials_txt" data-node-type="text" data-node-default="Testimonials" data-node-label="Resource Testimonials Text">{{footer_resource_testimonials_txt}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_resource_insights" data-node-type="page_links" data-node-default="Insights" href="{{footer_resource_insights}}"><span data-node="footer_resource_insights_txt" data-node-type="text" data-node-default="Insights" data-node-label="Resource Insights Text">{{footer_resource_insights_txt}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_resource_results" data-node-type="page_links" data-node-default="Results" href="{{footer_resource_results}}"><span data-node="footer_resource_results_txt" data-node-type="text" data-node-default="Results" data-node-label="Resource Results Text">{{footer_resource_results_txt}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_resource_courses" data-node-type="page_links" data-node-default="Courses" href="{{footer_resource_courses}}"><span data-node="footer_resource_courses_txt" data-node-type="text" data-node-default="Courses" data-node-label="Resource Courses Text">{{footer_resource_courses_txt}}</span></a>
            </li>
          </ul>
        </div>

        <!-- Solutions -->
        <div class="order-3">
          <h3 class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-6" data-node="footer_solutions_title" data-node-type="text" data-node-default="Solutions" data-node-label="Solutions Title">
            {{footer_solutions_title}}
          </h3>

          <ul class="space-y-4">
            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_solution_brand" data-node-type="page_links" data-node-default="Brand Strategy" href="{{footer_solution_brand}}"><span data-node="footer_solution_brand_txt" data-node-type="text" data-node-default="Brand Strategy" data-node-label="Solution Brand Text">{{footer_solution_brand_txt}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_solution_copy" data-node-type="page_links" data-node-default="Web Copywriting" href="{{footer_solution_copy}}"><span data-node="footer_solution_copy_txt" data-node-type="text" data-node-default="Web Copywriting" data-node-label="Solution Copy Text">{{footer_solution_copy_txt}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_solution_content" data-node-type="page_links" data-node-default="Content Marketing" href="{{footer_solution_content}}"><span data-node="footer_solution_content_txt" data-node-type="text" data-node-default="Content Marketing" data-node-label="Solution Content Text">{{footer_solution_content_txt}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_solution_performance" data-node-type="page_links" data-node-default="Performance Marketing" href="{{footer_solution_performance}}"><span data-node="footer_solution_performance_txt" data-node-type="text" data-node-default="Performance Marketing" data-node-label="Solution Performance Text">{{footer_solution_performance_txt}}</span></a>
            </li>

            <li>
              <a class="text-[#7E7E7E] text-[16px] md:text-[20px] lg:text-[24px]" data-node="footer_solution_social" data-node-type="page_links" data-node-default="Social Media Strategy" href="{{footer_solution_social}}"><span data-node="footer_solution_social_txt" data-node-type="text" data-node-default="Social Media Strategy" data-node-label="Solution Social Text">{{footer_solution_social_txt}}</span></a>
            </li>
          </ul>
        </div>

        <!-- Newsletter - full width on tablet, constrained width on desktop -->
        <div class="order-4 md:col-span-3 xl:max-w-[400px] xl:flex-shrink-0">
          <h3 class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-6">
            <span data-node="footer_newsletter_title_txt" data-node-type="text" data-node-default="Subscribe to Newsletter" data-node-label="Newsletter Title Text">{{footer_newsletter_title_txt}}</span>
          </h3>

          <div class="flex w-full mb-8">
            <input type="email" placeholder="{{footer_email_placeholder}}" class="bg-[#0E0E0E] text-white text-[16px] md:text-[20px] lg:text-[24px] font-['Cabin'] px-3 md:px-4 py-3 md:py-4 rounded-l-[14px] md:rounded-l-[16px] w-full bg-gradient-to-b from-white/5 to-transparent border border-white/20 backdrop-blur-[10px] placeholder-white/70 outline-none h-12 md:h-auto" data-node="footer_email_placeholder" data-node-type="text" data-node-default="Enter your email here" data-node-label="Newsletter Email Placeholder">

            <button class="bg-[#D3FF5B] text-black text-[16px] md:text-[20px] lg:text-[24px] font-['Cabin'] px-3 md:px-[19px] py-3 md:py-[16px] rounded-r-[14px] md:rounded-r-[16px] h-12 md:h-auto whitespace-nowrap">
              <span data-node="footer_submit_btn_txt" data-node-type="text" data-node-default="Submit" data-node-label="Newsletter Submit Button Text">{{footer_submit_btn_txt}}</span>
            </button>
          </div>

          <h3 class="font-['Cabin'] text-[24px] md:text-[28px] lg:text-[32px] mb-4">
            <span data-node="footer_follow_us_title_txt" data-node-type="text" data-node-default="Follow us on" data-node-label="Follow Us Title Text">{{footer_follow_us_title_txt}}</span>
          </h3>

          <div class="flex items-center gap-4 md:gap-6 justify-start mt-3 lg:mt-0">
            <img src="{{footer_icon_twitter}}" class="w-[30px] md:w-[38px] lg:w-[45px]" data-node="footer_icon_twitter" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362147/seltrix/templates/portfolio-template/icon%20twitter.svg" data-node-label="Twitter Icon">

            <img src="{{footer_icon_facebook}}" class="w-[30px] md:w-[38px] lg:w-[45px]" data-node="footer_icon_facebook" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362141/seltrix/templates/portfolio-template/icon%20facebook.svg" data-node-label="Facebook Icon">

            <img src="{{footer_icon_pinterest}}" class="w-[30px] md:w-[38px] lg:w-[45px]" data-node="footer_icon_pinterest" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362145/seltrix/templates/portfolio-template/icon%20pinterest.svg" data-node-label="Pinterest Icon">

            <img src="{{footer_icon_discord}}" class="w-[30px] md:w-[38px] lg:w-[45px]" data-node="footer_icon_discord" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362138/seltrix/templates/portfolio-template/icon%20discord.svg" data-node-label="Discord Icon">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- COPYRIGHT WRAPPER -->
  <div class="w-full">
    <!-- INSET BORDER CONTAINER -->
    <div class="mx-4 md:mx-12 lg:mx-24">
      <!-- COPYRIGHT -->
      <div class="w-full border-t border-white/20 mt-10 lg:mt-16 pt-5 lg:pt-6 text-center">
        <p class="text-[16px] md:text-[20px] lg:text-[24px] text-white">
          <span data-node="footer_copyright_txt" data-node-type="text" data-node-default="Logo Copyright 2025" data-node-label="Copyright Text">{{footer_copyright_txt}}</span>
        </p>
      </div>
    </div>
  </div>
</footer>