@media (max-width: 1350px) {
    .section__container {
        padding: 0 40px;
    }

    .hero__content {
        padding: 100px 0;
    }

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

    .contact-form__content {
        display: flex;
        flex-direction: column;
        max-width: 1000px;
        width: 100%;
    }

    .contact-form__title {
        text-align: center;
    }

    .contact-form__fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .contact-form__input {
        width: 100%;
    }

    .contact-form__image {
        display: none;
    }

    .footer__grid {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
    }

    .portfolio__card-portfolio {
        width: 100%;
        max-width: 580px;
    }

    .contact-form__wave:before {
        left: -10px;
        bottom: 110px;
        width: 1505px;
        height: 759px;
        background-image: url("../images/contact-form/form_wave_left_mobile.webp");
    }

    .contact-form__wave::after {
        right: -630px;
        bottom: 110px;
        width: 1005px;
        height: 759px;
        background-image: url("../images/contact-form/form_wave_right_mobile.webp");
    }
}

@media (max-width: 1024px) {
    .hero__wave {
        top: 720px;
        left: 30px;
        width: 1000px;
        height: 759px;
    }

    .services__wave {
        position: absolute;
        left: 0;
        bottom: -80px;
        width: 1005px;
        height: 759px;
        background-image: url("../images/services/service_wave_mobile.webp");
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
        opacity: 0.4;
        z-index: 0;
    }

    .contact-form__wave {
        display: none;
    }

    .portfolio__row-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .portfolio__grid::-webkit-scrollbar {
        display: none;
    }

    .hero__info {
        margin-bottom: 120px;
    }

    .services,
    .portfolio,
    .contact-form {
        padding: 80px 0;
    }

    .service-card__title--desktop {
        display: none;
    }

    .service-card__content {
        flex-direction: column;
        gap: 20px;
    }

    .service-card__title--mobile {
        display: block;
        text-align: center;
        order: 1;
    }

    .service-card__image {
        order: 2;
    }

    .service-card__info {
        order: 3;
        gap: 16px;
    }

    .service-card__list {
        gap: 12px;
    }

    .services__tab {
        line-height: 1.2;
    }

    .service-card__title {
        font-size: 28px;
    }

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

    .portfolio__grid-portfolio {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .portfolio-page__wave,
    .project-page__wave {
        width: 1005px;
        height: 759px;
        top: 120px;
        left: 0;
    }
}

@media (max-width: 950px) {
    .hero::after {
        display: none;
    }

    .services__tab {
        padding: 16px 20px;
    }

    .footer .section__container {
        padding: 0;
    }

    .footer {
        padding: 24px 0 0;
    }

    .footer__grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .footer__company {
        display: contents;
    }

    .footer__contacts {
        border-top: 1px solid var(--white-3);
    }

    .footer__nav,
    .footer__contacts {
        border-bottom: 1px solid var(--white-3);
    }

    .footer__contacts,
    .footer__nav,
    .footer__company-info {
        padding: 24px 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .footer__logo {
        order: 1;
        margin-bottom: 24px;
    }

    .footer__contacts {
        order: 2;
    }

    .footer__nav {
        order: 3;
    }

    .footer__company-info {
        order: 4;
    }
}

@media (max-width: 900px) {
    .services__tab {
        padding: 15px;
    }
}

@media (max-width: 820px) {
    .hero__wave {
        top: 750px;
        left: -200px;
        width: 1320px;
        height: 600px;
        background-image: url("../images/hero/hero_wave.webp");
        opacity: 0.55;
    }

    .hero::before {
        width: 2339px;
        height: 1161px;
        left: -300px;
        top: -174px;
        background-image: url("../images/hero/vector1.svg");
        filter: blur(100px);
    }
}

@media (max-width: 768px) {
    .services,
    .portfolio,
    .contact-form {
        padding: 65px 0;
    }

    .hero__wave {
        top: 710px;
        left: -300px;
        width: 1200px;
        height: 670px;
        background-image: url("../images/hero/hero_wave.webp");
        opacity: 0.55;
    }

    .section__container {
        padding: 0 24px;
        overflow: visible;
    }

    .header__button {
        display: none;
    }

    .header__controls {
        gap: 16px;
    }

    .contact-form__title {
        font-size: 65px;
    }

    .section__title {
        font-size: 50px;
    }

    .hero__content {
        padding: 92px 0;
    }

    .services {
        padding: 56px 0;
    }

    .services__tabs {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .services__tab {
        flex: 0 0 40%;
        scroll-snap-align: start;
    }

    .portfolio {
        overflow: visible;
    }

    .portfolio__grid.portfolio__row-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: unset !important;
        width: 100% !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        gap: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-inline: 24px;
    }

    .portfolio__grid.portfolio__row-mobile > .column {
        display: contents !important;
    }

    .portfolio__grid.portfolio__row-mobile .portfolio__card-mobile {
        flex: 0 0 300px !important;
        width: 300px !important;
        height: 300px !important;
        scroll-snap-align: start;
    }

    .contact-form__footer {
        align-items: center;
    }

    .project-page__card-title {
        font-size: 28px;
    }

    .project-page__card-text {
        font-size: 14px;
    }

    .project-page__card {
        padding: 24px;
    }
}

@media (max-width: 690px) {
    .hero__wave {
        top: 690px;
        left: -160px;
        width: 2330px;
        height: 438px;
        background-image: url("../images/hero/hero_wave.webp");
        opacity: 0.55;
    }

    .hero__title {
        font-size: 75px;
    }

    .contact-form__title {
        font-size: 60px;
    }

    .contact-form__title {
        text-align: center;
    }

    .section__title {
        font-size: 45px;
    }

    .hero__tag {
        font-size: 22px;
    }

    .subscribe__actions {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .subscribe__input,
    .subscribe__button {
        width: 100%;
    }
}

@media (max-width: 568px) {
    .hero__wave {
        top: 650px;
        left: -100px;
        width: 2330px;
        height: 438px;
        background-image: url("../images/hero/hero_wave.webp");
        opacity: 0.55;
    }

    .hero__title {
        font-size: 65px;
        line-height: 1.2;
    }

    .services__tab {
        padding: 10px 15px;
    }

    .contact-form__fields {
        display: flex;
        flex-direction: column;
    }

    .contact-form__file-row {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .contact-form__content {
        padding: 30px;
    }

    .portfolio__card-portfolio {
        height: 300px
    }

    .portfolio-page__hero-bg::before,
    .project-page__bg::before {
        left: -120px;
        top: -20px;
        width: 400px;
        height: 1389px;
        filter: blur(80px);
        opacity: 0.7;
        z-index: -1;
    }

    .portfolio-page__wave,
    .project-page__wave {
        width: 800px;
        height: 759px;
        top: 120px;
        left: 0;
    }
}

@media (max-width: 480px) {
    .section__container {
        padding: 0 16px;
    }

    .hero__wave {
        top: 575px;
        left: -200px;
        width: 900px;
        height: 438px;
        background-image: url("../images/hero/hero_wave.webp");
        opacity: 0.55;
    }

    .hero::after {
        width: 600px;
        height: 500px;
        right: -180px;
        top: 0;
        background-image: url("../images/hero/vector_mobile2.svg");
        opacity: 0.5;
        filter: blur(40px);
    }

    .hero__button-text,
    .service-card__button,
    .contact-form__submit-text {
        font-size: 17px;
    }

    .section__button {
        width: 288px;
        height: 56px;
    }

    .hero__tag,
    .subscribe__title,
    .footer__contact-link {
        font-size: 18px;
    }

    .section__title {
        font-size: 32px;
    }

    .service-card__item,
    .services__tab,
    .contact-form__label,
    .contact-form__file-text,
    .contact-form__checkbox-text,
    .subscribe__button-text,
    .footer__title,
    .footer__text,
    .footer__link,
    .footer__company-text,
    .section__dropdown-text,
    .lang-switcher__link,
    .contact-form__checkbox-accent,
    .breadcrumbs__link,
    .breadcrumbs__current,
    .portfolio__hover-text {
        font-size: 14px;
    }

    .service-card__title {
        font-size: 20px;
    }

    .service-card__button {
        width: 237px;
        height: 48px;
    }

    .contact-form__title {
        font-size: 50px;
        line-height: 1.2;
    }

    .contact-form__input,
    .contact-form__textarea,
    .subscribe__input {
        font-size: 12px;
    }

    .header__logo,
    .footer__logo {
        width: 166px;
        height: 40px;
    }

    .hero__title {
        font-size: 55px;
    }

    .section__portfolio {
        padding: 32px 0 56px 0;
    }

    .portfolio__hover-title {
        font-size: 23px
    }

    .section__title.portfolio__title {
        position: relative;
        z-index: 1;
    }

    .portfolio__card-portfolio {
        height: 250px
    }

    .project-page__title {
        text-align: center;
    }

    .project-page__card-title {
        font-size: 24px;
        text-align: center;
    }
}

@media (max-width: 414px) {
    .hero__title {
        font-size: 48px;
    }

    .contact-form__title {
        font-size: 40px;
    }

    .project-page__card {
        gap: 24px;
    }

    .project-page__link {
        width: 230px;
        height: 48px;
        padding: 10px 32px;
    }

    .project-page__link-text {
        font-size: 14px;
    }

    .portfolio__grid-portfolio,
    .portfolio__column {
        gap: 24px;
    }

    .portfolio__card-center {
        margin-top: 24px;
    }
}

@media (max-width: 375px) {
    .hero__wave {
        top: 550px;
        right: 50px;
        width: 700px;
        height: 438px;
        background: url("../images/hero/hero_wave.webp");
        background-size: cover;
        opacity: 0.55;
    }

    .hero__tag {
        padding: 13px;
    }

    .services__tab {
        flex: 0 0 50%;
    }

    .lang-switcher__toggle {
        width: 74px;
        height: 41px;
        padding: 12px 16px;
    }

    .lang-switcher__current {
        margin-left: 0;
        margin-right: 12px;
    }

    .lang-switcher__icon {
        display: none;
    }

    .lang-switcher__menu {
        width: 100%;
    }

    .portfolio__grid.portfolio__row-mobile .portfolio__card-mobile {
        flex: 0 0 292px !important;
        width: 292px !important;
        height: 292px !important;
        scroll-snap-align: start;
    }

    .portfolio__card-portfolio {
        height: 203px
    }

    .project-page__content {
        padding: 32px 0 56px 0;
    }

    .project-page__card-title {
        font-size: 20px;
    }

    .portfolio-page__wave,
    .project-page__wave {
        width: 800px;
        height: 759px;
        top: 40px;
        left: -30px;
        background: url("../images/portfolio/portfolio_wave_mobile.svg") no-repeat left top;
    }
}

@media (max-width: 360px) {
    .hero__title {
        font-size: 46px;
    }
}

@media (max-width: 344px) {
    .hero__wave {
        top: 100px;
        left: 0;
        width: 900px;
        height: 438px;
        background: url("../images/hero/hero_wave_mobile.svg");
        opacity: 0.55;
    }

    .service-card__button {
        width: 214px;
        font-size: 15px;
    }

    .hero__title {
        font-size: 44px;
    }
}