<section data-component-type="Content" data-component-slug="real-estate-template-Faq">
  <section class="flex justify-center relative bg-[#F6FBFF]">
    <section class="w-[90%]">
      <section class="px-6 lg:px-10 py-10 grid lg:grid-cols-2 gap-12 items-start">
        <!-- 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="Frequently Asked Questions">
            {{Faq}}
          </h2>
          <p class="text-[#6C6C6C] mt-4 lg:text-[20px]" data-node="Faq_desc" data-node-type="text" data-node-default="Your questions, answered for a smoother home-buying experience.">
            {{Faq_desc}}
          </p>
        </div>

        <!-- RIGHT -->
        <div class="accordion-group" data-accordion="default-accordion">
          <!-- ITEM -->
          <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
            <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=" How do I book a site visit?">
                {{Question1}}
              </h5>
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767359335/seltrix/templates/real-estate-template/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]" data-node="Answer1" data-node-type="text" data-node-default="You can schedule a visit by contacting our team or booking directly through the website’s ‘Visit Now’ option.">
              {{Answer1}}
            </div>
          </div>

          <!-- ITEM -->
          <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
            <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="Do you offer loan assistance?">
                {{Question2}}
              </h5>
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767359335/seltrix/templates/real-estate-template/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]" data-node="Answer2" data-node-type="text" data-node-default="You can schedule a visit by contacting our team or booking directly through the website’s ‘Visit Now’ option.">
              {{Answer2}}
            </div>
          </div>

          <!-- ITEM -->
          <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
            <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="Are the properties RERA-approved?">
                {{Question3}}
              </h5>
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767359335/seltrix/templates/real-estate-template/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]" data-node="Answer3" data-node-type="text" data-node-default=" You can schedule a visit by contacting our team or booking directly through the website’s ‘Visit Now’ option..">
              {{Answer3}}
            </div>
          </div>

          <!-- ITEM -->
          <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
            <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="What amenities are included?">
                {{Question4}}
              </h5>
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767359335/seltrix/templates/real-estate-template/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]" data-node="Answer4" data-node-type="text" data-node-default="  You can schedule a visit by contacting our team or booking directly through the website’s ‘Visit Now’ option..">
              {{Answer4}}
            </div>
          </div>

          <!-- ITEM -->
          <div class="accordion border p-4 my-5 rounded-[20px] bg-white">
            <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 customize the interiors?">
                {{Question5}}
              </h5>
              <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767359335/seltrix/templates/real-estate-template/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]" data-node="Answer5" data-node-type="text" data-node-default="You can schedule a visit by contacting our team or booking directly through the website’s ‘Visit Now’ option.">
              {{Answer5}}
            </div>
          </div>
        </div>
      </section>
    </section>
  </section>
</section>