/* components
------------- */
/* chips */
.tag {
  border-radius: .521vw;
}

.tag--grey {
  background-color: #EEEEEE;
  color: var(--black);
}

.tag--lg {
  padding: .417vw 1.042vw;
  font: var(--paragraph-md);
}

@media (max-width: 1280px) {
  .tag {
    border-radius: 1.302vw;
  }

  .tag--lg {
    padding: 1.042vw 2.604vw 1.172vw;
    font-size: 1.823vw;
  }
}

@media (max-width: 767px) {
  .tag {
    border-radius: 2.667vw;
  }

  .tag--lg {
    padding: 1.6vw 3.2vw;
    font-size: 3.2vw;
  }
}

.list-item {
  position: relative;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    height: 1px;
  }
}

.list-item--sm {
  padding-left: 1.875vw;

  &:before {
    top: .521vw;
    width: 1.042vw;
  }

}

@media (max-width: 1280px) {
  .list-item--sm {
    padding-left: 4.688vw;

    &::before {
      top: 1.563vw;
      width: 2.604vw;
    }
  }
}

@media (max-width: 767px) {
  .list-item--sm {
    padding-left: 9.6vw;

    &::before {
      top: 3.2vw;
      width: 5.333vw;
    }
  }
}

.list-item--md {
  padding-left: 2.396vw;

  &:before {
    top: .625vw;
    width: 1.563vw;
  }
}

@media (max-width: 1280px) {
  .list-item--md {
    padding-left: 5.99vw;

    &::before {
      top: 1.563vw;
      width: 3.906vw;
    }
  }
}

@media (max-width: 767px) {
  .list-item--md {
    padding-left: 12.267vw;

    &::before {
      top: 3.2vw;
      width: 8vw;
    }
  }
}

.list-item--black {
  color: var(--black);

  &::before {
    background-color: var(--black);
  }
}

/* animation */
.marquee {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee linear infinite;;
  animation-duration: var(--marquee-duration, 20s);
}

.marquee__item {
  flex-shrink: 0;
}

@keyframes marquee {
  from {
    transform: translateX(var(--start, 0));
  }
  to {
    transform: translateX(var(--end, calc(-1 * var(--marquee-width))));
  }
}

/* cards */
.card-item {
  padding: 2.5vw 1.25vw;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--black);
}

.card-item__text {
  max-width: 69.429%;
}

.card-item__desc {
  margin-top: 1.563vw;
}

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

  .card-item__desc {
    margin-top: 3.906vw;
  }
}

@media (max-width: 767px) {
  .card-item {
    padding: 4.267vw;
    flex-direction: column;
  }

  .card-item__text {
    max-width: unset;
    margin-top: 6.4vw;
  }

  .card-item__desc {
    margin-top: 2.133vw;
  }
}

.card-glass {
  background-color: #FAFAFA;
  border: 1px solid #EEEEEE;
  box-shadow: 2px 4px 6px 0px #33363C14 inset;
  color: var(--black);

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

.card-bonus {
  background-color: #DEFCB2;
  border-radius: var(--card-radius-12);
  padding: .625vw 1.25vw;
}

.card-bonus__desc {
  margin-top: .208vw;
}

@media (max-width: 1280px) {
  .card-bonus {
    padding: 1.563vw;
  }

  .card-bonus__desc {
    margin-top: .521vw;
  }
}

@media (max-width: 767px) {
  .card-bonus {
    padding: 3.2vw 6.4vw;
  }

  .card-bonus__desc {
    margin-top: 1.067vw;
  }
}

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

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

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

/* component sections
---------------------*/
/* companies marquee banner */
.companies {
  padding: 8.333vw 0;

  .marquee__track {
    --marquee-width: 106.458vw;
  }
}

.companies__card {
  width: 13.333vw;
  height: 8.333vw;
  border-radius: var(--card-radius-24);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.875vw;
}

.companies__logo-img {
  width: 10.833vw;
  height: auto;
}

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

    .marquee__track {
      --marquee-width: 240.625vw;
    }
  }

  .companies__card {
    width: 31.25vw;
    height: 14.583vw;
    margin-right: 3.125vw;
  }

  .companies__logo-img {
    width: 27.083vw;
  }
}

@media (max-width: 767px) {
  .companies {
    padding: 17.067vw 0;

    .marquee__track {
      --marquee-width: 300.533vw;
    }
  }

  .companies__card {
    width: 38.667vw;
    height: 26.667vw;
    margin-right: 3.2vw;
  }

  .companies__logo-img {
    width: 30.133vw;
  }
}

/* case studies folders */
.case-studies-list {
  margin-top: 14.43vw;
  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;
        }
      }
    }
  }
}

.case-studies-list__folder-top {
  min-width: 39.245vw;
  position: absolute;
  padding: 0 7vw;
  height: 3.6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25vw;
  bottom: calc(100% - .21vw);
  left: 2.81vw;
  cursor: pointer;
  order: 2;
  background: center bottom/100% 100% url("../../assets/img/services/ror/folder-top.png") no-repeat;

  &:hover {
    background-image: url("../../assets/img/services/ror/folder-top-hover.png");
  }

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

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

.case-studies__link {
  margin-top: 3.33vw;
}

.case-studies-list__item {
  display: grid;
  grid-template-columns: 29.167vw 1fr;
  grid-template-rows: max-content 1fr auto;
  grid-column-gap: 9.531vw;
  border: 1px solid var(--black);
  padding: 4.58vw 3.33vw 4.09vw;
  border-radius: 2.4vw;
  position: absolute;
  height: 43.44vw;
  bottom: 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.32vw;
    }
  }

  &:nth-child(3) {
    transform: translateY(-5.78vw);
    z-index: 2;
    .case-studies-list__folder-top {
      left: 5.63vw;
    }
  }

  &:nth-child(4) {
    transform: translateY(-7.5vw);
    z-index: 1;
    .case-studies-list__folder-top {
      left: 41.59vw;
    }
  }
}

.case-studies-list__cover {
  width: 100%;
  grid-column: 2/3;
  grid-row: 1/3;
}

.case-studies-list__desc {
  grid-column: 1/2;
  grid-row: 2/3;
  margin-top: 2.08vw;
}

.deliverables__link {
  grid-column: 1/2;
  grid-row: 3/4;
  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;
  }
}

.deliverables {
  grid-column: 2/3;
  grid-row: 3/4;
  margin-top: 2.34vw;
  position: relative;
  padding-right: 13.75vw;
}

.deliverables__list {
  margin-top: .94vw;
}

.deliverables__img {
  width: 12.50vw;
  position: absolute;
  right: 0;
  top: 0;
}

.deliverables__item {
  padding-left: 1.25vw;
  position: relative;

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

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

  }

  .case-studies-list__item {
    grid-template-columns: 42.71vw 1fr;
    grid-template-rows: auto max-content auto;
    grid-column-gap: 4.17vw;
    border: 1px solid var(--black);
    padding: 5.34vw 3.91vw 7.55vw;
    border-radius: 2.08vw;
    height: 62.44vw;

    &:nth-child(1) {
      .case-studies-list__folder-top {
        left: 10.42vw;
      }
    }

    &:nth-child(2) {
      .case-studies-list__folder-top {
        left: 45.7vw;
      }
    }

    &:nth-child(3) {
      .case-studies-list__folder-top {
        left: 3.13vw;
      }
    }

    &:nth-child(4) {
      .case-studies-list__folder-top {
        left: 44.14vw;
      }
    }
  }

  .case-studies-list__desc {
    height: max-content;
  }

  .case-studies-list__folder-top {
    font-size: 1.56vw;

    > i {
      font-size: 1.56vw;
    }
  }

  .deliverables {
    padding-right: 0;
    margin-top: 2.083vw;
  }

  .deliverables__list {
    margin-top: 8px;
  }

  .deliverables__item {
    padding-left: 10px;
    position: relative;

    &::before {
      content: "";
      width: 3px;
      height: 3px;
      position: absolute;
      top: 50%;
      left: 1px;
      transform: translateY(-50%);
      background: var(--black);
      border-radius: 50%;
    }
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

  .case-studies-list__item {
    display: flex;
    flex-direction: column;
    gap: 5.33vw;
    padding: 5.33vw 6.13vw 19.2vw 5.33vw;
    border-radius: 4.27vw;
    height: 206.13vw;
    transition: .3s ease-in-out;

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

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

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

    > * {
      margin: 0;
    }

    &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
      .case-studies-list__folder-top {
        width: 77.07vw;
        left: 50%;
        transform: translateX(-50%);
        font-size: 3.2vw;
        height: 9.33vw;
        gap: 8px;
        background: center calc(100% + 4px)/100% 100% url("../../assets/img/services/ror/folder-top-mobile.png") no-repeat;

        > i {
          font-size: 3.2vw;
        }

        &::after {
          flex-grow: .53;
        }
      }
    }
  }

  .case-studies__link {
    width: max-content;
    padding: 5.33vw 6.4vw 5.33vw 8.53vw;
    margin-top: 9.6vw;
  }

  .case-studies-list__cover {
    order: -1;
  }
}

/* stages */
.stages__item {
  display: grid;
  grid-template-columns: 37.29vw 1fr;
  align-items: flex-start;
  padding: 3.33vw 2.08vw 3.33vw 0;
  border-top: 1px solid var(--black);
}

.stages__wrap {
  display: grid;
  grid-template-columns: max-content 10.52vw 23.1vw;
  align-items: center;

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

.stages__content {
  padding-left: 4.58vw;
}

.stages__num {
  padding-left: 1.25vw;
}

.stages__tag-list {
  margin-top: 1.563vw;

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: .833vw;
    margin-top: .833vw;
  }
}

@media (max-width: 1280px) {
  .stages__item {
    grid-template-columns: 1fr;
    gap: 3.13vw;
    padding: 4.69vw 0;
  }

  .stages__content {
    padding-left: 0;
  }

  .stages__wrap {
    grid-template-columns: repeat(2, auto) 1fr;

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

  .stages__num {
    padding-left: 1.56vw;
  }

  .stages__title {
    margin-left: 4.17vw;
  }

  .stages__tag-list {
    margin-top: 2.604vw;

    ul {
      gap: 2.083vw;
      margin-top: 2.083vw;
    }
  }
}

@media (max-width: 767px) {
  .stages__item {
    gap: 3.2vw;
    padding: 6.4vw 0 9.6vw;
  }

  .stages__wrap {
    grid-template-columns: 9.6vw 1fr [end];

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

  .stages__title {
    grid-column: 1/end;
    margin: 6.4vw 0 0;
  }

  .stages__tag-list {
    margin-top: 4.267vw;

    ul {
      gap: 3.2vw;
      margin-top: 3.2vw;
    }
  }

  .stages__num {
    padding-left: 3.2vw;
  }
}

/* section-timeline */
.section-timeline {
  margin-top: 6.25vw;
  display: grid;
  grid-template-columns: 2.08vw 1fr;
  grid-column-gap: 1.56vw;
}

.section-timeline__animation-wrap {
  width: 2px;
  height: 100%;
  background: linear-gradient(0deg,rgba(142, 146, 150, 0) 0%, rgba(142, 146, 150, 1) 50%, rgba(142, 146, 150, 0) 100%);
  position: relative;
}

.section-timeline__animation-bounce {
  content: "";
  width: 1.771vw;
  height: 1.771vw;
  display: block;
  position: sticky;
  margin: 7.92vw 0 -1px;
  top: 26.04vw;
  background: center/cover url("../../assets/img/bounce.avif") no-repeat;
  transform: translateX(calc(-50% + 2px));
  z-index: 2;
}

.section-timeline__animation-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 9vw;
  width: 100%;
  background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.section-timeline__item {
  display: grid;
  grid-template-columns: 31.198vw auto;
  align-items: center;
  grid-column-gap: 7.135vw;

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

.section-timeline__img {
  width: 31.302vw;
}

.section-timeline__item-title + .section-timeline__item-desc {
  margin-top: .521vw;
}

@media (max-width: 1280px) {
  .section-timeline {
    margin-top: 10.42vw;
    grid-template-columns: 5.21vw 1fr;
    grid-column-gap: 2.6vw;
  }

  .section-timeline__animation-wrap {
    left: 2.6vw;
  }

  .section-timeline__item {
    grid-template-columns: 1fr 46.745vw;
    padding-right: 0;
    grid-gap: 3.13vw;
  }

  .section-timeline__img {
    width: 46.745vw;
  }

  .section-timeline__item-title + .section-timeline__item-desc {
    margin-top: 1.302vw;
  }
}

@media (max-width: 767px) {
  .section-timeline {
    margin-top: 15.467vw;
    grid-template-columns: 1fr;
    grid-column-gap: 0;
  }

  .section-timeline__item {
    display: flex;
    flex-direction: column-reverse;
    gap: 6.4vw;

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

  .section-timeline__img {
    width: 100%;
  }

  .section-timeline__item-title + .section-timeline__item-desc {
    margin-top: 2.667vw;
  }

  .section-timeline__animation-wrap {
    display: none;
  }
}

/* technologies */
.technologies {
  a {
    display: inline-block;
    font: inherit;
    color: inherit;
  }
}

.technologies__title {
  width: 33.958vw;
}

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

.technologies__card {
  padding: 2.5vw 1.875vw;
  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__title {
    width: 100%;
  }

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

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

  .technologies__list {
    margin-top: 2.083vw;
  }

  .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: 138.133vw;
  }

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

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

/* hero section */
.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__subtitle {
  margin-top: 1.25vw;
}

.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;
  aspect-ratio: 1223/599;
  position: absolute;
  bottom: 0;
  right: 0;
}

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

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

  .contact-banner__subtitle {
    margin-top: 2.083vw;
  }

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

  .contact-banner__img {
    aspect-ratio: 599/362;
  }
}

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

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

  .contact-banner__subtitle {
    margin-top: 2.133vw;
  }

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

  .contact-banner__img {
    width: 100%;
    height: auto;
    aspect-ratio: 375/452;
    top: 0;
  }
}

/* additional sections
----------------------*/
.preview {
  padding: 0 7.292vw 0 4.74vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background-image: url('../../assets/img/services/react-native/preview-bg.avif');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 100%;
}

.preview__content-wrap {
  max-width: 52.24vw;
  padding: 8.333vw 0;
}

.preview__subtitle {
  margin-top: 2.083vw;
}

.preview__button-container {
  margin-top: 3.75vw;
  display: flex;
  gap: 1.25vw;
}

.preview__img {
  width: 26.042vw;
  aspect-ratio: 250/381;
}

@media (min-width: 1281px) {
  .reviews, .hire, .industries {
    padding-left: 15.467vw;
  }

  .choice, .reviews, .case-studies, .why-us, .hire, .technologies, .contact-banner {
    margin-top: 4.167vw;
  }
}

@media (min-width: 768px) {
  #process {
    overflow: visible;
  }

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

.choice {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  overflow: visible;
  height: max-content;
}

.choice__title-container {
  max-width: 34.844vw;
  position: sticky;
  top: calc(max(var(--header-height), 80px) + 4.167vw);
  margin-bottom: 2.5vw;
}

.choice__subtitle {
  margin-top: 1.875vw;
}

.choice__content {
  max-width: 38.333vw;
  margin-right: 6.771vw;
}

.services__title {
  max-width: 33.906vw;
}

.services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.563vw;
}

.services__card {
  height: max-content;
  border-radius: var(--card-radius-24);
  padding: 2.5vw 1.875vw;
}

.services__card-desc, .services__card-bonus {
  margin-top: .625vw;
}

.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%;
}

.case-studies__title {
  max-width: 34.896vw;
}

.why-us {
  padding: 8.333vw 1.25vw 8.333vw 15.156vw;
  display: grid;
  grid-template-columns: 34.323vw auto;
  grid-gap: 3.333vw 7.5vw;
}

.why-us__title {
  width: 38.333vw;
  grid-column: span 2;
}

.why-us__img {
  width: 100%;
  aspect-ratio: 659/452;
}

.why-us__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.083vw;
}

.why-us__list-item {
  display: flex;
  align-items: flex-end;
  gap: .625vw;
}

.hire__title-container {
  display: flex;
  align-items: center;
  gap: 6.927vw;
}

.hire__subtitle {
  margin-top: 1.979vw;
}

.hire__img {
  width: 41.823vw;
  aspect-ratio: 803/560;
}

.how-we-work {
  padding: 8.333vw 1.25vw 8.333vw 15.156vw;
}

.how-we-work__subtitle {
  max-width: 40.625vw;
  margin-top: 3.333vw;
}

.how-we-work__content {
  margin-top: 6.25vw;
}

.industries__marquee-wrap {
  position: relative;

  &::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 9.61%, rgba(255, 255, 255, 0) 87.09%, #FFFFFF 100%);

  }
}

.industries__list {
  --marquee-width: 137.552vw;

  ul {
    display: flex;
    gap: 1.875vw;
  }

  & + .industries__list {
    margin-top: 1.875vw;
    --marquee-width: 128.49vw;
    --start: calc(-1 * var(--marquee-width));
    --end: 0;
  }
}

.industries__card {
  height: 5.625vw;
  padding: 0 2.031vw;
  display: flex;
  align-items: center;
  gap: 1.042vw;
  border-radius: var(--card-radius-32);
  border: 1px solid #BABABA;

  svg {
    width: 2.5vw;
    height: auto;
  }
}

@media (max-width: 1280px) {
  .services__title, .case-studies__title {
    max-width: unset;
  }

  .preview {
    padding: 0 6.901vw 0 24px;
    background-image: url('../../assets/img/services/react-native/preview-bg-tablet.avif');
  }

  .preview__content-wrap {
    max-width: 50vw;
    padding: 6.25vw 0;
  }

  .preview__button-container {
    margin-top: 4.688vw;
    gap: 2.083vw;
  }

  .preview__img {
    width: 24.87vw;
    aspect-ratio: 191/368;
  }

  .choice {
    flex-direction: column;
    gap: 6.25vw
  }

  .choice__title-container {
    max-width: unset;
    position: static;
  }

  .choice__subtitle {
    margin-top: 3.125vw;
  }

  .choice__content {
    max-width: unset;
    margin-right: 0;
  }

  .services__list {
    grid-gap: 2.604vw;
  }

  .services__card {
    padding: 4.688vw 3.125vw;
  }

  .services__card-desc, .services__card-bonus {
    margin-top: 1.563vw;
  }

  .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;
  }

  .why-us {
    padding: 7.552vw 24px;
    grid-template-columns: 32.813vw auto;
    grid-gap: 6.25vw;
  }

  .why-us__title {
    width: auto;
  }

  .why-us__img {
    aspect-ratio: 42/41;
  }

  .why-us__list {
    gap: 3.125vw;
  }

  .why-us__list-item {
    gap: 1.042vw;
  }

  .hire__title-container {
    gap: 6.25vw;
  }

  .hire__subtitle {
    max-width: 46.875vw;
    margin-top: 4.167vw;
  }

  .hire__img {
    width: 32.813vw;
    aspect-ratio: 42/37;
  }

  .how-we-work {
    padding: 7.552vw 24px;
  }

  .how-we-work__subtitle {
    max-width: 62.5vw;
    margin-top: 3.125vw;
  }

  .how-we-work__content {
    margin-top: 10.417vw;
  }

  .industries__list {
    --marquee-width: 260.417vw;

    ul {
      gap: 3.125vw;
    }

    & + .industries__list {
      margin-top: 3.125vw;
      --marquee-width: 243.229vw;
    }
  }

  .industries__card {
    height: 8.854vw;
    padding: 0 3.776vw;
    gap: 2.604vw;

    svg {
      width: 4.688vw;
    }
  }
}

@media (max-width: 767px) {
  .preview {
    padding: 0 16px;
    flex-direction: column;
    align-items: center;
    background-image: url('../../assets/img/services/react-native/preview-bg-mob.avif');
  }

  .preview__content-wrap {
    max-width: unset;
    padding: 12.8vw 0;
  }

  .preview__button-container {
    flex-direction: column;
    justify-content: stretch;
    margin-top: 6.4vw;
    gap: 4.267vw;

    .btn {
      width: 100%;
    }
  }

  .preview__img {
    width: 57.867vw;
    aspect-ratio: 87/130;
  }

  .choice {
    gap: 9.6vw
  }

  .choice__subtitle {
    margin-top: 6.4vw;
  }

  .services__list {
    grid-template-columns: 1fr;
    grid-gap: 4.267vw;
  }

  .services__card {
    padding: 12.8vw 9.6vw;
  }

  .services__card-desc, .services__card-bonus {
    margin-top: 3.2vw;
  }

  .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;
  }

  .why-us {
    padding: 12.8vw 16px;
    grid-template-columns: 1fr;
    grid-gap: 9.6vw;
  }

  .why-us__title {
    grid-column: auto;
  }

  .why-us__img {
    aspect-ratio: 343/246;
  }

  .why-us__list {
    gap: 6.4vw;
  }

  .why-us__list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.133vw;
  }

  .hire__title-container {
    flex-direction: column;
    gap: 6.4vw;
  }

  .hire__subtitle {
    max-width: unset;
    margin-top: 4.267vw;
  }

  .hire__img {
    width: 100%;
    aspect-ratio: 343/246;
  }

  .how-we-work {
    padding: 15.467vw 16px;
  }

  .how-we-work__subtitle {
    max-width: unset;
    margin-top: 8.533vw;
  }

  .how-we-work__content {
    margin-top: 15.467vw;
  }

  .industries__list {
    --marquee-width: 494.933vw;

    ul {
      gap: 6.4vw;
    }

    & + .industries__list {
      margin-top: 6.4vw;
      --marquee-width: 464vw;
    }
  }

  .industries__card {
    height: 18.133vw;
    padding: 0 6.4vw;
    gap: 4.267vw;

    svg {
      width: 9.6vw;
    }
  }
}