/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
display: flex;
align-items: center;
padding: 80px 0;
}

.error-404 .error-box {
/*background: var(--surface-color);*/
background: rgb(248,248,255);
padding: 60px 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.error-404 .error-box::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, color-mix(in srgb, var(--accent-color), transparent 90%) 0%, transparent 70%);
opacity: 0.5;
}

.error-404 .error-box .error-icon {
font-size: 80px;
color: var(--accent-color);
margin-bottom: 30px;
position: relative;
z-index: 1;
}

.error-404 .error-box .error-icon i {
display: inline-block;
animation: pulse 2s ease-in-out infinite;
}

.error-404 .error-box .error-code {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
position: relative;
z-index: 1;
}

.error-404 .error-box .error-code span {
font-size: 100px;
font-weight: 700;
color: var(--heading-color);
text-shadow: 3px 3px 0 color-mix(in srgb, var(--accent-color), transparent 70%);
line-height: 1;
}

.error-404 .error-box h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
color: var(--heading-color);
position: relative;
z-index: 1;
}

.error-404 .error-box p {
font-size: 16px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin-bottom: 40px;
line-height: 1.6;
position: relative;
z-index: 1;
}

.error-404 .error-box .error-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}

.error-404 .error-box .error-actions a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
border-radius: 50px;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
text-decoration: none;
}

.error-404 .error-box .error-actions a i {
font-size: 20px;
}

.error-404 .error-box .error-actions a.btn-home {
background: var(--accent-color);
color: var(--contrast-color);
box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.error-404 .error-box .error-actions a.btn-home:hover {
background: color-mix(in srgb, var(--accent-color), black 10%);
transform: translateY(-3px);
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 50%);
}

.error-404 .error-box .error-actions a.btn-support {
background: transparent;
color: var(--accent-color);
border: 2px solid var(--accent-color);
}

.error-404 .error-box .error-actions a.btn-support:hover {
background: var(--accent-color);
color: var(--contrast-color);
transform: translateY(-3px);
}

@keyframes pulse {

0%,
100% {
    transform: scale(1);
}

50% {
    transform: scale(1.1);
}
}

@media (max-width: 992px) {
.error-404 .error-box {
    padding: 50px 30px;
}

.error-404 .error-box .error-code span {
    font-size: 80px;
}

.error-404 .error-box h2 {
    font-size: 28px;
}
}

@media (max-width: 768px) {
.error-404 {
    padding: 60px 0;
}

.error-404 .error-box {
    padding: 40px 25px;
}

.error-404 .error-box .error-icon {
    font-size: 60px;
}

.error-404 .error-box .error-code {
    gap: 15px;
}

.error-404 .error-box .error-code span {
    font-size: 70px;
}

.error-404 .error-box h2 {
    font-size: 24px;
}

.error-404 .error-box p {
    font-size: 15px;
}

.error-404 .error-box .error-actions {
    flex-direction: column;
}

.error-404 .error-box .error-actions a {
    width: 100%;
    justify-content: center;
}
}

@media (max-width: 576px) {
.error-404 .error-box .error-code span {
    font-size: 60px;
}

.error-404 .error-box h2 {
    font-size: 22px;
}

.error-404 .error-box .error-actions a {
    padding: 12px 25px;
    font-size: 14px;
}
}