<section class="bg-[#FBF7F3] px-6 py-12 lg:px-16" data-component-type="Content" data-component-slug="ss-tourism-template-who_we_are">
  <div class="max-w-[90%] mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-0 h-auto lg:h-full overflow-hidden">
      <!-- LEFT IMAGE -->
      <div class="w-full">
        <img class="about_main-image w-full xl:h-[670px] lg:h-[500px] md:h-[400px] h-[250px] object-cover" data-index="0" src="{{about_main_image1}}" data-node="about_main_image1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739918/seltrix/templates/ss-tourism-template/about-image.png">

        <img class="about_main-image w-full xl:h-[670px] lg:h-[500px] md:h-[400px] h-[250px object-cover hidden" data-index="1" src="{{about_image_2}}" data-node="about_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="about_main-image w-full xl:h-[670px] lg:h-[500px] md:h-[400px] h-[250px object-cover hidden" data-index="2" src="{{about_image_3}}" data-node="about_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="about_main-image w-full xl:h-[670px] lg:h-[500px] md:h-[400px] h-[250px object-cover hidden" data-index="3" src="{{about_image_4}}" data-node="about_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 CONTENT -->
      <div class="flex flex-col">
        <!-- WHO WE ARE (Dark Section) -->
        <div class="about_main-card bg-[#133D3F] text-white px-6 py-10 lg:px-10 lg:py-12" data-index="0">
          <h3 class="text-xl lg:text-2xl font-semibold mb-4" data-node="who_we_are_title" data-node-type="text" data-node-label="Who We Are Title" data-node-default="Who We Are">
            {{who_we_are_title}}
          </h3>

          <p class="text-sm lg:text-base leading-relaxed" data-node="who_we_are_description" data-node-type="text" data-node-label="Who We Are Description" data-node-default="We are storytellers of Japan, curating journeys that go beyond sightseeing to reveal the soul of the country. From ancient traditions to contemporary city life.">
            {{who_we_are_description}}
          </p>
        </div>

        <!-- What We Do -->
        <div class="about_main-card px-6 py-10 lg:px-10" data-index="1">
          <h3 class="text-xl lg:text-2xl font-semibold mb-3" data-node="what_we_do_title" data-node-type="text" data-node-label="What We Do Title" data-node-default="What We Do">
            {{what_we_do_title}}
          </h3>

          <p class="text-sm lg:text-base leading-relaxed" data-node="what_we_do_description" data-node-type="text" data-node-label="What We Do Description" data-node-default="We design immersive travel experiences that balance iconic landmarks with hidden local gems. Every itinerary is thoughtfully crafted to connect you with Japan’s culture, people, and rhythms.">
            {{what_we_do_description}}
          </p>
        </div>

        <!-- Why Choose Us -->
        <div class="about_main-card px-6 py-10 lg:px-10" data-index="2">
          <h3 class="text-xl lg:text-2xl font-semibold mb-3" data-node="why_choose_us_title" data-node-type="text" data-node-label="Why Choose Us Title" data-node-default="Why Choose Us">
            {{why_choose_us_title}}
          </h3>

          <p class="text-sm lg:text-base leading-relaxed" data-node="why_choose_us_description" data-node-type="text" data-node-label="Why Choose Us Description" data-node-default="Our deep local insight, trusted partnerships, and attention to detail ensure seamless, meaningful journeys. We don’t just plan trips, we create memories.">
            {{why_choose_us_description}}
          </p>
        </div>

        <!-- Our Promise -->
        <div class="about_main-card px-6 py-10 lg:px-10" data-index="3">
          <h3 class="text-xl lg:text-2xl font-semibold mb-3" data-node="our_promise_title" data-node-type="text" data-node-label="Our Promise Title" data-node-default="Our Promise">
            {{our_promise_title}}
          </h3>

          <p class="text-sm lg:text-base leading-relaxed" data-node="our_promise_description" data-node-type="text" data-node-label="Our Promise Description" data-node-default="We promise responsible travel, honest guidance, and unforgettable experiences at every step. Your journey will be smooth, enriching, and true to Japan’s spirit.">
            {{our_promise_description}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>