.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__shapes-container {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 0%;
  transform: translate(-50%, -50%);
}
.product-bg__shapes {
  height: 105vw;
  max-height: 805px;
  max-width: 1000px;
  position: relative;
  width: 180vw;
}
.product-bg__lottie {
  height: auto;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 768px;
}
.product-bg__lottie .png {
  display: none !important;
}
.product-bg__lottie path {
  stroke-width: 0;
}
.product-bg.is-mobile .product-bg__shape-1-container,
.product-bg.is-mobile .product-bg__shape-2-container,
.product-bg.is-mobile .product-bg__shape-3-container,
.product-bg.is-mobile .product-bg__shape-4-container {
  display: unset;
}
.product-bg__shape-1-container,
.product-bg__shape-2-container,
.product-bg__shape-3-container,
.product-bg__shape-4-container {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}
.product-bg__shape-1,
.product-bg__shape-2,
.product-bg__shape-3,
.product-bg__shape-4 {
  height: 100%;
  mix-blend-mode: multiply;
  position: relative;
  width: 100%;
}
.product-bg__shape-1-container svg,
.product-bg__shape-2-container svg,
.product-bg__shape-3-container svg,
.product-bg__shape-4-container svg {
  height: 100%;
  width: 100%;
}
.product-bg__light-1,
.product-bg__light-2,
.product-bg__light-3 {
  max-height: 500px;
  max-width: 500px;
  position: absolute;
  transform: translate(-50%, -50%);
}
.product-bg__light-1 {
  background: radial-gradient(circle, rgb(255 255 0) 0%, rgba(255,255,204,0) 35%);
  height: 50vw;
  left: 50%;
  mix-blend-mode: hard-light;
  opacity: 0.5;
  top: 50%;
  width: 50vw;
}
.product-bg__light-2 {
  background: radial-gradient(circle, rgba(255,255,204,1) 0%, rgba(255,255,204,0.4) 40%, rgba(255,255,204,0) 70%);
  height: 100vw;
  left: 40%;
  mix-blend-mode: soft-light;
  opacity: 0.2;
  top: 60%;
  width: 100vw;
}
.product-bg__light-3 {
  background: radial-gradient(circle, rgba(247,156,80,1) 0%, rgba(227,84,67,0.4) 50%, rgba(204,51,51,0) 70%);
  height: 100vw;
  left: 50%;
  mix-blend-mode: overlay;
  top: 50%;
  width: 100vw;
}
.product-bg__noise {
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100vw;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,0) 100%);
}

@media (min-width: 768px) {
  .product-bg__shapes-container {
    top: 40%;
  }
  .product-bg__shapes {
    height: 83vw;
    max-height: 849px;
    max-width: 1300px;
    width: 142vw;
  }
  .product-bg__lottie {
    top: 60%;
    width: 1024px;
  }
  .product-bg__light-1 {
    max-height: 900px;
    max-width: 900px;
  }
  .product-bg__light-2,
  .product-bg__light-3 {
    max-height: 700px;
    max-width: 700px;
  }
}

@media (min-width: 1024px) {
  .product-bg__shapes-container {
    top: 50%;
  }
  .product-bg__shapes {
    max-height: 1020px;
    max-width: 1750px;
  }
  .product-bg__lottie {
    top: 62%;
    width: 1360px;
  }
  .product-bg__light-1 {
    max-height: 1100px;
    max-width: 1100px;
  }
  .product-bg__light-2,
  .product-bg__light-3 {
    max-height: 900px;
    max-width: 900px;
  }
}

@media (min-width: 1360px) {
  .product-bg__shapes {
    height: 70vw;
    max-height: unset;
    max-width: unset;
    width: 120vw;
  }
  .product-bg__lottie {
    top: 65%;
    width: 100vw;
  }
  .product-bg__light-2,
  .product-bg__light-3 {
    max-height: 1000px;
    max-width: 1000px;
  }
  .product-bg__light-1 {
    height: 70vw;
    max-height: unset;
    max-width: unset;
    top: 30%;
    width: 70vw;
  }
  .product-bg__light-2 {
    left: 45%;
    top: 50%;
  }
  .product-bg__light-2 {
    top: 40%;
  }
}

@media (min-width: 1920px) {
  .product-bg__light-2,
  .product-bg__light-3 {
    max-height: 1200px;
    max-width: 1200px;
  }
}