*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  color: #434455;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

.section {
  padding: 120px 0;
}

.container {
  width: 1158px;
  margin: 0 auto;
  padding: 0 15px;
}
/* Header */
.header {
  border-bottom: 1px solid #e7e9fc;
  box-shadow: 0px 2px 1px rgba(46, 47, 66, 0.08),
    0px 1px 1px rgba(46, 47, 66, 0.16), 0px 1px 6px rgba(46, 47, 66, 0.08);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.webstudio {
  padding: 24px 0;
  margin: 0;

  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 18px;
  /* line-height: 21px; */
  line-height: 117%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #4d5ae5;
  text-decoration: none;
  margin-right: 76px;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.studio {
  color: #2e2f42;
  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav {
  display: flex;
  align-items: center;
}

.links-list {
  display: flex;
  gap: 40px;
}

.links {
  display: block;
  padding: 24px 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #2e2f42;
  text-decoration: none;
  position: relative;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.links:hover,
.links:focus {
  color: #404bbf;
}

.links-active {
  color: #404bbf;
}

.links-active::after {
  content: "";
  border-radius: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 4px;
  background-color: #404bbf;
  color: #404bbf;
}

.contacts-list {
  font-style: normal;
  display: flex;
  gap: 40px;
  list-style: none;
}

.contacts-link {
  display: block;
  padding: 24px 0;
  font-weight: 400;
  font-size: 16px;
  /* line-height: 24px; */
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #434455;
  text-decoration: none;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contacts-link:hover,
.contacts-link:focus {
  text-decoration: none;
  color: #404bbf;
}
/* Section 1 */
.main-section {
  background-color: #2e2f42;
  padding-top: 188px;
  padding-bottom: 188px;
  background-image: linear-gradient(
      rgba(46, 47, 66, 0.7),
      rgba(46, 47, 66, 0.7)
    ),
    url("../images/people-office1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  max-width: 1440px;
  margin: 0 auto;
}

.main-text {
  font-weight: 700;
  font-size: 56px;
  /* line-height: 60px; */
  line-height: 107%;
  letter-spacing: 0.02em;
  text-align: center;
  color: #fff;
  max-width: 496px;
  margin-bottom: 48px;
  margin-left: auto;
  margin-right: auto;
}

.main-section-button {
  display: block;
  font-weight: 500;
  font-size: 16px;
  /* line-height: 24px; */
  line-height: 150%;
  letter-spacing: 0.04em;
  color: #fff;
  background: #4d5ae5;
  cursor: pointer;
  align-items: center;
  border-radius: 4px;
  padding: 16px 32px;
  margin: 0 auto;
  border: none;
  min-width: 169px;
  height: 56px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.main-section-button:hover,
.main-section-button:focus {
  color: #fff;
  background: #404bbf;
  box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08),
    0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08);
}

.main-section-button:active {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  background: #404bbf;
}

/* Section 2 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  clip-path: inset(100%);
}

.features {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  gap: 24px;
}

.features .features-item {
  flex-basis: calc((100% - 72px) / 4);
}

.features-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #8e8f99;
  border-radius: 4px;
  background-color: #f4f4fd;
  height: 112px;
  margin-bottom: 8px;
}

.features-icon {
  margin: 0;
}

.features-title {
  font-weight: 500;
  font-size: 20px;
  /* line-height: 24px; */
  line-height: 120%;
  letter-spacing: 0.02em;
  color: #2e2f42;
  margin-bottom: 8px;
}

.features-text {
  font-weight: 400;
  font-size: 16px;
  /* line-height: 24px; */
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #434455;
}
/* Section 3 */
.team {
  background: #f4f4fd;
  padding: 120px 0;
}

.team-title {
  font-weight: 700;
  font-size: 36px;
  /* line-height: 40px; */
  line-height: 111%;
  letter-spacing: 0.02em;
  text-align: center;
  color: #2e2f42;
  text-transform: capitalize;
  margin-bottom: 72px;
}

.team-list {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.team-list .team-card {
  flex-basis: calc((100% - 72px) / 4);
}

.team-card {
  background: #fff;
  gap: 24px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08),
    0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08);
  background: #fff;
}

.team-info {
  padding: 32px 0;
}

.team-name {
  font-weight: 500;
  font-size: 20px;
  /* line-height: 24px; */
  line-height: 120%;
  letter-spacing: 0.02em;
  text-align: center;
  color: #2e2f42;
  margin-bottom: 8px;
}

.team-position {
  font-weight: 400;
  font-size: 16px;
  /* line-height: 24px; */
  line-height: 150%;
  letter-spacing: 0.02em;
  text-align: center;
  color: #434455;
}

.team-list-link {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
}

.team-list-svg {
  width: 40px;
  height: 40px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.team-svg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #4d5ae5;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.team-svg-icon {
  fill: #f4f4fd;
}

.team-svg:hover,
.team-svg:focus {
  background-color: #404bbf;
}

/* Our Portfolio */
.portfolio-title {
  font-weight: 700;
  font-size: 36px;
  /* line-height: 40px; */
  line-height: 111%;
  letter-spacing: 0.02em;
  text-align: center;
  color: #2e2f42;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 72px;
}

.portfolio-row-first {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  column-gap: 24px;
  row-gap: 48px;
}

.portfolio-row-first .portfolio-row {
  flex-basis: calc((100% - 48px) / 3);
}

.portfolio-row {
  background: #fff;
  margin-bottom: 48px;
  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-container {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.row-text-position {
  padding: 40px 32px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-weight: 400;
  font-size: 16px;

  /* line-height: 24px; */
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #f4f4fd;
  background-color: #4d5ae5;
  margin: 0;
  height: 100%;
  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-row:hover .row-text-position,
.portfolio-row:focus .row-text-position {
  transform: translateY(0%);
}

.portfolio-row-first li:hover,
.portfolio-row-first li:focus {
  box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08),
    0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08);
  background: #fff;
}

.row-text-container {
  border: 1px solid #e7e9fc;
  padding: 32px 16px;
  border-top: none;
}

.row-title {
  font-weight: 500;
  font-size: 20px;
  /* line-height: 24px; */
  line-height: 120%;
  letter-spacing: 0.02em;
  color: #2e2f42;
  margin-bottom: 8px;
}

.row-text {
  font-weight: 400;
  font-size: 16px;
  /* line-height: 24px; */
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #434455;
}
/* Footer */
.footer {
  display: flex;
  background: #2e2f42;
  padding-top: 100px;
  padding-bottom: 100px;
}

.footer-container {
  display: flex;
  align-items: baseline;
}

.footer-cont {
  margin-right: 120px;
}

.footer-logo {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 18px;
  /* line-height: 21px; */
  line-height: 117%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #4d5ae5;
  text-decoration: none;
  margin-bottom: 16px;
}

.studio-logo {
  color: #f4f4fd;
}

.footer-text {
  font-weight: 400;
  font-size: 16px;
  /* line-height: 24px; */
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #f4f4fd;
  max-width: 264px;
}

.footer-social {
  margin-right: auto;
}

.footer-social-text {
  font-weight: 500;
  font-size: 16px;
  /* line-height: 24px; */
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: 16px;
}

.footer-social-list {
  display: flex;
  gap: 16px;
  list-style: none;
}

.footer-social-link {
  width: 40px;
  height: 40px;
}

.footer-svg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #4d5ae5;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-svg:hover,
.footer-svg:focus {
  background-color: #31d0aa;
}

.footer-svg-icon {
  fill: #f4f4fd;
}

/* Subscribe Form - форма підписки в footer */

.form-title {
  font-weight: 500; /* Напівжирний шрифт для лейбла */
  font-size: 16px; /* Розмір шрифту лейбла */
  line-height: 150%; /* Висота рядка для кращої читабельності */
  letter-spacing: 0.02em; /* Міжлітерний інтервал */
  color: #fff; /* Білий колір тексту на темному фоні footer */
  margin-bottom: 16px; /* Відступ знизу для відокремлення від форми */
}

/* Контейнер форми підписки - використовуємо flexbox для горизонтального розташування */
.subscribe-form {
  display: flex; /* Flexbox для горизонтального розташування елементів */
  align-items: flex-end; /* Вирівнюємо елементи по нижньому краю */
  gap: 24px; /* Відступ між елементами форми */
}

/* Лейбл для поля вводу email */
.form-label {
  display: flex; /* Flexbox для вертикального розташування */
  flex-direction: column; /* Вертикальне розташування лейбла та поля */
}

/* Поле вводу email в формі підписки */
.form-input {
  font-family: inherit; /* Наслідуємо шрифт від батьківського елемента */
  font-weight: 400; /* Звичайна товщина шрифту для тексту в полі */
  font-size: 12px; /* Розмір шрифту тексту в полі */
  line-height: 200%; /* Висота рядка для кращої читабельності */
  letter-spacing: 0.04em; /* Міжлітерний інтервал */
  color: #fff; /* Білий колір тексту */
  border: 1px solid #fff; /* Біла рамка для контрасту на темному фоні */
  border-radius: 4px; /* Заокруглені кути для сучасного вигляду */
  width: 264px; /* Фіксована ширина поля вводу */
  height: 40px; /* Висота поля вводу */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15); /* Тінь для об'ємності */
  background-color: transparent; /* Прозорий фон як у макеті */
  padding: 8px 16px; /* Внутрішні відступи: верх/низ 8px, ліво/право 16px */
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна зміна кольору рамки */
}

/* Ефекти при фокусі на полі вводу */
.form-input:focus {
  outline: none; /* Убираємо стандартну обводку браузера */
  border-color: #4d5ae5; /* Фіолетова рамка при фокусі */
}

/* Стилі для placeholder тексту */
.form-input::placeholder {
  font-family: inherit; /* Наслідуємо шрифт */
  font-weight: 400; /* Звичайна товщина шрифту */
  color: #fff; /* Білий колір placeholder */
  opacity: 0.6; /* Прозорість для відрізнення від введеного тексту */
}

/* Кнопка підписки */
.form-btn {
  font-family: inherit; /* Наслідуємо шрифт від батьківського елемента */
  font-weight: 500; /* Напівжирний шрифт для тексту кнопки */
  font-size: 16px; /* Розмір шрифту тексту кнопки */
  line-height: 150%; /* Висота рядка */
  letter-spacing: 0.04em; /* Міжлітерний інтервал */
  text-align: center; /* Центрування тексту в кнопці */
  color: #fff; /* Білий колір тексту */
  background: #4d5ae5; /* Фіолетовий фон кнопки */
  border-radius: 4px; /* Заокруглені кути */
  padding: 8px 24px; /* Внутрішні відступи: верх/низ 8px, ліво/право 24px */
  min-width: 165px; /* Фіксована ширина кнопки */
  height: 40px; /* Висота кнопки */
  cursor: pointer; /* Курсор-рука при наведенні */
  border: none; /* Без рамки */
  display: flex; /* Flexbox для розташування тексту та іконки */
  align-items: center; /* Центрування по вертикалі */
  justify-content: center; /* Центрування по горизонталі */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна анімація */
}

/* Ефекти при наведенні та фокусі на кнопці */
.form-btn:hover,
.form-btn:focus {
  background: #404bbf; /* Темніший фіолетовий при наведенні */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15); /* Тінь при наведенні */
}

/* Іконка відправки в кнопці */
.form-btn-svg {
  margin-left: 16px;
  fill: #fff; /* Білий колір іконки */
  width: 24px; /* Ширина іконки */
  height: 24px; /* Висота іконки */
  flex-shrink: 0; /* Запобігає стисненню іконки */
}

/* <!-- Modal Backdrop and Window --> */

input {
  font-family: inherit;
}

/* Backdrop - фоновий шар модального вікна */
.backdrop {
  position: fixed; /* Фіксована позиція відносно viewport */
  top: 0; /* Прикріплюємо до верху екрану */
  left: 0; /* Прикріплюємо до лівого краю екрану */
  width: 100%; /* Займає всю ширину екрану */
  height: 100%; /* Займає всю висоту екрану */
  background-color: rgba(46, 47, 66, 0.4); /* Напівпрозорий темний фон */
  display: flex; /* Використовуємо flexbox для центрування */
  align-items: center; /* Центруємо по вертикалі */
  justify-content: center; /* Центруємо по горизонталі */
  z-index: 1000; /* Високий z-index щоб модаль була поверх інших елементів */
  opacity: 1; /* Повна видимість */
  pointer-events: auto; /* Вимікаємо взаємодію з елементом */

  visibility: visible; /* Видимий елемент */
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна анімація появи/зникнення */
}

/* Клас для приховування модального вікна */
.backdrop .is-open {
  opacity: 1; /* Повна прозорість */
  visibility: hidden; /* Приховуємо(hidden) елемент */
  pointer-events: auto; /* Вимікаємо взаємодію з елементом */
}

/* Модальне вікно - основний контейнер форми */
.modal-window {
  top: 50%; /* Центруємо по вертикалі */
  left: 50%; /* Центруємо по горизонталі */
  position: absolute; /* Відносна позиція для правильного розміщення кнопки закриття */
  width: 408px; /* Фіксована ширина модального вікна */
  min-height: 584px; /* Мінімальна висота */
  background-color: #fcfcfc; /* Світлий фон */
  border-radius: 4px; /* Заокруглені кути */
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12),
    0 2px 1px 0 rgba(0, 0, 0, 0.2); /* Тінь для об'ємності */
  padding: 72px 24px 24px 24px; /* Внутрішні відступи: верх, право, низ, ліво */
  transform: translate(-50%, -50%); /* Нормальний розмір */
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна анімація масштабування */
}

/* Анімація появи модального вікна */
.backdrop.is-hidden .modal-window {
  transform: scale(0.5); /* Зменшуємо розмір при приховуванні */
}

/* Кнопка закриття модального вікна */
.modal-close-btn {
  position: absolute; /* Абсолютна позиція відносно модального вікна */
  top: 24px; /* Відступ зверху */
  right: 24px; /* Відступ справа */
  width: 24px; /* Ширина кнопки */
  height: 24px; /* Висота кнопки */
  border-radius: 50%; /* Кругла форма */
  background-color: #e7e9fc; /* Світло-синій фон */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Тонка рамка */
  cursor: pointer; /* Курсор-рука при наведенні */
  display: flex; /* Flexbox для центрування іконки */
  align-items: center; /* Центрування по вертикалі */
  justify-content: center; /* Центрування по горизонталі */
  padding: 0; /* Убираємо внутрішні відступи */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    border 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна анімація */
}

/* Ефекти при наведенні на кнопку закриття */
.modal-close-btn:hover,
.modal-close-btn:focus {
  border: none; /* Убираємо рамку */
  background-color: #404bbf; /* Темніший синій при наведенні */
}

/* Іконка закриття (хрестик) */
.btn-svg {
  fill: #2e2f42; /* Колір іконки */
  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна зміна кольору */
}

/* Зміна кольору іконки при наведенні */
.modal-close-btn:hover .btn-svg,
.modal-close-btn:focus .btn-svg {
  fill: #ffffff; /* Білий колір при наведенні */
}

/* Заголовок модального вікна */
.modal-title {
  font-weight: 500; /* Напівжирний шрифт */
  font-size: 16px; /* Розмір шрифту */
  line-height: 1.5; /* Висота рядка */
  letter-spacing: 0.02em; /* Міжлітерний інтервал */
  text-align: center; /* Вирівнювання по центру */
  color: #2e2f42; /* Темно-синій колір тексту */
  margin-bottom: 16px; /* Відступ знизу */
}

/* Форма модального вікна */
.modal-form {
  display: flex; /* Flexbox для вертикального розташування */
  flex-direction: column; /* Вертикальне розташування елементів */
}

.form-container {
  margin-bottom: 8px;
}

/* Контейнер для полів вводу з іконками */
/* Лейбли для полів вводу */
.modal-label {
  margin-bottom: 4px; /* Відступ знизу між лейблом і полем */
  position: relative; /* Відносна позиція для розміщення іконок */

  display: block; /* Flexbox для вертикального розташування */
  flex-direction: column; /* Вертикальне розташування */
  gap: 4px; /* Відступ між лейблом і полем */
  font-weight: 400; /* Звичайна товщина шрифту */
  font-size: 12px; /* Розмір шрифту */
  line-height: 1.17; /* Висота рядка */
  letter-spacing: 0.04em; /* Міжлітерний інтервал */
  color: #8e8f99; /* Сірий колір тексту */
}

.input-icon-container {
  position: relative; /* Відносна позиція для розміщення іконок */
}

/* Поля вводу в модальному вікні */
.modal-input {
  width: 100%; /* Повна ширина контейнера */
  height: 40px; /* Висота поля */
  border: 1px solid rgba(46, 47, 66, 0.4); /* Рамка з прозорістю */
  border-radius: 4px; /* Заокруглені кути */
  background-color: transparent; /* Прозорий фон */
  padding-left: 38px; /* Внутрішні відступи: зліва для іконки) */
  font-family: inherit; /* Наслідуємо шрифт */
  outline: transparent; /* Убираємо стандартну обводку */
  font-size: 12px; /* Розмір шрифту */
  line-height: 1.17; /* Висота рядка */
  letter-spacing: 0.04em; /* Міжлітерний інтервал */
  color: #2e2f42; /* Колір тексту */
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна зміна кольору рамки */
}

/* Ефекти при фокусі на полі вводу */
.modal-input:focus {
  outline: none; /* Убираємо стандартну обводку */
  border-color: #4d5ae5; /* Фіолетова рамка при фокусі */
}

/* Іконки в полях вводу - використовують SVG з файлу icons.svg */
.input-icon {
  position: absolute; /* Абсолютна позиція відносно контейнера */
  left: 16px; /* Відступ зліва */
  top: 50%; /* Позиціонуємо по центру */
  pointer-events: none; /* Вимікаємо взаємодію з іконкою */
  fill: #2e2f42; /* Колір іконки */
  transform: translateY(-50%); /* Центруємо по вертикалі */
  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна зміна кольору */
  width: 18px; /* Ширина іконки */
  height: 24px; /* Висота іконки */
  display: block; /* Блоковий елемент для кращої видимості */
}

/* Зміна кольору іконки при фокусі на полі - використовуємо селектор + для сусіднього елемента */
.modal-input:focus + .input-icon {
  fill: #4d5ae5; /* Фіолетовий колір при фокусі */
}

/* Додаткові стилі для кращої видимості іконок */
.input-icon svg {
  width: 100%;
  height: 100%;
}

/* Додаткові стилі для іконок в модальному вікні */
.input-icon {
  z-index: 1; /* Піднімаємо іконку над полем вводу */
}

/* Лейбл для текстового поля коментаря */
.modal-label-textarea {
  margin-bottom: 16px; /* Відступ знизу між лейблом і текстовим полем */
}

/* Текстове поле для коментаря */
.modal-textarea {
  width: 100%; /* Повна ширина */
  height: 120px; /* Висота текстового поля */
  border: 1px solid rgba(46, 47, 66, 0.4); /* Рамка з прозорістю */
  border-radius: 4px; /* Заокруглені кути */
  background-color: transparent; /* Прозорий фон */
  padding: 8px 16px; /* Внутрішні відступи */
  font-family: inherit; /* Наслідуємо шрифт */
  font-size: 12px; /* Розмір шрифту */
  line-height: 1.17; /* Висота рядка */
  letter-spacing: 0.04em; /* Міжлітерний інтервал */
  color: rgba(46, 47, 66, 0.4); /* Колір тексту */
  outline: transparent; /* Убираємо стандартну обводку */
  resize: none; /* Заборона зміни розміру */
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна зміна кольору рамки */
}

/* Ефекти при фокусі на текстовому полі */
.modal-textarea:focus {
  outline: none; /* Убираємо стандартну обводку */
  border-color: #4d5ae5; /* Фіолетова рамка при фокусі */
}

/* Placeholder для текстового поля */
.modal-textarea::placeholder {
  color: rgba(46, 47, 66, 0.4); /* Колір placeholder з прозорістю */
}

/* Контейнер для чекбокса та тексту */
.checkbox {
  align-items: center; /* Вирівнювання по центру */
  font-weight: 400; /* Звичайна товщина шрифту */
  font-size: 12px; /* Розмір шрифту */
  line-height: 1.17; /* Висота рядка */
  letter-spacing: 0.04em; /* Міжлітерний інтервал */
  color: #8e8f99; /* Сірий колір тексту */
  cursor: pointer; /* Курсор-рука при наведенні */
  margin-top: 16px; /* Відступ зверху */
}

.checkbox-container {
  margin-bottom: 24px; /* Відступ знизу */
}

/* Ховаємо стандартний чекбокс */
.checkbox-input {
  appearance: none; /* прибирає системний вигляд */
  position: absolute;
  opacity: 0; /* робимо невидимим */
}

/* Створюємо власний квадрат */
.checkbox-custom {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(46, 47, 66, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  fill: transparent;
  margin-right: 8px;
  vertical-align: middle;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    border 250ms cubic-bezier(0.4, 0, 0.2, 1),
    fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Коли чекбокс відмічений */
input[type="checkbox"]:checked + label .checkbox-custom {
  background-color: #404bbf; /* колір заливки */
  border: none; /* прибираємо рамку */
  fill: #f4f4fd; /* колір галочки */
}

.chekbox-svg {
  fill: #f4f4fd; /* колір галочки */
}

/* Посилання на політику конфіденційності */
.modal-policy-link {
  color: #4d5ae5; /* Фіолетовий колір посилання */
  text-decoration: underline; /* Підкреслення */
  text-decoration-skip-ink: none; /* Не пропускаємо підкреслення */
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Плавна зміна кольору */
}

/* Ефекти при наведенні на посилання */
.modal-policy-link:hover,
.modal-policy-link:focus {
  color: #404bbf; /* Темніший фіолетовий при наведенні */
}

/* Кнопка відправки форми */
.modal-send-btn {
  display: block; /* Блочний елемент */
  align-self: center; /* Центруємо кнопку */
  min-width: 169px; /* Мінімальна ширина */
  height: 56px; /* Висота кнопки */
  background-color: #4d5ae5; /* Фіолетовий фон */
  color: #ffffff; /* Білий текст */
  font-family: inherit; /* Наслідуємо шрифт */
  font-weight: 500; /* Напівжирний шрифт */
  font-size: 16px; /* Розмір шрифту */
  line-height: 1.5; /* Висота рядка */
  letter-spacing: 0.04em; /* Міжлітерний інтервал */
  border: none; /* Без рамки */
  border-radius: 4px; /* Заокруглені кути */
  cursor: pointer; /* Курсор-рука при наведенні */
  padding: 16px 32px; /* Внутрішні відступи */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15); /* Тінь */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ефекти при наведенні на кнопку */
.modal-send-btn:hover,
.modal-send-btn:focus {
  background-color: #404bbf; /* Темніший фіолетовий при наведенні */
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15); /* Тінь при наведенні */
}