<section class="noice-overlay">
    <div class="xl:py-68 pb-50 pt-20">
        <div class="container-full">
            @if(isset($args['item']))
            @foreach($args['item'] as $key => $value)
            <div class="content--sticky xl:sticky xl:top-0 dark:bg-card bg-[#24262B]">
                <div class="grid grid-cols-12 xl:gap-20">
                    <div class="xl:col-span-6 col-span-12">
                        <div class="relative z-1 h-full">
                            <div class="overflow-hidden xl:h-auto sm:h-600 h-300">
                                <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" alt="" class="content-img size-full object-cover">
                            </div>
                        </div>
                    </div>
                    <div class="xl:col-span-6 col-span-12">
                        <div class="3xl:ps-112 3xl:pe-282 px-15 xl:pt-141 xl:pb-120 py-30 flex flex-col h-full">
                            <div class="flex-1">
                                @if(isset($value['subtitle']) && $value['subtitle'] != '')
                                <span class="text-2xl text-white mb-5 block">{{ $value['subtitle'] }}</span>
                                @endif
                                @if(isset($value['title']) && $value['title'] != '')
                                <h2 class="lg:text-5xl/65 text-4xl mb-10 text-white">
                                    {{ $value['title'] }}
                                </h2>
                                @endif
                                @if(isset($value['description']) && $value['description'] != '')
                                <p class="sm:text-xl text-lg/30 text-bodytext mb-10">{{ $value['description'] }}</p>
                                @endif
                            </div>
                            <div class="md:flex items-center gap-18">
                                @if(isset($value['button_text']) && $value['button_text'] != '')
                                <a href="{{ @$value['button_link'] }}" class="btn style-1 btn-primary p-2 md:mb-0 mb-10 group button--stroke flairBtn magneticBtn" data-block="button">
                                    <span class="button-flair__wrapper">
                                        <span class="button-flair"></span>
                                    </span>
                                    <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ $value['button_text'] }}</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-1">
                                        <i class="fa-solid fa-arrow-right text-sm"></i>
                                    </span>
                                </a>
                                @endif
                                <div class="flex items-center gap-14">
                                    <div>
                                        @php
                                        $images = explode(',', @$value['image_gallery']);
                                        @endphp
                                        @if(isset($images))
                                            @foreach ($images as $image) 
                                               <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="" 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">
                                            @endforeach
                                        @endif
                                   </div>
                                   @if(isset($value['gallery_text']) && $value['gallery_text'] != '')
                                    <div>
                                        <span class="sm:text-xl text-base text-white block">{!! $value['gallery_text'] !!}</span>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</section>
