/* =========================
MAIN HEADER
========================= */
.main-header {
width: 100%;
position: relative;
}
/* =========================
TOP BLUE BAR
========================= */
.top-bar {
width: 100%;
background: #0b1f3a; /* dark blue */
padding: 25px 0;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.top-bar h1 {
color: #ffffff;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 1px;
margin: 0;
}
/* =========================
TICKER WRAPPER
========================= */
.ticker-wrapper {
width: 100%;
overflow: hidden;
background: #111827; /* slightly darker strip */
padding: 12px 0;
border-bottom: 2px solid #1f2937;
}
/* =========================
MOVING TEXT (NEWS STYLE)
========================= */
.ticker {
display: inline-block;
white-space: nowrap;
color: #ffffff;
font-size: 1rem;
font-weight: 500;
animation: scrollTicker 18s linear infinite;
}
/* Animation */
@keyframes scrollTicker {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}