<section class="bg-[#FBF8F3] py-20"
  data-component-type="Content">
  <div class="max-w-[90%] mx-auto px-4 ">

    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">

        <div class="flex items-center justify-center gap-3 mb-4">
        <img src="../assets/leftline.png" class="w-[5%] md:w-[35%]" />
      <p class="text-sm uppercase tracking-widest text-[#193A3F]  flex justify-center items-center gap-3">
      
        Our Services
       
      </p>

       <img src="../assets/rightline.png" class="w-[5%] md:w-[35%]" />
      </div>

      <h2 class="font-serif text-3xl sm:text-4xl lg:text-5xl text-[#193A3F] mb-6 leading-tight">
        Everything You Need for a Perfect Japan Experience.
      </h2>

      <p class="text-[#7E7E7E] text-base sm:text-lg">
        We bring together the best of Japan—luxury stays, guided tours,
        curated itineraries, and full travel assistance.
      </p>
    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-[1fr_1.3fr_1fr] gap-10 items-start overflow-hidden">

      <!-- LEFT SERVICES -->
      <div class="space-y-8">
        <div class="border border-[#193A3F] p-10">
          <div class="mb-4 text-[#0F3D3E]">
             <img src="{{our_service_1_icon}}"
               data-node="our_service_1_icon"
               data-node-type="file"
               data-node-label="our_service 1 Icon"
               data-node-default="../assets/s1.png"
               class="w-10" />
          </div>
          <h4 class="font-medium text-lg text-[#193A3F] mb-2">
            Flight & Hotel Booking
          </h4>
          <p class="text-[#7E7E7E] text-sm leading-relaxed">
            Best deals on flights, luxury stays, villas,
            and authentic ryokans.
          </p>
        </div>

        <div class="border border-[#193A3F] p-10">
          <div class="mb-4 text-[#0F3D3E]">
               <img src="{{our_service_3_icon}}"
               data-node="our_service_3_icon"
               data-node-type="file"
               data-node-label="our_service 3 Icon"
               data-node-default="../assets/s3.png"
               class="w-10" />
          </div>
          <h4 class="font-medium text-lg text-[#193A3F] mb-2">
            Guided Tours
          </h4>
          <p class="text-[#7E7E7E] text-sm leading-relaxed">
            City tours, heritage walks, food experiences,
            theme parks, and more.
          </p>
        </div>
      </div>

      <!-- CENTER IMAGE -->
      <div class="w-full h-full">
        <img
          src="../assets/service-center.png"
          alt="Japan Temple"
          class="w-full h-full lg:h-[470px] object-cover rounded-sm"
        />
      </div>

      <!-- RIGHT SERVICES -->
      <div class="space-y-8">
        <div class="border border-[#193A3F] p-10">
          <div class="mb-4 text-[#0F3D3E]">
            <!-- icon -->

             <img src="{{our_service_4_icon}}"
               data-node="our_service_4_icon"
               data-node-type="file"
               data-node-label="our_service 4 Icon"
               data-node-default="../assets/s4.png"
               class="w-10" />
            
          </div>
          <h4 class="font-medium text-lg text-[#193A3F] mb-2">
            Custom Itineraries
          </h4>
          <p class="text-[#7E7E7E] text-sm leading-relaxed">
            Designed around your interests—culture,
            food, nature, or adventure.
          </p>
        </div>

        <div class="border border-[#193A3F] p-10">
          <div class="mb-4 text-[#0F3D3E]">
               <img src="{{our_service_2_icon}}"
               data-node="our_service_2_icon"
               data-node-type="file"
               data-node-label="our_service 2 Icon"
               data-node-default="../assets/s2.png"
               class="w-10" />
          </div>
          <h4 class="font-medium text-lg text-[#193A3F] mb-2">
            Travel Assistance
          </h4>
          <p class="text-[#7E7E7E] text-sm leading-relaxed">
            Visa support, transport guidance, and
            on-trip help whenever you need it.
          </p>
        </div>
      </div>

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