/* --- Base Styles for the entire page (assuming this is a full-page content) --- */
.maintenance-page-container {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center;     /* Centers content vertically */
    min-height: 100vh; /* Ensures it takes at least the full viewport height */
    background-color: #fff; /* Light grey background similar to screenshot */
    font-family: 'Arial', sans-serif; /* Or your preferred font */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    padding: 20px; /* Adds some outer padding, especially useful on smaller screens */
}

.maintenance-content {
    /* REMOVED: background-color, border-radius, box-shadow, and internal padding */
    /* background-color: #ffffff; */
    /* border-radius: 15px; */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
    /* padding: 30px; */ 

    text-align: center; /* Centers text and inline/inline-block elements */
    max-width: 800px; /* Maximum width for desktop view, prevents it from being too wide */
    width: 90%; /* Responsive width: takes 90% of parent's width, up to max-width */
    box-sizing: border-box; /* Ensures padding is included in width */
    
    /* Adjusted padding for spacing since the white box is removed */
    padding-left: 20px;
    padding-right: 20px;
}

.illustration-img {
    max-width: 100%; /* Ensures the image scales down if the container is smaller */
    height: auto; /* Maintains the image's aspect ratio */
    margin-bottom: 30px; /* Space below the image */
    display: block; /* Makes the image a block element */
    margin-left: auto; /* Centers the image horizontally */
    margin-right: auto; /* Centers the image horizontally */
}

.message-text {
    font-size: 1.2rem; /* Base font size for the message */
    color: #333333; /* Darker text color */
    line-height: 1.6; /* Improved readability */
    margin-bottom: 30px; /* Space below the text */
}

.contact-link {
    color: #0098da; /* Blue color for the link */
    text-decoration: none; /* Remove underline */
    font-weight: bold;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #0098da; /* Darker blue on hover */
    text-decoration: underline; /* Underline on hover */
}

/* --- Go Back To Home Button Styling (using your common-button class) --- */
/* .go-back-button {
    width: auto;
    padding: 15px 30px;
    font-size: 1.1rem;
    min-width: 200px;
    display: inline-block;
    margin-top: 10px;
} */


/* --- Go Back To Home Button Styling --- */
.go-back-button {
    /* Override background, text color, and add a border */
    background: #ffffff;             /* White background */
    color: #0098da;                  /* Blue text color (adjust shade if needed) */
    border: 4px solid #0098da;   
    border-radius: 8px;    /* Blue border */
    
    /* Inherits other styles from .common-button, or explicitly set here */
    width: auto;
    padding: 10px 30px;
    font-size: 25px;
    font-weight: 100;
    min-width: 200px;
    display: inline-block;
    margin-top: 10px;

    /* Optional: Add a subtle hover effect to match the new style */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.go-back-button:hover {
    background-color: #e0e6ed; /* A lighter blue background on hover */
    color: #008acf;             /* A slightly darker blue text on hover */
    border-color: #008acf;      /* A slightly darker blue border on hover */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .go-back-button {
        padding: 12px 25px;
        font-size: 1rem;
        min-width: 180px;
    }
}

@media (max-width: 480px) {
    .go-back-button {
        padding: 10px 20px;
        font-size: 0.9rem;
        min-width: 150px;
    }
}
/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .maintenance-content {
        /* Removed padding override specific to mobile, padding-left/right takes effect */
        /* padding: 20px; */ 
        width: 95%; 
    }

    .illustration-img {
        margin-bottom: 20px; 
    }

    .message-text {
        font-size: 1rem; 
        margin-bottom: 20px;
    }

    .go-back-button {
        padding: 12px 25px;
        font-size: 1rem;
        min-width: 180px;
    }
}

@media (max-width: 480px) {
    .maintenance-content {
        /* Removed border-radius and padding override specific to mobile */
        /* border-radius: 10px; */ 
        /* padding: 15px; */ 
        padding-left: 10px; /* Adjust for very small screens */
        padding-right: 10px;
    }
    .message-text {
        font-size: 0.9rem; 
    }
    .go-back-button {
        padding: 10px 20px;
        font-size: 0.9rem;
        min-width: 150px;
    }
}