/* Hero Background Styles - From Uiverse.io by ariba_9087 */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2),
    rgba(0, 0, 0, 0.1)
  );
  z-index: -1;
}

.hero-background::before,
.hero-background::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    #ffe1e3,
    /* Soft pink */ #ffe0dd,
    /* Light peach */ #ffe6d6,
    /* Pastel yellow */ #e7e2ff,
    /* Mint green */ #ddf6ff,
    /* Baby blue */ #eadfff,
    /* Lavender */ #ffe7e4,
    #ffdde0
  );
  transform: translate(-50%, -50%);
  animation: rotate 8s linear infinite;
  filter: blur(50px); /* Create a soft glowing effect */
  opacity: 0.8;
  z-index: -1;
}

/* Secondary rotating layer for depth */
.hero-background::after {
  width: 180%;
  height: 180%;
  animation: rotate-reverse 10s linear infinite;
  opacity: 0.6;
}

/* Rotating animations */
@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate-reverse {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}