.swing{
  animation: swing 2s infinite ease-in-out;
}




@keyframes swing {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}


.blob-bg {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  opacity: 0.5;
  mix-blend-mode: screen;
  animation: floaty 6s infinite ease-in-out alternate;
  z-index: 1000;
}

.blob1 {
  background: #ff0055;
  top: 190px;
  left: 130px;

  animation-delay: 0s;
}

.blob2 {
  background: #00ffcc;
  top:280px;
  right: 100px;
  animation-delay: 1.5s;
}

 .blob3 {
  background:#7cf295;
  top:600px;
  right: 500px;
  animation-delay: 2.0s;
}
.blob5 {
  background:#7cf295;
  top:120px;
  left: 630px;
  animation-delay: 2.5s;
}

.blob7 {
  background:#7cf295;
  top:120px;
  left: 480px;
  animation-delay: 2.5s;
}

.blob8 {
  background:#7cf295;
  top:250px;
  left: 880px;
  animation-delay: 2.5s;
}




@keyframes floaty {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  100% {
    transform: translateY(-30px) rotate(360deg) scale(1.2);
  }
}


/* ✅ Responsive Adjustments for Blobs */
@media (max-width: 768px) {
  .blob-bg {
    width: 100px;
    height: 100px;
  }

  .blob1 {
    top: -20px;
    left: -20px;
  }

  .blob2 {
    bottom: -25px;
    right: -25px;
  }
}

@media (max-width: 480px) {
  .blob-bg {
    width: 70px;
    height: 70px;
    opacity: 0.4;
  }

  .blob1 {
    top: -15px;
    left: -15px;
  }

  .blob2 {
    bottom: -20px;
    right: -20px;
  }
}
















/*mouse animation*/

  /* Main Circle Style */
    .main-circle {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ff00ff;
      pointer-events: none;
      opacity: 0.8;
      z-index: 10;
    }

    /* Secondary Circle Style with delay */
    .secondary-circle {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #00ffcc;
      pointer-events: none;
      opacity: 0.6;
      z-index: 5;
    }


    @media (max-width: 768px) {
  .main-circle,
  .secondary-circle {
    display: none !important;
  }
}