/* Kadence Row Layout Styles */
.custom-animated-bg-blob {
  position: relative;
  overflow: hidden;
  background: rgba(31, 31, 71, 1); /* Fallback color */
  z-index: 1;
}

/* Big Blob 1 (Left) */
.custom-animated-bg-blob::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 600px;
  height: 600px;
  background: linear-gradient(295deg, #0500FF, #C832C8, #00DCFF, #2B6DFE, #C832C8, #0500FF);
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  animation: blobMoveBig1 25s infinite alternate ease-in-out, blobColor 10s infinite alternate ease-in-out;
  border-radius: 50%;
  z-index: -1;
}

/* Big Blob 2 (Right) */
.custom-animated-bg-blob::after {
  content: '';
  position: absolute;
  top: 30%;
  right: -200px;
  width: 500px;
  height: 500px;
  background: linear-gradient(295deg, #00DCFF, #2B6DFE, #C832C8, #0500FF, #C832C8, #00DCFF);
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  animation: blobMoveBig2 30s infinite alternate ease-in-out, blobColor 15s infinite alternate ease-in-out;
  border-radius: 50%;
  z-index: -1;
}

/* Smaller Blobs */
.shape-blob {
  position: absolute;
  mix-blend-mode: color-dodge;
  border-radius: 40% 60% 50% 50%;
  opacity: 0.7;
  filter: blur(20px); /* Adjusted blur */
  background: linear-gradient(295deg, #2B6DFE, #C832C8, #0500FF, #00DCFF, #2B6DFE, #C832C8);
  background-size: 300% 300%;
  animation: blobMoveSmall 18s infinite alternate ease-in-out, blobColor 12s infinite alternate ease-in-out;
}

.shape-blob.one {
  height: 100px;
  width: 120px;
  left: 15%;
  top: 30%;
  animation-delay: 2s;
}

.shape-blob.two {
  height: 80px;
  width: 100px;
  left: 60%;
  top: 15%;
  animation-delay: 4s;
}

.shape-blob.three {
  height: 140px;
  width: 160px;
  left: 70%;
  top: 70%;
  animation-delay: 6s;
}

.shape-blob.four {
  height: 60px;
  width: 80px;
  left: 25%;
  top: 80%;
  animation-delay: 8s;
}

.shape-blob.five {
  height: 90px;
  width: 110px;
  left: 80%;
  top: 25%;
  animation-delay: 10s;
}

/* Big Blob 1 (Left) Animations */
@keyframes blobMoveBig1 {
  from {
    transform: translate(-100px, -50px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }
  to {
    transform: translate(500px, 100px) rotate(-10deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }
}

/* Big Blob 2 (Right) Animations */
@keyframes blobMoveBig2 {
  from {
    transform: translate(200px, -50px) rotate(90deg);
    border-radius: 30% 70% 50% 50% / 50% 40% 60% 60%;
  }
  to {
    transform: translate(-300px, 150px) rotate(10deg);
    border-radius: 60% 40% 40% 60% / 60% 70% 30% 50%;
  }
}

/* Small Blobs Animations */
@keyframes blobMoveSmall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 30% 70% 40% 60%;
  }
  50% {
    transform: translate(50px, -30px) rotate(30deg);
    border-radius: 50% 50% 60% 40%;
  }
  100% {
    transform: translate(-30px, 50px) rotate(-30deg);
    border-radius: 40% 60% 70% 30%;
  }
}

/* Smooth Gradient Animation */
@keyframes blobColor {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}