.announcement-bar{
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#0d6efd;
    color:#fff;
    height:48px;
    width:100%;
}

.announcement-label{
    background:#ffc107;
    color:#000;
    font-weight:bold;
    padding:0 20px;
    height:48px;
    display:flex;
    align-items:center;
    white-space:nowrap;
}

.announcement-wrapper{
    overflow:hidden;
    flex:1;
    position:relative;
}

.announcement-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:scrollAnnouncements 30s linear infinite;
}

.announcement-wrapper:hover .announcement-track{
    animation-play-state:paused;
}

.announcement-item{
    color:#fff;
    text-decoration:none;
    padding:0 40px;
    white-space:nowrap;
    font-size:15px;
}

.announcement-item:hover{
    text-decoration:underline;
    color:#ffe082;
}

.important{
    color:#ffeb3b;
    margin-right:8px;
}

@keyframes scrollAnnouncements{

    from{
        transform:translateX(100%);
    }

    to{
        transform:translateX(-100%);
    }

}