<section class="2xl:py-190 lg:py-120 md:py-80 py-40 overflow-hidden hover-wrapper">
    <div class="container-full">
        @if (isset($args['title']) || isset($args['view_all']) || isset($args['page_id']))
            <div class="container">
            <div class="flex justify-between items-end gap-30 mb-40">
                <div class="{{ (isset($args['view_all']) && $args['view_all'] == 'true') ? 'text-left' : 'text-center flex-1' }}">
                    <p class="text-xl mb-15">{{ isset($args['subtitle']) ? $args['subtitle'] : '' }}</p>
                    <h2 class="text-[45px]/35 font-semibold mb-20">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                    <p class="text-lg">{{ isset($args['description']) ? $args['description'] : '' }}</p>
                </div>

                <div>
                    @if (isset($args['view_all']) && $args['view_all'] == 'true')

                    <a 
                        href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}"
                        class="btn btn-outline style-1 ms-auto p-2 group button--stroke flairBtn magneticBtn" 
                        data-block="button"
                    >
                        <span class="button-flair"></span>
                        <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ __('View All') }}</span>
                        <span class="inline-flex justify-center items-center size-32 rounded-full bg-secondary text-white duration-100 group-hover:bg-primary group-hover:text-secondary z-0">
                            <i class="fa-solid fa-arrow-right text-sm"></i>
                        </span>
                    </a>
                    @endif
                </div>
            </div>
            </div>
        @endif
        <div class="swiper services-swiper sm:!px-0 !px-15">
            <div class="swiper-wrapper items-center">
                @php
                    $args['post_type'] = 'services';
                    $blogs = HelpDesk::elementPostsByArgs($args);
                @endphp
                @forelse($blogs as $key => $blog)
                <div class="swiper-slide">
                    <div class="card dark:bg-bodybg bg-bglight sm:p-50 p-30 md:min-h-526 min-h-400 w-full z-1 border-r dark:border-bordercolor border-light duration-500 relative after:content-[''] after:absolute after:-bottom-100 after:left-0 md:after:size-360 after:size-250 after:pointer-events-none dark:after:bg-[url('../images/background/bg4-light.svg')] after:bg-[url('../images/background/bg4.svg')] after:bg-no-repeat after:bg-bottom-left after:bg-contain after:-z-1 after:opacity-0 after:duration-500 service-card-1 hover-active hover-active">
                        <div class="flex-1 xl:pr-40">
                            <h3 class="sm:text-4xxl/45 text-4xl capitalize mb-12">{{ $blog->title }}</h3>
                            <p class="sm:text-xl text-lg dark:text-grey text-bodytext">{!! $blog->excerpt !!}</p>
                        </div>
                        <div class="text-right">
                            <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="btn py-10 px-20 sm:h-60 rounded-6xl arrow-btn flairBtn group" data-block="button">
                                <span class="button-flair-wrapper">
                                    <span class="button-flair"></span>
                                </span>
                                <span class="relative md:w-82 md:h-42 w-62 h-32">
                                    <svg class=" size-full duration-500 rotate-[-30deg]" viewBox="0 0 82 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path class="hover-fill dark:fill-white fill-secondary" d="M78.0488 20.5122L78.0488 22.4634L4.56911e-05 22.4634L4.57764e-05 20.5122L78.0488 20.5122Z" fill="white"/>
                                        <path class="hover-stroke dark:stroke-white stroke-secondary" d="M59.5122 0.999999C63.8949 12.122 68.2603 16.872 79.0244 21.4598C67.888 25.6573 63.5473 29.5287 59.5122 41" stroke="white" stroke-width="2"/>
                                    </svg>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>
</section>