.product-bg {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.product-bg .container-fluid {
  height: 100%;
  position: relative;
  width: 100%;
}
.product-bg__container {
  height: 900px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
}
.product-bg__waves-container {
  height: 100%;
  left: 68%;
  position: absolute;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.product-bg__color-1,
.product-bg__noise {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 36%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.product-bg__color-1 {
  background: #42258d;
}
.product-bg__lottie {
  height: auto;
  left: 35%;
  top: 47%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 100%;
}
.product-bg.is-mobile .product-bg__image-1,
.product-bg.is-mobile .product-bg__image-2 {
  display: unset;
}
.product-bg__image-1 {
  display: none;
  height: auto;
  left: -16%;
  opacity: 0.6;
  position: absolute;
  top: 61%;
  transform: translate(-50%, -50%) scaleY(-1) rotate(15deg);
  width: 100%;
}
.product-bg__image-2 {
  display: none;
  height: auto;
  left: 65%;
  opacity: 0.6;
  position: absolute;
  top: 14%;
  transform: translate(-50%, -50%) scaleX(-1) rotate(28deg);
  width: 100%;
}
.product-bg__gradient-1 {
  background: radial-gradient(circle, rgb(182 71 214) 0%, rgba(182 71, 214,0.9) 25%, rgba(93,43,153,0.4) 50%, rgba(82,41,153,0) 70%);
  height: 90%;
  left: 26%;
  mix-blend-mode: color-dodge;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}
.product-bg__gradient-2 {
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  height: 50%;
  left: 50%;
  mix-blend-mode: color-burn;
  opacity: 0.5;
  position: absolute;
  top: -20%;
  transform: translateX(-50%);
  width: 100%;
}
.product-bg__noise {
  mix-blend-mode: overlay;
  opacity: 0.3;
}

@media (min-width: 768px) {
  .product-bg__container {
    height: 1100px;
    width: 1100px;
  }
  .product-bg__waves-container {
    left: 65%;
    top: 42%;
  }
  .product-bg__gradient-1 {
    height: 100%;
    left: 30%;
    top: 56%;
    width: 100%;
  }
  .product-bg__gradient-2 {
    top: 0%;
  }
  .product-bg__color-1,
  .product-bg__noise {
    top: 46%;
  }
  .product-bg__lottie {
    left: 35%;
    top: 50%;
  }
}

@media (min-width: 1024px) {
  .product-bg__container {
    height: 1600px;
    width: 1600px;
  }
  .product-bg__waves-container {
    left: 65%;
    top: 48%;
  }
  .product-bg__gradient-1 {
    left: 36%;
    top: 54%;
  }
  .product-bg__gradient-2 {
    top: 6%;
  }
  .product-bg__color-1,
  .product-bg__noise {
    height: 85%;
    top: 48%;
  }
}

@media (min-width: 1360px) {
  .product-bg__container {
    height: 1800px;
    width: 1800px;
  }
  .product-bg__waves-container {
    left: 65%;
    top: 47%;
  }
  .product-bg__gradient-1 {
    height: 100%;
    left: 38%;
    top: 46%;
    width: 100%;
  }
  .product-bg__gradient-2 {
    top: 7%;
    width: 110%;
  }
  .product-bg__color-1,
  .product-bg__noise {
    height: 100%;
    top: 51%;
    width: 110%;
  }
  .product-bg__lottie {
    width: 110%;
  }
}

@media (min-width: 1920px) {
  .product-bg__container {
    height: 2000px;
    width: 2000px;
  }
  .product-bg__waves-container {
    left: 65%;
    top: 48%;
  }
  .product-bg__gradient-1 {
    height: 100%;
    left: 40%;
    top: 40%;
    width: 100%;
  }
  .product-bg__gradient-2 {
    top: -5%;
    width: 100vw;
  }
  .product-bg__color-1,
  .product-bg__noise {
    height: 95%;
    top: 50%;
    width: 100%;
  }
  .product-bg__lottie {
    width: 100vw;
  }
}