<section class="relative w-full min-h-[420px] md:min-h-[520px]" data-component-type="Content" data-component-slug="ss-tourism-template-your_japan">

  <!-- Background Image -->
  <div class="absolute inset-0">
    <img src="{{cta_bg_image}}" data-node="cta_bg_image" data-node-type="file" data-node-label="CTA Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739926/seltrix/templates/ss-tourism-template/cta-bg.png" alt="Japan Cherry Blossom" class="w-full h-full object-cover object-center">
  </div>

  <!-- Content -->
  <div class="relative z-10 max-w-[90%] mx-auto px-6 py-20 md:py-28 flex items-center">
    <div class="max-w-xl text-white">

      <!-- Heading -->
      <h2 class="font-serif text-3xl sm:text-4xl md:text-5xl leading-tight mb-6" data-node="cta_heading" data-node-type="textarea" data-node-label="CTA Heading" data-node-default="Your Japan Adventure Starts With One Click.">
        {{cta_heading}}
      </h2>

      <!-- Description -->
      <p class="text-white/90 text-sm sm:text-base md:text-lg leading-relaxed mb-8" data-node="cta_description" data-node-type="textarea" data-node-label="CTA Description" data-node-default="Explore iconic cities, stunning landscapes, and rich cultural moments. We plan your Japan trip with care, expertise.">
        {{cta_description}}
      </p>

      <!-- CTA Button -->
      <a href="{{cta_button_link}}" data-node="cta_button_link" data-node-type="text" data-node-label="CTA Button Link" data-node-default="#" class="inline-flex items-center justify-center
               px-8 sm:px-10 py-3 sm:py-4
               border border-white
               text-white text-sm sm:text-base
               hover:bg-white hover:text-[#0F3D3E]
               transition-all duration-300">
        <span data-node="cta_button_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Get in Touch">
          {{cta_button_text}}
        </span>
      </a>

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