<section data-component-type="Content" data-component-slug="ss-interior-kitchen-Faq">
<section class="flex justify-center relative bg-white">
  <section class="w-[90%]">
    <section class="px-6 lg:px-10 py-10 grid lg:grid-cols-2 gap-12 items-center">

      <!-- LEFT -->
      <div class="lg:max-w-[70%] max-w-[100%]">
        <h2 class="lg:text-[50px] text-[25px] font-bold text-dark" data-node="Faq" data-node-type="text" data-node-default="Got Questions? We’ve Got You Covered.">
          {{Faq}}
        </h2>
        <p class="text-[#6C6C6C] mt-4 lg:text-[20px]" data-node="Faq_desc" data-node-type="text" data-node-default="Quick answers to help you choose the right appliances for your home.">
          {{Faq_desc}}
        </p>
      </div>

      <!-- RIGHT -->
      <div class="accordion-group">

        <!-- ITEM -->
        <div class="accordion border-b border-[#C4C4C4] p-4 my-5  ">
          <button class="accordion-toggle flex justify-between gap-[30px] items-center w-full py-2">
            <h5 class="lg:text-[22px] md:text-[18px] text-start text-[16px]  text-18px font-bold text-dark" data-node="Question1" data-node-type="text" data-node-default=" Do you offer installation services?">
             {{Question1}}
            </h5>
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767779812/seltrix/templates/ss-interior-kitchen/arrow-down.png" class="accordion-arrow w-5 h-5 transition-transform duration-300">
          </button>
          <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
           <span data-node="Answer1" data-node-type="text" data-node-default="Automation eliminates repetitive work, reduces errors, and helps your team deliver faster.">
               {{Answer1}}
           </span>
          </div>
        </div>

        <!-- ITEM -->
        <div class="accordion border-b border-[#C4C4C4] p-4 my-5 ">
          <button class="accordion-toggle flex justify-between items-center gap-[30px] w-full py-2">
             <h5 class="lg:text-[22px] md:text-[18px] text-[16px] text-start  text-18px font-bold text-dark" data-node="Question2" data-node-type="text" data-node-default="What warranty comes with the products?">
             {{Question2}}
            </h5>
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767779812/seltrix/templates/ss-interior-kitchen/arrow-down.png" class="accordion-arrow w-5 h-5 transition-transform duration-300">
            </button>
          <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
           <span data-node="Answer2" data-node-type="text" data-node-default="We ensure transparency with secure & user-friendly content management.">
               {{Answer2}} 
           </span> 
          </div>
        </div>

        <!-- ITEM -->
        <div class="accordion border-b border-[#C4C4C4] p-4 my-5">
          <button class="accordion-toggle flex justify-between w-full gap-[30px]  items-center py-2">
             <h5 class="lg:text-[22px] md:text-[18px] text-[16px] text-start text-18px font-bold text-dark" data-node="Question3" data-node-type="text" data-node-default="Is this tool suitable for small agencies?">
             {{Question3}}
            </h5>
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767779812/seltrix/templates/ss-interior-kitchen/arrow-down.png" class="accordion-arrow w-5 h-5 transition-transform duration-300">
          </button>
          <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
              <span data-node="Answer3" data-node-type="text" data-node-default=" Yes, it is suitable for agencies of all sizes.">
             {{Answer3}}
              </span>
          </div>
        </div>

        <!-- ITEM -->
        <div class="accordion border-b border-[#C4C4C4] p-4 my-5">
          <button class="accordion-toggle flex justify-between items-center gap-[30px] w-full py-2">
            <h5 class="lg:text-[22px] md:text-[18px] text-[16px] font-bold text-dark text-start" data-node="Question4" data-node-type="text" data-node-default="Do you offer onboarding support?">
             {{Question4}}
            </h5>
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767779812/seltrix/templates/ss-interior-kitchen/arrow-down.png" class="accordion-arrow w-5 h-5 transition-transform duration-300">
          </button>
          <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
           
            <span data-node="Answer4" data-node-type="text" data-node-default="  Yes! We provide live onboarding and training sessions.">
           {{Answer4}}
            </span>
          </div>
        </div>

        <!-- ITEM -->
        <div class="accordion border-b border-[#C4C4C4] p-4 my-5">
          <button class="accordion-toggle flex justify-between  items-center gap-[30px] w-full py-2">
             <h5 class="lg:text-[22px] md:text-[18px] text-[16px] text-start font-bold text-dark" data-node="Question5" data-node-type="text" data-node-default="Can I integrate it with my existing tools?">
             {{Question5}}
            </h5>
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767779812/seltrix/templates/ss-interior-kitchen/arrow-down.png" class="accordion-arrow w-5 h-5 transition-transform duration-300">
          </button>
           <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 text-[#6C6C6C]">
            <span data-node="Answer5" data-node-type="text" data-node-default="Yes — supports CRM, automation tools & third-party apps.">
               {{Answer5}}
            </span>
          </div>
        </div>

      </div>
    </section>
  </section>
</section>
</section>