@if ($data?->image_position == 'left')
    <div class="container mt-20 max-lg:px-8 max-md:mt-7 max-md:!px-0 max-sm:mt-5">
        <div class="flex flex-col-reverse md:flex-row-reverse items-center gap-10">
            <!-- Image Section -->
            <div class="w-full md:w-1/2">
                <img
                    src="/storage/{{$data?->image}}"
                    alt="{{ $data?->heading }}"
                    class="w-full h-auto object-cover rounded-lg shadow-md"
                >
            </div>

            <!-- Content Section -->
            <div class="w-full md:w-1/2 md:text-left flex flex-col">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">
                    {{ $data?->heading }}
                </h2>
                <div>
                    {!! $data?->description !!}
                </div>
                <div class="mt-1">
                    <a href="{{ $data?->button_url }}" class="inline-block bg-red-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-md transition-all duration-200 text-sm mt-4">
                        {{ $data?->button_text }}
                    </a>
                </div>
            </div>
        </div>
    </div>
@else
    <div class="container mt-20 max-lg:px-8 max-md:mt-7 max-md:!px-0 max-sm:mt-5">
        <div class="flex flex-col-reverse md:flex-row-reverse items-center gap-10">
            <!-- Content Section -->
            <div class="w-full md:w-1/2 md:text-left">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">
                    {{ $data?->heading }}
                </h2>
                <div>
                    {!! $data?->description !!}
                </div>
                <div class="mt-1">
                    <a href="{{ $data?->button_url }}" class="inline-block bg-red-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-md transition-all duration-200 text-sm mt-4">
                        {{ $data?->button_text }}
                    </a>
                </div>
            </div>
            <!-- Image Section -->
            <div class="w-full md:w-1/2">
                <img
                    src="/storage/{{$data?->image}}"
                    alt="{{ $data?->heading }}"
                    class="w-full h-auto object-cover rounded-lg shadow-md"
                >
            </div>
        </div>
    </div>
@endif