.step-based-graph {
  .title-container {
    text-align: center;
    max-width: 1050px;
    margin-bottom: 60px;
    @media (max-width: 991px) {
      margin-bottom: 40px;
    }
    .title-e {
      margin-bottom: 30px;
      @media (max-width: 991px) {
        margin-bottom: 20px;
      }
    }
    .description-e {
      color: #444;
      font-size: 18px;
      line-height: 24px;
      @media (max-width: 991px) {
        font-size: 16px;
      }
    }
  }
  .graph-container {
    margin-bottom: 60px;
    @media (max-width: 991px) {
      margin-bottom: 100px;
    }
    .graph {
      background-image: url('https://pages.skycell.ch/hubfs/background-grid.webp');
      background-size: cover;
      background-position: center;
      aspect-ratio: 1224 / 546;
      position: relative;
      .axis_label {
        color: #6B7176;
        font-size: 12px;
        text-transform: uppercase;
        position: absolute;
        &.x_axis {
          bottom: 0;
          left: 50%;
          transform: translate(-50%, calc(100% + 20px));
          @media (max-width: 991px) {
            transform: translate(-50%, calc(100% + 5px));
          }
        }
        &.y_axis {
          transform: translate(calc(-100% - 20px), -50%);
          left: 0;
          top: 50%;
          writing-mode: sideways-lr;
          @media (max-width: 991px) {
            transform: translate(calc(-100%), -50%);
            height: 100%;
            text-align: center;
          }
        }
      }
      .overlay {
        background-image: url('https://pages.skycell.ch/hubfs/gray_background_4.webp');
        background-position: center bottom;
        background-size: contain;
        height: 100%;
        background-repeat: no-repeat;
        .path {
          -webkit-mask: url("https://pages.skycell.ch/hubfs/stroke.svg") no-repeat center / contain;
          mask: url("https://pages.skycell.ch/hubfs/stroke.svg") no-repeat top / contain;
          height: 100%;
          transform: scale(1.005);
        }
        .single_step {
          width: fit-content;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          transform: translate(-50%, -50%);
          .circle {
            color: #6B7176;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 100%;
            aspect-ratio: 1 / 1;
            width: 36px;
            background-color: white;
            border-radius: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: solid 1px #f6f6f6;
            cursor: pointer;
            transition: 0.3s ease-out;
            &:hover {
              background-color: #ddd;
            }
          }
          .text {
            font-size: 14px;
            position: absolute;
            top: calc(100% + 10px);
            min-width: 150px;
            @media (max-width: 991px) {
              display: none;
            }
            .title {
              font-weight: 700;
              line-height: 120%;
              padding-bottom: 2px;
            }
            .subtitle {
              color: #374151;
              line-height: 120%;
            }
          }
          &[data-spot="1"] {
            left: 11%;
            top: 61%;
          }
          &[data-spot="2"] {
            left: 17.5%;
            top: 58%;
          }
          &[data-spot="3"] {
            left: 24%;
            top: 55%;
          }
          &[data-spot="4"] {
            left: 30.5%;
            top: 50%;
          }
          &[data-spot="5"] {
            left: 37%;
            top: 45%;
          }
          &[data-spot="6"] {
            left: 43.5%;
            top: 39%;
          }
          &[data-spot="7"] {
            left: 50%;
            top: 32%;
          }
          &[data-spot="8"] {
            left: 56.5%;
            top: 24%;
          }
          &[data-spot="9"] {
            left: 63%;
            top: 18%;
          }
          &[data-spot="10"] {
            left: 69.5%;
            top: 12%;
          }
          &[data-spot="11"] {
            left: 76%;
            top: 8%;
          }
          &[data-spot="12"] {
            left: 82.5%;
            top: 4%;
          }
          &[data-spot="13"] {
            left: 89%;
            top: 2%;
          }
        }
      }
    }
  }
  .content-container {
    padding-bottom: 50px;
    @media (max-width: 991px) {
      padding-bottom: 20px;
    }
    .single_content_box {
      background-color: white;
      border-radius: 16px;
      border: 1px solid #DBE0E6;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      padding: 40px;
      display: none;
      grid-template-columns: auto auto;
      gap: 50px;
      animation: fade-in-from-right 0.5s ease-in-out;
      @media (max-width: 991px) {
        padding: 20px;
        grid-template-columns: auto;
        gap: 30px;
      }
      .left {
        display: grid;
        justify-items: start;
        position: relative;
        .breadcrumbs {
          display: flex;
          align-items: center;
          gap: 10px;
          border-radius: 1000px;
          background: rgba(0, 168, 154, 0.10);
          padding: 10px 20px;
          margin-bottom: 20px;
          .text {
            color: #00A89A;
            font-size: 14px;
            font-weight: 700;
            line-height: 100%;
          }
        }
        .description {
          color: #6B7176;
          font-size: 17px;
          line-height: 26px;
          margin-bottom: 20px;
          @media (max-width: 991px) {
            margin-bottom: 0px;
          }
        }
        .navigation {
          display: flex;
          justify-content: center;
          gap: 15px;
          @media (max-width: 991px) {
            position: absolute;
            top: 0;
            transform: translate(-20px, calc(-100% + -35px));
          }
          .arrow {
            background-color: #E6E6E6;
            height: 44px;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 1000px;
            cursor: pointer;
            transition: 0.3s ease-out;
            &:hover {
              background-color: #777;
            }
            svg {
              height: 20px;
            }
          }
        }
      }
      .right {
        .key-title {
          color: #21272A;
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0.7px;
          text-transform: uppercase;
          margin-bottom: 15px;
        }
        .usps {
          display: grid;
          gap: 10px;
          .single_usp {
            display: flex;
            gap: 10px;
            align-items: center;
            .circle {
              height: 6px;
              width: 6px;
              border-radius: 1000px;
              background-color: #008C83;
            }
            .text {
              color: #6B7176;
              font-size: 15px;
            }
          }
        }
      }
    }
    /*
    .pagination {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
      .dot {
        width: 10px;
        height: 10px;
        border-radius: 1000px;
        background-color: #DBE0E6;
        transition: 0.5s ease-out;
      }
    }
    */
  }    
  .bottom-container {
    display: flex;
    justify-content: center;
    .button {
      background-color: transparent;
      border: 1px solid #008c83;
      color: #008c83;
      font-weight: 500;
      padding: 13px 30px !important;
      border-radius: 32px;
      cursor: pointer;
      font-size: 14px;
      letter-spacing: .48px;
      line-height: 100%;
      transition: 0.3s ease-out;
      -webkit-user-select: none; /* Safari */
      user-select: none;
      display: block;
      &:hover {
        background-color: rgba(0, 168, 154, 0.10);
      }
    }
  }
  .container {
    max-width: 1050px;
    @media (max-width: 991px) {
      padding-right: 0px !important;
      padding-left: 0px !important;
    }
  }
  /* Circles */
  &[data-current-step="1"] .single_step[data-number="1"],
  &[data-current-step="2"] .single_step[data-number="2"],
  &[data-current-step="3"] .single_step[data-number="3"],
  &[data-current-step="4"] .single_step[data-number="4"],
  &[data-current-step="5"] .single_step[data-number="5"],
  &[data-current-step="6"] .single_step[data-number="6"],
  &[data-current-step="7"] .single_step[data-number="7"] {
    .circle {
      width: 44px !important;
      font-size: 18px !important;
      color: white !important;
      border-color: transparent !important;
      background: linear-gradient(135deg, #00A89A 0%, #4FC7E8 100%);
      box-shadow: 0 20px 25px -5px rgba(0, 168, 154, 0.40), 0 8px 10px -6px rgba(0, 168, 154, 0.40);
    }
    .text {
      .title {
        color: #00A89A;
      }
    }
  } 
  /* Path */
  &[data-current-spot="1"] .graph .overlay .path { /* 11 */
    background: linear-gradient(90deg, #16B1B0 10%, #6B7176 12%);
  }
  &[data-current-spot="2"] .graph .overlay .path { /* 17,5 */
    background: linear-gradient(90deg, #16B1B0 16%, #6B7176 18%);
  }
  &[data-current-spot="3"] .graph .overlay .path { /* 24 */
    background: linear-gradient(90deg, #16B1B0 23%, #6B7176 25%);
  }
  &[data-current-spot="4"] .graph .overlay .path { /* 30,5 */
    background: linear-gradient(90deg, #16B1B0 30%, #6B7176 32%);
  }
  &[data-current-spot="5"] .graph .overlay .path { /* 37 */
    background: linear-gradient(90deg, #16B1B0 36%, #6B7176 38%);
  }
  &[data-current-spot="6"] .graph .overlay .path { /* 43,5 */
    background: linear-gradient(90deg, #16B1B0 43%, #6B7176 44%);
  }
  &[data-current-spot="7"] .graph .overlay .path { /* 50 */
    background: linear-gradient(90deg, #16B1B0 49%, #6B7176 51%);
  }
  &[data-current-spot="8"] .graph .overlay .path { /* 56,5 */
    background: linear-gradient(90deg, #16B1B0 56%, #6B7176 58%);
  }
  &[data-current-spot="9"] .graph .overlay .path { /* 63 */
    background: linear-gradient(90deg, #16B1B0 62%, #6B7176 64%);
  }
  &[data-current-spot="10"] .graph .overlay .path { /* 69,5 */
    background: linear-gradient(90deg, #16B1B0 69%, #6B7176 71%);
  }
  &[data-current-spot="11"] .graph .overlay .path { /* 76 */
    background: linear-gradient(90deg, #16B1B0 75%, #6B7176 77%);
  }
  &[data-current-spot="12"] .graph .overlay .path { /* 82,5 */
    background: linear-gradient(90deg, #16B1B0 82%, #6B7176 84%);
  }
  &[data-current-spot="13"] .graph .overlay .path { /* 89 */
    background: linear-gradient(90deg, #16B1B0 88%, #6B7176 90%);
  }
  /* Content-container */
  &[data-current-step="1"] .single_content_box[data-step="1"],
  &[data-current-step="2"] .single_content_box[data-step="2"],
  &[data-current-step="3"] .single_content_box[data-step="3"],
  &[data-current-step="4"] .single_content_box[data-step="4"],
  &[data-current-step="5"] .single_content_box[data-step="5"],
  &[data-current-step="6"] .single_content_box[data-step="6"],
  &[data-current-step="7"] .single_content_box[data-step="7"] {
    display: grid !important;
  }
  /* Pagination */
  &[data-current-step="1"] .pagination .dot[data-index="1"],
  &[data-current-step="2"] .pagination .dot[data-index="2"],
  &[data-current-step="3"] .pagination .dot[data-index="3"],
  &[data-current-step="4"] .pagination .dot[data-index="4"],
  &[data-current-step="5"] .pagination .dot[data-index="5"],
  &[data-current-step="6"] .pagination .dot[data-index="6"],
  &[data-current-step="7"] .pagination .dot[data-index="7"] {
    width: 50px;
    background-color: #008C83;
  } 
}
@keyframes fade-in-from-right {
  from {
    transform: translateX(10px);
    opacity: 0;
  } to {
    transform: translateX(0px);
    opacity: 1;
  }