body {
  font-size: 18px;      /* Default for small screens */
  line-height: 1.6;     /* Comfortable readability */
  font-weight: bold;
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) {
  body {
    font-size: 17px;
  }
}

/* Large devices (laptops/desktops, ≥992px) */
@media (min-width: 992px) {
  body {
    font-size: 18px;
  }
}

.rotate-clockwise {
  animation: rotateClockwise 4s linear infinite;
}

@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



/* Main Wrapper */
.hscroll-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    white-space: nowrap;
    height: 180px; /* fix */
}

/* Scrolling Container */
.hscroll {
    display: flex;
    animation: hscroll-left 75s linear infinite;
    touch-action: none;
}

/* Individual Items (You can restyle freely) */
.h-item {
    background: #f8f9fa;
    min-width: 140px;
    margin: 10px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    flex-shrink: 0;
}

/* Animation */
@keyframes hscroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Pause On Hover */
.hscroll-wrapper:hover .hscroll {
    animation-play-state: paused;
}

/* Pause On Touch */
.hscroll-wrapper:active .hscroll {
    animation-play-state: paused;
}

.rainbow-neon {
    font-weight: bold;
    animation: rainbow 4s linear infinite;
    color: #fff;
    text-shadow:
        0 0 8px rgba(255,255,255,0.6),
        0 0 16px rgba(255,255,255,0.5),
        0 0 24px rgba(255,255,255,0.4),
        0 0 40px rgba(255,255,255,0.3);
}

@keyframes rainbow {
    0%   { color: #ff0000; text-shadow: 0 0 10px #ff0000, 0 0 30px #ff0000; }
    16%  { color: #ff7f00; text-shadow: 0 0 10px #ff7f00, 0 0 30px #ff7f00; }
    33%  { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 30px #ffff00; }
    50%  { color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 30px #00ff00; }
    66%  { color: #0000ff; text-shadow: 0 0 10px #0000ff, 0 0 30px #0000ff; }
    83%  { color: #4b0082; text-shadow: 0 0 10px #4b0082, 0 0 30px #4b0082; }
    100% { color: #9400d3; text-shadow: 0 0 10px #9400d3, 0 0 30px #9400d3; }
}
.blink {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}


.typewriter {
  font: monospace;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid;
  width: 0;
  animation: type 2s steps(12) infinite;
}

@keyframes type {
  0%, 10%   { width: 0; }
  90%, 100% { width: 100%; }
}