{{-- 06Nov2025 Backend Work Starts(Shakib)  --}}
<section id="about" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <div class="fade-in visible">
                <h2 class="text-4xl md:text-5xl font-playfair font-light text-gray-900 mb-6">{{ $about_craft->about_title }}</h2>
                <div class="w-24 h-px bg-gold mb-8"></div>
                <div class="text-lg text-gray-600 font-light [&>p]:mb-6 [&>p]:leading-relaxed">
                    {!! $about_craft->about_short_description !!}
                </div>

                <div class="grid grid-cols-2 gap-8">
                    <div class="text-center">
                        <div class="text-3xl font-playfair font-semibold text-gold mb-2">{{ $about_craft->about_years_value }}</div>
                        <div class="text-gray-600 font-light">{{ $about_craft->about_years_label }}</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-playfair font-semibold text-gold mb-2">{{ $about_craft->about_brands_value }}</div>
                        <div class="text-gray-600 font-light">{{ $about_craft->about_brands_label }}</div>
                    </div>
                </div>
            </div>

            <div class="fade-in visible">
                <div class="relative">
                    <img class="w-full h-96 object-cover rounded-lg shadow-2xl" src="{{ asset('storage/media/about_our_craft_image/' . $about_craft->about_image) }}" alt="{{ $about_craft->about_title }}">
                    <div class="absolute -bottom-6 -right-6 bg-gold p-6 rounded-lg shadow-xl">
                        <div class="text-white text-center">
                            <div class="text-2xl font-playfair font-semibold">{{ $about_craft->about_turnaround_value }}</div>
                            <div class="text-sm font-light">{{ $about_craft->about_turnaround_label }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- 06Nov2025 Backend Work Ends(Shakib)  --}}