/* ==========================================================================
   Cosgrove Child — Custom CSS
   ========================================================================== */
html:not([lang^="uk"]) .show_lang__uk {
  display: none !important;
}
html:not([lang^="ru"]) .show_lang__ru {
  display: none !important;
}
.no-bottom-pd{
    padding-bottom: 0 !important;
}
.center-content {
    text-align: center;
}
.card > .card-header a {
    color: #8e5740;
}
.card > .card-header a:hover {
    color: #c57858
}
.service-grid-bg p {
    font-size: 16px;
}
.view-details a {
    font-size: 14px;
}
.accordion {
}
/* Ховаємо ліву колонку «Тарифи / Specialties». Цілимось у саму колонку з
   .plan-feature, а не в :first-child — інакше після вмикання опції
   «Без колонки з переліком» (див. inc/wpbakery-pricing.php) правило сховало б
   перший тариф. */
.tariff-some .csgve-plans .row > [class*="col-"]:has(.plan-feature) {
    display: none;
}
body .before-overlay:before {
    display: block !important;
    content: "" !important;
    width: 100%;
    height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Dark left-to-right gradient, like the slider's overlay */
  background: linear-gradient(90deg, rgba(20, 30, 55, 0.68) 0%, rgba(20, 30, 55, 0.30) 100%);
}
.max-w-600{
    max-width: 600px
}
.no-more-btn .view-details{
    display: none !important;
}
.bg-light-terracot, .service-grid-bg .service-info{
    background: #faf4e8 !important
}
.bg-light-terracot input, .bg-light-terracot textarea,
.bg-light-terracot select, .bg-light-terracot .nice-select{
    background: #F2EADC !important
}
.bg-light-terracot [type="submit"]{
    background: #c57858 !important;
    color: #fff !important;
}
.bg-light-terracot [type="submit"]:hover{
    background: #8e5740 !important;
    color: #fff !important;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    background: #c57858 !important;
    border: 1px solid #c57858 !important;
}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel button.owl-dot:hover {
    background: #8e5740 !important;
    border: 1px solid #8e5740 !important;
}
.owl-carousel .owl-nav button.owl-next:before, .owl-carousel .owl-nav button.owl-prev:before{
    color: #fff !important;
    border: none !important;
    display: block !important;
}
.owl-carousel.carousel-style-two .owl-nav {
    gap: 5px;
    display: flex;
}
.csgve-nav-bar-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Блок E — «Як відбувається заселення» (WPBakery element [nd_steps])
   Стиль: Beige + Terracotta. Розмітку генерує шорткод у functions.php.
   Кольори узгоджені з рештою сайту (#c57858 / #8e5740 / #faf4e8 / #F2EADC).
   -------------------------------------------------------------------------- */
.nd-steps {
  --nd-sand: #F2EADC;        /* фон секції (кремовий) */
  --nd-card: #faf4e8;        /* фон карток */
  --nd-beige: #efe2cd;       /* фон блоку документів */
  --nd-terra: #c57858;       /* теракота (акцент) */
  --nd-terra-d: #8e5740;     /* теракота темніша (hover) */
  --nd-ink: #2E2520;         /* основний текст */
  --nd-muted: #7C6F62;       /* приглушений текст */
  --nd-line: rgba(46, 37, 32, 0.10);

  background: var(--nd-sand);
  color: var(--nd-ink);
  padding: 88px 20px;
  -webkit-font-smoothing: antialiased;
}
.nd-steps * { box-sizing: border-box; }
.nd-steps__wrap { max-width: 1140px; margin: 0 auto; }

/* Заголовок */
.nd-steps__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nd-terra);
  margin-bottom: 14px;
}
.nd-steps__eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--nd-terra);
  border-radius: 2px;
}
.nd-steps__title {
  margin: 0 0 48px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--nd-ink);
}
.nd-steps__title em {
  font-style: italic;
  color: var(--nd-terra);
}

/* Кроки — процес зі стрілками (без карток) */
.nd-steps__grid {
  --nd-num-size: 66px;   /* діаметр кружка з номером */
  --nd-gap: 46px;        /* відстань між кроками (місце під стрілку) */
  display: flex;
  align-items: flex-start;
  gap: var(--nd-gap);
}
.nd-step {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  padding: 0 6px;
}

/* Кружок з номером */
.nd-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nd-num-size);
  height: var(--nd-num-size);
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--nd-terra);
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 8px rgba(197, 120, 88, 0.12),
              0 12px 24px -12px rgba(197, 120, 88, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nd-step:hover .nd-step__num {
  transform: translateY(-4px);
  box-shadow: 0 0 0 8px rgba(197, 120, 88, 0.18),
              0 18px 30px -12px rgba(197, 120, 88, 0.95);
}

/* Стрілка між кроками (горизонтально, у проміжку) */
.nd-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--nd-num-size) / 2);
  left: calc(100% + (var(--nd-gap) - 26px) / 2);
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c57858' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  opacity: 0.85;
}

.nd-step__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--nd-ink);
}
p {
    color: #333;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 16px;
}
.text-white *{
    color: #fff !important;
}
.csgve-icon img {
    width: 38px;
}
.csgve-page-title .page-title {
    font-size: 50px;
}
.wpcf7-submit {
    font-size: 16px;
}
.nd-step__text {
  margin: 0 auto;
  max-width: 230px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--nd-muted);
}
.form-dark-bg .wpcf7-response-output{
    color: #fff !important;
}

/* Адаптив */
@media (max-width: 991px) {
  .nd-steps { padding: 64px 18px; }

  /* Кроки — вертикальна цепочка зі стрілками вниз */
  .nd-steps__grid {
    --nd-gap: 30px;
    flex-direction: column;
    align-items: center;
  }
  .nd-step {
    width: 100%;
    max-width: 460px;
    padding: 0;
  }
  .nd-step__text { max-width: 100%; }

  .nd-step:not(:last-child)::after {
    top: auto;
    left: 50%;
    bottom: calc(var(--nd-gap) / -1 + 2px);
    transform: translate(-50%, 0) rotate(90deg);
  }
}
@media (max-width: 768px) {
    header.csgve-header {
        min-height: 70px;
    }
}

/* Мобільна шапка: один flex-ряд на всю ширину — [лого] [телефон+соцмережі] [бургер].
   Без position:absolute. .mean-container додається meanmenu лише в мобільному режимі. */

/* .mean-bar за замовчуванням float:left (meanmenu). Оскільки вихідну .row сховано,
   плаваючий бар не дає висоти контейнеру — .container/.header схлопуються в 0.
   Прибираємо float, щоб бар сам задавав висоту шапки (min-height:70px з теми). */
.mean-container .mean-bar {
  float: none !important;
}

.mean-container .mean-bar .csgve-mobile-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 10px 52px 10px 15px; /* справа місце під кнопку-бургер */
  box-sizing: border-box;
}

/* Оригінальний рядок шапки ховаємо (лого/меню вже у flex-ряду .mean-bar).
   Скоуп .mean-container — лише мобільний режим, десктоп не зачіпається.
   DOM лишається, тож meanmenu коректно читає вихідне меню для випадного списку. */
.mean-container > .row {
  display: none !important;
}
.mean-container .csgve-mobile-topline .csgve-logo {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
.mean-container .csgve-mobile-topline .csgve-logo img {
  max-height: 42px;
  width: auto;
}

/* Бургер / хрестик закриття — завжди вгорі праворуч шапки, поверх меню та клікабельний.
   Селектор бере .meanmenu-reveal незалежно від того, чи він у топлайні, чи окремий
   нащадок .mean-bar (meanmenu при пересборці може лишати його поза топлайном). */
.mean-container .mean-bar {
  position: relative;
}
.mean-container .mean-bar a.meanmenu-reveal {
  position: absolute !important;
  top: 15px !important;   /* фіксовано, бо .mean-nav всередині .mean-bar — при відкритті
                             бар високий, і top:50% кинув би кнопку в середину меню */
  right: 15px !important;
  left: auto !important;
  transform: none !important;
  width: 24px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  z-index: 100 !important; /* вище за випадне меню .mean-nav */
    width: 24px !important;
    height: 35px !important;
    box-sizing: border-box;

}

/* Випадне меню — одразу під рядом (прибираємо відступ під абсолютний бар) */
.mean-container .mean-bar .mean-nav {
  margin-top: 0 !important;
}

/* Телефон + соцмережі (середній блок) */
.mean-container .csgve-mobile-topline .csgve-mobile-bar-extra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex: 1 1 auto;
  min-width: 0;

}

/* Телефон */
.mean-container .csgve-mobile-bar-extra .csgve-mobile-phone ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mean-container .csgve-mobile-bar-extra .csgve-mobile-phone li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
}
.mean-container .csgve-mobile-bar-extra .csgve-mobile-phone a,
.mean-container .csgve-mobile-bar-extra .csgve-mobile-phone span {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  color: #111 !important;
}
.mean-container .csgve-mobile-bar-extra .csgve-mobile-phone i {
  font-size: 22px;
}

/* Соцмережі в ряд */
.mean-container .csgve-mobile-bar-extra .csgve-social {
  display: flex;
  gap: 5px;
}
.mean-container .csgve-mobile-bar-extra .csgve-social a {
  display: inline-block !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 22px;
  line-height: 1;
    color: #54453c !important;
}
@media(max-width: 1200px){
    .csgve-topbar{
        display: none !important;
    }
}

/**/

@media (max-width: 1199px) {
    .mean-container .mean-bar .csgve-mobile-topline {
        padding: 0;
        height: 70px;
    }

}
@media (max-width: 760px) {
    .mean-container .csgve-mobile-topline .csgve-mobile-bar-extra {
        flex-direction: column;
        gap: 0;
    }
    .mean-container .csgve-mobile-bar-extra .csgve-social a:last-child {
        margin-right: 0;
    }
}

/* --------------------------------------------------------------------------
   Ціна в тарифі — «від [сума] грн / місяць», сума виділена крупно
   Розмітка: .plan-price-wrap.nd-price (див. plan-price-wpbakery.txt)
   -------------------------------------------------------------------------- */
.nd-price .plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 6px;
  padding: 0;
  margin: 0;
  font-size: 16px;          /* базовий кегль дрібних частин рядка */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}
/* «від», «грн», «/ місяць» — дрібні й приглушені */
.nd-price__from,
.nd-price__cur,
.nd-price__period {
  color: #7C6F62;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}
/* сума — крупно */
.nd-price__sum {
  font-size: 45px;
  line-height: 44px;
  letter-spacing: -0.2px;
  font-weight: 600;
}
/* другий рядок під ціною (необов'язковий) */
.nd-price .plan-limit {
  padding: 0;
  margin-top: 4px;
  color: #7C6F62;
  font-size: 15px;
  font-weight: 400;
}
/* акцентний варіант: сума теракотою — .plan-price-wrap.nd-price.nd-price--accent */
.nd-price--accent .nd-price__sum {
  color: #c57858;
}

/* повторюємо брейкпоінт теми: responsive.css → .plan-price-wrap h2 = 30px */
@media screen and (max-width: 767px) {
  .nd-price__sum {
    font-size: 30px;
    line-height: 32px;
  }
  .nd-price__from,
  .nd-price__cur,
  .nd-price__period {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   Тарифи — вирівнювання рядків між картками
   (заголовок / ціна / опис / кнопка — кожен рядок однієї висоти в усіх картках)

   Тема цього не робить: bootstrap-колонка тягнеться, а .plan-item усередині —
   ні. Тут .row стає грідом, а картка й .plan-info підхоплюють його рядки через
   subgrid. Секція має клас tariff-some (той самий, яким ховається колонка
   «Тарифи» вгорі файлу). Нижче 768px картки йдуть у стовпчик — вирівнювати нічого.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* .standard мав margin:0 і «виїжджав» на 25px угору — рядки не збігалися */
  .tariff-some .csgve-plans .plan-item.standard {
    margin-top: 25px;
  }
  /* і подовжений низ у виділеної картки (тема: padding-bottom 55px) —
     інакше рядок кнопки тягне вгору всі інші картки */
  .tariff-some .csgve-plans .standard .plan-subscribe {
    padding-bottom: 20px;
  }

  /* контент по центру своєї (тепер вищої) комірки */
  .tariff-some .csgve-plans .plan-title-wrap,
  .tariff-some .csgve-plans .plan-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Опис — по центру по висоті.
     Смужку й розділювач переносимо з <li> на сам <ul>, інакше межа лягала б
     посередині комірки, а не під ціною. */
  .tariff-some .csgve-plans .plan-info > ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fcfcfc;
    border-top: 1px solid #f0f0f0;
  }
  .tariff-some .csgve-plans .plan-info > ul > li {
    background: transparent;
    border-top: 0;
  }
  .tariff-some .csgve-plans .plan-info > ul > li + li {
    border-top: 1px solid #f0f0f0;
  }

  @supports (grid-template-rows: subgrid) {
    .tariff-some .csgve-plans .row {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      /* заголовок / ціна / опис (тягнеться) / кнопка */
      grid-template-rows: auto auto 1fr auto;
    }
    .tariff-some .csgve-plans .row > [class*="col-"] {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      max-width: none;   /* знімаємо bootstrap-ий max-width: 25% */
      flex: none;
    }
    .tariff-some .csgve-plans .plan-item {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
    }
    .tariff-some .csgve-plans .plan-info {
      display: grid;
      grid-row: 2 / -1;
      grid-template-rows: subgrid;
    }
  }

  /* Запасний варіант без subgrid: картки однакової висоти, кнопки по низу.
     Заголовок і ціна тут вирівнюються не завжди — залежить від довжини назви. */
  @supports not (grid-template-rows: subgrid) {
    .tariff-some .csgve-plans .row > [class*="col-"] {
      display: flex;
    }
    .tariff-some .csgve-plans .plan-item {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .tariff-some .csgve-plans .plan-info {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }
    .tariff-some .csgve-plans .plan-info > ul {
      flex: 1 1 auto;
    }
  }
}

/* --------------------------------------------------------------------------
   Тарифи — компактніші відступи й кеглі
   Рідні значення теми розраховані на 3 картки; на 4 блок виходить надто
   громіздким. Усе зібрано в одному місці — правити тут.
   -------------------------------------------------------------------------- */
.tariff-some .csgve-plans {
  padding-bottom: 40px;         /* тема: 80px */
}
/* шапка */
.tariff-some .csgve-plans .plan-title-wrap {
  padding: 12px 12px;           /* тема: 15px 10px */
}
.tariff-some .csgve-plans .plan-title {
  font-size: 17px;              /* тема: 20px */
  line-height: 24px;
}
.tariff-some .csgve-plans .plan-label {
  padding: 1px 9px;
  margin-bottom: 3px;
  font-size: 12px;              /* тема: 13px */
}
/* ціна */
.tariff-some .csgve-plans .plan-price-wrap {
  padding: 18px 12px;           /* тема: 29px 15px */
}
.tariff-some .csgve-plans .nd-price__sum {
  font-size: 34px;              /* тема/нашe: 45px */
  line-height: 34px;
}
.tariff-some .csgve-plans .nd-price__from,
.tariff-some .csgve-plans .nd-price__cur,
.tariff-some .csgve-plans .nd-price__period {
  font-size: 14px;              /* нашe: 16px */
}
.tariff-some .csgve-plans .plan-limit {
  margin-top: 2px;
  font-size: 13px;              /* нашe: 15px */
}
/* опис */
.tariff-some .csgve-plans .plan-info > ul > li {
  padding: 12px 18px;           /* тема: 10px 25px 14px */
  font-size: 14px;              /* тема: 15px */
  line-height: 22px;            /* тема: 24px */
}
/* кнопка */
.tariff-some .csgve-plans .plan-subscribe {
  padding: 18px 12px 20px;      /* тема: 34px 15px 35px */
}
.tariff-some .csgve-plans .plan-item .csgve-btn {
  padding: 8px 12px 9px;        /* тема: 9px 15px 10px */
  font-size: 14px;
}
/* --------------------------------------------------------------------------
   Тарифи — кількість колонок по брейкпоінтах і слайдер
   Елемент «Plan Features» → поля «Колонок — десктоп / планшет / мобільний»
   і «Слайдер» (див. inc/wpbakery-pricing.php, js/nd-plans.js).

   Розмітка: .csgve-plans.nd-plans[data-cols-d|t|m] > .row > [class*="col-"]
   Число колонок приходить у змінних --nd-cols-d / --nd-cols-t / --nd-cols-m,
   «Авто» = data-cols-*="auto" — колонок стільки, скільки карток (як було
   до цієї опції), тому в цьому режимі числа немає взагалі.

   Секція йде після блоку «вирівнювання рядків» і перекриває його там, де
   задано кількість колонок або ввімкнено слайдер.
   -------------------------------------------------------------------------- */

/* Скільки карток видно на поточному брейкпоінті. Значення по замовчуванню
   (3 / 2 / 1) працюють лише для слайдера: без нього «Авто» вимикає
   --nd-tpl-cols цілком і число не використовується. */
.csgve-plans.nd-plans {
  --nd-cols: var(--nd-cols-m, 1);
}
@media (min-width: 768px) {
  .csgve-plans.nd-plans {
    --nd-cols: var(--nd-cols-t, 2);
  }
}
@media (min-width: 992px) {
  .csgve-plans.nd-plans {
    --nd-cols: var(--nd-cols-d, 3);
  }
}

@supports (grid-template-rows: subgrid) {
  /* Базовий режим — «Авто»: grid-auto-flow: column, тобто скільки карток,
     стільки й колонок. Прихована колонка «Тарифи» (display:none) при цьому
     не займає місця — саме тому «Авто» не рахує картки в PHP. */
  .csgve-plans.nd-plans .row {
    display: grid;
    grid-auto-flow: var(--nd-flow, column);
    grid-template-columns: var(--nd-tpl-cols, none);
    grid-auto-columns: var(--nd-auto-cols, minmax(0, 1fr));
    /* заголовок / ціна / опис (тягнеться) / кнопка */
    grid-template-rows: var(--nd-tpl-rows, auto auto 1fr auto);
    grid-auto-rows: var(--nd-auto-rows, auto);
  }
  .csgve-plans.nd-plans .row > [class*="col-"] {
    display: grid;
    grid-row: var(--nd-item-rows, 1 / -1);
    grid-template-rows: subgrid;
    max-width: none;   /* знімаємо bootstrap-ий max-width колонки */
    flex: none;
  }
  .csgve-plans.nd-plans .plan-item,
  .csgve-plans.nd-plans .row > [class*="col-"] > .plan-feature {
    grid-row: 1 / -1;
  }
  .csgve-plans.nd-plans .plan-item {
    display: grid;
    grid-template-rows: subgrid;
  }
  .csgve-plans.nd-plans .plan-info {
    display: grid;
    grid-row: 2 / -1;
    grid-template-rows: subgrid;
  }

  /* Задана кількість колонок — картки переносяться на новий ряд.
     grid-auto-rows повторює шаблон рядків картки (auto auto 1fr auto), тож
     кожен ряд карток вирівнюється сам по собі, а не тягнеться за сусіднім. */
  @media (max-width: 767px) {
    .csgve-plans.nd-plans:not([data-cols-m="auto"]) {
      --nd-flow: row;
      --nd-tpl-cols: repeat(var(--nd-cols), minmax(0, 1fr));
      --nd-tpl-rows: none;
      --nd-auto-rows: auto auto 1fr auto;
      --nd-item-rows: span 4;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .csgve-plans.nd-plans:not([data-cols-t="auto"]) {
      --nd-flow: row;
      --nd-tpl-cols: repeat(var(--nd-cols), minmax(0, 1fr));
      --nd-tpl-rows: none;
      --nd-auto-rows: auto auto 1fr auto;
      --nd-item-rows: span 4;
    }
  }
  @media (min-width: 992px) {
    .csgve-plans.nd-plans:not([data-cols-d="auto"]) {
      --nd-flow: row;
      --nd-tpl-cols: repeat(var(--nd-cols), minmax(0, 1fr));
      --nd-tpl-rows: none;
      --nd-auto-rows: auto auto 1fr auto;
      --nd-item-rows: span 4;
    }
  }
}

/* Запасний варіант без subgrid (Safari < 16, Chrome < 117): рядки карток між
   собою не вирівнюються, але кількість колонок і слайдер працюють. */
@supports not (grid-template-rows: subgrid) {
  .csgve-plans.nd-plans .row {
    display: flex;
    flex-wrap: wrap;
  }
  .csgve-plans.nd-plans .row > [class*="col-"] {
    display: flex;
  }
  .csgve-plans.nd-plans .plan-item {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .csgve-plans.nd-plans .plan-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .csgve-plans.nd-plans .plan-info > ul {
    flex: 1 1 auto;
  }
  @media (max-width: 767px) {
    .csgve-plans.nd-plans:not([data-cols-m="auto"]) .row > [class*="col-"] {
      flex: 0 0 calc(100% / var(--nd-cols));
      max-width: calc(100% / var(--nd-cols));
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .csgve-plans.nd-plans:not([data-cols-t="auto"]) .row > [class*="col-"] {
      flex: 0 0 calc(100% / var(--nd-cols));
      max-width: calc(100% / var(--nd-cols));
    }
  }
  @media (min-width: 992px) {
    .csgve-plans.nd-plans:not([data-cols-d="auto"]) .row > [class*="col-"] {
      flex: 0 0 calc(100% / var(--nd-cols));
      max-width: calc(100% / var(--nd-cols));
    }
  }
  .csgve-plans.nd-plans--slider .row {
    flex-wrap: nowrap;
  }
  .csgve-plans.nd-plans--slider .row > [class*="col-"] {
    flex: 0 0 calc(100% / var(--nd-cols));
    max-width: calc(100% / var(--nd-cols));
  }
}

/* --- Слайдер ---------------------------------------------------------------
   Прокрутку робить сам браузер (overflow + scroll-snap), тож свайп на тачі
   працює й без JS. js/nd-plans.js додає лише стрілки, крапки й перетягування
   мишею. Правила йдуть після медіа-запитів вище — у слайдері картки ніколи
   не переносяться, скільки б колонок не вибрали.
   -------------------------------------------------------------------------- */
.csgve-plans.nd-plans.nd-plans--slider {
  --nd-flow: column;
  --nd-tpl-cols: none;
  --nd-auto-cols: calc(100% / var(--nd-cols));
  --nd-tpl-rows: auto auto 1fr auto;
  --nd-auto-rows: auto;
  --nd-item-rows: 1 / -1;
}
.csgve-plans.nd-plans--slider .row {
  overflow-x: auto;
  /* Прокрутка по X завжди робить оверфлоу по Y обрізаним (clip тут теж
     обчислюється в hidden), а тінь виділеної картки (.standard,
     box-shadow 0 5px 40px) виходить за трек. Даємо їй місце падінгом, а
     від'ємним маргіном повертаємо блоку початкову висоту — без слайдера
     й зі слайдером картки стоять на тому самому місці. */
  overflow-y: hidden;
  padding: 20px 0 45px;
  margin: -20px 0 -45px;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.csgve-plans.nd-plans--slider .row::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.csgve-plans.nd-plans--slider .row > [class*="col-"] {
  scroll-snap-align: start;
}
/* Перетягування мишею: поки тягнемо — snap і плавність вимкнені, інакше
   трек «пружинить» назад на кожен рух. */
.csgve-plans.nd-plans--slider .row.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Керування. Сховане, поки не відпрацював JS (без нього кнопки нічого не
   роблять) і коли прокручувати нічого — усі картки вміщаються. */
.nd-plans__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.nd-plans--ready .nd-plans__nav {
  display: flex;
}
.nd-plans--static .nd-plans__nav {
  display: none;
}
.nd-plans__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #c57858;
  background: transparent;
  border: 1px solid #e6ded9;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.nd-plans__arrow:hover:not(:disabled),
.nd-plans__arrow:focus:not(:disabled) {
  color: #ffffff;
  background: #c57858;
  border-color: #c57858;
}
.nd-plans__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.nd-plans__arrow:focus-visible,
.nd-plans__dot:focus-visible {
  outline: 2px solid #c57858;
  outline-offset: 2px;
}
.nd-plans__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nd-plans__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  background: #ded5cf;
  border: 0;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.nd-plans__dot.is-active {
  background: #c57858;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}
/* --------------------------------------------------------------------------
   Contact Form 7 — селект як інпут і блок згоди на обробку даних
   -------------------------------------------------------------------------- */

/* Селект.
   Тема підміняє всі <select> плагіном nice-select, і поруч з інпутами він
   виглядав чужим: 50px замість 42px, шрифт 14px замість 13px, текст #333
   замість #888. Для форм CF7 повертаємо рідний <select> (див. js/custom.js) —
   тема стилізує його тим самим правилом, що й інпути (input[...], select,
   .form-control), тож розміри, колір і стрілка збігаються самі й не з’їдуть
   після зміни налаштувань теми. Тут — лише курсор і стан фокуса. */
.wpcf7-form select.wpcf7-select {
  cursor: pointer;
}
.wpcf7-form select.wpcf7-select:focus {
  border-color: #c57858;
}

/* Запасний варіант: якщо JS не спрацював і nice-select лишився —
   підганяємо його під метрики інпутів теми. */
.nice-select.wpcf7-select {
  height: 42px;
  padding: 5px 40px 5px 15px;
  margin-bottom: 15px;
  line-height: 30px;
  font-size: 13px;
  color: #888888;
  background-color: #fcfcfc;
}
.nice-select.wpcf7-select .option {
  font-size: 13px;
}

/* Згода на обробку персональних даних.
   Було: рідний чекбокс 13px, текст #333 (на темному тлі форми — невидимий),
   підпис переносився під чекбокс. Стало: свій чекбокс у теракоті й текст
   поруч однією колонкою. */
.wpcf7-acceptance {
  display: block;
  margin: 4px 0 8px;
}
.wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}
.wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
.wpcf7-acceptance input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  background-color: #fcfcfc;
  border: 1px solid #ececec;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease, border-color 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wpcf7-acceptance input[type="checkbox"]:checked {
  background-color: #c57858;
  border-color: #c57858;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}
.wpcf7-acceptance input[type="checkbox"]:focus-visible {
  outline: 2px solid #c57858;
  outline-offset: 2px;
}
.wpcf7-acceptance .wpcf7-list-item-label {
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333333;
}
.wpcf7-acceptance .wpcf7-list-item-label a {
  color: #c57858;
  text-decoration: underline;
}
.wpcf7-acceptance .wpcf7-list-item-label a:hover,
.wpcf7-acceptance .wpcf7-list-item-label a:focus {
  color: #8e5740;
}

/* Не заповнено: червона рамка чекбокса + підказка окремим рядком
   (у CF7 вона абсолютна й накладалась на текст згоди). */
.wpcf7-acceptance.wpcf7-not-valid input[type="checkbox"] {
  border-color: #dc3232;
}
.wpcf7-acceptance .wpcf7-not-valid-tip {
  position: static;
  display: block;
  margin-top: 6px;
  font-size: 13px;
}

/* Форма на темному тлі (колонка .form-dark-bg). */
.form-dark-bg .wpcf7-acceptance .wpcf7-list-item-label {
  color: #ffffff;
}
.form-dark-bg .wpcf7-acceptance .wpcf7-list-item-label a {
  color: #e0a184;
}
.form-dark-bg .wpcf7-acceptance .wpcf7-list-item-label a:hover,
.form-dark-bg .wpcf7-acceptance .wpcf7-list-item-label a:focus {
  color: #ffffff;
}
.form-dark-bg .wpcf7-not-valid-tip {
  color: #ffb3a7;
}

/* Списки з іконками (елемент теми «Bullet List»): прибираємо галочку fa-check —
   пункти лишаються простим текстовим переліком. Іконку в самому елементі не
   чіпаємо, тож повернути її можна одним рядком тут. */
.contact-details-wrap ul li a:hover {
  color: #8e5740 !important;
}

.csgve-btn.csgve-blue-border-btn:focus {
  color: #c57858 !important;
}
.full-img-person img {
  width: 1024px; 
}
[name="textarea-805"] {
  height: auto;
  min-height: 42px;
  max-height: 300px;
  overflow-y: auto; /* важно! иначе после max-height не будет скролла */
  box-sizing: border-box;
}

.contact-details-wrap a {
  font-weight: 600;
}

.full-slider .vc_images_carousel {
  width: 100% !important;
}

.nd-swiper-wrap[data-auto-width="yes"] .swiper-slide {
  width: auto;
  width: 150px !important;
  aspect-ratio: 1 / 1;
  height: 150px !important;
}
.nd-swiper-wrap .nd-swiper-lightbox {
  display: flex;
  width: 100%;
  height: 100%;
}
.nd-swiper-wrap .nd-swiper-lightbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nd-swiper-wrap[data-auto-width="yes"]  {
  height: 150px !important;
}
.nd-swiper-wrap[data-auto-width="yes"] .swiper-container {
  height: 100% !important;
}
.nd-swiper-wrap {
  position: relative ;
}
.nd-swiper-wrap .swiper-button-prev, .nd-swiper-wrap .swiper-button-next {
  display: inline-block;
  right: 0;
  height: 40px;
  width: 40px;
  margin: 0;
  background-image: none;
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  -webkit-transition: all ease .3s;
  -ms-transition: all ease .3s;
  transition: all ease .3s;
  z-index: 1;
  border-radius: 0;
  background: #c57858 !important;
  border: 1px solid #c57858 !important;

}
.nd-swiper-wrap .swiper-button-next {
  right: 12px !important;
}
.nd-swiper-wrap .swiper-button-prev {
  left: 12px !important;
}
.nd-swiper-title {
  padding-bottom: 22px;
}