<section data-component-type="Hero" class="bg-gradient-to-b from-white to-[#007C8A50]" data-component-slug="ss-dental-services-hero">
  <!-- Top Content -->
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 pt-16 lg:pt-24 pb-12">
    <div class="text-center max-w-3xl mx-auto">
      <!-- Badge -->
      <span data-node="services_hero_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Medical Care" class="inline-block px-4 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-700 mb-6">{{services_hero_badge}}</span>

      <!-- Title -->
      <h1 data-node="services_hero_title" data-node-type="textarea" data-node-label="Title" data-node-default="Specialized Healthcare Services Focused on Better Outcomes" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight mb-6">
        {{services_hero_title}}
      </h1>

      <!-- Description -->
      <p data-node="services_hero_description" data-node-type="textarea" data-node-label="Description" data-node-default="Our hospital offers a wide range of medical services delivered with precision and compassion. From diagnosis to recovery, we focus on care that is safe, effective, and patient-centered." class="text-[#575757] text-base lg:text-lg leading-relaxed mb-8 max-w-2xl mx-auto">
        {{services_hero_description}}
      </p>

      <!-- CTA Button -->
      <a data-node="services_hero_cta_url" data-node-type="url" data-node-label="CTA Button URL" data-node-default="#" href="{{services_hero_cta_url}}" class="inline-flex items-center px-6 py-3 bg-[#007C8A] text-white font-semibold rounded-lg hover:bg-[#006670] transition-all text-sm md:text-base shadow-[0_8px_30px_rgba(0,124,138,0.4)]">
        <span data-node="services_hero_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Explore Our Services">{{services_hero_cta_text}}</span>
      </a>
    </div>
  </div>

  <!-- Images Section with Gradient -->
  <div class="relative">
    <!-- Images Container -->
    <div class="relative max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 pb-16">
      <div class="flex flex-col md:flex-row gap-6 lg:gap-8 items-center justify-center">
        <!-- Left Image (Shorter) -->
        <div class="hidden md:block w-full md:w-[30%]">
          <div class="aspect-[441/538]">
            <img data-node="services_hero_image_1" data-node-type="file" data-node-label="Left Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053597/seltrix/templates/ss-dental-template/services-1.png" src="{{services_hero_image_1}}" alt="Services Image 1" class="w-full h-full object-cover rounded-3xl shadow-lg">
          </div>
        </div>

        <!-- Center Image (Taller) -->
        <div class="w-full md:w-[40%]">
          <div class="aspect-[673/820]">
            <img data-node="services_hero_image_2" data-node-type="file" data-node-label="Center Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053598/seltrix/templates/ss-dental-template/services-2.png" src="{{services_hero_image_2}}" alt="Services Image 2" class="w-full h-full object-cover rounded-3xl shadow-lg">
          </div>
        </div>

        <!-- Right Image (Shorter) -->
        <div class="hidden md:block w-full md:w-[30%]">
          <div class="aspect-[441/538]">
            <img data-node="services_hero_image_3" data-node-type="file" data-node-label="Right Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053599/seltrix/templates/ss-dental-template/services-3.png" src="{{services_hero_image_3}}" alt="Services Image 3" class="w-full h-full object-cover rounded-3xl shadow-lg">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>