*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}

body{
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    max-width: 1920px;
    margin: auto;
    overflow-x: hidden;
}
h1{
    font-weight: 600;
}
h2{
    font-weight: 500;
    font-size: 36px;
}
h3{
    font-weight: 500;
    font-size: 32px;
}
p{
    font-weight: 400;
    line-height: 34px;
}

.logo_menu{
    display: flex;
    justify-content: space-between;    
}
.logo_2{
    display: none;
}
.logo img{
    height: 90px;
    width: auto;
    margin-top: 25px;
    margin-left: 60px;      
}

/* МЕНЮ */

nav{
    margin-top: 40px;
    margin-right: 60px;       
}
.topnav .icon{
    display: none;
}
.topnav a{
    width: 100%;
    text-decoration: none;
    color: black;
    font-size: 18px;    
    padding: 40px 24px 40px 24px;
}
.topnav a:hover{
    background-color: #0C69A4;
    transition: 0.3s;
    color: #fff;
}
a:active, a:visited{
    color: black;
}

/* БЭКГРАУНД В ШАПКЕ */

.background_img{
    margin-top: 15px;
    position: relative;
    text-align: left;     
}
.background_img img{
    height: auto;
    width: 100%;
    background: #fff; 
    box-shadow: 0px 0px 8px 3px #777;   
}
.text_background{    
    position: absolute;
    top: 25%;
    left: 12%;
    color: #fff;      
}
.text_background h1{    
    margin-bottom: 4%;
}
.text_background p{
    font-size: 22px;    
    margin-bottom: 20px;
}
.text_background a{    
    font-size: 18px;
    font-weight: 500;
    background-color: #519AC8;
    color: #fff;
    padding: 5px;
    box-shadow: 0px 0px 4px 1px #333;
    opacity: 0.9;    
}
.text_background a:hover{
    background-color: #519AC8;
    transition: 0.3s;
    box-shadow: 0px 0px 6px 2px #111;     
}



main{
    display: flex;
    flex-direction: column;
    width: 100%;    
    margin: auto;
}
.block_1{
    margin: auto;
    margin-bottom: 60px;
}
.about_us_up{
    margin-top: 60px;
    text-align: center; 
         
}
.about_us_up p{
    color: #777;
    width: 80%;
    text-align: justify;    
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    font-size: 18px;
}
.line{ 
    border-bottom: 2px solid #333;
    width: 18%;
    margin: 15px auto;
}
.about_us_down{
    margin-top: 20px;
    text-align: center;    
}
.about_us_down p{
    color: #777;
    width: 80%;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
}
.about_us_down_grid{
    margin-top: 40px;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    grid-column-gap: 25px; 
    grid-row-gap: 25px;
    justify-content: center;
    text-align: center;
}
.about_us_down_grid p{
    width: 250px;    
    margin: auto;
    color: #000;
    font-weight: 600;
}

.block_2{
    background-color: #0C69A4;
    width: 100%;
    margin: auto;
    box-shadow: 0px 0px 8px 3px #777;
}
.vendor{
    margin-top: 60px;
    text-align: center; 
    color: #fff;
}
.vendor p{
    margin-top: 30px;
    margin-bottom: 40px;
    color: #fff;
    font-size: 18px;
}
.vendor_img{
    margin-top: 40px;
    padding-bottom: 60px;        
    width: 70%;
    margin: auto;    
}

.vendor_img img{    
    height: 60px;
    width: auto;
    margin: 10px;    
}
.vendor_img img:hover{
    transform: scale(1.2);
    transition: 0.5s;
}

.block_3{
    width: 100%;
    margin: auto;
}
.service_1{
    margin-top: 60px;
    text-align: center;   
}
.service_l_r{
    margin-top: 60px;
    /* height: 427px; */
    display: flex;
    justify-content: space-between;
}
.left_1{      
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;    
}
.left_1 p{
    margin-top: 3%;
    text-align: justify;    
    color: #777;
    font-size: 18px;
}
.left_1_pic{
    margin-top: 5%;
    margin-bottom: 5%;    
    display: grid;
    grid-template-columns: auto ;    
    grid-column-gap: 20px; 
    grid-row-gap: 20px;
    justify-content: left;
    text-align: left;
}
.left_1_pic img{
    height: 24px;
    margin: auto;    
}
.left_1_pic p{
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-align: left;
}
.left_1_pic img:hover{
    transform: scale(1.2);
    transition: 0.5s;
}

.right_1{     
    margin-top: 1%;    
}
.right_1 img{    
    width: auto;    
    /* padding: 20px 0px 20px 30px; */
    /* -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777; */
    box-shadow: 0px 0px 8px 3px #777;    
}
.service_2{    
    width: 100%;
    margin-top: 3%;
    text-align: center;    
}
.service_l_r_2{
    display: flex;
    justify-content: space-between;
}
.left_2 img{
    margin-bottom: 3%;
    box-shadow: 0px 0px 8px 3px #777;
}
.right_2{           
    text-align: justify;
    margin-left: 5%;
    margin-right: 5%;
}
.right_2 p{
    margin-top: 3%;
    margin-bottom: 5%;
    color: #777;
    font-size: 18px;
}
.service_3_3-1{
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: #0C69A4;
    box-shadow: 0px 0px 8px 3px #777;
    color: #fff;
}

.service_3{
    width: 100%;    
    text-align: center;    
}
.service_l_r_3{    
    display: flex;
    justify-content: space-between;
}
.left_3{    
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;
}
.left_3 p{
    text-align: justify;
    margin-top: 3%;
    color: #fff;
    font-size: 18px;
}
.left_3_img img{
    margin-bottom: 3%;
    box-shadow: 0px 0px 8px 3px #222;
}


.service_3-1{
    width: 100%;
    margin-top: 3%;
    text-align: center;    
}
.service_l_r_3-1{    
    display: flex;
    justify-content: space-between;
}
.right_3{    
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;    
}
.right_3 p{
    text-align: justify;
    margin-top: 3%;
    color: #fff;
    font-size: 18px;
}
.right_3_img img{
    margin-bottom: 3%;
    box-shadow: 0px 0px 8px 3px #222;
}

.service_l_r_4{    
    margin-top: 60px;    
    text-align: center;    
}
.service_l_r_4 p{
    /* text-align: justify; */
    color: #777;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 3%;    
    font-size: 18px;
}
.service_4_pic{
    margin-top: 60px;
    text-align: center;
    display: flex;
    justify-content:space-evenly;    
}
.service_4_pic p{
    width: 200px;
    margin-left: 0;
    margin-right: 0;
    color: #111;
    font-weight: 600;
}
.service_41_pic{
    margin-top: 60px;
    text-align: center;
    display: flex;
    justify-content:space-evenly;
}
.service_41_pic p{
    width: 200px;
    margin-left: 0;
    margin-right: 0;
    color: #111;
    font-weight: 600;
}
.service_4_pic img{
    height: 135px;
    width: auto;
    border-radius: 50%;
}
.service_41_pic img{
    height: 135px;
    width: auto;
    border-radius: 50%;
}
.service_l_r_5 p{
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 3%;        
    font-size: 18px;
    color: #777;
}

.block_4{
    width: 100%;
    margin: auto;
    margin-top: 60px;
    background-color: #0C69A4; 
    box-shadow: 0px 0px 8px 3px #777;   
}
.copiryght{
    margin-left: 10px;
}

/* КОНТАКТНАЯ ФОРМА */

* {
    box-sizing: border-box;
}

/* Style inputs */
input[type=text], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    font-family: 'Open Sans', sans-serif;
}
input[type=tel], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    font-family: 'Open Sans', sans-serif;
}
input[type=email], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    font-family: 'Open Sans', sans-serif;
}
input[name=Mes]{
    height: 100px;
}

button{
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    margin-top: 15px;
}
button:hover {
    background-color: #45a049;
}
label {
    color: #fff;
}
textarea{
    font-family: 'Open Sans', sans-serif;
}
form{
    padding-bottom: 30px;
}

/* Style the container/contact section */
.contact{
    padding-top: 3%;
}

.container {    
    padding: 10px;
    text-align:center;
    color: #fff;
}
.container p{
    color: #fff;
    font-size: 18px;
    margin-top: 30px;
}
.container a{
    color: #fff;
}
.container a:hover{
    color: #fff;
    text-decoration: none;
}

/* Create two columns that float next to eachother */
.column {
    margin: auto;
    width: 50%;
    margin-top: 6px;
    padding: 20px;    
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* КНОПКА ДЛЯ ВОЗВРАТА ВВЕРХ */
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 59; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #0C69A4; /* Set a background color */
    color: #e0e0e0; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 0px; /* Rounded corners */
    font-size: 18px; /* Increase font size */    
}
#myBtn img{
    width: 30px;
    height: 26px;
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

/* МЕДИА ЗАПРОСЫ */

@media screen and (max-width: 1024px) {
    .topnav a{
        display: none;
        padding: 20px 5px 20px 20px;
        width: 100%;
        margin-left: 100%;        
    }    
    .topnav a.icon{
        float: left;
        margin-top: -10px;
        display: block;
        color: #111;
        font-size: 40px;
        padding: 0;        
    }    
    .topnav.responsive{
        position: relative;
        top: 50px;
        /* left: -200px; */
        left: 0px;
    }

    header .topnav.responsive{
        height: 340px;        
        
    }
    .topnav.responsive a.icon{
        position: absolute;
        top: -50px;
        /* right: -200px; */
        right: 0px;
        width: auto;
    }
    .topnav.responsive a{
        /* float: none; */
        float: right;
        display: block;
        text-align: right;
    }

    .background_img{
        overflow-x: hidden;
    }
    .background_img img{
        overflow-x: hidden;
        height: 400px;
        width: auto;         
        box-shadow: 0px 0px 8px 3px #777; 
    }

    .service_l_r, .service_l_r_3{
        flex-direction: column;
    }
    .service_l_r_2, .service_l_r_3-1{
        flex-direction: column-reverse;
    }
    .service_l_r, .service_l_r_2, .service_l_r_3, .service_l_r_3-1{
        margin-top: 40px;
    }
    .left_3, .right_3{
        width: 100%;  
        margin-left: 5%;      
    }
    .left_3 p{
        margin-right: 10%;
        margin-bottom: 5%;
    }
    .right_3 p{
        margin-right: 10%;
        margin-bottom: 5%;        
    }
    
    .right_3 img{
        right: -60px;
        bottom: -870px;  
    }
    .left_3 h3, .right_3 h3{
        margin-right: 10%;
    }
}

@media screen and (max-width: 768px){   
    .topnav a{
        display: none;
        padding: 20px 5px 20px 20px;
        width: 100%;
        margin-left: 100%;        
    }    
    .topnav a.icon{
        float: left;
        margin-top: -10px;
        display: block;
        color: #111;
        font-size: 40px;
        padding: 0;        
    }    
    .topnav.responsive{
        position: relative;
        top: 50px;
        /* left: -200px; */
        left: 0px;
    }
    header .topnav.responsive{
        height: 340px;        
    }
    .topnav.responsive a.icon{
        position: absolute;
        top: -50px;
        /* right: -200px; */
        right: 0px;
        width: auto;
    }
    .topnav.responsive a{
        /* float: none; */
        float: right;
        display: block;
        text-align: right;
    }
    
    .about_us_down_grid{
        margin-top: 40px;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        grid-column-gap: 25px; 
        grid-row-gap: 25px;
        justify-content: center;
        text-align: center;    
    }
    
    .right_1 img, .left_2 img,  .left_3_img img, .right_3_img img{
        width: 100%;
        height: auto;
    }
    
    
}

@media screen and (max-width: 640px){
    .logo img{
        height: 60px;
        width: auto;
        /* margin-top: 20px; */
        margin-left: 10px;
    }
    .right_1 img, .left_2 img,  .left_3_img img, .right_3_img img{
        width: 100%;
        height: auto;
    }
    .column, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
    .service_4_pic, .service_41_pic{
        margin-top: 0;
        text-align: center;
        flex-direction: column;    
    }
    .pic_4{
        margin-top: 10px;
    }
    .service_4_pic p{
        margin: auto;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .service_41_pic p{
        margin: auto;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
}

@media screen and (max-width: 480px){
    h1{
        font-weight: 600;
    }
    h2{
        font-weight: 500;
        font-size: 32px;
    }
    h3{
        font-weight: 500;
        font-size: 24px;
    }
    p{
        font-weight: 400;
        line-height: 22px;
    }  

    .about_us_down_grid{
        margin-top: 40px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-column-gap: 25px; 
        grid-row-gap: 25px;
        justify-content: center;
        text-align: center;    
    }

    .vendor_img{
        flex-direction: column;
        width: 100%;
    }

    .service_4_pic, .service_41_pic{
        margin-top: 0;
        text-align: center;
        flex-direction: column;    
    }
    .pic_4{
        margin-top: 10px;
    }
    .service_4_pic p{
        margin: auto;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .service_41_pic p{
        margin: auto;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .right_1 img, .left_2 img,  .left_3_img img, .right_3_img img{
        width: 100%;
        height: auto;
    }
    
}

@media screen and (max-width: 320px){
    h1{
        font-weight: 600;
    }
    h2{
        font-weight: 500;
        font-size: 32px;
    }
    h3{
        font-weight: 500;
        font-size: 24px;
    }
    p{
        font-weight: 400;
        line-height: 22px;
    }    
      
    .logo img{
        height: 50px;
        width: auto;
        /* margin-top: 20px; */
        margin-left: 10px;
    }

    .topnav a{
        display: none;
        padding: 20px 5px 20px 20px;
        width: 100%;
        margin-left: 100%;        
    }    
    .topnav a.icon{
        float: left;
        margin-top: -15px;
        display: block;
        color: #111;
        font-size: 40px;
        padding: 0;        
    }    
    .topnav.responsive{
        position: relative;
        top: 50px;
        /* left: -200px; */
        left: 0px;
    }
    header .topnav.responsive{
        height: 340px;         
    }
    .topnav.responsive a.icon{
        position: absolute;
        top: -50px;
        /* right: -200px; */
        right: 0px;
        width: auto;
    }
    .topnav.responsive a{
        /* float: none; */
        float: right;
        display: block;
        text-align: right;
    }

    .about_us_down_grid{
        margin-top: 40px;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto;
        grid-column-gap: 25px; 
        grid-row-gap: 25px;
        justify-content: center;
        text-align: center;    
    }
    
    .vendor_img{
        flex-direction: column;
        width: 100%;
    }

    .right_1 img{
        height: 300px;
    }
    .left_2 img{
        height: 300px;
    }

    .service_4_pic, .service_41_pic{
        margin-top: 0;
        text-align: center;
        flex-direction: column;    
    }
    .pic_4{
        margin-top: 10px;
    }
    .service_4_pic p{
        margin: auto;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .service_41_pic p{
        margin: auto;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .right_1 img, .left_2 img,  .left_3_img img, .right_3_img img{
        width: 100%;
        height: auto;
    }
    
}