@import url("normal.css");
/*@import url("font.css");*/
:root {
    --content-width: 120rem;
    --page-width: 120rem;
    --orange: #F2673A;
    --font-color-black: #0C0330;
    --green: #009580;
    --blue: #3A76BB;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    background-color: #ffffff;
    min-height: 100vh;
    scroll-behavior: smooth;
}

h1 {
    font-size: clamp(2.30rem, 2.1709rem + 0.67vw, 3.00rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--font-color-black);
}

h2 {
    font-size: clamp(1.00rem, 0.8120rem + 0.96vw, 2.00rem);
    font-weight: 600;
    line-height: 1.2rem;
    color: var(--font-color-black);
}

p {
    font-family: "Open Sans";
    font-size: clamp(1.00rem, 0.8690rem + 0.63vw, 1.63rem);
    line-height: 1.1;
}

.outer-container {
    max-width: var(--content-width);
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: fit-content(600px) 1fr fit-content(450px);
    grid-template-areas: "header"
        "main"
        "footer";
}

.inner-container {
    max-width: var(--page-width);
}

#main {
    max-width: var(--page-width);
    margin: 0 auto;
    width: 100%;
}

header {
    grid-area: header;
}

.header {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 120px repeat(6, fit-content(120px));
}

.menu_line {
    grid-column: 1/9;
    grid-row: 1/2;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    margin: auto 0;
}

.header_illustration {
    grid-column: 10/-1;
    grid-row: 1/-1;
}

    .header_illustration > img {
        width: 100%;
    }

.menu_line .logo {
    display: flex;
    flex-direction: row;
    column-gap: 3rem;
    justify-content: right;
    padding-right: 3rem;
    align-content: center;
    flex-wrap: wrap;
    background-color: var(--orange);
    border-radius: 0 2rem 2rem 0;
    border-color: #3e3e3c;
    border-width: 1px;
    border-style: solid;
    width: 90%;
    height: 5rem;
}

.header .logo img {
    height: clamp(1.00rem, 0.6116rem + 1.93vw, 3.00rem);
    /* height: 3rem;*/
}
/*menu*/
.menu_button {
    grid-column: 6/7;
    grid-row: 1/2;
    display: flex;
    flex-direction: row;
    align-self: center;
    cursor: pointer;
    gap: 1rem;
    transition: opacity 1s linear;
}

.menuburger {
    position: relative;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    /*transform: rotate(90deg);*/
    align-self: center;
    z-index: 999;
}

    .menuburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #0C0330;
        left: 0;
        transform: rotate(0deg);
    }

        .menuburger span:nth-child(1) {
            top: 0px;
        }

        .menuburger span:nth-child(2) {
            top: 7px;
        }

        .menuburger span:nth-child(3) {
            top: 14px;
        }

.menu_button-text {
    display: block;
    font-family: 'Golos Text',open-sans;
    font-size: 1.5rem;
    color: #0C0330
}
/* end menu*/
.slogan {
    grid-column: 2/10;
    grid-row: 2/3;
    margin-left: 2rem;
    margin-top: 2rem;
}

    .slogan h1 {
        font-size: clamp(2.70rem, 0.2802rem + 4.42vw, 5.75rem);
        line-height: 120%;
        color: var(--green);
        text-transform: uppercase;
    }

        .slogan h1 span {
            color: var(--orange);
        }

    .slogan h2 {
        font-size: clamp(1.30rem, 1.0000rem + 1.5vw, 2.80rem);
        font-weight: 500;
        line-height: 120%;
    }

.subslogan {
    grid-column: 2/10;
    grid-row: 4/5;
    align-self: end;
    margin: 3rem 2rem;
}

    .subslogan span {
        font-size: clamp(0.69rem, 0.4280rem + 1.31vw, 2.00rem);
        color: #5c0394;
        line-height: 120%;
        padding-bottom: 1rem;
    }

.hearder_diagr {
    grid-column: 2/9;
    grid-row: 5/6;
    width: 100%;
}

.green-pic {
    grid-column: 1/2;
    grid-row: 4/6;
    width: 70%;
}
/*.button_line{
    grid-column: 3/9;
    grid-row: 5/6;
    align-self: end;
    display: flex;
    flex-direction: row;
    gap:2rem;
}
a.button{
    display:block;
    text-decoration: none;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-width: 2px;
    border-radius: 30px;
    border-style: solid;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    box-shadow: 0px 4px 2px 1px rgb(8 8 8 / 17%);
    width: 14rem;
    height: 3.125rem;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
}*/
.orange {
    background-color: #ef682e;
    color: #ffffff;
    border-color: #F2673A;
}

.white {
    background-color: #ffffff;
    color: #ef682e;
    border-color: var(--font-color-black);
}

footer {
    grid-area: footer;
    background-color: #ffffff;
}

.footer {
    max-width: var(--page-width);
    margin: 0 auto;
    background-image: url("../img/footer_back_n.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    .footer img {
        margin: 0 auto;
    }

/*@media (max-width: 1440px) {
    .header_illustration{
        grid-column: 8/-1;

    }
}
@media (max-width: 1024px) {
    .header_illustration{
        grid-column: 7/-1;

    }
    }
 */
@media (max-width: 876px) {
    #main {
        width: 99vw;
    }

    .outer-container {
        grid-template-rows: 1fr;
        width: 99vw;
        /* margin: 0 auto;*/
        justify-content: center;
        overflow: hidden;
    }

    .menu_line {
        grid-column: 11 / -1;
        width: 97%;
    }

        .menu_line .logo {
            column-gap: 1rem;
            justify-content: center;
            padding: 0 1rem;
            width: 90%;
            height: 2rem;
            flex-wrap: nowrap;
            align-items: center;
        }

    .slogan {
        width: 97%;
        grid-column: 2 / 15;
        grid-row: 2 / 4;
        margin-top: 2rem;
    }

        .slogan h1 {
            font-size: clamp(1.88rem, 1.1060rem + 3.87vw, 5.75rem);
        }

    .header_illustration {
        grid-column: 1/-1;
        grid-row: 4/5;
        width: 100%
    }

    .hearder_diagr {
        display: none;
    }

    .subslogan {
        grid-column: 1 / -1;
        grid-row: 6 /7;
        align-self: end;
        margin: 3rem 1rem;
    }

    .green-pic {
        display: none;
    }
}

.section_header {
    grid-column: 2/-1;
    grid-row: 1/2;
    margin: 0 1rem;
}

.section_title {
    display: block;
    font-family: "Golos Text",sans-serif;
    font-weight: 600;
    color: var(--font-color-black);
    font-size: clamp(1.80rem, 1.1000rem + 3.5vw, 5.30rem);
    line-height: 113%;
}

.section_footer {
    grid-column: 4/12;
    grid-row: 3/4;
    margin-left: 2rem;
}

@media (max-width: 876px) {
    .dasdasd {
        grid-column: 1 / 17;
        margin-left: auto;
        padding: 0px 20px 0px 20px;
    }
}

.orange_text {
    color: var(--orange);
}

.green_text {
    color: var(--green);
}

.blue_text {
    color: var(--blue );
}

.section_subtitle {
    display: block;
    font-family: "Golos Text",sans-serif;
    font-size: clamp(1.30rem, 0.8600rem + 2.2vw, 3.50rem);
    font-weight: 500;
    line-height: 120%;
    color: var(--font-color-black);
}

.section_content {
    grid-column: 1/-1;
    grid-row: 2/-1;
    margin-top: 3rem;
}

@media(max-width: 320px) {
    footer img {
        width: 319px;
    }
}