 <section class="pt-80 relative after:absolute after:bg-primary after:size-205 after:-bottom-60 after:-left-48 after:rounded-full after:blur-[142px] after:-z-1 overflow-hidden 4xl:h-screen 4xl:min-h-1048">
    <div class="container-fluid lg:!mx-80 !mx-20 h-full">
        <div class="row h-full">
            <div class="lg:w-[50%] w-full !p-0">
                <div class="xl:mb-40 mb-20 md:pt-80 pt-60 relative after:absolute after:-z-1 after:h-5 after:w-1320 after:bottom-[6%] 4xl:after:left-[66%] 3xl:after:left-[56%] 2xl:after:left-[47%] xl:after:left-[58%] lg:after:left-[72%] md:after:left-[42%] sm:after:left-[45%] after:left-[50%] dark:after:bg-white after:bg-black dark:before:bg-white before:bg-black before:absolute before:-z-1 before:h-5 4xl:before:left-[-20%] 3xl:before:left-[-22%] 2xl:before:left-[-27%] xl:before:left-[-35%] lg:before:left-[-43%] md:before:left-[-25%] sm:before:left-[-34%] before:left-[-59%] 4xl:before:top-[52%] md:before:top-[55%] sm:before:top-[54%] before:top-[57%] before:w-200">
                    <h1 class="mail-footer 4xl:text-[180px]/177 3xl:text-10xl/140 md:text-[100px]/110 sm:text-7xxl/90 text-5xl/60 dark:text-white uppercase">{{ isset($args['title']) ? $args['title'] : '' }}</h1>
                </div>
                @if(isset($args['description']) && $args['description'] != '')
                <div class="flex items-center wrapper overflow-hidden border-l-5 border-primary pl-19">
                    <p class="introline sm:text-lg text-sm leading-28 max-w-400 dark:text-white font-light">{{ $args['description'] }}</p>					
                </div>
                @endif
                <div class="flex 4xl:gap-280 3xl:gap-160 2xl:gap-64 lg:mt-175 mt-100">
                    @if(isset($args['social_link']) && $args['social_link'] == "1")
                    <ul class="flex items-center text-sm text-secondary gap-5 2xl:mt-40">
                        {!! get_social_icons('','dark:bg-grey/30 bg-grey/80 text-center !leading-[45px] size-45 text-white rounded-md text-lg relative z-1 after:absolute after:inset-0 after:bg-primary after:-z-1 after:size-0 hover:after:size-full after:duration-500 overflow-hidden','') !!}
                    </ul>
                    @endif
                    <div class="animate-topshap relative z-2 sm:bottom-28 bottom-12 after:absolute 2xl:after:size-200 sm:after:size-120 after:size-80 dark:after:bg-white/10 after:bg-black/10 after:-translate-y-1/2 after:translate-x-1/2 after:top-1/2 after:right-1/2 after:-z-1 after:rounded-full before:absolute before:z-1 dark:before:bg-white/10 before:bg-black/10 2xl:before:size-125 sm:before:size-80 before:size-60 before:rounded-full 2xl:before:-top-60 before:-top-40 2xl:before:-left-45 before:-left-1"><img class="2xl:w-full w-[50%] relative top-1/2 -right-1/2 -translate-1/2" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['small_image']) }}" alt="cameralimg"></div>
                </div>
            </div>
            <div class="lg:w-[50%] w-full !p-0 self-end relative">
                <div class="xl:w-[60vw] xl:float-left relative 2xl:right-180 xl:right-120 right-0 xl:-bottom-8 bottom-0 after:absolute after:size-720 after:rounded-full after:bg-primary after:blur-[342px] after:-translate-y-1/2 after:translate-x-1/2 after:top-1/2 after:right-1/2 after:-z-1">
                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="img" class="wow bounceInRight" data-wow-delay="0.2s">
                </div>
                <div class="animate-topshap text-center absolute z-1 xl:bottom-180 lg:bottom-40 sm:bottom-80 bottom-40 xl:-left-138 lg:-left-40 left-0 rotate-[-11deg]"><span class="font-protest 4xl:text-[105px]/100 xl:text-7xxxl/80 sm:text-5xl/60 text-4xl/40 font-light text-white headline">{!! isset($args['image_text']) ? $args['image_text'] : '' !!}</span></div>
            </div>
        </div>
    </div>
</section>
