.grid-item .Marqueeborder {
    display: flex !important;
    flex-direction: column !important; /* Stack items vertically */
    align-items: center !important;
    justify-content: flex-start !important; /* FORCES HEADER TO THE TOP */
    background: #ffffff !important;
    padding: 15px !important;
    height: 100% !important; /* Spans full height of grid box */
    min-height: 250px;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Header styled as a top header banner or top badge */
.grid-item .newshead {
    background: #0056b3 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: bold;
    font-size: .9rem;
    border-radius: 6px !important;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: 5px !important;       /* Clean top spacing offset */
    margin-bottom: 25px !important;    /* Pushes scrolling text box down */
    width: auto !important;
    max-width: 90%;
}

/* Vertical text viewport window */
.grid-item .cssmarquee {
    width: 100% !important;
    height: 100px !important; /* Fixed height for scrolling area */
    overflow: hidden !important; /* Perfectly masks text bounds */
    position: relative !important;
    background: #fffdf5; /* Notice accent background */
    border-top: 1px dashed #ddd; /* Separates top section from ticker */
    padding: 10px 0;
}

/* The running text paragraph */
.grid-item .cssmarquee p {
    position: absolute !important;
    margin: 0 !important;
    left: 0;
    right: 0;
    text-align: center !important;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.95rem;
    color: #d32f2f !important; /* Red notification color */
    font-weight: 600;
    line-height: 1.5 !important;
    white-space: normal !important; /* Allows text to wrap into multiple lines if needed */

    /* Animates text up from the bottom boundary */
    animation: layoutVerticalTicker 10s linear infinite !important;
}

/* Pause scroll on hover */
.grid-item .cssmarquee:hover p {
    animation-play-state: paused !important;
}

/* --- RESPONSIVE VERTICAL KEYFRAMES --- */
@keyframes layoutVerticalTicker {
    0% {
        transform: translateY(100px); /* Starts completely below window */
    }
    10% {
        transform: translateY(10px);   /* Slides up into readable space */
    }
    85% {
        transform: translateY(10px);   /* Rests on screen for reading */
    }
    100% {
        transform: translateY(-100px); /* Slides away over top border */
    }
}