@font-face {
    font-family: 'Heebo';
    src: url('../fonts/Heebo-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: url('../fonts/Heebo-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yantramanav';
    src: url('../fonts/Yantramanav-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root{
    --color-dark: #000000;
    --color-dark-alternative: #131619;
    --color-light: #FFFFFF;
    --color-dark-gray: #404040;
    --color-light-gray: #C4C4C4;
    --border-radius: 30px; /* кнопка */
    --border: 1px solid var(--color-light); /* кнопка */
    --font-heebo: 'Heebo', sans-serif;
    --font-yantramanav: 'Yantramanav', sans-serif;
    --button-height: 54px;
    --container-width: 1300px;
    --transition-duration: 0.2s;
    --container-padding-x: 15px; /* 15 это стандарт отступа */ 
}

body{
    color: var(--color-light-gray);
    background-color: var(--color-dark); /* Задаём для тега body черный цвет */
    font-family: var(--font-heebo); /* задаем семейство шрифта */
    line-height: 1.75; /* межстрочный интервал. размер текста * 1.75 */
}

ul, ol, li{
    margin: 0px;
    padding: 0px;
}

.container{
    max-width: calc(var(--container-width) + (var(--container-padding-x)) * 2); /*  для точной ширины контейнера */
    margin-inline: auto; /*  центрирование */
    padding-inline: var(--container-padding-x); /*  чтобы текст не упирался в края экрана */
}

h1, h2, h3, h4, h5, h6{
    font-weight: 700;
    text-transform: uppercase;
}

a {
    color: var(--color-light);
    transition: var(--transition-duration);
}

a:hover{
    color: var(--color-light-gray);
}

.header{
    display: flex;
    justify-content: space-between; /*  распологаем элементы по горизонтали */
    align-items: center; /*  выравниваем по вертикали */
    column-gap: 20px; /*  минимальное расстояние между элементами */
    padding-left: 32px;
    padding-right: 32px; /*  отступы слева и справа для того чтобы элементы не упирались в края экрана можно через padding-inline */
    background-color: var(--color-dark-alternative);
}

.header-menu-list{
    display: flex;
    column-gap: 50px;
}

.header-menu-item{
    list-style: none; /*  убираем стандартные маркеры у списка */
}

.header-menu-link{
    display: inline-flex; /*  отображаем элементы в строку */
    align-items: center; /*  выравниваем элементы по вертикали */
    height: 90px; 
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700; 
    font-size: 12px;
    letter-spacing: 1.2px; /* расстояние межбуквенное */
    column-gap: 7px
}

.header-menu-link.is-current::after{
    content: ''; /*  псевдоэлемент для создания точки */
    background-color: currentColor; /*  наследуем цвет от .header-menu-link */
    width: 5px;
    height: 5px;
    border-radius: 50%; /* скругленные углы для того чтобы нарисовать круг */
}

.button{
    white-space: nowrap; /*  чтобы текст не переносился на другую строку */
    display: inline-flex;
    height: 38px;
    border-radius: var(--border-radius);
    align-items: center;
    padding-inline: 26px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 24px; /*  для того чтобы текст был по центру кнопки, так как высота кнопки 38px, то 38/2 = 19, а 19/38 = 0.5, то есть 50% */
    letter-spacing: 1.2px;
    font-size: 12px; /*  для того чтобы текст не был слишком большим для кнопки */
    background-color: var(--color-light);
    border: none; /*  убираем стандартную рамку кнопки */
    cursor: pointer;
    transition: var(--transition-duration);
}

.button:hover{
    background-color: var(--color-light-gray);
}

.header-actions{
    display: flex;
    column-gap: 40px;
}

.header-burger-button{
    position: relative; /*  для того чтобы позиционировать внуртенности относительно самой кнопки */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    border: var(--border);
    background-color: transparent;
}

.banner {
    color: var(--color-light);
    display: flex; /*  для того чтобы располагать элементы в строку */
    flex-direction: column; 
    justify-content: end; /* для того чтобы текст в нижний угол переставить */
    padding: 36px 70px;
    min-height: 985px;
    background-color: var(--color-dark-alternative);
}

.banner-body {
    text-transform: uppercase;
}

.banner-info {
    display: flex; /*  для того чтобы располагать элементы в строку */
    align-items: end; /*  выравниваем по нижнему краю */
    line-height: 38px;
    font-size: 30px;
    font-weight: 700;
}

.banner-title {
    font-weight: 700;
    font-size: 360px;
    line-height: 1;
}