/* Styles for ticker container */
.ticker-container {
    width: 100%;
    overflow: hidden;
    background-color: #333;
    color: #fff;
}

/* Styles for ticker */
.ticker {
	width:100%;
    display: inline-block;
    white-space: nowrap;
    animation: scroll 30s linear infinite; /* Adjust speed as needed */
    position: relative;
}

/* Add this to ensure enough width for scrolling */
.ticker-track {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

/* Keyframes for scrolling animation */
@keyframes scroll {
    0% {
        transform: translateX(80%);
    }
    100% {
        transform: translateX(-40%);
    }
}

/* Styles for individual news items */
.news-item a {
    color: #fff;
}

.latest-news {
    background-color: #f0f0f0; /* Background color for the box */
    color: #333; /* Text color for the box */
    width: 150px; /* Width of the box */
    text-align: center; /* Center-align the text */
    display: inline-block; /* Ensure the box and ticker are displayed inline */
}

.news-item {
    display: inline-block;
    vertical-align: top; /* Align items to the top */
}

.separator {
    margin: 0 10px; /* Adjust spacing as needed */
    width: 2px; /* Adjust the width of the separator */
    height: 10px; /* Adjust the height of the separator line */
    background-color: white; /* Set the color of the separator line */
    display: inline-block; /* Ensure the separator is displayed inline */
    vertical-align: middle; /* Align separator vertically in the middle */
}


@media only screen and (max-width: 991px) {
        
        .latest-news {
    font-size: 14px;
}
.ticker
{
    font-size:12px;

position: absolute;
    z-index: 0;
}

.ticker {
    animation: scroll 10s linear infinite; /* Adjust speed as needed */
}


/* Keyframes for scrolling animation */
@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
	
}