{% extends 'base.html' %}
{% load static %}

{% block title %}404 - Page Not Found{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-center min-vh-100 p-4">
    <div class="text-center">
        <div class="error-illustration mb-4">
            <img src="{% static '/img/404.png' %}" alt="404 illustration" class="img-fluid" style="max-width: 300px;">
        </div>
        <h1 class="display-4 fw-bold mb-3">Page Not Found</h1>
        <p class="lead text-muted mb-4">The page you're looking for doesn't exist or has been moved.</p>
        <div class="d-grid d-sm-block">
            <a href="{% url 'home' %}" class="btn btn-primary btn-lg px-5">
                <i class="fas fa-home me-2"></i>Return Home
            </a>
        </div>
    </div>
</div>
{% endblock %}