@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=cyrillic');

*{margin:0px;padding:0px;list-style:none;font-family: 'Roboto', sans-serif;color:#303030;}
body{min-width:0;}
.cont{width:100%;max-width:1042px;margin:0px auto;position:relative;padding: 0px 15px;}
.oh{overflow:hidden;}
.ab{position:absolute;}

.header{height: 240px;margin-bottom:15px;background:url('../images/bgheader.jpg') no-repeat center bottom;
}
.logo{width: 344px;height: 83px;top: 23px;color: #02a2c7;font-size: 55px;font-weight: 600;}
.slogan{top: 91px;font-size: 24px;line-height:29px;}
.footer .slogan{top: 98px;font-size: 24px;line-height:29px;}
.slogan span{color: #00657c;}
span.e-mail{color:#4c4c4c;font-size:23px !important;}
.contact{top: 23px;right:0px;font-size: 25px;font-weight: 600;color: #008bad;line-height: 30px;}
.contact span{font-size: 19px;display:block;font-weight:400;}
.footer .contact{top:35px;right: 60px;}
.menu{width:100%;height: 41px;top: 182px;background: #008bad;position: relative;}
.menu li{float:left;}
.menu ul{display:block;height:42px;}
.menu li a{display:block;line-height: 42px;padding: 0px 87px;text-decoration:none;color: #ffffff;font-size: 17px;border-left: 1px rgba(255, 255, 255, 0.75) solid;}
.menu li a:hover{color: #303030;background:#0fadd3;}
.leftcol{float:left;width: 276px;background:#fafafa;}
.lmenu{
    /* text-align: center; */
}
.lmenu h4{
    font-size: 16px;
    margin: 40px 0px 20px;
    color: #333;
    text-decoration: none;
    text-align: center;
}

.lmenu a{text-decoration:none;}
.lmenu a:hover{text-decoration:underline;}

.lmenu li{height:39px;}
.lmenu li a{height:39px;display:block;background:url('../images/menuli.png') repeat-x;text-decoration:none;line-height:39px;padding-left:10px;font-size:13px;}
.lmenu li a:hover{background:url('../images/menuhov.png') repeat-x;color:#fff;}
.rightcol{float:right;width: 736px;}

.footer{margin-top:30px;height: 675px;background:url('../images/bgfooter.jpg') no-repeat center bottom;
}
.headfoot{/* height:58px; *//* background: #207d00; */}
.bottomfoot{height:140px;}
.flogo{
   width: 344px;
   height: 83px;
   top: 31px;
   color: #02a2c7;
   font-size: 55px;
   font-weight: 600;
}
.fmenu{width:100%;height: 41px;/* top: 182px; */background: #008bad;position: relative;}
.fmenu li{float:left;}
.fmenu ul{display:block;height:42px;}
.fmenu li a{display:block;line-height: 42px;padding: 0px 87px;text-decoration:none;color: #ffffff;font-size: 17px;border-left: 1px rgba(255, 255, 255, 0.75) solid;}
.fmenu li a:hover{color: #303030;background:#0fadd3;}
.fslogan{color: #333333;font-size: 15px;text-align:center;margin:0px auto;font-weight:bold;padding-top:40px;}
.fcontact{right:0px;font-size: 21px;color: #333333;top: 24px;font-weight: 600;}
.fcontact span{font-size: 15px;display:block;color: #333;line-height: 25px;font-weight: 600;}
.copir{padding-top:20px;font-size:13px;color: #333;text-align:center;font-weight:500;top: 150px;}
.copir a{text-decoration:none;font-weight: 600;}
.news{margin-bottom:30px;color: #333333;}
.news img{float:left;margin:0px 15px 15px 0px;}
.titlnews{font-size: 18px;margin-bottom:20px;font-weight: 600;border-bottom: 1px #ecebeb solid;padding-bottom: 10px;}
.shortnews{font-size: 16px;}

.form{background: #ecebeb;/* width: 205px; */padding: 26px;right: 40px;top: 187px;}
.form .titlform{font-size: 16px;font-weight:600;text-align:center;/* text-transform:uppercase; */margin-bottom: 20px;color: #000;}
.form input{width: 212px;height:30px;margin-bottom:20px;border:0px;padding-left: 10px;}
.form .send{width:197px;font-size: 13px;font-weight: 600;height: 30px;text-transform: uppercase;margin:0px auto;cursor:pointer;text-align:center;line-height: 32px;color: #fff;background: #008bad;border-bottom: 3px #016077 solid;border-radius: 4px;}
.send:hover{background:#016077;}

.b1 , .b2 , .b3 , .b4 , .b5 {display:block;min-height: 159px;width: 193px;margin: 0px auto 36px;position: relative;/* overflow: hidden; */}

.b1 span , .b2 span , .b3 span , .b4 span , .b5 span {
    font-size: 15px;
    text-decoration: none;
    top: 140px;
    position: relative;
    width: 100%;
    font-weight: bold;
}

.b1{background:url('../images/b1.jpg') no-repeat;}
.b1 span{}


.b2{background:url('../images/b2.jpg') no-repeat;}
.b2 span{}


.b3{background:url('../images/b3.jpg') no-repeat;}
.b3 span{}


.b4{background:url('../images/b4.jpg') no-repeat;}
.b4 span{}


.b5{background:url('../images/b5.jpg') no-repeat;}
.b5 span{}

.b6{height: 172px;display:block;background: url('../images/banner.jpg') no-repeat;margin: 20px auto;position: relative;}
.b6 div{
    background: rgba(0, 0, 0, 0.67);
    color: #fff;
    text-decoration: none;
    position: absolute;
    width: 100%;
    top: 31px;
}
.b6 h4{
    text-transform: uppercase;
    font-family: Myriad Pro;
    font-size: 18px;
    padding: 10px;
    margin: 0px;
    position: relative;
    color: #fff;
    
}

.b6 h4::afrer{position:absolute;height:2px;background:#fff;width:30px;content: "";}


.b6 span{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}

.complete{margin: 40px 0px;
    font-weight: 600;
    color: #303030;}
	.error {
    border: 1px #eb2d2d solid !important;
    color: #000;
}

.error::-webkit-input-placeholder {color:#eb2d2d;}
.error::-moz-placeholder          {color:#eb2d2d;}/* Firefox 19+ */
.error:-moz-placeholder           {color:#eb2d2d;}/* Firefox 18- */
.error:-ms-input-placeholder   {color:#eb2d2d;}


.otziv{font-size:13px;background: url('../images/noavatar.png') no-repeat 10px 0px;padding-left: 74px;border-bottom: 1px #ecebeb solid;padding-bottom: 20px;margin-bottom: 20px;font-style: italic;}

/* === Responsive helpers === */
img{max-width:100%;height:auto;}




/* === Responsive layout === */
@media (max-width: 1100px){
  .cont{
      max-width: 100%; 
        padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    }
  .leftcol{width: 28%;}
  .rightcol{width: 70%;}
  .menu li a{padding: 0 24px;}
}
@media (max-width: 900px){
  .header{height:auto; padding-bottom: 12px; background-position:center bottom;}
  .header .cont{padding-top: 14px; padding-bottom: 10px;}
  .header .ab{position: static;}
  .logo{width:auto; height:auto; font-size: 40px; line-height: 1.1; text-align:center; margin: 0 0 8px;}
  .slogan{font-size: 18px; line-height: 1.3; text-align:center; margin: 0 0 10px;}
  .contact{font-size: 18px; line-height: 1.3; text-align:center; margin: 0 0 12px;}
  .menu{height:auto; top: 0;}
  .menu ul{display:flex; flex-wrap:wrap; height:auto;}
  .menu li{float:none; flex: 1 1 50%;}
  .menu li a{border-left:0; border-top: 1px rgba(255,255,255,.35) solid; padding: 10px 12px; line-height: 1.2; text-align:center;}
  .leftcol,.rightcol{float:none; width:100%;}
  input{width:100%; box-sizing:border-box;}
  textarea{width:100%; box-sizing:border-box;}
    .news img {
        float: none!important;
    }
    .form {
        margin: auto;
        text-align: center;
    }
    .b6 {
        background-position: center;
    }

  .cont.oh{
      display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cont.oh .rightcol{
    order: 1;             /* СНАЧАЛА контент */
    width: 100%;
  }

  .cont.oh .leftcol{
    order: 2;             /* ПОТОМ форма/меню */
    width: 100%;
    max-width: 100%;
  }
     .footer  .cont a {
        text-decoration: none;
    }
    .flogo {
    width: 100%;
    height: auto;
            font-size: 35px;
    font-weight: 600;
    text-align: center;
        top: auto;
    }
   .footer     .ab {
    position: relative;
}
    .fmenu {
        height: auto;
    }
    .fmenu ul {
    height: auto;
}
    .fmenu li {
    float: none;
}
    .footer .slogan {
    top: auto;
        display: block!important;
    }
    .footer .contact {
    top: auto;
    right: auto;
        display: block!important;
}
    .footer:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #ffffffba;
    }
    .bottomfoot {
    height: auto;
        margin-top: 50px;
   
      
}
    .copir {
         
    padding-bottom: 20px;
    }
}


@media (max-width: 520px){
  .logo{font-size: 32px;}
  .menu li{flex-basis: 100%;}
  .contact{font-size: 16px;}
  .slogan{font-size: 16px;}
  .form{padding: 18px;}
}


/* ===== Floating mobile button: scroll to form ===== */

.mob-fab{
  position: fixed;
  right: 14px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  display: none;                 /* по умолчанию скрыта */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1200;
  border: 1px solid rgba(0,0,0,.08);
}

.mob-fab__icon{
  font-size: 22px;
  line-height: 1;
}
.form--blink{
  outline: 3px solid rgba(0,0,0,.12);
  outline-offset: 6px;
  border-radius: 8px;
}

/* показываем только на мобилке */
@media (max-width: 900px){
  .mob-fab{ display: flex; }
    .header__logo-link {
        text-decoration: none;
    }
}


/* =========================================================
   Mobile header: logo left + burger right + offcanvas menu
   Desktop header stays as-is.
   ========================================================= */

.header__burger{
  display:none;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:10px;
  border-radius:10px;
  position:relative;
}
.header__burger span{
  display:block;
  height:2px;
  background:#111;
  margin:6px 0;
  border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Overlay + offcanvas */
.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index:999;
}
.mobile-nav{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width: 320px;
  max-width: 86vw;
  background:#fff;
  transform: translateX(-105%);
  transition: transform .25s ease;
  z-index:1000;
  box-shadow: 8px 0 24px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}
.mobile-nav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.mobile-nav__title{font-weight:700;font-size:18px;}
.mobile-nav__close{
  width:40px;height:40px;border:0;background:transparent;
  font-size:28px;line-height:1;cursor:pointer;border-radius:10px;
}
.mobile-nav__list{list-style:none;padding:10px 0;margin:0;}
.mobile-nav__list li a{
  display:block;
  padding:12px 16px;
  color:#111;
  text-decoration:none;
  font-size:16px;
}
.mobile-nav__list li a:hover{background:rgba(0,0,0,.04);}

.mobile-nav__contacts{
  margin-top:auto;
  padding:14px 16px 18px;
  border-top:1px solid rgba(0,0,0,.08);
}
.mobile-nav__contact-block{
  position: static !important;
  right:auto !important;
  top:auto !important;
  font-size:16px;
  line-height:1.35;
  font-weight:600;
  color:#008bad;
  margin:0 0 12px;
}
.mobile-nav__contact-block span{font-size:14px;font-weight:400;display:block;}
.mobile-nav__contact-block .e-mail{font-size:16px !important;}

.mobile-nav__actions{display:flex;gap:10px;}
.mobile-nav__action{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
}

/* Open state */
body.menu-open{overflow:hidden;}
body.menu-open .mobile-overlay{opacity:1;visibility:visible;}
body.menu-open .mobile-nav{transform: translateX(0);}
body.menu-open .header__burger span:nth-child(1){transform: translateY(8px) rotate(45deg);}
body.menu-open .header__burger span:nth-child(2){opacity:0;}
body.menu-open .header__burger span:nth-child(3){transform: translateY(-8px) rotate(-45deg);}

/* Mobile header layout */
@media (max-width: 900px){
    .header {
        background: url(../images/bgheader.jpg) no-repeat left top;
        background-size: cover;
    }
    .footer {
            background: url(../images/bgfooter.jpg) no-repeat center top;
    background-size: cover;
    }
    .fmenu {
            background: none!important;
        padding-top: 30px;
      
    }
    .fmenu li a {
    color: #fff;
        background: #02a2c7 !important;
        padding: 0px 10px;
        width: 130px;
        text-align: center;
        margin-bottom: 10px;
        border-radius: 10px;
            line-height: 30px;
    }
    .highslide img, .news img {
        width: 100%;
    }
  .header{height:auto;padding:12px 0;background-position:center bottom;}
  .header__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  /* logo left */
  .logo{
    position: static !important;
    width:auto;
    height:auto;
    font-size:32px;
    line-height:1.1;
    margin:0;
    white-space:nowrap;
  }
  .header__burger{display:flex;align-items:center;justify-content:center;}
  /* hide slogan + contact + desktop menu on mobile */
  .slogan{display:none !important;}
  .contact{display:none !important;}
  .menu{display:none !important;}
}


@media (max-width: 900px){
  .header__burger{
    display:flex !important;
    flex-direction: column !important;   /* ✅ вот это главное */
    align-items:center;
    justify-content:center;
    gap:6px;                              /* расстояние между полосками */
    width:44px;
    height:44px;
    padding:10px;
    border:0;
    cursor:pointer;
    position:relative;
    z-index:2000;
       background: #fff!important;
  }

  .header__burger span{
    display:block !important;
    width:24px !important;
    height:2px !important;
    background:#111 !important;
    margin:0 !important;                  /* чтобы не “плясали” */
    border-radius:2px;
  }
 .multi {  
        width: 212px;
             margin: auto !important;
    }
    .multi__item {
        text-align: left;
    }
}

.form__services { margin: 12px 0 6px; }
.form__services-title { font-weight: 600; margin-bottom: 8px; }
.form__chk { display: block; margin: 6px 0; cursor: pointer; }


/* ✅ dropdown with checkboxes */
.multi { position: relative; margin: 12px 0 6px; }

.multi__btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    border: 0px solid rgba(0, 0, 0, .25);
    background: #fff;
    cursor: pointer;
    margin-bottom: 20px;
}

.multi__text{
  display:block;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align:left;
  flex: 1;
  color: #222;
}

.multi__arrow{
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-left: 6px;
}

.multi.is-open .multi__arrow{ transform: rotate(-135deg); }

.multi__dd{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  background:#fff;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  padding: 8px;
  max-height: 240px;
  overflow:auto;
  z-index: 999;
}



/* контейнер строки с чекбоксом */
.multi__item{
  display:flex;
  align-items:center;
  gap: 10px;
    padding: 5px;
}

/* фикс размера чекбокса + не сжимать во flex */
.multi__item input[type="checkbox"]{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;     /* ✅ главное */
  margin: 0;          /* чтобы не было разных отступов */
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

/* текст рядом */
.multi__item span{
  line-height: 1.2;
        font-size: 14px;
}


.multi__item:hover{ background: rgba(0,0,0,.05); }


/* ошибка как у тебя */
#servicesBlock.error .multi__btn{
    border: 1px #eb2d2d solid !important;
}
.multi.error {
    border: 0px!important;
}