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

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

  /* !!! Основні кольори бренду !!! */
  --iris: #4d5ae5; /* Основний синій колір */
  --ocean: #404bbf; /* Темніший синій для hover ефектів */
  --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;

  /* !!! Застаріла властивість для старих браузерів !!! */
  /* 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%);
}

/* Ці правила вже покриваються modern-normalize ----> */

/* !!! Обнуляємо маржини заголовків та параграфів «B1» !!!
h1,
h2,
h3,
h4,
h5,
h6,
p {

  margin: 0;
} */

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

/* !!! Глобальне скидання стилів для списків «B1»: 1) Обнуляємо зовнішні відступи, 2)Обнуляємо внутрішні відступи, 3)Прибираємо маркери списку !!!
ul {
  margin: 0;

  padding: 0;

  list-style-type: none;
} */

/* <---- Ці правила вже покриваються modern-normalize */

/* !!! Прибираємо курсив для тегу 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-font);

  /* Базовий розмір шрифту */
  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;
}

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

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

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

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

/* !!! Контейнер для обрізання зображень !!! */

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

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

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

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

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

/* header */
.header {
  /* !!! Додаємо нижню рамку для відокремлення шапки !!! */
  border-bottom: 1px solid var(--cornflower);
}

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

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

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

/*  logo  */
.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  */
.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/focus !!! */
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link.current {
  /* !!! Відносне позиціонування для псевдоелемента !!! */
  position: relative;

  /* !!! Колір активного посилання !!! */
  color: var(--ocean);
}

.nav-link.current::after {
  /* !!! Створюємо порожній псевдоелемент !!! */
  content: "";

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

  /* !!! Розміщуємо під посиланням !!! */
  bottom: -1px;

  /* !!! Починаємо з лівого краю !!! */
  left: 0;

  /* !!! На всю ширину посилання !!! */
  width: 100%;

  /* !!! Товщина підкреслення !!! */
  height: 4px;

  /* !!! Колір підкреслення !!! */
  background-color: var(--ocean);

  /* !!! Заокруглені кути !!! */
  border-radius: 2px;
}

/* Hover/Focus ефекти */
.nav-link:hover,
.nav-link:focus {
  /* !!! Зміна кольору при інтеракції !!! */
  color: var(--ocean);
}

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

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

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

.contacts .contacts-link {
  /* !!! Колір контактної інформації !!! */
  color: var(--slate);

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

.contacts-link:hover,
.contacts-link:focus {
  /* !!! Зміна кольору при інтеракції !!! */
  color: var(--ocean);
}

/*  hero  */
.hero {
  /* !!! Темно-синій фон !!! */
  background: var(--navy-blue);

  /* !!! На всю ширину екрану !!! */
  width: 100%;

  /* !!! Великі вертикальні відступи !!! */
  padding: 188px 0;
}

.hero-title {
  /* !!! Великий розмір шрифту !!! */
  font-size: 56px;

  /* !!! Жирний шрифт !!! */
  font-weight: 700;

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

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

  /* !!! Білий колір тексту !!! */
  color: var(--white);

  /* !!! Фон заголовка (дублює фон секції) !!! */
  background: var(--navy-blue);

  /* !!! Обмежуємо ширину заголовка !!! */
  max-width: 496px;

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

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

  /* !!! Напівжирний шрифт !!! */
  font-weight: 500;

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

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

  /* !!! Білий колір тексту !!! */
  color: var(--white);

  /* !!! Основний синій фон кнопки !!! */
  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;

  /* !!! Плавна зміна фону при hover/focus !!! */
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-btn:hover,
.hero-btn:focus {
  /* !!! Збільшуємо товщину шрифту !!! */
  font-weight: 600;

  /* !!! Зміна фону на темніший !!! */
  background: var(--ocean);
}

.hero-btn:active {
  /* !!! Той самий темніший фон !!! */
  background: var(--ocean);
}

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

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

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

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

/* !!! Контейнер для іконок !!! */
.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 !!! */
.features-subtitle {
  /* !!! Розмір шрифту підзаголовків !!! */
  font-size: 20px;

  /* !!! Напівжирний шрифт !!! */
  font-weight: 500;

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

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

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

  /* !!! Відступ між заголовком та текстом !!! */
  margin-bottom: 8px;
}

/* !!! Текст опису features !!! */
.features-text {
  /* !!! Сірий колір для основного тексту !!! */
  color: var(--slate);
}

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

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

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

.team-item {
  /* !!! Білий фон картки !!! */
  background-color: var(--white);

  /* !!! Розмір картки: 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%);
}

.team-item:hover,
.team-item:focus {
  /* !!! Зберігаємо білий фон !!! */
  background: var(--white);
}

.team-title {
  /* !!! Великий розмір шрифту !!! */
  font-size: 36px;

  /* !!! Жирний шрифт !!! */
  font-weight: 700;

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

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

  /* !!! Перша літера велика !!! */
  text-transform: capitalize;

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

  /* !!! Відступ знизу від заголовка !!! */
  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);
}

/*  portfolio  */

.portfolio-title {
  /* !!! Великий розмір шрифту !!! */
  font-size: 36px;

  /* !!! Жирний шрифт !!! */
  font-weight: 700;

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

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

  /* !!! Перша літера велика !!! */
  text-transform: capitalize;

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

  /* !!! Відступ знизу від заголовка !!! */
  margin-bottom: 72px;
}

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

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

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

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

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

  /* !!! Нижня рамка картки !!! */
  border-bottom: 1px solid var(--cornflower);
}

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

  /* !!! Рамка навколо опису !!! */
  border: 1px solid #e7e9fc;

  /* !!! Прибираємо верхню рамку (щоб не дублювалася з зображенням) !!! */
  border-top: none;
}

.portfolio-subtitle {
  /* !!! Середній розмір шрифту !!! */
  font-size: 20px;

  /* !!! Напівжирний шрифт !!! */
  font-weight: 500;

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

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

  /* !!! Колір назви проекту !!! */
  color: var(--navy-blue);

  /* !!! Відступ між назвою та описом !!! */
  margin-bottom: 8px;
}

.portfolio-text {
  /* !!! Сірий колір для опису !!! */
  color: var(--slate);
}

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

  /* !!! Темно-синій фон футера !!! */
  background: var(--navy-blue);

  /* !!! На всю ширину екрану !!! */
  width: 100%;

  /* !!! Вертикальні відступи футера !!! */
  padding: 100px 0;
}

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

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

  /* !!! Жирний шрифт !!! */
  font-weight: 700;

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

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

  /* !!! Великі літери !!! */
  text-transform: uppercase;

  /* !!! Основний колір бренду !!! */
  color: var(--iris);

  /* !!! Робимо блочним елементом для контролю відступів !!! */
  display: inline-block;

  /* !!! Відступ знизу від лого !!! */
  margin-bottom: 16px;
}

.accent-footer {
  /* !!! Світло-сірий колір для другої частини лого !!! */
  color: var(--cloud);
}

.footer-text {
  /* !!! Світло-сірий колір тексту !!! */
  color: var(--cloud);

  /* !!! Обмежуємо ширину текстового блоку !!! */
  max-width: 264px;
}