@media only screen and (max-width: 1023px) and (min-width: 768px) {
  /* HEADER START */
  .header-mobile__wrapper {
    padding: 30px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* HEADER END */

  /* SLIDER START */
  .hero__wrapper {
    height: auto;
  }

  .hero__wrapper .swiper-slide {
    padding-bottom: 100px;
  }

  .hero-content__wrapper {
    width: 60vw;
    /* display: flex;
    flex-direction: column;
    justify-content: flex-start; */
    row-gap: 40px;
  }

 .hero-content__wrapper h1,
 .hero-content__wrapper h2,
 .hero-content__wrapper h3 {
    margin-left: 20px;
    margin-right: 10px;
    margin-bottom: 30px;
    max-width: 100%;
    font-size: min(6.5vw, 120px);
    line-height: 0.9em;
  }

  .hero-lines__wrapper {
    margin-left: 40px;
    order: 3;
    grid-column: span 2;
  }
  .hero-controls {
    grid-column: span 2;
    order: 2;
    margin-left: 40px;
  }

  .hero-lines__wrapper {
    margin-left: 20px;
    margin-right: auto;
    margin-bottom: 125px;
  }

  .hero-preview__wrapper {
    width: 40vw;
  }

  .hero__wrapper .placeholder {
    min-height: 400px;
  }

  .hero-start__button {
    padding-left: 10px;
    padding-right: 10px;
    width: calc(100vw - 30px);
    justify-content: center;
  }
  .hero-button__overlay {
    width: 100%;
  }

  .mySwiper .swiper-controls {
    margin-left: 20px;
    margin-right: 30px;
    bottom: 170px;
    right: 0;
    width: calc(60vw - 50px);
    justify-content: space-between;
  }

  .mySwiper .swiper-button-prev,
  .mySwiper .swiper-button-next {
    display: flex !important;
    flex-direction: column;
  }

  .mySwiper .swiper-button-prev {
    align-items: flex-start;
  }

  .mySwiper .swiper-button-next {
    align-items: flex-end;
  }

  /* SLIDER END */

  /* TEXT START */
  .text__wrapper {
    height: 400px;
  }

  /* TEXT END */

  /* WHAT DOING START */
  .what-doing__wrapper > div {
    padding: 100px 30px;
  }

  .what-doing-service__wrapper {
    justify-content: space-between;
  }

  .what-doing-service__wrapper span {
    padding-right: 0;
  }

  .what-doing__wrapper h2 {
    font-size: 12vw;
  }

  .what-doing-service__wrapper h3 {
    padding-right: 0;
    width: 300px;
    overflow-wrap: anywhere;
  }

  .what-doing-service__wrapper p {
    padding-right: 0;
    padding-left: 0;
    max-width: 370px;
  }

  .what-doing-service__wrapper ul {
    padding-left: 50px;
  }

  /* WHAT DOING END */

  /* PROJECTS START */
  .projects__wrapper > div {
    padding: 100px 30px;
  }

  .projects__wrapper h2 {
    font-size: 12vw;
  }

  .projects-row__wrapper {
    margin-top: 80px;
  }

  .projects-case__wrapper:nth-child(2) > div,
  .projects-case__wrapper:nth-child(3) > div,
  .projects-case__wrapper:nth-child(4) > div {
    width: 70%;
  }

  .projects-case__wrapper:nth-child(7),
  .projects-case__wrapper:nth-child(8),
  .projects-case__wrapper:nth-child(9) {
    width: 32%;
  }

  .projects-portfolio__button {
    position: relative;
    right: auto;
    bottom: auto;
    transform: none;
  }

  /* PROJECTS END */

  /* ABOUT START */
  .about-bottom__wrapper a {
    transform: translateX(-50%);
  }

  /* ABOUT END */

  /* BENEFITS START */
  .benefits > div:nth-child(1) {
    padding: 80px 30px 30px;
  }

  .benefits h2 {
    font-size: 12vw;
  }

  /* BENEFITS END */

  /* CALLBACK START */
  .callback {
    height: auto;
    min-height: auto;
  }

  .connect__wrapper h2 {
    font-size: 12vw;
  }
  .connect__wrapper {
    padding-top: 60px !important;
  }
  /* CALLBACK END */

  /* CLINTS START */
  .clients__wrapper {
    padding: 70px 0 70px 0;
  }

  .clients-row__wrapper {
    padding: 30px 0;
  }

  .clients-row__wrapper:before,
  .clients-row__wrapper:after {
    width: 100px;
  }

  /* CLINTS END */

  /* REVIEWS START */
  .reviews__wrapper > div {
    padding: 100px 30px;
  }

  .reviews__wrapper h2 {
    margin-bottom: 50px;
    font-size: 12vw;
    overflow-wrap: break-word;
  }

  .mySwiper2 {
    /* padding-bottom: 0 !important; */
  }

  .mySwiper2 .swiper-slide {
    flex-direction: column;
    row-gap: 50px;
  }

  .mySwiper2 .swiper-slide > div:nth-child(1) {
    max-width: 100%;
  }

  .mySwiper2 .swiper-slide > div:nth-child(2) {
    max-width: 100%;
  }

  .slider__container .swiper-controls {
    left: auto;
    /* right: 30px; */
  }

  /* REVIEWS END */

  /* FOOTER START */
}

@media only screen and (max-width: 1207px) and (min-width: 768px) {
  .footer__wrapper {
    padding: 0 30px 40px;
  }

  .footer-top__wrapper {
    flex-wrap: wrap;
  }

  .footer-top__wrapper:before,
  .footer-top__wrapper:after {
    content: none;
  }

  .footer-top__wrapper img {
    order: 1;
  }

  .footer-top__wrapper .contact-local__wrapper {
    order: 2;
  }

  .footer-top__wrapper .content-center__wrapper {
    border-bottom: 1px solid #ffffff;
    order: 4;
  }

  .footer-top__wrapper .desc__wrapper {
    order: 3;
  }

  .footer-top__wrapper .contact-local__wrapper,
  .footer-top__wrapper .desc__wrapper {
    position: relative;
  }

  .footer-top__wrapper .contact-local__wrapper:before,
  .footer-top__wrapper .contact-local__wrapper:after,
  .footer-top__wrapper .desc__wrapper:before,
  .footer-top__wrapper .desc__wrapper:after {
    content: "";
    position: absolute;
    width: calc(100% - 10px);
    height: 1px;
    background-color: #ffffff;
  }

  .footer-top__wrapper .contact-local__wrapper:before,
  .footer-top__wrapper .contact-local__wrapper:after {
    width: calc(100% - 10px);
  }

  .footer-top__wrapper .desc__wrapper:before,
  .footer-top__wrapper .desc__wrapper:after {
    width: 100%;
  }

  .footer-top__wrapper .contact-local__wrapper:before,
  .footer-top__wrapper .desc__wrapper:before {
    top: 0;
    right: 0;
  }

  .footer-top__wrapper .contact-local__wrapper:after,
  .footer-top__wrapper .desc__wrapper:after {
    bottom: 0;
    right: 0;
  }

  .footer-top__wrapper .content-center__wrapper > div {
    width: 100%;
    flex-direction: row;
  }

  .footer-middle__wrapper {
    margin-top: 30px;
    margin-bottom: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 40px;
  }

  .footer-middle__wrapper .menu__wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .footer-middle__wrapper .menu__wrapper h6 {
    width: 100%;
    font-size: 12vw;
  }

  /* FOOTER END */
}

@media only screen and (min-width: 768px) {
  .hero-content-title--desk {
    display: block;
  }

  .hero-content-title--mobi {
    display: none;
  }
}