/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {
  #examples .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-wrapper__left {
    padding: 45px 30px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(123deg, rgba(20, 22, 40, 0.1) 1.06%, rgba(18, 27, 48, 0.1) 69.63%, rgba(2, 35, 87, 0.1) 100%);
    backdrop-filter: blur(11px);
  }
}
@media only screen and (max-width: 1020px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
  .header__toggle {
    display: block;
  }
  .header__menu ul {
    flex-direction: column;
    gap: 30px;
  }
  .langs {
    justify-content: center;
    margin-top: 50px;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 15px;
    position: fixed;
    padding: 15px 15px 15px 0;
  }
  header .container {
    justify-content: flex-start;
    max-width: unset;
    margin-left: 0;
  }

  .services-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .main-hero__img img {
    width: 410px;
  }
  .main-hero__img {
    right: -100px;
    top: 210px;
  }
  #examples .container {
    grid-template-columns: repeat(1, 1fr);
  }
  .examples__left {
    max-width: calc(100vw - 30px);
  }
  header.--scrolled {
    background: #171717;
  }
  header {
    transition: background 0.3s;
  }
}

/* Small Devices, .table_boxts */
@media only screen and (max-width: 768px) {
  section.section {
    padding: 45px 0;
  }
  .main-decors__wheel,
  .main-decors__wrench {
    display: none;
  }
  h1,
  .h1 {
    font-size: 35px;
    line-height: normal;
  }
  h2,
  .h2 {
    font-size: 30px;
  }
  h4,
  .h4 {
    font-size: 20px;
  }
  h5,
  .h5 {
    font-size: 18px;
  }
  h3,
  .h3 {
    font-size: 30px;
  }
  .--fz-20,
  .examples-subtitle {
    font-size: 18px;
  }
  #main {
    padding-top: 100px;
  }
  .main-sub {
    margin-top: 300px;
  }
  .main-hero__img {
    left: 0;
    top: 280px;
  }
  .contact-wrapper {
    flex-direction: column;
  }
  .contact-wrapper__right,
  .contact-wrapper__left {
    width: 100%;
  }
  .contact-wrapper__right {
    order: -1;
  }
  footer .container {
    flex-direction: column;
  }
  .copyright {
    order: 1;
  }
  .examples__right {
    max-width: calc(100vw - 30px);
  }
  .services-list {
    grid-template-columns: 1fr;
  }
  .swiper-button-next {
    right: -5px;
  }
  .swiper-button-prev {
    left: -5px;
  }
  .examples__right .swiper-button-next {
    right: 0;
  }
  .examples__right .swiper-button-prev {
    left: 0;
  }
  .swiper-gallery,
  .swiper-reviews {
    max-width: calc(100% - 50px);
  }
  .swiper-main-sub {
    padding: 0 20px;
  }
  .example-card__price {
    font-size: 18px;
  }
  .review-card {
    padding: 30px 25px 60px 25px;
  }
  .review-card__content {
    padding-left: 0;
  }
  .review-card__date {
    transform: none;
    right: 25px;
    bottom: 25px;
    left: auto;
  }
  .review-card:before {
    content: "";
    display: block;
    width: calc(100% - 140px);
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    left: 25px;
    position: absolute;
    top: auto;
    bottom: 33px;
  }
  .review-card__text {
    margin-top: 20px;
  }
  .review-card__name {
    font-size: 20px;
  }
  .ts-faq-item-answer {
    padding-right: 0;
  }
  .ts-faq-accordion-item {
    padding: 25px;
  }
  .contact-item {
    flex-direction: column;
  }
  .contact-item:nth-child(1) .contact-item__title,
  .contact-item:nth-child(2) .contact-item__title,
  .contact-item:nth-child(3) .contact-item__title {
    flex: 0 0 auto;
  }
  .contact-form {
    padding: 35px 25px;
  }
  .contact-wrapper__left {
    padding: 0;
    border: none;
    background: none;
    backdrop-filter: unset;
  }
  .contact-light {
    position: absolute;
    top: auto;
    z-index: -1;
    width: 1000px;
    max-width: unset;
    left: -320px;
    bottom: -290px;
  }
  .contact-item {
    gap: 10px;
  }
  .swiper-gallery .swiper-slide span a {
    font-size: 15px;
  }
  .main-hero__light {
    position: absolute;
    left: -80%;
    top: -100%;
    width: 200%;
    max-width: unset;
    z-index: -1;
  }
  .main-hero__nut1 {
    transform: translateY(calc(var(--app-scroll) / 5 * 1));
  }
  .main-hero__nut2 {
    top: 39% !important;
    transform: translateY(calc(var(--app-scroll) / 8 * -1));
    left: 80% !important;
  }
  .main-hero__nut3 {
    top: 61% !important;
    transform: translateY(calc(var(--app-scroll) / 8 * -1));
  }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .contact-wrapper__left {
    margin-top: 300px;
  }
  .contact-img {
    top: 590px;
  }
  #map {
    margin-top: 50px;
    position: relative;
  }
  #map:before {
    content: "";
    display: block;
    background: center / cover url("../img/main/wheel.png");
    width: 170px;
    height: 170px;
    transform: rotate(180deg);
    position: absolute;
    top: -170px;
    right: 0;
  }
  .contact-form__decor {
    position: absolute;
    right: 11px;
    top: 881px;
    width: 100px;
  }
  .examples-form {
    width: 100%;
  }
  .examples-image {
    left: -270px;
    top: 136px;
    width: 1000px;
    max-width: unset;
    opacity: 0.3;
  }
  .services-list {
    margin-top: 30px;
  }
  .main-hero__img {
    left: -30px;
    top: 360px;
  }
  .main-hero__nut4 {
    display: none;
  }
  .header__logo img {
    width: 150px;
  }
  .example-card__body {
    padding: 20px;
  }
  .main-button {
    margin-top: 290px;
  }
  .main-hero__img {
    top: 260px;
  }
  .main-sub {
    margin-top: 100px;
  }
  .main-hero__img {
    left: 0 !important;
    top: 250px !important;
    transform: translate(calc(var(--app-scroll) / 28 * -1), calc(var(--app-scroll) / 28 * 1));
  }
  .reviews-button__decor {
    transform: translateY(calc(var(--app-scroll) / 10 * -1 + 480px));
  }
  /* .contact-form__decor {
margin-top: calc(var(--app-scroll) / 7 * -1 + 1050px);
  } */
  /*   
  .contact-form__decor {
    transform: translateY(calc(var(--app-scroll) / 7 * -1 + 1100px));
  }  */

  .swiper-examples .swiper-slide .example-card {
    max-width: 85%;
    margin-left: 8%;
  }

  .header__logo span {
    font-size: 12px;
  }
  .arcontactus-widget.right.arcontactus-message {
    bottom: 110px !important;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
}