<section data-component-type="Hero" data-component-slug="ss-tourism-template-hero">
  <div class="relative min-h-screen lg:min-h-screen w-full flex items-start pt-[150px] justify-center text-center overflow-hidden">
    <!-- Background Image -->
    {{#if show_hero_bg}}
    <div class="absolute inset-0 z-0">
      <img data-node="hero_bg" data-node-type="file" data-node-label="Hero Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739940/seltrix/templates/ss-tourism-template/homebg.png" src="{{hero_bg}}" alt="Hero background" class="w-full h-full object-cover object-center">

      <!-- Soft overlay -->
      <div class="absolute inset-0 bg-black/10"></div>
    </div>
    {{/if}}

    <!-- Content -->
    <div class="relative z-10 px-6 max-w-4xl mx-auto text-white">
      <!-- Title -->
      <h1 data-node="hero_title" data-node-type="text" data-node-label="Title" data-node-default="Where Every Step Sparks Momentum" class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium leading-tight mb-6">
        {{hero_title}}
      </h1>

      <!-- Description -->
      <p data-node="hero_description" data-node-type="textarea" data-node-label="Description" data-node-default="Join a club that inspires beginners to start strong. Challenges athletes to push past their limits. And celebrates every mile that brings us forward, together." class="mx-auto max-w-2xl text-sm sm:text-base md:text-lg lg:text-xl text-[#193A3F] mb-10 leading-relaxed">
        {{hero_description}}
      </p>

      <!-- CTA -->
      <a data-node="hero_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{hero_cta_link}}" class="inline-flex items-center justify-center px-10 sm:px-10 py-3 sm:py-4 border border-white text-white text-sm sm:text-base md:text-lg font-medium hover:bg-white hover:text-black transition-all duration-300">
        <span data-node="hero_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Join the Run">
          {{hero_cta_text}}
        </span>
      </a>
    </div>
  </div>
</section>