/* Scrolling container */
.scrolling-container {
    width: 250px !important; /* Limit visible width */
    height: 32px; /* Adjust height to fit text */
    overflow: hidden; /* Hide overflowing text */
    position: relative; /* Position context for scrolling text */
    border: 1px solid whitesmoke; /* Add border */
    border-radius: 5px; /* Rounded edges */
    background-color: black; /* Background color */
    color: white; /* Text color */
    display: block; /* Centering helper */
    align-items: center; /* Center content vertically */
  white-space: nowrap !important; /* Prevents text from breaking */
    padding: 0px 0px 0px 0px;
    margin: 0px 10px 0px 10px;
}

/* Scrolling text */
.scrolling-text {
    white-space: nowrap; /* Prevent line breaks */
    position: absolute; /* Position for scrolling */
    animation: scroll-text 10s linear infinite; /* Smooth scrolling */
    font-family: "Roboto Slab", sans-serif; /* Font family */
    font-size: 15px; /* Text size */
    font-weight: bold;
    height: 32px;
    color: white; /* Text color */
    line-height: 1; /* Reset line height */
    will-change: transform; /* Optimize animation */
    padding: 0px 0px 0px 0px;
    margin: 8px 0px 0px 0px;

}

/* Keyframe animation for seamless scrolling */
@keyframes scroll-text {
    from {
        transform: translateX(0%); /* Start offscreen right */
    }
    to {
        transform: translateX(-100%); /* Move offscreen left */
    }
}

/* Pause scrolling on hover */
.scrolling-container:hover .scrolling-text {
    animation-play-state: paused;
}