 <section class="xl:pt-145 pt-45">
    <div class="container">
        <div class="grid grid-cols-12 2xl:gap-40 gap-20">
            <div class="xl:col-span-6 col-span-12">
                <div class="xl:mb-40 mb-20">
                    @if(isset($args['subtitle']) && $args['subtitle'] != '')
                    <span class="mb-10 inline-block text-lg font-medium dark:text-white text-secondary py-10 px-20 rounded-2lg border dark:border-white/10 border-secondary/10 backdrop-blur-[20px] dark:bg-white/5 bg-secondary/5">{{ $args['subtitle'] }}</span>
                    @endif
                    <h2 class="2xl:text-5xxl lg:text-5xl sm:text-4xxl text-3xl font-semibold headline dark:text-white text-secondary mb-20">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                    @if(isset($args['description']) && $args['description'] != '')
                    <p class="sm:text-xl text-lg font-normal">{{ $args['description'] }}</p>
                    @endif
                </div>
                <div class="grid grid-cols-12">
                    <div class="sm:col-span-6 col-span-12">
                        @if(isset($args['chart']) && $args['chart'] == "1")
                            <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['chart_image']) }}" class="rounded-xxl" alt="chart">
                        @endif
                    </div>	
                    <div class="sm:col-span-6 col-span-12 sm:ml-30 md:mt-14 mt-20">
                        @if(isset($args['exprience_year']) && $args['exprience_year'] != '')
                        <div class="skrollable skrollable-between max-xxl:hidden bg-white size-156 relative rounded-full max-sm:mx-auto" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" style="transform: translateY(-12.8719px);">
                            <div class="word-rotate-box style-2 !bg-transparent animate-rotate size-[155px]">
                                <svg class="absolute -rotate-2 top-16 left-8" width="70" height="80" viewBox="0 0 73 99" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M72.9496 1.40506C72.8656 0.632279 72.1708 0.0726486 71.3996 0.170049C60.5409 1.54147 50.0676 5.10012 40.6147 10.6362C30.7568 16.4095 22.2316 24.2028 15.599 33.5043C8.96632 42.8058 4.37625 53.4052 2.13016 64.6063C-0.0236346 75.3472 0.0246055 86.4084 2.26627 97.1214C2.42548 97.8822 3.18097 98.3568 3.93894 98.1843V98.1843C4.6969 98.0119 5.17028 97.2579 5.01155 96.4969C2.85765 86.1712 2.81443 75.5113 4.89017 65.1597C7.0582 54.3479 11.4888 44.1169 17.8909 35.1386C24.2931 26.1604 32.522 18.6379 42.0373 13.0653C51.1476 7.7298 61.2398 4.29719 71.7038 2.96896C72.475 2.87107 73.0336 2.17783 72.9496 1.40506V1.40506Z" fill="var(--color-primary)"/>
                                </svg>
                                <span class="word-rotate one-third text-bodytext">{{ isset($args['exprience_text']) ? $args['exprience_text'] : '' }}</span>
                                <span class="counter block animate-rotate [animation-direction:reverse] badge__emoji value" data-akhi="{{ $args['exprience_year'] }}">{{ $args['exprience_year'] }}</span>  
                            </div>
                        </div>
                        @endif
                        <div class="mb-28 max-sm:text-center">
                            <p class="text-xl drak:text-secondary font-semibold mb-12"> {{ isset($args['gallery_title']) ? $args['gallery_title'] : '' }}</p>
                            <div class="flex items-center gap-14 md:mt-0 mt-10 border-b dark:border-bordercolor border-black/20 pb-20 max-sm:justify-center">
                                <div>
                                    @php
                                    $images = explode(',', @$args['client_images']);
                                    @endphp
                                    @if(isset($images))
                                        @foreach ($images as $image) 
                                            <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="img" class="inline-block sm:size-45 size-40 -me-15 last:me-0 rounded-full border-2 border-white relative object-cover duration-500 hover:z-1">
                                        @endforeach
                                    @endif
                                </div>
                                <div>
                                    <div class="flex 2xl:gap-5 dark:text-bodytext text-textlight gap-1 text-base font-medium">
                                        {{ isset($args['client_text']) ? $args['client_text'] : '' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if(isset($args['button_text']) && $args['button_text'] != '')
                        <a href="{{ isset($args['button_link']) ? $args['button_link'] : 'javascript:void(0);' }}" class="style-4 btn group button--stroke flairBtn !pr-5 pl-30 text-secondary bg-primary border !border-primary">
                            <span class="button-flair"></span>
                            <span class="font-semibold button__label" data-original-text="Let’s Connect">{{ $args['button_text'] }}</span>
                            <span class="inline-flex justify-center items-center size-40 ml-10 rounded-full bg-secondary !text-white duration-100 z-0 group-hover:bg-primary">
                                <svg class="group-hover:animate-toLeftFromRight" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="group-hover:stroke-secondary" d="M4.16663 10H15.8333" stroke="#fff" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path class="group-hover:stroke-secondary" d="M10 4.16666L15.8333 10L10 15.8333" stroke="#fff" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </span>
                        </a>
                        @endif
                    </div>
                </div>
            </div>
            <div class="xl:col-span-6 col-span-12">
                <div class="group dz-hover-item relative">
                    <a class="dz-hover-img rounded-2lg relative" data-displacement="{{ theme_asset('images/effect/1.jpg') }}" data-intensity="0.6" data-speedin="1" data-speedout="1">
                        <img class="rounded-2xl" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="img">
                    </a>
                </div>
                @if(isset($args['features']))
                <div class="grid grid-cols-12 gap-x-20 gap-y-10 mt-15">
                    @foreach($args['features'] as $key => $value)
                    <div class="sm:col-span-6 col-span-12">
                        <div class="dark:bg-white bg-card/10 rounded-xxl 2xl:p-16 p-12 flex items-center gap-10">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_100_7)">
                            <path d="M7.93897 12.051C7.83464 12.163 7.66731 12.1887 7.53364 12.115L1.46431 8.75571C1.37297 8.70505 1.28464 8.68371 1.20264 8.68371C1.03964 8.68371 0.90164 8.76771 0.810974 8.87105C0.674307 9.02671 0.58464 9.30305 0.78164 9.56971L7.72997 18.9714C7.91197 19.2174 8.19131 19.349 8.48997 19.3317C8.79231 19.3144 9.05431 19.152 9.20797 18.8857L19.2493 1.50471C19.4333 1.18638 19.2843 0.915048 19.1013 0.779382C18.9186 0.644382 18.6383 0.590715 18.4 0.845715L7.93897 12.051Z" fill="var(--primary)"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_100_7">
                            <rect width="20" height="20" fill="white"/>
                            </clipPath>
                            </defs>
                            </svg>
                            <span class="text-secondary text-lg font-semibold">{{ isset($value['title']) ? $value['title'] : '' }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</section>