.step-b {
  display: none;
}

.text {
  width: max-content;
  transform-origin: left top;
}

.text span,
.text .custom-popover {
  width: max-content;
}

.text .custom-popover {
  margin: 0;
}

.step1-1 {
  top: 23%;
  left: 21%;
}

.step1-2 {
  top: 73%;
  left: 18.5%;
}

.step2-1 {
  top: 58%;
  left: 44%;
}

.step2-2 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.step2-2 span {
  position: absolute;
  top: 442px;
  left: 460px;
}

.step2-2 .popover-icon1 {
  position: absolute;
  top: 368px;
  left: 142px;
}

.step2-2 .popover-for-icon1 {
  transform: none !important;
  top: 258px !important;
  left: 65px !important;
}

.step2-2 .popover-for-icon1 .arrow {
  bottom: -11px !important;
  top: auto !important;
  left: 78px !important;
}

.step2-3 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.step2-3 .text2-3-1 {
  position: absolute;
  top: 95px;
  left: 440px;
  width: 400px;
}

.step2-3 .text2-3-2 {
  position: absolute;
  top: 465px;
  left: 461px;
  width: 435px;
}

.step2-4 {
  top: 10%;
  left: 53%;
}

.step2-5 {
  top: 56%;
  left: 7%;
}

.step2-6 {
  top: 60%;
  left: 58.5%;
}

.step2-7 {
  top: 61%;
  left: 45%;
}

.step3-1 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.step3-1 span {
  position: absolute;
  top: 360px;
  left: 378px;
}

.step3-1 .popover-icon2 {
  position: absolute;
  top: 442px;
  left: 45px;
}

.step3-1 .popover-for-icon2 {
  transform: none !important;
  top: 310px !important;
  left: 15px !important;
}

.step3-1 .popover-for-icon2 .arrow {
  bottom: -11px !important;
  top: auto !important;
  left: 31px !important;
}

.step3-2 {
  top: 36%;
  left: 29%;
}

.step3-3 {
  top: 45%;
  left: 5%;
}

.step3-4 {
  top: 38%;
  left: 25.5%;
}

.step3-5 {
  top: 61%;
  left: 64.5%;
}

.step3-6 {
  width: 190px;
  top: 48%;
  left: 15%;
}

.step3-7 {
  top: 77%;
  left: 66.5%;
}

.step3-8 {
  top: 60%;
  left: 68%;
}

@media (max-width: 1024.98px) {
  .step1-1 {
    top: 36%;
    left: 24%;
  }
  .step1-2 {
    top: 41%;
    left: 14.5%;
  }
  .step2-1 {
    top: 62%;
    left: 47%;
  }
  .step2-2 span {
    top: 161px;
    left: 274px;
  }
  .step2-2 .popover-icon1 {
    top: 110px;
    left: 57px;
  }
  .step2-2 .popover-for-icon1 {
    top: 140px !important;
    left: 17px !important;
  }
  .step2-2 .popover-for-icon1 .arrow {
    bottom: auto !important;
    top: -11px !important;
    left: 41px !important;
  }
  .step2-3 .text2-3-1 {
    top: 4px;
    left: 280px;
  }
  .step2-3 .text2-3-2 {
    top: 190px;
    left: 300px;
  }
  .step2-4 {
    top: 5%;
    left: 58%;
    width: 225px;
  }
  .step2-5 {
    top: 24%;
    left: 8%;
    width: 260px;
  }
  .step2-6 {
    top: 38%;
    left: 60%;
  }
  .step2-7 {
    top: 32%;
    left: 42%;
  }
  .step3-1 span {
    top: 119px;
    left: 214px;
  }
  .step3-1 .popover-icon2 {
    top: 190px;
    left: 29px;
  }
  .step3-1 .popover-for-icon2 {
    top: 69px !important;
    left: 12px !important;
  }
  .step3-1 .popover-for-icon2 .arrow {
    left: 18px !important;
  }
  .step3-2 {
    top: 37%;
    left: 33%;
  }
  .step3-3 {
    top: 46%;
    left: 8%;
  }
  .step3-4 {
    top: 9%;
  }
  .step3-5 {
    top: 39%;
    left: 68%;
  }
  .step3-6 {
    width: 145px;
    top: 44%;
    left: 8%;
  }
  .step3-7 {
    top: 73%;
    left: 66.5%;
  }
  .step3-8 {
    top: 41%;
    left: 62.5%;
  }
}

.step2-5-highlight {
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: right bottom;
}

.step2-5-highlight .img-text {
  position: absolute;
  right: 95%;
  top: 70%;
  width: 450px;
  color: #fff;
  font-size: 1.125rem;
  transform-origin: right top;
}
/*# sourceMappingURL=add-character.css.map */