.bg-cont {
    position: relative;
    z-index: -1000;
    width: 100%;
    height: 100%;
    margin-top: 100px;
  }
  
  .circle {
    position: absolute;
    border-radius: 100%;
    z-index: -1000;
    filter: blur(160px);
    animation: float 8s infinite ease-in-out;
  }
  
  .circle-1 {
    width: 200px;
    height: 200px;
    background: rgb(11, 239, 106);
    top: 20%;
    left: -10%;
    animation-delay: 0s;
    margin-top: 50px;
  }
  
  .circle-2 {
    width: 200px;
    height: 200px;
    background: rgb(255, 193, 21);
    top: 90%;
    left: 35%;
    filter:blur(120px);
    animation-delay: -2s;
    margin-top: 200px;
  }
  
  .circle-3 {
    width: 200px;
    height: 200px;
    background: rgb(255, 42, 52);
    top: 50%;
    right: 0%;
    animation-delay: 10s;
  }
  
  .circle-4 {
    width: 400px;
    height: 400px;
    background: rgba(255, 22, 150, 0.669);
    top: 100%;
    right: 0%;
    animation-delay: 0s;
    margin-top: 200px;
  }
  
  @keyframes float {
    0% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -60px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 50px) scale(0.9);
    }
    100% {
      transform: translate(0, 0) scale(1);
    }
  }