@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:#3A76BB;
    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: 1 / -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;
}
.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;
   }
}