@import url(https://fonts.googleapis.com/css?family=Manrope:regular,500,700,800);

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

.sticky-footer
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.title-1{
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}

.title-1 span{ color:#81B4BD;}

.title-2{
    font-size:  28px;
    font-weight: 700;
 }

.title-3{
    font-size:  20px;
    font-weight: 700; 
     }
 
.text-center{
    text-align: center;
    }


.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;

     }

  no-scroll{ overflow: hidden;  }
  /*header*/

 .header { 
    position:relative;
    z-index: 19;
    padding: 40px 0;}

.header-bg{background-color: #F6F6F6; }

.header-white-bg{
    background: #fff !important;
}
.container {
    width: 1200px;
    margin:0 auto;
    padding: 0 15px;
}
 .container-small{
    width: 970px;
 }

.none{display: none !important;}
/*NAV*/

.logo{
    flex-shrink: 0;
}

.nav{
    display:flex;
    /*flex-direction: row;*/ 
    justify-content:space-between;
    align-items: center; 
    gap:30px;
}
.nav-list  {
    display: flex;
    align-items: center;
    gap:60px;
}
 .nav-list a{
    color:#000;
    transition: color 0.2s ease-in;
 }

 .nav-list a.active{ color:#81B4BD; }

 .nav-list a:hover{color: #00ceb5; }
 
 .btn-mobile-nav{
    display:none;
}
/*mobile nav*/

.mobile-nav { 
    position: fixed;
    z-index: 9;

    justify-content: center;
    position:fixed ;
    top: 0;
    left:0;
    width:100%;
    height: 100vh;
    background-color: #F6F6F6;
   
    align-items: center;
    display: none;
}
.mobile-nav.open{ display: flex;}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
 }
 .mobile-nav-list a{
    color:#000;
 }

/*promo*/
.promo {
    display:flex;
    align-items: center;
    padding-left: 70px;
    background-color: #394D42;
    height: 500px;
    background-image: url('./../img/promo/promo-bg.jpg');
    background-position: center;
    background-size: cover;
    border-radius:40px;
    color:#fff;
}

@media
    (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){ 
.promo {
    background-image:url('./../img/promo/promo-bg@2x.jpg');}
}

.promo-title {
    padding-bottom: 10px;
    font-size:60px;
    font-weight: 800;
  }

.promo-text { font-size: 24px;}

/*main-content*/
.main-content{
    padding: 90px 0;
    display: flex;
    flex-direction: column;
    gap:60px;

}
.content-row { 
    display: flex;
    align-items: center;
    column-gap: 50px;
}

.content-row.content-row-reverse{flex-direction: row-reverse;}

.content-img { 
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 40px;
}

.content-text  { 
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.content-text p { 
    font-size: 18px;
    line-height: 1.8;
}

.content-text a{
    color: #81B4BD;
    text-decoration: underline;
}

/*inner*/
.inner-page{
    padding:90px 0;
 }
 .inner-page-title-wrapper{
    margin-bottom: 60px;
 }

 /*cards*/

.cards-wrapper {
    display:flex; 
    flex-wrap:wrap;
    column-gap: 30px;
    gap:60px 30px;
}
    
.card {  width: 370px;  }

.card-img {
    margin-bottom:20px ;
    overflow: hidden;
    border-radius: 20px;
 }

.card-desc { 
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-title {
font-size: 20px;
font-weight: 800;
line-height: 1;
 }

.card-desc p { line-height: 1.5;}

.card-desc a { 
    color:#81B4BD;
    text-decoration: underline;
}

/*article*/

.article-content p {
    font-size: 18px;
    line-height:1.8;
}

.article-content p+p {
  margin-top: 30px;  
}
.article-img { 
    margin: 40px 0;
    border-radius: 20px;
    overflow:hidden;
}

/*contact page*/

.contacs-columns {
    display: flex;
    justify-content: space-between;
    /*align-items:  flex-start;*/
    gap:100px ;
 }
.form-group{
    display: flex;
	flex-direction: column;
	gap: 10px;

}

.form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px ;
    width: 600px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 5px 25px 0px rgba(211, 211, 211, 0.5);

 }


.fake-radio{

    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 20px;
    border: 1px solid #B5DEE5;
    background: #EFF9FB;
 }

 .fake-radio::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform:  translate(-50%,-50%) scale(0);
    border-radius: 12px;

    width: 12px;
    height: 12px;
    border-radius: 12px;
    background: #37B6CC;
   
    transition :all 0.2s ease-in;
 }

.real-radio:checked + .fake-radio::after{
    transform: translate(-50%,-50%) scale(1);
 }


.fake-checkbox{
    position: relative;
    height: 20px;
    width: 20px;
    flex-shrink: 0;

    border: 1px solid  #b5dee5;
    background: #EFF9FB;
}

.fake-checkbox::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(0);
    transition: all 0.2s ease-in;
    width: 16px;
    height: 13px;

    background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.06055 5.93933L7.06055 11.9393M4.93923 11.9393L14.9392 1.93933' stroke='%23138ECE' stroke-width='3'/%3E%3C/svg%3E%0A");

    background-repeat: no-repeat;
    background-position: center;
}

.real-checkbox:checked +.fake-checkbox::after{
    transform: translate(-50%,-50%) scale(1);
}

.address-wrapper {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 470px;
 }

 .address-item{
    display:flex;
    flex-direction: column;
    gap: 20px;
 }
.address-list{
    display:flex;
    flex-direction: column;
    gap: 20px;
}

.address-list li{
    display: flex;
    align-items: center;
    gap: 10px;
}
.yandex-map{
   width: 100%; 
   height: 375px;
}
 .form-group{
    display: flex;
    flex-direction: column;
    gap:10px;
 }

.input-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.input{
    padding: 14px 20px;
    height: 50px;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #b5dee5;
    background: #eff9fb;
    color:#36727d;
  
 }

.input::placeholder{ color: #a3c9dc; }
.input.input-50{flex: 1;}

.radio-list,.checkbox-list{
    display: flex;
    flex-direction: column;
    gap:20px;
}

.radio-list label,.checkbox-list label{
    display: flex;
    align-items: center;
    gap:15px ;
}

.radio-list label input,.checkbox-list label input{ flex-shrink: 0;}

.submit-btn{
    align-self: flex-start;
    padding: 12px 36px 13px;   
    height: 50px; 
    border-radius: 6px;
    background: #81B4BD;
    box-shadow: 0px 8px 20px 0px rgba(129,180,189,0.35);
    color:#fff;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    transition: all 0.2s ease-in;
}  
.submit-btn:hover{
    opacity: 0.8;
}
.submit-btn:active{
    opacity:1;
    background:#639199 ;
}

    /*footer*/
.footer{
    margin-top: auto;
    padding: 60px 0;
    background-color: #111111;
    color:#FFFFFF;
        
}

.footer-row{
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
}

.footer-copyright{
    font-size:14px;
    line-height:1.8;
    color:rgba(255, 255, 255, 0.300);
}

.footer-contacts{ text-align:right;}

.footer-phone { 
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    color:#fff;
}

.footer-email {
    display: inline-block;
    margin-bottom: 10px;
    color:#00BDA6;
    font-size: 14px;
   line-height: 1.5;
 }

.footer-adress { 
    font-size: 14px;
    line-height: 1.5;
    color:rgba(255, 255, 255, 0.500);
}