/* Hero Section */
.hero {
  height: 50vh;
  min-height: 300px; /* Ensures a minimum height */
  max-height: 500px; /* Optional: prevents it from getting too tall */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--text-light);
}

/* Hero Content Styling */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 90%;
  padding: 1rem;
  /* Removed background, blur, and box-shadow */
}

/* Animated Background Overlay */
.animated-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, var(--hero-background-dark), var(--network-primary-color));
  background-size: 300% 300%;
  animation: gradientActivation 20s ease infinite;
  z-index: 1;
}

@keyframes gradientActivation {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero {
    height: 50vh;
    padding: 1rem;
  }

  .hero-content {
    max-width: 100%;
    padding: 0;
  }
}

/* High-performance Animation for Modern Browsers */
@media (prefers-reduced-motion: no-preference) {
  .animated-background {
    animation: gradientActivation 20s ease infinite;
  }

  /* Media Query for Mobile Devices */
@media (max-width: 768px) {
  .hero, .animated-background {
    height: 40vh; /* Slightly increased height for a better view on mobile */
    animation: none; /* Disable animations for better performance on mobile */
    background: linear-gradient(45deg, var(--hero-background-dark), var(--network-primary-color)); /* Fallback to a static gradient background for better appearance */
  }
}
}