@import url("media.css") (max-width: 876px);
@import url("callculator.css");
#what_that{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(2,fit-content(120px));
    margin-top:1rem;

}
/*.section_header{
   grid-column: 2/-1;
   grid-row: 1/2;
  }
.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;
}*/
.what_markup {
    grid-column: 2/12!important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
   gap: clamp(0.50rem, 0.0176rem + 2.41vw, 3.00rem);
    margin: 0 auto;
    justify-content: space-between;

}
.what_item{
    border-radius: 2.1rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--font-color-black);
    margin-top: 3.125rem;
    height:clamp(30.00rem, 28.4000rem + 8vw, 38.00rem) ;
    width: 31%;


}
.what_item-head{
    background-color: var(--green);
    display: flex;
    flex-direction: row;
    gap:1.125rem;
    padding: 1.5rem;
    border-radius: 2rem 2rem 0 0 ;
    border-style: solid;
    border-width: 1px;
    border-color: var(--font-color-black);

}
.what_item-head img{
    width: clamp(4.00rem, 3.4000rem + 3vw, 7.00rem);
    margin: 1rem;
    align-self: center;
}
.what_item-head span{
    display: block;
    font-family: "Open Sans",sans-serif;
    font-size: clamp(1.20rem, 0.7600rem + 0.8vw, 1.75rem);
    font-weight: 600;
    color: white;
    align-self: center;
    line-height: 1.1;
}
.what_item-content{
    padding: 1.5rem;
}
.what_item-content p{
    line-height: 1.23;
}
.what_item-content ul{
    font-family:"Open Sans";
    font-size: clamp(1.00rem, 0.8690rem + 0.63vw, 1.63rem);
    /*font-size: clamp(1.10rem, 0.5605rem + 0.84vw, 1.60rem);*/
    line-height: 1.23;
   /* margin: 1rem;*/
}
.what_item-content ul li{
    position: relative;
 /*   list-style-type:circle;*/
}
/*.what_item-content ul li::marker{
 color: var(--green);
    font-size: 1rem;
}*/
.what_item-content ul li::before{
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    border-color: var(--green);
    background-color: #ffffff;
    display: inline-block;
    vertical-align: middle;
}
.what_item-content  li + li {
    margin-top: 1rem;

}
#advantages {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2,fit-content(120px));
    margin-top: 5rem;
}
.add-illustr {
    grid-column: 9/16;
    grid-row:1/8;
    width: 90%;
    align-self: end;
}
.advantages_markup{
    display: grid;
    grid-template-columns: repeat(16,1fr);
    grid-template-rows: repeat(8,fit-content(120px));
    row-gap:clamp(1.00rem, 0.4000rem + 3vw, 4.00rem);

}
.adv_content{
    display: flex;
    flex-direction: column;
    gap:0.5rem;
    align-self: center;
}
.adv_item0{
    grid-column: 2/8 ;
    grid-row:1/2;
}
.adv_item1{
    grid-column: 2/8 ;
    grid-row:2/3;
}
.adv_item2{
    grid-column: 2/8 ;
    grid-row:3/4;
}
.adv_item3{
    grid-column: 2/8 ;
    grid-row:4/5;
}
.adv_item4{
    grid-column: 2/8 ;
    grid-row:5/6;
}
.adv_item5{
    grid-column: 2/8 ;
    grid-row:6/7;
}
.adv_item6{
    grid-column: 2/8 ;
    grid-row:7/8;
}
.adv_item7{
    grid-column: 2/8 ;
    grid-row:8/9;
}
.adv_item{
    display: flex;
    flex-direction: row;
    gap:2rem;
    margin-left: 2rem;
}
.adv_item span{
    display: block;
    font-family: "Open Sans",sans-serif;
    font-size: clamp(1.25rem, 1.1500rem + 0.5vw, 1.75rem);
    font-weight: 600;
    color: var(--green);
    align-self: start;
    line-height: 1.1;
}
.adv_item img{
    width: clamp(5.60rem, 5.1200rem + 2.4vw, 8.00rem);
    height: clamp(5.60rem, 5.1200rem + 2.4vw, 8.00rem);
}
.vznos{
    grid-column: 9/16;
    grid-row: 1/3;
    border-radius: 2.1rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--font-color-black);
    display: flex;
    height: 9.75rem;
    width: 94%;
    align-self: center;
}
.vznos span{
    display: flex;
    font-family: "Golos Text",sans-serif;
    font-size: clamp(1.25rem, 0.8000rem + 2.25vw, 3.50rem);
    font-weight: 600;
    color: var(--blue);
    align-self: center;
    line-height: 113%;
    margin: 1rem 5rem;
    text-align: center;
    align-self: center;
}
.blue-pic{
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    margin-top: 3.4rem;
}
#goverment {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(3, fit-content(120px));
    margin-top: 5rem;
    row-gap: 2rem;
}
.goverment-markup{
    grid-column: 2/16!important;
    grid-row: 2/3!important;
    display: flex;
    flex-direction:row;
    justify-content: center;
    flex-wrap: nowrap;
    width: 95%;
    gap: clamp(0.13rem, -0.0395rem + 0.84vw, 1.00rem);
}
.gov_item{
    display: flex;
    width: 33%;
    flex-direction: column;
}
.gov_item-tumb{
    display: flex;
    font-size: clamp(0.63rem, 0.3640rem + 1.12vw, 1.75rem);
    color: white;
    background-color: var(--green);
    height: clamp(4.60rem, 2.2809rem + 9.47vw, 14.00rem);
    border-radius: clamp(0.50rem, 0.2056rem + 1.45vw, 2.00rem);
    border: 1px black solid;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
    line-height: 1.2;
}
.gov_item-point{
    font-size: clamp(0.63rem, 0.1624rem + 1.99vw, 2.63rem) ;
    font-weight: bold;
    padding: 3rem 0;
    text-align: center;
    border-bottom: 2px solid black ;
    width: 90%;
    align-self: center;
    text-wrap: nowrap;
}
#goverment .section_footer span{
    display: block;
    font-size: clamp(0.63rem, 0.5075rem + 0.6vw, 1.25rem);
    text-align: center;

}

#safety {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(2,fit-content(120px));
    margin-top: 5rem;
    row-gap: 2rem;
}
.safety_markup{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(24,1fr);
    gap:1rem;
    margin: 4rem 3rem;
    }
.safety_item{
    position: relative;
    border-radius: 2.1rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--font-color-black);
    height: 225px;
}
.safety_item > img{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: -52px;
}
.s_item1{
    grid-column:2/9 ;
    grid-row:1/-1 ;
    align-content: center;
}
.s_item2{
    grid-column:9/16 ;
    grid-row:1/-1 ;
    align-content: center;
}
.s_item3{
    grid-column:16/23;
    grid-row:1/-1;
    align-content: center;
}
.safety_item-content{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    flex-wrap:nowrap;
    height: 100%;
}
.safety_head{
    display:block;
    font-family: "Golos Text",sans-serif;
    font-size: clamp(4.06rem, 4.1800rem + -0.6vw, 3.44rem);
    font-weight: 600;
    color: var(--orange);
    align-self: center;
    line-height: 1.13;
}
.safety_text{
    display:inline-block;
    font-family: "Golos Text",sans-serif;
    font-size: clamp(1.25rem, 1.2970rem + -0.24vw, 1.00rem);
    font-weight: 600;
    color: var(--font-color-black);
    line-height: 1.13;
    height: 1.25rem;
    vertical-align: top;
    text-align: center;
    width: 60%;
    margin: 0 auto;
}
.orange-pic{
     grid-column: 23 / -1;
    grid-row: 1 / 3;
    margin-top: 8rem;
}
#npf_list {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(3,fit-content(120px));
    margin-top: 5rem;
}
.subsection_one {
    grid-column: 2/-1;
    grid-row:2/2
}
.subsection_two {
    grid-column: 2/-1;
    grid-row:3/3
}
.subsection_title{
    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);
    margin: 1rem 0;
    text-align: center;
}
.fs {
    font-size: clamp(1rem, 0.8600rem + 2.2vw, 2.50rem)!important;
    margin: 1rem 0;
}
.npf_markup{
display: flex;
flex-wrap: wrap;
    gap:1rem;
    margin: 3rem 0;
    /*justify-content: center;*/
}
.npf_item{
    width: 18%;
    display: inline-grid;
    align-content: center;
    /*justify-content: center;*/
}
.npf_item a img{
    width: 180px;
}
#big-button{
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 120px;
    gap:1rem;
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: opacity 1s ease-in-out;
}
#big-button.js-active {
    height: auto;
    opacity: 1;
    visibility: visible;
    display: grid;
    margin: 6rem 0;
}
.join-button{
    height: auto;
    opacity: 1;
    visibility: visible;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 120px;
    gap: 1rem;
    margin: 6rem 0;
}

.big-button{
    grid-column: 3/14;
    background-color: var(--orange);
    font-family: "Golos Text",sans-serif;
    font-size: clamp(1.25rem, 0.7676rem + 2.41vw, 3.75rem);
    font-weight: 600;
    color: #ffffff;
    align-self: center;
    line-height: 1.13;
    padding: 1.25rem 0;
    text-align: center;
    border-radius: 3rem;
    text-transform: uppercase;
    cursor: pointer;

}
.big-button span {
display: block;
}
.all-qa{
    grid-row: 3 / 4;
    grid-column: 12 / 14;
    background-color: var(--green);
    font-family: "Golos Text",sans-serif;
    font-weight: 600;
    color: #ffffff;
    align-self: center;
    line-height: 1.13;
    padding: 1.25rem 0;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    width: clamp(16.00rem, 14.8473rem + 5.78vw, 22.00rem);
    font-size: 1rem;
    border-radius: 2rem;

}

@media (prefers-reduced-motion: no-preference) {
    #advantages {
        animation: left  linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }
  .join-button{
      animation: button-apear  ease-in;
      animation-timeline: view();
      animation-range: entry 0 cover 50%;
  }

    .adv_item{
        animation: left ease-out;
        animation-timeline: view();
        animation-range: entry 0% cover 15%;
    }
   #advantages{
        animation: apear  linear;
        animation-timeline: view();
        animation-range: entry 0% cover 2%;
    }
}
@keyframes apear {
    from {
        opacity: 0;
        scale: 0.5;
        }
    to {
        opacity: 1;
        scale: 1;

    }
}
@keyframes button-apear {
    from {
        opacity: 0.5;
        scale: 0.9;
        visibility: hidden;
    }
    to {
        opacity: 1;
        scale: 1;
        visibility: visible;
    }
}
@keyframes left {
    from {
        transform: translate(-100%);
        opacity: 0;
        scale: 0.8;
    }
    to {
        transform: translate(0%);
        opacity: 1;
        scale: 1;
    }
}
@keyframes right {
    from {
        transform:translate(100%) ;
        opacity: 0;
        scale: 0;
    }
    to {
        transform:translate(0%) ;
        opacity: 1;
        scale: 1;
    }
}
@media (max-width: 1024px) {
    .what_item{
        width: 365px;
    }
    .what_item-content p{
        line-height: 1.1;
    }

     .what_item-content ul{
      /*  font-size: 1rem;*/
        line-height: 1.1;

   }
    .s_item1 {
        grid-column: 2 / 13;
        grid-row: 1 / 2;
    }
    .s_item2 {
        grid-column: 13 / 24;
        grid-row: 1 /2;
    }
    .s_item3 {
        grid-column: 9 /19;
        grid-row: 2 / 3;
    }
    .gov_item-tumb {
        line-height: 1.1;
    }
}
@media (max-width: 876px) {
    .section_header {
        grid-column: 1 / -1!important;
         width: 95%;
        margin: 0 0 2rem 2rem ;
        }
    .what_markup{
        grid-column: 1 / -1!important;
        flex-direction: column;
        gap:2rem;

    }
    .what_item {

        width: 320px;
        margin-top: 0;
    }
    .what_item-head span
    {
        font-size: clamp(1.25rem, 1.1500rem + 0.5vw, 1.75rem);
    }
    .blue-pic {
        display: none;
    }
    .adv_item img {
        width: 50px;
    }
    .adv_item0 {
        grid-column: 1 / 15;
    }
    .adv_item1 {
        grid-column: 1 / 15;
    }
    .adv_item2 {
        grid-column: 1 / 15;
    }
    .adv_item3 {
        grid-column: 1 / 15;
    }
    .adv_item4 {
        grid-column: 1 / 15;
    }
    .adv_item5 {
        grid-column: 1 / 15;
    }
    .adv_item6 {
        grid-column: 1 / 15;
    }
    .adv_item7 {
        grid-column: 1 / 15;
     }

    .vznos {
        grid-column: 2 / 16;
        grid-row: 9 ;
        justify-self: center;
        margin: 1rem 0;
    }
    .vznos span {
        margin: 1rem 2rem;
    }

    .add-illustr {
        grid-column: 2 / 16;
        grid-row:  10;
        justify-self: center;

    }
    .section_footer {
        grid-column: 1 / -1;
        margin-left:0 ;
    }

 .safety_markup {
    grid-template-rows: repeat(3, 1fr);
    margin: 0 auto ;
    gap:0;
}
.orange-pic {
    display: none;
}
.safety_item{
    width: 99%;
    margin: 2rem auto;
}
.s_item1 {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
}
.s_item2 {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
}
.s_item3 {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
 }
.goverment-markup {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    width: 99%;
    margin-top: 0;
    }
.gov_item-tumb{
    line-height: 1;
}
#safety,#npf_list {

}
.npf_markup{
    margin: 0 auto;
    justify-content: center;
}
    .big-button {
        grid-column: 1/-1;
    }
    .npf_item {
        width: 25%;
    }
    #big-button {
        margin: 3rem 0;
    }
    .all-qa {
        grid-row: 3 / 4;
        grid-column: 3 / 16;
    }
}