@extends('layouts.app')

@section('content')
<main class="main d-flex flex-column justify-content-center align-items-center min-vh-100 overflow-hidden">

    <!-- Page Title -->
    <div class="page-title dark-background w-100 text-center py-5" data-aos="fade"
         style="background-image: url({{ asset('assets/img/page-title-bg.jpg') }}); background-size: cover; background-position: center;">
        <div class="container position-relative">
            <h1 class="text-white">404 Page not Found</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="{{ route('/') }}" class="text-white">Home</a></li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- 404 Image Centered -->
    <div class="d-flex justify-content-center align-items-center flex-grow-1 w-100">
        <img src="{{ asset('assets/svg/404.svg') }}" alt="404 Error" class="img-fluid"
             style="max-width: 50%; height: auto;">
    </div>

</main>
@endsection