<section class="bg-[#FBF8F3] py-20" data-component-type="Content" data-component-slug="ss-tourism-template-our_services">
  <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="https://res.cloudinary.com/duukclzsd/image/upload/v1766739955/seltrix/templates/ss-tourism-template/leftline.png" class="w-[5%] md:w-[35%]">
        <p class="text-sm uppercase tracking-widest text-[#193A3F]  flex justify-center items-center gap-3" data-node="Services_heading" data-node-type="textarea" data-node-label="Services Heading" data-node-default=" Our Services">
       {{Services_heading}}
      </p>

       <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1766739970/seltrix/templates/ss-tourism-template/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" data-node="Services_heading2" data-node-type="textarea" data-node-label="Services Heading2" data-node-default="Everything You Need for a Perfect Japan Experience.">
        {{Services_heading2}}
      </h2>

      <p class="text-[#7E7E7E] text-base sm:text-lg" data-node="Services_desc" data-node-type="textarea" data-node-label="Services description" data-node-default="We bring together the best of Japan—luxury stays, guided tours,
        curated itineraries, and full travel assistance.">
        {{Services_desc}}
      </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="https://res.cloudinary.com/duukclzsd/image/upload/v1766739972/seltrix/templates/ss-tourism-template/s1.png" class="w-10">
          </div>
          <h4 class="font-medium text-lg text-[#193A3F] mb-2" data-node="our_service_1_icon_head" data-node-type="textarea" data-node-label="Services head" data-node-default="Flight & Hotel Booking">
          {{our_service_1_icon_head}}
          </h4>
          <p class="text-[#7E7E7E] text-sm leading-relaxed" data-node="our_service_1_icon_desc" data-node-type="textarea" data-node-label="Services description" data-node-default="Best deals on flights, luxury stays, villas, and authentic ryokans.">
           {{our_service_1_icon_desc}}
          </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="https://res.cloudinary.com/duukclzsd/image/upload/v1766739975/seltrix/templates/ss-tourism-template/s3.png" class="w-10">
          </div>
          <h4 class="font-medium text-lg text-[#193A3F] mb-2" data-node="our_service_3_icon_head3" data-node-type="textarea" data-node-label="Services head3" data-node-default="Guided Tours">
           {{our_service_3_icon_head3}}
          </h4>
          <p class="text-[#7E7E7E] text-sm leading-relaxed" data-node="our_service_3_icon_desc3" data-node-type="textarea" data-node-label="Services description3" data-node-default=" City tours, heritage walks, food experiences,
            theme parks, and more.">
           {{our_service_3_icon_desc3}}
          </p>
        </div>
      </div>

      <!-- CENTER IMAGE -->
      <div class="w-full h-full">
        <img src="{{service_image_1}}" data-node="service_image_1" data-node-type="file" data-node-label="Destination Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739986/seltrix/templates/ss-tourism-template/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="https://res.cloudinary.com/duukclzsd/image/upload/v1766739977/seltrix/templates/ss-tourism-template/s4.png" class="w-10">
          </div>
        
           <h4 class="font-medium text-lg text-[#193A3F] mb-2" data-node="our_service_4_icon_head" data-node-type="textarea" data-node-label="Services head4" data-node-default="Custom Itineraries">
          {{our_service_4_icon_head}}
          </h4>
          <p class="text-[#7E7E7E] text-sm leading-relaxed" data-node="our_service_4_icon_desc" data-node-type="textarea" data-node-label="Services description4" data-node-default="Best deals on flights, luxury stays, villas, and authentic ryokans.">
           {{our_service_4_icon_desc}}
          </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="https://res.cloudinary.com/duukclzsd/image/upload/v1766739973/seltrix/templates/ss-tourism-template/s2.png" class="w-10">
          </div>
          <h4 class="font-medium text-lg text-[#193A3F] mb-2" data-node="our_service_2_icon_head" data-node-type="textarea" data-node-label="Services head2" data-node-default="Travel Assistance">
           {{our_service_2_icon_head}}
          </h4>
          <p class="text-[#7E7E7E] text-sm leading-relaxed" data-node="our_service_2_icon_desc" data-node-type="textarea" data-node-label="Services description2" data-node-default=" Visa support, transport guidance, and
            on-trip help whenever you need it.">
           {{our_service_2_icon_desc}}
          </p>
        </div>
      </div>

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