:root {
  --plusX: -10px;
  --dc_x1: -45px; --dc_y1: -65px;
  --dc_x2: -28px; --dc_y2: -42px;
  --dc_x3: -78px; --dc_y3: -20px;
  --dc_x4: -40px; --dc_y4: -0px;
  --dc_x5: -72px; --dc_y5: 25px;
  --dc_x6: -62px; --dc_y6: 48px;
 
  --dm_x1: -5px; --dm_y1: -55px;
  --dm_x2: 5px; --dm_y2: -33px;
  --dm_x3: 13px; --dm_y3: -5px;
  --dm_x4: 8px; --dm_y4: 18px;
  --dm_x5: -5px; --dm_y5: 40px;

  --em_x1: -90px; --em_y1: -70px;
  --em_x2: -90px; --em_y2: -48px;
  --em_x3: -80px; --em_y3: 0px;
  --em_x4: -85px; --em_y4: 25px;
  --em_x5: -60px; --em_y5: 45px;
  --em_x6: -40px; --em_y6: 73px;

  --tm_x1: -50px; --tm_y1: -80px;
  --tm_x2: -10px; --tm_y2: -63px;
  --tm_x21: -3px; --tm_y21: -49px;
  --tm_x3: 3px; --tm_y3: -32px;
  --tm_x31: 9px; --tm_y31: -17px;
  --tm_x4: 12px; --tm_y4: -1px;
  --tm_x41: 9px; --tm_y41: 12px;
  --tm_x5: 6px; --tm_y5: 27px;
  --tm_x51: 0px; --tm_y51: 40px;
  --tm_x6: -10px; --tm_y6: 55px;
  --tm_x61: -37px; --tm_y61: 68px;
  --tm_x7: -50px; --tm_y7: 84px;
}
.wrapper-circle{
  font-family: "Montserrat", sans-serif;
}
.wrapper-circle {
  position: relative;
  width: 100%;
  cursor: pointer;
  /* background-color: blanchedalmond; */
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
}
.circle-left {
  position: relative;
  order: -1;
  text-align: end;
}
.circle-right {
  position: relative;
  order: 1;
  text-align: start;
}
.ring-img {
  max-width: 250px;
  /* background-color: blueviolet; */
}

.point {
  position: absolute;
  left: 0px;
  width: 10px;
  height: 10px;
  background: #d1020200;
  border-radius: 50%;
  /* opacity: 0; */
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.point span {
  position: absolute;
  left: 0px;
  top: -7px;
  color: #fff;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  opacity: 1;
  /* transform: translateX(-10px); */
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* .dc_1 { transform: translate(calc(var(--dc_x1) + var(--plusX)), var(--dc_y1)); }
.dc_2 { transform: translate(calc(var(--dc_x2) + var(--plusX)), var(--dc_y2)); }
.dc_3 { transform: translate(calc(var(--dc_x3) + var(--plusX)), var(--dc_y3)); }
.dc_4 { transform: translate(calc(var(--dc_x4) + var(--plusX)), var(--dc_y4)); }
.dc_5 { transform: translate(calc(var(--dc_x5) + var(--plusX)), var(--dc_y5)); }
.dc_6 { transform: translate(calc(var(--dc_x6) + var(--plusX)), var(--dc_y6)); }
.dc_6 span{white-space: wrap;}

.dm_1 { transform: translate(calc(var(--dm_x1) + var(--plusX)), var(--dm_y1)); }
.dm_2 { transform: translate(calc(var(--dm_x2) + var(--plusX)), var(--dm_y2)); }
@media screen and (max-width: 768px) {.dm_2 span{white-space: wrap; line-height: 1;}}

.dm_3 { transform: translate(calc(var(--dm_x3) + var(--plusX)), var(--dm_y3)); }
.dm_4 { transform: translate(calc(var(--dm_x4) + var(--plusX)), var(--dm_y4)); }
.dm_5 { transform: translate(calc(var(--dm_x5) + var(--plusX)), var(--dm_y5)); }


.em_1 { transform: translate(calc(var(--em_x1) + var(--plusX)), var(--em_y1)); }
.em_2 { transform: translate(calc(var(--em_x2) + var(--plusX)), var(--em_y2)); }
.em_2 span{white-space: normal; line-height: 1;}

.em_3 { transform: translate(calc(var(--em_x3) + var(--plusX)), var(--em_y3)); }
.em_3 span{white-space: normal; line-height: 1;}

.em_4 { transform: translate(calc(var(--em_x4) + var(--plusX)), var(--em_y4)); }
.em_5 { transform: translate(calc(var(--em_x5) + var(--plusX)), var(--em_y5)); }
.em_5 span{white-space: normal; line-height: 1;}
.em_6 { transform: translate(calc(var(--em_x6) + var(--plusX)), var(--em_y6)); }
.em_6 span{white-space: wrap;}

.tm_1 { transform: translate(calc(var(--tm_x1) + var(--plusX)), var(--tm_y1)); }
.tm_2 { transform: translate(calc(var(--tm_x2) + var(--plusX)), var(--tm_y2)); }
.tm_21 { transform: translate(calc(var(--tm_x21) + var(--plusX)), var(--tm_y21)); }

.tm_3 { transform: translate(calc(var(--tm_x3) + var(--plusX)), var(--tm_y3)); }
.tm_31 { transform: translate(calc(var(--tm_x31) + var(--plusX)), var(--tm_y31)); }

.tm_4 { transform: translate(calc(var(--tm_x4) + var(--plusX)), var(--tm_y4)); }
.tm_41 { transform: translate(calc(var(--tm_x41) + var(--plusX)), var(--tm_y41)); }

.tm_5 { transform: translate(calc(var(--tm_x5) + var(--plusX)), var(--tm_y5)); }
.tm_51 { transform: translate(calc(var(--tm_x51) + var(--plusX)), var(--tm_y51)); }
.tm_6 { transform: translate(calc(var(--tm_x6) + var(--plusX)), var(--tm_y6)); }
.tm_61 { transform: translate(calc(var(--tm_x61) + var(--plusX)), var(--tm_y61)); }
.tm_7 { transform: translate(calc(var(--tm_x7) + var(--plusX)), var(--tm_y7)); }

 
.icon-ring.active .point {
  opacity: 1;
  transform: scale(1);
}
.icon-ring.active .point span {
  opacity: 1; 
}
.icon-ring.active .dc_1{transform: translate(var(--dc_x1), var(--dc_y1));}
.icon-ring.active .dc_2{transform: translate(var(--dc_x2), var(--dc_y2));}
.icon-ring.active .dc_3{transform: translate(var(--dc_x3), var(--dc_y3));}
.icon-ring.active .dc_4{transform: translate(var(--dc_x4), var(--dc_y4));}
.icon-ring.active .dc_5{transform: translate(var(--dc_x5), var(--dc_y5));}
.icon-ring.active .dc_6{transform: translate(var(--dc_x6), var(--dc_y6));}

.icon-ring.active .dm_1{transform: translate(var(--dm_x1), var(--dm_y1));}
.icon-ring.active .dm_2{transform: translate(var(--dm_x2), var(--dm_y2));}
.icon-ring.active .dm_3{transform: translate(var(--dm_x3), var(--dm_y3));}
.icon-ring.active .dm_4{transform: translate(var(--dm_x4), var(--dm_y4));}
.icon-ring.active .dm_5{transform: translate(var(--dm_x5), var(--dm_y5));}


.icon-ring.active .em_1{transform: translate(var(--em_x1), var(--em_y1));}
.icon-ring.active .em_2{transform: translate(var(--em_x2), var(--em_y2));}
.icon-ring.active .em_3{transform: translate(var(--em_x3), var(--em_y3));}
.icon-ring.active .em_4{transform: translate(var(--em_x4), var(--em_y4));}
.icon-ring.active .em_5{transform: translate(var(--em_x5), var(--em_y5));}
.icon-ring.active .em_6{transform: translate(var(--em_x6), var(--em_y6));}

.icon-ring.active .tm_1{transform: translate(var(--tm_x1), var(--tm_y1));}
.icon-ring.active .tm_2{transform: translate(var(--tm_x2), var(--tm_y2));}
.icon-ring.active .tm_21{transform: translate(var(--tm_x21), var(--tm_y21));}
.icon-ring.active .tm_3{transform: translate(var(--tm_x3), var(--tm_y3));}
.icon-ring.active .tm_31{transform: translate(var(--tm_x31), var(--tm_y31));}
.icon-ring.active .tm_4{transform: translate(var(--tm_x4), var(--tm_y4));}
.icon-ring.active .tm_41{transform: translate(var(--tm_x41), var(--tm_y41));}
.icon-ring.active .tm_5{transform: translate(var(--tm_x5), var(--tm_y5));}
.icon-ring.active .tm_51{transform: translate(var(--tm_x51), var(--tm_y51));}
.icon-ring.active .tm_6{transform: translate(var(--tm_x6), var(--tm_y6));}
.icon-ring.active .tm_61{transform: translate(var(--tm_x61), var(--tm_y61));}
.icon-ring.active .tm_7{transform: translate(var(--tm_x7), var(--tm_y7));}


.icon-ring.active .point:nth-child(2) { transition-delay: 0.15s; }
.icon-ring.active .point:nth-child(2) span { transition-delay: 0.15s; }  
.icon-ring.active .point:nth-child(2) { transition-delay: 0.25s; }
.icon-ring.active .point:nth-child(2) span { transition-delay: 0.25s; } 

.icon-ring.active .point:nth-child(3) { transition-delay: 0.35s; } 
.icon-ring.active .point:nth-child(3) span { transition-delay: 0.35s; } 
.icon-ring.active .point:nth-child(4) { transition-delay: 0.45s; }
.icon-ring.active .point:nth-child(4) span { transition-delay: 0.45s; } 
.icon-ring.active .point:nth-child(5) { transition-delay: 0.55s; }
.icon-ring.active .point:nth-child(5) span { transition-delay: 0.55s; } 
.icon-ring.active .point:nth-child(6) { transition-delay: 0.65s; }
.icon-ring.active .point:nth-child(6) span { transition-delay: 0.65s; }
.icon-ring.active .point:nth-child(7) { transition-delay: 0.75s; }
.icon-ring.active .point:nth-child(7) span { transition-delay: 0.75s; }
.icon-ring.active .point:nth-child(8) { transition-delay: 0.85s; }
.icon-ring.active .point:nth-child(8) span { transition-delay: 0.85s; }
.icon-ring.active .point:nth-child(9) { transition-delay: 0.95s; }
.icon-ring.active .point:nth-child(9) span { transition-delay: 0.95s; } 
.icon-ring.active .point:nth-child(10) { transition-delay: 1.05s; }
.icon-ring.active .point:nth-child(10) span { transition-delay: 1.05s; } 
.icon-ring.active .point:nth-child(11) { transition-delay: 1.15s; }
.icon-ring.active .point:nth-child(11) span { transition-delay: 1.15s; } 
.icon-ring.active .point:nth-child(12) { transition-delay: 1.25s; }
.icon-ring.active .point:nth-child(12) span { transition-delay: 1.25s; }  */


@media screen and (max-width: 768px) {
  .wrapper-circle {
    padding: 2rem 0;
  }
  .icon-left {
    justify-content: end;
  }
  .icon-right {
    justify-content: start;
  }
  .ring-img {
    max-width: 200px;
  }
}