<section class="bg-[#FBF8F3] py-16 sm:py-20" data-component-type="Content" data-component-slug="ss-tourism-template-travel_info">
    <div class="max-w-[90%] mx-auto px-4 ">

        <!-- Section Label -->
        <div class="flex items-center justify-start gap-3 ">
            <p class="text-sm uppercase tracking-wide text-[#193A3F] flex items-center gap-2" data-node="section_label" data-node-type="text" data-node-label="Section Label" data-node-default="Essential Travel Information">
        <b>{{section_label}}</b>
      </p>
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1766740016/seltrix/templates/ss-tourism-template/travel_info.png" class="w-[5%] md:w-[35%]">
        </div>
        <!-- Accordion -->
         <!-- Accordion -->
    <div class="divide-y divide-[#C7D2D1]">

      <!-- Accordion Item 1 -->
      <div class="accordion-item">
        <button class="accordion-header w-full flex justify-between items-center py-6 text-left">

          <h3 class="font-serif text-xl sm:text-2xl text-[#193A3F] max-w-[230px] md:max-w-full" data-node="faq_1_question" data-node-type="text" data-node-label="FAQ 1 Question" data-node-default="What is the best time to visit Japan?">
            {{faq_1_question}}
          </h3>

          <span class="accordion-icon w-10 h-10 flex items-center justify-center text-xl text-[#292D32] border-2 border-[#292D32] rounded-full">
            +
          </span>
        </button>

        <div class="accordion-content hidden pb-6 text-[#7E7E7E] max-w-3xl" data-node="faq_1_answer" data-node-type="textarea" data-node-label="FAQ 1 Answer" data-node-default="Spring (March–May) and Autumn (September–November) are ideal for pleasant weather, cherry blossoms, and autumn foliage.">
          {{faq_1_answer}}
        </div>
      </div>

      <!-- Accordion Item 2 -->
      <div class="accordion-item">
        <button class="accordion-header w-full flex justify-between items-center py-6 text-left">

          <h3 class="font-serif text-xl sm:text-2xl text-[#193A3F] max-w-[230px] md:max-w-full" data-node="faq_2_question" data-node-type="text" data-node-label="FAQ 2 Question" data-node-default="Do you provide customized itineraries?">
            {{faq_2_question}}
          </h3>

          <span class="accordion-icon w-10 h-10 flex items-center justify-center text-xl text-[#292D32] border-2 border-[#292D32] rounded-full">
            +
          </span>
        </button>

        <div class="accordion-content hidden pb-6 text-[#7E7E7E] max-w-3xl" data-node="faq_2_answer" data-node-type="textarea" data-node-label="FAQ 2 Answer" data-node-default="Yes, all our itineraries are fully customized based on your interests, travel style, schedule, and budget.">
          {{faq_2_answer}}
        </div>
      </div>

      <!-- Accordion Item 3 -->
      <div class="accordion-item">
        <button class="accordion-header w-full flex justify-between items-center py-6 text-left">

          <h3 class="font-serif text-xl sm:text-2xl text-[#193A3F] max-w-[230px] md:max-w-full" data-node="faq_3_question" data-node-type="text" data-node-label="FAQ 3 Question" data-node-default="Is Japan family-friendly?">
            {{faq_3_question}}
          </h3>

          <span class="accordion-icon w-10 h-10 flex items-center justify-center text-xl text-[#292D32] border-2 border-[#292D32] rounded-full">
            +
          </span>
        </button>

        <div class="accordion-content hidden pb-6 text-[#7E7E7E] max-w-3xl" data-node="faq_3_answer" data-node-type="textarea" data-node-label="FAQ 3 Answer" data-node-default="Absolutely. Japan is safe, clean, and offers many attractions suitable for families, including theme parks and cultural experiences.">
          {{faq_3_answer}}
        </div>
      </div>

      <!-- Accordion Item 4 -->
      <div class="accordion-item">
        <button class="accordion-header w-full flex justify-between items-center py-6 text-left">

          <h3 class="font-serif text-xl sm:text-2xl text-[#193A3F] max-w-[230px] md:max-w-full" data-node="faq_4_question" data-node-type="text" data-node-label="FAQ 4 Question" data-node-default="Do you assist with visa support?">
            {{faq_4_question}}
          </h3>

          <span class="accordion-icon w-10 h-10 flex items-center justify-center text-xl text-[#292D32] border-2 border-[#292D32] rounded-full">
            +
          </span>
        </button>

        <div class="accordion-content hidden pb-6 text-[#7E7E7E] max-w-3xl" data-node="faq_4_answer" data-node-type="textarea" data-node-label="FAQ 4 Answer" data-node-default="Yes, we guide you through visa requirements and documentation to make the process smooth and stress-free.">
          {{faq_4_answer}}
        </div>
      </div>

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