/* Подводим все элементы под один шаблон  * {

                box-sizing: border-box;
                Это свойство отвечает за правильное отображение свойств ширины и высоты с учетом маржинов и паддингов.

                }

                И так же сбрасываем все значения padding and margin. */

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

html {
    font-family: 'Roboto', sans-serif;
}

.container {
    position: relative;
    width: 1140px;
    margin: 0 auto; 
}

.promo {
    height: 800px; /* Ширину мы не указываем, т.к. контент в дальнейшем будет подстраиваться под разную ширину экрана */
    background: url('../img/bg/main_bg.jpg')center center/ /* По оси Х и по оси Y картинка будет стоять по центру  + нужно поставить "/", что бы опять появилась картинка*/ cover /* Растягиваем картинку, если она не помещается */ no-repeat;
    padding: 39px 0 62px 0;
    /* Правильнее установить позиционирование логотипа (сова) паддингами блока section с классом promo */
}
/* Мы обращаемся к классу logo_img, который лежит в блоке с классом   logo */
.logo .logo_img {
    display: block;
    /* Пишем это свойство для того что бы сработало свойство margin: 0 auto; т.к. оно работает только для блочных элементов */
    margin: 0 auto;
}

.logo .logo_text {
    color: #ffffff;;
    /* font-family: Roboto; Семейство шрифтов */
    font-size: 15px;/* Размер шрифта */
    font-weight: 500;
    /* Жирность шрифта */
    line-height: 24px; /* Межстрочный интервал */
    text-transform: uppercase; /* Заглавные буквы */
    text-align: center;
    margin-top: 14px;

}

h1 {
    margin-top: 53px;
}

.title {
    color: hsl(42, 94%, 60%);
    font-size: 41px;
    font-weight: 900;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    /* font-style: normal;
    Определяет начертание шрифта. normal - Обычное начертание текста. */
    /* letter-spacing: normal;
    Определяет интервал между символами в пределах элемента. normal - Задает интервал между символами как обычно.*/
    /* line-height: normal;
    Устанавливает интерлиньяж (межстрочный интервал) текста,
    отсчет ведется от базовой линии шрифта.Расстояние между строк вычисляется автоматически. */
}

h2 {
    margin-top: 30px;
}

.simple .title_big {
    /* Здесь мы говорим, код возьми элемент с классом  .simple и внутри этого элемента будет элемент с классом .title_big. Это вложенная система. В отличии от структуры h2.title  - мы здесь говорим, код возьми заголовок h2 с классом .title. По факту это один элемент.  */
    color: #ffffff;
    font-size: 80px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    margin-top: 21px;
}

.promo .promo_text {
    padding: 0 13px;
    margin-top: 23px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 300;
    line-height: 28px;
    text-align: center;
}

 .promo .promo_text .span {
     color: #f9bf3b;
     font-weight: 700;
}

.promo .promo_btn, .gift .gift_btn {
    /* Изначально этот блок инлайновый (строчно-блочный и для того, что быэто исправить мы напишем свойство display и дадим значение block */
    display: block;
    margin: 0 auto; /* По вертикали задаем 73 рх, а по горизонтали auto. Но если придерживаться однородности стиле, то делаем так: */
    margin-top: 73px;
    width: 313px;
    height: 72px;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.18);
    /* Тень которую отбрасывает наш блок. inset - тень падает вовнутрь. 0 - по оси Х смещения нет. -5px - тень по оси Y падает внутрь. 0 - размытость*/
    border: 4px solid rgba(0, 0, 0, 0.23);
    background-image: linear-gradient(to top, #2798b9 0%, #3ab6da 100%);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.22);
    color: #ffffff;
    /* font-family: "Roboto Condensed"; */
    font-size: 21px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer; /* Учтанавливаем курсор при наведении на кнопку - рука */
    outline: none; /* Убираем обводку с кнопки */
}

.more {
    margin-top: 73px;
}

.more .more_text {
    color: #ffffff;
    /* font-family: "Roboto - Thin"; */
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}

.more .more_img {
    display: block;
    margin: 0 auto;
    margin-top: 13px;
}

.waiting {
    min-height: 604px; /* Указываем именно минимальную высоту для того что бы при изменении текста блок растягивался */
    background-color: #efefef;
    padding: 85px 0 75px 0;
}

.waiting .waiting_header, .finish .finish_header {
    color: #252525;
    /* font-family: Roboto; */
    font-size: 30px;
    font-weight: 400;
    line-height: 12px;
    text-align: center;
    text-transform: uppercase;
}

.finish .finish_header {
    color: #fff;
}

.waiting .waiting_divider,
.finish .finish_divider {
    width: 217px;
    height: 4px;
    background-color: #f9bf3b;
    margin: 0 auto;
    margin-top: 18px;
}

.waiting .waiting_subheader {
    margin-top: 17px;
    color: #4a4a4a;
    /* font-family: Roboto; */
    font-size: 23px;
    font-weight: 400;
    text-align: center;
}

.waiting .waiting_wrapper {
    margin-top: 45px;
    display: flex;
    justify-content: space-between;
}

.waiting .waiting_wrapper .waiting_item {
    /* vertical-align: top; */ /* прижимаем все элементы к верхнему краю */
    /* display: inline-block; Делаем элементы строчно-блочными и они становяться в одну линию */
    width: 339px;
    text-align: center;
    /* margin: 0 15px; */
}

.waiting .waiting_wrapper .waiting_item .waiting_img {
    width: 100%; /* Ширина 100% от родителя. Делается это для того, что бы если картинка измениться, то она подстроиться под размер родителя и не будет выпадать */
}

.waiting .waiting_wrapper .waiting_item .waiting_descr {
    margin-top: 33px;
    color: #4a4a4a;
    /* font-family: Roboto; */
    font-size: 15px;
    font-weight: 300;
    line-height: 21px;
    
}

.optimization {
    min-height: 550px;
    padding: 102px 0 107px 0;
}

.optimization .optimization_header {
  margin-left: 391px; 
  color:#299cbd;
  /* font-family: "Roboto - Black";  */
  font-size: 29px;
  font-weight: 400;
  text-transform: uppercase;
}

.optimization .optimization_text {
    margin-top: 25px;
    margin-left: 391px;
    color:#4a4a4a;
    font-size: 17px;
    font-weight: 300;
    line-height: 27px;
    /* font-family: "Roboto Light"; */
}

.optimization .optimization_text span {
    /* font-family: "Roboto - Bold"; */
    font-weight: 700;
}

.optimization .optimization_img {
    position: absolute;
    top: -54px;
    left: -240px;
    z-index: -1;
}

.finish {
    min-height: 447px;
    padding: 86px 0 79px 0;
    background: url('../img/bg/second_bg.jpg') center center/cover no-repeat;
}

.finish .finish_wrapper {
    margin-top: 41px;
    display: flex;
    justify-content: space-between;
}

.finish .finish_wrapper .finish_item {
    width: 204px;
}

.finish .finish_wrapper .finish_item .finish_round {
    display: flex;
    justify-content: center;
    align-items:center;
    margin: 0 auto;
    width: 115px;
    height: 115px;
    background-color: #b4e2ff;
    border-radius: 100%;
}

.finish .finish_wrapper .finish_item .finish_descr {
    margin-top: 25px;
    text-align: center;
    color: #efefef;
    font-family: Roboto;
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;

}
.gift {
    min-height: 628px;
    background-color: #efefef;
    padding: 86px 0 87px 0;
}


.gift .gift_img {
    display: block;
    margin: 0 auto;
    /* margin-top: 86px; */
}

.gift .gift_text {
    padding: 0 5px;
    margin-top: 42px;
    color: #252525;
    /* font-family: Roboto; */
    font-size: 30px;
    font-weight: 400;
    line-height: 43px;
    text-align: center;
}

.gift .gift_btn {
    margin-top: 52px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border: none;
}

 
.first {
    min-height: 515px;
    padding: 89px 0 64px 0;
}

.first .first_img {
    display: block;
    margin: 0 auto;
}

.first .first_text {
    margin-top: 37px;
    color: #252525;
    /* font-family: Roboto; */
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}

.first .date {
    margin-top: 30px;
    color: #299cbd;
    /* font-family: "Roboto - Black"; */
    font-size: 36px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}

.first .first_subtitle {
    margin-top: 25px;
    color: #4a4a4a;
    font-size: 23px;
    font-weight: 400;
    text-align: center;
}

footer {
    min-height: 166px;
    background-color: #1a1a1a;
    padding: 61px 0 69px 0;
}

.info {
    margin: 0 auto;
    width: 377px;
    text-align: center;
    color: #888888;
    /* font-family: Roboto; */
    font-size: 15px;
    font-weight: 300;
    line-height: 21px;
}

footer a {
    color: #888888;
    /* font-family: Roboto; */
    font-size: 15px;
    font-weight: 300;
    line-height: 21px;
    text-decoration: none;
}

.underlined {
    text-decoration: underline;
}