/* Адаптив */
@media (max-width: 900px){
  .services .services__grid > article.card{
    flex: 0 0 100% !important;
    min-height: 0;
  }
  .services .features{
    columns: 1;
  }
}

/* ======================================================================
   SERVICES — HOTFIX: принудительные цвета/контраст (если старые стили
   перебивают фон/цвета внутри карточек)
   Добавь ЭТОТ БЛОК В САМЫЙ КОНЕЦ CSS.
   ====================================================================== */

.services .services__grid > article.card.card--info{
  background: #ffc412 !important;
  color: #eaf7f7 !important;
}

/* чтобы никакие глобальные h3/p/li {color:...} не перебивали */
.services .services__grid > article.card.card--info *{
  color: inherit !important;
}

/* заголовок/описание без "блеклости" */
.services .services__grid > article.card.card--info .card__title{
  opacity: 1 !important;
  color: #000 !important;
}
.services .services__grid > article.card.card--info .card__desc{
  opacity: .95 !important;
}

/* списки в карточке — чтобы не становились черными */
.services .services__grid > article.card.card--info .features,
.services .services__grid > article.card.card--info .bullets{
  color: #000 !important;
}

/* на случай, если где-то сбивают псевдоэлементы */
.services .services__grid > article.card.card--info .features li::before{
  color: rgba(255,255,255,.95) !important;
}

/* если вдруг у .card стоит forced background */
.services .services__grid > article.card.card--image{
  background: #ffffff !important;
}

.wrapper{width:100%;}
.formbox-wrapper{width:100%;}
.bg-wrapper{width:100%;}

.how-it-work{width:1000px;margin:0 auto;}
.info-how-it-work{flex-wrap:nowrap;align-items:flex-start;gap:20px;}
.info-how-it-work .vid{flex:0 0 220px;width:220px;}
.how-it-work__btn{display:inline-block;margin-top:25px;border:3px solid #fdbd0f;padding:14px 22px;font-weight:700}

@media (max-width: 1020px){
  .how-it-work{width:100%;padding:0 15px;box-sizing:border-box}
  .info-how-it-work{flex-wrap:wrap;}
  .info-how-it-work .vid{flex:0 0 220px;width:220px;}
}
@media (max-width: 760px){
  .info-how-it-work .vid{flex:0 0 100%;width:100%;}
}

/* === POPUP FIX & STYLING === */

/* Убираем белые рамки/паддинги Fancybox */
.fancybox__content {
  background: transparent !important;
  padding: 0 !important;
}

/* Контейнер попапа */
#call-back {
  width: 380px;
  max-width: 92vw;
  background: linear-gradient(180deg,#ffcc00 0%,#ffb300 100%)!important;
  padding: 28px 30px !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.25) !important;
  box-sizing: border-box;
  color: #000;
}

/* Заголовок */
#call-back .call-back-font {
  font-family: 'Didact Gothic';
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 18px 0;
  text-align: center;
  line-height: 1.25;
}

/* Убираем жёсткие ограничения старых правил */
.call-back-form {
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* Поля */
.call-back-field,
#call-back select {
  width: 100% !important;
  height: 48px !important;
  padding: 10px 12px !important;
  margin: 0 0 12px 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  outline: none !important;
}

/* Фокус */
.call-back-field:focus,
#call-back select:focus {
  border-color: rgba(0,0,0,0.6) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}

/* Кнопка отправки */
.call-back-field-button {
  width: 100% !important;
  height: 50px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: none !important;
  background: #101820 !important;
  color: #ffcc00 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  box-shadow: 0 8px 20px rgba(16,24,32,0.18) !important;
}

/* Hover эффект */
.call-back-field-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px rgba(16,24,32,0.22) !important;
}

/* Текст про персональные данные */
.call-back-personal-data {
  font-size: 12px !important;
  color: rgba(0,0,0,0.8) !important;
  text-align: center !important;
  margin-top: 12px !important;
}

/* reCAPTCHA контейнер — центрируем аккуратно */
.recaptcha-wrap { display:flex; justify-content:center; margin-bottom:8px; }

/* Адаптив */
@media (max-width: 520px) {
  #call-back { padding: 20px !important; width: 92vw !important; border-radius: 10px !important; }
  .call-back-field, #call-back select { height:46px !important; font-size:15px !important; }
  .call-back-field-button { height:46px !important; font-size:15px !important; }
}

/* Масштабируем только внутренний wrapper, чтобы не ломать трек и события */
@media (max-width: 768px) {
  .fancybox__content .call-back-wrapper {
    transform: scale(1.2);
    transform-origin: center top;
    width: calc(100% / 1.2);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* =========================
   MOBILE.CSS
   Полная мобильная адаптация
   ========================= */

/* Базовый reset для мобильных */
html,
body{
    width:100%;
    overflow-x:hidden;
}

@media (max-width:768px){

    *,
    *::before,
    *::after{
        box-sizing:border-box;
    }

}

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

/* =========================
   TABLET
   ========================= */

@media (max-width: 1024px){

    #wrapper{
        min-width:100% !important;
        width:100%;
        overflow:hidden;
    }

    .wrap,
    .slider,
    .formbox,
    .forma1,
    .prems,
    .s3-block,
    .reviews,
    .work-with-us,
    .schemebox,
    .section,
    .s4-block,
    .s7-block{
        width:100% !important;
        max-width:100% !important;
        padding-left:15px;
        padding-right:15px;
        box-sizing:border-box;
    }

    .custom-header{
        width:100% !important;
        left:0 !important;
        height:auto;
        padding:20px 15px;
    }

    .custom-header::after{
        display:none;
    }

    .H2-Title{
        padding:0 !important;
        white-space:normal !important;
        height:auto !important;
    }

    .how-we-work,
    .s3-block{
        padding:40px 20px !important;
        height:auto !important;
    }

    .scheme{
        width:100%;
        background-size:contain;
        background-repeat:no-repeat;
        background-position:center;
    }

    .map{
        width:100%;
    }

    .geo{
        width:100%;
    }

}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px){

    body{
        font-size:15px;
        line-height:1.5;
    }

    h1{
        font-size:28px;
    }

    h2{
        font-size:24px;
    }

    h3{
        font-size:22px;
    }

    h4{
        font-size:20px;
    }

    /* =========================
       HEADER
       ========================= */

    .header{
        height:auto !important;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        padding:20px 15px;
    }

    .logo{
        position:static !important;
        left:auto !important;
        top:auto !important;
        width:100%;
        text-align:center;
        margin-bottom:20px;
    }

    .logo h1{
        font-size:30px;
    }

    .contacts{
        width:100% !important;
        position:static !important;
        right:auto !important;
        text-align:center;
    }

    .phone{
        padding-top:10px;
    }

    .phone span{
        font-size:18px;
    }

    .ico-phone,
    .ico-phone-second{
        display:none;
    }

    .right-h{
        position:static !important;
        width:100% !important;
        right:auto !important;
        top:auto !important;
        height:auto !important;
        text-align:center;
    }

    /* =========================
       MENU
       ========================= */

    #menu{
        height:auto !important;
    }

    #menu ul{
        display:flex;
        flex-direction:column;
    }

    #menu ul li{
        float:none !important;
        left:auto !important;
        width:100%;
    }

    #menu ul li a{
        display:block;
        line-height:normal !important;
        height:auto !important;
        padding:15px;
        text-align:center;
        border-bottom:1px solid rgba(0,0,0,.1);
    }

    /* =========================
       HERO
       ========================= */

    .slider{
        height:auto !important;
    }

    .action{
        height:auto !important;
        padding:40px 15px !important;
    }

    .H2-Title{
        font-size:28px !important;
        text-align:center;
        line-height:1.3;
    }

    .H2-text{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:20px;
    }

    .schetchik{
        width:220px !important;
        position:static !important;
    }

    .price-counter{
        position:relative !important;
        width:100% !important;
        right:auto !important;
        margin-top:20px;
        text-align:center;
        padding:15px;
    }

    .price-counter img{
        display:none;
    }

    /* =========================
       BUTTONS
       ========================= */

    .call-back-button,
    .second-call-back-button,
    .button,
    .formbox-button,
    .call-back-field-button{
        width:100% !important;
        max-width:100% !important;
        left:auto !important;
        right:auto !important;
        position:relative !important;
        display:block;
        margin-top:15px;
        text-align:center;
    }

    /* =========================
       BLOCKS
       ========================= */

    .prem,
    .portbox,
    .vid,
    .sv,
    .rew,
    .sert,
    .RD_img,
    .cert_img,
    .svid_img{
        width:100% !important;
        float:none !important;
        margin:0 0 20px 0 !important;
        position:relative !important;
        left:auto !important;
        right:auto !important;
    }

    .s2-block,
    .info-how-it-work,
    .s7-block,
    .reviews,
    .work-with-us{
        display:flex !important;
        flex-direction:column !important;
        gap:20px;
    }

    .info-how-it-work{
        padding-top:20px !important;
    }

    .vid{
        margin:0 !important;
        text-align:center;
    }

    .textl,
    .textl2,
    .textl3{
        padding-left:0 !important;
        text-align:center !important;
        white-space:normal !important;
    }

    /* =========================
       REVIEWS / CERTS
       ========================= */

    #slider1wr{
        width:100% !important;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    .rew{
        height:auto !important;
        min-height:auto !important;
    }

    /* =========================
       SCHEME
       ========================= */

    .schemebox{
        height:auto !important;
    }

    .work-scheme{
        padding-top:20px !important;
    }

    .work-scheme .right{
        float:none !important;
        text-align:center;
        margin-bottom:20px;
    }

    .work-scheme li{
        display:flex;
        align-items:flex-start;
        gap:10px;
        line-height:1.5;
        margin-bottom:15px;
    }

    .circle{
        flex-shrink:0;
    }

    /* =========================
       FORMS
       ========================= */

    .formbox{
        height:auto !important;
    }

    .form input,
    .bblue input,
    .call-back-field,
    .select-call-back-field,
    #call-back select{
        width:100% !important;
        left:auto !important;
        position:static !important;
    }

    .formbox-button{
        top:auto !important;
    }

    #call-back{
        width:95vw !important;
        padding:20px !important;
    }

    /* =========================
       FAQ / TEXT
       ========================= */

    .answer ul li p{
        width:100% !important;
    }

    .h2question{
        text-align:left !important;
    }

    /* =========================
       FOOTER
       ========================= */

    .footer{
        height:auto !important;
        padding:30px 15px;
    }

    .nav2{
        position:static !important;
        left:auto !important;
        top:auto !important;
        margin-top:25px;
    }

    .phonefooter{
        width:100% !important;
        padding:15px 0 !important;
        text-align:center;
    }

    .centh1{
        width:100%;
        text-align:center;
    }

    /* =========================
       FLEX FIXES
       ========================= */

    .left,
    .right{
        float:none !important;
    }

}

/* =========================
   SMALL MOBILE
   ========================= */

@media (max-width: 480px){

    body{
        font-size:14px;
    }

    h1{
        font-size:24px;
    }

    h2{
        font-size:22px;
    }

    .logo h1{
        font-size:24px;
    }

    .H2-Title{
        font-size:24px !important;
    }

    .custom-text{
        font-size:24px !important;
    }

    .phone span{
        font-size:16px;
    }

    .price-counter span{
        font-size:22px !important;
    }

    .call-back-font{
        font-size:24px !important;
    }

}

/* =========================================
   MOBILE HOTFIX
   ========================================= */

@media (max-width:768px){

    /* =========================
       СКРЫТЬ МЕНЮ
       ========================= */

    #menu{
        display:none !important;
    }

    /* =========================
       СКРЫТЬ ЯНДЕКС РЕЙТИНГ
       ========================= */

    .YArating{
        display:none !important;
    }

    /* =========================
       HERO / СЧЕТЧИК
       ========================= */

    .slider-wrap{
        background-position:center !important;
    }

    .slider{
        height:auto !important;
    }

    .action{
        padding:30px 15px 40px !important;
        overflow:hidden;
    }

    .H2-text{
        flex-direction:column !important;
        align-items:center !important;
        gap:15px !important;
    }

    .schetchik{
        width:180px !important;
        max-width:70vw !important;
        margin:10px auto !important;
        display:block;
    }

    .price-counter{
        width:100% !important;
        right:auto !important;
        left:auto !important;
        position:relative !important;
        text-align:center !important;
        padding:12px !important;
        box-sizing:border-box;
    }

    .price-counter span{
        display:block;
        line-height:1.3;
    }

    /* =========================
       ПРЕИМУЩЕСТВА
       ========================= */

    .prems{
        overflow:hidden !important;
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .s2-block{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        margin:0 !important;
    }

    .prem{
        width:100% !important;
        max-width:100% !important;
        margin:0 0 25px 0 !important;
        padding:0 !important;
        text-align:center !important;
    }

    .prem img{
        display:block;
        margin:0 auto 15px !important;
    }

    .prem p{
        width:100% !important;
        text-align:center !important;
    }

    .textl{
        text-align:center !important;
        padding:0 !important;
    }

    /* =========================
       ФУТЕР
       ========================= */

    .footer{
        padding:25px 15px !important;
        text-align:center !important;
        height:auto !important;
    }

    .nav2,
    .right-h,
    .call-back-button-three,
    .ico-phone-second{
        display:none !important;
    }

    .centh1{
        width:100% !important;
        float:none !important;
        text-align:center !important;
    }

    .centh1 h1{
        font-size:24px !important;
        line-height:1.3 !important;
    }

    .centh1 div{
        text-align:center !important;
    }

}

@media (max-width:768px){

    .call-back-button,
    .second-call-back-button,
    .call-back-button-three{
        position:static !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        top:auto !important;

        width:100% !important;
        max-width:320px !important;

        margin:15px auto 0 !important;

        display:flex !important;
        align-items:center;
        justify-content:center;

        height:auto !important;
        min-height:48px;

        padding:12px 16px !important;

        line-height:1.4 !important;

        box-sizing:border-box;
        text-align:center;

        float:none !important;
    }

}

@media (max-width:768px){
	.servi h5{
    text-align: center;
    padding-left: unset;
	}
}