/* ==========================================================
   KOKO Enterprise
   404 Page
   ========================================================== */

.error-404-section{
    display:flex;
    align-items:center;

    min-height:75vh;
    padding:180px 0 100px;

    background:#f8f8f8;
}

.error-404-content{
    max-width:820px;
    margin-inline:auto;

    text-align:center;
}

.error-404-code{
    margin:0 0 1rem;

    color:rgba(0,0,0,.08);

    font-family:var(--font-heading);
    font-size:clamp(7rem,18vw,14rem);
    font-weight:600;
    line-height:.8;
    letter-spacing:-.06em;
}

.error-404-title{
    margin:0;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:clamp(2.75rem,6vw,5rem);
    font-weight:500;
    line-height:1.05;
    letter-spacing:-.03em;
}

.error-404-description{
    max-width:620px;
    margin:2rem auto 0;

    color:var(--color-text-light);

    font-size:1.1rem;
    line-height:1.8;
}

.error-404-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;

    margin-top:3rem;
}

.error-404-links{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:1.5rem;

    margin-top:2.5rem;
}

.error-404-links a{
    color:var(--color-text-light);

    font-weight:600;
}

.error-404-links a:hover{
    color:var(--color-accent);
}

.error-404-page a:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:4px;
}

@media (max-width:768px){

    .error-404-section{
        min-height:auto;
        padding:140px 0 80px;
    }

    .error-404-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .error-404-actions .btn{
        width:100%;
    }

}

@media (max-width:576px){

    .error-404-section{
        padding:120px 0 70px;
    }

    .error-404-description{
        font-size:1rem;
    }

}