@font-face {
    font-family: 'Comfortaa';
    src: url("../assets/fonts/Comfortaa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Disket';
    src: url("../assets/fonts/Disket-Mono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Основные цвета */
    --color-primary: #FF0D3D;
    --color-secondary: #1A1A1A;
    --color-background: #0D0D0D;
    --color-text: rgba(246, 246, 246, 1);

    /* Дополнительные цвета */
    --color-gray: #333333;
    --color-light-gray: #F6F6F6;
    font-family: Comfortaa, sans-serif;

    --max-width: 1600px;
}

a {
    text-decoration: none;
    color: var(--color-text);
}

a:hover {
    color: var(--color-primary);
}

.pre-line {
    white-space: pre-line;
}

.red {
    color: rgba(206, 15, 15, 1);
}

.uppercase {
    text-transform: uppercase;
}

.font-2 {
    font-family: 'Disket', sans-serif;
    font-size: 60px;
    font-weight: bold;
}

.pos {
    max-width: var(--max-width);
    margin: 0 auto;
}

.description__text {
    font-size: 20px;
    line-height: 20px;
    color: var(--color-text);
    margin: 0;
    font-family: inherit;
}

.page {
    font-family: 'Comfortaa', sans-serif;
    color: var(--color-text);
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #0B0226;

}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* Общие стили для заголовков */
.title {
    margin: 0;
    padding: 0;
}

/* Общие стили для кнопок */
button {
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    background-color: rgba(150, 0, 0, 1);
    font-weight: 500;
    color: var(--color-text);
    border-radius: 50px;
    font-size: 24px;
    line-height: 24px;
}

.button:hover {
    opacity: 0.8;
}


/* Стили хедера */
.header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1600px;
    background: none;
    backdrop-filter: blur(10px);
    z-index: 100;
    padding: 10px 0;
    font-family: Comfortaa, sans-serif;
    display: flex;
    justify-content: center;
    gap: 110px;
    align-items: center;
    line-height: 18px;
}

.header__logo-block {
    display: flex;
    gap: 30px;
}

.header__logo {
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    align-items: center;
}

.header__logo-text {
    font-size: 24px;
    font-weight: bold;
}

.header__logo-subtitle {
    margin: 4px 0 0;
    font-size: 16px;
    color: var(--color-light-gray);
    align-items: center;
    align-content: center;
}

.header__nav {
    margin: 0 20px;
}

.header__nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 40px;
}

.header__nav-item {
    margin: 0;
}

.header__nav-link {
    color: var(--color-text);
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
    text-transform: lowercase;
}

.header__nav-link:hover {
    color: var(--color-primary);
}

.header__contacts {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header__phone {
    color: var(--color-text);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.header__phone:hover {
    color: var(--color-primary);
}

.header__right {
    display: flex;
    align-items: center;
    gap: 80px;
}

.header__social {
    display: flex;
    gap: 12px;
}

.header__right-phone {
    font-size: 24px;
}

.header__right-icons {
    display: flex;
    gap: 30px;
}

.hero-section {
    /*max-width: var(--max-width);*/
    /*margin: 0 auto;*/

    justify-items: center;
    padding-top: 130px;
    background-image: url(../assets/img/bg/sec-1-bg.png);
    /*background-size: cover;*/
    background-position: center;
    background-repeat: no-repeat;
}

.hero__content {
    display: flex;
    justify-content: center;
    gap: 66px;
    align-items: flex-start;
    max-width: var(--max-width);
    margin: 0 auto;
}

.main-text-small {
    font-size: 24px;
}

.main-text {
    width: 822px;
}

.main-title {
    font-size: 48px;
    line-height: 65px;
    letter-spacing: -4px;
}

.main-subtitle {
    font-size: 24px;
    margin-top: 40px;
}

.main-subtitle-2 {
    font-size: 20px;
    margin-top: 20px;
}

.main-cta {
    margin-top: 60px;
    display: flex;
    gap: 50px;
    color: var(--color-text);
}

.btn {
    border-radius: 50px;
    border: none;
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    width: 315px;
    height: 70px;
}

.btn-primary {
    background-color: rgba(150, 0, 0, 1);
}


.btn-secondary {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 50px;
    font-size: 24px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

/* Градиентная рамка */
.btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    padding: 2px; /* Толщина границы */
    background: linear-gradient(90deg, rgba(150, 0, 0, 1), rgba(246, 246, 246, 1), rgba(0, 0, 147, 1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.advantages {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

.advantages__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 100px;
}

.advantage-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 20px;
    width: 100%;
    max-width: 370px;
    min-height: 175px;
    transition: transform 0.3s ease;
    gap: 10px;
}

.advantage-card:hover {

}


.advantage-card__text {
    margin: 0;
    font-size: 24px;
    line-height: 26px;
    color: var(--color-text);
    background: url("../assets/img/bg/bg-adventage.png") no-repeat;
    min-width: 375px;
    min-height: 125px;
    text-align: center;
    align-content: center;
}

.advantage-card__text:hover {
    background: none;
    box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    border: 1px solid rgba(14, 0, 137, 1);
    font-size: 18px;
}


.partners {
    display: flex;
    flex-direction: column;
    gap: 50px;
    /*max-width: var(--max-width);*/
    justify-items: center;
    padding-top: 130px;
    background-image: url(../assets/img/bg/sec-2-bg.png);
    /*background-size: cover;*/
    background-position: center;
    background-repeat: no-repeat;
}

.partners-slider {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 50px 0;
    overflow: hidden;
}

.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1500px; /* или другой подходящий размер */
    margin: 0 auto;
    height: 550px;
}

.partners__title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.partners__title {
    font-size: 65px;
    letter-spacing: -4px;
    color: var(--color-text);
    font-weight: 700;
}

.partners__btn {
    width: 380px;
    height: 80px;
}

.partners-container {
    display: flex;
    gap: 30px;
    overflow-x: hidden;
    width: auto;
    max-height: 100px;
}

.partners__title-2 {
    text-align: center;
}

.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.slider-title {
    font-size: 18px;
    color: rgb(143, 150, 176);
    text-align: left;
    margin-bottom: 20px;
    font-weight: 600;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    padding: 0;
}


.slider-slide {
    flex: 0 0 33.333%;
    padding: 0 15px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease, left 0.5s ease;
    position: absolute;
    left: 0;
    top: 0;
    width: 33.333%;
    visibility: hidden; /* добавляем скрытие неактивных слайдов */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Задаем полную высоту */
    min-height: 560px;
}

.slider-slide.active {
    border-radius: 0;
    z-index: 10;
    opacity: 1;
    position: absolute; /* меняем на absolute */
    visibility: visible; /* показываем активные слайды */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.slider-controls {
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}


.slider-dot {
    width: 5px;
    height: 5px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.slider-dot.active {
    background-color: rgb(154, 202, 60);
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
}


.slider-arrow-left {
    left: -40px
}

.slider-arrow-right {
    right: -40px
}

.review-container {
    background: white;
    width: 450px;
    height: 443px; /* Возвращаем фиксированную высоту */
    border-radius: 30px;
    padding: 45px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.map-logo-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.map-logo {
    height: 20px;
}

.map-stars {
    height: 15px;
}

.review-text {
    color: black;
    margin-bottom: 20px; /* Отступ перед профилем */
}

.reviewer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    cursor: auto;
    margin-top: auto; /* Это прижмет блок к низу */

}

.watch-review {
    cursor: pointer;
}

.profile-container {
    display: flex;
    align-items: center;
}

.profile-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
}

.border__red {
    background-color: rgba(56, 56, 56, 0.07);
    border: 1px solid var(--color-primary);
    border-radius: 30px;
}

.profile-info {
    display: flex;
    flex-direction: column;
}

.profile-name {
    margin-bottom: 4px;
    font-size: 16px;

}

.profile-date {
    margin: 0;
    font-size: 16px;
}

.our-numbs {
    margin: 140px 0 100px 0;
    background-image: url(../assets/img/bg/bg-problems.png);
}

.our-numbs__container {
    display: flex;
    justify-content: center;
    max-width: 1500px;
    gap: 100px;
}

.our-numbs__item {
    width: 300px;
    text-align: center;
}

.our-numbs__item-count {
    font-family: "DM Sans", sans-serif;
    font-size: 100px;
    font-weight: 300 !important;
    color: var(--color-text);
    margin: 0;
}


.years {
    font-family: "Comfortaa", sans-serif;
    font-size: 40px;
}

.our-numbs__item-text {
    font-size: 20px;
    border-top: 1px solid;
    margin: 20px 0 0 0;
}


/*КОД ВТОРОГО РАЗРАБОТЧИКА. Я БЫЛ ПРОТИВ*/
.bg__businesses {
    background-image: url(../assets/img/bg/bg-problems.png);
    background-position: top center, bottom center; /* 1-я сверху, 2-я снизу */
    background-repeat: no-repeat;
}

.businesses {
    margin: 0 160px;
    display: flex;
    flex-direction: column;
}

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

.businesses__title .universal-title {
    text-align: left;
}

.businesses__btn {
    width: 380px;
    height: 80px;
    border-radius: 50px;
    border: none;
    background-color: #960000;
    cursor: pointer;
    font-family: inherit;
    margin: 50px 0;
}


.businesses__type {
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.businesses__type-container {
    display: flex;
    justify-content: space-between;
}

.businesses__type-item {
    width: 370px;
    max-height: 70px;
    padding: 15px 0;
    text-align: center;
    font-size: 20px;
    background: rgba(246, 246, 246, 0.05);
    position: relative;
    border: none;
    border-radius: 30px;
    /*cursor: pointer;*/
    overflow: hidden;
    z-index: 1;
}

.businesses__type-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    padding: 1px;
    background: linear-gradient(90deg, #960000 0%, #F6F6F6 49.04%, #960000 99.04%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}


.bg__our-works {
    background-image: url('../assets/img/bg/bg-portfolio-1.svg'), url('../assets/img/bg/bg-portfolio-2.svg');
    background-position: top center, bottom center; /* 1-я сверху, 2-я снизу */
    background-repeat: no-repeat;
    padding: 90px 0;
}

.our-works {
    margin: 0 160px;
}

.our-works__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.our-works__container-internal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
}

.m-0 {
    margin: 0;
}

.our-works__item {
    backdrop-filter: blur(13px);
    border-radius: 30px;
    background: rgba(112, 110, 110, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 790px;
    box-sizing: border-box;
}

.item__tags-container {
    display: flex;
    gap: 10px;
}

.item__tag {
    border: 1px solid var(--color-text);
    border-radius: 30px;
    padding: 7px 30px;
    font-size: 16px;
    line-height: 16px;
}

.item__info-container {
    display: flex;
    gap: 50px;
    color: var(--color-text);
}

.item__info-container img {
    border-radius: 15px;
    width: 360px;
    height: 200px;
}

.item__description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20px;
}

.item__title {
    font-size: 30px;
    line-height: 30px;
    margin: 0;
}

.item__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
}

.item__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
}

.item__link {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-size: 16px;
    letter-spacing: 1px;
    white-space: nowrap; /* Предотвращает перенос текста */
    align-self: flex-end; /* Выравнивает по правому краю */
}

.our-works__container-btn {
    display: flex;
    justify-content: center;
}

.our-works__btn {
    margin: 50px 0 80px 0;
}

.our-works__feedback {
    padding: 30px 280px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(30px)
}

.feedback__title {
    font-weight: 500;
    font-size: 30px;
    line-height: 35px;
    margin: 0 0 10px 0;
    color: var(--color-text);
}

.feedback__description {
    font-size: 24px;
    line-height: 25px;
}

.our-works__feedback .discuss-task__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.our-works__feedback .privacy-policy {
    margin: -10px 0;
}

.our-works__container-hidden {
    display: none;
    transform: translateY(30px);
    transition: all 0.5s ease;
}

.our-works__container-hidden.show {
    display: block;
    animation: fadeInUp 0.6s ease forwards;
}


.bg__sites {
    background-image: url(../assets/img/bg/bg-sites.png);
}

.sites {
    margin: 20px 160px 0 160px;
}

.sites__description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.sites__title {
    margin: 0;
}

.sites__description p {
    font-size: 18px;
}

.sites__types-container {
    display: flex;
    justify-content: space-between;
}

.sites__type-item {
    width: 360px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 0;
    backdrop-filter: blur(14px);
    position: relative;
    background: rgba(112, 110, 110, 0.1);
    border: none;
    border-radius: 30px;
    /*cursor: pointer;*/
    overflow: hidden;
    z-index: 1;
}

.sites__type-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    padding: 1px;
    background: linear-gradient(156.88deg, #960000 41.78%, #F6F6F6 49.68%, #960000 62.68%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.sites__type-icon {
    margin-bottom: 30px;
}

.type__title {
    font-size: 24px;
    margin-bottom: 20px;
}

.type__description {
    text-align: center;
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 30px;
}

.type__cost {
    font-weight: 700;
    font-size: 30px;
    line-height: 30px;
    margin-bottom: 10px;
}

.type__order {
    width: 253px;
    height: 40px;
    border-radius: 50px;
    border: none;
    background-color: #960000;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 10px;
    font-size: 16px;
}

.type__examples {
    width: 253px;
    height: 40px;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    color: var(--color-text);
    font-family: inherit;
    font-size: 16px;
}

.type__examples::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    padding: 2px; /* Толщина границы */
    background: linear-gradient(90deg, rgba(150, 0, 0, 1), rgba(246, 246, 246, 1), rgba(0, 0, 147, 1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.sites__cost {
    display: flex;
    justify-content: center;
}

.sites__cost-btn, .our-works__btn {
    width: 517px;
    height: 80px;
    border-radius: 50px;
    border: none;
    background-color: #960000;
    cursor: pointer;
    font-family: inherit;
    margin: 50px 0;
}


.bg__problems {
    background-image: url(../assets/img/bg/bg-problems.png);
}

.problems {
    padding-top: 100px;
}

.problems__description {
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}

.problems__container {
    display: flex;
    margin: 30px 439px;
    flex-direction: row;
    justify-content: space-between;
}

.problems__container-left, .problems__container-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.problem {
    display: flex;
    gap: 30px;
}

.contact-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(22px);
    margin: 0 160px 0 160px;
    padding: 30px 413px;
}

.contact-us__title {
    font-weight: 500;
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}

.contact-us__description {
    font-size: 24px;
    text-align: center;
    line-height: 25px;
    margin-bottom: 30px;
}

.contact-us__btn {
    font-size: 30px;
}


.bg__technologies {
    background-image: url(../assets/img/bg/bg-technologies.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.technologies {
    padding: 100px 0 170px 0;
}

.technologies__logos {
    display: flex;
    align-items: center;
    margin: 5px 265px;
    justify-content: space-between;
}

.deadlines__container, .deadlines__text {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-direction: row;
    margin: 10px 305px 35px 305px;
}

.deadlines__container {
    margin-bottom: 0;
}

.deadlines {
    margin-top: 30px;
}

.deadline__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.deadline__item .block__days {
    font-size: 30px;
    line-height: 30px;
}

.deadlines__text {
    align-items: start;
}

.deadlines__text-block p {
    font-size: 16px;
    line-height: 16px;
}

.technologies__discuss-task {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
    margin: 35px 160px 0 160px;
    padding: 30px 0;
}

.technologies__discuss-task.border__red {
    backdrop-filter: blur(30px)

}

.technologies__discuss-task .discuss-task__form {
    gap: 30px;
}


.technologies__discuss-task .discuss-task__form .privacy-policy {
    margin: 0;
}

.discuss-task__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.discuss-task__question.description__text {
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}

.discuss-task__bid.description__text {
    font-size: 24px;
    line-height: 20px;
    text-align: center;
}

.discuss-task__form {
    display: flex;
    gap: 40px;
}

.privacy-policy-2 {
    max-width: 330px;
}


.ahaha {
    width: 344px !important;
    height: 60px !important;
    border-radius: 50px;
    border: none;
    background-color: #960000;
    cursor: pointer;
    font-family: inherit;
    margin: 0;
}

.input-wrapper {
    position: relative;
    display: flex;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    width: 344px;
    margin-bottom: 25px; /* Добавляем отступ снизу для места под ошибку */
}

.form__input {
    width: 344px;
    height: 56px;
    padding: 0 20px;
    border: none;
    border-radius: 50px;
    position: relative;
    z-index: 1;
    text-align: center;
    background-color: transparent;
    color: white;
}

.input-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #960000, #F6F6F6, #000093);
    border-radius: 50px;
    z-index: 0;
    -webkit-mask: linear-gradient(#fff, #fff) content-box,
    linear-gradient(#fff, #fff);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}

.form__input::placeholder {
    color: var(--color-text);
    background-color: #0B0226;
}

.form__input:focus {
    outline: none;
}


.bg__services {
    background-image: url(../assets/img/bg/bg-services.svg);
}

.additional__services {
    margin: 0 160px;
}

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

.services__description .description__text {
    font-size: 18px;
}

.services__description .services__title {
    margin: 0;
}

.services {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
    gap: 20px;
}

.services__container, .services__container-middle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.service {
    display: flex;
    align-items: center;
    position: relative;
}

.services__container .description__text {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 345px;
    height: 100px;
    z-index: 1;
}

.services__container-middle .description__text {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 480px;
    height: 100px;
    z-index: 1;
}

.service__picture {
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 2;
}

.service__picture img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.service .border__red {
    backdrop-filter: blur(22px);
}

.service__picture.border__red {
    border-radius: 100%;
    margin-right: -40px;
}

.services__order {
    display: flex;
    margin: 50px 100px 0 100px;
    justify-content: space-between;
    align-items: center;
}

.services__order .description__text {
    font-size: 30px;
    line-height: 30px;
}

.order__btn, .contact-us__btn {
    width: 400px;
    height: 70px;
    border-radius: 50px;
    border: none;
    background-color: #960000;
    cursor: pointer;
    font-family: inherit;
    margin: 0;
}

.help-me__btn {
    width: 344px !important;
    height: 60px !important;
    border-radius: 50px;
    border: none;
    background-color: #960000;
    cursor: pointer;
    font-family: inherit;
    margin: 0;
}


.bg__about-us {
    background-image: url("/assets/img/bg/bg-about-us.png");
    background-repeat: no-repeat;
    background-color: rgba(11, 2, 38, 1);
    padding: 160px 0;
}

.about-us {
    max-width: var(--max-width);
    margin: 0 auto;
}

.universal-title {
    font-family: 'Disket', sans-serif;
    font-size: 60px;
    line-height: 55px;
    text-transform: uppercase;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 30px 0;
}

.command__title {
    margin: 0;
}

.company__description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 100px;
}


.command__description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 50px 0;
}

.command__description .title {
    margin: 0;
}

.command__text {
    display: flex;
    align-items: center;
    gap: 40px;
}

.command__info-about {
    color: var(--color-text);
    margin: 0;
}

.command__specialists {
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: end;
}

.spec__num {
    color: #960000;
    margin: 0;
    font-weight: 500;
    font-size: 80px;
    line-height: 70px;
}

.spec__text {
    margin: 0;
}

.command__photos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    overflow: hidden;
}

.carousel {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease-in-out;
    position: relative;
}

.carousel__wrapper {
    max-width: 1500px;
    overflow: hidden;
}

.arrows {
    display: flex;
    flex-direction: column;
    gap: 18px;
    cursor: pointer;
}

.arrow {
    background-color: var(--color-text);
    width: 35px;
    height: 5px;
    border-radius: 2px;
}

.left__line1 {
    transform: rotate(-45deg);
}

.left__line2 {
    transform: rotate(45deg);
}

.right__line1 {
    transform: rotate(45deg);
}

.right__line2 {
    transform: rotate(-45deg);
}

/* Основной контейнер - теперь flex колонка */
.photo__container {
    display: flex;
    flex-direction: column;
    flex: 0 0 350px;
    gap: 15px; /* Отступ между фото и подписью */
}

/* Контейнер для изображения */
.photo__container .photo__image {
    width: 100%;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background-color: var(--color-light-gray);
}

/* Само изображение */
.photo__container .photo__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Подпись под фото */
.photo__container span {
    color: var(--color-text, #333);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    padding: 0 10px;
    display: block;
}

.photo__container.active {
    border-radius: 0;
    z-index: 10;
    opacity: 1;
    position: absolute;
    visibility: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.not__active {
    display: none;
}

.photo__caption {
    display: none; /* Скрываем пустой элемент */
}


.bg-questions {
    background-image: url("/assets/img/bg/bg-questions.png");
}

.questions {
    max-width: var(--max-width);
    margin: 0 auto;
}

.questions__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.questions__container-title {
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    font-weight: 500;
    color: var(--color-text);
    max-width: 618px;
    margin: 30px auto;
}

/* Remove min-width from .question to allow it to be flexible */
.question {
    border-top: 1px solid;
    border-image: linear-gradient(90deg, rgba(246, 246, 246, 0) 0%, #F6F6F6 51.92%, rgba(246, 246, 246, 0) 100%) 1;
    padding: 15px 90px 15px 209px;
    /*display: flex; !* Keep flex for question text and plus/minus alignment *!*/
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 1200px;
    width: 100%; /* Make it fill its parent up to max-width */
    margin: 0 auto;
    cursor: pointer;
    /* Removed overflow: hidden; from .question itself as the answer is a sibling */
}

.question:last-child {
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, rgba(246, 246, 246, 0) 0%, #F6F6F6 51.92%, rgba(246, 246, 246, 0) 100%) 1;
}

.question p {
    color: var(--color-text);
    font-size: 20px;
    margin: 0;
    flex-grow: 1;
    padding-right: 40px; /* Space for the plus/minus icon */
    border: none;
}

.question .line1,
.question .line2 {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 25px;
    height: 4px;
    background-color: #CE0F0F;
    transition: transform 0.3s ease;
    transform-origin: center;
    transform: translateY(-50%) rotate(0deg); /* Center vertically */
}

.question .line2 {
    transform: translateY(-50%) rotate(90deg); /* Center vertically and rotate for plus */
}

/* Active state for the question (when open) */
.question.active .line1 {
    transform: translateY(-50%) rotate(45deg);
}

.question.active .line2 {
    transform: translateY(-50%) rotate(-45deg);
}

/* Styles for the answer content */
.answer {
    max-height: 0px; /* Initially hidden */
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Очень важно для анимации */
    /*padding-top: 0;*/
    /*padding-bottom: 0;*/
    margin: 0 auto;
    max-width: 1200px; /* Match question max-width */
    width: 100%; /* Ensure it fills parent up to max-width */
    box-sizing: border-box; /* Include padding in width calculation */
    /* Adjust padding to align with the question text. */
    /* This padding should match the *left* padding of the question container. */
    /*padding-left: 209px;*/
    /*padding-right: 90px;*/
    /*border-bottom: 1px solid; !* Add border to answer for consistent look *!*/
    /*border-image: linear-gradient(90deg, rgba(246, 246, 246, 0) 0%, #F6F6F6 51.92%, rgba(246, 246, 246, 0) 100%) 1;*/
}

.answer p {
    font-size: 18px;
    line-height: 1.6;
    font-weight: normal;
    margin-bottom: 0; /* Remove default paragraph margin-bottom */
}

/* Adjust padding for the answer when it's open */
.question.active + .answer {
    padding-top: 15px;
    padding-bottom: 15px;
}


.footer {
    display: flex;
    justify-content: space-between;
    /*background-image: url("img/background.svg");*/
    max-width: var(--max-width);
    font-family: 'Comfortaa', sans-serif;
    font-size: 18px;
    line-height: 24px;
    margin: 50px auto 0 auto;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer__contacts {
    color: #F6F6F6;
    margin: 0;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contacts-address, .contacts-phone, .contacts-email {
    margin: 0;
}

.error-message {
    color: red;
    font-size: 0.85em;
    margin-top: -10px; /* Прижимаем к инпуту */
    margin-bottom: 5px;
}

/* Общие стили для модального окна */
.modal {
    display: none; /* Это ключевое свойство! Модальное окно скрыто по умолчанию */
    position: fixed; /* Оставаться на месте при прокрутке */
    z-index: 1000; /* Поверх всех других элементов */
    left: 0;
    top: 0;
    width: 100%; /* Занимает всю ширину */
    height: 100%; /* Занимает всю высоту */
    overflow: auto; /* Добавляет прокрутку, если содержимое превышает размеры окна */
    background-color: rgba(0, 0, 0, 0.7); /* Черный фон с прозрачностью */
    backdrop-filter: blur(5px); /* Эффект размытия фона */

    /* Эти свойства будут активны ТОЛЬКО когда JS изменит display на 'flex' */
    /* Убедитесь, что здесь нет display: flex; по умолчанию, он будет установлен через JS */
    justify-content: center; /* Центрирование содержимого по горизонтали */
    align-items: center; /* Центрирование содержимого по вертикали */
}

/* Стили для содержимого модального окна (самого попапа) */
.modal-content {
    background: #0B0226; /* Черный фон, как на макете */
    border: 2px solid rgba(150, 0, 0, 1); /* Фиолетовая рамка, как на макете */
    border-radius: 10px;
    padding: 40px; /* Увеличим отступы внутри попапа */
    width: 90%; /* Ширина попапа по отношению к родительскому контейнеру */
    max-width: 1000px; /* Максимальная ширина, чтобы не был слишком большим на широких экранах */
    /* УДАЛИТЕ max-height: 500px; Это ограничивало высоту и вызывало сжатие */
    box-sizing: border-box; /* Важно: padding и border включены в общую ширину/высоту */
    text-align: center; /* Центрирование текстового содержимого внутри попапа */
    position: relative; /* Для позиционирования кнопки закрытия */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); /* Добавим тень для глубины */
    animation: fadeIn 0.3s ease-out; /* Анимация появления */

    /* УДАЛИТЕ margin: auto; - это будет конфликтовать с flexbox центрированием родителя */
}

/* Заголовок внутри модального окна */
.modal-title {
    color: #fff; /* Белый цвет текста */
    font-size: 28px; /* Размер шрифта, как на макете */
    margin-bottom: 30px; /* Отступ снизу от заголовка */
    line-height: 1.3; /* Межстрочный интервал */
    font-family: Comfortaa, sans-serif; /* Убедитесь, что шрифт применяется */
}

/* Стили для контейнера формы внутри модального окна */
.modal-form-container {
    display: flex; /* Используем flexbox для выравнивания элементов формы */
    flex-direction: column; /* Элементы будут располагаться друг под другом */
    align-items: center; /* Центрирование элементов формы по горизонтали */
    width: 100%; /* Контейнер формы занимает всю ширину модального окна */
}


.discuss-task__form .help-me__btn {
    margin: auto;
}


/* Стили для текста о политике конфиденциальности */
.privacy-policy {
    margin-top: 20px;
    font-size: 14px;
    color: #fff; /* Белый цвет текста */
    display: flex; /* Используем flexbox для выравнивания чекбокса и текста */
    align-items: center; /* Выравнивание элементов по центру по вертикали */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    /* Уберем text-align: center; если он где-то еще применяется и конфликтует,
       так как flexbox-центрирование лучше подходит для этого случая */
}


/* Скрываем нативный чекбокс */
.privacy-policy input[type="checkbox"] {
    /* Скрываем сам элемент input, но сохраняем его функциональность */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* Гарантируем, что по нему нельзя кликнуть напрямую */
}

/* Стили для контейнера чекбокса и текста о политике конфиденциальности */
.privacy-policy {
    margin-top: 20px;
    font-size: 14px;
    color: #fff; /* Белый цвет текста */
    display: flex; /* Используем flexbox для выравнивания */
    align-items: center; /* Выравнивание по центру по вертикали */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    width: 100%; /* Убедимся, что занимает всю доступную ширину */
}

/* Скрываем нативный чекбокс */
.privacy-policy input[type="checkbox"] {
    /* Полностью скрываем input, но сохраняем его функциональность */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* Не реагирует на события мыши */
}

/* Стилизуем кастомный чекбокс через псевдоэлемент ::before для LABEL */
.privacy-policy label {

    align-items: center; /* Выравнивание по центру по вертикали */
    cursor: pointer;
    position: relative; /* Для позиционирования псевдоэлемента */
    padding-left: 28px; /* Отступ для кастомного чекбокса */
    line-height: 1.4; /* Увеличим межстрочный интервал для лучшего вида */
    text-align: left; /* Текст внутри label выравниваем по левому краю */
    max-width: 90%; /* Ограничиваем ширину, чтобы текст не был слишком длинным */
}

.privacy-policy label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Ширина кастомного чекбокса, чуть больше */
    height: 20px; /* Высота кастомного чекбокса, чуть больше */
    border: 2px solid #ed1c24; /* Красная рамка */
    background-color: transparent; /* Прозрачный фон */
    border-radius: 4px; /* Немного скругляем углы */
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s; /* Плавный переход */
}

/* Стили для галочки внутри чекбокса, когда он выбран */
.privacy-policy input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    left: 7px; /* Позиция галочки, подгоняем */
    top: 50%;
    transform: translateY(-50%) rotate(45deg); /* Поворот для создания галочки */
    width: 6px; /* Ширина галочки */
    height: 12px; /* Высота галочки */
    border: solid #ed1c24; /* Красный цвет галочки */
    border-width: 0 2px 2px 0; /* Создаем только нижнюю и правую часть рамки */
    transition: border-color 0.2s;
}

/* Стили для ссылки внутри параграфа */
.privacy-policy a {
    color: #ed1c24; /* Красный цвет для ссылки */
    text-decoration: underline; /* Подчеркивание ссылки */
    white-space: nowrap; /* Важно: не переносить ссылку на новую строку */
    margin-left: 0.3em; /* Небольшой отступ от предыдущего слова */
}

.privacy-policy a:hover {
    text-decoration: none; /* Убираем подчеркивание при наведении */
}

/* Стиль для disabled состояния (чекбокс выглядит неактивным) */
.privacy-policy input[type="checkbox"]:disabled + label {
    opacity: 0.5; /* Делаем текст и чекбокс менее заметными */
    cursor: not-allowed;
}

.privacy-policy input[type="checkbox"]:disabled + label::before {
    border-color: #555; /* Серый цвет рамки для disabled */
    background-color: #222; /* Более темный фон для disabled */
}

.privacy-policy input[type="checkbox"]:disabled:checked + label::after {
    border-color: #555; /* Серый цвет галочки для disabled */
}

/* Стили для кнопки закрытия модального окна (крестик) */
.close-button {
    color: #fff; /* Белый цвет крестика */
    position: absolute; /* Абсолютное позиционирование относительно .modal-content */
    top: 15px; /* Отступ сверху */
    right: 25px; /* Отступ справа */
    font-size: 36px; /* Размер крестика */
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #ed1c24; /* Красный цвет при наведении */
    text-decoration: none;
}

/* Анимация появления модального окна */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-form-container .discuss-task__form {
    flex-direction: column;
}

.cookie-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #d63384;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(214, 51, 132, 0.3);
    padding: 25px;
    max-width: 380px;
    z-index: 1000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s ease-in-out;
    backdrop-filter: blur(10px);
}

.cookie-popup.show {
    transform: translateY(0);
    opacity: 1;
}

.cookie-popup-text {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 400;
}

.cookie-popup-button {
    background: linear-gradient(135deg, #d63384 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s ease;
    text-transform: none;
    box-shadow: 0 4px 15px rgba(214, 51, 132, 0.4);
}

.cookie-popup-button:hover {
    background: linear-gradient(135deg, #c82333 0%, #b21e2f 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(214, 51, 132, 0.6);
}

.cookie-popup-button:active {
    transform: translateY(1px);
}

.footer__privacy-policy {
    margin-bottom: 0;
}

.footer__org-info {
    margin-top: 0;
}

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
    transform: translateY(20px);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    cursor: pointer;
}

.scroll-to-top:hover {
    background: linear-gradient(135deg, #ff6666, #ff0000);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
}

.scroll-to-top::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid white;
}

.error-message {
    color: #d63384;
    font-size: 14px;
    margin-top: 5px;
    display: none;
    line-height: 1.3;
}

.input-wrapper .error-message.show {
    display: block !important;
}

.input-wrapper .error-message {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    color: #d63384;
    font-size: 12px;
    line-height: 1.3;
    display: none;
    z-index: 10;
    text-align: left;
    padding: 0 15px;
}

/* Показываем ошибку с более высокой специфичностью */
.input-wrapper.has-error .error-message.show {
    display: block;
}


.input-wrapper.has-error .form__input {
    border-color: #d63384;
    box-shadow: 0 0 0 0.2rem rgba(214, 51, 132, 0.25);
}

.border__red {
    border-color: #d63384 !important;
    box-shadow: 0 0 0 0.2rem rgba(214, 51, 132, 0.25) !important;
}

@media (max-width: 360px) {
    .slider-container {
        margin: 0 25px;
    }

    .slider-slide {
        padding: 0 5px;
    }

    .review-container {
        padding: 12px;
        min-height: 500px;
    }

    .review-text {
        font-size: 12px;
    }

    .slider-arrow {
        width: 32px;
        height: 32px;
        top: 40%;
    }

    .slider-arrow img {
        width: 16px;
        height: 16px;
    }

    .profile-photo {
        width: 40px;
        height: 40px;
    }

    .profile-name {
        font-size: 12px;
    }

    .profile-date {
        font-size: 10px;
    }

    .watch-review {
        font-size: 10px;
    }
}

@media (max-width: 430px) {
    :root {
        --max-width: 100vw;
    }

    .pos {
        max-width: var(--max-width);
    }

    .btn, .partners__btn, .businesses__btn, .our-works__btn, .help-me__btn, .sites__cost-btn, .contact-us__btn {
        width: 260px;
        height: 60px;
        font-size: 18px;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .universal-title {
        font-size: 32px;
        line-height: 32px;
        letter-spacing: -2px;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .header {
        left: 0;
        transform: none;
        padding: 10px 20px;
        max-width: var(--max-width);
        justify-content: space-between;
        gap: 0;
    }

    .header__logo-block img {
        width: 140px;
    }

    .header__logo-subtitle {
        display: none;
    }

    .header__nav {
        display: none;
    }

    .header__right-phone {
        display: none;
    }

    .header__right-icons {
        gap: 20px;
    }

    .hero-section {
        display: flex;
        flex-direction: column;
        padding-top: 70px;
        background-size: 100% auto;
        background-repeat: repeat;
    }

    .hero__content {
        display: grid;
        grid-template-rows: repeat(6, auto);
        gap: 0;
    }

    .hero__left {
        max-width: var(--max-width);
        display: contents;
    }

    .main-text {
        max-width: var(--max-width);
        display: contents;
    }

    .main-text-small {
        display: none;
        grid-row: 1;
    }

    .main-title {
        font-size: 25px;
        text-align: center;
        line-height: 40px;
        display: inline-block;
        letter-spacing: 3px;
        margin: 10px;
        grid-row: 2;
    }

    .font-2 {
        font-size: 35px;
        line-height: 35px;
        letter-spacing: -3px;
    }

    .main-subtitle, .main-subtitle-2 {
        text-align: center;
        font-size: 18px;
        white-space: normal;
        margin: 0 10px 30px 10px;
    }

    .main-subtitle {
        grid-row: 3;
    }

    .main-subtitle-2 {
        grid-row: 5;
    }

    .main-cta {
        margin: 0;
        grid-row: 6;
    }

    .btn-secondary {
        display: none;
    }

    .hero__right {
        max-width: var(--max-width);
        margin: 30px 0;
        text-align: center;
        grid-row: 4;
    }

    .hero__right img {
        width: 100%;
    }

    .advantages__container {
        flex-direction: column;
        margin-top: 40px;
    }

    .advantage-card {
        gap: 0;
    }

    .advantage-card__text {
        font-size: 16px;
        line-height: 20px;
    }

    .partners {
        padding-top: 40px;
    }

    .partners__title-container {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .partners__title {
        margin: 0 0 30px;
    }

    .our-numbs {
        margin: 40px 13px;
    }

    .our-numbs__container {
        flex-wrap: wrap;
        gap: 30px;
        max-width: var(--max-width);
    }

    .our-numbs__item {
        width: 170px;
    }

    .our-numbs__item-count {
        font-weight: 300;
        font-size: 60px;
        line-height: 60px;
    }

    .our-numbs__item-text {
        font-size: 18px;
        margin-top: 5px;
    }

    .businesses {
        margin: 0;
    }

    .businesses__title {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .businesses__type {
        gap: 0;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .businesses__type-container {
        flex-direction: column;
        gap: 10px;
    }

    .businesses__type-item {
        font-size: 18px;
        width: 340px;
    }

    .bg__our-works {
        padding: 30px 0;
    }

    .our-works {
        margin: 40px 10px;
        max-width: var(--max-width);
    }

    .our-works__container-internal {
        display: flex;
        flex-direction: column;
    }

    .our-works__item {
        max-width: var(--max-width);
        margin: 0 auto;
        width: 95%;
    }

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

    .item__tag {
        width: fit-content;
    }

    .item__info-container {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .item__info-container img {
        width: 100%;
    }

    .item__title {
        font-size: 20px;
    }

    .our-works__btn {
        margin: 30px auto;
    }

    .our-works__feedback {
        display: flex;
        flex-direction: column;
        padding: 20px 50px;
    }

    .feedback__text {
        text-align: center;
        margin-bottom: 20px;
    }

    .feedback__title {
        font-size: 25px;
        line-height: 25px;
        white-space: normal;
    }

    .feedback__description {
        font-size: 16px;
        line-height: 16px;
        white-space: normal;
    }

    .sites {
        margin: 0 10px;
    }

    .sites__description {
        flex-direction: column;
    }

    .description__text {
        white-space: normal;
        text-align: center;
    }

    .sites__types-container {
        flex-direction: column;
        gap: 20px;
    }

    .sites__type-item {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 30px;
    }

    .type__title {
        font-size: 20px;
    }

    .type__description {
        font-size: 14px;
    }

    .type__cost {
        font-size: 25px;
    }

    .sites__cost {
        margin: 30px 0;
    }

    .problems {
        padding: 30px;
    }

    .problems__description {
        font-size: 16px;
        line-height: 16px;
    }

    .problems__container {
        flex-direction: column;
        margin: 20px 10px;
        gap: 10px;
    }

    .problems__container-left, .problems__container-right {
        gap: 10px;
    }

    .problem img {
        width: 25px;
        height: auto;
    }

    .problem .description__text {
        font-size: 14px;
        text-align: left;
        line-height: 20px;
    }

    .contact-us {
        display: flex;
        flex-direction: column;
        padding: 20px 50px;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .contact-us__title {
        font-size: 20px;
        line-height: 20px;
        white-space: normal;
    }

    .contact-us__description {
        font-size: 14px;
        line-height: 14px;
        white-space: normal;
    }

    .technologies {
        padding: 0;
    }

    .technologies__logos {
        margin: 0 40px 30px 40px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    .logo__html {
        width: 52px;
    }

    .logo__1c-bitrix {
        width: 145px;
    }

    .logo__js {
        width: 50px;
    }

    .logo__bitrix24 {
        width: 150px;
    }

    .logo__css {
        width: 45px;
    }

    .logo__react {
        width: 110px;
    }

    .logo__php {
        width: 75px;
    }

    .deadlines {
        display: flex;
        margin: 0 10px 40px 10px;
        gap: 17px;
    }

    .deadlines__container {
        flex-direction: column;
        margin: 0;
        order: 2;
        align-items: baseline;
    }

    .deadline__item {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .deadline__item p {
        order: 2;
        font-size: 16px;
        text-align: left;
        white-space: normal;
    }

    .deadline__item .block__days {
        font-size: 18px;
    }

    .deadlines__text {
        display: flex;
        flex-direction: column;
        margin: 0;
        order: 1;
        align-items: end;
        width: 50%;
        gap: 25px;

    }

    .deadlines__text-block {
        text-align: right;
    }

    .deadlines__text-block p {
        text-align: right;
    }

    .technologies__discuss-task {
        display: none;
    }

    .additional__services {
        margin: 0 10px;
    }

    .services {
        gap: 10px;
    }

    .services__description {
        display: flex;
        flex-direction: column;
    }

    .services__description .description__text {
        font-size: 16px;
        margin: 0 20px;
    }


    .services__container, .services__container-middle {
        flex-direction: column;
        gap: 10px;
    }

    .services__container .description__text, .services__container-middle .description__text {
        width: 300px;
        height: 100px;
        padding: 55px;

    }

    .services__order {
        display: none;
    }

    .bg__about-us {
        padding: 40px 10px;
    }

    .company__description {
        display: flex;
        flex-direction: column;
        padding: 20px 13px;
    }

    .company__description img {
        width: 300px;
        margin-bottom: 20px;
    }

    .company__description p {
        font-size: 16px;
        line-height: 16px;
    }

    .command__description {
        flex-direction: column;
        margin: 30px 0 20px 0;
    }

    .command__text {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .command__specialists {
        gap: 20px;
    }

    .command__info-about {
        text-align: center;
        white-space: normal;
        margin: 0 25px;
    }

    .arrows {
        width: 22px;
        height: 39px;
    }

    .photo__container {
        max-width: 330px;
        justify-items: center;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .slider-container {
        margin: 0 30px;
    }

    .slider-slide {
        padding: 0 8px;
    }

    .slider-slide.active {
        border-radius: 6px;
        width: 100%;
        max-width: 350px;
        justify-items: center;
        align-items: center;
    }

    .review-container {
        padding: 15px;
        min-height: 280px;
        width: auto;
        max-width: 300px;
    }

    .map-logo-container {
        gap: 8px;
        margin-bottom: 12px;
    }

    .map-logo {
        height: 20px;
    }

    .map-stars {
        height: 16px;
    }

    .review-text {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .reviewer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-top: 12px;
    }

    .profile-container {
        width: 100%;
        gap: 10px;
    }

    .profile-photo {
        width: 45px;
        height: 45px;
    }

    .profile-name {
        font-size: 13px;
    }

    .profile-date {
        font-size: 11px;
        line-height: 1.3;
    }

    .watch-review {
        font-size: 11px;
        align-self: flex-end;
        margin-top: 5px;
    }

    .slider-arrow {
        width: 35px;
        height: 35px;
        top: 40%;
    }

    .slider-arrow img {
        width: 22px;
        height: 39px;
    }

    .slider-arrow-left {
        left: -20px;
    }

    .slider-arrow-right {
        right: 45px;
    }

    .command__photos {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .carousel__wrapper {
        flex: 1;
        max-width: calc(100vw - 100px); /* Учитываем ширину стрелок и отступы */
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    .carousel {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        width: 100%;
    }

    .arrows {
        flex-shrink: 0;
        width: 22px;
        height: 39px;
        cursor: pointer;
        z-index: 10;
    }

    .arrows.left {
        order: 1;
    }

    .carousel__wrapper {
        order: 2;
    }

    .arrows.right {
        order: 3;
    }

    .photo__container {
        flex-shrink: 0;
        max-width: 280px;
        width: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
    }

    .photo__container img {
        /*width: 100%;*/
        /*height: auto;*/
        border-radius: 8px;
        object-fit: cover;
    }

    .photo__caption {
        /*display: none;*/
    }

    .question {
        padding: 10px 10px;
    }

    .questions__container {
        margin: 0 10px;
        width: auto;
    }

    .questions__container-title {
        font-size: 16px;
    }

    .question p {
        font-size: 14px;
        max-width: 90%;
    }

    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
    }

    .footer__links {
        display: none;
    }

    .contacts-address, .contacts-phone, .contacts-email {
        white-space: pre-line;
        text-align: center;
        /*max-width: 90%;*/
        font-size: 14px;
    }

    .modal-content {
        padding: 10px;
    }

    .discuss-task__form {
        gap: 0;
    }

    .cookie-popup {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

@media (min-width: 431px) and (max-width: 768px) {
    :root {
        --max-width: 100vw;
    }

    .pos {
        max-width: var(--max-width);
    }

    .btn, .partners__btn, .businesses__btn, .our-works__btn, .help-me__btn, .sites__cost-btn, .contact-us__btn {
        width: 300px;
        height: 80px;
        font-size: 24px;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .universal-title {
        font-size: 40px;
        line-height: 40px;
        letter-spacing: -2px;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .header {
        left: 0;
        transform: none;
        padding: 10px 20px;
        max-width: var(--max-width);
        justify-content: space-between;
        gap: 0;
    }

    .header__logo-block {
        display: contents;
    }

    .header__logo-block img {
        width: 140px;
    }

    .header__nav {
        display: none;
    }

    .header__right-phone {
        display: none;
    }

    .header__right-icons {
        gap: 20px;
    }

    .hero-section {
        display: flex;
        flex-direction: column;
        padding-top: 70px;
        background-size: 100% auto;
        background-repeat: repeat;
    }

    .hero__content {
        display: grid;
        grid-template-rows: repeat(6, auto);
        gap: 0;
    }

    .hero__left {
        max-width: var(--max-width);
        display: contents;
    }

    .main-text {
        max-width: var(--max-width);
        display: contents;
    }

    .main-text-small {
        display: none;
        grid-row: 1;
    }

    .main-title {
        font-size: 30px;
        text-align: center;
        line-height: 40px;
        display: inline-block;
        letter-spacing: 3px;
        margin: 10px;
        grid-row: 2;
    }

    .font-2 {
        font-size: 35px;
        line-height: 35px;
        letter-spacing: -3px;
    }

    .main-subtitle, .main-subtitle-2 {
        text-align: center;
        font-size: 24px;
        white-space: normal;
        margin: 0 10px 30px 10px;
    }

    .main-subtitle {
        grid-row: 3;
    }

    .main-subtitle-2 {
        grid-row: 5;
    }

    .main-cta {
        margin: 0;
        grid-row: 6;
    }

    .btn-secondary {
        display: none;
    }

    .hero__right {
        max-width: var(--max-width);
        margin: 30px 0;
        text-align: center;
        grid-row: 4;
    }

    .hero__right img {
        width: 100%;
    }

    .advantages__container {
        flex-direction: column;
        margin-top: 40px;
    }

    .advantage-card {
        gap: 0;
    }

    .advantage-card__text {
        font-size: 24px;
        line-height: 24px;
    }

    .partners {
        padding-top: 40px;
    }

    .partners__title-container {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .partners__title {
        margin: 0 0 30px;
    }

    .slider-slide.active {
        justify-items: center;
        align-items: center;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
        top: 50%;
    }

    .slider-arrow-left {
        left: 35px;
    }

    .slider-arrow-right {
        right: 35px;
    }

    .review-container {
        width: 75%;
        height: 515px;
    }

    .our-numbs {
        margin: 40px 13px;
    }

    .our-numbs__container {
        flex-wrap: wrap;
        gap: 30px;
        max-width: var(--max-width);
    }

    .our-numbs__item {
        width: 170px;
    }

    .our-numbs__item-count {
        font-weight: 300;
        font-size: 60px;
        line-height: 60px;
    }

    .our-numbs__item-text {
        font-size: 18px;
        margin-top: 5px;
    }

    .businesses {
        margin: 0;
    }

    .businesses__title {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .businesses__type {
        gap: 20px;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .businesses__type-container {
        flex-direction: column;
        gap: 20px;
    }

    .businesses__type-item {
        font-size: 24px;
        width: 460px;
    }

    .bg__our-works {
        padding: 30px 0;
    }

    .our-works {
        margin: 40px 10px;
        max-width: var(--max-width);
    }

    .our-works__container-internal {
        display: flex;
        flex-direction: column;
    }

    .our-works__item {
        max-width: var(--max-width);
        margin: 0 auto;
        width: 95%;
    }

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

    .item__tag {
        width: fit-content;
    }

    .item__info-container {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .item__title {
        font-size: 28px;
    }

    .our-works__btn {
        margin: 30px auto;
    }

    .our-works__feedback {
        display: flex;
        flex-direction: column;
        padding: 20px 50px;
    }

    .feedback__text {
        text-align: center;
        margin-bottom: 20px;
    }

    .feedback__title {
        font-size: 30px;
        line-height: 30px;
        white-space: normal;
    }

    .feedback__description {
        font-size: 24px;
        line-height: 24px;
        white-space: normal;
    }

    .sites {
        margin: 0 10px;
    }

    .sites__description {
        flex-direction: column;
    }

    .description__text {
        white-space: normal;
        text-align: center;
    }

    .sites__types-container {
        flex-direction: column;
        gap: 20px;
    }

    .sites__type-item {
        max-width: var(--max-width);
        width: auto;
        margin: 0 auto;
        padding: 30px;
    }

    .type__title {
        font-size: 28px;
    }

    .type__description {
        font-size: 22px;
        line-height: 22px;
    }

    .type__cost {
        font-size: 30px;
    }

    .sites__cost {
        margin: 30px 0;
    }

    .problems {
        padding: 30px;
    }

    .problems__description {
        font-size: 24px;
        line-height: 24px;
    }

    .problems__container {
        flex-direction: column;
        margin: 20px 10px;
        gap: 10px;
    }

    .problems__container-left, .problems__container-right {
        gap: 10px;
    }

    .problem img {
        width: 35px;
        height: auto;
    }

    .problem .description__text {
        font-size: 22px;
        text-align: left;
        line-height: 24px;
    }

    .contact-us {
        display: flex;
        flex-direction: column;
        padding: 20px 50px;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .contact-us__title {
        font-size: 28px;
        line-height: 24px;
        white-space: normal;
    }

    .contact-us__description {
        font-size: 22px;
        line-height: 22px;
        white-space: normal;
    }

    .technologies {
        padding: 0;
    }

    .technologies__logos {
        margin: 0 40px 30px 40px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    .logo__html {
        width: 60px;
    }

    .logo__1c-bitrix {
        width: 153px;
    }

    .logo__js {
        width: 58px;
    }

    .logo__bitrix24 {
        width: 158px;
    }

    .logo__css {
        width: 53px;
    }

    .logo__react {
        width: 118px;
    }

    .logo__php {
        width: 83px;
    }

    .deadlines {
        display: flex;
        margin: 0 10px 40px 10px;
        gap: 17px;
    }

    .deadlines__container {
        flex-direction: column;
        margin: 0;
        order: 2;
        align-items: baseline;
    }

    .deadline__item {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .deadline__item p {
        order: 2;
        font-size: 24px;
        text-align: left;
        white-space: normal;
    }

    .deadline__item .block__days {
        font-size: 26px;
    }

    .deadline__item img {
        /*display: block;*/
        /*order: 1;*/
        /*transform: rotateZ(90deg);*/
        /*width: 55px;*/
        /*margin-left: 0;*/
    }

    .deadlines__text {
        display: flex;
        flex-direction: column;
        margin: 0;
        order: 1;
        align-items: end;
        width: 50%;
        gap: 25px;

    }

    .deadlines__text-block {
        text-align: right;
    }

    .deadlines__text-block p {
        text-align: right;
    }

    .technologies__discuss-task {
        display: none;
    }

    .additional__services {
        margin: 0 10px;
    }

    .services {
        gap: 10px;
    }

    .service {
        width: 100%;
        justify-content: center;
    }


    .services__description {
        display: flex;
        flex-direction: column;
    }

    .services__description .description__text {
        font-size: 24px;
        margin: 0 20px;
    }


    .services__container, .services__container-middle {
        flex-direction: column;
        gap: 10px;
    }

    .services__container .description__text, .services__container-middle .description__text {
        width: 80%;
        height: 100px;
        padding: 55px;

    }

    .services__order {
        display: none;
    }

    .bg__about-us {
        padding: 40px 10px;
    }

    .company__description {
        display: flex;
        flex-direction: column;
        padding: 20px 13px;
    }

    .company__description img {
        width: 300px;
        margin-bottom: 20px;
    }

    .company__description p {
        font-size: 24px;
        line-height: 24px;
    }

    .command__description {
        flex-direction: column;
        margin: 30px 0 20px 0;
    }

    .command__text {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .command__info-about {
        font-size: 24px;
    }

    .command__specialists {
        gap: 20px;
    }

    .command__info-about {
        text-align: center;
        white-space: normal;
        margin: 0 25px;
    }

    .arrows {
        width: 22px;
        height: 39px;
    }

    .photo__container {
        max-width: 330px;
        justify-items: center;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
    }

    .footer__links {
        display: none;
    }

    .contacts-address, .contacts-phone, .contacts-email {
        white-space: pre-line;
        text-align: center;
        /*max-width: 90%;*/
        font-size: 24px;
        line-height: 34px;
    }

    .input-wrapper .error-message.error-right {
        /* На мобильных ошибка справа превращается в ошибку снизу */
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        transform: none;
        width: auto;
        background: transparent;
        border: none;
        padding: 0 15px;
    }

    .input-wrapper {
        width: 100%;
        max-width: 344px;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    :root {
        --max-width: 100vw;
    }

    .pos {
        max-width: var(--max-width);
    }

    .btn, .partners__btn, .businesses__btn, .our-works__btn, .help-me__btn, .sites__cost-btn, .contact-us__btn {
        width: 350px;
        height: 80px;
        font-size: 28px;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .universal-title {
        font-size: 50px;
        line-height: 40px;
        letter-spacing: -2px;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .header {
        left: 0;
        transform: none;
        padding: 10px 20px;
        max-width: var(--max-width);
        justify-content: space-between;
        gap: 0;
    }

    .header__logo-block {
        display: contents;
    }

    .header__logo-block img {
        width: 140px;
    }

    .header__nav {
        display: none;
    }

    .header__right-phone {
        display: block;
        font-size: 20px;
    }

    .header__right {
        gap: 30px;
    }

    .header__right-icons {
        gap: 20px;
    }

    .hero-section {
        display: flex;
        flex-direction: column;
        padding-top: 70px;
        background-size: 100% auto;
        background-repeat: repeat;
    }

    .hero__content {
        display: grid;
        grid-template-rows: repeat(6, auto);
        gap: 0;
    }

    .hero__left {
        max-width: var(--max-width);
        display: contents;
    }

    .main-text {
        max-width: var(--max-width);
        display: contents;
    }

    .main-text-small {
        display: none;
        grid-row: 1;
    }

    .main-title {
        font-size: 34px;
        text-align: center;
        line-height: 40px;
        display: inline-block;
        letter-spacing: 3px;
        margin: 10px;
        grid-row: 2;
    }

    .font-2 {
        font-size: 40px;
        line-height: 35px;
        letter-spacing: -3px;
    }

    .main-subtitle, .main-subtitle-2 {
        text-align: center;
        font-size: 28px;
        white-space: normal;
        margin: 0 10px 30px 10px;
    }

    .main-subtitle {
        grid-row: 3;
    }

    .main-subtitle-2 {
        grid-row: 5;
    }

    .main-cta {
        margin: 0;
        grid-row: 6;
    }

    .btn-secondary {
        display: none;
    }

    .hero__right {
        max-width: var(--max-width);
        margin: 30px 0;
        text-align: center;
        grid-row: 4;
    }

    .hero__right img {
        width: 70%;
    }

    .advantages__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        place-items: center;
    }

    .advantage-card {
        gap: 0;
    }

    .advantage-card__text {
        font-size: 24px;
        line-height: 24px;
    }

    .partners {
        padding-top: 40px;
    }

    .partners__title-container {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .partners__title {
        margin: 0 0 30px;
    }

    .review-container {
        width: 80%;
        height: 350px;
    }

    .slider-slide {
        min-height: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .slider-slide.active {
        justify-items: center;
        align-items: center;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
        top: 40%;
    }

    .slider-arrow-left {
        left: 15px;
    }

    .slider-arrow-right {
        right: 15px;
    }

    .our-numbs {
        margin: 40px 13px;
    }

    .our-numbs__container {
        flex-wrap: wrap;
        gap: 30px;
        max-width: var(--max-width);
    }

    .our-numbs__item {
        width: 170px;
    }

    .our-numbs__item-count {
        font-weight: 300;
        font-size: 60px;
        line-height: 60px;
    }

    .our-numbs__item-text {
        font-size: 18px;
        margin-top: 5px;
    }

    .businesses {
        margin: 0;
    }

    .businesses__title {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .businesses__type {
        gap: 20px;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .businesses__type-container {
        flex-direction: column;
        gap: 20px;
    }

    .businesses__type-item {
        font-size: 24px;
        width: 460px;
    }

    .bg__our-works {
        padding: 30px 0;
    }

    .our-works {
        margin: 40px 10px;
        max-width: var(--max-width);
    }

    .our-works__container-internal {
        display: flex;
        flex-direction: column;
    }

    .our-works__item {
        max-width: var(--max-width);
        margin: 0 auto;
        width: 95%;
    }

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

    .item__tag {
        width: fit-content;
    }

    .item__info-container {
        display: flex;
        gap: 20px;
    }

    .item__title {
        font-size: 28px;
    }

    .our-works__btn {
        margin: 30px auto;
    }

    .our-works__feedback {
        display: flex;
        flex-direction: column;
        padding: 20px 50px;
    }

    .feedback__text {
        text-align: center;
        margin-bottom: 20px;
    }

    .feedback__title {
        font-size: 30px;
        line-height: 30px;
        white-space: normal;
    }

    .feedback__description {
        font-size: 24px;
        line-height: 24px;
        white-space: normal;
    }

    .sites {
        margin: 0 10px;
    }

    .sites__description {
        flex-direction: column;
    }

    .description__text {
        white-space: normal;
        text-align: center;
    }

    .sites__types-container {
        flex-direction: column;
        gap: 20px;
    }

    .sites__type-item {
        max-width: var(--max-width);
        width: auto;
        margin: 0 auto;
        padding: 30px;
    }

    .type__title {
        font-size: 28px;
    }

    .type__description {
        font-size: 22px;
        line-height: 22px;
    }

    .type__cost {
        font-size: 30px;
    }

    .sites__cost {
        margin: 30px 0;
    }

    .problems {
        padding: 30px;
    }

    .problems__description {
        font-size: 24px;
        line-height: 24px;
    }

    .problems__container {
        flex-direction: column;
        margin: 20px 10px;
        gap: 10px;
    }

    .problems__container-left, .problems__container-right {
        gap: 10px;
    }

    .problem img {
        width: 35px;
        height: auto;
    }

    .problem .description__text {
        font-size: 22px;
        text-align: left;
        line-height: 24px;
    }

    .contact-us {
        display: flex;
        flex-direction: column;
        padding: 20px 50px;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .contact-us__title {
        font-size: 28px;
        line-height: 24px;
        white-space: normal;
    }

    .contact-us__description {
        font-size: 22px;
        line-height: 22px;
        white-space: normal;
    }

    .technologies {
        padding: 0;
    }

    .technologies__logos {
        margin: 0 40px 30px 40px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    .logo__html {
        width: 60px;
    }

    .logo__1c-bitrix {
        width: 153px;
    }

    .logo__js {
        width: 58px;
    }

    .logo__bitrix24 {
        width: 158px;
    }

    .logo__css {
        width: 53px;
    }

    .logo__react {
        width: 118px;
    }

    .logo__php {
        width: 83px;
    }

    .deadlines {
        display: flex;
        margin: 0 10px 40px 10px;
        gap: 17px;
    }

    .deadlines__container {
        flex-direction: column;
        margin: 0;
        order: 2;
        align-items: baseline;
    }

    .deadline__item {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }

    .deadline__item p {
        order: 2;
        font-size: 24px;
        text-align: left;
        white-space: normal;
    }

    .deadline__item .block__days {
        font-size: 26px;
    }

    .deadline__item img {
        /*display: block;*/
        /*order: 1;*/
        /*transform: rotateZ(90deg);*/
        /*width: 55px;*/
        /*margin-left: 0;*/
    }

    .deadlines__text {
        display: flex;
        flex-direction: column;
        margin: 0;
        order: 1;
        align-items: end;
        width: 50%;
        gap: 25px;

    }

    .deadlines__text-block {
        text-align: right;
    }

    .deadlines__text-block p {
        text-align: right;
    }

    .technologies__discuss-task {
        display: none;
    }

    .additional__services {
        margin: 0 10px;
    }

    .services {
        gap: 10px;
    }

    .service {
        width: 100%;
        justify-content: center;
    }


    .services__description {
        display: flex;
        flex-direction: column;
    }

    .services__description .description__text {
        font-size: 24px;
        margin: 0 20px;
    }


    .services__container, .services__container-middle {
        flex-direction: column;
        gap: 10px;
    }

    .services__container .description__text, .services__container-middle .description__text {
        width: 80%;
        height: 100px;
        padding: 55px;

    }

    .services__order {
        display: none;
    }

    .bg__about-us {
        padding: 40px 10px;
    }

    .company__description {
        display: flex;
        flex-direction: column;
        padding: 20px 13px;
    }

    .company__description img {
        width: 300px;
        margin-bottom: 20px;
    }

    .company__description p {
        font-size: 24px;
        line-height: 24px;
    }

    .command__description {
        flex-direction: column;
        margin: 30px 0 20px 0;
    }

    .command__photos {
        gap: 15px;
    }

    .command__text {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .command__info-about {
        font-size: 24px;
    }

    .command__specialists {
        gap: 20px;
    }

    .command__info-about {
        text-align: center;
        white-space: normal;
        margin: 0 25px;
    }

    .arrows {
        width: 22px;
        height: 39px;
    }

    .photo__container {
        max-width: 330px;
        justify-items: center;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
    }

    .footer__links {
        display: none;
    }

    .contacts-address, .contacts-phone, .contacts-email {
        white-space: pre-line;
        text-align: center;
        /*max-width: 90%;*/
        font-size: 24px;
        line-height: 34px;
    }

    .input-wrapper .error-message.error-right {
        /* На мобильных ошибка справа превращается в ошибку снизу */
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        transform: none;
        width: auto;
        background: transparent;
        border: none;
        padding: 0 15px;
    }

    .input-wrapper {
        width: 100%;
        max-width: 344px;
    }
}

@media (min-width: 1201px) and (max-width: 1769px) {

    :root {
        --max-width: 90vw;
    }

    .pos {
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .universal-title {
        font-size: 54px;
        line-height: 54px;
        text-align: center;
        margin-bottom: 40px;
    }

    .header {
        max-width: 100vw;
        padding: 20px 40px;
        justify-content: space-between;
        gap: 20px;
    }

    .header__logo-block img {
        width: 160px;
    }

    .header__logo-subtitle {
        display: none;
    }

    .header__right {
        gap: 40px;
    }

    .hero-section {
        padding-top: 100px;
        background-size: cover;
    }

    .header__nav-list {
        gap: 20px;
    }

    .hero__left {
        width: 55%;
    }

    .main-text {
        width: auto;
    }

    .hero__content {
        gap: 5px;
        justify-content: space-between;
        align-items: center;
    }

    .main-text__small {
        font-size: 22px;
    }

    .main-title {
        font-size: 38px;
        line-height: 50px;
        letter-spacing: 2px;
    }

    .font-2 {
        font-size: 44px;
        line-height: 44px;
    }

    .main-subtitle, .main-subtitle-2 {
        font-size: 24px;
        line-height: 32px;
        white-space: normal;
    }

    .hero__right {
        width: 45%;
    }

    .hero__right img {
        width: 100%;
    }

    .advantages__container {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    .partners__title-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
        max-width: var(--max-width);
    }

    .slider-arrow {
        width: 50px;
        height: 50px;
        top: 40%;
    }

    .slider-slide.active {
        align-items: center;
    }

    .partners-slider {
        overflow: visible;
    }

    .our-numbs__item {
        width: 180px;
    }

    .our-numbs__item-count {
        font-size: 66px;
    }

    .our-numbs__item-text {
        font-size: 20px;
    }

    .businesses {
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .businesses__type {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .businesses__type-container {
        display: contents;
    }

    .our-works__container-internal {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .our-works__feedback {
        padding: 30px;
        flex-direction: column;
        gap: 20px;
    }

    .feedback__text {
        text-align: center;
    }

    .sites__title {
        text-align: left;
    }

    .sites__description .description__text {
        white-space: normal;
        width: 35%;
    }

    .sites {
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .sites__types-container {
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .sites__type-item {
        width: 325px;
        height: 478px;
        padding: 20px 10px;
    }

    .type__title {
        text-align: center;
    }

    .type__description {
        white-space: normal;
    }


    .item__title {
        font-size: 30px;
    }

    .feedback__title, .contact-us__title {
        font-size: 32px;
        line-height: 36px;
    }

    .feedback__description, .contact-us__description {
        font-size: 26px;
        line-height: 30px;
    }

    .problems__container {
        max-width: var(--max-width);
        margin: 20px auto;
        justify-content: center;
        gap: 50px;
    }

    .contact-us {
        padding: 30px 0;
    }

    .technologies__logos {
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .technologies__logos img {
        max-width: 160px;
        height: auto;
    }

    .deadlines__container, .deadlines__text {
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .deadline__item img {
        max-width: 100px;
    }

    .deadline__item p {
        font-size: 26px;
    }

    .discuss-task__form {
        flex-direction: column;
    }

    .additional__services {
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .services__title {
        text-align: left;
    }

    .services__description .description__text {
        white-space: normal;
        width: 45%;
    }

    .services__container, .services__container-middle {
        display: contents;
    }

    .services {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .service .description__text {
        width: 350px;
    }

    .services__order {
        margin: 30px 0 0;
    }

    .services__order .description__text {
        white-space: normal;
        font-size: 26px;
        width: 45%;
    }

    .order__btn {
        width: 400px !important;
    }

    .company__description img {
        width: 35%
    }

    .company__description p {
        white-space: normal;
        width: 60%;
    }

    .command__info-about {
        width: 400px;
        white-space: normal;
    }

    .input-wrapper {
        max-width: 400px;
    }

    .footer {
       flex-wrap: wrap;
        gap: 30px;
    }

    .footer a img {
        width: 300px;
    }
}