/* Hero section background pattern */
.hero-section {
  overflow: hidden;
  position: relative;
  background-image: 
    linear-gradient(to right, rgba(200, 210, 220, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 210, 220, 0.15) 1px, transparent 1px),
    radial-gradient(ellipse at center top, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  background-position: center center;
  animation: gridMove 20s linear infinite;
}


/* Scrolling animations */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes gridMove {
  0% {
    background-position: 0 0, 0 0, center center;
  }
  100% {
    background-position: 40px 40px, 40px 40px, center center;
  }
}


/* Dark mode adjustments */
html[data-theme="dark"] .hero-section {
  background-image: 
    linear-gradient(to right, rgba(100, 110, 120, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 110, 120, 0.1) 1px, transparent 1px),
    radial-gradient(ellipse at center top, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}