@import "../../assets/css/swiper.min.css";
@import "../../assets/css/cases.css";

:root {
  --general-color: #69B4FF;
  --cursor-color: #1389FF;
}

picture {
  img {
    height: 100%;
    width: auto;
  }
}

.process__img {
  top: 0;
}

.process__img:first-of-type {
  left: 46.023vh;
}

.process__img:last-of-type {
  left: 93.75vh;
}

.results__item {
  grid-template-columns: auto 69.659vh;
  gap: 4.545vh 7.273vh;
}

.result-reviews {
  width: 153.977vh;
  height: 100vh;
  background: rgba(19, 137, 255, .1);
  position: relative;
  margin-left: 30.682vh;
}

.result-reviews__img:nth-of-type(1) {
  position: absolute;
  top: 10vh;
  height: 76.25vh;
  left: 19.886vh;
}

.result-reviews__img:nth-of-type(2) {
  position: absolute;
  top: 16.364vh;
  height: 63.864vh;
  left: 56.25vh;
}

.result-reviews__rating {
  display: flex;
  align-items: center;
  gap: 6px;

  svg {
    height: 2.955vh;
  }
}

.result-reviews__item {
  padding: 3.977vh 3.977vh 6.591vh;
  background: #fafafa;
  display: grid;
  grid-template-columns: 5.455vh 1fr;
  grid-column-gap: 2.273vh;
  position: absolute;
  align-items: center;
}

.result-reviews__photo {
  width: 100%;
  grid-row: 1/span 2;
}

.result-reviews__item-text {
  grid-column: 1/span 2;
  font: 400 2.045vh/2.557vh var(--font);
  width: 36.023vh;
  margin-top: 20px;
}

.result-reviews__item-name {
  color: rgba(0, 0, 0, .5);
  margin-top: 6px;
  font: 400 1.818vh/1 var(--font);
}

.result-reviews__item:nth-of-type(1) {
  left: -30.682vh;
  top: 30.682vh;
}

.result-reviews__item:nth-of-type(2) {
  top: 15.341vh;
  left: 92.614vh;
}

.result-reviews__item:nth-of-type(3) {
  top: 52.5vh;
  left: 92.614vh;

  .result-reviews__item-text {
    width: 43.523vh;
  }
}

.tech-stack-img img {
  width: 230.999vh;
  height: 100vh;
  object-fit: cover;
}

.integration-img {
  align-self: center;

  img {
    width: 101.238vh;
  }
}

.delivered-features {
  background: var(--white);
  padding: 0;
  color: var(--black);
  flex-direction: row;
  align-items: center;
  gap: 7.386vh;
}

.delivered-features__item {
  &::before {
    background: var(--black);
  }
}

.delivered-features__list {
  flex-wrap: wrap;
  padding-left: 0;
  height: 36.909vh;
  min-width: 132.954vh;
  margin-top: 4.727vh;
}

.delivered-features__item {
  width: 66.477vh;
  margin-left: 10.227vh;
  font: 400 2.727vh/3.682vh var(--font);
}

.delivered-features__img, .delivered-features__img > img {
  height: 100%;
  width: auto;
}

.solution-problem__img-1 {
  height: 78.636vh;
  position: absolute;
  top: 0;
  left: 63.529vh;
}

.solution-problem__img-2 {
  height: 35.227vh;
  bottom: 0;
  left: 0;
  position: absolute;

  img {
    width: auto;
    height: 100%;
  }
}

.solution {
  .solution-problem__img-3 {
    margin: 0 0 0 37.955vh;

    img {
      height: 100%;
    }
  }
}

.solution-problem__img-4 {
  height: 47.647vh;
  position: absolute;
  left: 15.882vh;
  bottom: 4.824vh;
}

.solution-problem__img-5 {
  height: 53.882vh;
  margin: 15.882vh 0 auto 14.118vh;
}

.solution-problem__img-6 {
  height: 72.941vh;
  margin: 15.882vh 0 auto 14.118vh;
}

.solution-problem__img-7 {
  height: 56.824vh;
  margin: 31.765vh 0 auto 14.118vh;
}

.solution-problem__img-8 {
  height: 83.412vh;
  margin: auto 0 auto 14.118vh;
}

.solution-problem {
  display: flex;
  position: relative;
}

.solution {
  padding-right: 12.941vh;
}

.solution-content:nth-of-type(1) {
  width: 70.412vh;
  margin: 26.471vh 0 0 17.882vh;

  .solution-content__list {
    margin-top: 16px;
    padding-left: 3.529vh;

    li {
      list-style: auto;
      font: 400 2.727vh / 3.682vh var(--font);
    }
  }
}

.solution-content:nth-of-type(2) {
  margin: 30vh 0 0 31.647vh;

  .solution-content__list {
    display: grid;
    grid-template-columns: repeat(3, 31.765vh);
    align-items: flex-start;
    margin-top: 5.059vh;

    li {
      padding-right: 7.059vh;
      height: 27.176vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;

      &::before {
        content: '';
        width: calc(100% - 3.9vh);
        height: 1px;
        background: #E7E7E7;
        position: absolute;
        left: 4.21vh;
        bottom: 4.1vh;
      }

      &:last-child {
        &::before {
          content: none;
        }
      }
    }

    p {
      font: 600 2.824vh/3.812vh var(--font);
    }

    svg {
      height: 8.235vh;
      margin: auto 0 0;
    }
  }
}

.solution-content:nth-of-type(3) {
  width: 167.176vh;
  margin: 0 0 0 47.765vh;
  position: relative;
  padding-top: 18.235vh;

  .solution-content__title {
    font: 600 3.765vh/1 var(--font);
    margin-bottom: 4.118vh;
    width: max-content;
  }

  .solution-content__list {
    padding-left: 10.588vh;
    width: max-content;

    li {
      font: 400 2.824vh/1 var(--font);
      position: relative;
      padding-left: 7.647vh;

      &::before {
        content: "";
        width: 4.118vh;
        height: 1px;
        background: var(--black);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }

      + li {
        margin-top: 10px;
      }
    }
  }
}

.solution-problem__content {
  width: 94.118vh;
  margin-left: 15.882vh;
  padding: 14.118vh;

  svg {
    height: 8.235vh;
  }

  .solution-problem__title {
    margin-top: 5.294vh;
    font: 600 3.765vh/4.894vh var(--font);
  }

  .solution-problem__wrap {
    margin-top: 5.294vh;
    display: flex;
    align-items: flex-start;
    gap: 4.706vh;
  }

  .solution-problem__subtitle {
    font: 700 2.353vh/1 var(--font);
  }

  .solution-problem__text {
    font: 400 2.353vh/3.176vh var(--font);
  }
}

.solution-problem__content:nth-of-type(1) {
  width: 79.412vh;
  margin: 15.882vh 0 0 15.882vh;
  padding: 0;

  .solution-problem__title {
    font: 600 3.765vh/4.894vh var(--font);
  }
}

.solution-problem__content:nth-of-type(2) {
  margin-top: 15.882vh;
}

.solution-problem__content:nth-of-type(3) {
  margin-top: 24.588vh;
}

.solution-problem__content:nth-of-type(4) {
  margin-top: 15.882vh;
}

.solution-content > p {
  padding-left: 0;
}

.integrations__img {
  height: 70vh;
  margin: 15.882vh 0 0 23.294vh;
}

.communication-img {
  height: 92.045vh;
}

.challenge {
  padding-left: 15.882vh;
}

.challenge__text {
  padding-left: 16.235vh;
}

.challenge__img {
  height: 100vh;
}

.solution__title {
  text-transform: uppercase;
  font-size: 19.557vh;
}

@media (max-width: 1280px) {
  picture {
    img {
      height: auto;
    }
  }

  .process__img:first-of-type {
    height: auto;
    width: 26.302vw;
    margin: 0 8.594vw;
  }

  .process__img:last-of-type {
    width: 39.063vw;
    height: auto;
    margin: 0;
  }

  .process__item:last-of-type {
    grid-column: 1 / -1;
  }

  .results {
    padding: 13.021vw 8.594vw 28.906vw 10.156vw;
  }

  .results__item {
    grid-template-columns: auto 64.063vw;
  }

  .challenge {
    padding: 13.867vw 8.594vw 10.156vw 10.156vw;
  }

  .challenge__content {
    padding: 0;
  }

  .challenge__title {
    font: 700 3.125vw/4.063vw var(--font);
    margin-bottom: 20px;
  }

  .challenge__text {
    padding-left: 10.156vw;

    + .challenge__text {
      margin-top: 12px;
    }
  }

  .challenge__img {
    margin: 13.737vw 0 0 auto;
    width: 54.297vw;
    height: auto;
  }

  .solution {
    padding: 0;
  }

  .solution__title {
    font-size: 9.115vw;
  }

  .solution-content {
    padding: 0;
    margin: 0;
  }

  .solution-content:nth-of-type(1) {
    width: 100%;
    margin: 0;
    padding: 11.849vw 8.594vw 0 20.313vw;
  }

  .solution-content:nth-of-type(1) {
    & .solution-content__list {
      margin-bottom: 7.161vw;
      li {
        font: 400 2.604vw / 3.516vw var(--font);
      }
    }
  }

  .solution-content:nth-of-type(2) {
    margin: 0;
    padding: 16.797vw 8.594vw 6.12vw 10.156vw;

    & .solution-content__list {
      grid-template-columns: repeat(3, 27.214vw);
      margin-top: 13.021vw;

      li {
        padding-right: 2.604vw;
        height: 17.969vw;

        &::before {
          width: calc(100% - 2.8vw);
          left: 3vw;
          bottom: 2.6vw;
        }
      }

      p {
        font: 600 2.083vw/2.604vw var(--font);

        br {
          display: none;
        }
      }

      svg {
        height: 5.208vw;
        width: 5.208vw;
      }
    }
  }

  .solution-content:nth-of-type(3) {
    width: 100%;
    margin: 0;
    padding: 10.12vw 28.906vw 90.365vw 10.156vw;

    .solution-content__title {
      font-size: 3.125vw;
      margin-bottom: 5.859vw;
      width: 100%;
    }

    .solution-content__list {
      padding-left: 10.156vw;
      width: 100%;

      li {
        font-size: 2.604vw;
        padding-left: 9.766vw;

        + li {
          margin-top: 15px;
        }

        &::before {
          width: 4.557vw;
        }
      }
    }
  }

  .solution-problem__img-1 {
    height: auto;
    width: 60.938vw;
    top: auto;
    bottom: 33.073vw;
    left: 30.469vw;
  }

  .solution-problem__img-2 {
    height: auto;
    width: 62.109vw;
    bottom: 7.161vw;
    left: 10.156vw;

    img {
      width: 100%;
      height: auto;
    }
  }

  .solution {
    .solution-problem__img-3 {
      margin: 10.156vw 0 0;
      width: 100%;
      height: auto;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .solution-problem {
    flex-direction: column;
  }

  .solution-problem__content {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    grid-gap: 3.255vw 4.557vw;

    .solution-problem__title {
      margin-top: 0;
      font: 600 3.125vw/4.063vw var(--font);
    }

    svg {
      width: 6.25vw;
      height: 6.25vw;
    }

    .solution-problem__subtitle {
      font-size: 2.604vw;
    }

    &:nth-of-type(1) {
      width: 100%;
      margin: 0;
      padding: 16.276vw 17.594vw 16.276vw 10.156vw;
      display: block;

      .solution-problem__title {
        font: 600 3.125vw/4.063vw var(--font);
      }
    }

    &:nth-of-type(2) {
      margin: 0;
      padding: 0 7.943vw 0 20.313vw;
    }

    &:nth-of-type(3) {
      margin: 0;
      padding: 16.927vw 18.099vw 0 10.156vw;
    }

    &:nth-of-type(4) {
      background: #00AB55;
    }

    .solution-problem__text {
      font: 400 2.083vw/2.604vw var(--font);
      max-width: 45.313vw;
    }

    .solution-problem__wrap {
      margin-top: 0;
      gap: 5.208vw;
    }
  }

  .solution-problem__img-4 {
    height: auto;
    width: 49.219vw;
    top: 20.313vw;
    right: 0;
    left: auto;
  }

  .solution-problem__img-8 {
    height: auto;
    width: 40.495vw;
    margin: 0 8.594vw auto auto;
  }

  .solution-problem__img-6 {
    height: auto;
    width: 25.391vw;
    margin: 0;
  }

  .solution-problem__wrap {
    grid-column: 1/ span 2;
  }

  .solution-problem__img-5 {
    height: auto;
    width: 57.813vw;
    margin: 17.578vw auto 0 10.156vw;
  }

  .solution-problem__img-wrap {
    position: relative;
    padding: 10.156vw 8.594vw 0 10.156vw;

    + .solution-problem__content {
      padding: 10.807vw 7.943vw 0 20.313vw;
    }
  }

  .solution-problem__img-7 {
    height: auto;
    width: 81.25vw;
    margin: 17.578vw 0 0 10.156vw;

    + .solution-problem__content {
      padding: 16.927vw 18.099vw 3.255vw 10.156vw;
    }
  }

  .delivered-features__img, .delivered-features__img > img {
    height: auto;
    width: 100%;
  }

  .delivered-features {
    flex-direction: column;
    padding: 45.573vw 0 0 0;
  }

  .delivered-features__title-vertical {
    position: absolute;
    top: 10.156vw;
    left: 0;
    text-transform: uppercase;
  }

  .delivered-features__content {
    padding: 0 8.594vw 0 20.443vw;
  }

  .delivered-features__item {
    width: calc(100% - 10.156vw);
    padding-left: 8.464vw;
    margin-left: 10.156vw;
    font: 400 2.604vw/3.516vw var(--font);
  }

  .delivered-features__list {
    flex-wrap: nowrap;
    height: auto;
    min-width: unset;
    margin-top: 4.557vw;
  }

  .tech-stack-img {
    margin: 3.255vw auto 0;

    img {
      width: 88.411vw;
      height: auto;
    }
  }

  .integration-img.technology-stack__img {
    margin: 10.156vw auto;

    img {
      width: 78.125vw;
    }
  }

  .communication-img {
    width: 60.938vw;
    height: 60.938vw;
    object-fit: cover;
    margin-left: 20.313vw;
  }

  .result-reviews {
    width: 100%;
    height: 162.5vw;
    margin: 16.146vw 0 0;
  }

  .result-reviews__item {
    padding: 4.557vw 4.557vw 7.552vw 4.557vw;  ;
    grid-template-columns: 6.25vw 1fr;
    grid-column-gap: 20px;

    &:nth-of-type(1) {
      top: -16.146vw;
      left: 45.573vw;
    }

    &:nth-of-type(2) {
      top: 40.625vw;
      left: 10.547vw;
    }

    &:nth-of-type(3) {
      top: 101.563vw;
      left: 41.016vw;

      .result-reviews__item-text {
        width: 41.276vw;
      }
    }
  }

  .result-reviews__item-text {
    font: 400 2.344vw/2.93vw var(--font);
    width: 41.276vw;
  }

  .result-reviews__item-name {
    font-size: 2.083vw;
  }

  .result-reviews__rating {
    svg {
      width: 3.385vw;
      height: 3.385vw;
    }
  }

  .result-reviews__img {
    &:nth-of-type(1) {
      top: 81.25vw;
      height: auto;
      width: 25.391vw;
      left: 10.286vw;
    }

    &:nth-of-type(2) {
      width: 25.391vw;
      height: auto;
      top: 30.469vw;
      left: 66.146vw;
    }
  }
}

@media (max-width: 600px) {
  .process {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .process__img:first-of-type {
    order: 2;
    width: 35.467vw;
    right: 122.727vh;
    margin: 0 0 0 6.933vw;
  }

  .process__img:last-of-type {
    width: 46.4vw;
    right: 31.25vh;
  }

  .results__item {
    grid-template-columns: 1fr;
    grid-gap: 8px;
  }

  .challenge {
    padding: 19.067vw 12px 21.867vw 15px;
  }

  .challenge__title {
    font: 700 5.333vw/6.933vw var(--font);
  }

  .challenge__text {
    padding-left: 8vw;
    font: 400 4.8vw/6vw var(--font);
  }

  .challenge__img {
    margin: 12.133vw 0 0 auto;
    height: 102.133vw;
    width: 100%;
    object-fit: cover;
  }

  .delivered-features {
    padding: 0;
    margin-top: 15.733vw;
    gap: 18.933vw;
  }

  .delivered-features__title-vertical {
    position: static;
    margin: 0 auto 0 9.333vw;
  }

  .delivered-features__content {
    padding: 0 12px 0 15px;
  }

  .delivered-features__item {
    width: 100%;
    padding-left: 10.667vw;
    margin-left: 0;
    font: 400 4.8vw/6vw var(--font);
  }

  .technology-stack__item:first-child {
    grid-row: span 2;
  }

  .tech-stack-img {
    margin: 0 auto 6.4vw;

    img {
      width: 85.333vw;
    }
  }

  .integration-img.technology-stack__img {
    margin: 15.467vw auto;

    img {
      width: 92.8vw;
    }
  }

  .communication-img {
    width: 92.8vw;
    height: 92.8vw;
    margin-left: 15px;
  }

  .result-reviews {
    height: 369.6vw;
    margin-top: 16vw;
  }


  .result-reviews__item {
    &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
      width: 77.333vw;
      left: 11.467vw;
    }

    &:nth-of-type(1) {
      top: -16vw;
    }

    &:nth-of-type(2) {
      top: 72vw;
    }

    &:nth-of-type(3) {
      top: 262.933vw;

      .result-reviews__item-text {
        width: 100%;
      }
    }
  }

  .result-reviews__img {
    &:nth-of-type(1) {
      width: 32.533vw;
      top: 165.333vw;
      left: 56.267vw;
    }

    &:nth-of-type(2) {
      width: 35.467vw;
      top: 165.333vw;
      left: 11.467vw;
    }
  }

  .result-reviews__item {
    padding: 9.333vw;
    grid-template-columns: 12.8vw 1fr;
  }

  .result-reviews__item-text {
    font: 400 4.267vw/ 5.333vw var(--font);
    width: 100%;
  }

  .result-reviews__item-name {
    font: 400 4.267vw/5.333vw var(--font);
  }

  .result-reviews__rating {
    svg {
      width: 6.933vw;
      height: 6.933vw;
    }
  }

  .solution__title {
    margin-left: 15px;
    font-size: 12.533vw;
  }

  .solution-content{
    &:nth-of-type(1) {
      padding: 19.733vw 12px 13.333vw 15px;

      & .solution-content__list {
        margin-bottom: 0;
        li, .solution-content > p  {
          font: 400 4.8vw/6vw var(--font);
        }
      }
    }

    &:nth-of-type(2) {
      padding: 15.467vw 12px 8.533vw 15px;

      & .solution-content__list {
        grid-template-columns: 1fr;
        margin-top: 21.6vw;

        li {
          padding: 6.133vw 0;
          height: auto;
          display: grid;
          grid-template-columns: max-content 1fr;
          grid-gap: 20px;
          align-items: center;

          &::before {
            width: 1px;
            height: 28.333vw;
            left: 5vw;
            top: 50%;
            bottom: auto;
          }
        }

        svg {
          height: 10.667vw;
          width: 10.667vw;
          grid-column: 1/2;
          grid-row: 1/2;
          margin: auto;
        }

        p {
          grid-column: 2/3;
          font: 700 5.333vw/7.24vw var(--font);
        }
      }
    }

    &:nth-of-type(3) {
      padding: 22.133vw 7.2vw 139.2vw 15.467vw;

      .solution-content__title {
        font-size: 5.333vw;
        margin-bottom: 30px;
      }

      .solution-content__list {
        padding-left: 0;

        li {
          font-size: 4.8vw;
          padding-left: 10.667vw;
        }

        &::before {
          width: 5.333vw;
        }
      }
    }
  }

  .solution-problem__img-1 {
    width: 80.667vw;
    bottom: 48.8vw;
    left: auto;
    right: -11.733vw;
  }

  .solution-problem__img-2 {
    width: 81.867vw;
    bottom: 11.467vw;
    left: 15px;
  }

  .solution-problem__content {
    grid-gap: 6.667vw 8vw;

    .solution-problem__title {
      font: 600 5.333vw/6.933vw var(--font);
    }

    svg {
      width: 11.733vw;
      height: 11.733vw;
    }

    .solution-problem__subtitle {
      font-size: 4.8vw;
    }

    .solution-problem__text {
      font: 400 4.8vw/6vw var(--font);
      max-width: 62.933vw;
      width: 100%;
    }

    &:nth-of-type(1) {
      padding: 15.467vw 7.2vw 11.733vw 15px;

      .solution-problem__title {
        font: 600 5.333vw/6.933vw var(--font);
      }
    }

    &:nth-of-type(2) {
      padding: 10.667vw 7.2vw 10.667vw 15px;
    }

    &:nth-of-type(3) {
      padding: 20.8vw 7.2vw 4.533vw 15px;
    }
  }

  .solution-problem__img-5 {
    width: 73.6vw;
    margin: 15px auto 0 15px;
  }

  .solution-problem__img-6 {
    width: 40vw;
  }

  .solution-problem__img-wrap {
    padding: 12.533vw 12px 0 15.467vw;
  }

  .solution-problem__img-4 {
    position: static;
    width: 65.6vw;
    margin: 13.067vw 0 0 auto;
    display: block;
  }

  .solution-problem__img-wrap {
    + .solution-problem__content {
      padding: 10.667vw 7.2vw 10.667vw 15px;
    }
  }

  .solution-problem__img-7 {
    width: calc(100% - 28px);
    margin: 8vw 0 0 15px;
  }

  .solution-problem__img-7 {
    + .solution-problem__content {
      padding: 29.067vw 7.2vw 10.667vw 15px;
    }
  }

  .solution-problem__img-8 {
    width: 65.6vw;
    margin: 25px auto 0;
  }

  .solution-problem {
    padding-bottom: 15.733vw;
  }
}