staff_augmentation_services.scss

.staff_augmentation_services {

  .list-with-images.horizontal {
    .list-with-images__item {
      &-icon img { border-radius: 20px; }
    }
  }

  .web_dev_services__full_stack-list {
    padding-left: 6vw;
    margin-top: 2.5vh;
    margin-bottom: 4vh;

    &-item {
      color: $black;
      font-size: 14px;

      &::after {
        width: 2em;
        height: 2.5em;
      }
    }
  }

  &__main {
    background-image: linear-gradient($sky-ua, transparent);

    .list-with-images.horizontal {

      .list-with-images__item {
        max-width: 23%;

        &-icon img {
          max-width: 100px;
          width: 100%;
          border-radius: 50%;
          box-shadow: none;
        }
      }
    }
  }

  &__extension {
    background: radial-gradient(circle, $buzok -25%, transparent 45%);
  }

  &__advantages {
    background-image: linear-gradient($palianytsia, transparent);
    box-shadow: 0px 4px 25px 0px rgba($purple-heart, 0.25);

    .list-with-images.horizontal {

      .list-with-images__item {
        max-width: 23%;
        &-icon img { box-shadow: none; }
      }
    }
  }

  &__dedicated_model {
    background-image: linear-gradient(30deg, #C685D7 0%, $white 82%);
    box-shadow: inset 0px 12px 15px -7px rgba($purple-heart, 0.25), 0 4px 4px 0 rgba(0, 0, 0, .25);

    &_description {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &_icon {
        max-width: 20%;

        img {
          width: -webkit-fill-available;
          mix-blend-mode: luminosity;
        }
      }
    }

    .list-with-images__item-icon img { mix-blend-mode: luminosity; }
  }

  &__benefits {
    position: relative;
    background-color: rgba($azovstal, .2);
    box-shadow: 0 4px 25px 0 rgba($purple-heart, .25);

    .absolute-img {
      position: absolute;
      max-width: 30%;
      right: 0;
      top: 0;
      mix-blend-mode: luminosity;
      filter: blur(3px);
      -webkit-filter: blur(3px);
    }

    .web_dev_services__full_stack-list {
      padding-left: 8vw;

      &-item {
        font-size: 18px;

        &::after {
          width: 4em;
          height: 4em;
          left: -8vw;
          background: center/cover no-repeat url('/assets/images/team_extension/key.webp');
        }
      }
    }
  }

  &__process {
    .timeline {
      margin-top: 4vh;

      &-item::before { border-color: $sky-ua; }
    }
  }

  &__transparency {
    background-image: linear-gradient(165deg, $purple-heart, $sky-ua);
    box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, .25);
  }

  &__services {
    background-image: linear-gradient($white, $sky-ua);
    box-shadow: 0 4px 25px 0 rgba($purple-heart, .25);

    .button {
      margin-top: 8vh;
      background-color: $white;
    }
  }

  .development__cards .cards-container {
    justify-content: space-around;

    .card {
      max-width: 300px;
      margin-right: 5px;
      margin-left: 5px;

      &__description { margin-bottom: 0; }
    }
  }
}

@media screen and (max-width: 700px) {
  .staff_augmentation_services {

    .web_dev_services__full_stack-list {
      padding-left: 0;
      font-size: .8em;

      &-item::after {
        left: 50%;
        transform: translate(-50%);
      }
    }

    .list-with-images.horizontal .list-with-images__item { margin-bottom: 3vh; }
    .timeline-item__icon:nth-child(even)::before,
    .timeline-item__icon:nth-child(odd)::before { background-color: $sky-ua; }

    &__main,
    &__advantages {
      .list-with-images.horizontal {
        .list-with-images__item {
          max-width: 45%;
          .description { font-size: .8em; }
        }
      }
    }

    &__dedicated_model {
      &_description {
        flex-wrap: wrap;

        &_icon {
          max-width: 120px;
          width: 100%;
          margin: auto;
        }
      }
    }

    &__benefits {
      .web_dev_services__full_stack-list-item { font-size: .8em; }
      .absolute-img { display: none; }
    }
  }
}