<section class="noice-overlay">
    <div class="xl:py-126 sm:pt-80 pt-60 pb-0">
        <div class="container">
            <div class="xl:mb-106 sm:mb-50 mb-20 text-center pxl-heading-scroll-effect">
                @if(isset($args['subtitle']) && $args['subtitle'] != '')
                <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                @endif
                <h2 class="xl:text-7xl/80 md:text-5xl text-4xl font-semibold heading-text">
                    {{ isset($args['title']) ? $args['title'] : '' }}
                </h2>
                @if(isset($args['description']) && $args['description'] != '')
                <p class="sm:text-2xl text-lg font-light">{{ $args['description'] }}</p>
                @endif
            </div>
            <div class="grid grid-cols-12 gap-20 pricing-container">
                @if(isset($args['price_box']))
                @foreach($args['price_box'] as $key => $value)
                <div class="xl:col-span-3 sm:col-span-6 col-span-12">
                    <div class="pricing-wrapper relative z-2 {{ $key == '1' ? 'active'  : '' }}">
                        <div class="pt-50 ps-40 pe-8">
                            <div class="mb-20">
                                <h3 class="dark:text-white text-dark text-[55px]/46 title">{{ isset($value['price']) ? $value['price'] : '' }} <span class="dark:text-bodytext text-textlight text-lg font-normal">/{{ isset($value['price_text']) ? $value['price_text'] : '' }}</span></h3>
                            </div>
                            <h4 class="text-2xxl/36 dark:text-white text-dark mb-5">{{ isset($value['title']) ? $value['title'] : '' }}</h4>
                            <p class="mb-20 font-normal text-lg/24">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            <ul class="list-items">
                                @php
                                $contents = explode(',', @$value['features']);
                                @endphp
                                @if(isset($contents))
                                    @foreach ($contents as $content) 
                                        <li class="relative py-4.5 ps-30 4xl:pe-55 dark:text-bodytext text-textlight before:content-['\f00c'] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:size-20 before:leading-20 before:text-center dark:before:text-heading before:text-white before:text-xs before:rounded-full before:font-black before:font-['Font_Awesome_6_Free'] dark:before:bg-linear-(--pricing-gradient) before:bg-dark">{{ @$content }}</li>
                                    @endforeach
                                @endif
                             </ul>
                        </div>
                        @if(isset($value['button_text']) && $value['button_text'] != '')
                        <div class="p-40">
                            <a href="{{ @$value['button_link'] }}" class="btn text-base font-bold w-full text-center block py-12 rounded-none dark:bg-linear-(--pricing-gradient) bg-darkbtn dark:text-dark text-white hover:!bg-black hover:!text-white duration-500 cursor-pointer">
                                {{ $value['button_text'] }}
                            </a>
                        </div>
                        @endif
                        <span class="absolute -top-10 right-1 py-8 px-16 text-xs/[1] font-semibold bg-white text-black hidden badge">MOST POPULAR</span>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-8%] left-[-47%] -z-1">
    <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute top-[-30%] right-[0%] max-xl:w-[60%] -z-1">
</section>
