<section class="bg-[#FBF8F3] py-20" data-component-type="Content" data-component-slug="ss-tourism-template-everything_you_need">

  <div class="max-w-[90%] mx-auto px-6">

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

      <h2 class="text-[#193A3F] text-3xl md:text-4xl lg:text-5xl font-serif mb-4" data-node="services_title" data-node-type="text" data-node-label="Services Section Title" data-node-default="Everything You Need for a Perfect Japan Experience.">
        {{services_title}}
      </h2>

      <p class="text-[#7E7E7E] text-base md:text-lg" data-node="services_description" data-node-type="text" data-node-label="Services Section Description" data-node-default="We curate every trip with precision, ensuring you explore Japan’s highlights without the stress of planning.">
        {{services_description}}
      </p>

    </div>

    <!-- Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Card 1 -->
      <div class="group">

        <div class="overflow-hidden mb-4">
          <img src="{{service_1_image}}" data-node="service_1_image" data-node-type="file" data-node-label="Service 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739980/seltrix/templates/ss-tourism-template/service-1.png" alt="Service Image" class="w-full lg:h-[280px] h-[200px] object-cover transition-transform duration-500 group-hover:scale-105">
        </div>

        <h3 class="text-[#193A3F] font-medium mb-2" data-node="service_1_title" data-node-type="text" data-node-label="Service 1 Title" data-node-default="Flight & Hotel Booking">
          {{service_1_title}}
        </h3>

        <p class="text-sm text-[#7E7E7E]" data-node="service_1_desc" data-node-type="text" data-node-label="Service 1 Description" data-node-default="Best deals on flights, luxury stays, villas, and authentic ryokans.">
          {{service_1_desc}}
        </p>

      </div>

      <!-- Card 2 -->
      <div class="group">

        <div class="overflow-hidden mb-4">
          <img src="{{service_2_image}}" data-node="service_2_image" data-node-type="file" data-node-label="Service 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739982/seltrix/templates/ss-tourism-template/service-2.png" alt="Service Image" class="w-full lg:h-[280px] h-[200px] object-cover transition-transform duration-500 group-hover:scale-105">
        </div>

        <h3 class="text-[#193A3F] font-medium mb-2" data-node="service_2_title" data-node-type="text" data-node-label="Service 2 Title" data-node-default="Custom Itineraries">
          {{service_2_title}}
        </h3>

        <p class="text-sm text-[#7E7E7E]" data-node="service_2_desc" data-node-type="text" data-node-label="Service 2 Description" data-node-default="Designed around your interests — culture, food, nature, or adventure.">
          {{service_2_desc}}
        </p>

      </div>

      <!-- Card 3 -->
      <div class="group">

        <div class="overflow-hidden mb-4">
          <img src="{{service_3_image}}" data-node="service_3_image" data-node-type="file" data-node-label="Service 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739983/seltrix/templates/ss-tourism-template/service-3.png" alt="Service Image" class="w-full lg:h-[280px] h-[200px] object-cover transition-transform duration-500 group-hover:scale-105">
        </div>

        <h3 class="text-[#193A3F] font-medium mb-2" data-node="service_3_title" data-node-type="text" data-node-label="Service 3 Title" data-node-default="Guided Tours">
          {{service_3_title}}
        </h3>

        <p class="text-sm text-[#7E7E7E]" data-node="service_3_desc" data-node-type="text" data-node-label="Service 3 Description" data-node-default="City tours, heritage walks, food experiences, theme parks, and more.">
          {{service_3_desc}}
        </p>

      </div>

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