/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 07 2025 | 06:55:14 */
/* 2025.11.07 - Kingsley */

/* bky-hero-bg-(1-6) | FAVS: 3, 4 */

/* 1 - Animated Gradient Background */
.bky-hero-bg-1 {
  background: linear-gradient(-45deg, #0a0a0a, #1a1a2e, #16213e, #0f3460);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

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

/* 2 - Subtle Moving Gradient with Blue Tones */
.bky-hero-bg-2 {
  background: linear-gradient(135deg, #000000 0%, #1a2332 25%, #2d3e5f 50%, #1a2332 75%, #000000 100%);
  background-size: 200% 200%;
  animation: subtleGradient 20s ease infinite;
}

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

/* 3 - Radial Gradient with Pulse Effect */
.bky-hero-bg-3 {
  background: radial-gradient(circle at 50% 50%, #1a2332 0%, #0a0a0a 50%, #000000 100%);
  background-size: 150% 150%;
  animation: radialPulse 10s ease-in-out infinite;
}

@keyframes radialPulse {
  0%, 100% {
    background-size: 150% 150%;
  }
  50% {
    background-size: 180% 180%;
  }
}

/* 4 - Mesh Gradient with Movement */
.bky-hero-bg-4 {
  background: 
    radial-gradient(at 0% 0%, rgba(26, 35, 50, 0.5) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(45, 62, 95, 0.4) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(22, 33, 62, 0.5) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(15, 52, 96, 0.3) 0px, transparent 50%),
    #000000;
  animation: meshMove 20s ease infinite;
}

@keyframes meshMove {
  0%, 100% {
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%;
  }
  25% {
    background-position: 10% 10%, 90% 10%, 90% 90%, 10% 90%, 0% 0%;
  }
  50% {
    background-position: 20% 5%, 80% 15%, 85% 85%, 5% 80%, 0% 0%;
  }
  75% {
    background-position: 10% 10%, 90% 10%, 90% 90%, 10% 90%, 0% 0%;
  }
}

/* 5 - Diagonal Gradient with Slow Rotation */
.bky-hero-bg-5 {
  background: linear-gradient(135deg, #000000 0%, #1a2332 30%, #6C89C1 100%);
  background-size: 300% 300%;
  animation: diagonalSlide 25s ease infinite;
}

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

/* 6 - Subtle and Professional (RECOMMENDED) */
.bky-hero-bg-6 {
  background: linear-gradient(180deg, #0a0a0a 0%, #1a2332 50%, #0a0a0a 100%);
  background-size: 100% 200%;
  animation: verticalShift 12s ease-in-out infinite;
  position: relative;
}

/* Add subtle overlay effect */
.bky-hero-bg-6::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(82, 113, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

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