@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;
    box-shadow: 0 10px 50px rgba(22, 33, 54, .16);
    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;
}

    .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);
    box-shadow: 0 10px 50px rgba(22, 33, 54, .16);
    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;
    box-shadow: 0 10px 50px rgba(22, 33, 54, .16);
    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) {
    #goverment .section_footer span {
        display: block;
        font-size: 14px;
        text-align: center;
    }

    .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;
        height: 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;
    }
}