<div class="noice-overlay about-us-1-section">
    <section class="xl:pb-100 pb-60">
        <div class="container relative">
            <div class="grid grid-cols-12 md:gap-60 gap-20">
                <div class="3xl:col-span-5 lg:col-span-4 col-span-12">
                    <div class="relative my-sticky 3xl:w-425 w-full sm:h-557 h-450 after:content-[''] after:absolute after:top-0 after:left-0 after:size-full after:bg-primary after:opacity-80 after:rounded-2lg after:mix-blend-soft-light">
                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="" class="size-full object-cover rounded-2lg relative z-1" >
                    </div>
                </div>
                <div class="3xl:col-span-7 lg:col-span-8 col-span-12 lg:pt-100">
                    <div class="grid grid-cols-12 3xl:gap-60 gap-20 xl:mb-125 mb-50">
                        <div class="3xl:col-span-5 xl:col-span-4 col-span-6">
                            @if(isset($args['counter_1_digit']) && $args['counter_1_digit'] != '')
                            <h2 class="xl:text-8xl/70 text-6xl text-primary md:mb-30 mb-10">{{ $args['counter_1_digit'] }}{{ @$args['counter_1_symbol'] }}</h2>
                            @endif
                            @if(isset($args['counter_1_text']) && $args['counter_1_text'] != '')
                            <span class="sm:text-2xl text-lg dark:text-white text-dark block xl:max-w-240 font-title font-thin">{{ $args['counter_1_text'] }}</span>
                            @endif
                        </div>
                        <div class="3xl:col-span-5 xl:col-span-4 col-span-6">
                            @if(isset($args['counter_2_digit']) && $args['counter_2_digit'] != '')
                            <h2 class="xl:text-8xl/70 text-6xl text-primary md:mb-30 mb-10">{{ $args['counter_2_digit'] }}{{ @$args['counter_2_symbol'] }}</h2>
                            @endif
                           @if(isset($args['counter_2_text']) && $args['counter_2_text'] != '')
                            <span class="sm:text-2xl text-lg dark:text-white text-dark block xl:max-w-240 font-title font-thin">{{ $args['counter_2_text'] }}</span>
                            @endif
                        </div>
                        <div class="3xl:col-span-2 col-span-4 xl:block hidden">
                            <div class="3xl:absolute top-[6%] right-[0%]">
                                @if(isset($args['circle_btn_title']) && $args['circle_btn_title'] != '')
                                <a 
                                    class="w-180 relative rounded-full md:block hidden"
                                    href="{{ isset($args['circle_btn_url']) ? $args['circle_btn_url'] : 'javascript:void(0);' }}"
                                >
                                    <div class="flex justify-center items-center size-180 rounded-full animate-rotate text-center text-row word-rotate-box bg-linear-(--btn-gradient) after:content-[''] after:absolute after:top-0 after:left-0 after:size-full after:-z-1 after:rounded-full">
                                        <span class="word-rotate">{{ $args['circle_btn_title'] }}</span>
                                        <svg class="block animate-rotate [animation-direction:reverse] badge__emoji" width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M26.25 63.75L63.75 26.25" stroke="#1C1A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M26.25 26.25H63.75V63.75" stroke="#1C1A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>                                                
                                    </div>
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="mb-40">
                        @if(isset($args['subtitle']) && $args['subtitle'] != '')
                        <p class="sm:text-2xl text-lg dark:text-white text-heading mb-10">{{ $args['subtitle'] }}</p>
                        @endif
                        @if(isset($args['title']) && $args['title'] != '')
                        <h3 class="xl:text-6xl md:text-5xl text-4xl mb-7">{!! $args['title'] !!}</h3>
                        @endif
                        @if(isset($args['description']) && $args['description'] != '')
                        <p class="sm:text-2xl text-lg">{{ $args['description'] }}</p>
                        @endif
                    </div>
                    @if(isset($args['icon_box']))
                    <div class="grid grid-cols-12 lg:md:gap-50 gap-20">
                        @foreach($args['icon_box'] as $key => $value)
                        <div class="sm:col-span-6 col-span-12">
                            <div class="card bordergradient rounded-lg min-h-350">
                                <div class="p-40 pb-0 pe-50 flex-1">
                                    <span class="mb-20 block">
                                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['icon']) }}" alt="" >
                                    </span>
                                    <h4 class="text-2xl text-white">
                                        <a class="hover:text-primary" href="{{ @$value['redirect_button_url'] }}">{{ @$value['title'] }}</a>
                                    </h4>
                                </div>
                                @if(isset($value['redirect_button_text']) && $value['redirect_button_text'] != '')
                                <div class="p-40 pb-45">
                                    <div class="flex items-center gap-5 group overflow-hidden">
                                        <a href="{{ @$value['redirect_button_url'] }}" class="underline text-primary font-bold">{{ $value['redirect_button_text'] }}</a>
                                        <svg class="group-hover:animate-toTopFromBottom" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5.25 12.75L12.75 5.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M5.25 5.25H12.75V12.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
            <img src="{{ theme_asset('images/background/bg5.png') }}" alt="" class="absolute top-[14%] left-[-4%] -z-1 max-xl:hidden pointer-events-none">
            <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-8%] left-[-47%] -z-1 max-xl:hidden pointer-events-none">
        </div>
    </section>
</div>