<x-layouts.app-layout>

    <!-- Page Header Start -->
    <div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
        <div class="container text-center">
            <h1 class="display-4 text-white animated slideInDown mb-4">{{ $news->title }}</h1>
        </div>
    </div>
    <!-- Page Header End -->


    <!-- About Start -->
    <div class="container-xxl py-6">
        <div class="container">
            <div class="row g-5 align-items-center">

                <!-- Left: Images -->
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="position-relative overflow-hidden ps-lg-5 pt-lg-5 h-100" style="min-height: 400px;">
                        <img class="position-absolute w-100 h-100 rounded shadow"
                            src="{{ asset('storage/' . $news->image) }}" alt="About Image" style="object-fit: cover;">
                    </div>
                </div>

                <!-- Right: Content -->
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="h-100">
                        <h6 class="text-primary text-uppercase mb-2">@lang('Article detailes')</h6>
                        <h1 class="fw-bold mb-4">{{ $news->title }}</h1>
                        <p class="mb-4">
                            {!! nl2br(e($news->description)) !!}
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- About End -->
</x-layouts.app-layout>
