/* Shared styles for custom error page and maintenance page */

.page-header {
    width: 100%;
}

.page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    justify-content: center;
}

.error-image-container,
.maintenance-image-container {
    width: 12vh;
    height: 12vh;
    margin-bottom: 25px;
}

.error-image,
.maintenance-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.error-title,
.maintenance-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 16px;
    text-align: center;
}

.error-message,
.maintenance-message {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

.page-footer {
    width: 100%;
}

.preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 20px 0;
}

.preview-image {
    display: none; /* Hide all preview images by default */
}

.preview-desktop {
    max-width: 50%;
    position: relative;
}

.preview-mobile {
    max-width: 50%;
    position: relative;
}

/* Show desktop preview on larger screens */
@media (min-width: 768px) {
    .preview-desktop {
        display: block;
    }
}

/* Show mobile preview on smaller screens */
@media (max-width: 767px) {
    .preview-mobile {
        display: block;
    }
}

.centered-text {
    text-align: center;
}