/* ===========================
   TOP MARQUEE SECTION
=========================== */

.top-marquee-section{
    width:100%;
    height:45px;

    background:#c40000;

    display:flex;
    align-items:center;

    overflow:hidden;
    position:relative;
    z-index:999;
}

.marquee{
    width:100%;
    overflow:hidden;
}

.marquee-content{

    display:flex;
    align-items:center;
    width:max-content;

    animation:scrollText 45s linear infinite;
}

.marquee-content span{

    color:#ffffff;

    font-size:16px;
    font-weight:500;

    white-space:nowrap;

    margin-right:60px;

    position:relative;
}

.marquee-content span::after{

    content:"✦";

    color:#ffd700;

    margin-left:60px;
}

/* Animation */

@keyframes scrollText{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

/* Hover Pause */

.top-marquee-section:hover .marquee-content{
    animation-play-state:paused;
}

/* ===========================
   TABLET
=========================== */

@media(max-width:991px){

    .top-marquee-section{
        height:42px;
    }

    .marquee-content span{
        font-size:15px;
        margin-right:45px;
    }

    .marquee-content span::after{
        margin-left:45px;
    }

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

    .top-marquee-section{
        height:40px;
    }

    .marquee-content span{
        font-size:14px;
        margin-right:35px;
    }

    .marquee-content span::after{
        margin-left:35px;
    }

}

/* ===========================
   SMALL MOBILE
=========================== */

@media(max-width:480px){

    .top-marquee-section{
        height:36px;
    }

    .marquee-content span{
        font-size:13px;
        margin-right:28px;
    }

    .marquee-content span::after{
        margin-left:28px;
    }

}