/* !!! CSS змінні для кольорів та шрифтів !!! */
:root {
  /* Основний шрифт проекту */
  --primary-family: "Roboto", sans-serif;

  /* Додатковий шрифт для логотипу */
  --second-family: "Raleway", sans-serif;

  /* Основний синій колір */
  --iris: #4d5ae5;

  /* Темніший синій для hover ефектів */
  --ocean: #404bbf;

  /* Темно-синій для заголовків */
  --navy-blue: #2e2f42;

  /* Зелений для акцентів */
  --green: #31d0aa;

  /* Сірий для основного тексту */
  --slate: #434455;

  /* Світло-сірий для рамок */
  --light-slate: #8e8f99;

  /* Світло-блакитний для рамок */
  --cornflower: #e7e9fc;

  /* Дуже світлий для фонів */
  --cloud: #f4f4fd;

  /* Напівпрозорий для модальних вікон */
  --navy-blue-modal: #2e2f4266;

  /* Напівпрозорий сірий */
  --grey: #2e2f42b3;

  /* Білий колір */
  --white: #fff;
}

/* Або modern-normalize або
*,
*::before,
*::after {
  box-sizing: border-box;
} */

/* !!! Глобальні стилі документа !!! */

/* background-color: rgb(0 255 0 / 10%); прозорий, щоб було видно накладки */

/* !!! Ховаємо заголовок !!! */

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

/* !!! Клас для приховування елементів від екрану !!! */
.visually-hidden {
  /* Абсолютне позиціонування виносить елемент з потоку */
  position: absolute;

  /* Приховуємо контент, що виходить за межі */
  overflow: hidden;

  /* Застаріла властивість для старих браузерів */
  /* stylelint-disable-next-line property-no-deprecated */
  clip: rect(0 0 0 0);

  /* Мінімальна ширина елемента */
  width: 1px;

  /* Мінімальна висота елемента */
  height: 1px;

  /* Від'ємний margin виносить елемент за межі видимості */
  margin: -1px;

  /* Обнуляємо внутрішні відступи */
  padding: 0;

  /* Прибираємо рамку */
  border: 0;

  /* Забороняємо перенос тексту */
  white-space: nowrap;

  /* Сучасна властивість для приховування */
  clip-path: inset(100%);
}

/* !!! Обнуляємо маржини заголовків та параграфів !!! */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  /* Обнуляємо зовнішні відступи */
  margin: 0;
}

/* !!! Прибираємо нижне підкреслення для посилань !!! */
a {
  /* Прибираємо підкреслення посилань */
  text-decoration: none;
}

/* !!! Глобальне скидання стилів для списків !!! */
ul {
  /* Обнуляємо зовнішні відступи списків */
  margin: 0;

  /* Обнуляємо внутрішні відступи списків */
  padding: 0;

  /* Прибираємо маркери списку */
  list-style-type: none;
}

/* !!! Прибираємо курсив для тегу address !!! */
address {
  /* Прибираємо курсив для адреси */
  font-style: normal;
}

/* !!! Основні стилі для body !!! */

/* ? Властивості font-family, font-size, font-weight, line-height, letter-spacing, text-align, background-color успадковуються більшістю елементів, тому їх задають елементу body */
body {
  /* Основний шрифт проекту */
  font-family: var(--primary-family);

  /* Базовий розмір шрифту */
  font-size: 16px;

  /* Звичайна товщина шрифту */
  font-weight: 400;

  /* Міжрядковий інтервал */
  line-height: 1.5;

  /* Відстань між літерами */
  letter-spacing: 0.02em;

  /* Центрування тексту за замовчуванням */
  text-align: center;

  /* Основний колір тексту */
  color: var(--slate);

  /* Білий фон сторінки */
  background-color: var(--white);

  /* Обнуляємо стандартний margin елемента body - 8px з усіх боків */
  margin: 0;
}

/* !!! Контейнер для центрування контенту !!! */
.container {
  /* Максимальна ширина контейнера */
  max-width: 1158px;

  /* Центруємо контент горизонтально */
  margin: 0 auto;

  /* Задаємо бічні падінги контейнеру */
  padding: 0 15px;
}

/* !!! Стандартні падінги для секцій !!! */
section {
  /* Вертикальні відступи секцій */
  padding: 120px 0;
}

/* .thumb {
  overflow: hidden;
} */

/* !!! Глобальні стилі для зображень !!! */
img {
  /* Прибираємо нижній проміжок під зображенням */
  display: block;

  /* Робимо щоб зображення не виходило за межі батьківського елемента */
  max-width: 100%;

  /* Робимо щоб висота зображення автоматично підлаштовувалася під ширину */
  height: auto;

  /* Задаємо властивість, щоб зображення не спотворювалося при масштабуванні */
  object-fit: cover;
}

/* !!! Стилі для header !!! */
.header {
  /* Нижня рамка header */
  border-bottom: 1px solid var(--cornflower);

  /* Тінь header */
  box-shadow:
    0 2px 1px rgb(46 47 66 / 8%),
    0 1px 1px rgb(46 47 66 / 16%),
    0 1px 6px rgb(46 47 66 / 8%);
}

.header .container {
  /* Всі елементи в одну лінію */
  display: flex;

  /* Розподіляємо елементи по головній осі з максимальним проміжком */
  justify-content: space-between;

  /* Вирівнюємо елементи по центру вздовж поперечної осі */
  align-items: center;
}

/* !!! Стилі для логотипу !!! */
.logo {
  /* Шрифт для логотипу */
  font-family: var(--second-family);

  /* Розмір шрифту логотипу */
  font-size: 18px;

  /* Товщина шрифту логотипу */
  font-weight: 700;

  /* Міжрядковий інтервал логотипу */
  line-height: 1.17;

  /* Відстань між літерами логотипу */
  letter-spacing: 0.03em;

  /* Великі літери для логотипу */
  text-transform: uppercase;

  /* Основний колір логотипу */
  color: var(--iris);

  /* Правий відступ логотипу */
  margin-right: 76px;

  /* Вертикальні падінги логотипу */
  padding: 24px 0;
}

.accent {
  /* Колір акценту в логотипі */
  color: var(--navy-blue);
}

/* !!! Стилі для навігації !!! */
.nav {
  /* Розміщуємо елементи навігації в рядок */
  display: flex;

  /* Вирівнюємо елементи навігації по центру */
  align-items: center;
}

.nav-list {
  /* Розміщуємо пункти навігації в рядок */
  display: flex;

  /* Проміжок між пунктами навігації */
  gap: 40px;
}

.nav-link {
  /* Товщина шрифту посилань навігації */
  font-weight: 500;

  /* Колір посилань навігації */
  color: var(--navy-blue);

  /* Вертикальні падінги посилань навігації */
  padding: 24px 0;

  /* Плавний перехід кольору при hover */
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link.current {
  /* Колір активного посилання */
  color: var(--ocean);

  /* Відносне позиціонування для псевдоелемента */
  position: relative;
}

/* !!! Hover/Focus ефекти для навігації !!! */
.nav-link:hover,
.nav-link:active,
.nav-link:focus {
  /* Колір при наведенні */
  color: var(--ocean);
}

.nav-link.current::after {
  /* Фоновий колір підкреслення */
  background-color: var(--ocean);

  /* Абсолютне позиціонування підкреслення */
  position: absolute;

  /* Підкреслення розташоване на -1px від низу посилання */
  bottom: -1px;

  /* Позиція зліва */
  left: 0;

  /* Ширина підкреслення */
  width: 100%;

  /* Висота підкреслення */
  height: 4px;

  /* Заокруглення кутів підкреслення */
  border-radius: 2px;

  /* Створюємо псевдоелемент */
  content: "";
}

/* !!! Стилі для контактів !!! */
.contacts-list {
  /* Розміщуємо контакти в рядок */
  display: flex;

  /* Вирівнюємо контакти по центру */
  align-items: center;

  /* Проміжок між контактами */
  gap: 40px;
}

.contacts .contacts-link {
  /* Колір посилань контактів */
  color: var(--slate);

  /* Плавний перехід кольору при hover */
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.contacts-link:hover,
.contacts-link:focus {
  /* Колір контактів при наведенні */
  color: var(--ocean);
}

/* !!! Стилі для секції hero !!! */
.hero {
  /* Основний фоновий колір секції hero */
  background: var(--navy-blue);

  /* Фонове зображення з накладкою */
  background-image:
    linear-gradient(to bottom, rgb(46 47 66 / 70%), rgb(46 47 66 / 70%)),
    url("../images/people-office.jpg");

  /* Позиціонування фонового зображення */
  background-position: center center;

  /* Масштабування фонового зображення */
  background-size: cover;

  /* Забороняємо повторення фонового зображення */
  background-repeat: no-repeat;

  /* Максимальна ширина секції hero */
  max-width: 1440px;

  /* Центрування секції hero */
  margin: 0 auto;

  /* Вертикальні падінги секції hero */
  padding: 188px 0;
}

.hero-title {
  /* Розмір шрифту заголовку hero */
  font-size: 56px;

  /* Товщина шрифту заголовку hero */
  font-weight: 700;

  /* Міжрядковий інтервал заголовку hero */
  line-height: 1.07;

  /* Відстань між літерами заголовку hero */
  letter-spacing: 0.02em;

  /* Колір заголовку hero */
  color: var(--white);

  /* Максимальна ширина заголовку hero */
  max-width: 496px;

  /* Центрування та нижній відступ заголовку hero */
  margin: 0 auto 48px;
}

/* !!! Стилі для кнопки hero !!! */
.hero-btn {
  /* Розмір шрифту кнопки hero */
  font-size: 16px;

  /* Товщина шрифту кнопки hero */
  font-weight: 500;

  /* Міжрядковий інтервал кнопки hero */
  line-height: 1.5;

  /* Відстань між літерами кнопки hero */
  letter-spacing: 0.04em;

  /* Колір тексту кнопки hero */
  color: var(--white);

  /* Фоновий колір кнопки hero */
  background: var(--iris);

  /* Включаємо блочну модель */
  display: block;

  /* Мінімальна ширина кнопки */
  min-width: 169px;

  /* Висота кнопки */
  height: 56px;

  /* Центрування кнопки */
  margin: 0 auto;

  /* Внутрішні відступи кнопки */
  padding: 16px 32px;

  /* Прибираємо рамку кнопки */
  border: none;

  /* Заокруглення кутів кнопки */
  border-radius: 4px;

  /* Тінь кнопки */
  box-shadow: 0 4px 4px 0 rgb(0 0 0 / 15%);

  /* Курсор при наведенні на кнопку */
  cursor: pointer;

  /* Плавний перехід фонового кольору */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.hero-btn:hover,
.hero-btn:focus {
  /* Товщина шрифту кнопки при наведенні */
  font-weight: 600;

  /* Фоновий колір кнопки при наведенні */
  background-color: var(--ocean);
}

.hero-btn:active {
  /* Фоновий колір кнопки при натисканні */
  background: var(--ocean);
}

/* !!! Стилі для секції features !!! */
.icon-container {
  /* Фоновий колір контейнера іконок */
  background-color: var(--cloud);

  /* Розміщуємо іконку в центрі контейнера */
  display: flex;

  /* Центруємо іконку по горизонталі */
  justify-content: center;

  /* Центруємо іконку по вертикалі */
  align-items: center;

  /* Висота контейнера іконок */
  height: 112px;

  /* Нижній відступ контейнера іконок */
  margin-bottom: 8px;

  /* Рамка контейнера іконок */
  border: 1px solid var(--light-slate);

  /* Заокруглення кутів контейнера іконок */
  border-radius: 4px;
}

.features-list {
  /* Розміщуємо елементи features в рядок */
  display: flex;

  /* Проміжок між елементами features */
  gap: 24px;
}

.features-item {
  /* Встановлюємо базовий розмір flex-елемента: 4 елементи в рядок із проміжком 72px між ними */
  flex-basis: calc((100% - 72px) / 4);
}

.features-subtitle {
  /* Розмір шрифту підзаголовків features */
  font-size: 20px;

  /* Товщина шрифту підзаголовків features */
  font-weight: 500;

  /* Міжрядковий інтервал підзаголовків features */
  line-height: 1.2;

  /* Відстань між літерами підзаголовків features */
  letter-spacing: 0.02em;

  /* Колір підзаголовків features */
  color: var(--navy-blue);
}

.features-text {
  /* Вирівнювання тексту опису features по лівому краю */
  text-align: left;

  /* Колір тексту опису features */
  color: var(--slate);
}

/* !!! Стилі для секції team !!! */
.team {
  /* Фоновий колір секції team */
  background-color: var(--cloud);
}

.team-list {
  /* Розміщуємо елементи команди в рядок */
  display: flex;

  /* Проміжок між елементами команди */
  gap: 24px;
}

.team-item {
  /* Фоновий колір карток команди */
  background-color: var(--white);

  /* Базовий розмір flex-елемента: 4 елементи в рядок */
  flex-basis: calc((100% - 72px) / 4);

  /* Заокруглення нижніх кутів карток команди */
  border-radius: 0 0 4px 4px;

  /* Тінь карток команди */
  box-shadow:
    0 2px 1px 0 rgb(46 47 66 / 8%),
    0 1px 1px 0 rgb(46 47 66 / 16%),
    0 1px 6px 0 rgb(46 47 66 / 8%);

  /* Плавний перехід фонового кольору */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.team-item:hover,
.team-item:focus {
  /* Фоновий колір карток команди при наведенні */
  background-color: var(--white);
}

.team-title {
  /* Розмір шрифту заголовку секції team */
  font-size: 36px;

  /* Товщина шрифту заголовку секції team */
  font-weight: 700;

  /* Міжрядковий інтервал заголовку секції team */
  line-height: 1.11;

  /* Відстань між літерами заголовку секції team */
  letter-spacing: 0.02em;

  /* Перша літера великою для заголовку секції team */
  text-transform: capitalize;

  /* Колір заголовку секції team */
  color: var(--navy-blue);

  /* Нижній відступ заголовку секції team */
  margin-bottom: 72px;
}

.team-descr {
  /* Внутрішні відступи опису команди */
  padding: 32px 0;
}

.team-subtitle {
  /* Розмір шрифту підзаголовків команди */
  font-size: 20px;

  /* Товщина шрифту підзаголовків команди */
  font-weight: 500;

  /* Міжрядковий інтервал підзаголовків команди */
  line-height: 1.2;

  /* Відстань між літерами підзаголовків команди */
  letter-spacing: 0.02em;

  /* Колір підзаголовків команди */
  color: var(--navy-blue);

  /* Нижній відступ підзаголовків команди */
  margin-bottom: 8px;
}

.team-text {
  /* Колір тексту опису команди */
  color: var(--slate);

  /* Нижній відступ тексту опису команди */
  margin-bottom: 8px;
}

/* !!! Стилі для соціальних мереж !!! */
.social {
  /* Розміщуємо соціальні іконки в рядок */
  display: flex;

  /* Центруємо соціальні іконки по горизонталі */
  justify-content: center;

  /* Центруємо соціальні іконки по вертикалі */
  align-items: center;

  /* Проміжок між соціальними іконками */
  gap: 24px;
}

.social-item {
  /* Ширина елемента соціальної іконки */
  width: 40px;

  /* Висота елемента соціальної іконки */
  height: 40px;
}

.social-link {
  /* Фоновий колір посилання соціальної іконки */
  background-color: var(--iris);

  /* Розміщуємо іконку в центрі посилання */
  display: flex;

  /* Центруємо іконку по горизонталі */
  justify-content: center;

  /* Центруємо іконку по вертикалі */
  align-items: center;

  /* Ширина посилання соціальної іконки */
  width: 100%;

  /* Висота посилання соціальної іконки */
  height: 100%;

  /* Кругла форма посилання соціальної іконки */
  border-radius: 50%;

  /* Плавний перехід фонового кольору соціальної іконки */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon {
  /* Колір заливки соціальної іконки */
  fill: var(--cloud);
}

.social-link:focus,
.social-link:hover,
.social-link:active {
  /* Фоновий колір посилання соціальної іконки при наведенні */
  background-color: var(--ocean);
}

/* !!! Стилі для секції portfolio !!! */
.portfolio-title {
  /* Розмір шрифту заголовку секції portfolio */
  font-size: 36px;

  /* Товщина шрифту заголовку секції portfolio */
  font-weight: 700;

  /* Міжрядковий інтервал заголовку секції portfolio */
  line-height: 1.11;

  /* Відстань між літерами заголовку секції portfolio */
  letter-spacing: 0.02em;

  /* Перша літера великою для заголовку секції portfolio */
  text-transform: capitalize;

  /* Колір заголовку секції portfolio */
  color: var(--navy-blue);

  /* Нижній відступ заголовку секції portfolio */
  margin-bottom: 72px;
}

.portfolio-wrap {
  /* Відносне позиціонування для overlay */
  position: relative;

  /* Приховуємо контент, що виходить за межі */
  overflow: hidden;
}

.portfolio-list {
  /* Розміщуємо елементи portfolio в рядок */
  display: flex;

  /* Дозволяємо перенесення flex-елементів на новий рядок */
  flex-wrap: wrap;

  /* Горизонтальний проміжок між елементами portfolio */
  gap: 24px;

  /* Вертикальний проміжок між рядками portfolio */
  row-gap: 48px;
}

.portfolio-item {
  /* Базовий розмір flex-елемента: 3 елементи в рядок */
  flex-basis: calc((100% - 48px) / 3);

  /* Нижня рамка елементів portfolio */
  border-bottom: 1px solid var(--cornflower);

  /* Плавний перехід тіні для hover ефекту */
  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:focus,
.portfolio-item:hover,
.portfolio-item:active {
  /* Тінь елементів portfolio при наведенні */
  box-shadow:
    0 2px 1px 0 rgb(46 47 66 / 8%),
    0 1px 1px 0 rgb(46 47 66 / 16%),
    0 1px 6px 0 rgb(46 47 66 / 8%);
}

.overlay {
  /* Колір тексту overlay */
  color: var(--cloud);

  /* Фоновий колір overlay */
  background-color: var(--iris);

  /* Абсолютне позиціонування overlay */
  position: absolute;

  /* Позиція зверху */
  top: 0;

  /* Позиція зліва */
  left: 0;

  /* Ширина та висота overlay */
  width: 100%;
  height: 100%;

  /* Внутрішні відступи overlay */
  padding: 40px 32px;

  /* Початкова позиція overlay (приховано) */
  transform: translateY(100%);

  /* Плавний перехід трансформації overlay */
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.portfolio-item:hover .overlay {
  /* Показуємо overlay при наведенні */
  transform: translateY(0);
}

.portfolio-descr {
  /* Внутрішні відступи опису portfolio */
  padding: 32px 16px;

  /* Рамка опису portfolio */
  border: 1px solid #e7e9fc;

  /* Прибираємо верхню рамку опису portfolio */
  border-top: none;
}

.portfolio-subtitle {
  /* Розмір шрифту підзаголовків portfolio */
  font-size: 20px;

  /* Товщина шрифту підзаголовків portfolio */
  font-weight: 500;

  /* Міжрядковий інтервал підзаголовків portfolio */
  line-height: 1.2;

  /* Відстань між літерами підзаголовків portfolio */
  letter-spacing: 0.02em;

  /* Колір підзаголовків portfolio */
  color: var(--navy-blue);

  /* Нижній відступ підзаголовків portfolio */
  margin-bottom: 8px;
}

.portfolio-text {
  /* Колір тексту опису portfolio */
  color: var(--slate);
}

/* !!! Стилі для footer !!! */
.footer {
  /* Вирівнювання тексту footer по лівому краю */
  text-align: left;

  /* Фоновий колір footer */
  background: var(--navy-blue);

  /* Ширина footer */
  width: 100%;

  /* Вертикальні падінги footer */
  padding: 100px 0;
}

.logo-container {
  /* Правий відступ контейнера логотипу */
  margin-right: 120px;
}

.footer-logo {
  /* Шрифт логотипу footer */
  font-family: var(--second-family);

  /* Розмір шрифту логотипу footer */
  font-size: 18px;

  /* Товщина шрифту логотипу footer */
  font-weight: 700;

  /* Міжрядковий інтервал логотипу footer */
  line-height: 1.1667;

  /* Відстань між літерами логотипу footer */
  letter-spacing: 0.03em;

  /* Великі літери для логотипу footer */
  text-transform: uppercase;

  /* Колір логотипу footer */
  color: var(--iris);

  /* Відображення логотипу footer як inline-block */
  display: inline-block;

  /* Нижній відступ логотипу footer */
  margin-bottom: 16px;
}

.accent-footer {
  /* Колір акценту в логотипі footer */
  color: var(--cloud);
}

.footer-text {
  /* Колір тексту footer */
  color: var(--cloud);

  /* Максимальна ширина тексту footer */
  max-width: 264px;
}

.footer .container {
  /* Розміщуємо елементи footer в рядок */
  display: flex;

  /* Вирівнюємо елементи footer по базовій лінії */
  align-items: baseline;
}

.footer-social-text {
  /* Товщина шрифту тексту соціальних мереж footer */
  font-weight: 500;

  /* Колір тексту соціальних мереж footer */
  color: var(--white);

  /* Нижній відступ тексту соціальних мереж footer */
  margin-bottom: 16px;
}

.footer-social-list {
  /* Розміщуємо соціальні іконки footer в рядок */
  display: flex;

  /* Центруємо соціальні іконки footer по горизонталі */
  justify-content: center;

  /* Центруємо соціальні іконки footer по вертикалі */
  align-items: center;

  /* Проміжок між соціальними іконками footer */
  gap: 16px;
}

.footer-social-item {
  /* Ширина елемента соціальної іконки footer */
  width: 40px;

  /* Висота елемента соціальної іконки footer */
  height: 40px;
}

.footer-social-link {
  /* Фоновий колір посилання соціальної іконки footer */
  background-color: var(--iris);

  /* Розміщуємо іконку в центрі посилання footer */
  display: flex;

  /* Центруємо іконку footer по горизонталі */
  justify-content: center;

  /* Центруємо іконку footer по вертикалі */
  align-items: center;

  /* Ширина посилання соціальної іконки footer */
  width: 100%;

  /* Висота посилання соціальної іконки footer */
  height: 100%;

  /* Кругла форма посилання соціальної іконки footer */
  border-radius: 50%;

  /* Плавний перехід фонового кольору соціальної іконки footer */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-icon {
  /* Колір заливки іконки footer */
  fill: var(--cloud);
}

.footer-social-link:focus,
.footer-social-link:hover,
.footer-social-link:active {
  /* Фоновий колір посилання соціальної іконки footer при наведенні */
  background-color: var(--green);
}