<section class="main-banner overflow-hidden pt-130 pb-50 bg-linear-(--banner-gradient) z-0 noice-overlay">
    <div class="container">
        <div class="grid grid-cols-12 gap-20">
            <div class="lg:col-span-7 col-span-12 lg:order-[0] order-1">
                <div class="xl:pt-105 lg:pt-50 xl:pe-70">
                    @if(isset($args['title']) && $args['title'] != '')
                    <h2 class="xl:text-7xl/80 md:text-5xl text-[43px]/50 font-semibold text-black sm:mb-40 mb-20">{{ $args['title'] }}</h2>
                    @endif
                    <div class="flex gap-12 xl:mb-100 sm:mb-50 mb-20 md:flex-row flex-col">
                        @if(isset($args['subtitle']) && $args['subtitle'] != '')
                        <div class="min-w-90">
                            <p class="text-lg/28 font-normal text-black">{{ $args['subtitle'] }}</p>
                        </div>
                        <div class="min-w-80 h-1 md:mt-15 bg-secondary md:me-40"></div>
                        @endif
                        @if(isset($args['description']) && $args['description'] != '')
                        <div>
                            <p class="sm:text-xl text-lg/28 font-normal text-black">{{ $args['description'] }}</p>
                        </div>
                        @endif
                    </div>
                    <div class="flex sm:gap-40 gap-20">
                        <a href="javasript:void(0);">
                            <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['youtube_image']) }}" alt="">
                        </a>
                        @if(isset($args['youtube_link']) && $args['youtube_link'] != '')
                        <div class="flex flex-col">
                            <button data-type="youtube" data-src="{{ $args['youtube_link'] }}" class="block flex-1 text-start cursor-pointer">
                                <div class="inline-block size-60 leading-60 text-center rounded-full bg-secondary text-white duration-500 hover:bg-white hover:text-dark mb-21 magneticBtn">
                                    <i class="fa-solid fa-play"></i>
                                </div>
                                <span class="text-lg block">{{ @$args['youtube_text'] }}</span>
                            </button>
                            <span class="text-sm block max-w-170">{{ @$args['youtube_text_2'] }}</span>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="lg:col-span-5 col-span-12">
                <div class="lg:w-[50vw] lg:float-left lg:h-full sm:h-500 h-300">
                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="" class="lg:size-auto size-full object-cover">
                </div>
            </div>
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg2.png') }}" alt="bg2" class="absolute z-1 animate-move w-127 h-148 3xl:top-[15%] top-[12%] left-[8%] mix-blend-luminosity max-xl:hidden">
</section>