body {
  --color1: #efefef;
  --color2: #10151d;
  --color3: #727780;
  --color3Shadow: #72778045;
  --colorShadowAnimation: #5c97f65d;
  --colorAnimation: #dfe9f2;
  --colorMain: #4f7df5;
}

@media (max-width: 1335px) {
  /* Адаптация section About-me */
  .about-me {
    & .about-me__elements {
      gap: 40px;

      & img {
        max-width: 450px;
      }
    }
  }
}

@media (max-width: 1170px) {
  header h1 {
    font-size: 46px !important;
  }

  header .title {
    margin-left: 0 !important;
  }

  /* Адаптация section About-me */
  .about-me {
    & .about-me__elements {
      & p {
        font-size: 14px;
      }
    }
  }
}

@media (max-width: 1000px) {
  /* Адаптация Header */
  header {
    max-height: 100vh;
    height: auto;
    & .header__elements {
      flex-direction: column-reverse;
      gap: 60px;
      padding: 110px 0 100px 0;

      & .header__info {
        justify-content: center;
        align-items: center;
        & .title {
          & h1 {
            text-align: center !important;
            font-size: 40px !important;
            margin-bottom: 10px;
            margin: 0 0 28px 0;
          }
          & hr {
            display: none;
          }
        }
        & p {
          text-align: center;
        }
      }
      & img {
        max-width: 350px;
      }
    }
  }

  /* Адаптация section About-me */
  .about-me {
    & h2 {
      text-align: center;
    }
    & .about-me__elements {
      flex-direction: column;
      & p {
        font-size: 16px;
      }
    }
  }

  .projects {
    & .projects__list {
      grid-template-columns: 1fr;
    }
  }

  /* Адаптация section Price */
  .price {
    border-radius: 24px;
    background-color: #4f7ef50f;
    background-size: 400%;
    background-repeat: no-repeat;
    animation: headerBg 5s infinite linear alternate-reverse;
    box-shadow: 0px 0px 30px #f0f5ff;

    & h2 {
      font-size: 46px;
      text-align: center;
      color: var(--color2);
      font-weight: 800;
      line-height: 40px;
      margin-bottom: 60px;
    }

    & .price__elements {
      flex-direction: column;
      gap: 60px;
      & .card__price {
        &:hover {
        }
      }
    }
  }
}

@media (max-width: 825px) {
  /* Адаптация section Projects */
  .projects {
    & h2 {
      margin-bottom: 50px;
    }

    & .projects__intro {
      margin-bottom: 34px;

      & p {
        font-size: 15px;
      }
    }

    & .projects__list {
      padding: 20px 20px 32px;
      position: relative;
      width: 100vw;
      left: -20px;
      flex-wrap: nowrap;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      justify-content: start;
      pointer-events: visible;
      gap: 18px;
      scroll-snap-type: x proximity;

      & .project__item {
        min-width: clamp(420px, 72vw, 560px);
        max-width: clamp(420px, 72vw, 560px);
        scroll-snap-align: start;
      }

      &::-webkit-scrollbar {
        height: 7px; /* Высота горизонтального скроллбара */
      }
      &::-webkit-scrollbar-track {
        background: #f3f4f6; /* Светло-серый фон трека */
        border-radius: 3px;
      }
      &::-webkit-scrollbar-thumb {
        background: var(--colorMain); /* Ваш синий цвет */
        border-radius: 3px;
        transition: background 0.3s ease;
      }
    }
  }
}

@media (max-width: 768px) {
  /* Адаптация навигационной панели */
  nav {
    & .nav__elements {
      & .hamburger {
        display: block;
        width: 40px;
        height: 20px;
        position: relative;
        background: transparent;
        outline: none;
        border: none;

        &.hamburger_active {
          & span {
            &:nth-child(1) {
              top: 9px;
              transform: rotate(45deg);
            }
            &:nth-child(2) {
              transform: translateX(-150%);
              opacity: 0;
            }
            &:nth-child(3) {
              bottom: 9px;
              transform: rotate(-45deg);
            }
          }
        }

        & span {
          position: absolute;
          background-color: var(--color2);
          height: 2px;
          width: 100%;
          left: 0;
          transition: 0.4s;

          &:nth-child(1) {
            top: 0;
          }
          &:nth-child(2) {
            top: 9px;
          }
          &:nth-child(3) {
            bottom: 0;
          }
        }
      }

      .nav__links {
        width: 100%;
        height: 100%;
        position: fixed;
        flex-direction: column;
        background-color: var(--color1);
        top: 0px;
        right: -100%;
        align-items: end;
        justify-content: start;
        z-index: 0;
        padding: 20vh 20vw 0px 0px;
        transition: 0.4s ease-in-out;

        & a {
          font-size: 22px;
          font-weight: 700;
          line-height: 120%;
          border-bottom: 1px solid var(--color2);
          & i {
            display: inline-block;
            margin-right: 5px;
          }
          &:hover {
            color: var(--colorMain);
            border-bottom: 1px solid var(--colorMain);
          }
        }

        &.nav__links_active {
          right: 0%;
        }
      }

      a img {
        z-index: 1;
        position: relative;
      }

      .nav__contacts {
        display: flex;
        position: fixed;
        bottom: 15vh;
        right: -100vw;
        gap: 20px;
        transition: 0.4s ease-in-out;

        & a {
          font-size: 24px;
          line-height: 120%;
          &:hover {
            color: var(--colorMain);
          }
        }

        &.nav__contacts_active {
          right: 20vw;
        }
      }
    }
  }

  /* Адаптация процесса работы */

  .process .process__card {
    width: 100%;
  }

  .process .process__bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .projects {
    & .projects__filters {
      justify-content: flex-start;

      & .projects__filter {
        padding: 10px 14px;
        font-size: 16px;
      }
    }

    & .projects__list {
      & .project__item {
        min-width: min(84vw, 430px);
        max-width: min(84vw, 430px);
        padding: 20px;
        gap: 16px;

        & .project__top {
          align-items: flex-start;
          flex-direction: column;
          gap: 14px;
        }

        & img {
          width: 78px;
          height: 78px;
          padding: 10px;
          border-radius: 16px;
        }

        & .project__meta {
          gap: 10px;
        }

        & .project__type {
          font-size: 11px;
          padding: 7px 10px;
        }

        & .project__stack {
          gap: 6px;

          & span {
            font-size: 12px;
            padding: 6px 9px;
          }
        }

        & .project__content {
          gap: 14px;

          & h3 {
            font-size: 21px;
          }

          & .project__lead {
            font-size: 14px;
            line-height: 145%;
          }
        }

        & .project__benefits {
          gap: 8px;

          & span {
            font-size: 12px;
            padding: 7px 9px;
            border-radius: 10px;
          }
        }

        & .project__facts {
          grid-template-columns: 1fr;

          & div {
            padding: 12px;
            gap: 6px;
            border-radius: 16px;
          }

          & strong {
            font-size: 12px;
          }

          & span {
            font-size: 13px;
            line-height: 140%;
          }
        }

        & .project__details {
          padding-top: 14px;

          & summary {
            font-size: 13px;
          }

          & p {
            font-size: 13px;
            line-height: 150%;
          }
        }

        & .project__actions {
          gap: 10px;

          & a {
            flex-basis: 100%;
            padding: 12px;
            font-size: 14px;
            border-radius: 12px;
          }
        }
      }
    }
  }
}

@media (max-width: 450px) {
  .projects {
    & .projects__list {
      & .project__item {
        min-width: 90vw;
        max-width: 90vw;
        padding: 18px;
      }
    }
  }
}

@media (max-width: 525px) {
  /* Адаптация Header */
  header {
    & .header__elements {
      flex-direction: column-reverse;
      gap: 40px !important;

      & .header__info {
        justify-content: center;
        align-items: center;
        & .title {
          & h1 {
            text-align: center;
            font-size: 30px !important;
            margin-bottom: 20px !important;
          }
          & hr {
            display: none;
          }
        }
        & p {
          text-align: center;
          font-size: 16px;
        }
        & a {
          width: 80%;
          text-align: center;
        }
      }
      & img {
        max-width: 350px;

      }
    }
  }

  /* Адаптация section About-me */
  .about-me {
    & .about-me__elements {
      gap: 40px;

      & p {
        padding: 16px 12px;
        font-size: 16px;
      }
    }
  }

  /* Адаптация Footer */
  footer {
    & .footer__elements {
      flex-direction: column;
      gap: 28px;
    }
  }

  /* Адаптация Процесса работы */

  .process .process__card-title {
    align-items: center;
    justify-content: center;
  }

  .process .process__card-title h3 {
    margin-top: 50px;
    text-align: center;
    padding: 0;
    margin-bottom: 10px;
  }

  .process .process__number {
    right: 50%;
    transform: translateX(50%);
  }
}

@media (max-width: 400px) {
  /* Адаптация Header */
  header {
    & .header__elements {
      flex-direction: column-reverse;
      gap: 60px;

      & .header__info {
        justify-content: center;
        align-items: center;
        & .title {
          & h1 {
            text-align: center;
            font-size: 26px;
            margin-bottom: 10px;
          }
          & hr {
            display: none;
          }
        }
        & p {
          text-align: center;
          font-size: 16px;
        }
        & a {
          width: 80%;
          text-align: center;
        }
      }
      & img {
        max-width: 350px;
      }
    }
  }

  /* Адаптация процесса работы */

  .process .process__card-title {
    padding: 20px 16px;
  }

  .process .process__elements {
    gap: 40px;
  }
}