{{-- <div class="swiper-slide flex flex-col items-center justify-center group bg-white border border-solid border-gray-300 rounded-2xl h-full max-sm:max-w-lg max-sm:mx-auto p-4 transition-all duration-500 hover:border-indigo-600">
    <div class="flex items-center gap-5 mb-5 sm:mb-9 flex-col w-full justify-center">
        <img class="rounded-lg object-cover w-full h-full border-2 border-red-500" src="{{ $doctorsImage }}" alt="avatar">
        <div class="grid gap-1">
            <h5 class="text-blue-600 font-medium transition-all duration-500 text-lg text-center">{{ $doctorsName }}</h5>
            <span class="text-sm leading-6 text-black text-center">{{ $doctorsPosition }}</span>
        </div>
    </div>
</div> --}}
{{-- 
<div class="bg-white border border-solid border-gray-300 rounded-lg shadow-lg max-w-sm mx-auto swiper-slide w-44 ">
    <img src="{{ $doctorsImage }}" alt="Doctor Image" class="w-full h-96 object-cover rounded-t-2xl p-2 border-2 border-red-500">
    <div class="text-center mt-6 space-y-2 py-2">
        <h2 class="text-xl font-bold text-blue-600">{{ $doctorsName }}</h2>
        <p class="text-gray-600">{{ $doctorsPosition }}</p>
    </div>
</div> --}}


<div class="swiper-slide"
data-aos="fade-left"
data-aos-duration="1200"
data-aos-delay="100">
    <div class="bg-indigo-50 rounded-2xl h-auto w-auto flex justify-center items-center flex-col px-3 ">
    <img src="{{ asset($doctor->image . '.png') }}" alt="Doctor Image" class=" h-full w-full py-8 px-3 object-contain rounded-lg ">
        <div class="text-center space-y-4 py-4">
            <h2 class="text-xl font-bold text-blue-600">{{ $doctorsName }}</h2>
            <p class="text-gray-600">{{ $doctorsPosition }}</p>
        </div>
    </div>
  </div>