<div class="team-card flex flex-col bg-bg-50 transition-all duration-200 ease-in px-5 py-12 h-full xl:py-12 shadow-xl hover:bg-primary group">
  <div class="avatar mx-auto w-30 h-30">
    <img class="rounded-full border-4 border-gray-50 shadow-md w-full h-full object-cover"
         src="{{ imageurl }}"
         alt="{{ title|default('Profile') }}">
  </div>
  <div class="flex flex-col  items-center text-tertiary-base mt-10 group-hover:text-gray-50">
    <h2 class="card-title text-heading font-bold text-heading-h6 group-hover:text-gray-50 uppercase">
      {{ title }}
    </h2>
    <h3 class="text-sm sm:text-base text-heading font-medium  group-hover:text-gray-50">
      {{ subtitle }}
    </h3>
    <div class="flex flex-col justify-between">
    <div class="text-gray-700 font-normal text-sm md:text-base text-center mt-5 group-hover:text-gray-50 lg:px-5">
      {{ description }}
    </div>
    {# Loop through icons and pass 'first' variable to the component #}
      <div class="mt-4 flex  gap-5  justify-center ">
       {{icons}}
      </div>
      </div>

    </div>
  </div>
