<section class="main-banner overflow-hidden lg:pt-205 sm:pt-160 pt-120 lg:pb-160 sm:pb-80 pb-40 z-0 noice-overlay">
    <div class="container-lg">
        <div class="grid grid-cols-12 gap-20">
            <div class="lg:col-span-7 col-span-12">
                <div class="xl:ps-160 xl:pe-100">
                    @if(isset($args['title']) && $args['title'] != '')
                    <h2 class="xl:text-7xl/80 md:text-5xl text-4xl sm:mb-40 mb-20 font-medium ">{{ $args['title'] }}</h2>
                    @endif
                    <div class="flex gap-12 mb-30 md:flex-row flex-col ">
                        @if(isset($args['subtitle']) && $args['subtitle'] != '')
                        <div class="min-w-90">
                            <p class="text-lg/28 font-normal dark:text-white text-dark">{{ $args['subtitle'] }}</p>
                        </div>
                        <div class="min-w-80 h-1 md:mt-15 dark:bg-white bg-textlight md:me-40"></div>
                        @endif
                        @if(isset($args['description']) && $args['description'] != '')
                        <div>
                            <p class="sm:text-xl text-lg/28 font-normal dark:text-bodytext text-textlight">{{ $args['description'] }}</p>
                        </div>
                        @endif
                    </div>
                    <div class="">
                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="" class="w-full">
                    </div>
                </div>
            </div>
            <div class="lg:col-span-5 col-span-12">
                <div class="md:ps-40">
                    <div class="relative max-w-530">
                        @php
                        $images = explode(',', @$args['image_gallery']);
                        @endphp
                        @if(isset($images))
                            @foreach ($images as $index => $image) 
                                @if($index == 0)
                                <div class="flex items-center justify-star">
                                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="" class="sm:w-auto w-1/2">
                                </div>
                                @elseif($index == 1)
                                <div class="flex items-center justify-end sm:-mt-180 -mt-90 sm:ms-0 -ms-40">
                                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="" class="sm:w-auto w-1/2">
                                </div>
                                @elseif($index == 2)
                                <div class="flex items-center justify-start -mt-90 relative ">
                                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="" class="sm:w-auto w-1/2">
                                </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-8%] left-[-47%] -z-1 pointer-events-none">
    <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute top-[-30%] right-[0%] max-xl:w-[60%] -z-1 pointer-events-none">
</section>