@foreach ($staffs as $memberTypeId => $staffGroup)
    @php
        $staffsByDesignation = $staffGroup->groupBy('designations');
    @endphp
    @foreach ($staffsByDesignation as $designation => $staffMembers)
        <div class="row d-flex align-items-center justify-content-center g-5">
            @foreach ($staffMembers as $staff)
                <div class="col-lg-3 col-md-4">
                    <div class="mb-4 position-relative shine-animate-item">
                        <div class="shine-animate">
                            <img src="{{ asset($staff->image ?? 'default-image.jpg') }}" alt="{{ $staff->title }}"
                                class="img-fluid" />
                        </div>
                        <div class="s-body p-3 d-flex flex-column text-align-items-center h-100 text-center bg-white z-20 overflow-hidden"
                            style="margin-top: -60px;">
                            <h3 class="text-uppercase fs-6 fwc-600 mb-0 text-custom-blue-dark2 position-relative z-20">
                                {{ $staff->title }}</h3>
                            <p class="mb-0 position-relative z-20">{{ $staff->designations }}</p>
                            @if($staff->showappointment)
                            <p class="mb-0 fsc-8 position-relative z-20"> @lang('language.appointmentdate') {{ getNepaliDate($staff->appointment_date) }}
                            </p>
                            @endif
                        </div>

                    </div>
                </div>
            @endforeach
        </div>
    @endforeach
@endforeach