@charset "utf-8";
@import "callback-btn.css";
@import "callback-modal.css";
@import "typography.css";

/* Класс для увеличения картинки */

.zoom-img {}


/* Класс для галлереи */

.gallery {}


/* Класс для формы */

.form-submit-toggle {}


/* Класс для кнопки заказать звонок */

.callback-toggle {}
#specialButton{
    cursor: pointer;
}


/******** Magnific-Popup *********/

.mfp-fade.mfp-bg {
    opacity: 0;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}


/******* Image Cover ********/

.img-cover {
    background-size: cover;
    background-position: center;
}

.img-cover_inited>img {
    visibility: hidden;
}


/**********************************/

.main {
    display: flex;
}

.component {
    width: 100%;
}

.left,
.right {
    width: 30%;
}


/* Пагинация */

.pagination>ul {
    margin-top: 15px;
    display: flex;
    list-style: none;
    margin-bottom: 5px;
}

.pagination>ul li {
    margin-right: 20px;
}

.pagination>ul li a {
    text-decoration: none;
    font-weight: 600;
}


@font-face {
    font-family: 'Roboto'; 
    src: url(../fonts/Roboto-Light.ttf) format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'Roboto'; 
    src: url(../fonts/Roboto-Regular.ttf) format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'Roboto'; 
    src: url(../fonts/Roboto-Medium.ttf) format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'Roboto'; 
    src: url(../fonts/Roboto-Bold.ttf) format('truetype');
    font-weight: 600;
}
@font-face {
    font-family: 'Roboto'; 
    src: url(../fonts/Roboto-Black.ttf) format('truetype');
    font-weight: 900;
}

.homepage table{
    width: 100%;
    font-weight: 900;
}


body{
    color: #000;
    font-size: 16px;
    font-family: "Roboto";
    font-weight: 400;
    line-height: 1.2;
    background: url(../images/bodyBg.jpg) center top;
}
body p{
    margin-top: 0;  
    margin-bottom: 10px;
}

.h1,h1{
    font-family: "Roboto";
    font-size: 27px;
    font-weight: 600;
    margin: 0 0 35px;
    line-height: 1.1;
}

.wrapper{
    margin: 0 auto;
    min-height:100vh;
    position:relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.wrapLabel{
    position: relative;
    margin-bottom: 0;
}
.wrapLabel span{
    font-weight: 200;
    padding-left: 25px;
    font-size: 13px;
    display: block;
    position: relative;
}
.wrapLabel span a{
    color: #ef5e07;
}
.wrapLabel span:before{
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    top: calc(50% - 8px);
    content: '';
    background: #fff;
    border: 1px solid #a5a5a5;
    border-radius: 3px;
}
.wrapLabel span:after{
    position: absolute;
    width: 8px;
    height: 8px;
    left: 4px;
    top: calc(50% - 4px);
    content: '';
    background: #dd6a1c;
    border-radius: 2px;
    opacity: 0;
}
.wrapLabel input:checked + span:after{
    opacity: 1;
}
.wrapLabel input{
    width: 10px !important;
    height: 10px !important;
    left: 0 !important;
    top: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
}
.flexSA{
    display: flex;
    justify-content:space-around;
}

.flexSB{
    display: flex;
    justify-content:space-between;
}
.flexCenter{
    display: flex;
    justify-content:center;
}

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

.flexW{
    display: flex;
    flex-wrap:wrap;
}
.flexColumn{
    display: flex;
    flex-direction:column;
}
.flexStart{
    display: flex;
    justify-content:flex-start;
}
.flexEnd{
    display: flex;
    justify-content:flex-end;
}
/*header*/
header{
    padding:20px 0;
}
.wrapHeader{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    border-radius: 450px;
    background: linear-gradient(90deg, #2B9AAE 0%, #006747 100%);
    padding:16px 38px;
    color: #fff;
}
.logo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}
.logo:hover{
    text-decoration: none;
}
.logo .name{
    color: #FFF;
    font-size: 23px;
    font-weight: 800;
}
.logo .slog{
    color: #fff;
    font-size: 14px;
    padding-left: 10px;
}
.wrapHeader ul{
    display: flex;
    gap: 24px;
    align-items: center;
}
.wrapHeader ul a{
    color: #FFF;
    font-weight: 500;
}
.rightHeader{
    display: flex;
    gap: 30px;
    align-items: center;
}
.wrapHeader .infoHeader{
    display: flex;
    align-items: center;
    gap: 20px;
}
.wrapHeader .infoLinks{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.wrapHeader .phone{
    color: #FFF;
    font-size: 21px;
    font-weight: 700;
}
.wrapHeader .mail{
    font-size: 14px;
    color: #fff;
}
.wrapHeader .vk img{
    height: auto;
    max-width: 35px;
}
.wrapHeader .visEye{
    display: flex;
    gap: 16px;
    color: #fff;
    font-weight: 500;
}
/*End header*/



/*contentSiteBlock*/
.contentSiteBlock{
    padding:20px 0 120px;
}
.wrapContentBlock{
    display: grid;
    grid-template-columns: 330px minmax(100px,1fr);
    grid-gap: 30px;
}
.leftMainWrap .leftMain{
    background: #006747;
    border-radius: 25px;
    padding:20px 20px 25px; 
}
.leftMainWrap .leftMain > ul{
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    z-index: 5;
}
.leftMainWrap .leftMain > ul a{
    display: inline-block;
    padding:20px;
    color: #fff;
    font-weight: 500;
    
}
.contentBlock .container{
    width: 100% !important;
    padding:0;
}
.leftMainWrap .leftMain > ul > li > a{
    background-color: #2B9AAE;
    border-radius: 15px;
    padding:20px 50px 20px 20px;
    display: block;
}
.leftMainWrap .leftMain > ul > li > a:hover{
    background-color: #069E59;
    text-decoration: none;
}
.leftMainWrap .leftMain > ul ul{
    position: absolute;
    left: 100%;
    top: 0;
    background: #364AA4;
    border-radius: 15px;
    padding:5px;
    display: none;
    flex-direction: column;
    gap: 2px;
}
.leftMainWrap .leftMain li:hover >  ul{
    display: flex;
}
.leftMainWrap .leftMain > ul ul a{
    font-size: 14px;
    padding:5px;
    /*white-space: nowrap;*/
    min-width: 250px;
}
.leftMainWrap .leftMain ul ul .parent a{
    padding-right: 50px;
}
.leftMainWrap .leftMain > ul .parent{
    position: relative;
}
.leftMainWrap .leftMain > ul .parent > a{
    background-image:url(../images/iconMore.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 17px) center;
}

.bannerBlock{
    position: relative;
    border-radius: 25px;
    margin-bottom: 25px;
    overflow: hidden;
}
.bannerBlock .txtBlock{
    position: absolute;
    left: 50px;
    top: 0;
    bottom: 0;
    padding:30px 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bannerBlock .name{
    color: #FFF;
    font-size: 34px;
    font-weight: 900;
}
.bannerBlock .txt{
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 15px;
}
.quoteBlock{
    padding-left: 120px;
    margin-bottom: 25px;
}
.quoteTxt{
    font-size: 20px;
    font-weight: 500;
    position: relative;
}
.quoteTxt:before{
    position: absolute;
    left: -64px;
    width: 32px;
    height: 25px;
    top: 5px;
    content: '';
    background: url(../images/quote.svg) no-repeat center;
}
.quoteAvtor{
    margin-top: 10px;

}


/*End contentSiteBlock*/


/*footer*/
footer{
    background: #2B9AAE;
    overflow: hidden;
}
.topFooter{
    display: flex;  
    position: relative;
}
.topFooter:before{
    position: absolute;
    content: '';
    left: -1000px;
    right: -1000px;
    height: 1px;
    background: rgba(217, 217, 217, 0.10);
    bottom: 0;
}
.topFooter .wrapLogo{
    padding-right: 100px;
    border-right:1px solid rgba(217, 217, 217, 0.10);
    display: flex;
    align-items: center;

}
.linksGos{
    padding: 70px 0 70px 120px;
    gap: 125px;
    display: flex;
}
.linksGos a{
    display: inline-block;
}
.linksGos a img{
    max-height: 60px;
}
.centerFooter{
    padding:60px 0;
    display: flex;
    justify-content: space-between;
    gap: 100px;
}
.centerFooter .colInfo{
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}
.centerFooter .name{
color: rgba(255, 255, 255, 0.35);


}
.centerFooter a.val{
    white-space: nowrap;
}
.centerFooter .val{
    color: #fff;
    font-weight: 500;
}
.centerFooter .val.socBlock{
    display: flex;
    gap: 25px;
}

.botFooterWrap{ 
background: #27899A;
padding:45px 0;
}
.botFooter{
    display: flex;
    justify-content: space-between;
    gap: 50px;
    color: #fff;
    font-size: 15px;
}
.botFooter a{
    color: #fff;
}
.botFooter .links{
    display: flex;
    gap: 45px;
}
.botFooter .links a{
    text-decoration: underline;
}
.botFooter .copyright,.botFooter .copyright a{
    color: rgba(255, 255, 255, 0.35);


}
/*End footer*/



/* --- Media styles --- */


@media screen and (min-width:1450px){
    .wrapper .container{
        width: 1440px;
    }
}


@media screen and (min-width:1200px){

}

@media screen and (max-width:1449px){
.wrapHeader ul{
    gap: 15px;
}   
.wrapHeader{
    gap: 20px;
}
body{
    font-size: 14px;
} 
.logo .name{
    font-size: 20px;
}
.logo .slog{
    font-size: 12px;
}
.wrapHeader .phone{
    font-size: 18px;
}
.wrapHeader .mail {
  font-size: 12px;
}
.wrapHeader .visEye{
    gap: 10px;
}

.bannerBlock > img{
    max-width: 100%;
}
.bannerBlock .txtBlock{
    left: 20px;
}
.bannerBlock .txt{
    font-size: 16px;
}

.bannerBlock .name{
    font-size: 26px;
}


.quoteTxt {
  font-size: 18px;
}




}
.contentSiteBlock img{
    max-width: 100%;
    height: auto;
}

@media screen and (max-width:1199px){
    .wrapContentBlock{
        grid-template-columns: 230px minmax(100px,1fr);
  grid-gap: 10px;
    }
    .leftMainWrap .leftMain{
        border-radius: 15px;
  padding: 10px;
    }
    .wrapHeader{
          border-radius: 60px;
          padding: 10px 20px;
    }
    .rightHeader{
        flex-direction: column;
        gap: 5px;
    }
    .topFooter .wrapLogo {
  padding-right: 15px;
}
.linksGos{
    padding: 40px 0 40px 70px;
  gap: 50px;
}
.centerFooter {
  padding: 30px 0;
  gap: 50px;
}
.botFooterWrap{
    padding:15px 0;
}
.botFooter .links{
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.bannerBlock .txtBlock{
    padding: 15px 0;
}
.bannerBlock .name {
    font-size: 22px;
  }
  .bannerBlock .txtWrap{
    margin-bottom: 15px;
  }

.leftMainWrap .leftMain > ul > li > a{
    padding: 10px 30px 10px 10px;
    border-radius: 8px;
}
.leftMainWrap .leftMain > ul .parent > a{
    background-position: calc(100% - 10px) center;
}









}
.mobileBlockMain,.mobMainBtn{
    display: none;
}

@media screen and (max-width:991px){
    .mobMainBtn{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 30px;
        padding:5px 0;
        flex:none;
    }
    .mobMainBtn .line{
        background: #fff;
        width: 100%;
        height: 2px;
        border-radius: 2px;
    }
    .mobileBlockMain{
        display: block;
        position: fixed;
        padding:50px 15px 20px;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100dvh;
        background: #2B9AAE;
        z-index: 10;
        transition:all 0.4s;

    }
    .activeMain{
        overflow: hidden;
    }
    .activeMain .mobileBlockMain{
        left: 0;
    }
    .mobileBlockMain ul{
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }
    .mobileBlockMain ul a{
        color: #fff;
  font-weight: 500;
  font-size: 18px;
    }
    .mobileBlockMain ul ul{
        padding-left: 10px;
        padding-top: 10px;
        margin-bottom: 10px;
    }
    .mobileBlockMain ul ul a{
        font-size: 14px;
    }
    .mobileBlockMain .mainsBlock{
        height: 100%;
        overflow: auto;
    }
    .mobileBlockMain .close{
        position: absolute;
        right: 15px;
        top: 10px;
        color: #fff;
        font-size: 30px;
        width: 30px;
        height: 30px;
        opacity: 0.8;
    }
    header .wrapMain{
        display: none;
    }
    .wrapContentBlock{
        display: block;
    }
    .leftMainWrap{
        display: none;
    }
    .topFooter{
        flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
    }
    .linksGos{
        padding:0;
    }
    .botFooter{
        gap: 15px;
        font-size: 14px;
    }





}



@media screen and (max-width:767px){
    .centerFooter{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 20px;
        padding: 20px;
    }
    .botFooter{
        flex-direction: column;
        align-items: center;
    }
    .quoteBlock {
  padding-left: 30px;
}
.quoteTxt::before{
left: -25px;
  width: 20px;
  height: 14px;  
  content: '';
  background-size:cover;
}
.contentSiteBlock img{
    max-width: 700px;
    position: relative;
}
.wrapHeader .infoHeader{
    display: none;
}
.visEye .txt{
    display: none;
}

.wrapHeader {
    border-radius: 20px;
}
 .logo .name {
    font-size: 18px;
  }
  .logo .slog {
    font-size: 11px;
  }
  table{
    overflow: auto;
    display: block;
  }

}

@media screen and (max-width:675px){
    
}
@media screen and (max-width:640px){
    
}
@media screen and (max-width:600px){
    .centerFooter{
        grid-template-columns: repeat(1,1fr);
        grid-gap: 10px;
    }
    .linksGos{
        flex-direction: column;
        gap: 10px;
    }
    
}
@media screen and (max-width:485px){
    
}
@media screen and (max-width:425px){}
@media screen and (max-width:400px){
    
}
@media screen and (max-width:370px){
}