body {
  margin: 0;
  font-size: 20px;
}

a {
  text-decoration: none;
}

/* =========================
   MARQUEE CONTAINER
========================= */
.marquee {
  height: 35px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* =========================
   BOTH ROWS
========================= */
.marquee div {
  position: absolute;
  top: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 40px;
  height: 35px;
  animation: marquee 25s linear infinite;
  will-change: transform; /* smoother */
}

/* First row */
.marqueeone {
  left: 0;
}

/* Second row */
.marqueetwo {
  left: 100%;
}

/* Offset second animation perfectly */
.marqueetwo {
  animation-delay: -12.5s; /* NEGATIVE delay is the key */
}

/* Pause on hover */
.marquee:hover div {
  animation-play-state: paused;
}

/* =========================
   ANIMATION
========================= */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* =========================
   TEXT STYLE
========================= */
.marquee a {
  font-size: 18px;
  font-weight: 600;
  color: #b41d43;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.marquee a:hover {
  color: #8e1534;
}


@media (max-width: 768px) {
  .marquee div {
    min-width: 100%;       /* Each row fills the container */
    gap: 20px;             /* Add spacing between items */
  }

  .marqueeone {
    left: 0;
  }

  .marqueetwo {
    left: 200%;            /* Start after the first row */
    animation-delay: -12.5s; /* Keep offset timing */
  }

  .marquee a {
    font-size: 14px;       /* Smaller text for mobile */
    flex: 0 0 auto;        /* Prevent shrinking */
  }
}

@media (max-width: 768px) {
    .header-logo {
        display: none !important;
    }
}