.announcement-banner {
    background-color: rgba(253, 180, 21, 0.808); /* 10% transparent yellow background */
    color: rgb(15, 14, 14);
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid black; /* Black border */
    font-size: calc(1rem + 0.5vw);
    text-align: center;
    position: fixed;
    top: 15%; /* Drop the banner 2 spaces (approx. header height + margin) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    width: 90%; /* Dynamically scales */
    max-width: 600px; /* Limit maximum width */
    overflow: hidden; /* Prevent overflow horizontally */
    word-wrap: break-word; /* Wrap text to the next line */
    white-space: normal; /* Allow text to wrap */
    font-weight: bold; /* Make text bold */
    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8); /* Add subtle white shadow */
    margin-top: 60px; /* Add spacing between header and banner */
}

/* Optional fade animation */
@keyframes fade-in-out {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}