<section class="bg-[#F6FBFF] py-20" data-component-type="Content" data-component-slug="real-estate-template-our_services">
  <div class="max-w-[90%] mx-auto text-center">

    <!-- HEADING -->
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-black" data-node="services_heading" data-node-type="text" data-node-label="Services Heading" data-node-default="Our Services">
      {{services_heading}}
    </h2>

    <p class="mt-4 max-w-3xl mx-auto text-sm sm:text-base text-[#3D3D3D] leading-relaxed" data-node="services_description" data-node-type="textarea" data-node-label="Services Description" data-node-default="We offer end-to-end real estate solutions that simplify your buying journey. Whether you’re upgrading, investing, or purchasing your first home, we make the process seamless.">
      {{services_description}}
    </p>

    <!-- SERVICES GRID -->
    <div class="mt-14 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">

      <!-- SERVICE 1 -->
      <div class="text-start max-w-xs mx-auto">
        <div class="w-14 h-14 rounded-xl border border-gray-200 bg-white flex items-center justify-center mb-6">
          <img src="{{service1_icon}}" data-node="service1_icon" data-node-type="file" data-node-label="Service 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359393/seltrix/templates/real-estate-template/safe-home.png" class="w-[35px]">
        </div>
        <p class="text-sm sm:text-base text-[#3D3D3D] leading-relaxed" data-node="service1_text" data-node-type="textarea" data-node-label="Service 1 Text" data-node-default="Personalized assistance to help you find the right home for your lifestyle">
          {{service1_text}}
        </p>
      </div>

      <!-- SERVICE 2 -->
      <div class="text-start max-w-xs mx-auto">
        <div class="w-14 h-14 rounded-xl border border-gray-200 bg-white flex items-center justify-center mb-6">
          <img src="{{service2_icon}}" data-node="service2_icon" data-node-type="file" data-node-label="Service 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359333/seltrix/templates/real-estate-template/airplane.png" class="w-[35px]">
        </div>
        <p class="text-sm sm:text-base text-[#3D3D3D] leading-relaxed" data-node="service2_text" data-node-type="textarea" data-node-label="Service 2 Text" data-node-default="Organized tours that give you a complete feel of the space, amenities, and surroundings">
          {{service2_text}}
        </p>
      </div>

      <!-- SERVICE 3 -->
      <div class="text-start max-w-xs mx-auto">
        <div class="w-14 h-14 rounded-xl border border-gray-200 bg-white flex items-center justify-center mb-6">
          <img src="{{service3_icon}}" data-node="service3_icon" data-node-type="file" data-node-label="Service 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359349/seltrix/templates/real-estate-template/document-text.png" class="w-[35px]">
        </div>
        <p class="text-sm sm:text-base text-[#3D3D3D] leading-relaxed" data-node="service3_text" data-node-type="textarea" data-node-label="Service 3 Text" data-node-default="Guidance with documentation, approvals, and partnering banks to ease your financing">
          {{service3_text}}
        </p>
      </div>

      <!-- SERVICE 4 -->
      <div class="text-start max-w-xs mx-auto">
        <div class="w-14 h-14 rounded-xl border border-gray-200 bg-white flex items-center justify-center mb-6">
          <img src="{{service4_icon}}" data-node="service4_icon" data-node-type="file" data-node-label="Service 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359359/seltrix/templates/real-estate-template/headphone.png" class="w-[35px]">
        </div>
        <p class="text-sm sm:text-base text-[#3D3D3D] leading-relaxed" data-node="service4_text" data-node-type="textarea" data-node-label="Service 4 Text" data-node-default="Dedicated support even after handover, ensuring a smooth, stress-free transition">
          {{service4_text}}
        </p>
      </div>

    </div>
  </div>
</section>