<!DOCTYPE html>
<html>
<head>
<style>
@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.ticker-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  padding-left: 100%;
  background: linear-gradient(90deg, #8E5BAF 0%, #1F5AA6 100%);
  z-index: 9999;
}

.ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-animation: ticker 30s linear infinite;
  animation: ticker 30s linear infinite;
}

.ticker_item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 2rem;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

/* HOVER EFFECT */
.ticker_item:hover {
  color: #FFD166;
  text-shadow: 0 4px 18px rgba(0,0,0,0.6);
  transform: translateY(-2px);
  animation: ticker 50s linear infinite;

}

.ticker_item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #FFD166;
  transition: width 0.3s ease;
}

.ticker_item:hover::after {
  width: 100%;
}
</style>
</head>

<body>
  <div class="ticker-wrap">
    <div class="ticker">
      <div class="ticker_item">
        Level 3 Diploma in Data Science | Admissions Open Now
      </div>
    </div>
  </div>
</body>
</html>
