/* scroll.css */

/* This is the item created by JS that scrolls */
.scrolling-item {
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    width: max-content;
}

/* This is the header part (title, date) inside the scrolling item */
.scrolling-header {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    flex-shrink: 0;
}

/* This is the details part inside the scrolling item */
.scrolling-details {
    padding-left: 1rem;
    white-space: nowrap;

    /* CHANGE DETAILS COLOR: Modify this hex value */
    color: #ffffff;

    /* CHANGE DETAILS FONT SIZE */
    font-size: 1.1rem;
}

/* This is the fixed notice area on the left */
#fixed-notice {

    /* CHANGE PINNED HEADER BG: Modify this rgba value. The '0.95' is for opacity. */
    background: linear-gradient(rgb(1, 40, 236), rgba(255, 255, 255, 0)),
        url('../images/bg-color.png');
    background-size: cover;
    background-position: center;
    border-right: 2px solid #29f605a9;
}

/* This is for the animated title (both scrolling and fixed) */
.focus-title {
    animation: focus 2s ease-in-out infinite;
    display: inline-block;
    /* CHANGE TITLE FONT SIZE AND COLOR: The base styles are in index.html (text-xl, font-bold).
       You can override them here for more control. */
    font-size: 1.25rem;
    color: rgb(5, 215, 33);
}

/* This is the animation for the title's color and size pulse */
@keyframes focus {

    /* CHANGE FOCUS COLORS: Modify these two hex values for the animation */
    0%,
    100% {
        color: #09f27d;
        transform: scale(1);
    }

    /* First color */
    50% {
        color: #ffffff;
        transform: scale(1.08);
    }

    /* Second color */
}

/* HOW TO USE A GRADIENT BACKGROUND (3-4 colors) */
/*
1. In index.html, REMOVE the 'bg-slate-800' class from 'scrolling-notice-container'.
2. Add the following CSS rule to this file.

#scrolling-notice-container {
    background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
}

You can change the direction ('to right') and add as many color hex codes as you want.
*/
#scrolling-notice-container {
    position: sticky;
    z-index: 40;
    /* z-index হেডারের (50) চেয়ে কম রাখুন */
}

.bg-color {
    background: linear-gradient(rgb(0, 0, 0)rgba(4, 26, 171, 0)),
        url('');
    background-size: cover;
    background-size: 120% auto;
    /* দুই পাশে zoom in */
    background-position: center;
    border-right: 1px solid #29f605a9;
}