<section data-component-type="Content" data-component-slug="ss-tourism-template-offer_banner">
  <div class="bg-[#193A3F] py-16 sm:py-20 md:py-24">
    <div class="container mx-auto px-4" data-component-type="Content">
      <!-- Centered Content -->
      <div class="lg:max-w-[70%] max-w-[90%] mx-auto text-center text-white">
        <!-- Top Label -->
        <div class="flex items-center justify-center gap-4 mb-6">
          <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1766739955/seltrix/templates/ss-tourism-template/leftline.png" class="w-[5%] md:w-[35%] h-full object-fit rounded-sm">

          <p class="text-sm tracking-wide uppercase text-white/80" data-node="top_label" data-node-type="text" data-node-label="Top Label" data-node-default="Japan, Defined for Travelers">
            {{top_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%] h-full object-fit rounded-sm">
        </div>

        <!-- Main Heading -->
        <h2 class="font-serif font-medium leading-tight text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6" data-node="description" data-node-type="textarea" data-node-label="Description" data-node-default=" Japan: A Journey of Culture, Beauty,
        and Endless Exploration.">
          {{description}}
        </h2>

        <!-- Description -->
        <p class="text-sm sm:text-base md:text-lg text-[#BDBDBD] max-w-2xl mx-auto mb-10" data-node="description2" data-node-type="textarea" data-node-label="Description2" data-node-default=" A land of culture, cuisine, and breathtaking beauty — Japan offers refined experiences for every kind of traveller.">
          {{description2}}
        </p>

        <!-- CTA Button -->
        <a href="{{cta_link}}" data-node="cta_link" data-node-type="text" data-node-label="CTA Link" data-node-default="#" class="inline-flex items-center justify-center px-10 sm:px-12 py-3 sm:py-4 border border-[#BDBDBD] text-[#BDBDBD] text-sm sm:text-base md:text-lg font-medium hover:bg-white hover:text-[#0F3D3E] transition-all duration-300">
          <span data-node="cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Ongoing Offers">
            {{cta_text}}
          </span>
        </a>
      </div>
    </div>
  </div>
</section>