/* common styles and components */
/* cards */
.card-glass {
  background-color: #FAFAFA;
  border: 1px solid #EEEEEE;
  box-shadow: 2px 4px 6px 0px #33363C14 inset;
  color: var(--black);
}

.card-dark-grey {
  background-color: #333333;
  color: var(--white);

  svg {
    stroke: var(--white);
  }
}

/* preview form */
.preview-form {
  padding: 3.75vw;
  border-radius: var(--card-radius-32);

  .form-content__input, .form-content__textarea {
    padding-left: 8.333vw;
    background: transparent;
  }
}

.preview-form__subtitle, .preview-form__submit {
  width: 100%;
  margin-top: 1.25vw;
}

.preview-form__form {
  margin-top: 1.875vw;
}

@media (max-width: 1280px) {
  .preview-form {
    padding: 6.25vw;

    .form-content__input {
      padding: 4.297vw 1.953vw 0;
    }

    .form-content__textarea {
      padding: 4.688vw 1.953vw 0;
    }

    .form-content__label {
      height: 8.854vw;
    }

    .form-content__label_textarea {
      height: 9.505vw;
    }

    .form-content__label-name {
      top: 1.563vw;
      left: 1.953vw;
    }

    .form-content__label-name--textarea {
      top: 1.953vw;
    }
  }

  .preview-form__subtitle {
    margin-top: 2.083vw;
  }

  .preview-form__form {
    margin-top: 3.125vw;
  }

  .preview-form__submit {
    margin-top: 4.688vw;
  }
}

@media (max-width: 767px) {
  .preview-form {
    padding: 8vw;

    .form-content__input {
      padding: 8.8vw 4vw 0;
    }

    .form-content__textarea {
      padding: 9.6vw 4vw 0;
    }

    .form-content__label {
      height: 18.133vw;
    }

    .form-content__label_textarea {
      height: 25.333vw;
    }

    .form-content__label-name {
      top: 3.2vw;
      left: 4vw;
    }

    .form-content__label-name--textarea {
      top: 4vw;
    }
  }

  .preview-form__subtitle {
    margin-top: 4.267vw;
  }

  .preview-form__form, .preview-form__submit {
    margin-top: 6.4vw;
  }
}

/* companies card */
.companies-card {
  width: 27.448vw;
  padding: 1.875vw;
  color: #777777;
  border-radius: var(--card-radius-24);
}

.companies-card__logos {
  width: 100%;
  margin-top: .417vw;
}

@media (max-width: 1280px) {
  .companies-card {
    width: 46.484vw;
    padding: 3.125vw;
  }

  .companies-card__logos {
    margin-top: 1.042vw;
  }
}

@media (max-width: 767px) {
  .companies-card {
    width: 82.4vw;
    padding: 4.267vw;
  }

  .companies-card__logos {
    margin-top: 2.133vw;
  }
}

.card-light-grey {
  background-color: #F6F6F6;
  color: var(--black);
}

/* sections */
/* about card grid */
.about__content {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5vw;
}

.about__cards-container, .services__cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.563vw 1.563vw;
}

.about__card {
  position: relative;
  width: 23.177vw;
  padding: 2.5vw 1.25vw;
  border-radius: var(--card-radius-24);
}

.about__card-desc {
  margin-top: .625vw;
}

.about__card-rating {
  width: 9.792vw;
  height: auto;
  position: absolute;
  left: 8.594vw;
  top: -.938vw;
}

.about__contact-link {
  flex-shrink: 0;
  width: 19.688vw;
  background: url("../assets/img/home/about-link-bg.webp") no-repeat center / cover;
  background-color: var(--black);
  border-radius: var(--card-radius-32);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25vw;
  text-align: center;
  padding: 0 3.906vw;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1280px) {
  .about__content {
    flex-direction: column;
    gap: 2.604vw;
    margin-top: 6.25vw;
  }

  .about__cards-container, .services__cards-container {
    gap: 2.604vw 2.604vw;
  }

  .about__card {
    width: 100%;
    padding: 4.688vw 3.125vw;
  }

  .about__card-desc {
    margin-top: 1.563vw;
  }

  .about__card-rating {
    width: 13.542vw;
    left: 13.021vw;
    top: -1.302vw;
  }

  .about__contact-link {
    width: 100%;
    flex-direction: row;
    background-image: url("../assets/img/home/about-link-bg-tablet.webp");
    gap: 3.125vw;
    padding: 6.25vw 0;
  }
}

@media (max-width: 767px) {
  .about__content {
    gap: 4.267vw;
  }

  .about__cards-container {
    gap: 4.267vw 4.267vw;
    grid-template-columns: repeat(2, 1fr);
  }

  .about__card {
    padding: 6.4vw 4.267vw;
  }

  .about__card-desc {
    margin-top: 2.133vw;
  }

  .about__card-rating {
    width: 22.4vw;
    left: 16.533vw;
    top: -2.667vw;
  }

  .about__contact-link {
    background-image: url("../assets/img/home/about-link-bg-mob.webp");
    gap: 6.4vw;
    padding: 6.4vw 0;
  }
}

/* technologies */
.technologies {
  padding-left: 15.156vw;

  a {
    font: inherit;
    color: inherit;
  }
}

.technologies__title {
  width: 33.907vw;
}

.technologies__content {
  display: flex;
  align-items: flex-start;
  gap: 1.563vw;
}

.technologies__card {
  flex-grow: 1;
  padding: 2.5vw;
  border-radius: var(--card-radius-32);
}

.technologies__list {
  margin-top: 1.563vw;
}

.technologies__list-item + .technologies__list-item {
  margin-top: .625vw;
}

@media (max-width: 1280px) {
  .technologies {
    padding-left: 24px;
  }

  .technologies__content {
    gap: 2.083vw;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 63.021vw;
  }

  .technologies__list {
    margin-top: 2.083vw;
  }

  .technologies__card {
    padding: 3.125vw;
    width: 29.818vw;
    flex-grow: 0;
  }

  .technologies__list-item + .technologies__list-item {
    margin-top: 1.042vw;
  }
}

@media (max-width: 767px) {
  .technologies {
    padding-left: 16px;
  }

  .technologies__content {
    gap: 4.267vw;
    max-height: 177.067vw;
  }

  .technologies__list {
    margin-top: 2.133vw;
  }

  .technologies__card {
    padding: 4.267vw;
    width: 47.668%;
  }

  .technologies__list-item + .technologies__list-item {
    margin-top: 2.133vw;
  }
}

/* achievements */
.achievements {
  padding: 5.365vw 8.333vw;
  display: flex;
  justify-content: center;
  gap: 2.031vw;
}

.achievements__badge {
  flex-grow: 1;
  z-index: 2;

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

@media (max-width: 1280px) {
  .achievements {
    padding: 7.552vw 24px;
    gap: 1.913vw;
    border-radius: var(--section-radius);
    background-color: var(--black);
  }
}

@media (max-width: 767px) {
  .achievements {
    padding: 12.8vw 16px;
    gap: unset;
    row-gap: 4.267vw;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .achievements__badge {
    width: 28.701vw;
    flex-grow: 0;
  }
}

/* CTA banner */
.contact-banner {
  padding: 7.969vw 11.198vw 7.969vw 15.156vw;
  position: relative;
  color: var(--white);

  &:hover .contact-banner__btn {
    animation: swing .6s ease-in-out infinite;
  }
}

@keyframes swing {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.contact-banner__content {
  max-width: 30.313vw;
  position: relative;
  z-index: 2;
}

.contact-banner__btn {
  margin-top: 3.333vw;

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: scale(1.138) rotate(-7.19deg);
    background: #3D43FF;
    filter: blur(3.583vw);
  }

  &:hover .contact-banner__btn-bg {
    background-color: var(--green);
  }
}

.contact-banner__btn-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--white);
  border-radius: 64px;
  transition: background-color var(--normal);
}

.contact-banner__img {
  height: 100%;
  width: auto;
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (max-width: 1280px) {
  .contact-banner {
    padding: 12.63vw 24px;
    overflow: hidden;
  }

  .contact-banner__content {
    max-width: 43.099vw;
  }

  .contact-banner__btn {
    margin-top: 3.125vw;
  }
}

@media (max-width: 767px) {
  .contact-banner {
    padding: 77.333vw 16px 12.8vw;
  }

  .contact-banner__content {
    max-width: unset;
  }

  .contact-banner__btn {
    width: 100%;
    margin-top: 6.4vw;
  }

  .contact-banner__img {
    width: 100%;
    height: auto;
    top: 0
  }
}

/* case studies folders */
.case-studies-list {
  margin-top: 14.74vw;
  margin-left: 10.365vw;
  counter-reset: list;
  position: relative;
  transition: var(--normal);

  @media (min-width: 768px) {
    &[data-active-case="2"] {
      .case-studies-list__item {
        &:nth-child(1) {
          transform: translateY(-7vw);
          z-index: 1;
        }

        &:nth-child(2) {
          transform: translateY(0);
          z-index: 4;
        }

        &:nth-child(3) {
          transform: translateY(-2.34vw);
          z-index: 3;
        }

        &:nth-child(4) {
          transform: translateY(-5vw);
          z-index: 2;
        }
      }
    }

    &[data-active-case="3"] {
      .case-studies-list__item {
        &:nth-child(1) {
          transform: translateY(-6.2vw);
          z-index: 2;
        }

        &:nth-child(2) {
          transform: translateY(-8.39vw);
          z-index: 1;
        }

        &:nth-child(3) {
          transform: translateY(0);
          z-index: 4;
        }

        &:nth-child(4) {
          transform: translateY(-2.24vw);
          z-index: 3;
        }
      }
    }

    &[data-active-case="4"] {
      .case-studies-list__item {
        &:nth-child(1) {
          transform: translateY(-2.66vw);
          z-index: 3;
        }

        &:nth-child(2) {
          transform: translateY(-5.94vw);
          z-index: 2;
        }

        &:nth-child(3) {
          transform: translateY(-7.81vw);
          z-index: 1;
        }

        &:nth-child(4) {
          transform: translateY(0);
          z-index: 4;
        }
      }
    }
  }

  @media (max-width: 1280px) {
    margin-left: 0;
  }
}

.case-studies-list__folder-top {
  min-width: 39.245vw;
  height: 3.594vw;
  padding: calc(2.083vw - 1px) 10.599vw 0 10.391vw;
  white-space: nowrap;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25vw;
  bottom: calc(100% - 1px);
  left: 2.81vw;
  cursor: pointer;
  order: 2;
  background: center bottom/100% 100% url("../assets/img/case-section-folders/folder-top.svg") no-repeat;

  &:hover {
    background-image: url("../assets/img/case-section-folders/folder-top-hover.svg");
  }

  > i {
    order: -2;
    font-style: normal;
  }

  &::after {
    content: "";
    flex-grow: 1;
    min-width: 1.25vw;
    height: 1px;
    order: -1;
    background: var(--black);
  }
}

.case-studies-list__item {
  border: 1px solid var(--black);
  border-radius: 2.396vw;
  position: absolute;
  top: 0;
  background: var(--white);
  transition: var(--normal);

  &:nth-child(1) {
    z-index: 4;
    position: relative;
  }

  &:nth-child(2) {
    transform: translateY(-1.59vw);
    z-index: 3;

    .case-studies-list__folder-top {
      left: 37.318vw;
    }
  }

  &:nth-child(3) {
    transform: translateY(-5.78vw);
    z-index: 2;

    .case-studies-list__folder-top {
      left: 5.625vw;
    }
  }

  &:nth-child(4) {
    transform: translateY(-7.5vw);
    z-index: 1;

    .case-studies-list__folder-top {
      left: 41.536vw;
    }
  }
}

.case-grid {
  padding: 4.531vw 3.281vw 8.281vw;
  display: grid;
  grid-template-columns: 1fr 38.229vw;
  grid-template-rows: 22.5vw auto;
  grid-gap: 2.306vw 9.531vw;
}

.case-grid__content {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: 2.083vw;
}

.case-grid__cover {
  width: 100%;
}

.case-grid__link {
  height: max-content;
  width: max-content;
  margin-top: auto;
  font-weight: 500;

  > svg {
    position: absolute;
    left: calc(100% + .94vw);
    top: 50%;
    transform: translateY(-50%);
    width: 1.67vw;
    height: 1.67vw;
  }
}

.case-grid__deliverables {
  position: relative;
}

.case-grid__deliverables-list {
  margin-top: .938vw;

  li {
    padding-left: 1.25vw;
    position: relative;

    &::before {
      content: "";
      width: .313vw;
      height: .313vw;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      background: var(--black);
      border-radius: 50%;
    }

    & + li {
      margin-top: .417vw;
    }
  }
}

.case-grid__deliverables-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 12.5vw;
  height: auto;
}

@media (max-width: 1280px) {
  .case-studies-list {
    margin-top: 23.438vw;
  }

  .case-studies-list__folder-top {
    min-width: 43.88vw;
    padding: calc(1.953vw - 1px) 9.766vw .521vw 9.115vw;
    height: 4.167vw;
    gap: 1.042vw;
    left: 10.417vw;
    background-image: url("../assets/img/case-section-folders/folder-top-tablet.svg");

    &::after {
      min-width: 2.083vw;
    }
  }

  .case-studies-list__folder-top, .case-studies-list__folder-top > i {
    font-size: max(1.563vw, 12px);
  }

  .case-studies-list__item {
    border-radius: 2.083vw;

    &:nth-child(2) {
      transform: translateY(-4.818vw);

      .case-studies-list__folder-top {
        left: 45.703vw;
      }
    }

    &:nth-child(3) {
      transform: translateY(-8.594vw);

      .case-studies-list__folder-top {
        left: 3.125vw;
      }
    }

    &:nth-child(4) {
      transform: translateY(-10.938vw);

      .case-studies-list__folder-top {
        left: 44.141vw;
      }
    }
  }

  .case-grid {
    padding: 5.208vw 3.906vw 7.552vw;
    grid-template-columns: 1fr 39.063vw;
    grid-template-rows: 25vw auto;
    grid-gap: 2.083vw 4.167vw;
  }

  .case-grid__content {
    gap: 2.083vw;
  }

  .case-grid__link {
    margin-top: 0;

    > svg {
      position: absolute;
      left: calc(100% + 2.344vw);
      width: 4.167vw;
      height: 4.167vw;
    }
  }

  .case-grid__deliverables-list {
    margin-top: 1.042w;

    li {
      padding-left: 1.302vw;

      &::before {
        width: .391vw;
        height: .391vw;
      }

      & + li {
        margin-top: .521vw;
      }
    }
  }

  .case-grid__deliverables-img {
    top: 2.474vw;
    width: 11.849vw;
  }
}

@media (max-width: 767px) {
  .case-studies-list {
    margin-top: 54.4vw;

    &[data-active-case="2"] {
      .case-studies-list__item {
        &:nth-child(1) {
          transform: translateY(calc(-12.267vw * 3));
          z-index: 1;
        }

        &:nth-child(2) {
          transform: translateY(0);
          z-index: 4;
        }

        &:nth-child(3) {
          transform: translateY(-12.267vw);
        }

        &:nth-child(4) {
          transform: translateY(calc(-12.267vw * 2));
        }
      }
    }

    &[data-active-case="3"] {
      .case-studies-list__item {
        &:nth-child(1) {
          transform: translateY(calc(-12.267vw * 2));
          z-index: 2;
        }

        &:nth-child(2) {
          transform: translateY(calc(-12.267vw * 3));
          z-index: 1;
        }

        &:nth-child(3) {
          transform: translateY(0);
          z-index: 4;
        }

        &:nth-child(4) {
          transform: translateY(-12.267vw);
          z-index: 3;
        }
      }
    }

    &[data-active-case="4"] {
      .case-studies-list__item {
        &:nth-child(1) {
          transform: translateY(-12.267vw);
          z-index: 3;
        }

        &:nth-child(2) {
          transform: translateY(calc(-12.267vw * 2));
          z-index: 2;
        }

        &:nth-child(3) {
          transform: translateY(calc(-12.267vw * 3));
          z-index: 1;
        }

        &:nth-child(4) {
          transform: translateY(0);
          z-index: 4;
        }
      }
    }
  }

  .case-studies-list__item {
    border-radius: 6.4vw;
    transition: .3s ease-in-out;

    &:nth-child(2) {
      transform: translateY(-12.267vw);
    }

    &:nth-child(3) {
      transform: translateY(calc(-12.267vw * 2));
    }

    &:nth-child(4) {
      transform: translateY(calc(-12.267vw * 3));
    }

    &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
      .case-studies-list__folder-top {
        min-width: 77.333vw;
        padding: calc(4.267vw - 1px) 12.267vw 0 12vw;
        top: -8.8vw;
        left: 50%;
        transform: translateX(-50%);
        height: 9.6vw;
        gap: 2.133vw;
        background-image: url("../assets/img/case-section-folders/folder-top-mob.svg");

        &::after {
          min-width: 4.267vw;
        }
      }
    }
  }

  .case-grid {
    padding: 5.333vw 5.333vw 26.667vw;
    display: flex;
    flex-direction: column;
    gap: 5.333vw;
  }

  .case-grid__cover {
    order: 1;
  }

  .case-grid__content {
    order: 2;
    gap: 2.133vw;
  }

  .case-grid__deliverables {
    order: 3;
  }

  .case-grid__link {
    position: absolute;
    bottom: 12.8vw;
    left: 5.333vw;
  }

  .case-grid__link > svg {
    left: calc(100% + 4.8vw);
    width: 8.533vw;
    height: 8.533vw;
  }

  .case-grid__deliverables-list {
    margin-top: 2.133vw;

    li {
      padding-left: 2.667vw;

      &::before {
        width: .8vw;
        height: .8vw;
      }

      & + li {
        margin-top: 1.067vw;
      }
    }
  }

  .case-grid__deliverables-img {
    top: 0;
    width: 24.267vw;
  }
}

/* reviews */
@media (min-width: 768px) {
  .reviews__show-more-btn {
    display: none;
  }
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.667vw;
}

.reviews__card {
  height: 100%;
  border-radius: var(--card-radius-32);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.563vw;

  &:nth-child(1), &:nth-child(5), &:nth-child(11), &:nth-child(14), &:nth-child(15) {
    grid-column: span 2;
  }
}

.reviews__card--lg {
  padding: 3.333vw;
}

.reviews__card--sm {
  padding: 1.875vw;
}

.reviews__card--lg, .reviews__card--sm {
  .reviews__author {
    display: flex;
    align-items: center;
    gap: .833vw;
  }
}

.reviews__card--photo {
  padding: 1.563vw 1.042vw;
  color: var(--white);
  position: relative;
  overflow: hidden;

  .reviews__author {
    margin-top: auto;
    width: 100%;
    padding: 1.25vw;
    border-radius: var(--card-radius-24);
    background: rgba(0, 0, 0, 0.48);
  }
}

.reviews__card-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  video, img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  & ~ * {
    z-index: 2;
  }
}

.reviews__rating-icon {
  width: 7.708vw;
}

.reviews__photo {
  width: 2.5vw;
  flex-shrink: 0;
}

.reviews__btn {
  width: 100%;
}

@media (max-width: 1280px) {
  .reviews__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2.604vw;
  }

  .reviews__card {
    height: 48.177vw;
    gap: 3.906vw;

    &:nth-child(4) {
      order: 2;
    }

    &:nth-child(5) ~ .reviews__card {
      order: 3;
    }
  }

  .reviews__card--lg {
    padding: 9.505vw 4.688vw;
  }

  .reviews__card--sm {
    padding: 5.208vw 4.688vw;
  }

  .reviews__card--lg, .reviews__card--sm {
    .reviews__author {
      gap: 2.083vw;
    }
  }

  .reviews__card--photo {
    padding: 3.906vw 2.604vw 2.604vw;

    .reviews__author {
      padding: 3.125vw;
    }
  }

  .reviews__rating-icon {
    width: 19.271vw;
  }

  .reviews__photo {
    width: 6.25vw;
  }
}

@media (max-width: 767px) {
  .reviews__grid {
    grid-template-columns: 1fr;
    grid-gap: 5.333vw;
    max-height: 546.667vw;
    overflow: hidden;
    position: relative;

    &::after {
      content: "";
      width: 100%;
      height: 26.667vw;
      position: absolute;
      bottom: 0;
      left: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    }

    &.open {
      max-height: unset;

      &::after {
        display: none;
      }

      .reviews__show-more-btn {
        display: none;
      }
    }
  }

  .reviews__show-more-btn {
    background-color: var(--white);
    display: flex;
    position: absolute;
    bottom: 8vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .reviews__card {
    height: 98.667vw;
    gap: 8vw;

    &:nth-child(1), &:nth-child(5), &:nth-child(11), &:nth-child(14), &:nth-child(15) {
      grid-column: auto;
    }
  }

  .reviews__card--lg, .reviews__card--sm {
    padding: 0 9.6vw;

    .reviews__author {
      gap: 4.267vw;
    }
  }

  .reviews__card--photo {
    padding: 8vw 5.333vw 5.333vw;

    .reviews__author {
      padding: 6.4vw;
    }
  }

  .reviews__rating-icon {
    width: 39.467vw;
  }

  .reviews__photo {
    width: 12.8vw;
  }
}

/* services */
.services__card {
  padding: 0 4.635vw 0 1.875vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 14.896vw;
  transition: color .5s, background-image .5s;

  &:hover {
    color: var(--white);

    .services__card-bg::before {
      opacity: 1;
    }
  }
}

.services__card-bg, .services__card-bg::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.services__card-bg {
  background: url("../assets/img/home/services/bg.webp") no-repeat center / 100% 100%;

  &::before {
    content: "";
    background: url("../assets/img/home/services/bg-hover.webp") no-repeat center / 100% 100%;
    opacity: 0;
    transition: opacity .5s;
  }
}

.services__card-content {
  position: relative;
}

.services__card-text {
  margin-top: .521vw;
}

.services__card-btn {
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 1280px) {
  .services__cards-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .services__card {
    padding: 0 11.328vw 0 3.125vw;
    min-height: 28.125vw;
  }

  .services__card-bg {
    background-image: url("../assets/img/home/services/bg-tablet.webp");

    &::before {
      background-image: url("../assets/img/home/services/bg-tablet-hover.webp");
    }
  }

  .services__card-text {
    margin-top: 1.302vw;
  }
}

@media (max-width: 767px) {
  .services__cards-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    gap: 5.333vw 0;
  }

  .services__card {
    padding: 6.4vw 13.6vw 6.4vw 6.4vw;
    min-height: 52.267vw;
  }

  .services__card-bg {
    background-image: url("../assets/img/home/services/bg-mob.webp");

    &::before {
      background-image: url("../assets/img/home/services/bg-mob-hover.webp");
    }
  }

  .services__card-text {
    margin-top: 2.667vw;
  }
}

/* engagement models */
.engagement-models-list {
  margin-top: 4.167vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--black);
  border-radius: var(--card-radius-24);
}

.engagement-models-list__item {
  padding: 3.021vw 3.75vw;

  & + .engagement-models-list__item {
    border-left: 1px solid var(--black);
  }
}

.engagement-models-list__icon {
  width: 4.167vw;
  height: 4.167vw;
}

.engagement-models-list__title {
  margin-top: 1.667vw;
}

.engagement-models-list__desc {
  margin-top: 2.5vw;
}

@media (max-width: 1280px) {
  .engagement-models-list {
    margin-top: 7.552vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: none;
  }

  .engagement-models-list__item {
    padding: 3.776vw;
    border: 1px solid var(--black);

    &:nth-child(1) {
      border-radius: var(--card-radius-24) 0 0 0;
    }

    &:nth-child(2) {
      border-radius: 0 var(--card-radius-24) var(--card-radius-24) 0;
      border-left: none;
    }

    &:nth-child(3) {
      border-radius: 0 0 var(--card-radius-24) var(--card-radius-24);
      border-top: 0;
    }
  }

  .engagement-models-list__icon {
    width: 9.115vw;
    height: 9.115vw;
  }

  .engagement-models-list__title {
    margin-top: 4.167vw;
  }

  .engagement-models-list__desc {
    margin-top: 3.125vw;
  }
}

@media (max-width: 767px) {
  .engagement-models-list {
    margin-top: 9.6vw;
    grid-template-columns: 1fr;
    border: 1px solid var(--black);
  }

  .engagement-models-list__item {
    padding: 8vw;
    grid-template-rows: auto;
    border: 0;

    &:not(:last-child) {
      border: 0;
      border-bottom: 1px solid var(--black);
    }

    &:last-child {
      border: 0;
    }
  }

  .engagement-models-list__icon {
    width: 12.8vw;
    height: 12.8vw;
  }

  .engagement-models-list__title {
    margin-top: 2.133vw;
  }

  .engagement-models-list__desc {
    margin-top: 4.267vw;
  }
}

/* custom styles */
/* preview */
.preview {
  padding: 2.5vw 4.74vw 4.167vw;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6.979vw;
}

.preview__content-wrap, .preview__title-wrap {
  display: flex;
  flex-direction: column;
}

.preview__content-wrap {
  width: 45.26vw;
  gap: 4.167vw;
}

.preview__title-wrap {
  flex-grow: 1;
  justify-content: center;
  gap: 1.25vw;
}

.preview__highlights {
  width: 28.385vw;
  display: flex;
  flex-wrap: wrap;
  gap: .833vw;
}

.preview__highlights-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .417vw;
  height: 3.958vw;
  padding: 0 1.25vw;
  border-radius: var(--card-radius-24);

  &:nth-child(1), &:nth-child(3) {
    flex-grow: 1;
  }

  &:nth-child(1) {
    background-color: #B2E2FC4D;
    transform: rotate(-2deg);
    justify-content: center;
  }

  &:nth-child(2) {
    background-color: #D1B5FF4D;
  }

  &:nth-child(3) {
    background-color: #00D96E1A;

    svg {
      width: 1.615vw;
      height: auto;
      margin: -.104vw -.052vw 0;
    }
  }
}

.preview__form {
  width: 38.281vw;
}

@media (max-width: 1280px) {
  .preview {
    padding: 3.125vw 24px 7.552vw;
    flex-direction: column;
    gap: 3.125vw;
  }

  .preview__content-wrap {
    width: 100%;
    gap: 3.906vw;
  }

  .preview__title-wrap {
    gap: 3.125vw;
  }

  .preview__highlights {
    width: 100%;
    align-items: flex-start;
    gap: 2.083vw;
  }

  .preview__highlights-item {
    height: 7.292vw;
    padding: 0 3.125vw;
    flex-grow: 0;
    gap: 1.042vw;

    &:nth-child(3) svg {
      width: 2.083vw;
      margin-left: -1.042vw;
    }
  }

  .preview__form {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .preview {
    margin-top: max(16vw, 60px);
    padding: 6.4vw 12px 12.8vw;
    gap: 9.6vw;
  }

  .preview__content-wrap, .preview__title-wrap {
    gap: 6.4vw;
  }

  .preview__highlights {
    gap: 2.133vw;
  }

  .preview__highlights-item {
    height: 14.933vw;
    padding: 0 5.333vw;
    gap: 2.133vw;

    &:nth-child(3) svg {
      width: 4.267vw;
      margin-left: 0;
    }
  }
}

@media (min-width: 1281px) {
  .section {
    padding: 4.167vw 1.25vw 4.167vw 4.74vw;
  }

  .about, .contact-banner, .case-studies, .technologies {
    margin-top: 4.167vw;
  }

  .form-feedback {
    padding: 6.25vw 1.25vw 5.573vw 15.156vw;
  }
}