<section class="xl:pt-132 pt-40 bg-primary">
    <div class="container">
        <div class="grid grid-cols-12 gap-30">
            <div class="lg:col-span-6 col-span-12 max-lg:mb-40">
                @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-[55px]/[65px] lg:text-4xxl sm:text-4xl text-3xl font-semibold headline text-secondary sm:mb-71 mb-23"> {{ 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
                @if(isset($args['button_text']) && $args['button_text'] != '')
                <a href="{{ isset($args['button_link']) ? $args['button_link'] : 'javascript:void(0);' }}" class="style-4 btn !pr-5 pl-30 text-secondary bg-white rounded-full group 
                    shadow-[0px_5px_10px_rgba(27,76,64,0.05)] h-60 button--stroke flairBtn border border-white hover:border-primary mb-20">
                    <span class="button-flair"></span>
                    <span class="text-xl font-semibold button__label" data-original-text="Rate Us on Trustpilot">{{ $args['button_text'] }}</span>
                    <span class="inline-flex justify-center items-center size-48 ml-80 rounded-full bg-primary text-secondary duration-100 z-0 overflow-hidden">
                        <svg class="group-hover:animate-toTopFromBottom" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.8128 28.1873L28.1872 15.8129" stroke="#1B4C40" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M15.8128 15.8127H28.1872V28.1871" stroke="#1B4C40" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                </a>
                @endif
            </div>
            <div class="lg:col-span-6 col-span-12 custom-tab">
                <div class="relative mb-67">
                    <img src="{{ theme_asset('images/map2.png') }}" alt="map" class="w-full">
                    <div class="box-list1">
                        <div class="tab-titles">
                            @if(isset($args['location']))
                            @foreach($args['location'] as $key => $value)
                            <div class="group tab-title tab-underline">
                                <div 
                                data-list1="ct-1" class="inline-block absolute -translate-x-1/2 -translate-y-full cursor-pointer" 
                                style="top: {{ isset($value['top_position']) ? $value['top_position']."%" : '50%' }}; left: {{ isset($value['left_position']) ? $value['left_position']."%" : '50%' }};"
                                >
                                    <div class="map-marker size-12 bg-secondary rounded-full relative shadow-[0_0_0_3px_rgba(27,76,64,.3)] duration-500 after:absolute after:z-1 after:size-full afetr:shadow-[0_0_10px_15px_rgba(0,0,0,.1),0_0_15px_rgba(0,0,0,.3)] after:rounded-full after:animate-ripple-1 group-hover:bg-white [.tab-underline.active_&]:bg-white"></div>
                                </div>
                            </div>	
                            @endforeach
                            @endif
                        </div>	
                    </div>	
                </div>
                <div class="bg-secondary rounded-tl-xxl rounded-tr-xxl py-14 xl:px-25 px-10 sm:flex items-center justify-between flex-wrap">
                    <div class="tab-contents w-full">
                        @if(isset($args['location']))
                        @foreach($args['location'] as $key => $value)
                        <div class="tab-content">
                            <div class="accordion-header flex items-center gap-5">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16.6666 8.33317C16.6666 12.494 12.0508 16.8273 10.5008 18.1657C10.3564 18.2743 10.1806 18.333 9.99998 18.333C9.81931 18.333 9.64354 18.2743 9.49915 18.1657C7.94915 16.8273 3.33331 12.494 3.33331 8.33317C3.33331 6.56506 4.03569 4.86937 5.28593 3.61913C6.53618 2.36888 8.23187 1.6665 9.99998 1.6665C11.7681 1.6665 13.4638 2.36888 14.714 3.61913C15.9643 4.86937 16.6666 6.56506 16.6666 8.33317Z" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10 10.8335C11.3807 10.8335 12.5 9.71421 12.5 8.3335C12.5 6.95278 11.3807 5.8335 10 5.8335C8.61929 5.8335 7.5 6.95278 7.5 8.3335C7.5 9.71421 8.61929 10.8335 10 10.8335Z" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                <span class="text-white text-base font-semibold flex-1"> {{ @$value['location_name'] }} </span>
                                @if(isset($value['location_link']) && $value['location_link'] != '')
                                <a href="{{ $value['location_link'] }}" target="_blank" class="text-primary font-semibold text-base flex items-center max-sm:mt-5 max-sm:ml-5">
                                    <span class="relative after:absolute after:h-px after:bg-primary after:w-full hover:after:w-0 after:duration-500 after:left-0 after:bottom-0">Get Map</span>
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.25 5.25H12.75V12.75" stroke="var(--primary)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M5.25 12.75L12.75 5.25" stroke="var(--primary)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </a>
                                @endif
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>