@extends('frontend.layout.layout')
@section('title', '403 - Access Forbidden')
@section('main')
    <main class="flex-grow flex items-center justify-center py-20 px-6 md:px-14 text-center">
        <div class="max-w-2xl">
            <p class="text-9xl font-extrabold text-red-600 mb-8 animate-pulse">403</p>
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Access Forbidden</h1>
            <p class="text-lg md:text-xl text-gray-700 mb-8">You do not have permission to access this page. This could be
                due to insufficient privileges.</p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="{{ route('home') }}"
                    class="bg-primary text-white px-8 py-4 !rounded-button text-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">Go
                    to Homepage</a>
                <a href="{{ route('contact') }}"
                    class="border border-primary text-primary px-8 py-4 !rounded-button text-lg font-medium hover:bg-primary hover:text-white transition-colors">Contact
                    Support</a>
            </div>
        </div>
    </main>
@endsection