.ticker-wrapper {
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    height: 3.5rem;
    background-color: #ebebeb;
}

.ticker-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.ticker {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-scroll-ltr 15s linear infinite;
}

.ticker-wrapper.rtl .ticker {
    animation: ticker-scroll-rtl 15s linear infinite;
}
/* Add this new rule */
.ticker-wrapper:hover .ticker {
    animation-play-state: paused;
}

.ticker-link:hover .ticker {
    animation-play-state: paused !important;
}

/* Use this class to switch direction */
.ticker-wrapper.rtl .ticker {
    animation: ticker-scroll-rtl 10s linear infinite;
}



.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 50px;
    cursor: pointer;
    font-size: 1.25rem;
    color: black;
    font-weight: 300;
    font-family: sans-serif;
    transition: color 0.3s ease;
}

    .ticker-item img.ticker-icon {
     
        /*border-radius: 50%;*/ /* circle shape */
        flex-shrink: 0;
        width: 32px; /* Adjust as needed */
        height: 32px; /* Make equal to width for square shape */
        object-fit: cover; /* Ensures image fills the square without distortion */
        border-radius: 0; /* Remove any rounding */
        margin-right: 10px; /* Spacing before the text */
        vertical-align: middle;
    }

    .ticker-item:hover {
        color: red;
    }

/*.ticker-item {
    width: 100%;
    text-decoration: none;
    display: inline-block;
    padding: 0 50px;
    cursor: pointer;
    font-size: 1.25rem;
    color: black;
    font-weight: 300;
    font-family: sans-serif;
    transition: color 0.3s ease;
}

    .ticker-item:hover {
        color: red;
    }*/

@keyframes ticker-scroll-ltr {
    0% {
        transform: translateX(100%);
    }

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

@keyframes ticker-scroll-rtl {
    0% {
        transform: translateX(-100%);
    }

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