/*======================

404 page

=======================*/



/* Main 404 page container */

.page_404 {

padding: 40px 0;

background: #fff;

font-family: 'Arvo', serif;

min-height: 100vh;

display: flex;

align-items: center;

}



/* Image responsive design */

.page_404 img {

width: 100%;

height: auto;

max-width: 100%;

}



/* 404 background section */

.four_zero_four_bg {

background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);

background-position: center;

background-repeat: no-repeat;

background-size: contain;

height: 400px;

position: relative;

}



/* 404 heading */

.four_zero_four_bg h1 {

font-size: 80px;

color: #333;

margin: 0;

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-shadow: 2px 2px 4px rgba(0,0,0,0.1);

}



/* Secondary heading */

.four_zero_four_bg h3 {

font-size: 80px;

color: #333;

margin: 0;

}



/* Home link button */

.link_404 {

color: #fff !important;

padding: 12px 25px;

background: #39ac31;

margin: 20px 0;

display: inline-block;

text-decoration: none;

border-radius: 5px;

transition: all 0.3s ease;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;

}



.link_404:hover {

background: #2e8a26;

color: #fff !important;

text-decoration: none;

transform: translateY(-2px);

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}



/* Content box */

.contant_box_404 {

margin-top: -50px;

text-align: center;

}



.contant_box_404 h3 {

font-size: 36px;

margin-bottom: 20px;

color: #333;

}



.contant_box_404 p {

font-size: 18px;

color: #666;

margin-bottom: 30px;

line-height: 1.6;

}



/* Responsive Design */

@media (max-width: 768px) {

.four_zero_four_bg {

height: 250px;

}



.four_zero_four_bg h1 {

font-size: 60px;

}



.contant_box_404 h3 {

font-size: 28px;

}



.contant_box_404 p {

font-size: 16px;

}



.link_404 {

padding: 10px 20px;

font-size: 14px;

}

}



@media (max-width: 480px) {

.page_404 {

padding: 20px 0;

}



.four_zero_four_bg {

height: 200px;

}



.four_zero_four_bg h1 {

font-size: 48px;

}



.contant_box_404 h3 {

font-size: 24px;

}



.contant_box_404 p {

font-size: 14px;

}



.contant_box_404 {

margin-top: -30px;

}

}



/* Accessibility improvements */

.four_zero_four_bg h1:focus,

.link_404:focus {

outline: 2px solid #39ac31;

outline-offset: 2px;

}



/* Loading state for background image */

.four_zero_four_bg::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: #f8f9fa;

z-index: -1;

}