<section data-component-type="Content" class="bg-white" data-component-slug="ss-dental-services">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 py-16 lg:py-24">
    <!-- Header -->
    <div class="text-center mb-12">
      <span data-node="services_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Services" class="inline-block px-5 py-2 border border-gray-200 rounded-lg text-sm text-gray-500 mb-6">{{services_badge}}</span>
      <h2 data-node="services_title" data-node-type="textarea" data-node-label="Title" data-node-default="Complete Medical Care Under One Roof" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight max-w-2xl mx-auto">
        {{services_title}}
      </h2>
    </div>

    <!-- Services Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Service Card 1 -->
      <div class="border border-gray-200 rounded-xl p-6 relative overflow-hidden">
          <!-- Dot Pattern Overlay (bottom-left with fade) -->
        <div class="absolute left-0 bottom-0 w-3/4 h-3/4" style="
            background-image: radial-gradient(
              circle,
              rgba(218, 210, 210, 0.5) 0.5px,
              transparent 2px
            );
            background-size: 6px 6px;
            -webkit-mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
            mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
          "></div>
        <div class="w-14 h-14 mb-4">
          <img data-node="service_1_icon" data-node-type="file" data-node-label="Service 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053585/seltrix/templates/ss-dental-template/service-icon-1.svg" src="{{service_1_icon}}" alt="Service icon">
        </div>
        <h3 data-node="service_1_title" data-node-type="text" data-node-label="Service 1 Title" data-node-default="Expert Doctors" class="lg:text-2xl font-semibold text-gray-900 mb-2">
          {{service_1_title}}
        </h3>
        <p data-node="service_1_description" data-node-type="textarea" data-node-label="Service 1 Description" data-node-default="Highly qualified and experienced specialists delivering trusted care across fields" class="text-[#575757] text-sm leading-relaxed">
          {{service_1_description}}
        </p>
      </div>

      <!-- Service Card 2 -->
      <div class="border border-gray-200 rounded-xl p-6 relative overflow-hidden">
          <!-- Dot Pattern Overlay (bottom-left with fade) -->
        <div class="absolute left-0 bottom-0 w-3/4 h-3/4" style="
            background-image: radial-gradient(
              circle,
              rgba(218, 210, 210, 0.5) 0.5px,
              transparent 2px
            );
            background-size: 6px 6px;
            -webkit-mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
            mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
          "></div>
        <div class="w-14 h-14 mb-4">
          <img data-node="service_2_icon" data-node-type="file" data-node-label="Service 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053586/seltrix/templates/ss-dental-template/service-icon-2.svg" src="{{service_2_icon}}" alt="Service icon">
        </div>
        <h3 data-node="service_2_title" data-node-type="text" data-node-label="Service 2 Title" data-node-default="Modern Diagnostics" class="lg:text-2xl text-xl font-semibold text-gray-900 mb-2">
          {{service_2_title}}
        </h3>
        <p data-node="service_2_description" data-node-type="textarea" data-node-label="Service 2 Description" data-node-default="Supported by advanced medical technology and state-of-the-art diagnostic equipment." class="text-[#575757] text-sm leading-relaxed">
          {{service_2_description}}
        </p>
      </div>

      <!-- CTA Card with Image (spans 2 rows) -->
      <div class="bg-[#007C8A] rounded-xl p-6 pb-0 md:row-span-2 flex flex-col relative overflow-hidden">
        <!-- Dot Pattern Overlay (bottom-left with fade) -->
        <div class="absolute left-0 bottom-0 w-2/4 h-2/4" style="
            background-image: radial-gradient(
              circle,
              rgba(255, 255, 255, 0.5) 2px,
              transparent 2px
            );
            background-size: 10px 10px;
            -webkit-mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
            mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
          "></div>
        <!-- Content (above pattern) -->
        <div class="relative z-10 flex flex-col flex-1">
          <div class="w-14 h-14 mb-4">
            <img data-node="cta_card_icon" data-node-type="file" data-node-label="CTA Card Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053593/seltrix/templates/ss-dental-template/service-icon-white.svg" src="{{cta_card_icon}}" alt="CTA icon">
          </div>
          <h3 data-node="cta_card_title" data-node-type="text" data-node-label="CTA Card Title" data-node-default="Request an Appointment Online" class="text-xl font-semibold text-white mb-2">
            {{cta_card_title}}
          </h3>
          <p data-node="cta_card_description" data-node-type="textarea" data-node-label="CTA Card Description" data-node-default="Schedule consultations easily with your preferred doctor and time." class="text-white/80 text-sm leading-relaxed mb-4">
            {{cta_card_description}}
          </p>
          <div class="mt-auto flex-1 flex items-end">
            <img data-node="cta_card_image" data-node-type="file" data-node-label="CTA Card Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053567/seltrix/templates/ss-dental-template/doctor.png" src="{{cta_card_image}}" alt="Doctor" class="w-full h-auto rounded-lg object-cover">
          </div>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="border border-gray-200 rounded-xl p-6 relative overflow-hidden">
          <!-- Dot Pattern Overlay (bottom-left with fade) -->
        <div class="absolute left-0 bottom-0 w-3/4 h-3/4" style="
            background-image: radial-gradient(
              circle,
              rgba(218, 210, 210, 0.5) 0.5px,
              transparent 2px
            );
            background-size: 6px 6px;
            -webkit-mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
            mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
          "></div>
        <div class="w-14 h-14 mb-4">
          <img data-node="service_3_icon" data-node-type="file" data-node-label="Service 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053588/seltrix/templates/ss-dental-template/service-icon-3.svg" src="{{service_3_icon}}" alt="Service icon">
        </div>
        <h3 data-node="service_3_title" data-node-type="text" data-node-label="Service 3 Title" data-node-default="Patient Support" class="lg:text-2xl font-semibold text-gray-900 mb-2">
          {{service_3_title}}
        </h3>
        <p data-node="service_3_description" data-node-type="textarea" data-node-label="Service 3 Description" data-node-default="Compassionate staff providing clear guidance, comfort, & assistance." class="text-[#575757] text-sm leading-relaxed">
          {{service_3_description}}
        </p>
      </div>

      <!-- Service Card 4 -->
      <div class="border border-gray-200 rounded-xl p-6 relative overflow-hidden">
          <!-- Dot Pattern Overlay (bottom-left with fade) -->
        <div class="absolute left-0 bottom-0 w-3/4 h-3/4" style="
            background-image: radial-gradient(
              circle,
              rgba(218, 210, 210, 0.5) 0.5px,
              transparent 2px
            );
            background-size: 6px 6px;
            -webkit-mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
            mask-image: radial-gradient(
              ellipse at bottom left,
              black 0%,
              transparent 70%
            );
          "></div>
        <div class="w-14 h-14 mb-4">
          <img data-node="service_4_icon" data-node-type="file" data-node-label="Service 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053591/seltrix/templates/ss-dental-template/service-icon-4.svg" src="{{service_4_icon}}" alt="Service icon">
        </div>
        <h3 data-node="service_4_title" data-node-type="text" data-node-label="Service 4 Title" data-node-default="24/7 Care" class="lg:text-2xl font-semibold text-gray-900 mb-2">
          {{service_4_title}}
        </h3>
        <p data-node="service_4_description" data-node-type="textarea" data-node-label="Service 4 Description" data-node-default="Round-the-clock emergency and critical care services to ensure help is always available" class="text-[#575757] text-sm leading-relaxed">
          {{service_4_description}}
        </p>
      </div>
    </div>
  </div>
</section>