<section data-component-type="Content" class="py-12 bg-white" data-component-slug="ss-dental-cta-banner">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 xl:px-48">
    <div class="relative bg-[#007C8A] rounded-2xl py-20 lg:py-28 xl:py-32 px-8 lg:px-16 overflow-hidden xl:aspect-[1476/601] flex items-center justify-center">
      <!-- Dot Pattern Overlay - Left -->
      <div class="absolute inset-0 pointer-events-none" style="
          background-image: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.6) 3px,
            transparent 3px
          );
          background-size: 12.5px 12.5px;
          mask-image: radial-gradient(
            ellipse 60% 100% at 0% 100%,
            white 0%,
            transparent 80%
          );
          -webkit-mask-image: radial-gradient(
            ellipse 60% 100% at 0% 100%,
            white 0%,
            transparent 80%
          );
        "></div>

      <!-- Dot Pattern Overlay - Right -->
      <div class="absolute inset-0 pointer-events-none" style="
          background-image: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.6) 3px,
            transparent 3px
          );
          background-size: 12.5px 12.5px;
          mask-image: radial-gradient(
            ellipse 60% 100% at 100% 0%,
            white 0%,
            transparent 80%
          );
          -webkit-mask-image: radial-gradient(
            ellipse 60% 100% at 100% 0%,
            white 0%,
            transparent 80%
          );
        "></div>

      <!-- Content -->
      <div class="relative z-10 text-center max-w-2xl mx-auto">
        <!-- Title -->
        <h2 data-node="cta_banner_title" data-node-type="textarea" data-node-label="Title" data-node-default="Your Health Starts Here" class="text-3xl md:text-4xl lg:text-5xl font-medium text-white leading-tight mb-6">
          {{cta_banner_title}}
        </h2>

        <!-- Description -->
        <p data-node="cta_banner_description" data-node-type="textarea" data-node-label="Description" data-node-default="Take the first step toward expert medical care today." class="text-white/90 text-base lg:text-lg leading-relaxed mb-10">
          {{cta_banner_description}}
        </p>

        <!-- CTA Buttons -->
        <div class="flex flex-wrap justify-center gap-4">
          <!-- Primary Button (White filled) -->
          <a data-node="cta_primary_url" data-node-type="url" data-node-label="Primary Button URL" data-node-default="#" href="{{cta_primary_url}}" class="inline-flex items-center px-6 py-3 bg-white text-[#007C8A] font-semibold rounded-lg hover:bg-gray-100 transition-all text-sm md:text-base">
            <span data-node="cta_primary_text" data-node-type="text" data-node-label="Primary Button Text" data-node-default="Book an Appointment">{{cta_primary_text}}</span>
          </a>

          <!-- Secondary Button (White outline) -->
          <a data-node="cta_secondary_url" data-node-type="url" data-node-label="Secondary Button URL" data-node-default="#" href="{{cta_secondary_url}}" class="inline-flex items-center px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-all text-sm md:text-base">
            <span data-node="cta_secondary_text" data-node-type="text" data-node-label="Secondary Button Text" data-node-default="Talk to Our Team">{{cta_secondary_text}}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>