@extends('layouts.home') {{-- Use your main layout if exists --}}

@section('title', '404 Not Found')

@section('content')
 @include('includes.navbar')
<div style="min-height: 80vh; display: flex; justify-content: center; align-items: center; background: #f8f9fa;">
  <div style="background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; max-width: 600px; width: 100%;">
    <h1 style="font-size: 2.5rem; font-weight: bold; color: #e74c3c;">Oops! Something Went Wrong</h1>
    <h2 style="font-size: 1.5rem; font-weight: bold; margin-top: 10px;">Error 404</h2>
    <p style="margin-top: 15px; color: #555;">
      The resource you are looking for could not be found. Please verify the URL or contact support if the issue persists.
    </p>
    <a href="{{ url('/') }}" style="display: inline-block; margin-top: 25px; background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;">
      Go Back to Home
    </a>
  </div>
</div>
@endsection