#news-container {
    width: 100%;
    height: 400px;
    position: relative;
    margin-top: 0px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #e6e6e6;
    border: 2px solid transparent;
    border-radius: 5px;
    /* background: linear-gradient(#f0ffff, #f0ffff) padding-box, 
                linear-gradient(to right, #3498db, #fe0000, #3498db, #fe0000) border-box; */
}

.news-header {
    background: linear-gradient(to right, #1b67a8, #65a7e0);
    color: #fff;
    font-weight: bold;
    text-align: left;
    padding: 8px;
    border-radius: 1px 1px 0 0; /* match container radius at top */
    font-size: 16px;

    position: absolute;
    top: 0;             
    width: 100%;        
    z-index: 1;        
}

#news-box {
    position: absolute;
    bottom: -100%; /* Start from bottom */
    width: calc(100% - 20px); /* 20px left + 20px right spacing */
    left: 10px; /* Center it with spacing */
}

.news-item {
    padding: 10px;
    background: #fff;
    border-left: 4px solid darkgray;
    /* border: 1px solid red; */
    border-radius: 5px;
    margin-bottom: 10px;
    transition: transform 0.2s, background 0.2s;
}

.news-item a {
    text-decoration: none;
    color: black;
    font-size: 15px;
    /* font-weight: bold; */
    display: block; /* So it takes full width */
}

.news-item:hover {
    background: #e6f2ff;
    transform: scale(1.02);
}