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

:root {
  --general-color: #325EEA;
  --cursor-color: #6087EC;
}

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

.case-cover picture {
  height: 100vh;

  img {
    height: 100%;
  }
}

.process__img {
  &:nth-of-type(1) {
    left: 47.39vh;
    height: 30.68vh;
  }

  &:nth-of-type(2) {
    left: 74.89vh;
    height: 42.05vh;
  }
}

.features__content {
  .features__content-title {
    font: 700 3.64vh/1.2 var(--font);

    & + .features__content-text {
      margin-top: 24px;
    }
  }

  .features__content-text {
    font: 400 2.73vh/1.35 var(--font);
    width: 76.7vh;

    &:not(:first-child) {
      margin-top: 20px;
    }
  }

  &:nth-of-type(1) {
    width: 107.39vh;
    margin: 17.05vh 0 0 15.34vh;

    .features__content-text:not(:first-child) {
      margin-top: 20px;
    }

    .features__content-text:last-child {
      margin: 14.77vh 0 0 30.68vh;
    }
  }

  &:nth-of-type(2) {
    width: 107.39vh;
    margin: 17.05vh 0 0 30.68vh;

    .features__content-text:last-child {
      margin: 14.77vh 0 0 30.68vh;
    }
  }

  &:nth-of-type(3) {
    width: 76.7vh;
    margin: 32.73vh 0 0 15.91vh;
  }

  &:nth-of-type(4) {
    width: 76.7vh;
    margin: auto 0 22.73vh 15.34vh;
  }
}

.features__img-1 {
  height: 56.82vh;
  margin: auto 0 auto 15.34vh;
}

.features__img-2 {
  height: 59.89vh;
  margin-left: 14.89vh;
}

.delivered-features__list {
  width: 167vh;
  height: 36.14vh;
  flex-wrap: wrap;
  gap: 10px 10.23vh;
}

.delivered-features__item {
  width: 72.73vh;
}

.technology-stack__img {
  height: 66.82vh;

  > img {
    height: 100%;
  }

  &.integration-scheme {
    height: 51.93vh;
    margin: auto 0 auto 15.34vh;

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

.case-img {
  width: auto;
  margin-left: 15.34vh;

  picture, img {
    height: 100vh;
  }
}

.result {
  background: var(--general-color);
  color: var(--white);
}

.result__text {
  width: 73.86vh;

  & + .result__text {
    margin-top: 20px;
  }
}

.contact-form__title {
  padding-bottom: 0;
}

.contact-form__desc {
  margin-top: 24px;
  width: 61.36vh;
  font: 400 2.27vh/1.4 var(--font);
}

.contact-form__photo {
  border-radius: 5.45vh;
}

.contact-form__photo-wrap {
  width: 38.75vh;
  height: 38.86vh;
  margin: 5vh 0 0 14.09vh;
}

.form-content {
  margin-left: 15.34vh;
}

.features {
  margin-left: 0;
  padding-left: 12.16vh;
}


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

  .case-cover picture {
    height: auto;
    width: 100%;
  }

  .process {
    justify-content: flex-end;
  }

  .process__img {
    &:nth-of-type(1) {
      width: 17.71vw;
      height: auto;
      margin-right: 8px;
    }

    &:nth-of-type(2) {
      width: 45.7vw;
      height: auto;
      margin-right: 30px;
    }
  }

  .features {
    padding-left: 0;
  }

  .features__title {
    position: absolute;
    top: 10.16vw;
    left: 1.04vw;
  }

  .features__content {
    .features__content-title {
      font-size: 3.13vw;
    }

    .features__content-text {
      font-size: 2.6vw;
      width: 100%;
    }

    &:nth-of-type(1) {
      width: 100%;
      margin: 0;
      padding: 10.68vw 4.43vw 0 20.31vw;

      .features__content-text:last-child {
        padding: 7.55vw 0 0 4.17vw;
        margin: 0;
      }
    }

    &:nth-of-type(2) {
      width: 100%;
      margin: 0;
      padding: 10.16vw 17.88vw 0 10.16vw;

      .features__content-text:last-child {
        margin: 0 0 0 10.16vw;
        padding: 7.55vw 0 0 0;
      }
    }

    &:nth-of-type(3) {
      width: 100%;
      margin: 0;
      padding: 7.55vw 18.88vw 0 10.16vw;
    }

    &:nth-of-type(4) {
      width: 100%;
      margin: 0;
      padding: 7.55vw 14.71vw 10.16vw 14.19vw;
    }
  }

  .features__img-1, .features__img-2 {
    height: auto;
  }

  .features__img-1 {
    width: 79.95vw;
    margin: 10.16vw auto 0 3.52vw;
  }

  .features__img-2 {
    margin: 7.55vw 8.72vw 0 auto;
    width: 29.3vw;
  }

  .technology-stack {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  .technology-stack__img {
    width: 59.64vw;
    height: auto;

    &.integration-scheme {
      height: auto;
      margin: 10.16vw auto 0;
      width: 72.27vw;

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

  .case-img {
    height: auto;
    margin: 0;

    picture, img {
      width: 60.29vw;
      height: auto;
      margin: 10.16vw 0 0 auto;
    }
  }

  .form-content {
    margin-left: 0;
  }

  .contact-form {
    padding: 10.156vw 24px 7.943vw;
  }

  .delivered-features__list {
    height: auto;
    flex-wrap: nowrap;
    gap: 8px 0;
    padding: 0;
    width: 100%;
  }

  .delivered-features__item {
    width: 100%;
  }

  .result__text {
    width: 100%;
  }

}

@media (max-width: 600px) {
  .stack {
    height: auto;
    margin-top: 15.47vw;
  }

  .preview__title {
    padding-right: 10px;
  }

  .process {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .process__img {
    &:nth-of-type(1) {
      width: 21.07vw;
    }

    &:nth-of-type(2) {
      width: 51.73vw;
      margin-right: 0;
    }
  }

  .features {
    padding: 15.47vw 12px 15.47vw 15px;
  }

  .features__title {
    position: static;
    margin: 0;
  }

  .features__content {
    .features__content-title {
      font-size: 6.4vw;
    }

    .features__content-text {
      font-size: 4.8vw;
    }

    &:nth-of-type(1) {
      padding: 0;
      width: 100%;

      .features__content-text:last-child {
        padding: 14.13vw 0 0;
      }
    }

    &:nth-of-type(2) {
      .features__content-text:last-child {
        margin: 0;
        padding: 14.13vw 0 0 0;
      }
    }

    &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4) {
      padding: 14.13vw 0 0;
    }
  }

  .features__img-1 {
    margin: 14.13vw 0 0;
    width: 85.87vw;
  }

  .features__img-2 {
    margin: 14.13vw 0 0 auto;
    width: 41.07vw;
  }

  .delivered-features__list {
    height: auto;
    flex-wrap: nowrap;
    gap: 12px 0;
  }

  .delivered-features__item {
    width: 100%;
  }

  .technology-stack__img {
    width: 69.07vw;

    &.integration-scheme {
      margin: 0;
      width: 100%;
    }
  }

  .case-img {
    picture, img {
      width: 69.07vw;
      margin: 0 0 0 auto;
    }
  }

  .result__text {
    width: 100%;
  }

  .contact-form__desc {
    margin-top: 24px;
    width: 100%;
    font-size: 4.8vw;
  }
}