* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    font-family: "Inter", sans-serif; /* Всі тексти на сторінці відображаються шрифтом "Inter" або замінним безшовним шрифтом. */
}

img {
    display: block; /* Зображення відображаються як блочний елемент. */
    width: 100%; /* Зображення розтягнуті на всю ширину свого батьківського елемента. */
}

.page-wrapper {
    max-width: 860px; /* Максимальна ширина сторінки обмежена 860px. */
    width: 100%; /* Сторінка займає всю доступну ширину екрану. */
    margin: 0 auto; /* Автоматично вирівнює сторінку по центру горизонтально. */
    padding: 30px 10px 20px; /* Зовнішні відступи сторінки: 30px зверху, 10px зліва і справа, 20px знизу. */
    background-color: #008499; /* Колір фону сторінки. */
}

.content-wrap {
    padding: 0 20px 20px; /* Внутрішні відступи вмісту: 0 зверху, 20px зліва і справа, 20px знизу. */
    background-color: #fff; /* Колір фону вмісту. */
}

header {
    width: 100%; /* Ширина заголовка збігається з шириною вмісту. */
    height: 138px; /* Висота заголовка 138px. */
    background-image: url('../images/header.png'); /* Зображення фону заголовка. */
    background-size: contain; /* Розмір фонового зображення зберігається пропорційно. */
    background-repeat: no-repeat; /* Фонове зображення не повторюється. */
}

main {
    padding: 20px 30px; /* Внутрішні відступи головного вмісту: 20px зверху і знизу, 30px зліва і справа. */
    font-weight: 500; /* Товщина шрифту головного вмісту. */
    font-size: 1.2rem; /* Розмір шрифту головного вмісту. */
}

.mb-15 {
    margin-bottom: 15px; /* Зовнішній відступ вниз для елементів з класом .mb-15. */
}

.mb-20 {
    margin-bottom: 20px; /* Зовнішній відступ вниз для елементів з класом .mb-20. */
}

.d-block {
    display: block; /* Елементи з класом .d-block відображаються як блочні елементи. */
}

.t-center {
    text-align: center; /* Вирівнювання тексту по центру для елементів з класом .t-center. */
}

.list { 
    padding-left: 60px; /* Лівий відступ для елементів списку. */
}

.services-list-item {
    width: calc(33.33% - 20px); /* Ширина елементів списку послуг: 33.33% мінус 20px з урахуванням внутрішньої ширини. */
    margin-bottom: 20px; /* Зовнішній відступ вниз для елементів списку послуг. */
    box-sizing: border-box; /* Ширина елемента включає в себе границю та внутрішні відступи. */
}

.services-list {
    display: flex; /* Елементи списку відображаються як flex контейнер. */
    flex-wrap: wrap; /* Елементи списку обгортаються наступним рядком, якщо вони не вміщуються. */
    gap: 20px; /* Відступ між елементами списку. */
    justify-content: space-between; /* Рівномірне розташування елементів списку по горизонталі. */
}

.services-list-item__title {
    padding: 15px 0; /* Внутрішні відступи для заголовків елементів списку послуг. */
    font-weight: bold; /* Товщина шрифту заголовків елементів списку послуг. */
    letter-spacing: 1px; /* Міжсимвольний інтервал заголовків елементів списку послуг. */
}

.btn {
    height: 50px; /* Висота кнопок. */
    line-height: 50px; /* Висота рядка кнопок для центрування тексту. */
    background-color: #f53947; /* Колір фону кнопок. */
    color: #fff; /* Колір тексту кнопок. */
    cursor: pointer; /* Зміна вигляду курсору на вказівник при наведенні на кнопку. */
}

.text-section a[href^='tel:'] {
    color: #008499; /* Колір тексту посилань на телефон. */
    text-decoration: none; /* Відсутність підкреслення для посилань на телефон. */
}

.link-btn {
    display: block; /* Блочний вигляд для посилань-кнопок. */
    text-align: center; /* Вирівнювання тексту по центру для посилань-кнопок. */
    background-color: #f53947; /* Колір фону посилань-кнопок. */
    color: #fff; /* Колір тексту посилань-кнопок. */
    padding: 10px 0; /* Внутрішні відступи для посилань-кнопок. */
    text-decoration: none; /* Відсутність підкреслення для посилань-кнопок. */
}

footer {
    padding: 25px 0; /* Внутрішні відступи для футера: 25px зверху і знизу. */
    background-color: #008499; /* Колір фону футера. */
    color: #fff; /* Колір тексту футера. */
}

.social-links {
    font-size: 2rem; /* Розмір шрифту для посилань на соціальні мережі. */
}

.social-links a {
    color: #fff; /* Колір тексту посилань на соціальні мережі. */
    margin-right: 10px; /* Зовнішній відступ справа для посилань на соціальні мережі. */
}

.social-links a:not(:last-child) /* Стилізація всіх посилань на соціальні мережі, крім останнього. */ {
    margin-right: 10px; /* Зовнішній відступ справа для посилань на соціальні мережі, крім останнього. */
}

footer p:nth-child(2) /* Стилізація другого дочірнього елементу абзацу в футері. */ {
    margin-bottom: 20px; /* Зовнішній відступ вниз для другого абзацу в футері. */
}

footer p:last-child a /* Стилізація посилань, які є останнім дочірнім елементом абзацу в футері. */ {
    display: block; /* Блочний вигляд для останніх посилань в абзаці футера. */
    color: white; /* Колір тексту для останніх посилань в абзаці футера. */
}
