<section class="2xl:py-180 lg:py-120 sm:py-80 py-50 hover-wrapper counter">
    <div class="hidden">
        <h2 class="xl:text-6xl md:text-5xl text-4xl">About us</h2>
    </div>
    <div class="container">
        <div class="grid grid-cols-12 gap-20">
            @if(isset($args['title']) && $args['title'] != '')
            <div class="lg:col-span-8 col-span-12 lg:mb-0 sm:mb-20 mb-10 pxl-heading-scroll-effect">
                <p class="xl:text-4xxl sm:text-4xl text-2xl dark:text-white text-secondary heading-text">{{ $args['title'] }}</p>
            </div>
            @endif
            @if(isset($args['button_text']) && $args['button_text'] != '')
            <div class="lg:col-span-4 col-span-12 wow clip-right-animation lg:hidden block sm:mb-20 mb-10">
                <div class="size-full flex justify-baseline">
                    <a href="{{ @$args['button_link'] }}" class="btn p-0 dark:text-white text-secondary text-2xxl font-light mt-auto capitalize">{{ $args['button_text'] }}
                        <span class="ms-10">
                            <svg width="53" height="27" viewBox="0 0 53 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="dark:fill-white fill-secondary" d="M48.7812 13L48.7812 15L0.000778111 15L0.000778198 13L48.7812 13Z" fill="white" fill-opacity="0.5"/>
                                <path class="dark:stroke-white stroke-secondary" d="M37.1955 0.999999C39.9347 7.95123 42.6631 10.92 49.3906 13.7874C42.4304 16.4108 39.7174 18.8304 37.1955 26" stroke="white" stroke-opacity="0.5" stroke-width="2"/>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
            @endif

            @php
                $items = @$args['item'] ?? [];
                $first = [];
                if(count($items) != 0){
                    $first = $items[0];
                }
                $others = array_slice($items, 1);
            @endphp
            <div class="lg:col-span-4 sm:col-span-6 col-span-12 wow clip-right-animation">
                <div class="card bg-white lg:p-45 p-35 rounded-2xl lg:min-h-350 duration-500 info-card hover-active">
                    <div class="flex-1 mb-30">
                        @if(isset($first['counter_number']) && $first['counter_number'] != '')
                        <span class="lg:text-9xl sm:text-7xxl text-5xxl font-title mb-40 text-heading duration-500 value" data-akhi="{{ $first['counter_number'] }}">{{ $first['counter_number'] }}</span>
                        @endif
                        @if(isset($first['symbol']) && $first['symbol'] != '')
                        <span class="lg:text-9xl sm:text-7xxl text-5xxl font-base mb-40 text-heading duration-500">{{ $first['symbol'] }}</span>
                        @endif
                    </div>
                    @if(isset($first['text']) && $first['text'] != '')
                    <div class="border-t border-lightgrey pt-20 xl:pe-80 duration-500 content">
                        <p class="sm:text-xl text-lg text-dark uppercase font-title duration-500">{{ $first['text'] }}</p>
                    </div>
                    @endif
                </div>
            </div>
            @if(isset($args['button_text']) && $args['button_text'] != '')
            <div class="lg:col-span-4 sm:col-span-6 col-span-12 wow clip-right-animation lg:block hidden">
                <div class="size-full flex justify-baseline">
                    <a href="{{ @$args['button_link'] }}" class="btn p-0 dark:text-white text-secondary text-2xxl font-light mt-auto capitalize">{{ $args['button_text'] }}
                        <span class="ms-10">
                            <svg width="53" height="27" viewBox="0 0 53 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="dark:fill-white fill-secondary" d="M48.7812 13L48.7812 15L0.000778111 15L0.000778198 13L48.7812 13Z" fill="white" fill-opacity="0.5"/>
                                <path class="dark:stroke-white stroke-secondary" d="M37.1955 0.999999C39.9347 7.95123 42.6631 10.92 49.3906 13.7874C42.4304 16.4108 39.7174 18.8304 37.1955 26" stroke="white" stroke-opacity="0.5" stroke-width="2"/>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
            @endif
            @foreach($others as $key => $value)
            <div class="lg:col-span-4 sm:col-span-6 col-span-12 wow clip-left-animation">
                <div class="card bg-white lg:p-45 p-35 rounded-2xl lg:min-h-350 duration-500 info-card hover-active">
                    <div class="flex-1 mb-30">
                        @if(isset($value['counter_number']) && $value['counter_number'] != '')
                        <span class="lg:text-9xl sm:text-7xxl text-5xxl font-title mb-40 text-heading duration-500 value" data-akhi="{{ $value['counter_number'] }}">{{ $value['counter_number'] }}</span>
                        @endif
                        @if(isset($value['symbol']) && $value['symbol'] != '')
                        <span class="lg:text-9xl sm:text-7xxl text-5xxl font-base mb-40 text-heading duration-500">{{ $value['symbol'] }}</span>
                        @endif
                    </div>
                    @if(isset($value['text']) && $value['text'] != '')
                    <div class="border-t border-lightgrey pt-20 xl:pe-80 duration-500 content">
                        <p class="sm:text-xl text-lg text-dark uppercase font-title duration-500">{{ $value['text'] }}</p>
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>