.white_bg .workflow-scheme__inner {
    background-color: #ededed;
}

.grey .workflow-scheme__inner {
    background-color: #fff;
}

.workflow-scheme__inner {
   position: relative;
   padding: clamp(117px, 167 * (100vw / 1920), 167px) clamp(20px,  61 * (100vw / 1920),  61px);
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 500;
   text-transform: uppercase;
}

.workflow-scheme__inner::before {
   content: '';
   position: absolute;
   inset: 4px;
   background-image: radial-gradient(circle, #D9D9D9 1px, transparent 1px);
   background-size: 6px 6px;
   background-position: 0 0;
   pointer-events: none;
   z-index: 0;
   opacity: 1;
}

.workflow-scheme__inner.dot-grid--ready::before {
   opacity: 0;
}

.workflow-scheme__inner > * {
   position: relative;
   z-index: 3;
}

.workflow-scheme__dot-grid {
   position: absolute;
   inset: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   z-index: 1;
}

.workflow-scheme__dot-grid-inner {
   display: grid;
}

.workflow-scheme__dot {
   width: 2px;
   height: 2px;
   background-color: #D9D9D9;
   border-radius: 50%;
}

.workflow-scheme__branches {
   display: flex;
   flex-direction: column;
   margin-left: clamp(35px, 50 * (100vw / 1920), 50px);
   gap: clamp(60px, 108 * (100vw / 1920), 108px);
   z-index: 2;
   position: relative;
}

.workflow-scheme__branches::before {
   content: '';
   position: absolute;
   top: 50%;
   bottom: 0;
   left: clamp(-80px, -60 * (100vw / 1920), -60px);
   width: clamp(120px, 160 * (100vw / 1920), 160px);
   height: clamp(120px, 160 * (100vw / 1920), 160px);
   border: 1px solid #d1d1d1;
   border-right: none;
   border-radius: 999px;
   z-index: 0;
   transform: translateY(-50%);
   clip-path: inset(0 50% 0 0);
}


.workflow-scheme__branch {
   display: flex;
   position: relative;
}

.workflow-scheme__branch-label {
   position: absolute;
   color: #818181;
   font-size: clamp(8px, 10 * (100vw / 1920), 10px);
   line-height: 1;
   text-transform: uppercase;
   bottom: 0;
   left: clamp(-70px, -50 * (100vw / 1920), -50px);
   background: #ededed;
}

.workflow-scheme__branch:last-child .workflow-scheme__branch-label {
   bottom: unset;
   top: 0;
}

.workflow-scheme__branch-subitems {
   position: relative;
   display: flex;
}

.workflow-scheme__item,
.workflow-scheme__branch-subitem{
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 12px;
   color: #fff;
   border-radius: 10px;
   border: 1px solid #D1D1D1;
   background: #373737;
   padding: clamp(7px, 11 * (100vw / 1920), 11px) clamp(8px, 14 * (100vw / 1920), 14px);
   width: clamp(112px, 155 * (100vw / 1920), 155px);
   align-items: center;
}

.workflow-scheme__branch-subitem{
   width: clamp(90px, 155 * (100vw / 1920), 155px);
}

.workflow-scheme__item:has(.workflow-scheme__item-icon-main){
   width: clamp(90px, 109 * (100vw / 1920), 109px);
}

.workflow-scheme__item:not(:has(.workflow-scheme__item-icons)),
.workflow-scheme__branch-subitem{
   height: clamp(40px, 54 * (100vw / 1920), 54px);
}

.workflow-scheme__item.workflow-scheme__item--rounded {
   border-radius: 100%;
   padding: clamp(15px, 23 * (100vw / 1920), 23px);
   width: auto;
   height: auto;
   aspect-ratio: 1/1;
}

.workflow-scheme__item * {
   color: inherit;
}

.workflow-scheme__item-heading,
.workflow-scheme__branch-subitem {
   display: flex;
   align-items: center;
   gap: clamp(6px, 8 * (100vw / 1920), 8px);
}

.workflow-scheme__item--rounded .workflow-scheme__item-heading {
   flex-direction: column;
}

.workflow-scheme__item-title,
.workflow-scheme__branch-subitem-title {
   font-size: clamp(10px, 14 * (100vw / 1920), 14px);
   line-height: 1;
   position: relative;
}

.workflow-scheme__item--standard:not(:has(.workflow-scheme__item-icon-main)) .workflow-scheme__item-title,
.workflow-scheme__branch-subitem-title {
   padding-left: 7px;
}

.workflow-scheme__item--standard:not(:has(.workflow-scheme__item-icon-main)) .workflow-scheme__item-title:before,
.workflow-scheme__branch-subitem-title:before{
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 2px;
   background-color: #CDFF3A;
   border-radius: 999px;
}

.workflow-scheme__item--rounded .workflow-scheme__item-title {
   font-size: clamp(11px, 15 * (100vw / 1920), 15px);
   line-height: 1;
}

.workflow-scheme__item--rounded .workflow-scheme__item-prefix {
   font-size: clamp(18px, 26 * (100vw / 1920), 26px);
   line-height: 1;
}

.workflow-scheme__item-icon-main {
   width: clamp(14px, 17 * (100vw / 1920), 17px);
   aspect-ratio: 1 / 1;
   display: flex;
   justify-content: center;
   align-items: center;
}

.workflow-scheme__item-icon-main img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.workflow-scheme__item-icons {
   display: flex;
   gap: 8px;
   justify-content: space-between;
   width: 100%;
}

.workflow-scheme__item-icon {
   height: clamp(14px, 18 * (100vw / 1920), 18px);
}

.workflow-scheme__item-icon img {
   width: auto;
   height: 100%;
   object-fit: cover;
}

.workflow-scheme__connector {
   color: #818181;
   font-size: clamp(8px, 10 * (100vw / 1920), 10px);
   line-height: 1;
   display: flex;
   flex-direction: column;
   gap: clamp(16px, 20 * (100vw / 1920), 20px);
   justify-content: center;
   min-width: clamp(25px, 38 * (100vw / 1920), 38px);
}

.workflow-scheme__connector-front,
.workflow-scheme__connector-back {
   display: flex;
   flex-direction: column;
   gap: 11px;
   text-align: center;
}

.workflow-scheme__connector-back {
   flex-direction: column-reverse;
}

.workflow-scheme__connector-text {
   padding: 0 10px;
}

.workflow-scheme__connector-arrow {
   position: relative;
   width: 100%;
   height: 1px;
   background-color: currentColor;
   border-radius: 999px;
}

.workflow-scheme__connector-arrow::before,
.workflow-scheme__connector-arrow::after {
   content: "";
   position: absolute;
   top: 50%;
   width: 6px;
   height: 1px;
   background-color: currentColor;
   border-radius: 999px;
   transform-origin: left center;
}


.workflow-scheme__connector-arrow::before {
   right: -6px;
   transform: translateY(-50%) rotate(225deg);
}


.workflow-scheme__connector-arrow::after {
   right: -6px;
   transform: translateY(-50%) rotate(-225deg);
}

.workflow-scheme__connector-arrow--back {
   transform: scaleX(-1);
}

@media (max-width: 1200px) {
   .workflow-scheme__inner {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 30px 16px;
   }

   .workflow-scheme__item,
   .workflow-scheme__branch-subitem {
      width: 100%;
      max-width: 155px;
   }

   .workflow-scheme__branch-subitems {
      flex-direction: column;
      align-items: center;
   }

   .workflow-scheme__branches {
      margin-left: 0;
      margin-top: 32px;
      flex-direction: row;
      align-items: start;
      justify-content: center;
      gap: 30px;
      width: 100%;
   }

   .workflow-scheme__branch {
      display: flex;
      position: relative;
      flex-direction: column;
      flex: 0 1 155px;
   }

   .workflow-scheme__branch-label {
      position: static;
      margin-bottom: 8px;
      text-align: center;
      width: fit-content;
      align-self: center;
   }

   .workflow-scheme__branches::before {
      top: -15%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(180px, 350 * (100vw / 1920), 350px);
      height: clamp(180px, 350 * (100vw / 1920), 350px);
      border: 1px solid #d1d1d1;
      clip-path: inset(0 0 50% 0);
      z-index: 0;
   }

   .workflow-scheme__connector {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 0;
      gap: 8px;
   }

   .workflow-scheme__connector-front,
   .workflow-scheme__connector-back {
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
   }

   .workflow-scheme__connector-arrow {
      width: 1px;
      height: 40px;
   }

   .workflow-scheme__connector-arrow::before,
   .workflow-scheme__connector-arrow::after {
      width: 1px;
      height: 8px;
      left: 50%;
      bottom: 0px;
      top: unset;
      right: auto;
      border-radius: 999px;
      transform-origin: center bottom;
   }

   .workflow-scheme__connector-arrow::before {
      transform: translateX(-50%) rotate(45deg);
   }

   .workflow-scheme__connector-arrow::after {
      transform: translateX(-50%) rotate(-45deg);
   }

   .workflow-scheme__connector-arrow--back {
      transform: scaleY(-1);
   }


   .workflow-scheme__connector {
      gap: 12px;
      flex-direction: row;
      position: relative;
   }

   .workflow-scheme__connector-front {
      flex-direction: row;
   }
   .workflow-scheme__connector-back {
      flex-direction: row;
   }
   .workflow-scheme__connector-text {
      position: absolute;
   }

   .workflow-scheme__connector-front .workflow-scheme__connector-text {
      left: 20px;
   }
   .workflow-scheme__connector-back .workflow-scheme__connector-text {
      right: 20px;
   }
}