/* -------------------------------  Horizontal Animated Strips start ------------------------------- */

.strip-blue,
.strip-yellow {
  /*position: absolute;*/
  /*width: 105vw;*/
  height: 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-weight: bold;
  white-space: nowrap;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  pointer-events: none;
  margin: 0;
  padding: 0;
  /*z-index:;*/
}

.strip-blue {
  background-color: var(--navy-blue, #0a2342);
  color: var(--theme-color-white, #fff);
  transform: translate(-50%, -60%); /* Horizontal - removed rotation */
  text-transform: uppercase;
}

.strip-yellow {
  background: var(--cpc-gradient-to-left);
  color: var(--navy-blue, #0a2342);
  text-transform: uppercase;
}

.scroll-track {
  display: inline-flex;
  white-space: nowrap;
}

.scroll-track span {
  display: inline-block;
  margin: 0 20px;
  font-size: 16px;
  letter-spacing: 2px;
  font-family:var(--happy-monky);
  font-weight:400 !important;
}

.scrolling-above-banner:hover .scroll-track span{
    font-weight:800 !important;
}

.strip-blue li,
.strip-yellow li {
  list-style: none;
  font-size: 16px;
  letter-spacing: 2px;
  display: inline !important;
}

/* Animation Keyframes */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.scroll-left {
  animation: scroll-left 30s linear infinite;
}

.scroll-right {
  animation: scroll-right 30s linear infinite;
}

/*.scroll-left {*/
/*  animation: scroll-left 15s linear infinite;*/
/*}*/

/*.scroll-right {*/
/*  animation: scroll-right 15s linear infinite;*/
/*}*/

/* -------------------------------  Horizontal Animated Strips end ------------------------------- */