<section class="dashboard-error-page dashboard-error-page--minimal">
    <div class="dashboard-error-page__minimal">
        <div class="dashboard-error-page__code">404</div>

        <h1>Page Not Found</h1>

        <p>The page you are looking for does not exist or has been moved.</p>

        <a href="{$WEB_ROOT}/" class="dashboard-error-page__button">
            <i class="fas fa-home"></i>
            <span>Back to Homepage</span>
        </a>
    </div>
</section>



<style>
    


body[data-page-template="error/page-not-found"] .dashboard-sidebar,
body[data-page-template="error/page-not-found"] .dashboard-sidebar-boundary,
body[data-page-template="error/page-not-found"] .dashboard-topbar,
body[data-page-template="error/page-not-found"] .dashboard-page-header,
body[data-page-template="error/page-not-found"] .dashboard-overlay,
body[data-page-template="error/page-not-found"] .dashboard-preloader,
body[data-page-template="error/page-not-found"] #fullpage-overlay,
body[data-page-template="error/page-not-found"] .btn-return-to-admin,
body[data-page-template="error/page-not-found"] .modal {
    display: none !important;
}

body[data-page-template="error/page-not-found"] .dashboard-shell {
    display: block !important;
    min-height: 100vh !important;
}

body[data-page-template="error/page-not-found"] .dashboard-main,
body[data-page-template="error/page-not-found"] .dashboard-page,
body[data-page-template="error/page-not-found"] .dashboard-page__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body[data-page-template="error/page-not-found"] .dashboard-error-page {
    min-height: 100vh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: clamp(70px, 12vh, 130px) 24px 40px !important;
}

body[data-page-template="error/page-not-found"] .dashboard-error-page__minimal {
    width: min(100%, 720px);
    text-align: center;
}

body[data-page-template="error/page-not-found"] .dashboard-error-page__code {
    font-family: var(--font-heading);
    font-size: clamp(120px, 18vw, 260px);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.04em;
    margin-bottom: 34px;
    color: var(--brand-primary);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-top: 80px;

}

body[data-page-template="error/page-not-found"] .dashboard-error-page__minimal h1 {
    margin: 0 0 14px;
    font-family: var(--font-heading);
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

body[data-page-template="error/page-not-found"] .dashboard-error-page__minimal p {
    max-width: 520px;
    margin: 0 auto 34px;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.8;
    font-weight: 500;
    color: var(--text-secondary);
}

body[data-page-template="error/page-not-found"] .dashboard-error-page__button {
    min-width: 250px;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 30px;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
    border: 0;

}

body[data-page-template="error/page-not-found"] .dashboard-error-page__button:hover {
    transform: translateY(-2px);
    background: var(--gradient-primary-hover);

}

body[data-page-template="error/page-not-found"] .dashboard-error-page__button i {
    font-size: 16px;
}

@media (max-width: 575.98px) {
    body[data-page-template="error/page-not-found"] .dashboard-error-page {
        padding-top: 86px !important;
    }

    body[data-page-template="error/page-not-found"] .dashboard-error-page__button {
        width: 100%;
        min-width: 0;
    }
}
    
</style>