<section class="bg-[#F6FBFF] px-6 py-12 lg:px-16 lg:py-16" data-component-type="Content" data-component-slug="real-estate-template-experts">

  <!-- Header -->
  <div class="max-w-[90%] mx-auto flex flex-col md:flex-col sm:items-center  mb-10">

    <h2 class="text-3xl lg:text-4xl font-serif text-[#000000] text-center " data-node="expert_section_title" data-node-type="text" data-node-label="expert Section Title" data-node-default="Experts Behind Every Space">
     <b>{{expert_section_title}}</b> 
    </h2>
      


     <p class="mt-4 sm:mt-6 text-sm sm:text-base text-[#7E7E7E] max-w-xl" data-node="story_description" data-node-type="textarea" data-node-label="Story Description" data-node-default="A team committed to turning your home dreams into reality.">
      {{story_description}}
    </p>



  </div>

  <!-- expert Grid -->
  <div class="max-w-[90%] mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 border-b pb-[50px]">

    <!-- expert Member 1 -->
    <div class="space-y-4">
      <img src="{{expert_1_image}}" data-node="expert_1_image" data-node-type="file" data-node-label="expert Member 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359350/seltrix/templates/real-estate-template/expert1.png" alt="expert Member 1" class="w-full h-[360px] object-cover">
      <div>
        <h4 class="font-semibold text-#000000" data-node="expert_1_role" data-node-type="text" data-node-label="expert Member 1 Role" data-node-default="Matteo Rossi">
          {{expert_1_role}}
        </h4>
        <p class="text-sm text-[#7E7E7E]" data-node="expert_1_name" data-node-type="text" data-node-label="expert Member 1 Name" data-node-default="Chief Architect">
          {{expert_1_name}}
        </p>
      </div>
    </div>

    <!-- expert Member 2 -->
    <div class="space-y-4">
      <img src="{{expert_2_image}}" data-node="expert_2_image" data-node-type="file" data-node-label="expert Member 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359352/seltrix/templates/real-estate-template/expert2.png" alt="expert Member 2" class="w-full h-[360px] object-cover">
      <div>
        <h4 class="font-semibold text-#000000" data-node="expert_2_role" data-node-type="text" data-node-label="expert Member 2 Role" data-node-default="Kenji Nakamura">
          {{expert_2_role}}
        </h4>
        <p class="text-sm text-[#7E7E7E]" data-node="expert_2_name" data-node-type="text" data-node-label="expert Member 2 Name" data-node-default="Head of Construction">
          {{expert_2_name}}
        </p>
      </div>
    </div>

    <!-- expert Member 3 -->
    <div class="space-y-4">
      <img src="{{expert_3_image}}" data-node="expert_3_image" data-node-type="file" data-node-label="expert Member 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359353/seltrix/templates/real-estate-template/expert3.png" alt="expert Member 3" class="w-full h-[360px] object-cover">
      <div>
        <h4 class="font-semibold text-#000000" data-node="expert_3_role" data-node-type="text" data-node-label="expert Member 3 Role" data-node-default="Samuel Okoye">
          {{expert_3_role}}
        </h4>
        <p class="text-sm text-[#7E7E7E]" data-node="expert_3_name" data-node-type="text" data-node-label="expert Member 3 Name" data-node-default="Project Planning Lead">
          {{expert_3_name}}
        </p>
      </div>
    </div>

    <!-- expert Member 4 -->
    <div class="space-y-4">
      <img src="{{expert_4_image}}" data-node="expert_4_image" data-node-type="file" data-node-label="expert Member 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359354/seltrix/templates/real-estate-template/expert4.png" alt="expert Member 4" class="w-full h-[360px] object-cover">
      <div>
        <h4 class="font-semibold text-#000000" data-node="expert_4_role" data-node-type="text" data-node-label="expert Member 4 Role" data-node-default="Lily Blooms">
          {{expert_4_role}}
        </h4>
        <p class="text-sm text-[#7E7E7E]" data-node="expert_4_name" data-node-type="text" data-node-label="expert Member 4 Name" data-node-default="Customer Experience Manager">
          {{expert_4_name}}
        </p>
      </div>
    </div>

  </div>
</section>