<section class="lg:py-140 sm:py-100 py-60 bg-linear-(--bg1-gradient) overflow-hidden">
    <div class="container relative z-1">
        <div class="grid grid-cols-12 gap-20 mb-70">
            <div class="lg:col-span-6 col-span-12">
                <div class="lg:mb-0 mb-20">
                    @if(isset($args['subtitle']) && $args['subtitle'] != '')
                    <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                    @endif
                    <h2 class="lg:text-[80px]/90 sm:text-5xl text-4xxl lg:mb-30 mb-10 text-white headline2">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                    @if(isset($args['description']) && $args['description'] != '')
                    <p class="text-grey sm:text-2xl text-lg font-light">{{ $args['description'] }}</p>
                    @endif
                </div>
            </div>
            <div class="lg:col-span-6 col-span-12">
                <div class="lg:text-center">
                    <span class="text-lightgrey">{{ isset($args['partner_title']) ? $args['partner_title'] : '' }}</span>
                    <div class="p-0.5 rounded-md bg-[linear-gradient(90deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.2)_47.5%,rgba(255,255,255,0)_100%)] my-20"></div>
                    <div class="w-full overflow-hidden relative after:content-[''] after:absolute after:left-0 after:top-0 after:size-full after:bg-linear-(--swiper-gradient) after:z-10">
                        <div class="flex items-center gap-70 flex-nowrap animate-ticker">
                             @php
                            $images = explode(',', @$args['image_gallery']);
                            @endphp
                            @if(isset($images))
                                @foreach ($images as $image) 
                                    <div class="text-center">
                                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="" class="min-w-105 object-contain">
                                    </div>
                                @endforeach
                                @foreach ($images as $image) 
                                    <div class="text-center">
                                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="" class="min-w-105 object-contain">
                                    </div>
                                @endforeach
                                @foreach ($images as $image) 
                                    <div class="text-center">
                                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="" class="min-w-105 object-contain">
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="grid grid-cols-12 gap-20">
            @if(isset($args['item']))
                @foreach($args['item'] as $index => $value)
                    @if($index == 0)
                    <div class="lg:col-span-3 sm:col-span-6 col-span-12 max-lg:!transform-none" data-speed="clamp(1.25)">
                        <div class="bg-white/90 p-10 rounded-2xl wow fadeInUp" data-wow-delay="0.4s">
                            <div class="bg-white flex items-center justify-center h-212 w-full rounded-xxl">
                                <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" alt="">
                            </div>
                            <div class="xl:p-30 p-20">
                                <h5 class="text-xl text-dark">{{ isset($value['title']) ? $value['title'] : '' }}</h5>
                                <p class="text-base text-[#77775B]">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($index == 1)
                    <div class="lg:col-span-3 sm:col-span-6 col-span-12 xl:translate-y-55 max-lg:!transform-none" data-speed="0.9">
                        <div class="bg-white/90 p-10 rounded-2xl wow fadeInUp" data-wow-delay="0.6s">
                            <div class="bg-white flex items-center justify-center h-212 w-full rounded-xxl">
                                <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" alt="">
                            </div>
                            <div class="xl:p-30 p-20">
                                <h5 class="text-xl text-dark">{{ isset($value['title']) ? $value['title'] : '' }}</h5>
                                <p class="text-base text-[#77775B]">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($index == 2)
                    <div class="lg:col-span-3 sm:col-span-6 col-span-12 xl:-translate-y-100 max-lg:!transform-none" data-speed="1">
                        <div class="bg-white/90 p-10 rounded-2xl wow fadeInUp" data-wow-delay="0.8s">
                            <div class="bg-white flex items-center justify-center h-212 w-full rounded-xxl">
                                <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" alt="">
                            </div>
                            <div class="xl:p-30 p-20">
                                <h5 class="text-xl text-dark">{{ isset($value['title']) ? $value['title'] : '' }}</h5>
                                <p class="text-base text-[#77775B]">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($index == 3)
                    <div class="lg:col-span-3 sm:col-span-6 col-span-12 xl:translate-y-25 max-lg:!transform-none" data-speed="clamp(0.9)">
                        <div class="bg-white/90 p-10 rounded-2xl wow fadeInUp" data-wow-delay="1s">
                            <div class="bg-white flex items-center justify-center h-212 w-full rounded-xxl">
                                <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" alt="">
                            </div>
                            <div class="xl:p-30 p-20">
                                <h5 class="text-xl text-dark">{{ isset($value['title']) ? $value['title'] : '' }}</h5>
                                <p class="text-base text-[#77775B]">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @endif
                @endforeach
            @endif
        </div>
    </div>
    <div class="absolute left-0 bottom-0 z-0 w-full bg-primary mask-[url(../images/background/bg16.png)] mask-cover">
        <img class="mix-blend-darken" src="{{ theme_asset('images/background/bg16.png') }}" alt="">
    </div>
</section>