@media (hover: hover) {
  .comment__btn:hover {
    color: var(--white);
    background-color: var(--help);
  }

  .form__btn:hover {
    background-color: var(--honey);
  }
}

@media (max-width: 1500px) {
  .container1 {
    padding-left: 25px;
    padding-right: 25px;
  }

  .base {
    background-size: cover;
    background-position: center;
  }

  .base__content {
    width: 60%;
  }
}

@media (max-width: 1250px), (orientation: portrait) {
  .base__title {
    font-size: 46px;
  }

  .base__descr {
    font-size: 24px;
  }

  .base__btn {
    padding: 12px;
    font-size: 22px;
  }
}

@media (max-width: 1070px), (orientation: portrait) {
  .base__title {
    font-size: 34px;
  }

  .base__descr {
    font-size: 22px;
  }
  .base__bottom {
    flex-direction: column;
    row-gap: 20px;
  }

  .base__img {
    display: none;
  }

  .base__calc {
    font-size: 24px;
    font-weight: 500;
  }

  .subtitle {
    font-size: 48px;
  }

  .about__subtitle {
    font-size: 32px;
  }

  .about__container {
    padding: 25px;
  }

  .about__text {
    column-gap: var(--gap-30);
  }

  .about__indent {
    font-size: 18px;
  }

  .about__cards {
    max-width: 170px;
    font-size: 50px;
  }

  .about__explain {
    font-size: 14px;
  }

  .gallery__container {
    padding: 25px;
  }

  .gallery__projects {
    grid-template-columns: repeat(1, 1fr);
  }

  .question__container {
    padding: 25px;
  }

  .accord__text {
    font-size: 18px;
  }

  .comment__container {
    padding: 25px;
  }
}

@media (max-width: 881px), (orientation: portrait) {
  .header__container1 {
    justify-content: space-between;
  }

  .header__logo {
    margin: 0 auto;
  }

  .menu-wrap {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: none;
    min-width: 320px;
    height: 100%;
    padding: 100px 50px 20px 50px;
    background-color: var(--dark);
    transform: translateX(-100%);
  }

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

  .header__link {
    font-weight: 500;
  }

  .header__link:last-child {
    margin-bottom: 0;
  }

  /* СТИЛИ ДЛЯ АНИМАЦИИ БУРГЕР-ПАНЕЛИ */
  /* когда панель закрыта */
  .menu-wrap.is-active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    transform: translateX(0);
    animation-name: menu-open;
    animation-duration: 0.3s;
  }

  .menu-wrap.is-closed {
    animation-name: menu-close;
    animation-duration: 0.3s;
  }

  .burger {
    position: fixed;
    z-index: 101;
    display: block;
    width: 30px;
    height: 23px;
    color: var(--white);
    transition: color 0.5s ease;
  }

  .burger::before,
  .burger::after {
    content: "";
  }

  .burger span,
  .burger::before,
  .burger::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: currentColor;
    transform-origin: right;
    transition: transform 0.4s ease;
  }

  .burger::before {
    transform: translateY(calc(-100% - 6px));
  }

  .burger span {
    top: calc(50% - 1px);
  }

  .burger::after {
    transform: translateY(calc(100% + 5px));
  }

  .burger span::before {
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    background-color: var(--main);
    left: -10px;
    top: -23px;
    border-radius: 50%;
    z-index: -1;
  }

  /* когда панель закрыта */

  /* когда панель открыта */
  .burger:active span {
    display: none;
  }

  .is-active.burger span,
  .is-active.burger::before,
  .is-active.burger::after {
    transform-origin: center;
  }

  .is-active.burger::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .burger.is-active span {
    opacity: 0;
  }

  .is-active.burger::after {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
  /* когда панель открыта */
  /* СТИЛИ ДЛЯ АНИМАЦИИ БУРГЕР-ПАНЕЛИ */
  .subtitle {
    font-size: 36px;
  }

  .base__content {
    width: 90%;
  }

  .about__text {
    flex-direction: column;
  }

  .about__indent {
    margin-bottom: var(--gap-15);
    width: 100%;
    font-size: 16px;
  }

  .about__indent:last-child {
    margin: 0;
  }

  .about__achievs {
    display: grid;
    width: 80%;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 50px;
  }

  .about__cards {
    max-width: 180px;
    justify-self: center;
    font-size: 56px;
  }

  .about__marks {
    font-size: 60px;
  }

  .data-window__wrap {
    padding: 15px;
    width: 100%;
  }

  .form {
    row-gap: 20px;
  }

  .form__bottom {
    row-gap: 30px;
  }

  .form__input {
    padding: 20px;
    font-size: 18px;
  }

  .form__data {
    align-self: center;
    font-size: 12px;
    width: 100%;
  }

  .form__btn {
    padding: 15px 35px;
    font-size: 14px;
  }

  .form__label {
    font-size: 10px;
  }

  .accord__plus {
    padding: 10px 90px 10px 0px;
    min-height: 65px;
    font-size: 18px;
    line-height: 28px;
  }

  .accord__plus::after {
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='25' cy='25' rx='25' ry='25' fill='%23FFFFFF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.0571 24.0571L25.0571 9L25.9429 9L25.9429 24.0571L33.8835 24.0571L41 24.0571L41 24.9429L25.9429 24.9429L25.9429 40L25.0571 40L25.0571 24.9429L10 24.9429L10 24.0571L25.0571 24.0571Z' fill='black'/%3E%3C/svg%3E%0A");
  }

  .accord__plus:focus::after {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='25' cy='25' rx='25' ry='25' fill='%23FFFFFF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.0571 24.0571L25.0571 9L25.9429 9L25.9429 24.0571L33.8835 24.0571L41 24.0571L41 24.9429L25.9429 24.9429L25.9429 40L25.0571 40L25.0571 24.9429L10 24.9429L10 24.0571L25.0571 24.0571Z' fill='black'/%3E%3C/svg%3E%0A");
  }

  .accord__text {
    font-size: 14px;
    line-height: 18px;
  }

  .question__form {
    max-width: 80%;
  }

  .question__subtitle {
    font-size: 20px;
  }

  .comment__container {
    row-gap: 20px;
  }

  .comment__info {
    font-size: 22px;
  }

  .comment__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__container {
    grid-template-columns: repeat(1, 100%);
    gap: 30px;
  }

  .footer__address {
    font-size: 18px;
  }

  .footer__info {
    flex-direction: row;
    column-gap: var(--gap-25);
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
  }
}

@media (max-width: 540px), (orientation: portrait) {
  .header__logo-top {
    font-size: 34px;
  }

  .header__logo-bottom {
    font-size: 12px;
  }

  .subtitle {
    font-size: 28px;
  }

  .base__title {
    font-size: 24px;
  }

  .base__content {
    width: 100%;
  }

  .base__descr {
    font-size: 18px;
  }

  .about__subtitle {
    font-size: 26px;
  }

  .about__content {
    padding: 45px 0px;
  }

  .about__cards {
    font-size: 34px;
  }

  .about__explain {
    font-size: 12px;
  }

  .four-image {
    display: none;
  }

  .gallery__price {
    column-gap: 10px;
  }

  .gallery__info {
    font-size: 15px;
  }

  .gallery__price svg {
    width: 20px;
  }

  .accord__plus {
    padding: 10px 35px 10px 0px;
    min-height: 65px;
    font-size: 14px;
    line-height: 22px;
  }

  .accord__text:first-child {
    margin-bottom: 12px;
  }

  .question__form {
    max-width: 8100%;
  }

  .form__input {
    padding: 15px;
    font-size: 14px;
  }

  .form__textaria {
    padding: 15px 10px 10px 15px;
    font-size: 14px;
  }

  .comment__list {
    grid-template-columns: repeat(1, 1fr);
  }

  .footer__info {
    flex-direction: column;
  }
}