@extends('site.layouts.layout')
@section('title', $blog->title)
@section('content')

    {{-- HERO / TITLE SECTION --}}
    <!-- <div class="bg-[#0b2c4d] py-16">
        <div class="max-w-6xl mx-auto px-4">
            <div class="bg-gradient-to-r from-yellow-100 to-gray-100 rounded-2xl py-12 px-6 text-center">
                <h1 class="text-3xl md:text-5xl font-bold text-[#1f3b57] leading-tight">
                    {{ $blog->title }}
                </h1>
            </div>
        </div>
    </div>
     -->
    <div class="w-[50%] mx-auto py-10">
        <div class="col-span-12 text-center mb-5 heading">
<h2 class="md:text-[40px] text-[30px] 2xl:text-[40px] fo-n font-bold   text-[#000000] ">{{ $blog->blog_title }}
</h2>
</div>
        <div class="w-full  mb-6">
            <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}"
                class="w-full h-auto object-contain rounded-xl">
        </div>

        <div class="flex justify-between w-full">
            <h2 class="text-[#5E5E5E] text-[20px]">{{ \Carbon\Carbon::parse($blog->date)->format('M d, Y') }}</h2>
            <h2 class="text-[#001C3A] text-[20px]">{{ $blog->category->category_name }}</h2>
        </div>
        <div class="text-[#272727] text-[18px] fm-n mt-6">
          {!! $blog->blog_description !!}
        </div>

    </div>
@endsection
