/* Main container for the news ticker */
.news-ticker {
    position: fixed;          /* Fix the ticker at the top */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #a0a0a0;  /* Dark background */
    color: #fff;             /* White text */
    padding: 15px 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    z-index: 9999;           /* Ensure it's always on top */
    overflow: visible;        /* Hide overflow */
    border-bottom: 3px solid #ffcc00; /* Yellow border at the bottom */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for effect */
    display: flex;           /* Use flexbox for layout */
    align-items: center;     /* Vertically center content */
}

/* Left section with the "BREAKING NEWS" label */
.news-ticker .breaking-news-label {
    background-color: #ff4b4b; /* Red background */
    color: white;
    z-index: 10000;
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 20px;
    flex-shrink: 0;           /* Prevent shrinking */
}

/* News items container */
.news-ticker ul {
    display: flex;            /* Flexbox for horizontal layout */
    margin: 0;
    padding: 0;
    list-style: none;
    animation: ticker-scroll 100s linear infinite; /* Adjusted scrolling speed */
    white-space: nowrap;      /* Prevent line breaks */
    overflow: visible;         /* Hide overflow */
}

/* News item styling */
.news-ticker li {
    display: inline;          /* Inline for horizontal layout */
    margin-right: 30px;      /* Reduced space between news items */
    font-weight: bold;
    color: #fff;             /* White text */
    white-space: nowrap;      /* Prevent wrapping of text */
}

.news-ticker li:first-child
{
	margin-left: -1000px;
}

/* News item separators (dot) */
.news-ticker li:before {
    content: "•";            /* Bullet separator before each item */
    margin-right: 10px;
    color: #fff;             /* White bullet */
}

.news-ticker li:first-child:before {
    content: "";             /* No separator for the first item */
}

/* Scroll animation */
@keyframes ticker-scroll {
    0% {
        transform: translateX(100%); /* Start at the right edge */
    }
    100% {
        transform: translateX(-100%); /* Move all the way to the left */
    }
}

/* Ensure the body content doesn't hide behind the ticker */
body {
    padding-top: 40px; /* Adjust this according to the ticker height */
}

/* Hover effect to pause scrolling */
.news-ticker:hover ul {
    animation-play-state: paused;
}

/* ===== MOBILE VIEW STYLING ===== */
@media (max-width: 768px) {
    body {
        padding-top: 25px; /* Adjust this according to the ticker height */
    }

.news-ticker li:first-child
{
	margin-left: -500px;
}


    .news-ticker ul {
        animation: ticker-scroll 200s linear infinite; /* Slower scrolling on mobile */
    }

    .news-ticker {
        flex-direction: column; /* Stack the "BREAKING NEWS" label and news items vertically */
        padding: 10px 0;        /* Reduce padding */
    }

    /* Breaking news label full width on mobile */
    .news-ticker .breaking-news-label {
        margin-right: 0;
        margin-bottom: 10px;    /* Add some space between the label and news items */
        text-align: center;     /* Center the label text */
        width: 100%;            /* Ensure it spans the full width */
    }

    /* Ensure horizontal scroll for mobile */
    .news-ticker ul {
        display: flex;          /* Keep flexbox for horizontal scrolling */
        overflow: visible;       /* Hide overflow */
        white-space: nowrap;    /* Ensure items stay in one line */
    }

    /* Adjust the news items for mobile */
    .news-ticker li {
        font-size: 14px;        /* Slightly smaller text */
        margin-right: 30px;     /* Reduce space between items */
        white-space: nowrap;     /* Ensure news items don’t wrap */
        text-overflow: ellipsis; /* Handle long text with ellipsis */
    }

    /* Remove bullet on mobile */
    .news-ticker li:before {
        content: "";            /* No bullet points for mobile */
    }
}

@media (max-width: 428px) {
    body {
        padding-top: 55px; /* Adjust this according to the ticker height */
    }
}