<section class="w-full bg-black max-w-[90%] mx-auto py-24 md:py-36 lg:py-40" data-component-type="Content" data-component-slug="portfolio-template-home-faq">
  <!-- Hidden dynamic icons -->
  <img src="{{faq_icon_down}}" data-node="faq_icon_down" data-node-type="file" data-node-label="FAQ Arrow Down Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362129/seltrix/templates/portfolio-template/arrow-down.svg" style="display: none">

  <img src="{{faq_icon_up}}" data-node="faq_icon_up" data-node-type="file" data-node-label="FAQ Arrow Up Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362132/seltrix/templates/portfolio-template/arrow-up.svg" style="display: none">

  <!-- Heading -->
  <h2 class="font-['Cabin'] text-[28px] sm:text-[36px] md:text-[44px] lg:text-[56px] font-medium text-white text-center" data-node="faq_title" data-node-type="text" data-node-label="FAQ Title" data-node-default="Frequently asked Question">
    {{faq_title}}
  </h2>

  <p class="mt-4 font-['Cabin'] text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] font-normal text-center text-[#7E7E7E] max-w-[700px] mx-auto" data-node="faq_subtitle" data-node-type="text" data-node-label="FAQ Subtitle" data-node-default="Questions worth asking. answers, no sales spin.">
    {{faq_subtitle}}
  </p>

  <!-- FAQ LIST -->
  <div class="w-full max-w-[900px] mx-auto mt-16 space-y-6">
    <!-- FAQ 1 -->
    <div class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]">
      <div class="flex justify-between items-center">
        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white" data-node="faq_1_question" data-node-type="text" data-node-label="FAQ 1 Question" data-node-default="Do you work with specific industries?">
          {{faq_1_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300">
      </div>

      <p class="faq-answer mt-4 font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] text-[#7E7E7E] leading-[140%] hidden max-w-[900px]" data-node="faq_1_answer" data-node-type="textarea" data-node-label="FAQ 1 Answer" data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.">
        {{faq_1_answer}}
      </p>
    </div>

    <!-- FAQ 2 -->
    <div class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]">
      <div class="flex justify-between items-center">
        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white" data-node="faq_2_question" data-node-type="text" data-node-label="FAQ 2 Question" data-node-default="How long before we see results?">
          {{faq_2_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300">
      </div>

      <p class="faq-answer mt-4 font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] text-[#7E7E7E] leading-[140%] hidden max-w-[900px]" data-node="faq_2_answer" data-node-type="textarea" data-node-label="FAQ 2 Answer" data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.">
        {{faq_2_answer}}
      </p>
    </div>

    <!-- FAQ 3 -->
    <div class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]">
      <div class="flex justify-between items-center">
        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white" data-node="faq_3_question" data-node-type="text" data-node-label="FAQ 3 Question" data-node-default="Do you offer only strategy or execution too?">
          {{faq_3_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300">
      </div>

      <p class="faq-answer mt-4 font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] text-[#7E7E7E] leading-[140%] hidden max-w-[900px]" data-node="faq_3_answer" data-node-type="textarea" data-node-label="FAQ 3 Answer" data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.">
        {{faq_3_answer}}
      </p>
    </div>

    <!-- FAQ 4 -->
    <div class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]">
      <div class="flex justify-between items-center">
        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white" data-node="faq_4_question" data-node-type="text" data-node-label="FAQ 4 Question" data-node-default="How do you measure success?">
          {{faq_4_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300">
      </div>

      <p class="faq-answer mt-4 font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] text-[#7E7E7E] leading-[140%] hidden max-w-[900px]" data-node="faq_4_answer" data-node-type="textarea" data-node-label="FAQ 4 Answer" data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.">
        {{faq_4_answer}}
      </p>
    </div>

    <!-- FAQ 5 -->
    <div class="faq-item w-full p-6 md:p-8 rounded-2xl bg-white/[0.03] backdrop-blur-[18px] border border-white/[0.15] shadow-[0_0_25px_rgba(0,0,0,0.5),inset_0_0_15px_rgba(0,0,0,0.55),inset_0_0_6px_rgba(255,255,255,0.04)] cursor-pointer transition-all duration-300 hover:bg-white/[0.05]">
      <div class="flex justify-between items-center">
        <div class="font-['Cabin'] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[32px] font-normal text-white" data-node="faq_5_question" data-node-type="text" data-node-label="FAQ 5 Question" data-node-default="Can you work with in-house teams?">
          {{faq_5_question}}
        </div>

        <img src="{{faq_icon_down}}" class="faq-arrow w-6 h-6 transition-transform duration-300">
      </div>

      <p class="faq-answer mt-4 font-['Cabin'] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] text-[#7E7E7E] leading-[140%] hidden max-w-[900px]" data-node="faq_5_answer" data-node-type="textarea" data-node-label="FAQ 5 Answer" data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius.">
        {{faq_5_answer}}
      </p>
    </div>
  </div>

  <!-- FAQ SCRIPT -->
  
</section>