@font-face {
    font-family: 'Stolzl';
    src: url('fonts/stolzl_bold.otf') format('opentype');
}

@font-face {
    font-family: 'Stolzl';
    src: url('fonts/stolzl_book.otf') format('opentype');
}

@font-face {
    font-family: 'Stolzl';
    src: url('fonts/stolzl_light.otf') format('opentype');
}

@font-face {
    font-family: 'Stolzl';
    src: url('fonts/stolzl_medium.otf') format('opentype');
}

@font-face {
    font-family: 'Stolzl';
    src: url('fonts/stolzl_regular.otf') format('opentype');
}

@font-face {
    font-family: 'Stolzl';
    src: url('fonts/stolzl_thin.otf') format('opentype');
}

button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    /* отображаем курсор в виде руки при наведении; некоторые
  считают, что необходимо оставлять стрелочный вид для кнопок */
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}

h1,
h2,
h3 {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
}

body {
    font-family: 'Stolzl', sans-serif;
}

header {
    background-color: #063943;
}

.header__top {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.header__logo img {
    width: 270px;
}

.container {
    max-width: 1476px;
    padding-right: 75px;
    padding-left: 75px;
    margin-right: auto;
    margin-left: auto;
}

.header__list {
    display: flex;
    font-size: 20px;
    margin: 0;
}

.header__nav {
    display: flex;
    align-items: center;
}

.header__contacts {
    display: grid;
    font-size: 20px;
}

.header__contacts a img {
    width: 20px;
    margin-right: 10px;
}

.header__list-item {
    margin-right: 100px;
    cursor: pointer;
}

.header__list-item:hover {
    color: #08a398;
}


/*BANNER*/

.banner {
    background-image: url(/img/фон\ шапка\ верхняя.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 30px;
}

.banner__block {
    display: flex;
    justify-content: center;
    margin-top: 0px;
    padding: 30px;
    max-width: 100%;
    /*background-image: url(/img/рамка\ в\ шапке.png);*/
    background-repeat: no-repeat;
    background-size: contain;
    /*max-width: 726px;*/
    align-items: center;
    text-align: center;
    margin-bottom: 0px;
}

.banner__container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.imgsha {
    width: 62px;
    margin-bottom: 12px;
    display: inline;
}

.banner__block-content {
    color: white;
}

.banner__block-content h1 {
    font-size: 55px;
}

.banner__block-content h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 100;
}

.banner__block-content .btn-wrap a{
    margin-bottom: 12px;
}

.docs .mesh1__card img{
    max-height: 500px;
}


.palkaimg {
    width: 200px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.btn {
    background-color: #08a398;
    padding: 19px 52px;
    line-height: 0;
    color: #fff;
    font-weight: bold;
}

.btn:hover {
    background-color: #063943;
    color: white;
}


/*ABOUT*/

.about {
    background-image: url(/img/фон\ о\ нас.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 0px;
    color: black;
}

.about h2 {
    color: #1e5f65;
    font-size: 40px;
    text-align: center;
}

.subtitle {
    color: #08a398;
}

.razgroni {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.razgroni__wrap {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.razgroni__wrap img {
    max-width: 653px;
}

.about p {
    color: #063943;

    font-size: 15px;
    color: black;
}

.about__block {
    background-color: #063943;
    color: white;
    text-align: center;
    padding: 10px 10px;
    width: 247px;
    height: 50px;
    text-align: center;
    align-items: center;
    display: grid;
    justify-items: center;
    margin-top: 15px;
}

.about__card {
    max-width: 277px;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.about__card img {
    max-width: 80px;
    margin-bottom: 20px;
}

.about__cards-top {
    display: flex;
    justify-content: space-between;
    margin-top: 79px;
    font-weight: 800;
}

.about__cards-bottom {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 0px;
    font-weight: 800;
}

.tt {
    width: 122px;
}

.btn-wrap {
    align-items: center;
    display: flex;
    justify-content: center;
}


/*PRODUCT*/

.product {
    background-image: url(/img/фон\ продукция.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 70px;
}

.product h2 {
    text-align: center;
    color: white;
    font-size: 40px;
}

.product__desc {
    background-color: #08a398;
    padding: 10px 10px;
    height: 44px;
    width: 145px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
}

.product__card {
    text-align: center;
    max-width: 170px;
    display: grid;
    align-content: space-between;
    align-items: center;
    justify-items: center;
}

.product__card img {
    width: 55px;
    margin-bottom: 15px;
}

.product__cards {
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
}

.product__card:last-child img {
    height: 74px;
    width: 65px;
}


/*MESH1*/

.mesh__razd {
    background-color: #063943;
    display: flex;
    align-items: center;
    color: white;
    font-size: 25px;
    font-weight: 900;
    padding-top: 20px;
    padding-bottom: 20px;
    justify-content: center;
    margin-bottom: 114px;
}

.mesh__razd p img {
    position: absolute;
    left: -70px;
    width: 50px;
    top: 4px;
}

.mesh__razd p {
    position: relative;
    margin: 0;
}

.card__desc {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #1e5f65;
    font-size: 13px;
}

.card__desc {
    margin-bottom: 2px;
}

.mesh1__card {
    width: 372px;
    margin-bottom: 67px;
}

.mesh1__card img {
    width: 372px;
}

.card__desc-item1 {
    max-width: 296px;
}

.mesh1__cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}


/*CONTACT*/


/*CONTACT*/

.contact {
    background-image: url(/img/фон\ нижний.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 70px;
    color: white;
}

.contact h2 {
    text-align: center;
    color: white;
    font-size: 40px;
}

.contact__block {
    display: flex;
    justify-content: space-around;
    margin-top: 60px;
}

.contact__desc {
    display: grid;
    align-items: center;
    align-content: space-around;
    margin-left: 15px;
    max-width: 553px;
}

.bottom__contacts {
    display: grid;
}

.bottom__contacts a {
    margin-bottom: 10px;
    align-items: center;
    display: flex;
}

.bottom__contacts a img {
    width: 20px;
    margin-right: 10px;
}

.palka2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.palkaimg2 {
    margin-top: 60px;
}

footer {
    background-color: #063943;
    padding: 38px 0;
    color: white;
    text-align: end;
    font-size: 20px;
}

.rr {
    display: flex;
    align-items: flex-start;
}

.rr img {
    margin-right: 10px;
    width: 20px;
}

.contact__desc p img {
    width: 20px;
    margin-right: 10px;
}

.tq {
    display: flex;
    align-items: center;
}

@media (max-width: 1500px) {
    .banner__block-content img {
        margin-bottom: 7px;
        width: 42px;
    }
    .banner__block-content h1{
        font-size: 38px;
    }
    .banner__block-content p {
        margin: 0 0 6px 0;
        font-size: 14px;
    }
    .banner__block-content .btn-wrap a{
        margin-bottom: 6px;
    }
}

@media (max-width: 1290px) {
    .header__top {
        flex-direction: column;
    }
    .header__logo {
        margin-bottom: 15px;
    }

    .banner__block-content img {
        margin-bottom: 5px;
        width: 42px;
    }
    .banner__block-content h1{
        font-size: 32px;
    }
    .banner__block-content p {
        margin: 0 0 6px 0;
        font-size: 11px;
    }
    .banner__block-content .btn-wrap a{
        margin-bottom: 6px;
    }

    .contact__block {
        display: flex;
        justify-content: space-evenly;
        margin-top: 60px;
        flex-direction: column-reverse;
        align-items: center;
    }
    .contact__desc {
        display: grid;
        align-items: center;
        align-content: space-around;
        justify-items: center;
        margin: 0;
    }
    .uradress {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .fizadress {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .rr img {
        display: none;
    }
}

@media (max-width: 1225px) {
    .razgroni__wrap img {
        max-width: 500px;
    }
}

@media (max-width: 1146px) {
    .mesh1__cards {
        justify-content: space-around;
    }

    .banner__block-content img {
        margin-bottom: 2px;
        width: 36px;
    }
    .banner__block-content h1{
        font-size: 24px;
    }
    .banner__block-content p {
        margin: 0 0 6px 0;
        font-size: 8px;
    }
    .banner__block-content .btn-wrap a{
        margin-bottom: 6px;
    }
    .banner__block-content .btn-wrap .btn{
        padding: 12px 22px;
    }
}

@media (max-width: 1085px) {
    .razgroni__wrap img {
        max-width: 350px;
    }
}

@media (max-width: 905px) {
    .about__cards-top {
        display: flex;
        margin-top: 79px;
        flex-direction: column;
        align-items: center;
    }
    .about__block {
        width: 652px;
    }
    .about__card {
        max-width: 510px;
        margin-bottom: 30px;
    }
    .about__cards-bottom {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 100px;
        flex-direction: column;
        align-items: center;
    }

    .banner__block-content img {
        margin-bottom: 2px;
        width: 36px;
    }
    .banner__block-content h1{
        font-size: 14px;
    }
    .banner__block-content p {
        margin: 0 0 2px 0;
        font-size: 6px;
    }
    .banner__block-content .btn-wrap a{
        margin-bottom: 2px;
    }
    .banner__block-content .btn-wrap .btn{
        padding: 12px 22px;
    }
}

@media (max-width: 850px) {
    .razgroni__wrap img {
        max-width: 200px;
    }
    .banner__block-content{
        flex-direction: column;
    }
    .banner__block-content div{
        align-self: center;
        text-align: center !important;
    }
    .banner__block-content img {
        margin-bottom: 10px;
        width: 60px;
    }
    .banner__block-content h1{
        font-size: 35px;
        margin-bottom: 10px;
    }
    .banner__block-content .hr{
        display: none !important;
    }
    .banner__block-content p{
        margin: 0 0 2px 0;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .banner__block-content .btn-wrap a{
        margin-bottom: 2px;
    }
    .banner__block-content .btn-wrap .btn{
        padding: 12px 22px;
    }
}

@media (max-width: 809px) {
    .header__list {
        font-size: 25px;
        margin-top: 20px;
    }
    .header__nav {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
    }
    .header__list-item:last-child {
        margin-right: 0px;
    }
    .imgsha {
        width: 66px;
        margin-bottom: 8px;
    }
    .banner__block-content h1 {
        font-size: 40px;
    }
    .banner__block {
        display: flex;
        justify-content: center;
        margin-top: 102px;
        padding: 29px;
        max-width: 732px;
        background-image: url(/img/рамка\ в\ шапке.png);
        background-repeat: no-repeat;
        background-size: contain;
        max-width: 536px;
        align-items: center;
        text-align: center;
        margin-bottom: 50px;
        background-position: bottom;
    }
    .banner__block-content h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 100;
    }
    .product__desc {
        width: 245px;
    }
    .product__card {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .product__cards {
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }
    .mesh__razd p img {
        display: none;
    }
}

@media (max-width: 777px) {
    .mesh1__card {
        width: 237px;
        margin-bottom: 67px;
    }
    .mesh1__card img {
        width: 237px;
    }
    .card__desc {
        font-size: 13px;
    }
    .card__desc-item1 {
        max-width: 158px;
    }
    .subtitle {
        font-size: 12px;
    }
}

@media (max-width: 718px) {
    .about__block {
        width: 468px;
    }
}

@media (max-width: 682px) {
    .uradress p {
        text-align: center;
    }
    .fizadress p {
        text-align: center;
    }
    .contact__card {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .razgroni__wrap img {
        max-width: 120px;
    }
    .mesh__razd p {
        font-size: 20px;
    }
    .palka2 img:last-child {
        width: 357px;
    }
    .container {
        max-width: 1476px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 537px) {
    .about__block {
        width: 300px;
    }
    .about__card {
        max-width: 323px;
    }
}

@media (max-width: 513px) {
    .banner__block-content h1 {
        font-size: 30px;
    }
    .banner__block {
        padding: 15px;
    }
    .tq {
        display: flex;
        align-items: center;
        font-size: 12px;
    }
    .header__nav nav {}
}

@media (max-width: 470px) {
    .subtitle {
        font-size: 12px;
    }
    .razgroni__wrap img {
        max-width: 100px;
    }
}

@media (max-width: 424px) {
    .header__logo img {
        width: 336px;
    }
    .subtitle {
        font-size: 10px;
    }
}

@media (max-width: 400px) {
    .banner__block-content h3 {
        font-size: 14px;
    }
    .contact__desc p img {
        display: none;
    }
    .contact__desc p {
        text-align: center;
    }
    .palka2 img:last-child {
        width: 290px;
    }
}

.u p img {
    position: absolute;
    left: -84px;
    width: 67px;
    top: 4px;
}