#scrolling-bar {
    width: 100%; /* Full width of the container */
    height: 45px; /* Slightly larger height for better button/item positioning */
    background-color: navy; /* Background color for the scroll bar */
    padding: 0 10px; /* Add padding to the left and right of the bar */
    white-space: nowrap; /* Ensures items don't wrap to the next line */
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden; /* Hide scrollbar */
}

.scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: navy;
    color: white;
    font-size: 12px;
    border: none;
    padding: 12px 16px; /* Proper padding for the buttons */
    cursor: pointer;
    z-index: 1;
    border-radius: 5px; /* Optional rounded corners for buttons */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

.prev {
    left: 2px; /* Position left button at the start */
}

.next {
    right: 2px; /* Position right button at the end */
}

.scroll-button:hover {
    background-color: orangered; /* Change background color on hover */
}

.scrolling-content {
    display: flex; /* Align items in a horizontal row */
    gap: 15px; /* Space between items */
    transition: transform 0.1s linear; /* Smooth transition for transform */
    padding-left: 50px; /* Add some space between the first item and the left button */
    padding-right: 50px; /* Add some space between the last item and the right button */
    white-space: nowrap; /* Prevent items from wrapping to the next line */
    overflow-x: hidden; /* Hide the horizontal scrollbar */
    width: 100%;
}

.item {
    background-color: white; /* Item background color */
    padding: 9px 9px; /* More generous padding for items */
    border-radius: 8px; /* Rounded corners for each item */
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: auto; /* Minimum width for each item */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

    .item a {
        text-decoration: none;
        font-size: 14px; /* Slightly larger font size */
        color: navy; /* Item text color */
        font-weight: bold;
        display: flex;
        align-items: center;
    }

    .item img {
        width: 14px; /* Slightly larger image size */
        height: 14px;
        border-radius: 5px;
        margin-right: 8px; /* Adjust space between image and text */
    }

    /* Background change on hover */
    .item:hover {
        background-color: orangered; /* Change background color on hover */
    }