<section data-component-type="CTABanner" class="relative py-20 xl:py-32 min-h-[809px] flex items-center justify-center" data-component-slug="marathon-cta-banner">
  <!-- Background Image -->
  <div class="absolute inset-0 z-0">
    <img data-node="cta_banner_bg_image" data-node-type="file" data-node-label="Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024145/seltrix/templates/marathon-template/cta-banner-bg.png" src="{{cta_banner_bg_image}}" alt="Runners" class="w-full h-full object-cover object-center">
    <div class="absolute inset-0 z-0 bg-black opacity-50"></div>
  </div>

  <!-- Content -->
  <div class="relative z-10 mx-auto px-6 lg:px-16 xl:px-[95px] text-center">
    <div class="max-w-3xl mx-auto">
      <!-- Title -->
      <h2 data-node="cta_banner_title" data-node-type="textarea" data-node-label="Banner Title" data-node-default="Run for purpose, run for joy, run for YOU. Fuel Your Passion With Runs That Bring People Together" class="text-3xl md:text-4xl xl:text-5xl leading-tight font-['Racing_Sans_One'] text-white mb-6">
        {{cta_banner_title}}
      </h2>

      <!-- Description -->
      <p data-node="cta_banner_description" data-node-type="textarea" data-node-label="Banner Description" data-node-default="Whether you're chasing a new personal best or just enjoying the moment, our marathons make every mile unforgettable." class="text-white text-sm xl:text-base leading-relaxed mb-8 max-w-xl mx-auto">
        {{cta_banner_description}}
      </p>

      <!-- CTA Button -->
      <a data-node="cta_banner_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{cta_banner_link}}" class="inline-flex items-center gap-3 bg-[#DCFC62] text-black px-6 py-4 xl:px-8 xl:pr-10 xl:py-5 text-sm xl:text-lg font-bold hover:bg-lime-500 transition-colors uppercase tracking-wider w-fit" style="clip-path: polygon(0 0, 100% 0, 100% 65%, 88% 100%, 0 100%)">
        <span data-node="cta_banner_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="REGISTER TODAY">{{cta_banner_cta_text}}</span>
      </a>
    </div>
  </div>
</section>