@import url("../../assets/css/style.v2.css");

body {
  background: var(--white);
}

:root {
  --subtitle: 400 1.25vw/1.35 var(--font);
}

.page-nav  {
  z-index: 1;
  mix-blend-mode: difference;
}

.page-nav__btn-top, .page-nav__link {
  color: var(--white);
}

.page-nav__btn-top > svg {
  width: 1.5vw;
  height: 1.45vw;

  rect, path {
    stroke: var(--white);
    width: 95%;
    height: 95%;
  }
}

.page-nav__link::after {
  background: var(--white);
}

section {
  isolation: isolate;
}

/*style preview
----------------------*/
.preview {
  padding: 0 3.33vw 11.56vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2.6vw;
  position: relative;
}

.preview__content {
  background: left top/100% 100% url("../../assets/img/services/design/preview-card-left.svg") no-repeat;
  padding: 2.5vw;
  height: 36.25vw;
}

.preview__title {
  font: var(--title-h2);
  padding-top: 0;
}

.preview__img {
  background: left top/100% 100% url("../../assets/img/services/design/preview-card-right.svg") no-repeat;
  height: 36.25vw;
  position: relative;
}

.preview__img {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  .preview__img-1, .preview__img-2 {
    position: absolute;
    width: auto;
    height: 4.27vw;
    z-index: 5;
  }

  .preview__img-1 {
    top: 8.23vw;
    left: 4.69vw;
  }

  .preview__img-2 {
    top: 29.22vw;
    right: 5.21vw;
  }

  .preview__phone-img {
    display: block;
    width: 22.55vw;
    > img {
      width: 100%;
    }
  }
}

.preview__desc {
  margin-top: 1.61vw;
  max-width: 100%;
}

.preview__link {
  margin-top: 2.5vw;
  height: 2.81vw;
  font-size: .94vw;
}

.preview__circle-link {
  width: 12.71vw;
  height: 12.71vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30vw;
  left: 50%;
  transform: translateX(-50%);

  .preview__circle-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .73vw;
    height: 2.14vw;
    animation: none;
  }

  > svg {
    width: 100%;
    height: 100%;
    animation: spin 17s linear infinite;

    rect {
      fill: transparent;
    }
  }

  &:hover > svg:first-child {
    background: center/cover url("../../assets/img/services/design/blur.svg") no-repeat;
  }
}

@keyframes spin {
  0% {
    transform: rotate(1turn)
  }

  to {
    transform: rotate(0deg)
  }
}

/*style services
----------------------*/
.services__desc {
  width: 41.77vw;
  margin: 3.33vw 0 0 auto;
}

.services-list {
  display: flex;
  flex-direction: column;
  border: none!important;
  counter-reset: list;
}

.services-list__item {
  height: 9.4vw;
  border: none!important;
  border-bottom: 1px solid var(--black) !important;
  padding: 0 6.25vw 0 0;
  overflow: hidden;
  transition: .2s ease-in-out;
  position: relative;

  &:first-child {
    border-top: 1px solid var(--black) !important;
  }

  &::before {
    counter-increment: list;
    content: "0"counter(list);
    font: 500 14.84vw/1 var(--font);
    position: absolute;
    left: 6.25vw;
    top: 2.5vw;
  }

  &.active {
    transition: .4s ease-in-out;
    height: auto;
  }
}

.services-list__content {
  width: 35.52vw;
  height: max-content;
  margin: 0 0 0 auto;
}

.services-list__title {
  margin-top: 5.76vw;
}

.services-list__desc {

  &:last-child {
    padding-bottom: 5.76vw;
  }
}

.services-list__card-open {
  display: none;
}

/*style design industries
----------------------------*/
.design-industries {
  grid-column: 1 / 3;
  background: #F6F6F6;
  padding: 0 24px 0 15.16vw;
  display: grid;
  grid-template-columns: 29.22vw 1fr;
  grid-template-rows: auto 1fr;
  grid-column-gap: 12.03vw;
  border-radius: 3.33vw;
}

.design-industries__title {
  font: var(--title-h3);
  margin-top: 8.33vw;
}

.design-industries__desc {
  font: 400 1.25vw/1.35 var(--font);
  margin-top: 1.25vw;
  height: max-content;
}

.design-industries-list {
  width: 31.25vw;
  height: 46.56vw;
  grid-column: 2/3;
  grid-row: 1/3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 3.44vw;
  overflow: hidden;
  position: relative;

  &::before, &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5.21vw;
    z-index: 1;
    left: 0;
  }

  &::before {
    top: 0;
    background: linear-gradient(180deg, rgba(246, 246, 246, 1), rgba(246, 246, 246, 0));

  }

  &::after {
    bottom: 0;
    background: linear-gradient(180deg, rgba(246, 246, 246, 0), rgba(246, 246, 246, 1));
  }
}

.design-industries-list__wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4.01vw;
  animation: downMove 30s linear infinite;

  &:last-child {
    animation: upMove 30s linear infinite;
  }
}

.design-industries-list__item {
  width: 100%;
  height: 10.21vw;
  border-radius: 1.67vw;
  background: var(--white);
  border: 1px solid #BABABA;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.08vw;
  font: 400 1.25vw/1.35 var(--font);
  transition: var(--normal);

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

    > svg path {
      stroke: var(--white);
      fill: #fff;
    }

    > svg rect {
      fill: #fff;
    }
  }
}

.design-industries-list__wrap:first-child {
  .design-industries-list__item:nth-child(4) {
    &:hover {
      > svg path {
        stroke: var(--black);
        fill: #fff;
      }
    }
  }
}

@keyframes upMove {
  from {
    transform: translatey(0);
  }

  to {
    transform: translatey(-50%);
  }
}

@keyframes downMove {
  from {
    transform: translatey(-50%);
  }

  to {
    transform: translatey(0);
  }
}


/*style clients
----------------------------*/
.clients {
  background: var(--white);
  grid-column: 2/3;
  padding-left: 0;
}

.clients-list img {
  height: 2.92vw;
}

/*style reviews
----------------------------*/
.reviews {
  background: var(--white);
  grid-column: 2/3;
  padding-left: 0;
}

.reviews-list__item {
  border: none;
  background: #F6F6F6;
}

/*style why us
----------------------------*/
.why-us {
  border-radius: 0;
  background: var(--white);
  grid-column: 2/3;
  padding-left: 0;
}

.why-us-quote {
  width: 48.8vw;
  margin: 5.21vw auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  > p {
    margin-top: 2.08vw;
    font: var(--title-h3);
    text-align: center;
  }
}

.why-us-quote__site {
  display: flex;
  align-items: center;
  gap: 1.04vw;
  margin-top: 2.08vw;

  &::before {
    content: "";
    width: 2.81vw;
    height: 1px;
    background: var(--black);
  }
}

.why-us-quote__photo {
  border-radius: 50%;
  width: 2.5vw;
  height: 2.5vw;
  object-fit: cover;
}

.why-us-quote__author {
  font: 700 1.04vw/1.4 var(--font);
}

.advantages {
  margin-top: 10.42vw;
  display: grid;
  grid-template-columns: 1fr 41.77vw;
  grid-column-gap: 5vw;
  align-items: center;
}

.advantages__img {
  width: 100%;
}

.advantages__item {
  font: 400 1.25vw/1 var(--font);

  &:not(.advantages__item:first-child) {
    margin-top: 2.5vw;
  }

  > span {
    font: var(--title-h3);
    margin-right: 1.25vw;
  }
}

/*style design projects
----------------------------*/
.design-projects {
  height: 57.29vw;
  grid-column: 1/3;
  background: var(--black);
  border-radius: 3.33vw;
  padding: 0 24px 0 15.16vw;
  display: grid;
  grid-template-columns: 34.84vw 1fr;
  grid-column-gap: 6.98vw;
  overflow: hidden;
}

.design-projects__title {
  color: var(--white);
  font: var(--title-h2);
  margin-top: 8.33vw;
}

.design-projects-wrap {
  display: grid;
  grid-template-columns: 27.86vw 1fr;
  grid-column-gap: 3.83vw;
  height: 100%;
  overflow: hidden;
}

.design-projects-covers {
  display: flex;
  flex-direction: column;
  gap: 2.08vw;
  height: 100%;
  padding-top: 8.33vw;

  > a, img {
    width: 100%;
    height: 37.24vw;
    object-fit: cover;
    display: block;
  }
}

.design-projects-nav {
  margin: 46.67vh 0 0;
}

.design-projects-nav__item {
  color: var(--white);
  font: 700 1.04vw/1 var(--font);
  position: relative;
  padding-bottom: 7px;

  &:not(:first-child) {
    margin-top: .83vw;
  }

  &:before {
    content: "";
    width: 0;
    height: 1px;
    background: var(--white);
    transition: var(--normal);
    position: absolute;
    bottom: 0;
    left: 0;
  }

  &.active::before {
    width: 100%;
  }
}

/*style design team slider
----------------------------*/
.design-team {
  padding: 6.25vw 24px 8.85vw 0;
}

.design-team__title {
  font: var(--title-h2);
  width: 33.91vw;
}

.design-team-slider {
  padding-top: 7.92vw;
  transition: var(--normal);
}

.design-team__prev, .design-team__next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.33vw;
  height: 3.33vw;
  border-radius: 50%;
  border: 1px solid var(--black);
  position: absolute;
  right: 0;
  top: 0;
  transition: var(--normal);

  &:hover::before {
    background: var(--green);
  }

  > svg {
    width: 1.56vw;
    height: 1.56vw;
  }

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--normal);
  }

  &::before {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 50%;
    filter: blur(4px);
    z-index: -1;
  }

  &:disabled {
    opacity: .5;
  }
}

.design-team__prev {
  right: 4.58vw;
}

.design-team__list {
  display: flex;
}


.design-team-slider__item {
  width: auto!important;
  display: flex;
  transition: var(--normal);
  padding-right: 3.33vw;
}

.design-team-slider__img-wrap {
  position: relative;
  width: 17.45vw;
  height: 22.14vw;
}

.design-team-slider__open-btn {
  width: 1.56vw;
  height: 1.56vw;
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid var(--black);
  border-radius: 50%;
  transition: var(--normal);

  &::before, &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--normal);
  }

  &::before {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
    filter: blur(4px);
    z-index: 1;
  }

  &::after {
    width: 50%;
    height: 50%;
    background: center/cover url("../../assets/img/services/design/plus.svg") no-repeat;
    z-index: 3;
  }

  &.open::after {
    background-image: url("../../assets/img/services/design/minus.svg");
  }

  &:hover::before {
    background: #00D96E;
  }
}

.design-team-slider__img {
  width: 100%;
  height: 22.14vw;
}

.design-team-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  width: 0;
  padding: 0;
  height: 0;
  transition: .5s ease;

  &.active {
    padding: 1.51vw 2.5vw 1.51vw 1.56vw;
  }

  > * {
    width: 18.26vw;
  }
}

.design-team-content__name {
  font: var(--title-h4);
}

.design-team-content__status {
  margin-top: .42vw;
  font: 400 1.04vw/1.4 var(--font);
}

.design-team-content__skill {
  margin-top: 1.04vw;
  font: 700 .94vw/1.35 var(--font);
}

.design-team-content__experience, .design-team-content__specialties {
  margin-top: 1.04vw;
  font: 400 .94vw/1.35 var(--font);
}

.design-team-content__specialties {
  height: max-content;

  > strong {
    display: block;
    margin-bottom: .42vw;
    font: 700 1.04vw/1.4 var(--font);
  }
}


/*style tools
----------------------------*/
.tools {
  padding: 8.33vw 24px 6.25vw 0;
}

.tools__title {
  font: var(--title-h2);
}

.tools__desc {
  font: 400 1.25vw/1.35 var(--font);
  margin-top: 1.25vw;
  width: 41.41vw;
}

.tools-grid {
  margin-top: 6.25vw;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  border: 1px solid #E7E7E7;
  border-top: none;
  border-left: none;

  > div {

    border-top: 1px solid #E7E7E7;
    border-left: 1px solid #E7E7E7;
    padding-top: calc(100%);
    background: left top/cover #FAFAFA no-repeat;

    &.active {
      background-color: #E7E7E7;
    }

    &:hover {
      background-position: left calc(100% - 1px);
    }

    &:nth-child(4) {
      background-image: url("../../assets/img/services/design/tools/photoshop.png");
    }

    &:nth-child(11) {
      background-image: url("../../assets/img/services/design/tools/illustrator.png");
    }

    &:nth-child(17) {
      background-image: url("../../assets/img/services/design/tools/adobe-xd.png");
    }

    &:nth-child(30) {
      background-image: url("../../assets/img/services/design/tools/invision.png");
    }

    &:nth-child(41) {
      background-image: url("../../assets/img/services/design/tools/balsamiq.png");
    }

    &:nth-child(53) {
      background-image: url("../../assets/img/services/design/tools/sketch.png");
    }

    &:nth-child(60) {
      background-image: url("../../assets/img/services/design/tools/chameleon.png");
    }

    &:nth-child(66) {
      background-image: url("../../assets/img/services/design/tools/figma.png");
    }

    &:nth-child(79) {
      background-image: url("../../assets/img/services/design/tools/logrocket.png");
    }
  }
}

/*style tools
----------------------------*/
.design-services {
  padding: 6.25vw 24px 0 0;
  display: grid;
  grid-template-columns: 1fr 41.77vw;
  grid-column-gap: 2.45vw;
  overflow: visible;
}

.design-services-list {
  grid-column: 2/3;
}

.design-services__title {
  font: var(--title-h2);
}

.design-services__desc {
  font: var(--subtitle);
  width: 24.79vw;
  margin-top: 1.88vw;
}

.design-services__link {
  height: max-content;
  margin-top: 3.33vw;
}

.design-services__wrap {
  position: sticky;
  top: 7vw;
  height: max-content;
}

.design-services-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2.08vw;
  max-height: 103.79vw;
}

.design-services-list__item {
  width: 19.84vw;
  background: #F6F6F6;
  padding: 1.88vw;
  border-radius: 1.67vw;
  height: max-content;

  &:nth-child(2) {
    order: 4;
    margin-top: 3.02vw;
  }

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

  &:nth-child(6) {
    order: 6;
  }
}

.design-services-list__title {
  margin: 1.56vw 0;
  font: var(--title-h5);
}

.design-services-list__desc {
  font: 400 .94vw/1.35 var(--font);
}

.design-services-list__icon {
  width: 6.77vw;
  height: 6.77vw;
}

/*style why work
----------------------------*/
.why-work {
  grid-column: 1/3;
  background: var(--black);
  border-radius: 3.33vw;
  padding: 8.85vw 24px 8.85vw 15.16vw;
}

.why-work__title {
  color: var(--white);
  font: var(--title-h2);
}

.why-work-wrap {
  margin-top: 5.21vw;
  display: grid;
  grid-template-columns: 20.89vw 1fr;
  grid-gap: 3.49vw;
  align-items: center;
}

.why-work-nav__item {
  color: #BABABA;
  padding-right: 4.74vw;
  position: relative;
  text-align: right;
  font: 700 1.04vw/1.4 var(--font);
  cursor: pointer;

  &:not(&:first-child) {
    margin-top: .94vw;
  }

  &::before {
    content: "";
    width: 0;
    height: 1px;
    background: var(--white);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: var(--normal);
  }

  &.active {
    color: var(--white);

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

.why-work-content {
  position: relative;
}

.why-work-content__item {
  width: calc(100% - 3.49vw);
  padding: 1.67vw;
  border-radius: .83vw;
  background: #333;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: absolute;
  right: 3.49vw;
  z-index: 1;
  transform: translateY(50px);
  transition: .4s ease-in;
  opacity: 0;
  border: 1px solid var(--black);
  height: 30vw;

  &:first-child {
    position: relative;
    right: auto;
    opacity: 1;
  }

  &.active {
    animation: viewItem .3s ease alternate forwards!important;
  }

  &:nth-child(2), &:nth-child(3), &:nth-child(4) {
    animation: hiddenItem .3s ease alternate forwards;
  }

  &:nth-child(2) {
    top: .83vw;
  }

  &:nth-child(3) {
    top: calc(.83vw * 2);
  }

  &:nth-child(4) {
    top: calc(.83vw * 3);
  }
}

@keyframes viewItem {
  0% {
    z-index: 2;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes hiddenItem {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    z-index: 2;
  }
}

.why-work-content__img {
  width: 100%;
  height: 26.67vw;
  border-radius: .83vw;
  object-fit: cover;
}

.why-work-content__value {
  padding: 1.67vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  & * {
    color: var(--white);
  }
}

.why-work-content__title {
  font: var(--title-h3);
  margin: 0 0 auto;
}

.why-work-content__desc, .why-work-content__list {
  font: 400 1.04vw/1.4 var(--font);
}

.why-work-content__list {
  padding: .5vw 0 0 1.82vw;

  > li {
    list-style: disc;
    padding-left: 1px;
  }
}

.engagement-models__title {
  width: 29.54vw;
}

.form-feedback__subtitle {
  width: 42.19vw;
}

@media (max-width: 1280px) {
  .preview {
    padding: 4.17vw 24px 12.5vw!important;
    grid-template-rows: 68.75vw;
    grid-column-gap: 2.6vw;
    grid-template-areas:
        "title img"
        "desc img"
        "link img";
  }

  .preview__title {
    width: 100%;
    padding: 0;
  }

  .preview__desc {
    font-size: 2.34vw;
  }

  .preview__content {
    background-image: url("../../assets/img/services/design/preview-card-left-tablet.svg");
    padding: 3.13vw;
    height: 100%;
  }

  .preview__img {
    background-image: url("../../assets/img/services/design/preview-card-right-tablet.svg");
    height: 100%;
    justify-content: flex-start;

    .preview__img-1 {
      top: 9.9vw;
      left: 2.86vw;
      height: 5.99vw;
    }

    .preview__img-2 {
      top: 49.35vw;
      right: 1.6vw;
      height: 5.99vw;
    }

    .preview__phone-img {
      width: 27.86vw;
      margin-top: 4.95vw;
    }
  }

  .preview__circle-link {
    width: 15.63vw;
    height: 15.63vw;
    top: 63.08vw;
  }

  .preview__link {
    margin-top: 14.71vw;
    height: 7.03vw;
    font-size: 1.82vw;
  }

  .services-list__item {
    padding-right: 3.13vw;
    height: 9vw;

    &::before {
      font-size: 10.42vw;
      left: 3.13vw;
      top: 50%;
      transition: var(--normal);
    }

    &.active::before {
      transform: translateY(-50%);
    }
  }

  .services-list__content {
    width: 70.96vw;
  }

  .services-list__title {
    margin-top: 3.13vw;
    font: var(--title-h4);
  }

  .services-list__desc {
    margin-top: 2.08vw;

    &:last-child {
      padding-bottom: 3.13vw;
    }
  }

  .why-us-quote {
    width: 100%;
    margin: 0;

    > svg {
      width: 7.81vw;
      height: 7.81vw;
    }

    > p {
      margin-top: 3.13vw;
      font: var(--title-h4);
    }
  }

  .why-us-quote__site {
    gap: 2.6vw;
    margin-top: 3.13vw;

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

  .why-us-quote__photo {
    width: 6.25vw;
    height: 6.25vw;
  }

  .why-us-quote__author {
    font-size: 2.08vw;
  }

  .advantages {
    margin-top: 7.55vw;
    grid-template-columns: 1fr 46.88vw;
    grid-column-gap: 7.81vw;
  }

  .advantages__item {
    font-size: 2.34vw;

    > span {
      margin: 0 0 1.04vw;
      display: block;
    }
  }

  .advantages__img {
    height: 100%;
    object-fit: cover;
    border-radius: 1.87vw;
  }

  .design-industries {
    padding: 0 24px !important;
    grid-template-columns: 38.54vw 1fr;
    grid-column-gap: 8.33vw;
    border-radius: 3.13vw;
  }

  .design-industries__title {
    margin-top: 10.16vw;
    width: 35vw;
  }

  .design-industries__desc {
    font-size: 2.34vw;
    margin-top: 3.13vw;
  }

  .design-industries-list__item {
    height: 14.84vw;
    border-radius: 2.34vw;
    padding: 2.6vw;
    font-size: 2.34vw;

    > svg {
      width: 3.91vw;
      height: 3.91vw;
    }
  }

  .design-industries-list {
    width: 46.88vw;
    grid-column-gap: 3.13vw;
  }

  .design-projects {
    height: 66.54vw;
    border-radius: 3.13vw;
    padding: 0 24px !important;
    grid-template-columns: 38.54vw 1fr;
    grid-column-gap: 4.04vw;
  }

  .design-projects__title {
    margin-top: 7.55vw;
  }

  .design-projects-wrap {
    grid-template-columns: 33.33vw 1fr;
    grid-column-gap: 4.04vw;
  }

  .design-projects-covers {
    > a, img {
      height: 44.53vw;
    }
  }

  .design-projects-nav__item {
    font-size: 2.08vw;
  }

  .tools-grid {
    margin-top: 6.25vw;
    grid-template-columns: repeat(12, 7.81vw);
    grid-template-rows: repeat(5, 7.81vw);

    > div {

      &:nth-child(60) ~ div {
        display: none;
      }

      &:nth-child(11), &:nth-child(17), &:nth-child(30), &:nth-child(53), &:nth-child(60), &:nth-child(66),
      &:nth-child(79) {
        background-image: none;
        &:hover {
          background-image: none;
        }
      }

      &:nth-child(8) {
        background-image: url("../../assets/img/services/design/tools/illustrator.png");
      }

      &:nth-child(13) {
        background-image: url("../../assets/img/services/design/tools/adobe-xd.png");
      }

      &:nth-child(23) {
        background-image: url("../../assets/img/services/design/tools/invision.png");
      }

      &:nth-child(31) {
        background-image: url("../../assets/img/services/design/tools/balsamiq.png");
      }

      &:nth-child(41) {
        background-image: url("../../assets/img/services/design/tools/sketch.png");
      }

      &:nth-child(48) {
        background-image: url("../../assets/img/services/design/tools/chameleon.png");
      }

      &:nth-child(50) {
        background-image: url("../../assets/img/services/design/tools/figma.png");
      }

      &:nth-child(57) {
        background-image: url("../../assets/img/services/design/tools/logrocket.png");
      }
    }
  }

  .tools__desc {
    font-size: 2.34vw;
    margin-top: 2.08vw;
    width: 54.69vw;
  }

  .design-services {
    grid-template-columns: 1fr 42.97vw;
    grid-column-gap: 3.91vw;
    overflow: visible;
  }

  .design-services-list {
    flex-wrap: nowrap;
    max-height: max-content;
  }

  .design-services-list__item {
    width: 100%;
    padding: 4.69vw;
    border-radius: 2.34vw;
  }

  .design-services-list__icon {
    width: 6.25vw;
    height: 6.25vw;
  }

  .design-services-list__title {
    margin: 2.08vw 0;
  }

  .design-services-list__desc {
    font-size: 1.82vw;
  }

  .design-services-list {
    max-height: max-content;
  }

  .design-team-slider__item {
    padding-right: 2.08vw;
  }

  .design-team-content {
    > * {
      width: 22.65vw;
    }
  }

  .design-team-content__status {
    margin-top: 1.42vw;
    font: 400 1.8vw / 1.4 var(--font);
  }

  .design-team-slider__img {
    height: auto;
  }

  .design-team-slider__img-wrap {
    width: 31.9vw;
    height: 41vw;
    padding: 0;
  }

  .design-team-content__skill, .design-team-content__experience, .design-team-content__specialties {
    font-size: 1.3vw;
  }

  .design-team-content__specialties {
    > strong {
      font-size: 1.3vw;
    }
  }

  .design-team-slider__open-btn {
    width: 3vw;
    height: 3vw;
  }

  .design-team-slider {
    padding-top: 9.38vw;
  }

  .design-team__prev, .design-team__next {
    display: flex;
    width: 6.25vw;
    height: 6.25vw;
    border: 1px solid var(--black);
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;

    > svg {
      width: 2.6vw;
      height: 2.6vw;
    }
  }

  .design-team__prev {
    right: 12.5vw;
  }

  .why-work {
    border-radius: 3.13vw;
  }

  .why-work-wrap {
    margin-top: 4.69vw;
    grid-template-columns: 1fr;
    grid-gap: 0;
  }

  .why-work-nav {
    display: none;
  }

  .why-work-content__item {
    width: 100%;
    padding: 4.17vw;
    border-radius: 4.17vw;
    grid-template-columns: repeat(2, 1fr);
    right: 0;
    height: 52.34vw;

    &:nth-child(2) {
      top: 2.17vw;
    }

    &:nth-child(3) {
      top: calc(2.17vw * 2);
    }

    &:nth-child(4) {
      top: calc(2.17vw * 3);
    }
  }

  .why-work-content__desc, .why-work-content__list {
    font-size: 2.08vw;
  }

  .why-work-content__img {
    height: 100%;
    border-radius: 2.08vw;
  }

  .why-work-content__title {
    margin-bottom: 3.13vw;
  }

  .engagement-models__title {
    width: 31.88vw;
  }

  .why-work-content__value {
    justify-content: flex-start;
  }

  .form-feedback__subtitle {
    width: 100%;
  }

  .design-services__desc {
    font-size: 2.34vw;
    width: 100%;
  }
}

@media (max-width: 1000px) {
  .design-projects-nav {
    top: 25vh;
  }
}

@media (max-width: 767px) {
  :root {
    --subtitle: 400 4.8vw/1.35 var(--font);
  }

  .preview {
    padding: 12.8vw 16px;!important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .preview__desc {
    font-size: 4.27vw;
    margin-top: 4.27vw;
  }

  .preview__content {
    background: #F6F6F6;
    padding: 6.4vw;
    height: auto;
    border-radius: 8.53vw;
  }

  .preview__circle-link {
    position: relative;
    top: 0;
    left: 0;
  }

  .preview__img {
    width: 100%;
    background: var(--black);
    height: 101.6vw;
    justify-content: flex-end;

    .preview__img-1 {
      top: 21.07vw;
      left: 5.87vw;
      height: 12.27vw;
    }

    .preview__img-2 {
      top: 70.13vw;
      right: 3.2vw;
      height: 12.27vw;
    }

    .preview__phone-img {
      width: 57.07vw;
      margin-top: 0;
    }
  }

  .preview__circle-link {
    width: 32vw;
    height: 32vw;
    margin: 6.4vw auto 0;
    transform: none;

    .preview__circle-arrow {
      width: 2.13vw;
      height: 6.13vw;
    }
  }

  .preview__link {
    margin-top: 6.4vw;
    height: 6.4vw;
    font-size: 3.73vw;
  }

  .services__desc {
    width: 100%;
    margin: 8.53vw 0 0 auto;
  }

  .services-list__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 4.27vw;

    &::before, &.active::before {
      transform: none;
      position: static;
    }

    &.active .services-list__desc {
      height: auto;
    }
  }

  .services-list__content {
    margin: 0;
    width: 100%;
  }

  .services-list__desc {
    font-size: 3.73vw;
    margin-top: 2.13vw;
    height: 0;
    overflow: hidden;
    padding: 0;

    &:last-child {
      padding-bottom: 0;
    }
  }

  .services__link {
    width: 100%;
  }

  .why-us {
    padding: 6.4vw 16px 15.47vw!important;
  }

  .why-us-quote {
    > svg {
      width: 16vw;
      height: 16vw;
    }

    > p {
      margin-top: 6.4vw;
    }
  }

  .why-us-quote__site {
    gap: 5.33vw;
    margin-top: 6.4vw;

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

  .why-us-quote__photo {
    width: 12.8vw;
    height: 12.8vw;
  }

  .why-us-quote__author {
    font-size: 4.27vw;
  }

  .advantages {
    margin-top: 17.07vw;
    grid-template-columns: 1fr;
    grid-column-gap: 0;
  }

  .advantages__img {
    height: auto;
    border-radius: 3.65vw;
    margin-top: 9.6vw;
  }

  .advantages__item {
    font-size: 4.8vw;

    &:not(.advantages__item:first-child) {
      margin-top: 6.4vw;
    }

    > span {
      margin: 0 0 2.13vw;
    }
  }

  .design-industries {
    padding: 12.8vw 16px !important;
    grid-template-columns: 1fr;
    grid-column-gap: 8.33vw;
    border-radius: 3.13vw;
  }

  .design-industries-list {
    grid-column: 1/2;
    grid-row: auto;
  }

  .design-industries__title {
    margin-top: 0;
    width: 100%;
  }

  .design-industries__desc {
    font-size: 4.8vw;
    margin-top: 6.4vw;
  }

  .design-industries-list {
    width: 100%;
    height: 80.53vw;
    margin-top: 9.6vw;
    grid-column-gap: 7.2vw;
  }

  .design-industries-list__item {
    height: 28.8vw;
    border-radius: 4.8vw;
    padding: 5.33vw;
    font-size: 4.8vw;

    > svg {
      width: 6.4vw;
      height: 6.4vw;
    }
  }

  .clients {
    background: #F6F6F6;
  }

  .design-projects {
    height: auto;
    border-radius: 6.4vw;
    padding: 15.47vw 0 15.47vw 16px !important;
    grid-template-columns: 1fr;
    grid-column-gap: 0;
  }

  .design-projects-wrap {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    height: auto;
    overflow: hidden;
  }

  .design-projects-covers {
    flex-direction: row;
    height: max-content;

    > a, img {
      width: 69.33vw;
      height: 92.8vw;
      object-fit: cover;
      border-radius: 4.27vw;
    }
  }

  .design-projects-nav {
    margin: 9.6vw 0 0;
    display: flex;
    width: max-content;
  }

  .design-projects-nav__item {
    font-size: 4.27vw;

    &:not(:first-child) {
      margin: 0 0 0 4.27vw;
    }
  }

  .tools__desc {
    font-size: 4.8vw;
    margin-top: 4.27vw;
    width: 100%;
  }

  .tools-grid {
    margin-top: 9.6vw;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 13.46vw);
  }

  .tools-grid {
    & > div {
      &:nth-child(49) ~ div {
        display: none;
      }

      &:nth-child(4), &:nth-child(8), &:nth-child(13), &:nth-child(31), &:nth-child(57), &:nth-child(41)  {
        background-image: none;
        &:hover {
          background-image: none;
        }
      }

      &:nth-child(1) {
        background-image: url("../../assets/img/services/design/tools/photoshop.png");
      }

      &:nth-child(7) {
        background-image: url("../../assets/img/services/design/tools/illustrator.png");
      }

      &:nth-child(10) {
        background-image: url("../../assets/img/services/design/tools/adobe-xd.png");
      }

      &:nth-child(19) {
        background-image: url("../../assets/img/services/design/tools/invision.png");
      }

      &:nth-child(23) {
        background-image: url("../../assets/img/services/design/tools/balsamiq.png");
      }

      &:nth-child(34) {
        background-image: url("../../assets/img/services/design/tools/chameleon.png");
      }

      &:nth-child(36) {
        background-image: url("../../assets/img/services/design/tools/logrocket.png");
      }

      &:nth-child(39) {
        background-image: url("../../assets/img/services/design/tools/sketch.png");
      }

      &:nth-child(48) {
        background-image: url("../../assets/img/services/design/tools/figma.png");
      }
    }
  }

  .design-services {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
  }

  .design-services-list {
    grid-column: auto;
    margin-top: 15.47vw;
  }

  .design-services__desc {
    width: 100%;
    margin-top: 6.4vw;
  }

  .design-services-list__item {
    padding: 9.6vw;
    border-radius: 4.8vw;
  }

  .design-services-list__icon {
    width: 12.8vw;
    height: 12.8vw;
  }

  .design-services-list__title {
    margin: 4.27vw 0;
  }

  .design-services-list__desc {
    font-size: 3.73vw;
  }

  .services-list__card-open {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8vw;
    height: 8vw;
    border: 1px solid var(--black);
    border-radius: 50%;
    position: absolute;
    top: 4.27vw;
    right: 4.27vw;

    > svg {
      width: 4vw;
      height: 4vw;
    }
  }

  .design-services__wrap {
    position: static;
  }

  .design-team__title {
    width: 100%;
  }

  .design-team-slider {
    margin-top: 12.8vw;
  }

  .design-team-slider__img-wrap {
    width: 100%;
    height: 73.87vw;
  }

  .design-team-slider__item {
    width: 100%!important;
    padding-right: 0;
    flex-direction: column;
    height: auto;
  }

  .design-team-slider__img {
    width: 100%;
    height: 73.87vw;
    border-radius: 0 0 4.27vw 4.27vw;
    overflow: hidden;
  }

  .design-team-content {
    padding: 6.4vw 0 0;
    width: 100%;

    > * {
      width: 100%;
      margin-top: 2.13vw;
    }
  }

  .design-team-content__status {
    font-size: 4.27vw;
  }

  .design-team-content__experience, .design-team-content__specialties, .design-team-content__skill {
    font-size: 3.73vw;
  }

  .design-team-content__specialties {
    > strong {
      font-size: 4.27vw;
    }
  }

  .design-team-slider__open-btn {
    width: 8vw;
    height: 8vw;
  }

  .design-team-slider {
    padding-top: 14.4vw;

    &.swiper-initialized {
      padding-top: 11.92vw;
    }
  }

  .design-team__prev, .design-team__next {
    width: 8vw;
    height: 8vw;

    > svg {
      width: 4vw;
      height: 4vw;
    }
  }

  .design-team__prev {
    right: 50%;
    transform: translateX(-50%);
  }

  .design-team__next {
    left: 50%;
    right: auto;
    transform: translateX(50%);
  }

  .why-work {
    border-radius: 6.4vw;
    padding: 15.47vw 16px;
  }

  .why-work-wrap {
    margin-top: 9.6vw;
  }

  .why-work-content__item {
    padding: 6.4vw;
    border-radius: 6.4vw;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
    height: 148.53vw;

    &:nth-child(2) {
      top: 10px;
    }

    &:nth-child(3) {
      top: calc(10px * 2);
    }

    &:nth-child(4) {
      top: calc(10px * 3);
    }
  }

  .why-work-content__img {
    height: calc(100% - 6.4vw);
    border-radius: var(--radius-card);
    margin-top: 6.4vw;
    overflow: hidden;
  }

  .why-work-content__title {
    margin-bottom: 2.13vw;
  }

  .why-work-content__desc, .why-work-content__list {
    font-size: 4.27vw;
  }

  .why-work-content__list {
    padding: 3.5vw 0 0 5.82vw;
  }

  .why-work-content__value {
    padding: 0;
  }

  .engagement-models__title {
    width: 100%;
  }
}