<div class="2xl:pt-40 pt-14">
   <section class="main-banner relative xl:h-screen xl:min-h-950 xl:max-h-950 overflow-hidden before:bg-[url('../images/background/bg25.png')] before:size-full before:z-1 before:bg-center before:bg-no-repeat before:bg-cover before:absolute bg-no-repeat bg-cover 2xl:mx-40 mx-14 rounded-2xl">
        <img class="size-full object-cover absolute scale-110 -mt-100" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['background_image']) }}" alt="img" data-speed=".20">
        <div class="container relative z-1">
            <div class="grid grid-cols-12 gap-20 items-start sm:pt-130 pt-120">
                <div class="xl:col-span-6 col-span-12 max-3xl:pl-80 max-md:pl-0">
                    <div class="3xl:pt-160 md:pt-60">
                        <div class="sm:mb-50 mb-20">
                            @if(isset($args['subtitle']) && $args['subtitle'] != '')
                            <span class="text-lg font-medium text-white py-10 px-20 rounded-2lg border border-white/10 backdrop-blur-[20px] bg-white/5">{{ $args['subtitle'] }}</span>
                            @endif
                            <h1 class="2xl:text-7xl/75 xl:text-5xxl lg:text-5xl sm:text-4xxl text-3xl font-semibold headline mt-20 text-white">{{ isset($args['title']) ? $args['title'] : '' }}</h1>
                            @if(isset($args['description']) && $args['description'] != '')
                            <p class="text-white/70 mt-30">{{ $args['description'] }}</p>
                            @endif
                        </div>
                        <div class="flex items-center">
                            @if(isset($args['button_text']) && $args['button_text'] != '')
                            <a href="{{ isset($args['button_link']) ? $args['button_link'] : 'javascript:void(0);' }}" class="style-4 btn bg-white group p-5 sm:mr-40 !h-60 group button--stroke flairBtn border border-white hover:!border-primary">
                                <span class="button-flair"></span>
                                <span class="button__label sm:pe-70 sm:ps-25 px-8 text-xl text-secondary z-0 group-hover:text-primary duration-500">{{ $args['button_text'] }}</span>
                                <span class="overflow-hidden bg-primary rounded-full size-50 inline-flex items-center justify-center z-0">
                                    <svg class="group-hover:animate-toTopFromBottom" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7 7H17V17" stroke="var(--secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M7 17L17 7" stroke="var(--secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                            </a>
                            @endif
                            @if(isset($args['youtube_link']) && $args['youtube_link'] != '')
                            <div class="relative -top-1">
                                <svg viewBox="0 0 200 100" class="absolute -top-20 left-0 size-full text-3xl fill-white"> <path id="curve" d="M 20,80 A 80,80 0 0,1 180,80" fill="transparent"></path> <text> <textPath href="#curve" startOffset="50%" text-anchor="middle">Play Video </textPath> </text> </svg>
                                <button data-type="youtube" data-src="{{ $args['youtube_link'] }}" class="cursor-pointer size-80 flex flex-wrap flex-col items-center justify-center relative p-10 before:absolute before:inset-0 before:bg-white/5 before:rounded-full before:scale-[0.7] before:duration-500 hover:before:scale-100">
                                    <span class="inline-block size-60 leading-60 text-center rounded-full bg-primary duration-500 dark:hover:bg-bodyfg dark:hover:text-dark hover:bg-dark text-secondary">
                                        <i class="fa-solid fa-play"></i>
                                    </span>
                                </button>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="sm:flex items-center relative 3xl:-bottom-180 2xl:-bottom-97 xl:-bottom-223 -bottom-30 xl:w-full lg:w-[70%]">
                        @if(isset($args['counter_1_number']) && $args['counter_1_number'] != '')
                        <div class="max-sm:mb-10 border-t border-l border-white/5 rounded-tl-xxl max-xl:rounded-bl-xxl max-sm:rounded-br-xxl max-sm:rounded-tr-xxl py-10 3xl:px-30 2xl:px-18 px-14 dark:text-white sm:w-1/2 bg-white/5 backdrop-blur-[20px] flex items-center shadow-[inset_0px_2px_2px_rgba(255,255,255,0.1)]">
                            <span class="2xl:text-4xxxl text-4xxl font-semibold 2xl:mr-15 mr-7 text-white"><span class="value" data-akhi="{{ $args['counter_1_number'] }}">{{ $args['counter_1_number'] }}</span>{{ isset($args['counter_1_symbol']) ? $args['counter_1_symbol'] : '' }}</span>
                            <p class="3xl:text-lg lg:text-base text-sm font-medium text-white">{{ isset($args['counter_1_text']) ? $args['counter_1_text'] : '' }}</p>
                        </div>
                        @endif
                        @if(isset($args['counter_2_number']) && $args['counter_2_number'] != '')
                        <div class="bg-primary py-10 3xl:px-30 2xl:px-18 px-14 sm:w-1/2 rounded-tr-2lg max-xl:rounded-br-2lg max-sm:rounded-bl-2lg max-sm:rounded-tl-2lg">
                            <div class="flex items-center">
                                <span class="font-semibold xl:text-4xxxl text-4xxl text-secondary"><span class="value" data-akhi="{{ $args['counter_2_number'] }}">{{ $args['counter_2_number'] }}</span>{{ isset($args['counter_2_symbol']) ? $args['counter_2_symbol'] : '' }}</span>
                                <p class="2xl:ml-15 ml-7 3xl:text-lg lg:text-base text-sm font-medium text-secondary">{{ isset($args['counter_2_text']) ? $args['counter_2_text'] : '' }}</p>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="xl:col-span-6 col-span-12">
                    <div class="xl:w-[50vw] xl:float-left relative xl:right-100 right-0 3xl:bottom-0 2xl:-bottom-100 xl:-bottom-206 -bottom-60 xl:ml-10">
                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="img" class="wow bounceInUp object-cover" data-wow-delay="0.2s">
                    </div>    
                </div>
            </div>
        </div>
        @if(isset($args['social_link']) && $args['social_link'] == "1")
        <div class="absolute left-44 top-[30%] -translate-x-1/2 max-sm:hidden z-1">
            <ul class="mb-0 flex gap-20 items-center [writing-mode:vertical-rl] relative">
                {!! get_social_icons('','text-white/30 text-base font-medium relative duration-500 flex items-center flex-col hover:text-primary after:absolute after:-left-2 after:top-0 after:w-px after:h-0 after:bottom-auto after:bg-primary after:duration-500 hover:after:w-px hover:after:h-full','',true) !!}
            </ul>
        </div>
        @endif
    </section>
</div>