/* media 1100px */

:root {
  font-size: 16px;
  --white: #FFF;
  --black: #000;
  --red: #E31E24;
  --grey: #9B9D9F;
  --darkgrey: #434242;
}

@media (max-width: 768px) {
  .container {
    margin: auto 5vw;
  }

  header .container {
    padding: 4.33vw 0;
    position: relative;
    display: flex;
    justify-content: space-between;
  }

  .header__logo {
    width: 26.5vw;
  }

  .header__nav__menu {
    position: relative;
  }

  .header__contacts {
    display: none;
  }

  .header__nav__mob {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--red);
    padding: 1.5vw;
    border-radius: 2vw;
  }

  .header__nav__mob svg {
    width: 7vw;
    height: auto;
    margin: auto;
  }

  .header__nav {
    display: flex;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    flex-direction: column;
    gap: 5vw;
    padding: 4vw 12vw;
    background-color: var(--white);
    border: 0.13vw solid var(--darkgrey);
    border-radius: 2vw;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

  }

  .header__nav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .header__nav a {
    font-size: 4.73vw;
  }

  .header__nav a.active::before {
    bottom: -1.4vw;
    height: 0.13vw;
  }

  .header__nav a::before {
    bottom: -1.4vw;
    height: 0.13vw;
  }

  .header__change_lang {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1.15vw 2.94vw;
    border-radius: 0 0 1.88vw 1.88vw;
    gap: 2.1vw;
  }

  .header__change_lang .header__stick {
    height: 2.60vw;
  }

  .header__change_lang a {
    font-size: 3.20vw;
  }

  .banner {
    padding: 4.94vw 0 30.08vw 0;
  }

  .banner__wrapper {
    flex-direction: column;
    justify-self: center;
    gap: 5.82vw;
    width: 100%;
  }

  .banner__wrapper__button {
    gap: 4vw;
    border-radius: 1.95vw;
    padding: 5vw 9vw;
    width: 70vw;
    margin: 0 auto;
  }

  .banner__wrapper h1 {
    font-size: 6.4vw;
    width: 78.61vw;
  }

  .banner__button__text img {
    width: 4.54vw;
    height: 4.54vw;
  }

  .banner__button__texts {
    width: 47.75vw;
  }

  .banner__button__text {
    gap: 2.28vw;
    align-items: center;
  }

  .banner__button__text p {
    font-size: 3.4vw;
  }

  .banner__wrapper__button .banner__button__button {
    border-radius: 1.95vw;
    padding: 3vw 7vw;
  }

  .banner__wrapper__button .banner__button__button p {
    font-size: 2.6vw;
  }

  .banner__border__photo {
    width: 40.69vw;
    top: -13.82vw;
  }

  .project__wrapper {
    margin: 8vw 0 8.81vw 0;
    gap: 3vw;
  }
  
  .project__texts .title__style {
      width: 48vw;
  }

  .title__style, .whywe__wrapper__title .title__style{
    font-size: 6vw;
  }
  
  .modern_technologies__title .title__style {
      width: 62vw;
  }

  .project__link {
    font-size: 2.55vw;
    text-align: right;
  }

  .title__style__line {
    margin-left: 2.92vw;
    width: 7.13vw;
  }
  
  .project__boxs {
    display: flex;
    flex-direction: column;
    gap: 3.91vw;
  }

  .project__box {
    border-radius: 1.95vw;
  }

  .project__box p {
    font-size: 4.28vw;
    bottom: 5.42vw;
    left: 5.56vw;
  }

  .uslugi {
    margin: 8.81vw 0;
  }

  .uslugi__wrapper {
    border-radius: 1.95vw;
    padding: 6vw 4.5vw;
    gap: 6.51vw;
  }
  
  .uslugi__boxs {
      justify-content: center;
      flex-wrap: wrap;
      gap: 6vw 8vw;
  }

  .uslugi__box {
    width: 21.42vw;
    gap: 3.91vw;
  }

  .uslugi__box img {
    width: 10.4vw;
  }

  .uslugi__box p {
    font-size: 2.62vw;
  }

  .about__wrapper {
    padding: 5.41vw 0;
    gap: 6.51vw;
  }

  .about__top__texts {
    gap: 2.86vw;
  }
  
  .about__top {
      flex-direction: column;
  }

  .about__top__img {
    width: 100%;
    height: auto;
  }

  .about__top__text__description {
    width: 100%;
    font-size: 3.14vw;
  }

  .about__mission__left {
    border-radius: 1.04vw;
    padding: 1vw 2vw;
  }

  .about__top__text__mission {
    flex-direction: column;
    gap: 3.91vw;
  }

  .about__mission__left p {
    font-size: 3.04vw;
    width: 22vw;
  }

  .about__mission__right {
    border-radius: 1.95vw;
    padding: 4.69vw 3.91vw;
    gap: 3.91vw;
  }

  .about__mission__right__line {
    width: 2.08vw;
  }

  .about__mission__right__text {
    font-size: 2.78vw;
    gap: 2.28vw;
    width: 100%;
  }

  .about__certificate__boxs {
    gap: 2.08vw;
  }

  .about__certificate__box {
    width: 33.20vw;
    height: auto;
  }

  .about__certificate__controls .certificate__control, .completed_projects__controls .completed_projects__control, .about_gallery__control {
    width: 7.55vw;
    height: 7.55vw;
    top: 18.22vw;
  }

  .about__certificate__controls .certificate__control img, .completed_projects__controls .completed_projects__control img, .about_gallery__controls .about_gallery__control img {
    width: 1.95vw;
  }
  
  .about_gallery__control {
      top: 21.22vw;
  }

  .about__certificate__controls .certificate__control__right, .completed_projects__controls__right, .about_gallery__control__right {
    right: -10.57vw;
  }

  .certificate__control__left, .completed_projects__controls__left, .about_gallery__control__left {
    left: -10.57vw;
  }

  .designing__wrapper {
    gap: 5.21vw;
  }

  .designing__content {
    flex-direction: column;
    gap: 3.8vw;
  }

  .designing__content__license {
    width: 100%;
  }

  .designing__content__license__imgs img {
    width: 48.72vw;
  }
  
  .designing__content__license__text {
      right: 0;
  }

  .designing__content__license p {
    font-size: 2.42vw;
    width: 38vw;
    right: 2.02vw;
  }

  .designing__content__texts {
    border: 0.13vw solid var(--white);
    gap: 3.8vw;
    padding: 3.56vw;
    border-radius: 1.95vw;
  }

  .designing__content__text {
    width: 100%;
    font-size: 3.08vw;
  }

  .designing__content__bold {
    width: 100%;
    font-size: 3.60vw;
  }

  .designing__step {
    gap: 3.26vw;
  }

  .designing__step h6 {
    font-size: 3.60vw;
  }

  .designing__step__boxs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6vw 8vw;
  }

  .designing__step__box {
    width: 40.42vw;
    gap: 1.3vw;
  }

  .designing__step__box__num {
    gap: 2.5vw;
  }

  .designing__step__box__num p {
    font-size: 4.65vw;
  }

  .designing__step__box__num img {
    height: 2.86vw;
  }

  .designing__step__box__text {
    width: 100%;
    font-size: 2.72vw;
  }
  
  .completed_projects__title .title__style {
      width: 53vw;
  }

  .completed_projects__content {
    width: 68.50vw;
  }

  .completed_projects__box, .about_gallery__slide {
    width: 100%;
    height: 52.31vw;
    padding: 1.54vw 1.54vw 1.54vw 5.24vw;
    border-radius: 1.95vw;
  }
  
  .about_gallery__slide {
      padding: 0;
  }

  .completed_projects__boxs {
    gap: 2.08vw;
  }

  .completed_projects__img {
    width: 30.05vw;
    height: 49.61vw;
  }

  .completed_project__texts {
    width: 29.04vw;
  }

  .completed_project__text__title__title {
    font-size: 3.34vw;
    width: 100%;
    height: 120%;
  }

  .completed_project__text__description p {
    font-size: 1.56vw;
  }

  .completed_project__text__feature p {
    font-size: 2.35vw;
  }

  .completed_project__text_button {
    width: 100%;
    font-size: 2.52vw;
    text-align: center;
    padding: 1.56vw 1.4vw;
    border-radius: 1.04vw;
  }

  .form {
    margin: 6.40vw 0;
  }

  .form__wrapper {
    display: flex;
    flex-direction: column;
    gap: 3.91vw;
  }

  .form__text {
    width: 100%;
  }

  .form__text__p {
    font-size: 2.88vw;
    width: 100%;
  }
  
  .form__wrapper .form__form {
    gap: 3vw;
  }

  .form__form__inputs {
    gap: 2.3vw;
  }
  
  .form__form__inputs__form {
      flex-direction: column;
  }

  .form__form__inputs__form input {
    width: 100%;
    font-size: 2.92vw;
    padding: 2.33vw 2.73vw 2.21vw 3.13vw;
    border-radius: 0.65vw;
  }

  .form__form__inputs__form input::placeholder {
    font-size: 2.92vw;
  }

  .agreement {
    gap: 2.04vw;
  }

  .agreement .input__check {
    width: 4.66vw;
    height: 4.66vw;
    border-radius: 0.65vw;
  }

  .agreement .input__check img {
    width: 2.49vw;
  }

  .agreement p {
    font-size: 2.42vw;
  }

  .form__form__button {
    z-index: 4;
    width: 100%;
    height: 9.42vw;
    font-size: 2.92vw;
    border-radius: 0.65vw;
  }

  .whywe__wrapper {
    gap: 5.4vw;
  }

  .whywe__boxs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27.73vw, auto));
    justify-content: center;
    gap: 3.26vw;
  }

  .whywe__box {
    width: 100%;
    border-radius: 1.95vw;
  }

  .whywe__box__img {
    width: 12.42vw;
    height: 12.42vw;
  }

  .whywe__box__text {
    width: 24.48vw;
    font-size: 2.42vw;
  }
  
  footer {
      overflow: hidden;
  }

  .footer__wrapper {
    flex-direction: column;
    gap: 5vw;
  }

  .footer__logo {
    width: 27.48vw;
  }

  .footer__contact {
    width: 100%;
    justify-content: space-between;
  }

  .footer__contacts {
    width: 100%;
    gap: 5.56vw;
  }

  .footer__contact__row img {
    width: 5vw;
  }

  .footer__contact__row {
    gap: 2.24vw;
  }

  .footer__contact__row a {
    font-size: 2.68vw;
  }

  .footer__contacts__p {
    font-size: 2.68vw;
  }

  .page__title__nav {
    gap: 2.64vw;
  }

  .page__title__nav a, .page__title__nav p {
    font-size: 2.78vw;
  }

  .page__title__title {
    gap: 3vw;
  }

  .projects__section {
    margin: 7vw 0;
  }

  .page__title__title h1 {
    font-size: 5.71vw;
  }

  .page__title {
    padding: 5.4vw 0 7.4vw;
  }

  .projects__boxs {
    display: flex;
    gap: 3vw;
    flex-direction: column;
  }

  .projects__box {
    height: 54vw;
    border-radius: 1.95vw;
  }

  .projects__box__img {
    width: 40vw;
  }

  .projects__title p {
    font-size: 3.90vw;
  }

  .projects__box__info {
    padding: 3.56vw;
    width: 49.47vw;
  }
  
  .projects__box__info__top {
    width: 100%;
  }

  .projects__box__info__feature p {
    font-size: 2.82vw;
  }

  .projects__box__info__btn {
    padding: 2.22vw 3.91vw;
    border-radius: 1.04vw;
  }

  .projects__box__info__btn p {
    font-size: 2.82vw;
  }

  .projects__controls {
    margin-top: 5.84vw;
  }

  .projects__controls {
    gap: 1.95vw;
  }

  .projects__control {
    width: 8.51vw;
    height: 8.51vw;
    border-radius: 1.04vw;
  }

  .projects__control img {
    width: 2.49vw;
  }

  .projects__control__pages  {
    gap: 1.95vw;
  }

  .projects__control__page {
    width: 6.51vw;
    height: 6.51vw;
    font-size: 3.60vw;
  }
  
  .product__wrapper {
      gap: 4vw;
  }

  .product__info {
    flex-direction: column;
    gap: 6vw;
  }

  .product__info__imgs {
    width: 100%;
  }

  .product__info__main__img {
    height: auto;
  }
  
  .product__info__main__img img {
      height: 56.14vw;
  }

  .product__info__imgs {
    gap: 3vw;
  }

  .product__info__list__imgs {
    gap: 3.26vw;
  }

  .product__info__list__img {
    width: 27.84vw;
    height: auto;
  }

  .product__info__texts {
    width: 100%;
    gap: 3.13vw;
  }

  .product__info__text {
    gap: 3.5vw;
  }

  .product__info__text__li {
    gap: 1.4vw;
  }

  .product__info__text__li p {
    font-size: 3.64vw;
  }

  .product__info__text__li p:nth-child(2) {
    font-size: 3.38vw;
  }

  .product__button_back {
    width: 60.06vw;
    height: 9.84vw;
    font-size: 2.95vw;
    text-align: center;
    border-radius: 7px;
  }

  .uslugi__page {
    margin: 4.59vw 0 8.17vw 0;
  }

  .uslugi__page__wrapper {
    flex-direction: column;
    gap: 7vw;
  }

  .uslugi__page__menu {
    width: 100%;
    gap: 6.4vw;
    padding: 5.56vw 4.48vw 3.52vw 6.96vw;
  }

  .uslugi__page__menu a {
    font-size: 4.08vw;
    gap: 3.64vw;
    width: 100%;
  }

  .uslugi__page__content {
    width: 100%;
    gap: 2.97vw;
  }

  .uslugi__page__img {
    height: auto;
  }

  .uslugi__page__text__top {
    width: 100%;
  }
  
  .uslugi__page__texts {
      gap: 5vw;
  }

  .uslugi__page__text__top p {
    font-size: 3.80vw;
  }

  .uslugi__page__text__ul {
    gap: 3.6vw;
  }

  .uslugi__page__text__li img {
    width: 3.90vw;
  }

  .uslugi__page__text__li p {
    font-size: 3.48vw;
  }
  
  
  .page__title__title__blox p {
    font-size: 2.88vw;
  }
  
  .page__title__title__bloxs {
      flex-direction: column;
  }

  .page__title__title__blox button {
    width: 37.95vw;
    height: 10.29vw;
    border-radius: 1.04vw;
  }

  .page__title__title__blox button p {
    font-size: 2.82vw;
  }
  
  .who_we__wrapper {
      flex-direction: column;
      align-items: normal;
      gap: 2vw;
  }

  .who_we__text, .who_we__img {
    width: 100%;
  }

  .who_we__text p {
    font-size: 3.68vw;
  }
  
  .who_we__img {
      height: auto;
  }

  .international__top {
    flex-direction: column;
    align-items: start;
    gap: 2.21vw;
  }

  .international__top__title {
    width: 57.9vw;
  }

  .international__top__text {
    width: auto;
  }

  .international__top__text p {
    font-size: 3.48vw;
  }
  
  .international__icon {
    height: 4.56vw;
  }

  .about__mission__wrapper h4 {
    font-size: 5.72vw;
    width: 100%;
  }
  
  .about__mission__wrapper {
      flex-direction: column;
      align-items: normal;
      gap: 3vw;
  }
  
  .about__mission__text {
      width: 100%;
  }

  .about__mission__text p {
    font-size: 3.7vw;
  }

  .modern_technologies__boxs {
    flex-direction: column;
    gap: 4vw;
  }

  .modern_technologies__box {
    width: 100%;
    gap: 4vw;
    justify-content: normal;
  }
  
  .modern_technologies__box__icon {
    width: 16.42vw;
    height: 16.42vw;
    flex: 0 0 auto;
  }

  .modern_technologies__box__texts {
    width: 100%;
    gap: 2vw;
  }

  .modern_technologies__box__texts p {
    font-size: 3.48vw;
  }

  .modern_technologies__box__texts p:nth-child(1) {
    font-size: 4.10vw;
  }

  .trust_us__top {
    flex-direction: column;
    align-items: start;
    gap: 3vw;
  }

  .trust_us__top__text {
    width: auto;
  }

  .trust_us__top__text p {
    font-size: 3.28vw;
  }

  .trust_us__boxs {
    flex-wrap: wrap;
    row-gap: 2vw;
  }

  .trust_us__box {
    width: 38vw;
    border-radius: 1.56vw;
    padding: 2.6vw 2.92vw;
  }

  .trust_us__box p {
    font-size: 3.28vw;
  }
  
  
  
  
  .modal__gallery__viewport {
    width: 94vw;                /* ширина модалки по ширине экрана */
    height: 80vw;               /* высота модалки — в vw, чтобы масштабировать под ширину */
    max-height: 90vh;           /* защита от очень вытянутых экранов */
    padding: 2vw;
    gap: 2vw;
  }

  .modal__gallery__track {
    border-radius: 1.5vw;
    overflow: hidden;
  }

  .modal__gallery__track_inner {
    /* оставляем transform — анимация уже задана */
  }

  .modal__gallery__slide img {
    max-width: 100%;
    /* ограничим высоту относительным vw, чтобы картинка не врывалась за пределы */
    max-height: 70vw;
    object-fit: contain;
  }

  /* Навигационные стрелки — компактные, удобные для тача */
  .modal__gallery__nav {
    width: 10vw;
    height: 10vw;
    font-size: 7vw;
    border-radius: 3vw;
    top: 50%;
  }
  .modal__gallery__nav--prev { left: 3vw; }
  .modal__gallery__nav--next { right: 3vw; }

  /* Кнопка закрыть — меньше и ближе к краю мобильного экрана */
  .modal__gallery__close {
    top: 3vw;
    right: 3vw;
    width: 10vw;
    height: 10vw;
    padding: 1vw;
  }
  .modal__gallery__close svg { width: 6vw; height: 6vw; }

  /* Миниатюры (thumbs) */
  .modal__gallery__thumbs {
    gap: 2vw;
    padding: 1vw 0;
    margin: 0;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .modal__gallery__thumb {
    width: 18vw;
    height: 12vw;
    border-radius: 1.2vw;
  }
  .modal__gallery__thumb img { object-fit: cover; }

  /* Оверлей прозрачнее — на мобилке важен контраст */
  .modal__gallery__overlay {
    background: rgba(0,0,0,0.85);
  }

  /* Улучшаем доступность тач-зон — увеличим hit-area для стрелок */
  .modal__gallery__nav::after {
    content: '';
    position: absolute;
    inset: -2vw;
    border-radius: 4vw;
  }

  /* Если нужно — прячем текстовые подсказки или большие элементы */
  .modal__gallery__viewport .some-large-caption,
  .modal__gallery__viewport .long-ui-text {
    display: none;
  }

  /* Мелкие корректировки для браузеров с notch */
  @supports (padding: env(safe-area-inset-bottom)) {
    .modal__gallery__viewport { padding-bottom: calc(2vw + env(safe-area-inset-bottom)); }
    .modal__gallery__close { top: calc(3vw + env(safe-area-inset-top)); }
  }
  
  

  .modal__form__container {
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 2.08vw;
    gap: 2.92vw;
  }
  
  .form-message {
    font-size: 2.8vw;
  }

  .modal__form__title p {
    font-size: 5.82vw;
    text-align: start;
  }

  .modal__form__form__inputs__block {
    width: 100%;
  }
  
  .modal__form__form__inputs input {
    width: 100%;
    height: 9vw;
    padding: 3vw 4vw;
    font-size: 3vw;
    border-radius: 2.08vw;
  }
  
  .modal__form__form__inputs input::placeholder {
    font-size: 3vw;
  }

  .modal__input__check {
    width: 4.9vw;
    height: 4.9vw;
    border-radius: 1vw;
  }

  .modal__agreement {
    align-items: center;
    gap: 2.96vw;
  }

  .modal__input__check img {
    width: 2.33vw;
  }

  .modal__agreement p {
    font-size: 2.8vw;
  }

  .modal__form__form__sumnit {
    padding: 3.3vw 0;
    border-radius: 1.04vw;
  }

  .modal__form__form__sumnit p {
    font-size: 3.1vw;
  }

  .close__modal {
    width: 5.3vw;
    height: 5.3vw;
    right: 3.28vw;
    top: 3.28vw;
  }

}

/* /media */