/* ============================================================================
 * File: notification/notification.css
 * Description: CSS styles for the Notification page of Vina Network.
 * Created by: Vina Network
 * ========================================================================== */

/* Layout & Container Styling */
.notification {
    min-height: 100vh;
    margin-top: 72px;
    display: flex; 
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Notification Card Styling */
.notification-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    border-radius: 15px; 
    padding: 2rem;
    margin: 2rem;
    max-width: 600px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Animation for Notification Card */
.notification-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Icon Styling */
.notification-content i {
    font-size: 4rem;
    color: #00d4ff;
}

/* Heading Styling */
.notification-content h1 {color: #00d4ff;}

/* Paragraph Styling */
.notification-content p {
    color: #fff;
    margin-bottom: 20px !important;
}

/* Responsive Design for Mobile Screens */
@media screen and (max-width: 768px) {
    .notification {
        margin-top: 64px;
        min-height: unset;
    }

    .notification-content i {font-size: 2rem;}
}