.app-container {
  .process {
    .process__container {
      position: relative;
      z-index: 2;
      max-width: 1192px;
      padding: 48px 100px;
      width: 100%;
      margin: auto;
      display: flex;
      gap: 32px;
      @media (max-width: 1400px) {
        padding: 48px 50px;
      }
      @media (max-width: 1000px) {
        padding: 32px 16px;
      }
      @media (max-width: 768px) {
        flex-direction: column;
      }
    }
    .process__header {
      min-width: 376px;

      .process__nav-items {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .process__nav-item {
        background-color: transparent;
        border: 0;
        font-family: var(--mainfont);
        display: flex;
        padding: 0;
        padding-left: 18px;
        border-left: 2px solid transparent;
        transition: 0.3s;
        font-weight: 600;
        font-size: 16px;
        color: rgba(25, 19, 37, 0.5);
        cursor: pointer;
        gap: 6px;
        @media (max-width: 768px) {
          min-width: max-content;
          padding-left: 12px;
        }
        span.title {
          transition: 0.3s;
        }
        &.is-active {
          span.title {
            text-decoration: underline;
          }
          border-left: 2px solid #7b4fff;
          color: #191325;
        }
        &:hover {
          span.title {
            color: #191325;
          }
        }
        .number {
          color: rgba(25, 19, 37, 0.5) !important;
          font-size: 11px;
          font-weight: 400 !important;
          text-decoration: none !important;
        }
      }
    }
    .process__items {
      position: relative;
      padding-bottom: 64px;
      .process__arrows {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        gap: 8px;
        @media (max-width: 768px) {
          justify-content: center;
          right: auto;
          left: 50%;
          transform: translateX(-50%);
        }
        .arrow {
          width: 48px;
          height: 48px;
          border: 1px solid rgba(25, 19, 37, 0.1);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: transparent;
          transform: 0.3s;
          cursor: pointer;
          &:disabled {
            opacity: 0.4;
          }
          &:hover {
            background-color: rgba(25, 19, 37, 0.05);
            border: 1px solid rgba(25, 19, 37, 0.05);
          }
        }
      }
    }
    .process__item {
      width: 100%;
      opacity: 0;
      visibility: hidden;
      height: 0;
      transition: 0.3s;
      .process__item-points {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 32px;
        .process__item-point {
          display: flex;
          gap: 12px;
          width: calc(50% - 8px);
          svg {
            min-width: 28px;
          }
        }
      }
      &.is-active {
        opacity: 1;
        visibility: visible;
        height: auto;
      }
      p.title {
        display: flex;
        flex-direction: column;
        gap: 12px;
        color: #191325;
        font-weight: 600;
        font-size: 19px;
        margin-bottom: 8px;
      }
    }
  }
}