@extends('layout.app')
@section('title', __('Forbidden'))

@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="javascript:void(0);">Error</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">403 Forbidden</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row gx-3">
            <div class="col-sm-12 text-center mt-5">
                <div class="wrapper-page">
                    <h1 class="text-uppercase text-danger fw-bold mb-0" style="font-size: 5rem;">403</h1>
                    <h2 class="text-uppercase text-danger mt-2">Forbidden</h2>
                    <p class="text-muted mt-3" style="font-size: 1.2rem;">It looks like you are not authorized to access this page.</p>
                    
                    <a class="btn btn-primary mt-4" href="{{ url('/') }}">
                        <i class="ri-home-line"></i> Return Home
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection