@media (max-width: 1280px) {
  :root {
    --width-about-us-img: 207px;
    --padding-left-benefit: 30px;
    --gap-about-us-benefits: 5px;
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: calc(100px - var(--height-header) - 5px);
  }

  .title {
    font-size: 16px;
  }

  .header__nav {
    column-gap: 34px;
  }

  .brand__swiper {
    width: 434px;
    margin: 0 auto 30px;
    overflow: hidden;
  }

  .brand__swiper-slide .brand__swiper-slide__wrapper {
    opacity: 1;
    transform: scale(1) !important;
  }

  .brand__swiper-slide__title {
    display: block;
  }

  .brand__title {
    font-size: 60px;
  }

  .description {
    font-size: 48px;
    max-width: none;
  }

  .about-us__intro__wrapper {
    flex-direction: column;
    row-gap: 20px;
  }

  .about-us__img {
    width: var(--width-about-us-img);
    height: var(--width-about-us-img);
    left: calc(50% - var(--width-about-us-img) / 2);
  }

  .about-us__text {
    max-width: 235px;
    font-size: 14px;
  }

  .about-us__gallery {
    gap: 15px;
    padding-top: 20px;
  }

  .about-us__gallery__text {
    font-size: 14px;
    max-width: 220px;
  }

  .about-us__gallery-wrapper {
    gap: 10px;
    width: auto;
  }

  .about-us__intro {
    margin-bottom: 100px;
  }

  .about-us__gallery {
    margin-bottom: 100px;
  }

  .about-us__benefit__achievement {
    gap: 5px;
  }

  .about-us__benefit__achievement__years {
    font-size: 52px;
  }

  .about-us__benefit__achievement__text {
    font-size: 16px;
    max-width: 155px;
  }

  .about-us__benefit {
    font-size: 16px;
  }

  .about-us__benefit-1 {
    max-width: calc(143px + var(--padding-left-benefit));
  }

  .about-us__benefit-2 {
    max-width: calc(141px + var(--padding-left-benefit));
  }

  .about-us__benefit-3 {
    max-width: calc(196px + var(--padding-left-benefit));
  }

  .about-us__benefit-4 {
    max-width: calc(235px + var(--padding-left-benefit));
  }

  .categories__slider__tabs {
    overflow-x: scroll;
    padding-bottom: 4px;
    flex-wrap: nowrap;
    width: calc(100% + 30px);
    margin-left: -15px;
    padding: 0 15px 6px;
    margin-bottom: 15px;
  }

  .categories__mosaic__tabs {
    overflow-x: scroll;
    padding-bottom: 4px;
    flex-wrap: nowrap;
    width: calc(100% + 30px);
    margin-left: -15px;
    padding: 0 15px 6px;
    margin-bottom: 15px;
  }

  .categories__tab {
    font-size: 18px;
    border-radius: 13px;
    padding: 10px;
    flex-shrink: 0;
  }

  .categories__swiper {
    height: 100%;
    width: calc(100% + 30px);
    padding: 0 15px;
    margin-left: -15px;
  }

  .categories__swiper-button__navigation {
    width: 50px;
    height: 50px;
    padding: 8px;
  }

  .categories__swiper-button__navigation svg {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 1000px) {
  :root {
    --column-gap-individual-approach-content: 40px;
    --width-individual-approach-benefits: 45.5%;
    --width-pause-button: 80px;
    --height-pause-button: 50px;
    --height-header: 64px;
    --gap-categories-mosaic: 10px;
  }

  main {
    padding-top: calc(var(--height-header) + 32px);
  }

  .header__logo-desktop {
    display: none;
  }

  .header__logo__link {
    width: 82px;
    height: 40px;
  }

  .header__logo-mobile {
    display: block;
  }

  .header__wrapper {
    padding: 15px;
  }

  .header__nav-item {
    font-size: 14px;
  }

  .brand__title {
    font-size: 54px;
    margin-bottom: 75px;
  }

  .brand__swiper {
    margin-bottom: 40px;
  }

  .brand__swiper-pagination {
    background-color: transparent;
    padding: 0px;
  }

  .illustration__play,
  .illustration__pause {
    padding: 13px 0;
  }

  .illustration__play svg,
  .illustration__pause svg {
    height: 24px;
    width: 24px;
  }

  .illustration__pause {
    display: flex;
  }

  .advantages__cards__wrapper {
    width: calc(100% - 360px);
    max-width: 460px;
  }

  .advantages__card {
    row-gap: 10px;
    padding: 15px;
  }

  .about-us__benefit__achievement {
    flex-direction: column;
    gap: 0px;
    align-items: start;
    padding-left: 5px;
  }

  .about-us__benefit__achievement__text {
    max-width: 140px;
  }

  .advantages__card__title {
    font-size: 22px;
    max-width: none;
    width: 210px;
    flex-shrink: 0;
  }

  .advantages__card__description {
    font-size: 14px;
  }

  .individual-approach__benefits {
    row-gap: 40px;
  }

  .individual-approach__benefit__title {
    font-size: 22px;
  }

  .individual-approach__benefit__description {
    font-size: 14px;
  }

  .categories__mosaic__big,
  .categories__mosaic__small {
    border-radius: 16px;
  }

  .contacts__wrapper {
    margin-bottom: 50px;
  }

  .contacts__data__wrapper {
    row-gap: 16px;
  }

  .contacts__data__phone-and-cooperation {
    row-gap: 16px;
  }

  .contacts__data__title {
    font-size: 14px;
  }

  .contacts__data__value {
    font-size: 16px;
  }

  .contacts__data__phone,
  .contacts__data__cooperation,
  .contacts__data__support {
    row-gap: 6px;
  }

  .contacts__data__support-and-media {
    row-gap: 20px;
  }

  .contacts__input {
    font-size: 14px;
  }

  #wpcf7-f92-o1 .wpcf7-list-item-label {
    font-size: 12px;
  }

  .contacts__button {
    font-size: 16px;
    padding: 22px 0;
  }

  #wpcf7-f92-o1 .wpcf7-form-control-wrap[data-name="privacy-policy"] label {
    margin-bottom: 20px;
  }

  .categories__slider__tabs {
    margin-bottom: 10px;
  }

  .categories__mosaic__tabs {
    margin-bottom: 10px;
  }

  .categories__mosaic {
    margin-bottom: 40px;
  }

  .categories__download-catalog {
    border-radius: 16px;
    font-size: 16px;
    padding: 17px 0;
    max-width: none;
  }

  .footer {
    padding: 0 15px;
    margin-bottom: 15px;
  }

  .footer__catalog {
    padding: 15px;
  }

  .footer__logo__link {
    width: 88px;
    height: 43px;
  }

  .footer__catalog__nav {
    row-gap: 10px;
  }

  .footer__catalog__nav-item {
    font-size: 14px;
  }

  .footer__catalog__download-file {
    font-size: 14px;
  }

  .footer__catalog__social-network__wrapper {
    row-gap: 20px;
  }

  .footer__basement-left__copyright {
    font-size: 12px;
  }

  .footer__basement-left__copyright svg {
    width: 11px;
    height: 11px;
  }

  .footer__basement__link {
    font-size: 12px;
  }

  .footer__basement-right__website-created {
    font-size: 12px;
    column-gap: 4px;
  }

  .footer__basement-right__website-created svg {
    width: 86px;
    height: 14px;
  }

  .footer__basement-right__website-created__link {
    height: 14px;
  }

  .button__go-back {
    bottom: 44px;
    width: 67px;
    height: 67px;
  }
}

@media (max-width: 768px) {
  :root {
    --width-individual-approach-benefits: 100%;
  }

  .container {
    margin-bottom: calc(80px - var(--height-header) - 5px);
  }

  .description {
    font-size: 32px;
  }

  .header__wrapper {
    padding: 10px 15px;
  }

  .header__nav {
    display: none;
  }

  .header__nav__button {
    display: flex;
  }

  .header__logo__link {
    width: 76px;
    height: 37px;
  }

  .brand__title {
    font-size: 40px;
    margin-bottom: 40px;
  }

  .brand__swiper {
    width: 280px;
    height: 280px;
  }

  .brand__swiper-slide {
    width: 280px;
  }

  .brand__swiper-slide__wrapper {
    padding: 50px 40px 0;
  }

  .brand__swiper-slide__title {
    font-size: 14px;
  }

  .about-us__img {
    left: 0px;
  }

  .about-us__gallery__img:nth-child(3) {
    display: none;
  }

  .about-us__gallery-wrapper {
    justify-content: flex-end;
  }

  .about-us__gallery__img {
    width: calc(50% - 5px);
  }

  .about-us__benefits {
    max-height: none;
    align-items: center;
  }

  .advantages__cards__wrapper {
    align-self: start;
    max-width: none;
    overflow: scroll;
    width: calc(100% + 30px);
    padding-left: 15px;
    margin-left: -15px;
  }

  .advantages__cards {
    width: calc(325px * 3 + 20px + 15px);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding-right: 15px;
  }

  .advantages__card {
    width: 325px;
    min-height: 240px;
  }

  .advantages__card__text {
    flex-direction: column;
    row-gap: 10px;
  }

  .advantages__card__title {
    font-size: 18px;
    width: auto;
  }

  .advantages__sticky {
    position: relative;
    top: auto;
  }

  .about-us__benefits__img__wrapper {
    width: 100%;
    max-width: 270px;
    flex-shrink: 0;
  }

  .about-us__benefits__wrapper {
    width: 100%;
  }

  .about-us__benefit {
    font-size: 14px;
  }

  .categories__swiper-button__navigation {
    display: none;
  }

  .categories__swiper-slide {
    width: 44.8%;
  }

  .categories__tab {
    font-size: 14px;
    border-radius: 12px;
  }

  .individual-approach__content {
    flex-direction: column;
    row-gap: 40px;
  }

  .individual-approach__benefit__svg {
    width: 36px;
    height: 36px;
  }

  .individual-approach__benefit {
    flex-direction: column;
    row-gap: 10px;
  }

  .individual-approach__benefits {
    width: 100%;
  }

  .individual-approach__benefit__content {
    padding-top: 0px;
    row-gap: 20px;
  }

  .individual-approach__benefit-customized-solutions
    .individual-approach__benefit__description,
  .individual-approach__benefit-cooperation
    .individual-approach__benefit__description {
    max-width: none;
  }

  .contacts__swiper {
    width: calc(100% + 30px);
    padding-left: 15px;
    margin-left: -15px;
  }

  .contacts__swiper-button__navigation {
    display: none;
  }

  .contacts__swiper-slide {
    width: 77.3%;
  }

  .footer__logo-desktop {
    display: none;
  }
  
  .footer__logo__link {
    width: 82px;
    height: 40px;
  }

  .footer__logo-mobile {
    display: block;
  }
}

@media (max-width: 580px) {
  .about-us__gallery {
    display: flex;
    flex-direction: column-reverse;
  }

  .about-us__gallery-wrapper {
    max-width: 390px;
  }

  .about-us__gallery__text {
    max-width: none;
  }

  .about-us__benefits {
    flex-direction: column;
    row-gap: 15px;
  }

  .about-us__benefits__img__wrapper {
    max-width: none;
  }

  .categories__mosaic__big {
    border-radius: 20px;
  }

  .categories__mosaic__small {
    border-radius: 12px;
  }

  .contacts__wrapper {
    flex-direction: column;
    row-gap: 45px;
  }

  .contacts__title {
    margin-bottom: 40px;
  }

  #wpcf7-f92-o1 {
    width: 100%;
  }

  .contacts__data__phone-and-cooperation {
    flex-direction: row-reverse;
    column-gap: 60px;
  }

  .contacts__data__support-and-media {
    flex-direction: row;
    column-gap: 60px;
  }

  .footer__catalog {
    flex-direction: column;
    row-gap: 40px;
  }

  .footer__logo__link {
    width: 66px;
    height: 32px;
  }

  .footer__catalog__social-network__item {
    padding: 10px;
    height: 40px;
  }

  .footer__catalog__content {
    width: auto;
  }

  .footer__catalog__social-network__item svg {
    width: 20px;
    height: 20px;
  }

  .footer__basement {
    justify-content: space-between;
  }

  .footer__basement-left {
    flex-direction: column-reverse;
    row-gap: 20px;
    width: auto;
    align-items: start;
  }

  .footer__basement-right {
    flex-direction: column;
    row-gap: 20px;
    width: auto;
  }

  .footer__basement-left__copyright {
    margin-right: auto;
    column-gap: 2px;
  }

  .footer__basement-right__link {
    width: auto;
  }

  .footer__basement-right__website-created {
    width: auto;
  }

  .button__go-back {
    bottom: 87px;
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  :root {
    --width-about-us-img: 110px;
    --width-pause-button: 40px;
    --height-pause-button: 25px;
    --height-header: 57px;
  }

  main {
    padding-top: calc(var(--height-header) + 30px);
  }

  .title {
    font-size: 14px;
  }

  .description {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .brand__title {
    font-size: 32px;
    line-height: 110%;
  }

  .illustration__play,
  .illustration__pause {
    padding: 5.5px 0;
  }

  .illustration__play svg,
  .illustration__pause svg {
    height: 14px;
    width: 14px;
  }

  .about-us__img {
    position: relative;
    left: auto;
    float: left;
    margin-bottom: 10px;
    margin-right: 15px;
  }

  .about-us__text__wrapper {
    display: inline;
    align-items: unset;
    flex-direction: unset;
  }

  .about-us__intro {
    margin-bottom: 80px;
  }

  .about-us__gallery {
    margin-bottom: 80px;
  }

  .about-us__benefits__svg {
    transform: translateX(-55px);
  }

  .individual-approach__benefit__title {
    font-size: 18px;
  }

  .categories__mosaic {
    margin-bottom: 20px;
  }

  .categories__mosaic__top {
    flex-direction: column;
  }

  .categories__mosaic__top-left {
    width: 100%;
  }

  .categories__mosaic__top-right {
    flex-direction: column-reverse;
    width: 100%;
  }

  .categories__mosaic__bottom {
    flex-direction: column;
  }

  .categories__mosaic__bottom__item {
    width: 100%;
  }

  .categories__download-catalog {
    border-radius: 10px;
    font-size: 14px;
    padding: 14px 0;
  }

  .contacts__wrapper {
    margin-bottom: 40px;
  }

  .contacts__data__media__item {
    width: 40px;
    height: 40px;
    padding: 10px;
  }

  .contacts__data__media__item svg {
    width: 20px;
    height: 20px;
  }

  .contacts__description {
    margin-bottom: 10px;
  }

  .contacts__input-message {
    margin-bottom: 10px;
  }

  .contacts__data__value {
    font-size: 14px;
  }

  #wpcf7-f92-o1 .wpcf7-form-control-wrap[data-name="privacy-policy"] label {
    margin-bottom: 20px;
  }

  .contacts__button {
    font-size: 14px;
    line-height: 100%;
    padding: 20px 0;
  }
}