@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));
@endphp

<!-- Owner -->
<section style="background: url({{asset('images/'.$parent['section_background_img'])}})" class=" bg-no-repeat bg-cover">
    <div class="2xl:container 2xl:mx-auto mb-8 px-2 pt-24 pb-24 md:pb-40 md:px-[20px] lg:px-[60px]">
        <div class="flex flex-wrap md:flex-nowrap items-center gap-2">
            <div class="w-full md:w-[40%]">
                <div class="relative flex-1 w-fit mx-auto md:mx-0">
                    <img src="{{asset('defualt/about-img-shape01.png')}}" alt="owner-background">
                    <img src="{{asset('images/'.$parent['owner_img'])}}" alt="owner"
                        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full w-[314px] h-[314px] object-cover border-[5px] border-white">
                </div>
            </div>
            <div class="space-y-4 w-full md:w-[60%] mt-20 md:mt-0 px-4 sm:px-6 md:px-4">
                <div class="w-12 h-1 bg-[#113a5e] rounded-full"></div>
                <h3 class="text-[#0298c0] text-2xl">{{ $parent['title'] }}</h3>
                <h2 class="text-[#0861a7] text-4xl font-semibold">{{ $parent['heading'] }}</h2>
                <p class="text-justify text-sm text-gray-500">{{$parent['description']}}</p>
            </div>
        </div>
    </div>
</section>