<section class="main-banner overflow-hidden lg:pt-200 sm:pt-160 pt-120 z-0 h-auto noice-overlay">
    <div class="container">
        <div class="grid grid-cols-12 gap-20 lg:mb-106 mb-50">
            <div class="xl:col-span-8 col-span-12">
                <div class="xl:pe-50">
                    @if(isset($args['subtitle']) && $args['subtitle'] != '')
                    <span class="text-xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                    @endif
                    @if(isset($args['title']) && $args['title'] != '')
                    <h2 class="xl:text-7xl/80 md:text-5xl text-4xl font-medium">{{ $args['title'] }}</h2>
                    @endif
                </div>
            </div>
            <div class="xl:col-span-4 col-span-12">
                <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) }}" 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($args['gallery_text']) && $args['gallery_text'] != '')
                    <div>
                        <span class="sm:text-xl text-lg/24 dark:text-white text-dark block font-light">{!! $args['gallery_text'] !!}</span>
                    </div>
                    @endif
                </div>
                <hr class="border-t dark:border-white/20 border-black/20 my-30">
                @if(isset($args['description']) && $args['description'] != '')
                <p class="sm:text-xl text-lg">{{ $args['description'] }}</p>
                @endif
            </div>
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-90%] left-[-47%] -z-1 pointer-events-none">
    <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute top-[-80%] right-[0%] max-xl:w-[60%] -z-1 pointer-events-none">
</section>