/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
:root {
    --color-green: #18984e;
    --color-green-dark: #207f2a;
    --color-green-dark-second: #207f2a;
    --color-yellow: #ffb81c;
    --color-font-black: #2a2a2a;
    --color-font-gray: #98a4ae;
    --color-font-gray-dark: #767676;
    --color-border-gray: #ebebeb;
    --color-bg-white: #f5f5f5;
    --font-exo: "Exo 2", sans-serif
}

@font-face {
    font-weight: 700;
    font-family: "Exo 2";
    font-style: normal;
    src: local("Exo 2"), local("Exo2"), url(/vazhno-znat-o-tolshchine-metalla/assets/fonts/Exo2-Bold.ttf) format("truetype")
}

@font-face {
    font-weight: 500;
    font-family: "Exo 2";
    font-style: normal;
    src: local("Exo 2"), local("Exo2"), url(/vazhno-znat-o-tolshchine-metalla/assets/fonts/Exo2-Medium.ttf) format("truetype")
}

@font-face {
    font-weight: 400;
    font-family: "Exo 2";
    font-style: normal;
    src: local("Exo 2"), local("Exo2"), url(/vazhno-znat-o-tolshchine-metalla/assets/fonts/Exo2-Regular.ttf) format("truetype")
}

*, *:before, *:after {
    box-sizing: border-box
}

*:focus-visible {
    outline: 1px solid gray
}

.vazhno-znat-o-tolshchine-metalla h1 {
    font-family: var(--font-exo);
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    color: #001e67 !important;
    line-height: 1.2em;
}

@media (max-width: 1280px) {
    .vazhno-znat-o-tolshchine-metalla h1 {
        font-size: 26px
    }
}

@media (max-width: 768px) {
    .vazhno-znat-o-tolshchine-metalla h1 {
        font-size: 22px
    }
}

.vazhno-znat-o-tolshchine-metalla {
    font-family: var(--font-exo);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2em;
    color: #001e67;
    background: #fff;
}

@media (max-width: 1280px) {
    .vazhno-znat-o-tolshchine-metalla {
        font-size: 18px
    }
}

.vazhno-znat-o-tolshchine-metalla .container {
    /*width: 86vw;*/
    /*max-width: 1400px;*/
    margin: 0 auto
}

@media (max-width: 960px) {
    .vazhno-znat-o-tolshchine-metalla .container {
        width: 100%;
        padding-inline: 30px
    }
}

@media (max-width: 560px) {
    .container {
        width: 100%;
        padding-inline: 15px
    }
}

.vazhno-znat-o-tolshchine-metalla .blue-block {
    padding: 20px 30px;
    color: #fefefe;
    background-color: #001c67;
    /*text-transform: uppercase;*/
    line-height: 125%
}

@media (max-width: 560px) {
    .vazhno-znat-o-tolshchine-metalla .blue-block {
        line-height: 135%;
        font-size: 14px;
        padding: 15px 25px
    }
}

.vazhno-znat-o-tolshchine-metalla .flex {
    display: flex
}

.vazhno-znat-o-tolshchine-metalla .shadow {
    box-shadow: 0 9px 19.6px 4px #00000042
}

.vazhno-znat-o-tolshchine-metalla .promo {
    margin-top: 90px;
    margin-bottom: 60px
}

.vazhno-znat-o-tolshchine-metalla .promo h1 {
    text-align: center;
    margin-bottom: 60px;
    text-transform: uppercase;
    line-height: 1.2em;
}

.vazhno-znat-o-tolshchine-metalla .promo h1 + p {
    max-width: 770px;
    margin: 0 auto 25px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase
}

.vazhno-znat-o-tolshchine-metalla .promo .text {
    margin-bottom: 30px
}

.vazhno-znat-o-tolshchine-metalla .promo .flex {
    margin-bottom: 20px
}

.vazhno-znat-o-tolshchine-metalla .promo .flex--left {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 30px
}

.vazhno-znat-o-tolshchine-metalla .promo .shadow {
    /*text-transform: uppercase;*/
    /*line-height: 120%*/
}

@media (max-width: 768px) {
    .vazhno-znat-o-tolshchine-metalla .promo {
        margin-top: 60px
    }

    .vazhno-znat-o-tolshchine-metalla .promo h1 {
        margin-bottom: 40px;
        font-size: 20px;
        line-height: 24px
    }

    .vazhno-znat-o-tolshchine-metalla .promo .text {
        margin-bottom: 20px;
        font-size: 16px
    }

    .vazhno-znat-o-tolshchine-metalla .promo .text.shadow {
        font-size: 14px
    }

    .vazhno-znat-o-tolshchine-metalla .promo .flex {
        flex-direction: column;
        gap: 20px
    }

    .vazhno-znat-o-tolshchine-metalla .promo .flex--left {
        width: 100%;
        gap: 20px
    }
}

.vazhno-znat-o-tolshchine-metalla .how {
    margin-bottom: 60px
}

.vazhno-znat-o-tolshchine-metalla .how__top {
    align-items: center;
    gap: 40px;
    margin-bottom: 20px;
    justify-content: center
}

.vazhno-znat-o-tolshchine-metalla .how__top h2 {
    font-size: 24px;
    font-weight: 500
}

.vazhno-znat-o-tolshchine-metalla .how__top + p {
    max-width: 1100px;
    margin: 0 auto 30px
}

.vazhno-znat-o-tolshchine-metalla .how .flex-card {
    gap: 40px;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px
}

.vazhno-znat-o-tolshchine-metalla .how .flex-card p {
    width: 80%
}

@media (max-width: 768px) {
    .vazhno-znat-o-tolshchine-metalla .how__top {
        flex-direction: column;
        text-align: center;
        gap: 20px
    }

    .vazhno-znat-o-tolshchine-metalla .how__top h2 {
        line-height: 120%;
        font-size: 18px
    }

    .vazhno-znat-o-tolshchine-metalla .vazhno-znat-o-tolshchine-metalla .how .flex-card {
        gap: 20px
    }

    .vazhno-znat-o-tolshchine-metalla .vazhno-znat-o-tolshchine-metalla .how .flex-card p {
        width: 80%;
        font-size: 15px
    }
}

.vazhno-znat-o-tolshchine-metalla .consequences {
    margin-bottom: 80px
}

.vazhno-znat-o-tolshchine-metalla .consequences .top {
    max-width: 850px;
    margin: 0 auto;
    justify-content: space-between;
    gap: 30px
}

.vazhno-znat-o-tolshchine-metalla .consequences .top > div {
    max-width: 350px
}

.vazhno-znat-o-tolshchine-metalla .consequences .top + .flex {
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px
}

.vazhno-znat-o-tolshchine-metalla .consequences .top + .flex h2 {
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase
}

.vazhno-znat-o-tolshchine-metalla .consequences .text.bold {
    text-align: center;
    font-weight: 700
}

.vazhno-znat-o-tolshchine-metalla .consequences .flex-columns {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-inline: -50px;
    margin-bottom: 40px
}

.vazhno-znat-o-tolshchine-metalla .consequences .flex-columns__card {
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex: 1
}

.vazhno-znat-o-tolshchine-metalla .consequences .flex-columns__card img {
    height: auto;
    width: 100%;
    object-fit: cover
}

.vazhno-znat-o-tolshchine-metalla .consequences .flex-columns__card p {
    font-weight: 400
}

.vazhno-znat-o-tolshchine-metalla .consequences .shadow {
    /*text-transform: uppercase;*/
    margin-inline: auto
}

.vazhno-znat-o-tolshchine-metalla .consequences p {
    margin-bottom: 40px
}

@media (max-width: 1280px) {
    .vazhno-znat-o-tolshchine-metalla .consequences .flex-columns {
        margin-inline: 0
    }
}

@media (max-width: 1024px) {
    .vazhno-znat-o-tolshchine-metalla .consequences .flex-columns {
        gap: 20px;
        flex-wrap: wrap
    }

    .vazhno-znat-o-tolshchine-metalla .consequences .flex-columns__card {
        width: calc(50% - 10px);
        flex: none
    }
}

@media (max-width: 820px) {
    .vazhno-znat-o-tolshchine-metalla .consequences .top {
        flex-direction: column;
        gap: 10px
    }

    .vazhno-znat-o-tolshchine-metalla .consequences .top > div {
        max-width: 100%
    }

    .vazhno-znat-o-tolshchine-metalla .consequences .top img {
        margin: 0 auto;
        max-width: 55%;
        transform: scale(1.2)
    }

    .vazhno-znat-o-tolshchine-metalla .consequences .top + .flex {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 135%;
        font-size: 18px
    }

    .vazhno-znat-o-tolshchine-metalla .consequences .top + .flex h2 {
        font-size: 18px
    }

    .vazhno-znat-o-tolshchine-metalla .consequences p {
        margin-bottom: 20px;
        font-size: 16px
    }

    .vazhno-znat-o-tolshchine-metalla .consequences .text.bold {
        margin-top: 30px
    }
}

@media (max-width: 768px) {
    .vazhno-znat-o-tolshchine-metalla .consequences .flex-columns {
        column-gap: 10px
    }

    .vazhno-znat-o-tolshchine-metalla .consequences .flex-columns__card {
        width: calc(50% - 5px);
        gap: 10px
    }

    .vazhno-znat-o-tolshchine-metalla .consequences .flex-columns__card .text {
        font-size: 14px
    }
}

.vazhno-znat-o-tolshchine-metalla .reliability {
    position: relative;
    margin-bottom: 20px
}

.vazhno-znat-o-tolshchine-metalla .reliability .flex.blue-block {
    justify-content: center;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px
}

.vazhno-znat-o-tolshchine-metalla .reliability .flex.blue-block p {
    margin: 0;
    /*text-transform: uppercase;*/
    max-width: 70%
}

.vazhno-znat-o-tolshchine-metalla .reliability .text-bottom {
    width: auto;
    max-width: 100%;
    /*text-transform: uppercase;*/
    margin-left: 30px;
    margin-right: 30px;
    font-weight: 700
}

.vazhno-znat-o-tolshchine-metalla .reliability h2 {
    margin-left: 40px;
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 70px
}

.vazhno-znat-o-tolshchine-metalla .reliability p {
    margin-left: 40px;
    max-width: 60%;
    margin-bottom: 30px;
    line-height: 120%
}

.vazhno-znat-o-tolshchine-metalla .reliability p:last-of-type {
    margin-bottom: 30px
}

.vazhno-znat-o-tolshchine-metalla .reliability ul {
    margin-left: 70px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.vazhno-znat-o-tolshchine-metalla .reliability img {
    position: absolute;
    top: -90px;
    right: 0%;
    width: 420px;
}

.video-js {
    text-align: center;
    width: 100%;
    background-color: unset;
    height: 577px;
    width: 90%;
    background-color: unset;
    margin: auto;
    background-color: unset;
    margin-bottom: 20px;
}

.video-block_new h2 {
    margin-left: 40px;
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 20px;
}

@media (max-width: 1280px) {
    .vazhno-znat-o-tolshchine-metalla .reliability img {
        position: absolute;
        top: 0;
        right: -5%;
        width: 300px
    }
}

@media (max-width: 960px) {
    .vazhno-znat-o-tolshchine-metalla .reliability h2 {
        margin-bottom: 40px;
        line-height: 120%;
        text-align: center
    }

    .vazhno-znat-o-tolshchine-metalla .reliability img {
        right: 0
    }
}

@media (max-width: 768px) {
    .vazhno-znat-o-tolshchine-metalla .reliability h2 {
        margin-left: 10px;
        font-size: 20px
    }

    .vazhno-znat-o-tolshchine-metalla .reliability p {
        margin-left: 10px
    }

    .vazhno-znat-o-tolshchine-metalla .reliability ul {
        margin-left: 30px
    }

    .vazhno-znat-o-tolshchine-metalla .reliability img {
        right: -10px;
        top: 50px;
        width: 210px
    }
}

@media (max-width: 560px) {
    .vazhno-znat-o-tolshchine-metalla .reliability {
        margin-bottom: 60px
    }

    .vazhno-znat-o-tolshchine-metalla .reliability .flex.blue-block {
        gap: 10px;
        font-size: 16px
    }

    .vazhno-znat-o-tolshchine-metalla .reliability .text-bottom {
        margin-left: 0;
        margin-right: 0;
        font-size: 14px;
        margin-bottom: 40px
    }

    .vazhno-znat-o-tolshchine-metalla .reliability h2 {
        margin-bottom: 220px;
        font-size: 18px
    }

    .vazhno-znat-o-tolshchine-metalla .reliability img {
        right: 50%;
        transform: translate(50%);
        top: 20px;
        width: 250px
    }

    .vazhno-znat-o-tolshchine-metalla .reliability p {
        max-width: 100%
    }

    .vazhno-znat-o-tolshchine-metalla .reliability p:last-of-type {
        margin-bottom: 60px
    }

    .video-js {
        height: 200px;
    }
}