/* General Body Styles */
body {
    font-family: 'Montserrat', sans-serif; /* A modern, clean font for headings */
    background-color: #F8F9FA; /* Light background */
    color: #343A40; /* Dark grey for text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensures the page takes full viewport height */
    margin: 0;
    padding: 20px;
    box-sizing: border-box; /* Include padding in element's total width and height */
    text-align: center;
}

/* Container for main content */
.container {
    background-color: #FFFFFF; /* White background for the content box */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Space between content sections */
}

/* Error Content Styling */
.error-content h1 {
    font-size: 8em; /* Large 404 text */
    color: #28A745; /* Primary green */
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1;
}

.error-content h2 {
    font-size: 2.5em;
    color: #343A40;
    margin-top: 0;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.error-content p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
    font-family: 'Open Sans', sans-serif; /* A more readable font for body text */
}

/* Button Styling */
.button {
    display: inline-block;
    background-color: #28A745; /* Primary green */
    color: #FFFFFF;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    margin-top: 20px;
}

.button:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Contact Info Styling */
.contact-info {
    font-size: 0.95em;
    color: #6C757D;
    margin-top: 20px;
}

.contact-info a {
    color: #17A2B8; /* A complementary blue for links, or another shade of green */
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    text-decoration: underline;
    color: #138496;
}

/* Car Illustration (Placeholder) */
.car-illustration img {
    max-width: 100%;
    height: auto;
    margin-top: 30px;
    opacity: 0.8; /* Slightly transparent */
}

/* Footer Styling */
footer {
    margin-top: 40px;
    color: #6C757D;
    font-size: 0.9em;
}

/* Responsive Design */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        justify-content: space-around;
        text-align: left;
    }

    .error-content {
        flex: 1;
        padding-right: 30px;
    }

    .car-illustration {
        flex: 0.5; /* Adjust as needed */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .car-illustration img {
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .error-content h1 {
        font-size: 6em;
    }
    .error-content h2 {
        font-size: 1.8em;
    }
    .container {
        padding: 25px;
    }
    .button {
        padding: 10px 20px;
    }
}

/* Green Color Palette Suggestions */
/*
#28A745 - Primary Green (e.g., for buttons, large text)
#218838 - Darker Green (for hover states)
#A8E6CE - Lighter Green (for subtle backgrounds, accents)
#E6FFEE - Very Light Green (for very light backgrounds)
#1A5C2B - Dark Green (for deeper contrasts, important text if needed)
*/