.icon-set-circle {
  --max-height_cir: 1600px;
  overflow: hidden;
  height: 150vh;
  max-height: var(--max-height_cir);
  width: 100%;
  position: relative;
}

.hero-circle-items {
  height: 150vh;
  max-height: var(--max-height_cir);
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: -6%;
  padding-top: 0;
  display: flex;
  position: absolute;
  inset: 6% 0% 0%;
  overflow: visible;
}

.rotate-back.circle-icon-shadow {
  box-shadow: 0 0 50px #e7fe5180;
  border-radius: 100%;
}

.circle-1 {
  z-index: 0;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  perspective: 2000px;
  perspective-origin: 50%;
  transform-origin: 50%;
  transform-style: preserve-3d;
  border: 1px solid #ffffff40;
  border-radius: 100vw;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vw;
  margin-top: 9vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  transform: perspective(2000px);
}

.circle-2 {
  border: 1px solid #ffffff40;
  border-radius: 100vw;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 80vw;
  margin-top: 17vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
}

.circle-3 {
  pointer-events: none;
  border: 1px solid #ffffff40;
  border-radius: 100vw;
  justify-content: center;
  align-items: center;
  width: 60vw;
  height: 60vw;
  margin-top: 25vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
}

.img-circle-1-1 {
  z-index: 1;
  object-fit: contain;
  transform-style: preserve-3d;
  margin-right: auto;
  position: absolute;
  inset: 50% 0% 0%;
  width: 2.5rem;
  margin-top: -14px;
  margin-left: -22px;
}

.img-circle-1-2 {
  object-fit: contain;
  margin-right: auto;
  position: absolute;
  inset: 98% 0% 0% 62%;
  width: 4rem;
  margin-top: -26px;
  margin-left: -20px;
}

.img-circle-1-3 {
  object-fit: contain;
  margin-right: auto;
  position: absolute;
  inset: 89% 0% 0% 18%;
  width: 3rem;
  margin-top: -28px;
  margin-left: -20px;
}

.img-circle-1-4 {
  object-fit: contain;
  margin-right: auto;
  position: absolute;
  inset: 18% 0% 0% 11%;
  width: 4rem;
  margin-top: -30px;
  margin-left: -20px;
}

.img-circle-1-5 {
  object-fit: contain;
  margin-right: auto;
  position: absolute;
  inset: 11% 0% 0% 80%;
  width: 3rem;
  margin-top: -58px;
  margin-left: -41px;
}

.img-circle-1-6 {
  object-fit: contain;
  margin-top: -9px;
  margin-right: auto;
  position: absolute;
  inset: 80% 0% 0% 89%;
  object-fit: contain;
  width: 2.5rem;
  margin-left: -10px;
}

.img-circle-2-1 {
  position: absolute;
  inset: 34% auto 0% 1%;
  width: 3rem;
  margin-left: -8px;
}

.img-circle-2-2 {
  padding-top: 0;
  position: absolute;
  inset: 20% 8% 0% auto;
  width: 3rem;
  margin-right: -14px;
}

.img-circle-2-3 {
  padding-top: 0;
  position: absolute;
  inset: 40% -1% 0% auto;
  width: 3rem;
  margin-right: 3px;
}

.img-circle-2-4 {
  padding-top: 0;
  position: absolute;
  inset: auto 0% 23% 5%;
  width: 3rem;
  margin-left: -10px;
}

.img-circle-2-5 {
  padding-top: 0;
  position: absolute;
  inset: auto 0% 3% 29%;
  width: 3rem;
  margin-left: -12px;
}

.img-circle-2-6 {
  padding-top: 0;
  position: absolute;
  inset: auto 0% 16% 86%;
  width: 3rem;
  margin-left: 8px;
}

.img-circle-3-1 {
  margin-top: -1px;
  position: absolute;
  inset: 20% auto 0% 6%;
  width: 4rem;
  margin-left: -4px;
}

.img-circle-3-2 {
  margin-top: 15px;
  position: absolute;
  inset: 20% 6% 0% auto;
  width: 3rem;
  margin-right: 0;
}

.img-circle-3-3 {
  margin-bottom: 4px;
  position: absolute;
  top: auto;
  bottom: 5%;
  left: 72%;
  border-radius: 100%;
  width: 4rem;
  margin-left: 27px;
}

.img-circle-3-4 {
  margin-left: -6px;
  position: absolute;
  inset: auto 0% 11% 15%;
  width: 3rem;
  margin-bottom: 0;
}

.circle-1 {
  animation: rota-bac 175s infinite linear forwards;
}
.circle-2 {
  animation: rota 175s infinite linear backwards;
}
.circle-3 {
  animation: rota-bac 175s infinite linear forwards;
}

@keyframes rota-bac {
  0% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
      rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }
  100% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
      rotateY(0deg) rotateZ(360deg) skew(0deg, 0deg);
  }
}
@keyframes rota {
  0% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
      rotateY(0deg) rotateZ(360deg) skew(0deg, 0deg);
  }
  100% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
      rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }
}

/*  */
.circle-1 .rotate-back {
  animation: rota 175s infinite linear backwards;
}
.circle-2 .rotate-back {
  animation: rota-bac 175s infinite linear forwards;
}
.circle-3 .rotate-back {
  animation: rota 175s infinite linear backwards;
}
/*  */
@media screen and (max-width: 750px) {
  .icon-set-circle {
    height: fit-content;
  }
  .icon-set-circle .hero-circle-items {
    opacity: 0.25;
  }
}