.about-section {
  padding: 80px 0 40px;
  background-color: #ffffff;
}

.about-title {
  font-size: 32px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 30px;
  margin-left: calc((100% - 1637px) / 2);
  position: relative;
  top: -60px;
}

.about-banner {
  background: url("../media/about-bg.svg") center/cover no-repeat;
  padding: 60px 30px;
  text-align: center;
  width: 1637px;
  height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.about-banner h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: var(--background);
  margin-bottom: 24px;
}

.about-banner p {
  font-size: 28px;
  font-weight: 400;
  max-width: 1452px;
  line-height: 1.5;
  margin: 0 auto 36px;
  color: var(--background);
}

.about-button-box {
  width: 194px;
  height: 52px;
  margin: 0 auto;
  position: relative;
}

.about-button {
  display: inline-block;
  width: 194px;
  height: 52px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
  text-decoration: none;
  line-height: 0; 
}

.about-button img { display: block; width: 100%; height: 100%; }

.about-button__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  text-align: center;
  user-select: none;
}

.about-button:hover { transform: scale(1.03); }
.about-button:focus,
.about-button:active,
.about-button:focus-visible { outline: none; }

.services-list {
  margin-top: 60px;
  margin-left: calc((100% - 1637px) / 2);
  width: 1637px;
  box-sizing: border-box;
}

.services-list h3 {
  font-size: 32px;
  margin-bottom: 88px;
  color: var(--color-dark);
}

.services-list ol {
  column-count: 2;
  column-gap: 90px;
  column-width: calc((1637px - 90px) / 2);
  font-size: 24px;
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  color: var(--color-dark);
  list-style-position: inside;
  padding-left: 0;
}

.services-list ol li {
  margin-bottom: 70px;
  text-indent: -1.4ch;
  padding-left: 1.4ch;
}

.services-button-box {
  width: 305px;
  height: 52px;
  margin: 40px auto 0;
  position: relative;
}

.services-button {
  display: inline-block;
  width: 305px;
  height: 52px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
  text-decoration: none;
  line-height: 0;
}

.services-button img { display: block; width: 100%; height: 100%; }

.services-button__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  text-align: center;
  user-select: none;
}

.services-button:hover { transform: scale(1.03); }
.services-button:focus-visible {
  outline: 3px solid var(--color-blue-dark);
  outline-offset: 3px;
}

/* ===================== */
/*        MEDIA          */
/* ===================== */

/* 1637-: делаем блоки резиновыми */
@media (max-width: 1637px) {
  .about-banner,
  .services-list { width: 100% !important; height: auto; margin-left: 0 !important; }

  .about-title { margin-left: 20px !important; top: 0; }

  .services-list ol { column-width: auto; }
}

/* 1440: уменьшаем типографику баннера */
@media (max-width: 1440px) {
  .about-banner { padding: 56px 28px; }
  .about-banner h2 { font-size: 44px; }
  .about-banner p { font-size: 26px; max-width: 1200px; }
}

/* 1280: сужаем колонки списка и отступы */
@media (max-width: 1280px) {
  .services-list { padding: 0 28px; }
  .services-list h3 { font-size: 30px; margin-bottom: 72px; }
  .services-list ol { font-size: 22px; column-gap: 64px; }
  .services-list ol li { margin-bottom: 48px; }
}

/* 1024: компактнее баннер и текст, сохраняем 2 колонки */
@media (max-width: 1024px) {
  .about-banner { padding: 48px 24px; height: auto; }
  .about-banner h2 { font-size: 36px; }
  .about-banner p { font-size: 22px; }

  .services-list { padding: 0 24px; }
  .services-list h3 { font-size: 28px; margin-bottom: 60px; }
  .services-list ol { font-size: 20px; column-gap: 40px; }
}

/* 900: уже начинаем сваливаться в одну колонку, чтоб не ломать строки */
@media (max-width: 900px) {
  .services-list ol { column-count: 1; font-size: 20px; column-gap: 0; }
  .services-list ol li { margin-bottom: 28px; }
}

/* 820: ещё компактнее баннер */
@media (max-width: 820px) {
  .about-banner { padding: 36px 16px; }
  .about-banner h2 { font-size: 28px; }
  .about-banner p { font-size: 18px; }
  
  .services-list { padding: 0 16px; }
  .services-list h3 { font-size: 24px; margin-bottom: 32px; }
  /* здесь колонка уже 1 (см. 900px) */
}

/* 600: поджимаем кнопки и интервалы */
@media (max-width: 600px) {
  .about-button-box,
  .about-button { width: 184px; height: 48px; }
  .about-button__label { font-size: 20px; }

  .services-button-box,
  .services-button { width: 280px; height: 48px; }
  .services-button__label { font-size: 20px; }
}

/* 480: мелкая типографика баннера */
@media (max-width: 480px) {
  .about-banner h2 { font-size: 22px; }
  .about-banner p { font-size: 16px; }
}

/* 360: ещё меньше кнопки, чтобы поместились в узких вьюпортах */
@media (max-width: 360px) {
  .about-button-box,
  .about-button { width: 168px; height: 44px; }
  .about-button__label { font-size: 18px; }

  .services-button-box,
  .services-button { width: 240px; height: 44px; }
  .services-button__label { font-size: 18px; }
}

/* системная настройка — убираем анимацию, если пользователь против */
@media (prefers-reduced-motion: reduce) {
  .about-button,
  .services-button { transition: none; }
}

.about-section { overflow-x: hidden; }

/* === важное: <br> работают только на десктопе, на адаптиве скрываем === */
.about-banner br{ display: inline; }        /* десктоп — переносы как в макете */

@media (max-width: 1024px){
  .about-banner br{ display: none; }        /* планшет/мобилки — без жёстких переносов */
}