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

      <!-- Title -->
      <h1 data-node="about_hero_title" data-node-type="textarea" data-node-label="Title" data-node-default="Dedicated to Healing with Skill, Care, and Integrity" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight mb-6 max-w-3xl mx-auto">
        {{about_hero_title}}
      </h1>

      <!-- Description -->
      <p data-node="about_hero_description" data-node-type="textarea" data-node-label="Description" data-node-default="We are a patient-focused hospital delivering reliable medical care through expertise, ethics, and compassion. Every decision we make is guided by safety and respect for human life." class="text-[#575757] text-base lg:text-lg leading-relaxed mb-8 max-w-2xl mx-auto">
        {{about_hero_description}}
      </p>

      <!-- CTA Button -->
      <a data-node="about_hero_cta_url" data-node-type="url" data-node-label="CTA Button URL" data-node-default="#" href="{{about_hero_cta_url}}" class="inline-flex items-center px-8 py-4 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="about_hero_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Discover Our Story">{{about_hero_cta_text}}</span>
      </a>
    </div>

    <!-- Doctor Images -->
    <div class="flex justify-center items-end gap-4 lg:gap-8 relative">
      <!-- Left Doctor -->
      <div class="relative w-1/4 max-w-[280px] transform -rotate-6">
        <div class="rounded-2xl overflow-hidden shadow-xl bg-white p-2">
          <img data-node="about_hero_image_1" data-node-type="file" data-node-label="Left Doctor Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053561/seltrix/templates/ss-dental-template/doctor-1.png" src="{{about_hero_image_1}}" alt="Doctor" class="w-full aspect-[3/4] object-cover rounded-xl">
        </div>
      </div>

      <!-- Center Doctor (Larger) -->
      <div class="relative w-1/3 max-w-[380px] z-10">
        <div class="rounded-2xl overflow-hidden shadow-2xl bg-white p-2">
          <img data-node="about_hero_image_2" data-node-type="file" data-node-label="Center Doctor Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053563/seltrix/templates/ss-dental-template/doctor-2.png" src="{{about_hero_image_2}}" alt="Doctor" class="w-full aspect-[3/4] object-cover rounded-xl">
        </div>
      </div>

      <!-- Right Doctor -->
      <div class="relative w-1/4 max-w-[280px] transform rotate-6">
        <div class="rounded-2xl overflow-hidden shadow-xl bg-white p-2">
          <img data-node="about_hero_image_3" data-node-type="file" data-node-label="Right Doctor Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053564/seltrix/templates/ss-dental-template/doctor-3.png" src="{{about_hero_image_3}}" alt="Doctor" class="w-full aspect-[3/4] object-cover rounded-xl">
        </div>
      </div>
    </div>
  </div>
</section>