<section class="main-banner dark:bg-bodybg bg-white lg:pt-210 sm:pt-170 pt-130 sm:pb-150 pb-30 relative after:content-[''] after:absolute after:top-200 after:left-0 after:size-full dark:after:bg-[url('../images/background/bg14.png')] after:bg-no-repeat after:mix-blend-lighten after:pointer-events-none after:bg-contain max-sm:after:hidden dark:after:opacity-100">
    <div class="container">
        <div class="grid grid-cols-12 gap-20 items-start">
            <div class="lg:col-span-8 col-span-12">
                @if(isset($args['title']) && $args['title'] != '')
                <h1 class="md:text-7xl sm:text-6xl text-[40px]/42 font-bold">{!! $args['title'] !!}</h1>
                @endif
            </div>
            <div class="lg:col-span-4 col-span-12 sm:pt-40">
                @if(isset($args['description']) && $args['description'] != '')
                <div class="py-16 ps-25 sm:pe-41 pe-20 border-dashed border-black dark:border-primary border-0 relative h-full max-w-430 sm:mb-40 mb-20 
                after:content-[''] after:absolute after:right-[calc(calc(100vw_-_1360px)_/_-2)] after:top-1/2 after:-translate-y-1/2 after:h-1 after:border-t after:border-dashed after:border-black dark:after:border-primary after:w-[calc(calc(100vw_-_1360px)_/_2)] lg:after:block after:hidden before:content-[''] before:absolute before:right-1/2 before:-translate-x-1/2 before:top-[calc(calc(100vh_-_195px)_/_-2)] before:h-[calc(calc(100vh_-_200px)_/_2)] before:border-l before:border-dashed before:border-black dark:before:border-primary before:w-1 lg:before:block before:hidden
                ">
                    <div class="pxl-border-animated num-4">
                    <div class="pxl-border-anm bt w-full bw-yes dark:border-primary border-black" style="--bd-width: 1px 0 0 0; border-style: dashed;"></div>
                    <div class="pxl-border-anm br h-full bw-yes dark:border-primary border-black" style="--bd-width: 0 1px 0 0; border-style: dashed;"></div>
                    <div class="pxl-border-anm bb w-full bw-yes dark:border-primary border-black" style="--bd-width: 0 0 1px 0; border-style: dashed;"></div>
                    <div class="pxl-border-anm bl h-full bw-yes dark:border-primary border-black" style="--bd-width: 0 0 0 1px; border-style: dashed;"></div>
                    </div>
                    <p class="sm:text-2xxl text-xl font-extralight dark:text-white text-dark">{{ $args['description'] }}</p>
                </div>
                @endif
                <div class="flex items-center gap-14">
                    <div>
                        @php
                        $images = explode(',', @$args['image_gallery']);
                        @endphp
                        @if(isset($images))
                            @foreach ($images as $image) 
                                <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" class="inline-block sm:size-60 size-40 -me-13 last:me-0 rounded-full border-2 border-card relative object-cover duration-500 hover:z-1" alt="Client Image">
                            @endforeach
                        @endif
                    </div>
                    @if(isset($args['gallery_text']) && $args['gallery_text'] != '')
                    <div>
                        <span class="sm:text-xl text-lg/24 dark:text-white text-dark block font-light capitalize">{!! $args['gallery_text'] !!}</span>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bg-primary bg-[url('../images/background/bg15.png')] bg-blend-multiply sm:mt-200 mt-100 img-zoom">
    <div class="container-fluid text-center">
        <div class="sm:-mt-263 -mt-100 inline-block">
            <div class="overflow-hidden rounded-2lg relative">
                <div class="img-box">
                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="" class="inline-block rounded-2lg animate-ScaleInOut">
                </div>
                @if(isset($args['youtube_link']) && $args['youtube_link'] != '')
                <button data-type="youtube" data-src="{{ $args['youtube_link'] }}" class="absolute sm:top-30 top-10 sm:right-30 right-10">
                    <span class="flex sm:size-60 size-40 items-center justify-center rounded-full bg-primary cursor-pointer duration-500 hover:bg-white sm:mb-21 magneticBtn">
                        <svg class="sm:size-24 size-15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.09615 2.03327C7.99855 1.86059 9.97443 1.71289 12 1.71289C14.0256 1.71289 16.0032 1.86059 17.904 2.03327L17.9079 2.03363C19.3215 2.1687 20.659 2.7063 21.6963 3.58201C22.7359 4.45958 23.4202 5.63359 23.5963 6.92497L23.5968 6.92812C23.8119 8.55061 24 10.2525 24 12.0005C24 13.7486 23.8101 15.4494 23.5989 17.0709L23.5982 17.076C23.4219 18.3673 22.7376 19.5414 21.6981 20.419C20.6607 21.2946 19.3234 21.8322 17.9097 21.9673L17.9055 21.9676C16.0014 22.1404 14.0238 22.288 12 22.288C9.97622 22.288 7.99857 22.1404 6.09614 21.9676L6.09211 21.9673C4.67839 21.8322 3.34104 21.2946 2.30367 20.419C1.26413 19.5414 0.579837 18.3673 0.403661 17.076L0.403236 17.0729C0.188033 15.4504 0 13.7485 0 12.0005C0 10.2525 0.188042 8.55206 0.403222 6.92822L0.403656 6.92497C0.579831 5.63359 1.26413 4.45958 2.30367 3.58201C3.34104 2.7063 4.67839 2.1687 6.09211 2.03365L6.09615 2.03327ZM16.1205 10.7118C16.4645 11.0855 16.7645 11.5306 16.7645 12.0006C16.7645 12.4706 16.4645 12.9158 16.1205 13.2895C15.7593 13.6819 15.2661 14.0833 14.7207 14.4714C13.6271 15.2495 12.2613 16.0169 11.1525 16.598C9.86292 17.2738 8.31981 16.436 8.20829 14.976C8.05632 12.9862 8.05632 11.0151 8.20829 9.02522C8.31981 7.56523 9.86292 6.72741 11.1525 7.40323C12.2613 7.98431 13.6271 8.75178 14.7207 9.52981C15.2661 9.91789 15.7593 10.3194 16.1205 10.7118Z" fill="#191B1D"/>
                        </svg>
                    </span>
                </button>
                @endif
            </div>
        </div>
    </div>
    <div class="container">
        <div class="lg:mt-120 sm:mt-80 mt-50 lg:pb-90 pb-50">
            <div class="grid grid-cols-12 gap-30">
                @php
                    $args['post_type'] = 'services';
                    $blogs = HelpDesk::elementPostsByArgs($args);
                @endphp
                @forelse($blogs as $blog)
                <div class="lg:col-span-3 sm:col-span-6 col-span-12 sm:mb-50 mb-30">
                    @php
                        $svg_icon = CustomFieldHelper::get_custom_field_value('cpt_'.$blog->post_type,'svg_icon',optional($blog)->id);
                        $cpt_category = optional($blog)->blog_categories->pluck('slug')->toArray();
                    @endphp
                    <div class="group">
                        <div class="sm:mb-30 mb-10">
                            <div class="inline-block duration-500 group-hover:scale-110">
                                {!! @$svg_icon !!}
                            </div>
                        </div>
                        <div class="sm:mb-30 mb-10">
                            <h4 class="text-2xl text-black">{{ $blog->title }}  </h4>
                            <p class="text-[#4B4B4B]">{!! $blog->excerpt !!}</p>
                        </div>
                        <div class="">
                            <a href="{{DzHelper::laraBlogLink($blog->id)}}" class="btn btn-outline style-2 btn-hover mb-20 group/second">
                                <span class="pxl-button-text relative z-1">Read More</span>
                                <span class="block ms-5 relative z-1">
                                    <svg class="group/second-hover:animate-toTopFromBottom" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M5.83337 14.1667L14.1667 5.83334" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M5.83337 5.83334H14.1667V14.1667" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                            </a>
                            <div class="relative h-1 w-full bg-black/10 after:content-[''] after:absolute after:top-0 after:left-0 after:h-1 after:w-0 after:bg-black after:duration-500 group-hover:after:w-full"></div>
                            <ul class="mt-20">
                                @foreach ($cpt_category as $cat)
                                @php
                                    $title = Str::title(str_replace('-', ' ', $cat));
                                @endphp
                                <li class="inline-block me-5"><a href="javascript:void(0);" class="py-1 px-8 text-sm bg-black/5 rounded hover:bg-black hover:text-white">{{ $title }}</a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>
</section>