 <section class="noice-overlay">
    <div class="lg:pt-180 lg:pb-234 sm:py-80 py-40">
        <div class="container">
            <div class="lg:text-center lg:mb-80 mb-40 pxl-heading-scroll-effect">
                <h2 class="xl:text-7xl/70 md:text-5xl text-4xl heading-text">
                     {!! isset($args['title']) ? $args['title'] : '' !!}
                </h2>
            </div>
            <div class="row">
                <div class="w-full">
                    <div class="relative">
                        <img src="{{ theme_asset('images/map.png') }}" alt="" class="dark:block hidden">
                        <img src="{{ theme_asset('images/map-dark.png') }}" alt="" class="dark:hidden block">
                        @if(isset($args['location']))
                        @foreach($args['location'] as $key => $value)
                        <div 
                            id="ct-{{ $key + 1 }}" 
                            class="absolute -translate-x-1/2 ct"
                            style="top: {{ isset($value['top_position']) ? $value['top_position']."%" : '50%' }}; left: {{ isset($value['left_position']) ? $value['left_position']."%" : '50%' }};"
                        >
                            <div class="size-15 bg-bodybg duration-[all_400ms_cubic-bezier(0.39,_0.58,_0.57,_1)_0s] rounded-full border-5 border-primary shadow-[0px_0px_30px_var(--primary)]"></div>
                            <div class="p-10 lg:pe-30 bg-card-light rounded-lg flex lg:flex-row flex-col items-center lg:gap-15 gap-10 w-max bottom-full right-1/2 translate-x-1/2 -translate-y-16 absolute tooltip-arrow content max-lg:opacity-0 duration-500">
                                <div class="item-image">
                                    <img decoding="async" class="size-full" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" width="90" height="100" alt="img4-contant">
                                </div>
                                <div class="title-location">
                                    <span class="block text-lg font-medium text-white lg:mb-16 mb-2"> {{ @$value['location_name'] }} </span>
                                    <span class="block text-white text-sm font-normal lg:mb-5 mb-2"> {{ @$value['phone_number'] }}</span>
                                    <span class="block text-white text-sm font-normal"> {{ @$value['email'] }} </span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-50%] left-[-47%] -z-1 pointer-events-none">
    <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute bottom-[-40%] right-[0%] max-xl:w-[60%] -z-1 pointer-events-none">
</section>