@extends('layouts.header')
@section('content')

<style>


    .error-container {
        text-align: center;
        padding: 80px 20px;
        animation: fadeIn 1.5s ease-in-out;
    }

    .error-code {
        font-size: 150px;
        font-weight: 900;
        text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        animation: bounce 2s infinite;
    }

    .error-message {
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 20px;
        animation: slideIn 1.2s ease-in-out;
    }

    .error-description {
        font-size: 18px;
        margin-bottom: 30px;
        opacity: 0.9;
    }

    

    /* Animations */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideIn {
        from { opacity: 0; transform: translateX(-50px); }
        to { opacity: 1; transform: translateX(0); }
    }

    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }
</style>

<div class="container error-container">
    <h1 class="error-code">404</h1>
    <h2 class="error-message">Oops! Page Not Found</h2>
    <p class="error-description">
        The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
    </p>
    <a href="{{ route('home') }}" class="btn btn-default">Back to Home</a>
</div>

@endsection