/* =========== Общее ===========*/
body {
    font-family: "Montserrat", Arial, sans-serif;
    background: #181E34;
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: #ffffff;
    min-width: 466px;
/* 
    Фон, основной текст, минимальный размер маштабирования страницы
*/
}

section {
    padding: 15px;
/*
    Создание рамок в секцияй для недопущения прилипания контента к краям, при маштабировании страницы.
    Также служит каркасом, с помощию которого можно разделить margin-ы (избежать схлопывания margin-ов)
*/
}

/* =========== Шапка ===========*/

header {
    display: flex;
    min-height: 48px;
    max-width: 930px;
    margin: 30px auto 36px;
    padding: 0 20px 0 15px; 
    flex-wrap: wrap;
/*  По макету, как я понял, шапка должна быть шириной 895 смещённой в лево на 5.
    930 - 15 с лево и -20 с право = 895 смещёное в лево на 5 
*/
}

header img {
    margin-right: auto;
/*
    Реализация адаптивности размеров шапки между лого и навигацией
*/
}

nav {
    display: flex;
    justify-content: right;
    align-items: center;
    height: 48px;
    width: 437px;
    gap: 34px;
    flex-wrap: wrap-reverse;
    margin-left: 30px;
/* 
    По макету макс. ширина навигации 437 и макс. растояние между лого и навигацией 410
    Проверяем:
    895 шапки - 437 навигации = 458 лого и расстояние до навигации
    458 - 48 лого = 410 расстояние до навигации
 */
}

.nav {
    display: flex;
    justify-content: right;
    align-items: center;
    height: 24px;
    width: 290px;
    gap: 30px;
/*
    Настройка ссылок "Меню"
*/
}

.nav_button {
    font-weight: 500;
    line-height: normal;
    background: #ffffff;
    color: #0000ff;
    border-radius: 100px;
    height: 48px;
    width: 113px;
    padding: 14px 30px;
/*
    Настройка Кнопки "Войти"
*/
}

/* =========== Секция 1 ===========*/

.section1 {
    background: url("../img/backgraund.jpg") 10% 50% / cover no-repeat;
    min-height: 508px;
    /* Фон и мин. высота*/
}

.section1_title {
    text-align: center;
    margin: 105px auto 60px;
    max-width: 900px;
    padding-right: 22px;
    font-size: 40px;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
/*  
    По макету, как я понял, этот заголовок должен быть не чисто посередине, а смещён на 22 в лево.
    Поэтому margin-ом я его централизую на странице, а потом обрезаю padding-ом правый край на 22.
*/
}

.section1_content {
    display: flex;
    max-width: 900px;
    margin: 0 auto 105px;
    flex-wrap: wrap;
/* 
    Контейнер для контента
*/
}

.text {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 159px;
    max-width: 436px;
    margin-right: auto;
/* 
    margin-ом реализую адаптивность при маштабировании
*/
}

span {
    color: #01a2cb;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
/* 
    Голубой текст
*/
}

.section1_buttons {
    display: flex;
    height: 159px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-left: 15px;
/* 
    Настройка размещения и поведения кнопак
    margin-ом добеваюсь, чтобы при переносе, во время маштабирования, кнопки были смещены в право больше чем текст (мне так красивее)
*/
}

.section1_button {
    border-radius: 100px;
    height: 56px;
    width: 320px;
    padding: 18px 30px;
    font-weight: 500;
    line-height: normal;
/* 
    Форма кнопак
*/
}

.one {
    background: linear-gradient(180deg, #00A4CC 0%, #2766AE 100%);
/* 
    Цвет кнопаки без значка
*/
}

.two {
    background: linear-gradient(95deg, #00A4CC 6.7%, #2766AE 91.35%);
/* 
    Цвет кнопаки с значком
*/
}

/* =========== Секция 2 ===========*/

.section2 {
    min-height: 808px;
/*мин. высота*/
}

.section2_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 568px;
    max-width: 900px;
    margin: 105px auto;
/* 
    Контейнер для контента. Заголовок пихаю в него же, так как на макете, в этой секции, он тоже находится в общей сетке,
    в отличии от заголовка первой секции.
*/
}

.section2_title {
    text-align: center;
    margin: 0 auto 15px;
    max-width: 900px;
    font-size: 40px;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
/*
    Заголовок
*/
}

.text_2 {
    max-height: 112px;
    max-width: 513px;
    margin: 0 auto 60px;
    text-align: center;
/* 
    Текст под заголовком
*/
}

.boards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 30px;
/* 
    Создание вложенной сетки для табличек
*/
}

h3 {
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
/* 
Заголовки табличек
*/
}

.board {
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    background: #197CB8;
    height: 141px;
    width: 204px;
/* 
    таблчки
*/
}

.section2_button {
    width: 436px;
    height: 56px;
    padding: 18px 30px;
    border-radius: 100px;
    background: linear-gradient(180deg, #00A4CC 0%, #2766AE 100%);
    font-weight: 500;
    line-height: normal;
/* 
    Кнопка
*/
}

/* =========== Подвал ===========*/

footer {
    padding: 20px;
    border-top: 1px solid #323952;
    min-height: 361px;
/*
    Рамка, минимальная высота и визуальное выделение подвала
 */
}

.footer_content {
    display: flex;
    min-height: 241px;
    max-width: 811px;
    margin: 40px auto;
    gap: 20px;
    flex-wrap: wrap;
/* 
    Общий контейнер
*/
}

footer img {
    margin-bottom: 15px;
/* 
    Отгораживаю лого от текста снизу
*/
}

.reference {
    max-height: 159px;
    max-width: 267px;
    margin-right: 80px;
/* 
    Текст с низу лого
*/
}

.link_column {
    margin-left: auto;
    display: flex;
    flex-direction: column;
/* 
    Колонки ссылок
*/
}

h4 {
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
/* 
    Заголовки колоннок ссылок
*/
}

.link {
    display: flex;
    flex-direction: column;
    gap: 10px;
/* 
    Отгораживание ссылок друг от друга
*/
}