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

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

.tag--sm {
  padding: .313vw .625vw;
  font: 400 .729vw / 1.35 var(--font);
}

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

  .tag--sm {
    padding: .781vw 1.563vw;
    font-size: 1.563vw;
  }
}

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

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

/* 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-light-grey {
  background-color: #F6F6F6;
  color: var(--black);
}

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

.card-border {
  border: 1px solid;
}

.card-border--black {
  background: var(--white);
  border-color: var(--black);
  color: var(--black);
}

.card-expand {
  cursor: pointer;
}

.card-expand__toggle-btn svg {
  transition: transform var(--normal);
}

.card-expand__details {
  height: 0;
  overflow: hidden;
  transition: height var(--normal), margin var(--normal);
}

.card-expand.expanded {
  .card-expand__toggle-btn svg {
    transform: rotate(180deg);
  }

  .card-expand__details {
    height: auto;
  }
}

@media (max-width: 1280px) {
  .card-expand.expanded {
    .card-expand__details {
      margin-top: 2.604vw;
    }
  }
}

@media (max-width: 767px) {
  .card-expand.expanded .card-expand__details {
    margin-top: 5.333vw;
  }
}

.card-link:hover {
  .card-link__text {
    background-size: 0 2px, 100% 2px;
  }
}

.card-link__text {
  display: inline;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0));
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s;
}

/* 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;
  }
}

/* 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;
  }
}

/* team slider */
.team-slider {
  grid-column: 1/end;
  width: 100%;
}

.team-slider__btn-container {
  display: flex;
  justify-content: flex-end;
  gap: 1.25vw;
}

.team-slider__prev, .team-slider__next {
  svg, &:hover svg {
    transform: none;
  }
}

.team-slider__list {
  display: flex;
  align-items: flex-start;
  margin-top: 2.344vw;
}

.team-cv__item {
  display: flex;
  align-items: center;
}

.team-cv__img-wrap {
  position: relative;
}

.team-cv__img {
  width: 17.448vw;
  height: auto;
}

.team-cv__open-btn {
  cursor: pointer;
  width: 1.563vw;
  width: 2.5vw;
  height: 2.5vw;
  border: 1px solid var(--black);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  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/icons/plus.svg") no-repeat;
    z-index: 3;
  }

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

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

.team-cv__content {
  width: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.042vw;
  transition: width var(--normal);

  &.active {
    width: 27.865vw;
  }

  * {
    width: 24.74vw;
    margin: 0 auto;
  }
}

.team-cv__content-item {
  display: flex;
  flex-direction: column;
  gap: .417vw;
}

.team-slider {
  margin-top: 2.5vw;
}

.team-slider__list {
  margin-top: 2.083vw;
}

@media (max-width: 1280px) {
  .team-cv__img {
    width: 29.818vw;
  }

  .team-cv__open-btn {
    width: 3.906vw;
    height: 3.906vw;
  }

  .team-cv__content {
    &.active {
      width: 48.307vw;
    }

    * {
      width: 44.14vw;
    }
  }

  .team-cv__content-item {
    gap: .521vw;
  }

  .team-slider {
    margin-top: 6.25vw;
  }

  .team-slider__btn-container {
    gap: 3.125vw;
  }

  .team-slider__list {
    margin-top: 3.125vw;
  }
}

@media (max-width: 767px) {
  .team-cv__item {
    flex-direction: column;
  }

  .team-cv__img {
    width: calc(100vw - 32px);
  }

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

  .team-cv__content {
    gap: 2.133vw;
    width: 100%;
    height: 0;
    margin: 0;
    transition: height var(--normal), margin var(--normal);

    &.active {
      width: 100%;
      height: auto;
      margin-top: 6.4vw;
    }

    * {
      width: 100%;
    }
  }

  .team-cv__content-item {
    gap: 2.133vw;
  }

  .team-slider {
    margin-top: 9.6vw;
  }

  .team-slider__btn-container {
    justify-content: center;
    gap: 6.4vw;
  }

  .team-slider__list {
    margin-top: 6.4vw;
  }
}

/* case-studies */
.our-work {
  padding-left: 0;
  padding-right: 0;
}

.our-work__title {
  margin-left: 10.156vw;
}

.our-work__case-cards-container {
  overflow: hidden;
  position: relative;
  padding: 26.25vw 0;

  &::before, &::after {
    content: "";
    position: absolute;
    left: 0;
    width: 706.667vw; /* image-width * 2 */
    height: 27.292vw; /* image-height */
    background-size: auto 100%;
    will-change: transform;
  }

  &::before {
    top: 0;
    background-image: url("../../assets/img/case-section-marquee/our-work-1.webp");
    animation: bg-shift-left 30s linear infinite;
  }

  &::after {
    bottom: 0;
    background-image: url("../../assets/img/case-section-marquee/our-work-2.webp");
    animation: bg-shift-right 30s linear infinite;
  }
}

@keyframes bg-shift-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-353.333vw); /* image-width */
  }
}

@keyframes bg-shift-right {
  0% {
    transform: translateX(-353.333vw); /* image-width */
  }
  100% {
    transform: translateX(0);
  }
}

.our-work__btn {
  background-color: var(--white);
  margin: 0 auto;
  z-index: 2;
}

@media (max-width: 1920px){
  .our-work__case-cards-container {
    &::before {
      background-image: url("../../assets/img/case-section-marquee/our-work-1-desktop.webp");
    }

    &::after {
      background-image: url("../../assets/img/case-section-marquee/our-work-2-desktop.webp");
    };
  }
}

@media (max-width: 1280px) {
  .our-work__title {
    margin-left: 24px;
  }

  .our-work__case-cards-container {
    padding: 32.161vw 0;

    &::before, &::after {
      width: 883.333vw; /* image-width * 2 */
      height: 34.115vw; /* image-height */
    }

    &::before {
      background-image: url("../../assets/img/case-section-marquee/our-work-1-tablet.webp");
    }

    &::after {
      background-image: url("../../assets/img/case-section-marquee/our-work-2-tablet.webp");
    }
  }

  @keyframes bg-shift-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-441.667vw); /* image-width */
    }
  }

  @keyframes bg-shift-right {
    0% {
      transform: translateX(-441.667vw); /* image-width */
    }
    100% {
      transform: translateX(0);
    }
  }
}

@media (max-width: 767px) {
  .our-work__case-cards-container {
    padding: 47.467vw 0;

    &::before, &::after {
      width: 1348.267vw; /* image-width * 2 */
      height: 52.533vw; /* image-height */
    }

    &::before {
      background-image: url("../../assets/img/case-section-marquee/our-work-1-mob.webp");
    }

    &::after {
      background-image: url("../../assets/img/case-section-marquee/our-work-2-mob.webp");
    }
  }

  @keyframes bg-shift-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-674.133vw); /* image-width */
    }
  }

  @keyframes bg-shift-right {
    0% {
      transform: translateX(-674.133vw); /* image-width */
    }
    100% {
      transform: translateX(0);
    }
  }
}

/* reviews */
.testimonials__cards-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.667vw 1.667vw;
}

.testimonials__card {
  height: max-content;
  padding: 2.083vw 3.333vw;
  border-radius: var(--card-radius-32);
  display: flex;
  flex-direction: column;
  gap: 1.667vw;
}

.testimonials__card-icon {
  width: 3.125vw;
  height: 3.125vw;
  background: url("../../assets/img/icons/quote-green.svg") center center / contain no-repeat;
}

.testimonials__author {
  display: flex;
  align-items: center;
  gap: .833vw
}

.testimonials__photo {
  flex-shrink: 0;
  width: 2.5vw;
  height: auto;
}

@media (min-width: 768px) {
  .testimonials__btn-container {
    display: none;
  }
}

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

  .testimonials__card {
    padding: 4.167vw;
    gap: 3.125vw;
  }

  .testimonials__card-icon {
    width: 5.208vw;
    height: 5.208vw;
  }

  .testimonials__author {
    gap: 2.083vw
  }

  .testimonials__photo {
    width: 5.208vw;
  }
}

@media (max-width: 767px) {
  .testimonials__cards-container {
    display: flex;
    gap: 0;
  }

  .testimonials__card {
    width: 100%;
    flex-shrink: 0;
    padding: 8vw 10.667vw;
    gap: 4.267vw;
  }

  .testimonials__card-icon {
    width: 10.667vw;
    height: 10.667vw;
  }

  .testimonials__author {
    gap: 4.267vw
  }

  .testimonials__photo {
    width: 8.533vw;
  }

  .testimonials__btn-container {
    display: flex;
    justify-content: center;
    gap: 6.4vw;
    margin-top: 6.4vw;
  }
}

.table-grid {
  position: relative;
  display: grid;
  grid-template-columns: 20.684% 26.231% 26.231% 26.854%;
  grid-template-rows: repeat(7, 3.958vw);
  background: linear-gradient(to bottom, #252525 0, #252525 3.958vw, #333333 3.958vw, #333333 100%);
  border-radius: var(--card-radius-24);
  overflow: hidden;
}

.table-grid__cell {
  border-bottom: 1px solid #252525;

  &:nth-of-type(4n) {
    color: var(--black);
  }

  &:nth-last-of-type(-n+5) {
    border: 0;
  }
}

.table-grid__header, .table-grid__cell {
  z-index: 2;
  padding: 0 1.875vw;
  display: flex;
  align-items: center;

  &:nth-of-type(4n) {
    background: none;
    padding-left: 2.5vw;
  }
}

.table-grid__highlight-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 26.854%;
  height: 100%;
  border-radius: var(--card-radius-24);
  background: linear-gradient(180.04deg, #00D96E 0.04%, #3DF5FF 99.96%);

  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 3.958vw;
    background-color: #252525;
    box-shadow: 0px 0px 22px 0px #FBF8E480 inset;
    border-radius: var(--card-radius-24) var(--card-radius-24) 0 0;
  }
}

@media (max-width: 1280px) {
  .table-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, 9.896vw);
    background: linear-gradient(to bottom, #252525 0, #252525 9.896vw, #333333 9.896vw, #333333 100%);
  }

  .table-grid__header, .table-grid__cell {
    padding: 0 2.083vw;

    &:nth-of-type(4n) {
      padding: 0 3.125vw;
    }
  }

  .table-grid__highlight-bg {
    width: 25%;

    &:after {
      height: 9.896vw;
    }
  }
}

@media (max-width: 767px) {
  .table-grid {
    width: max-content;
    grid-template-columns: repeat(4, 45.733vw);
    grid-template-rows: repeat(7, 20.267vw);
    background: linear-gradient(to bottom, #252525 0, #252525 20.267vw, #333333 20.267vw, #333333 100%);
  }

  .table-grid__header, .table-grid__cell {
    padding: 0 4.267vw;

    &:nth-of-type(4n) {
      padding: 0 6.4vw;
    }
  }

  .table-grid__highlight-bg {
    &:after {
      height: 20.267vw;
    }
  }
}

/* knowledgebase */
.blog-articles__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875vw;
}

.blog-articles__card {
  flex-grow: 1;
  border-radius: var(--card-radius-24);
}

.blog-articles__img {
  display: block;
  width: 100%;
  height: 15.104vw;
  object-fit: cover;
  border-radius: var(--card-radius-24);
  background-color: var(--green);
}

.blog-articles__info {
  padding: 1.25vw 1.25vw 1.875vw;
}

.blog-articles__date {
  color: #777777;
}

.blog-articles__title {
  margin-top: .833vw;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 1px;
}

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

  .blog-articles__img {
    height: 26.042vw;
  }

  .blog-articles__info {
    padding: 3.125vw 2.083vw;
  }

  .blog-articles__title {
    margin-top: 1.042vw;
  }
}

@media (max-width: 767px) {
  .blog-articles__content {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 6.4vw;
  }

  .blog-articles__img {
    height: 53.333vw;
  }

  .blog-articles__info {
    padding: 4.267vw 4.267vw 6.4vw;
  }

  .blog-articles__title {
    margin-top: 2.133vw;
  }
}

/* additional sections
----------------------*/
.preview {
  padding: 5vw 4.74vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 45vw;
  justify-content: center;
  align-content: space-between;
}

.preview__title, .preview__subtitle, .preview__button-container {
  max-width: 52.24vw;
}

.preview__subtitle {
  margin-top: 2.083vw;
}

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

.preview__img {
  width: 31.354vw;
  aspect-ratio: 43/48;
}

.why-us__title {
  max-width: 45.26vw;
}

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.25vw;
}

.why-us__card {
  display: flex;
  flex-direction: column;
  gap: 1.563vw;
  padding: 2.819vw 3.542vw 2.5vw;
  border-radius: var(--card-radius-24);

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

.clutch__badges {
  display: flex;
  justify-content: space-between;
  padding-right: 1.719vw;
}

.clutch__badge {
  height: 13.646vw;
  width: auto;
}

.clutch__text {
  margin-top: 3.333vw;
  display: grid;
  grid-template-columns: 27.865vw 20.885vw;
  gap: 13.958vw;
  font: var(--paragraph-lg);
}

.hire__title {
  max-width: 38.333vw;
}

.hire__content {
  display: flex;
  gap: 3.333vw;
}

.hire__img {
  flex-shrink: 0;
  width: 38.333vw;
  height: 33.333vw;
  position: relative;
  border-radius: var(--card-radius-32);
  overflow: hidden;

  picture {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--normal);
  }

  picture.active {
    opacity: 1;
    pointer-events: auto;
  }

  picture, img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

.hire__cards-container {
  display: flex;
  flex-direction: column;
  gap: 1.25vw;
}

.hire__card {
  min-height: 7.917vw;
  padding: 2.031vw 2.031vw 0;
  border-radius: var(--card-radius-32);
  overflow: hidden;
  transition: border-color var(--normal), background-color var(--normal);

  &.expanded {
    flex-grow: 1;
    border-color: #F6F6F6;
    background-color: #F6F6F6;

    .hire__card-details {
      flex-grow: 1;
      height: auto;
      margin-top: 1.25vw;
    }

    .hire__card-btn {
      top: 0;
      transform: translateY(0);

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

.hire__card-details {
  height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: height var(--normal), margin var(--normal);
}

.hire__card-title {
  position: relative;
  padding-right: 2.5vw;
  min-height: 2.5vw;
  display: flex;
  align-items: center;
}

.hire__card-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: top var(--normal), transform var(--normal);
  width: 2.5vw;
  height: 2.5vw;
  cursor: pointer;

  &::after {
    content: "";
    width: 1.042vw;
    height: 1.042vw;
    background: url("../../assets/img/icons/plus.svg") center/contain no-repeat;
    z-index: 3;
  }
}

.services {
  padding: 8.333vw 1.25vw 8.333vw 15.156vw;
}

.services__title {
  max-width: 41.823vw;
}

.services__content {
  margin-top: 6.25vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 21.354vw);
  gap: 1.563vw;

  span:first-child {
    margin-bottom: auto;
  }
}

.services__card {
  display: flex;
  flex-direction: column;
  gap: .833vw;
  padding: 2.5vw;
  border-radius: var(--card-radius-32);

  &:last-child {
    grid-column: span 2;
  }

  &:hover {
    animation: pulse .8s ease-in-out;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.services__img {
  width: 100%;
  height: 100%;

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

.services-slider__btn-container {
  display: none;
}

.hiring-models {
  padding: 8.333vw 1.25vw 12.5vw 15.156vw;
}

.hiring-models__title {
  max-width: 38.333vw;
}

.industries__title-container {
  display: grid;
  grid-template-columns: 41.823vw 38.281vw;
  align-items: flex-end;
}

.industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 23.438vw);
  gap: .938vw .938vw;
}

.industries__card {
  border-radius: var(--card-radius-24);
  padding: 2.083vw;
  display: flex;
  flex-direction: column;
  gap: .833vw;
}

@media (min-width: 768px) {
  .industries__card {
    cursor: default;
  }

  .industries__toggle-btn {
    display: none;
  }

  .industries__tags {
    height: auto;
  }
}

.industries__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .417vw;
  margin-top: auto;
}

.industries__banner {
  grid-column: span 2;
  padding: 1.875vw;
  color: var(--white);
  background: url("../../assets/img/services/hire-ror-dev/industries.webp") center center / cover no-repeat;
  border-radius: var(--card-radius-24);
}

@media (max-width: 1280px) {
  .preview {
    padding: 4.688vw 24px 3.776vw;
    display: grid;
    grid-template-columns: auto 31.51vw;
    gap: 4.688vw 7.318vw;
    height: auto;
    align-items: center;
  }

  .preview__title {
    grid-column: span 2;
    max-width: 78.125vw
  }

  .preview__subtitle {
    margin-top: 0;
  }

  .preview__subtitle, .preview__button-container {
    max-width: unset;
  }

  .preview__button-container {
    margin-top: 6.25vw;
  }

  .preview__img {
    width: 100%;
    margin-top: 0;
    max-width: unset;
    aspect-ratio: 242/320;
  }

  .why-us__title, .hire__title, .services__title, .hiring-models__title {
    max-width: unset;
  }

  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2.604vw;
  }

  .why-us__card {
    padding: 3.125vw;
    gap: 2.083vw;

    svg {
      width: 6.25vw;
    }
  }

  .clutch__badges {
    padding-right: 0;
  }

  .clutch__badge {
    height: 15.625vw;
  }

  .clutch__text {
    grid-template-columns: 36.458vw 46.875vw;
    gap: 10.417vw;
    margin-top: 7.552vw;
    font: 400 1.563vw/1.35 var(--font);
  }

  .hire__content {
    flex-direction: column;
  }

  .hire__img {
    width: 100%;
    height: 45.573vw;
  }

  .hire__cards-container {
    gap: 3.125vw;
  }

  .hire__card {
    padding: 3.776vw;
    min-height: unset;

    &.expanded {
      .hire__card-details {
        margin-top: 2.083vw;
      }
    }
  }

  .hire__card-title {
    padding-right: 6.25vw;
    min-height: 6.25vw;
  }

  .hire__card-btn {
    width: 6.25vw;
    height: 6.25vw;

    &::after {
      width: 2.604vw;
      height: 2.604vw;
    }
  }

  .services {
    padding: 7.552vw 24px;
  }

  .services__content {
    display: flex;
    gap: 0;
    margin-top: 4.688vw;
  }

  .services__card {
    height: max-content;
    padding: 4.688vw;
    gap: 2.083vw;

    span:first-child {
      margin-bottom: 6.25vw;
    }
  }

  .services__card, .services__img {
    width: 42.969vw;
    flex-shrink: 0;
  }

  .services__img:nth-of-type(2), .services__img:nth-of-type(2) ~ .services__card {
    order: 3;
  }

  .services__img:nth-of-type(2) + .services__card {
    order: 2;
  }

  .services-slider__btn-container {
    display: flex;
    gap: 3.125vw;
    margin-top: 6.25vw;
  }

  .hiring-models {
    padding: 7.552vw 24px;
  }

  .industries__title-container {
    display: flex;
    flex-direction: column;
  }

  .industries__subtitle {
    max-width: 46.875vw;
    margin: 2.083vw 0 0 auto;
  }

  .industries__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 42.708vw);
    gap: 2.083vw;
  }

  .industries__card {
    padding: 2.995vw;
  }

  .industries__banner {
    background-image: url("../../assets/img/services/hire-ror-dev/industries-tablet.webp");
    padding: 4.688vw;
  }
}

@media (max-width: 767px) {
  .preview {
    padding: 6.4vw 16px;
    grid-template-columns: 1fr;
    gap: 6.4vw;
  }

  .preview__title {
    grid-column: unset;
    max-width: unset;
  }

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

    .btn {
      width: 100%;
    }
  }

  .preview__img {
    width: 100%;
    grid-row: 2;
    aspect-ratio: 343/340;
    border-radius: 4.267vw;
    overflow: hidden;
  }

  .why-us__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 5.333vw;
  }

  .why-us__card {
    padding: 6.4vw;
    gap: 4.267vw;

    svg {
      width: 12.8vw;
    }
  }

  .clutch {
    padding-bottom: 0;
  }

  .clutch__badges {
    flex-wrap: wrap;
    gap: 4.267vw;
  }

  .clutch__badge {
    height: 30.667vw;
  }

  .clutch__text {
    grid-template-columns: 1fr;
    gap: 6.4vw;
    margin-top: 9.6vw;
    font-size: 3.2vw;

    p:first-child {
      max-width: 74.667vw;
    }
  }

  .hire__img {
    height: 61.6vw;
  }

  .hire__cards-container {
    gap: 6.4vw;
  }

  .hire__card {
    padding: 8vw;

    &.expanded {
      .hire__card-details {
        margin-top: 4.267vw;
      }
    }
  }

  .hire__card-title {
    padding-right: 19.2vw;
    min-height: 12.8vw;
  }

  .hire__card-btn {
    width: 12.8vw;
    height: 12.8vw;

    &::after {
      width: 5.333vw;
      height: 5.333vw;
    }
  }

  .services {
    padding: 12.8vw 16px;
  }

  .services__content {
    margin-top: 9.6vw;
  }

  .services__card {
    padding: 6.4vw;
    gap: 4.267vw;

    span:first-child {
      margin-bottom: 12.8vw;
    }
  }

  .services__card, .services__img {
    width: 82.667vw;
  }

  .services-slider__btn-container {
    justify-content: center;
    gap: 6.4vw;
    margin-top: 9.6vw;
  }

  .hiring-models {
    padding: 12.8vw 0;
  }

  .hiring-models__title {
    max-width: calc(100% - 32px);
    margin: 0 16px;
  }

  .hiring-models__table-container {
    overflow-x: scroll;
    padding-bottom: 9.6vw;
    transform: translateX(16px);
    margin-right: 16px;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--green) #BABABA;

    &::-webkit-scrollbar {
      height: 4px;
      background-color: #BABABA;
      border-radius: 999px;
    }

    &::-webkit-scrollbar-track {
      background-color: #BABABA;
      border-radius: 999px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--green);
      border-radius: 999px;
    }
  }

  .industries__subtitle {
    max-width: unset;
    margin: 4.267vw 0 0;
  }

  .industries__grid {
    display: flex;
    flex-direction: column;
    gap: 4.267vw;
  }

  .industries__card {
    padding: 6.4vw;
    gap: 0;

    &.expanded {
      .card-expand__details {
        height: auto;
        margin-top: 6.4vw;
      }
    }
  }

  .industries__card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .industries__toggle-btn {
    width: 8vw;
    height: 8vw;

    svg {
      stroke: var(--black);
      width: 4vw;
    }
  }

  .industries__tags {
    gap: 2.133vw;
  }

  .industries__banner {
    background-image: url("../../assets/img/services/hire-ror-dev/industries-mob.webp");
    padding: 9.6vw;
    height: 102.933vw;
  }
}

@media (min-width: 1281px) {
  .companies, .clutch, .testimonials {
    margin-top: 4.167vw;
  }

  .team__btn {
    margin-top: 2.5vw;
  }

  .blog-articles {
    padding: 8.333vw 1.25vw 8.333vw 0;
  }
}