@forelse($blogs as $key => $blog)

    @php
        $cpt_category = optional($blog)->blog_categories->pluck('slug')->toArray();
    @endphp

    
    <div class="project relative sm:px-30 px-20 group">
        <div class="box-item max-w-1320 mx-auto lg:flex justify-between items-center relative sm:py-40 py-20 border-b border-t dark:border-white/10 border-black/10">
            <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="img" class="mb-10 sm:hidden mx-auto rounded-2xl w-full">
            <div class="project-title relative z-4 flex items-baseline gap-10 lg:mb-0 mb-10 sm:justify-start justify-center">
                <span class="post inline-block sm:text-2xl text-2sm font-light dark:text-white/20 text-black/20">{{ $key + 1 }}</span>
                <h3 class="sm:text-2xl text-2sm font-light dark:text-white">{{ $blog->title }}</h3>
            </div>
            <div class="relative z-4 project-categ">
                <ul class="flex gap-9 group-hover:hidden duration-500 max-sm:justify-center">

                    @foreach ($cpt_category as $cat)
                    @php
                        $title = Str::title(str_replace('-', ' ', $cat));
                    @endphp
                    <li class="px-10 py-6 dark:bg-white/8 bg-black/8 rounded-sm dark:text-white text-sm capitalize font-light"><a href="javascript:void(0);">{{ $title }}</a></li>
                    @endforeach
                </ul>
                <div class="group-hover:block hidden duration-500">
                    <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="text-base font-medium dark:sm:text-black dark:text-white  flex items-center lg:justify-end">View All<svg class="ml-1.25" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="sm:stroke-black max-sm:dark:stroke-white" d="M3.75 9H14.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path class="sm:stroke-black max-sm:dark:stroke-white" d="M9 3.75L14.25 9L9 14.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="item-image absolute w-300 h-350 pointer-events-none top-0 left-0 overflow-hidden opacity-0 rotate-[15deg] max-sm:hidden">
                <div class="reveal-image relative h-full w-full bg-cover bg-center rounded-2xl overflow-hidden" style="background-image: url('{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}')"></div>
            </div>
        </div>
    </div>

@empty
<div class="col-span-12 py-20 text-center dark:text-white text-xl"><strong>{{ __('No services found.') }}</strong></div>
@endforelse