 <section class="xl:py-100 sm:py-80 py-40 noice-overlay relative">
    <div class="container-lg">
        <div class="sm:mb-14 text-center max-w-600 mx-auto relative z-3 pxl-heading-scroll-effect">
            @if(isset($args['subtitle']) && $args['subtitle'] != '')
            <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
            @endif
            @if(isset($args['title']) && $args['title'] != '')
            <h2 class="md:text-6xl text-[40px]/50 heading-text mb-10">{{ $args['title'] }}</h2>
            @endif
            @if(isset($args['description']) && $args['description'] != '')
            <p class="text-2xl font-light">{{ $args['description'] }}</p>
            @endif
        </div>
        <div class="pxl-history-carousel layout-1 relative select-none sm:-mt-100">
            <div class="pxl-carousel-inner overflow-hidden">
                <div class="pxl-swiper-wrapper items-center">
                    @if(isset($args['item']))
                    @foreach($args['item'] as $key => $value)
                        <div class="pxl-swiper-slide item-slide">
                            <div class="item-inner relative">
                                <div class="content-item">
                                    @if(isset($value['title']) && $value['title'] != '')
                                    <h4 class="text-2xxl leading-35 font-semibold mb-15">{{ $value['title'] }}</h4>
                                    @endif
                                    @if(isset($value['description']) && $value['description'] != '')
                                    <p class="text-lg/24 item-des">{{ $value['description'] }}</p>
                                    @endif
                                    @if(isset($value['button_text']) && $value['button_text'] != '')
                                    <div class="sm:pt-37 pt-20 pb-20">
                                        <a href="{{ @$value['button_link'] }}"
                                            class="btn style-1 btn-outline light p-2 group button--stroke flairBtn magneticBtn"
                                            data-block="button">
                                            <span class="button-flair"></span>
                                            <span
                                                class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ $value['button_text'] }}</span>
                                            <span
                                                class="inline-flex justify-center items-center size-32 rounded-full dark:bg-primary dark:text-secondary bg-secondary text-white duration-100 dark:group-hover:bg-secondary dark:group-hover:text-white group-hover:bg-white group-hover:text-secondary z-1">
                                                <i class="fa-solid fa-arrow-right text-sm"></i>
                                            </span>
                                        </a>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="pxl-swiper-slide item-slide">
                            <div class="item-inner relative">
                                <div class="item-image">
                                    <img decoding="async" class="no-lazyload "
                                        src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}"
                                        width="460" height="580" alt="img3-aboutus" title="img3-aboutus">
                                </div>
                                <div class="content-item">
                                </div>
                            </div>
                        </div>
                    @endforeach
                    @endif
                </div>
                <div class="box-pev-next">
                    <div class="text-pev-next dark:text-white dark:bg-secondary">History</div>
                    <div class="pxl-swiper-arrows custom-separate ">
                        <div class="pxl-swiper-arrow pxl-swiper-arrow-prev absolute sm:-left-81 -left-50 -bottom-11 flex items-center justify-center size-50">
                            <span class="pxl-icon">
                                <svg width="57" height="24" viewBox="0 0 57 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="dark:stroke-white stroke-black" d="M49 12H5" stroke="white" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path class="dark:stroke-white stroke-black" d="M12 5L5 12L12 19" stroke="white" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </div>
                        <div class="pxl-swiper-arrow pxl-swiper-arrow-next absolute sm:-right-81 -right-50 -bottom-11 flex items-center justify-center size-50">
                            <span class="pxl-icon">
                                <svg width="57" height="24" viewBox="0 0 57 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="dark:stroke-white stroke-black" d="M8 12H52" stroke="white" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path class="dark:stroke-white stroke-black" d="M45 5L52 12L45 19" stroke="white" stroke-opacity="0.6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="pxl-swiper-slider-thumbs">
                        <div class="pxl-swiper-slider-inner">
                            <div class="pxl-swiper-thumbs overflow-hidden">
                                <div class="pxl-thumbs-wrapper swiper-wrapper">
                                    @if(isset($args['item']))
                                    @foreach($args['item'] as $key => $value)
                                    <div class="pxl-swiper-slide thumb-item">
                                        <div class="item-inner relative">
                                            <span class="item-year">{{ $value['year'] }}</span>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{ theme_asset('images/background/bg3.png') }}" alt="bg3" class="absolute z-1 animate-move w-86 h-83 top-[50%] left-[5%] max-xl:hidden">
        <img src="{{ theme_asset('images/background/bg1.png') }}" alt="bg1" class="absolute z-1 animate-move w-86 h-83 bottom-[10%] right-[5%] max-xl:hidden">
    </div>
</section>