@media (min-width: 1025px) {
/* Контейнер между step-1 и step-2 */
body:not(.elementor-editor-active) #arrow-d-1 {
  flex: 1;
  position: relative;
  min-height: 157px;
  border: none;
}
body:not(.elementor-editor-active) #arrow-d-2 {
  flex: 1;
  position: relative;
  min-height: 140px;
  border: none;
}

/* Первый вложенный div */
body:not(.elementor-editor-active) #arrow-d-1 > div {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 157px;
}
body:not(.elementor-editor-active) #arrow-d-2 > div {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 140px;
}

/* Второй div — опорный */
body:not(.elementor-editor-active) #arrow-d-1 > div > div,
body:not(.elementor-editor-active) #arrow-d-2 > div > div {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==================================================
   Горизонталь от step-1 до центра
================================================== */
body:not(.elementor-editor-active) #arrow-d-1 > div::before,
body:not(.elementor-editor-active) #arrow-d-2 > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 1px;
  background: #D1D1D1;
  transform: translateY(-0.5px);
}

/* ==================================================
   Горизонталь от центра к step-2
================================================== */
body:not(.elementor-editor-active) #arrow-d-1 > div::after,
body:not(.elementor-editor-active) #arrow-d-2 > div::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 0.5px;
  background: #D1D1D1;
  transform: translateY(0.5px);
}

/* ==================================================
   ВЕРТИКАЛЬНАЯ ЛИНИЯ
================================================== */
body:not(.elementor-editor-active) #arrow-d-1::before,
body:not(.elementor-editor-active) #arrow-d-2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  border: none;
  border-left: 1px solid #D1D1D1;
  transform: translate(-0.5px, -0.5px);
}

/* ==================================================
   ОСТРАЯ ЗАЛИТАЯ СТРЕЛКА
================================================== */
body:not(.elementor-editor-active) #arrow-d-1::after,
body:not(.elementor-editor-active) #arrow-d-2::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: -0.5px;
  width: 0;
  height: 0;
  border-left: 12px solid #D1D1D1;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(4px);
}

body:not(.elementor-editor-active) #arrow-d-1 > div > div > div,
body:not(.elementor-editor-active) #arrow-d-2 > div > div > div {
  line-height: 0;
  font-size: 0;
}

body:not(.elementor-editor-active) .process-step.step-1.is-open {
  width: 471px;
}
}

/* =======================
   TABLET ARROWS
======================= */
@media (min-width: 768px) and (max-width: 1024px) {

/* Контейнер между step-1 и step-2 */
body:not(.elementor-editor-active) #arrow-1 {
  flex: 1;
  position: relative;
  min-height: 157px;
  border: none;
}
body:not(.elementor-editor-active) #arrow-2 {
  flex: 1;
  position: relative;
  min-height: 132px;
  border: none;
}

/* Первый вложенный div */
body:not(.elementor-editor-active) #arrow-1 > div {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 157px;
}
body:not(.elementor-editor-active) #arrow-2 > div {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 132px;
}

/* Второй div — опорный */
body:not(.elementor-editor-active) #arrow-1 > div > div,
body:not(.elementor-editor-active) #arrow-2 > div > div {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==================================================
   Горизонталь от step-1 до центра
================================================== */
body:not(.elementor-editor-active) #arrow-1 > div::before,
body:not(.elementor-editor-active) #arrow-2 > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 1px;
  background: #D1D1D1;
  transform: translateY(-0.5px);
}

/* ==================================================
   Горизонталь от центра к step-2
================================================== */
body:not(.elementor-editor-active) #arrow-1 > div::after,
body:not(.elementor-editor-active) #arrow-2 > div::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 1px;
  background: #D1D1D1;
  transform: translateY(0.5px);
}

/* ==================================================
   ВЕРТИКАЛЬНАЯ ЛИНИЯ
================================================== */
body:not(.elementor-editor-active) #arrow-1::before,
body:not(.elementor-editor-active) #arrow-2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #D1D1D1;
  transform: translateX(-0.5px);
}

/* ==================================================
   ОСТРАЯ ЗАЛИТАЯ СТРЕЛКА
================================================== */
body:not(.elementor-editor-active) #arrow-1::after,
body:not(.elementor-editor-active) #arrow-2::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 12px solid #D1D1D1;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(4px);
}

body:not(.elementor-editor-active) #arrow-1 > div > div > div,
body:not(.elementor-editor-active) #arrow-2 > div > div > div {
  line-height: 0;
  font-size: 0;
}
}

/* =======================
   MOBILE ARROWS
======================= */
@media (max-width: 767px) {

/* Контейнер */
body:not(.elementor-editor-active) #arrow-m-1,
body:not(.elementor-editor-active) #arrow-m-2 {
  flex: 1;
  position: relative;
  min-height: 120px;
  border: none;
}

/* Первый вложенный div */
body:not(.elementor-editor-active) #arrow-m-1 > div,
body:not(.elementor-editor-active) #arrow-m-2 > div {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
}

/* Второй div — опорный */
body:not(.elementor-editor-active) #arrow-m-1 > div > div,
body:not(.elementor-editor-active) #arrow-m-2 > div > div {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==================================================
   ВЕРТИКАЛЬ от верхнего блока до центра
================================================== */
body:not(.elementor-editor-active) #arrow-m-1 > div::before,
body:not(.elementor-editor-active) #arrow-m-2 > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 1px;
  background: #D1D1D1;
  transform: translateX(-0.5px);
}

/* ==================================================
   ВЕРТИКАЛЬ от центра к нижнему блоку
================================================== */
body:not(.elementor-editor-active) #arrow-m-1 > div::after,
body:not(.elementor-editor-active) #arrow-m-2 > div::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 50%;
  width: 1px;
  background: #D1D1D1;
  transform: translateX(-0.5px);
}

/* ==================================================
   ГОРИЗОНТАЛЬНАЯ ЛИНИЯ В ЦЕНТРЕ
================================================== */
body:not(.elementor-editor-active) #arrow-m-1::before,
body:not(.elementor-editor-active) #arrow-m-2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  right: 0;
  height: 1px;
  background: #D1D1D1;
  transform: translateY(-0.5px);
  width: calc(100% - 1px);
}

/* ==================================================
   ОСТРАЯ СТРЕЛКА (СМОТРИТ ВНИЗ)
================================================== */
body:not(.elementor-editor-active) #arrow-m-1::after,
body:not(.elementor-editor-active) #arrow-m-2::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 0;
  height: 0;
  border-top: 10px solid #D1D1D1;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  /*transform: translateX(-50%);*/
}

body:not(.elementor-editor-active) #arrow-m-2::after {
  bottom: 2px;
}

/* Глушим лишний div */
body:not(.elementor-editor-active) #arrow-m-1 > div > div > div,
body:not(.elementor-editor-active) #arrow-m-2 > div > div > div {
  line-height: 0;
  font-size: 0;
}
}