<section data-component-type="Content" class="py-16 lg:py-24 bg-white" data-component-slug="ss-dental-services-features">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Badge -->
    <span data-node="services_features_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Approach" class="inline-block px-4 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-700 mb-6">{{services_features_badge}}</span>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
      <!-- Left Content -->
      <div>
        <!-- Title -->
        <h2 data-node="services_features_title" data-node-type="textarea" data-node-label="Title" data-node-default="Medical Services Built Around Clinical Excellence" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight mb-10">
          {{services_features_title}}
        </h2>

        <!-- Feature Cards -->
        <div class="space-y-6">
          <!-- Feature 1 -->
          <div class="flex gap-4">
            <div class="flex-shrink-0 w-12 h-12 bg-[#007C8A]/10 rounded-lg flex items-center justify-center">
              <img data-node="services_feature_1_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053600/seltrix/templates/ss-dental-template/services-feature-icon-1.svg" src="{{services_feature_1_icon}}" alt="Feature Icon">
            </div>
            <div>
              <h3 data-node="services_feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Clinical Expertise" class="text-xl font-semibold text-gray-900 mb-1">
                {{services_feature_1_title}}
              </h3>
              <p data-node="services_feature_1_description" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Doctors trained across leading institutions deliver evidence-based medical care with confidence." class="text-[#575757] text-base leading-relaxed">
                {{services_feature_1_description}}
              </p>
            </div>
          </div>

          <!-- Feature 2 -->
          <div class="flex gap-4">
            <div class="flex-shrink-0 w-12 h-12 bg-[#007C8A]/10 rounded-lg flex items-center justify-center">
              <img data-node="services_feature_2_icon" data-node-type="file" data-node-label="Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053602/seltrix/templates/ss-dental-template/services-feature-icon-2.svg" src="{{services_feature_2_icon}}" alt="Feature Icon">
            </div>
            <div>
              <h3 data-node="services_feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Smart Infrastructure" class="text-xl font-semibold text-gray-900 mb-1">
                {{services_feature_2_title}}
              </h3>
              <p data-node="services_feature_2_description" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Advanced systems support accurate evaluations, streamlined treatments, and safer procedures." class="text-[#575757] text-base leading-relaxed">
                {{services_feature_2_description}}
              </p>
            </div>
          </div>

          <!-- Feature 3 -->
          <div class="flex gap-4">
            <div class="flex-shrink-0 w-12 h-12 bg-[#007C8A]/10 rounded-lg flex items-center justify-center">
              <img data-node="services_feature_3_icon" data-node-type="file" data-node-label="Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053604/seltrix/templates/ss-dental-template/services-feature-icon-3.svg" src="{{services_feature_3_icon}}" alt="Feature Icon">
            </div>
            <div>
              <h3 data-node="services_feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Coordinated Care" class="text-xl font-semibold text-gray-900 mb-1">
                {{services_feature_3_title}}
              </h3>
              <p data-node="services_feature_3_description" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Departments work in alignment to reduce delays and improve the overall care experience." class="text-[#575757] text-base leading-relaxed">
                {{services_feature_3_description}}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Image -->
      <div class="aspect-[854/592]">
        <img data-node="services_features_image" data-node-type="file" data-node-label="Hospital Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053578/seltrix/templates/ss-dental-template/hospital.png" src="{{services_features_image}}" alt="Hospital" class="w-full h-full object-cover rounded-2xl shadow-lg">
      </div>
    </div>
  </div>
</section>