/* Enhanced Banner Styles */
#banner {
  background: linear-gradient(
      135deg,
      rgba(102, 126, 234, 0.9) 0%,
      rgba(118, 75, 162, 0.9) 25%
    ),
    url("../../images/banner.jpg");
  background-attachment: scroll, fixed;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* Animated background particles */
#banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    );
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* Gradient text effects */

@keyframes glow {
  from {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
  }
  to {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.8),
      0 0 60px rgba(102, 126, 234, 0.4);
  }
}

@keyframes floatCircle {
  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-30px) translateX(20px) rotate(120deg);
  }
  66% {
    transform: translateY(10px) translateX(-15px) rotate(240deg);
  }
}