// Background Gradient Utilities

@each $color, $value in $theme-colors {
  .bg-gradient-#{$color} {
    background-color: $value;
    background-image: linear-gradient(
      180deg,
      $value 10%,
      darken($value, 15%) 100%
    );
    background-size: cover;
  }
}

// Grayscale Background Utilities

@each $level, $value in $grays {
  .bg-gray-#{$level} {
    background-color: $value !important;
  }
}

#home_intro {
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, #f3f4f6, #ffffff);

  .background-shape {
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(0, 123, 255, 0.2);
    border-radius: 50%;
    filter: blur(60px);
    animation: float 5s ease-in-out infinite;

    &.shape-1 {
      top: -40px;
      left: -40px;
    }

    &.shape-2 {
      bottom: -40px;
      right: -40px;
      animation-delay: 2s;
    }
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
}