.ticker-wrapper {
  width: 100%;
  overflow: hidden;
  background: #221f1f; /* change if needed */
  color: #fff;
  padding: 8px 0;
}

.ticker {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.ticker-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker-scroll 18s linear infinite;
}

.ticker-wrapper:hover .ticker-track {
  animation-play-state: paused;
}

/*
.ticker-wrapper {
  border-bottom: 1px solid #e53935;
  border-top: 1px solid #e53935;
}
  */

.ticker-link {
  color: #ff3b3b;
  text-decoration: none;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

/* Hover effect */
.ticker-link:hover {
  background: #ff3b3b;
  color: #fff;
}



/* Animation */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}






@media (max-width: 399px) {
  .ticker span {
    font-size: 10px;
  }
   .ticker-link {
    font-size: 10px;
  }
  .ticker-track {
    animation-duration: 25s;
  }
}

@media (max-width: 480px) {
  .ticker span {
    font-size: 11px;
  }
   .ticker-link {
    font-size: 11px;
  }
  .ticker-track {
    animation-duration: 25s;
  }
}

@media (max-width: 768px) {
  .ticker span {
    font-size: 12px;
  }
   .ticker-link {
    font-size: 12px;
  }
  .ticker-track {
    animation-duration: 25s;
  }
}