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

    <!-- Heading -->
    <div class="text-center max-w-3xl mx-auto mb-14">
      <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 tracking-wide uppercase text-[#193A3F]" data-node="travel_label" data-node-type="text" data-node-label="Section Label" data-node-default="Your Travel Partner">
          {{travel_label}}
        </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-4" data-node="travel_heading" data-node-type="text" data-node-label="Main Heading" data-node-default="We Make Your Japan Trip Simple, Safe, and Truly Personal.">
        {{travel_heading}}
      </h2>

      <!-- Description -->
      <p class="text-sm sm:text-base text-[#7E7E7E] max-w-2xl mx-auto" data-node="travel_description" data-node-type="text" data-node-label="Section Description" data-node-default="We take care of everything — flights, stays, tours, and support so your Japan trip feels effortless and worry-free.">
        {{travel_description}}
      </p>
    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] gap-12 items-start">

      <!-- LEFT IMAGES -->
      <div class="overflow-hidden rounded-sm xl:max-w-[900px]">
        <img class="feature-image w-full h-[470px] object-cover" data-index="0" src="{{travel_image_1}}" data-node="travel_image_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739954/seltrix/templates/ss-tourism-template/japan-path.png">

        <img class="feature-image w-full h-[470px] object-cover hidden" data-index="1" src="{{travel_image_2}}" data-node="travel_image_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740002/seltrix/templates/ss-tourism-template/start1.png">

           <img class="feature-image w-full h-[470px] object-cover hidden" data-index="2" src="{{travel_image_3}}" data-node="travel_image_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740003/seltrix/templates/ss-tourism-template/start2.png">

        <img class="feature-image w-full h-[470px] object-cover hidden" data-index="3" src="{{travel_image_4}}" data-node="travel_image_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740002/seltrix/templates/ss-tourism-template/start1.png">
      </div>

      <!-- RIGHT FEATURES -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Feature 1 -->
        <div class="feature-card bg-[#193A3F] text-center  justify-center text-white p-6 flex flex-col gap-3 cursor-pointer" data-index="0">
       

           <div class="justify-center flex">

          
          <img src="{{travel_icon_1}}" data-node="travel_icon_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739929/seltrix/templates/ss-tourism-template/end.png" data-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739973/seltrix/templates/ss-tourism-template/s2.png" data-active="{{travel_icon_1}}" class="w-10">
             </div>
           <h4 class="font-medium feature-title text-lg" data-node="feature1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="End-to-End Planning">
            {{feature1_title}}
          </h4>
          <p class="text-sm text-[#7E7E7E]" data-node="feature1_description" data-node-type="text" data-node-label="Feature 1 Description" data-node-default="Flights, hotels, tours, experiences — everything arranged seamlessly.">
            {{feature1_description}}
          </p>
           
        </div>

        <!-- Feature 2 -->
        <div class="feature-card border border-[#C7D2D1] justify-center text-center p-6 flex flex-col gap-3 cursor-pointer" data-index="1">
            <div class="justify-center flex">
          <img src="{{travel_icon_2}}" data-default="{{travel_icon_2}}" data-active="https://res.cloudinary.com/duukclzsd/image/upload/v1767171809/seltrix/templates/ss-tourism-template/end2.png" data-node="travel_icon_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739978/seltrix/templates/ss-tourism-template/sec.png" class="w-10">
            </div>
          <h4 class="font-medium feature-title" data-node="feature2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Curated Itineraries">
            {{feature2_title}}
          </h4>
          <p class="text-sm text-[#7E7E7E]" data-node="feature2_description" data-node-type="text" data-node-label="Feature 2 Description" data-node-default="We design travel plans based on your interests, schedule, and budget.">
            {{feature2_description}}
          </p>
        </div>

        <!-- Feature 3 -->
        <div class="feature-card border border-[#C7D2D1] justify-center text-center p-6 flex flex-col gap-3 cursor-pointer" data-index="2">
          <div class="justify-center flex">
          <img src="{{travel_icon_3}}" data-default="{{travel_icon_3}}" data-active="https://res.cloudinary.com/duukclzsd/image/upload/v1767171816/seltrix/templates/ss-tourism-template/loc2.png" data-node="travel_icon_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767171815/seltrix/templates/ss-tourism-template/loc.png" class="w-10">
            </div>
          <h4 class="font-medium feature-title" data-node="feature2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Curated Itineraries">
            {{feature2_title}}
          </h4>
          <p class="text-sm text-[#7E7E7E]" data-node="feature2_description" data-node-type="text" data-node-label="Feature 2 Description" data-node-default="We design travel plans based on your interests, schedule, and budget.">
            {{feature2_description}}
          </p>

        </div>

        <!-- Feature 4 -->
        <div class="feature-card border border-[#C7D2D1] justify-center text-center  p-6 flex flex-col gap-3 cursor-pointer" data-index="3">
           <div class="justify-center flex">
            <img src="{{travel_icon_4}}" data-default="{{travel_icon_4}}" data-active="https://res.cloudinary.com/duukclzsd/image/upload/v1767171810/seltrix/templates/ss-tourism-template/fo.png" data-node="travel_icon_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739932/seltrix/templates/ss-tourism-template/for.png" class="w-10">
            </div>
           <h4 class="font-medium feature-title" data-node="feature4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="24/7 Assistance">
            {{feature4_title}}
          </h4>
          <p class="text-sm text-[#7E7E7E]" data-node="feature4_description" data-node-type="text" data-node-label="Feature 4 Description" data-node-default="Our team is always available to help you throughout your journey.">
            {{feature4_description}}
          </p>
        </div>

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