<section class="noice-overlay overflow-hidden">
    <div class="">
        <div class="container-full">
            <div class="hidden">
                <h2 class="xl:text-6xl md:text-5xl text-4xl">Our Work</h2>
            </div>
            <div class="main overflow-x-hidden">
                <div class="horizontal-sliders flex flex-no-wrap xl:w-[500%] overflow-x-hidden">
                    @php
                        $images = explode(',', @$args['image_gallery']);
                    @endphp
                    @if(isset($images))
                        @foreach ($images as $image) 
                            <div class="slide">
                                <div class="relative overflow-hidden">
                                    <div class="media">
                                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="">
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="fixed top-20 left-20 size-60 z-9999 opacity-0 duration-500 pointer-events-none bg-progress rounded-full p-5 circle-progress">
        <svg class="size-full -rotate-90" viewBox="0 0 100 100">
            <circle class="stroke-transparent fill-none stroke-5" cx="50" cy="50" r="45" />
            <circle class="progress-ring stroke-primary fill-none stroke-5" cx="50" cy="50" r="45" />
            <text x="50%" y="54%" text-anchor="middle" class="fill-white text-2xxl font-medium rotate-90 origin-center progress-text">0%</text>
        </svg>
    </div>
</section>