<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found | CIX Orbit Academy</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root { --primary: #000; --secondary: #ff6b00; --accent: #00ff41; }
        body { background: var(--primary); color: #fff; font-family: 'Segoe UI', sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
        .error-container { text-align: center; padding: 2rem; }
        .error-code { font-size: 8rem; font-weight: 800; color: var(--secondary); line-height: 1; }
        .error-icon { font-size: 4rem; color: var(--accent); margin: 1rem 0; }
        .btn-custom { background: var(--secondary); color: #fff; border: none; padding: 0.75rem 2rem; border-radius: 8px; text-decoration: none; display: inline-block; margin-top: 1rem; }
        .btn-custom:hover { background: #e65c00; color: #fff; }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-icon"><i class="fas fa-rocket"></i></div>
        <h1 class="error-code">404</h1>
        <h2 class="mb-3">Page Not Found</h2>
        <p class="text-muted">The page you are looking for does not exist or has been moved.</p>
        <a href="<?php echo base_url(); ?>" class="btn-custom"><i class="fas fa-home"></i> Back to Home</a>
    </div>
</body>
</html>
