<section data-component-type="Content" class="bg-white py-14 md:py-12 overflow-hidden" data-component-slug="ss-amusement-park-cta-banner">
  <div class="max-w-[1920px] mx-auto relative">
    <!-- Marquee Container -->
    <div class="h-full relative flex items-center justify-center">
      <!-- Scrolling Text Background -->
      <div class="w-full overflow-hidden">
        <!-- Top Row - Scrolling Left -->
        <div class="marquee-row mb-0">
          <div class="marquee-track animate-marquee-left">
            <span data-node="marquee_text_1" data-node-type="text" data-node-label="Marquee Text 1" data-node-default="ENDLESS SMILES" class="text-[80px] md:text-[150px] lg:text-[200px] xl:text-[250px] font-bold text-[#006EFF] whitespace-nowrap mx-4 md:mx-8 leading-none">{{marquee_text_1}}</span>
            <span class="text-[80px] md:text-[150px] lg:text-[200px] xl:text-[250px] font-bold text-[#006EFF] whitespace-nowrap mx-4 md:mx-8 leading-none">{{marquee_text_1}}</span>
            <span class="text-[80px] md:text-[150px] lg:text-[200px] xl:text-[250px] font-bold text-[#006EFF] whitespace-nowrap mx-4 md:mx-8 leading-none">{{marquee_text_1}}</span>
            <span class="text-[80px] md:text-[150px] lg:text-[200px] xl:text-[250px] font-bold text-[#006EFF] whitespace-nowrap mx-4 md:mx-8 leading-none">{{marquee_text_1}}</span>
          </div>
        </div>

        <!-- Bottom Row - Scrolling Right -->
        <div class="marquee-row">
          <div class="marquee-track animate-marquee-right">
            <span data-node="marquee_text_2" data-node-type="text" data-node-label="Marquee Text 2" data-node-default="MAGICAL MOMENTS ALL DAY" class="text-[80px] md:text-[150px] lg:text-[200px] xl:text-[250px] font-bold text-[#000000] whitespace-nowrap mx-4 md:mx-8 leading-none">{{marquee_text_2}}</span>
            <span class="text-[80px] md:text-[150px] lg:text-[200px] xl:text-[250px] font-bold text-[#000000] whitespace-nowrap mx-4 md:mx-8 leading-none">{{marquee_text_2}}</span>
            <span class="text-[80px] md:text-[150px] lg:text-[200px] xl:text-[250px] font-bold text-[#000000] whitespace-nowrap mx-4 md:mx-8 leading-none">{{marquee_text_2}}</span>
            <span class="text-[80px] md:text-[150px] lg:text-[200px] xl:text-[250px] font-bold text-[#000000] whitespace-nowrap mx-4 md:mx-8 leading-none">{{marquee_text_2}}</span>
          </div>
        </div>
      </div>

      <!-- Center Mascot Image -->
      <div class="w-fit absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
        <img data-node="mascot_image" data-node-type="file" data-node-label="Mascot Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298123/seltrix/templates/ss-amusement-park-template/mascot.png" src="{{mascot_image}}" alt="Park Mascot" class="w-[450px] sm:w-[320px] md:w-[420px] lg:w-[550px] xl:w-[716px] h-auto drop-shadow-2xl">
      </div>
    </div>
  </div>
</section>