.wcf--timeline {
  .thumb {
    line-height: 0;
  }

  .timeline-item {
    display: flex;
    gap: var(--content-gap, 60px);
  }

  .content-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;

    .content {
      flex: 1;
    }
  }

  .step-box {
    position: relative;

    svg {
      width: 100%;
      height: 100%;
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--icon-size, 16px);
      line-height: var(--icon-size, 16px);
      width: calc(var(--icon-size, 25px) + (2 * var(--icon-padding, 1px)));
      height: calc(var(--icon-size, 25px) + (2 * var(--icon-padding, 1px)));
      border-radius: 100%;
      background-color: #F9B099;
      position: relative;
      z-index: 1;
    }

    .line {
      width: 2px;
      height: 100%;
      border-left: 1px dashed #F9B099;
      position: absolute;
      top: 0;
      left: calc(50% + 2px);
      transform: translateX(calc(-50% - 2px));
    }
  }

  .indicator {
    --indicator-gap: 20px;
    position: absolute;
    right: 10px;
    height: 1px;
    width: 70px;
    background-color: #000000;
    left: calc(100% + var(--indicator-gap));
  }

  &.style-1 {

  }

  &.style-2 {

    @media (min-width: 1023px) {
      .step-box {
        order: 1;
      }

      .content-wrap {
        width: calc(50% - (var(--icon-size, 25px) + (2 * var(--icon-padding, 1px))) / 2 - var(--content-gap, 60px));
      }

      .timeline-item:nth-child(odd) .content-wrap {
        direction: rtl;
      }

      .timeline-item:nth-child(odd) .indicator{
        left: auto;
        right: calc(100% + var(--indicator-gap));
      }

      .timeline-item:nth-child(even) {
        flex-direction: row-reverse;
      }
    }
  }
}

.elementor-widget-wcf--timeline {
  &.wcf-image-position-row img {
    width: 500px;
  }
}