.announcement-bar {
    width: 100%;
    transition: all 0.3s ease;
    color: #000 !important;
    overflow: hidden;
}

.announcement-bar .container {
    position: relative;
    font-weight: 500;
    padding: 0;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee-loop 25s linear infinite;
    color: #000 !important;
    padding-left: 50px;
    position: relative;
    /* Add initial delay to make sure text is visible on page load */
    animation-delay: 0.5s;
}

@keyframes marquee-loop {
    0% { transform: translateX(-100%); opacity: 1; }
    5% { opacity: 1; } /* Ensure text is fully visible at the start */
    100% { transform: translateX(100%); opacity: 1; }
}

/* Mobile optimization */
@media (max-width: 768px) {
    .marquee-content {
        animation-duration: 25s; /* Same speed as desktop */
    }
}

.announcement-bar a {
    color: #000;
    text-decoration: underline;
}

.announcement-bar a:hover {
    color: rgba(0, 0, 0, 0.8);
}

/* Color variations */
.announcement-bar.bg-primary {
    background-color: #0d6efd;
    color: #000 !important;
}

.announcement-bar.bg-secondary {
    background-color: #6c757d;
    color: #000 !important;
}

.announcement-bar.bg-success {
    background-color: #198754;
    color: #000 !important;
}

.announcement-bar.bg-danger {
    background-color: #dc3545;
    color: #000 !important;
}

.announcement-bar.bg-warning {
    background-color: #ffc107;
    color: #000 !important;
}

.announcement-bar.bg-info {
    background-color: #0dcaf0;
    color: #000 !important;
}

.announcement-bar.bg-dark {
    background-color: #212529;
    color: #000 !important;
}

/* Make all text black in all color variations */
.announcement-bar .marquee-content,
.announcement-bar a {
    color: #000 !important;
}

/* Make sure text is visible on page load */
.visible-on-load {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Animation for attention */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

.announcement-bar.animate {
    animation: pulse 2s infinite;
}