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

:root {
  --general-color: #40CB3D;
}

.process__img, .challenge__img, .solution__img {
  object-fit: cover;
}

.process__img:nth-of-type(1) {
  width: 92.045vh;
  height: 30.682vh;
  right: calc(100% - 92.045vh);
}

.process__img:nth-of-type(2) {
  width: 31.668vh;
  height: 6.902vh;
  right: 85.01vh;
  top: 27.393vh
}

.challenge__text, .solution__text {
  width: 76.705vh;
}

.challenge__content {
  padding-top: 30.795vh;
}

.challenge__img-wrapper {
  margin-left: 15.341vh;
  display: flex;
}

.challenge__img:nth-of-type(1) {
  width: 92.045vh;
  height: 61.364vh;
}

.challenge__img:nth-of-type(2) {
  width: 51.591vh;
  height: auto;
  margin-top: 46.023vh;
  margin-left: -30.568vh;
}

.solution {
  padding: 0 0 0 30.682vh;
}

.solution__content {
  display: flex;
  flex-direction: column;
  margin-left: 15.341vh;
}

.solution__content:nth-of-type(1) {
  padding-top: 21.136vh;

  .solution__img {
    width: 101.818vh;
    height: auto;
    margin-top: auto;
  }
}

.solution__content:nth-of-type(2) {
  padding-bottom: 18.068vh;

  .solution__img {
    width: 92.045vh;
    height: auto;
  }

  .solution__text {
    width: 92.045vh;
    margin-top: auto;
  }
}

.solution__content:nth-of-type(3) {
  .solution__img {
    width: 92.045vh;
    height: 65.909vh;
    margin-top: auto;
  }
}

.solution__content:nth-of-type(4) {
  padding: 15.341vh 0 4.432vh;

  .solution__img:nth-of-type(1) {
    width: 61.364vh;
    height: 48.068vh;
    margin-top: auto;
  }

  .solution__img:nth-of-type(2) {
    width: 59.091vh;
    height: 43.864vh;
    margin-top: -35.682vh;
    margin-left: 33.068vh;
  }
}

.features {
  position: relative;

  .vertical-title {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-180deg);
  }
}

.delivered-features {
  background-color: transparent;
  color: var(--black);
}

.delivered-features__item {
  width: 62.5vh;
}

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

.features__img-wrapper {
  display: flex;
  align-items: flex-end;
  padding: 8.295vh 12.727vh 7.727vh;
  background-color: var(--general-color);

  .features__img {
    height: auto;
  }
}

.features__img:nth-of-type(1) {
  width: 30.682vh;
  margin-bottom: 8.409vh;
  z-index: 2;
}

.features__img:nth-of-type(2) {
  width: 95.682vh;
  margin-left: -11.25vh;
  margin-bottom: 0.682vh;
}

.features__img:nth-of-type(3) {
  width: 19.659vh;
  margin-left: 12.5vh;
  z-index: 2;
}

.features__img:nth-of-type(4) {
  width: 112.045vh;
  margin-left: -10.568vh;
  margin-bottom: 8.295vh;
}

.features__img:nth-of-type(5) {
  width: 20vh;
  margin-left: -10vh;
  margin-bottom: 0.227vh;
}

.integration-img {
  margin: auto 0 auto 15.341vh;

  img {
    width: 111.932vh;
    height: auto;
  }
}

.communication-img img {
  width: 61.364vh;
  height: auto;
}

.result-img {
  display: flex;
  align-items: flex-end;
  padding: 13.977vh 22.727vh 10.341vh 12.045vh;
  background-color: var(--general-color);

  img {
    height: auto;
  }

  img:nth-of-type(1) {
    width: 22.159vh;
    z-index: 2;
  }

  img:nth-of-type(2) {
    width: 87.955vh;
    margin-bottom: 3.636vh;
    margin-left: -6.818vh;
  }
}

@media (max-width: 1280px) {
  .process__img:nth-of-type(1) {
    width: 71.094vw;
    height: auto;
    margin-left: -10.156vw;
  }

  .process__img:nth-of-type(2) {
    width: 24.7vw;
    height: auto;
    margin-left: -5.438vw;
    margin-top: 21.419vw;
  }

  .challenge {
    padding: 14.432vw 8.594vw 13.932vw 10.156vw;
  }

  .challenge__text, .solution__text {
    width: auto;
  }

  .challenge__content {
    padding: 0;
  }

  .challenge__img-wrapper {
    margin-left: 0;
    margin-top: 16.667vw;
  }

  .challenge__img:nth-of-type(1) {
    width: 61.068vw;
    height: 40.775vw;
    margin: 0;
  }

  .challenge__img:nth-of-type(2) {
    width: 34.375vw;
    height: 20.313vw;
    margin-left: -20.443vw;
    margin-top: 30.469vw;
  }

  .solution {
    padding: 10.156vw 8.954vw 7.813vw 10.156vw;
  }

  .solution__content:nth-of-type(1), .solution__content:nth-of-type(2) {
    padding-top: 0;
    margin-left: 10.156vw;
  }

  .solution__content:nth-of-type(1) {
    .solution__img {
      width: 100%;
      margin-top: 11.849vw;

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

  .solution__content:nth-of-type(2) {
    margin: 18.099vw 0 0 0;
    padding: 0;

    .solution__text {
      width: 60.938vw;
    }

    .solution__img {
      width: 100%;
      order: 2;

      img {
        width: 100%;
        height: auto;
        margin-top: 6.12vw;
      }
    }
  }

  .solution__content:nth-of-type(3) {
    margin: 10.156vw 0 0 0;

    .solution__img {
      width: 64.844vw;
      height: 40.625vw;
      margin-left: auto;
    }
  }

  .solution__content:nth-of-type(4) {
    margin: 10.156vw 0 0 0;
    padding: 0;

    .solution__text {
      width: 60.938vw;
    }

    .solution__img:nth-of-type(1) {
      width: 47.526vw;
      height: auto;
      margin-top: 6.38vw;
    }

    .solution__img:nth-of-type(2) {
      width: 44.401vw;
      height: auto;
      margin-top: -27.604vw;
      margin-left: 26.693vw;
    }
  }

  .features {
    .vertical-title {
      top: 7.682vw;
      transform: rotate(-180deg);
    }
  }

  .delivered-features {
    padding-left: 16.406vw;
  }

  .delivered-features__item {
    width: auto;
  }

  .features__img-wrapper {
    padding: 10.156vw 8.203vw 16.276vw 8.203vw;
    flex-wrap: wrap;
  }

  .features__img:nth-of-type(1) {
    width: 22.135vw;
    margin-bottom: 5.208vw;
    margin-left: 0.26vw;
  }

  .features__img:nth-of-type(2) {
    width: 69.792vw;
    margin-left: -8.724vw;
  }

  .features__img:nth-of-type(3) {
    width: 14.583vw;
    margin-left: 0;
  }

  .features__img:nth-of-type(4) {
    width: 75.911vw;
    margin: 10.286vw 0 8.724vw -10.807vw;
  }

  .features__img:nth-of-type(5) {
    width: 12.891vw;
    margin-left: -9.115vw;
  }

  .integration-img {
    width: 100%;
    margin: 10.156vw 0;

    img {
      width: 100%;
    }
  }

  .communication-img {
    display: flex;

    img {
      width: 50.781vw;
      margin: 0 8.594vw 0 auto;
    }
  }

  .result-img {
    padding: 9.896vw 8.073vw 6.771vw 7.943vw;

    img:nth-of-type(1) {
      width: 20.313vw;
    }

    img:nth-of-type(2) {
      width: 71.484vw;
      margin-bottom: 5.99vw;
      margin-left: -7.813vw;
    }
  }
}

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

  .process__img:nth-of-type(1) {
    width: 74.133vw;
    margin-left: 0;
  }

  .process__img:nth-of-type(2) {
    width: 25.384vw;
    margin-left: 60.848vw;
    margin-top: -2.544vw;
  }

  .challenge {
    padding: 15.467vw 12px 15.467vw 15px;
  }

  .challenge__img-wrapper {
    margin-top: 15.467vw;

    .challenge__img:nth-of-type(1) {
      width: 72.267vw;
      height: 48vw;
    }

    .challenge__img:nth-of-type(2) {
      width: 40.8vw;
      height: 23.733vw;
      margin-left: -24.267vw;
      margin-top: 36.267vw;
    }
  }

  .solution {
    padding: 0 12px 21.33vw 15px;
  }

  .solution__content:nth-of-type(1) {
    margin-top: 18.933vw;
    margin-left: 0;

    .solution__img {
      margin-top: 14.933vw;
    }
  }

  .solution__content:nth-of-type(2) {
    margin-top: 21.333vw;

    .solution__text {
      width: auto;
    }

    .solution__img {
      margin-top: 14.4vw;
    }
  }

  .solution__content:nth-of-type(3) {
    margin-top: 16.267vw;

    .solution__img {
      width: 77.333vw;
      margin: 0 4vw 0 auto;
    }
  }

  .solution__content:nth-of-type(4) {
    margin-top: 28.8vw;

    .solution__text {
      width: auto;
    }

    .solution__img:nth-of-type(1) {
      width: 61.867vw;
      margin-top: 14.4vw;
    }

    .solution__img:nth-of-type(2) {
      width: 58.133vw;
      margin-top: -36vw;
      margin-left: 34.667vw;
    }
  }

  .features {
    padding: 0;

    .vertical-title {
      transform: none;
      position: static;
      margin: 0 0 0 15px;
    }
  }

  .delivered-features {
    padding-left: 15px;
  }

  .features__img-wrapper {
    padding: 15.2vw 12px 15.2vw 15px;
  }

  .features__img:nth-of-type(1) {
    width: 24.533vw;
  }

  .features__img:nth-of-type(2) {
    width: 77.333vw;
    margin-left: -9.333vw;
  }

  .features__img:nth-of-type(3) {
    width: 16vw;
  }

  .features__img:nth-of-type(4) {
    width: 84.267vw;
    margin: 13.067vw 0 9.6vw -11.733vw;
  }

  .features__img:nth-of-type(5) {
    width: 14.4vw;
    margin-left: -10.138vw;
  }

  .integration-img {
    margin: 0;
  }

  .communication-img {
    width: 61.867vw;
    margin-bottom: 15.467vw;
  }

  .result-img {
    padding: 15.467vw 12px 15.467vw 15px;

    img:nth-of-type(1) {
      width: 22.667vw;
    }

    img:nth-of-type(2) {
      width: 79.467vw;
      margin-bottom: 6.667vw;
      margin-left: -9.333vw;
    }
  }
}