/* hover-движение двух карточек только в #efl-hero-static */
#efl-hero-static .efl-hero-embed__cards .efl-card{
  transform: translate3d(0,0,0) scale(1);
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease;
  will-change: transform, box-shadow;
}

/* плавный «подъём» + усиление тени на hover/фокусе */
#efl-hero-static .efl-hero-embed__cards .efl-card:hover,
#efl-hero-static .efl-hero-embed__cards .efl-card:focus-within{
  transform: translate3d(0,-10px,0);
  box-shadow: 0 18px 40px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.08);
}

/* лёгкое горизонтальное расхождение карт при наведении — выглядит живее */
#efl-hero-static .efl-hero-embed__cards .efl-card:nth-child(1):hover,
#efl-hero-static .efl-hero-embed__cards .efl-card:nth-child(1):focus-within{
  transform: translate3d(-4px,-10px,0);
}
#efl-hero-static .efl-hero-embed__cards .efl-card:nth-child(2):hover,
#efl-hero-static .efl-hero-embed__cards .efl-card:nth-child(2):focus-within{
  transform: translate3d(4px,-10px,0);
}

/* отклик на клик/тап — чуть ниже, чтобы ощущалось нажатие */
#efl-hero-static .efl-hero-embed__cards .efl-card:active{
  transform: translate3d(0,-4px,0);
}

/* уважение системных настроек уменьшенного движения */
@media (prefers-reduced-motion: reduce){
  #efl-hero-static .efl-hero-embed__cards .efl-card{
    transition: box-shadow .2s ease;
    transform: none;
  }
  #efl-hero-static .efl-hero-embed__cards .efl-card:hover,
  #efl-hero-static .efl-hero-embed__cards .efl-card:focus-within,
  #efl-hero-static .efl-hero-embed__cards .efl-card:active{
    transform: none;
  }
}



/* затемняем фон на ~50% только в этом блоке */
#efl-hero-static .efl-hero-embed__veil{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.50) 40%,
      rgba(0,0,0,.50) 100%
    ) !important;
  opacity: 1 !important;              /* на случай если где-то задана общая прозрачность */
  background-image: none, none;        /* страховка от лишних слоёв */
}



/* ====== HERO (scoped) ====== */
#efl-hero-static{
  position: relative;
  color: #fff;
  padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 8vw, 140px);
}
#efl-hero-static .efl-hero-embed__bg{
  position: absolute; inset: 0;
  background: url('https://eaglefreight.us/images/shapka/fon3/Freight%20Shipping%20Services.jpg') center/cover no-repeat;
  z-index: 0;
}
#efl-hero-static .efl-hero-embed__veil{
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.70) 100%);
}
#efl-hero-static .efl-hero-embed__inner{
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(16px,4vw,40px);
  text-align: center;
}

/* ====== CTA buttons (force flat colors) ====== */
#efl-hero-static .efl-cta{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:.75rem;
}
#efl-hero-static .efl-btn{
  display:inline-block; padding:.9rem 1.25rem; border-radius:12px;
  font-weight:700; text-decoration:none; line-height:1.2; white-space:nowrap;
}

/* красная */
#efl-hero-static .btn-hero-red{
  background:#e53935 !important;
  background-image:none !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
#efl-hero-static .btn-hero-red:hover,
#efl-hero-static .btn-hero-red:focus{ filter:brightness(.95); }

/* синяя */
#efl-hero-static .btn-hero-blue{
  background:#1e3a8a !important;
  background-image:none !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}
#efl-hero-static .btn-hero-blue:hover,
#efl-hero-static .btn-hero-blue:focus{ filter:brightness(1.05); }

/* подстраховка по href (если классы случайно сменятся) */
#efl-hero-static .efl-cta a[href*="request-a-quote"]{
  background:#e53935 !important; background-image:none !important; color:#fff !important;
}
#efl-hero-static .efl-cta a[href*="track-shipment"]{
  background:#1e3a8a !important; background-image:none !important; color:#fff !important;
}

/* ====== USP row ====== */
#efl-hero-static .efl-usps{
  display:flex; gap:28px; justify-content:center; align-items:center; margin:20px auto 0; flex-wrap:wrap;
}
#efl-hero-static .efl-usp{ display:flex; align-items:center; gap:10px; opacity:.95; font-weight:600; }
#efl-hero-static .efl-ico{ display:inline-flex; width:28px; height:28px; justify-content:center; align-items:center; font-size:18px; }

/* ====== Cards ====== */
#efl-hero-static .efl-hero-embed__cards{ margin-top: clamp(40px, 6vw, 70px); }

#efl-hero-static .efl-hero-embed__cards .cards-grid{
  display:flex; justify-content:center; align-items:stretch;
  gap:32px; flex-wrap:wrap;
}

/* узкие, аккуратные переносы */
#efl-hero-static .efl-hero-embed__cards .efl-card{
  background:#fff; color:#0f172a; text-align:left;
  border-radius:18px; padding:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  max-width: 360px;        /* уже */
  flex: 1 1 360px;
  display:flex; flex-direction:column;
}
#efl-hero-static .efl-hero-embed__cards .card-head{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
#efl-hero-static .efl-hero-embed__cards .card-head h3,
#efl-hero-static .efl-hero-embed__cards p{
  margin:0;
  line-height:1.3;
  overflow-wrap:anywhere;   /* жёстко переносим длинные слова */
  hyphens:auto;
}
#efl-hero-static .efl-hero-embed__cards .card-ico{
  display:inline-flex; width:44px; height:44px; border-radius:12px;
  background:#eef2ff; justify-content:center; align-items:center; font-size:22px; color:#1e3a8a;
}
#efl-hero-static .efl-hero-embed__cards .card-cta{ margin-top:auto; }

/* ====== Responsive ====== */
@media (max-width: 960px){
  #efl-hero-static .efl-hero-embed__cards .cards-grid{ flex-direction:column; align-items:center; }
  #efl-hero-static .efl-hero-embed__cards .efl-card{ max-width:480px; }
}


/* #efl-hero-static — аккуратные отступы сверху/снизу */
#efl-hero-static{
  padding-top: clamp(16px, 3vw, 40px) !important;
  padding-bottom: clamp(24px, 4vw, 56px) !important;
}

/* внутри блока вертикальные поля минимальные */
#efl-hero-static .efl-hero-embed__inner{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* типографика: компактно, но дышит */
#efl-hero-static h1{
  margin: 0 0 clamp(8px, 1.5vw, 16px) !important;
}
#efl-hero-static .efl-lead{
  margin: 0 0 clamp(10px, 1.8vw, 18px) !important;
}

/* отступы у кнопок и ряда с иконками */
#efl-hero-static .efl-cta{
  margin-top: clamp(8px, 1.5vw, 16px) !important;
}
#efl-hero-static .efl-usps{
  margin-top: clamp(8px, 1.5vw, 16px) !important;
}

/* карточки чуть дальше от текста, но без «пропасти» */
#efl-hero-static .efl-hero-embed__cards{
  margin-top: clamp(16px, 3vw, 36px) !important;
}

/* расстояние между карточками немного меньше */
#efl-hero-static .efl-hero-embed__cards .cards-grid{
  gap: clamp(16px, 2.5vw, 28px) !important;
}




















/* Гарантируем, что анимация по буквам всегда доступна */
#efl-hero-embed [data-reveal="letters"] .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(1em);
  animation: revealLetter 0.6s forwards;
}

/* Пример анимации — у тебя может быть своя */
@keyframes revealLetter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}





/* Контейнер героя */
#efl-hero-embed .efl-inner {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(20px, 2.5vw, 40px);
  box-sizing: border-box;
}

/* Пробелы в анимации */
#efl-hero-embed [data-reveal="letters"] .word {
  display: inline-block;
  white-space: nowrap;
}
#efl-hero-embed [data-reveal="letters"] .space {
  display: inline-block;
  width: 0.35em;
}

/* Большие экраны (норма) */
@media (min-width: 1280px) {
  #efl-hero-embed h1[data-reveal="letters"] {
    font-size: clamp(36px, 5vw, 47px);
    line-height: 1.2;
  }
}

/* Средние экраны: уменьшаем шрифт + сужаем padding, чтобы убрать 3-ю строку */
@media (min-width: 992px) and (max-width: 1279.98px) {
  #efl-hero-embed .efl-inner {
    padding-inline: clamp(12px, 2vw, 20px); /* меньше отступы */
  }
  #efl-hero-embed h1[data-reveal="letters"] {
    font-size: clamp(28px, 3.6vw, 36px); /* меньше шрифт */
    line-height: 1.2;
  }
}

/* Мобильные экраны (оставляем как есть) */
@media (max-width: 991.98px) {
  #efl-hero-embed h1[data-reveal="letters"] {
    font-size: clamp(24px, 5vw, 32px);
    line-height: 1.25;
  }
}







/* 1) Базовая геометрия выпадашки */
.container-header, .site-header { overflow: visible; }       /* чтобы подменю не обрезалось */
.mod-menu li { position: relative; }
.mod-menu li > ul {               /* сама выпадашка */
  position: absolute;
  top: 100%;                      /* сразу под пунктом */
  left: 0;
  z-index: 11000;                 /* выше баннера/блоков */
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}

/* 2) Показываем подменю при наведении И на пункт, И на саму выпадашку */
.mod-menu li:hover > ul,
.mod-menu li > ul:hover{
  display: block;
  opacity: 1;
  visibility: visible;
}

/* 3) "Невидимый мост" между пунктом и подменю — чтобы не ронять hover */
.mod-menu li:has(> ul)::after {           /* если :has нет — см. JS-решение ниже */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 14px;                           /* подберите: 10–18px */
  /* прозрачный, но ловит hover */
}

/* На случай, если :has ещё не поддерживается в каком-то браузере — увеличьте зазор у самой выпадашки */
.mod-menu li > ul { margin-top: 8px; }    /* перекрывает возможную щель */


.container-top-a{
  position: relative;
  z-index: 10001;
  margin-top: -160px; /* отрицательное значение — тянет вверх */
}


/* Чтобы меню было поверх всего при необходимости */
.container-header{ position: relative; z-index: 11000; }

@media (max-width: 768px){
  .container-top-a .moduletable.over-banner{
    top: clamp(16px, 8vw, 72px);
    width: 94vw;
  }
}


.rv-hide { opacity: 0; transform: translateY(12px); }
.rv-in   { opacity: 1; transform: none; }

[data-reveal] {
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

.rv-word, .rv-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(1em);
  transition: opacity 600ms ease, transform 600ms ease;
}

.rv-in .rv-word, .rv-in .rv-char { opacity: 1; transform: translateY(0); }
.efl-btn[data-reveal] { display: inline-block; }













/* Сжимаем фон к тексту по вертикали */
#efl-hero-embed{
  padding: clamp(4px, 1vw, 10px) clamp(12px, 3vw, 24px) !important; /* было 24–56px */
}

/* Срезаем «внешние» отступы внутри — сверху и снизу */
#efl-hero-embed .efl-inner > :first-child { margin-top: 0 !important; }
#efl-hero-embed .efl-inner > :last-child  { margin-bottom: 0 !important; }

/* Более плотные отступы между строками блока */
#efl-hero-embed h1{ margin: 0 auto 6px !important; }                 /* было до 24px */
#efl-hero-embed .efl-cta{ margin-top: 8px !important; }              /* было до 36px */
#efl-hero-embed .efl-usps{ margin-top: 8px !important; gap: 10px !important; }

/* По желанию — на мобилках ещё плотнее */
@media (max-width: 768px){
  #efl-hero-embed{ padding: 4px 12px !important; }
  #efl-hero-embed h1{ margin-bottom: 4px !important; }
  #efl-hero-embed .efl-cta{ margin-top: 6px !important; }
}










/* ===== Cassiopeia: подменю влево, но сдвинуты чуть правее ===== */
@media (min-width: 992px){
  :root { --submenu-shift: 8px; } /* меняй 4–16px по вкусу */

  /* 2-й уровень: прижат к правому краю + сдвиг правее */
  .banner-menu-absolute ul.mod-menu > li > ul.mod-menu__sub,
  .banner-menu-absolute .dropdown > .dropdown-menu {
    left: auto !important;
    right: calc(0px - var(--submenu-shift)) !important; /* +Npx правее */
    top: 100% !important;
    transform: none !important;
    transform-origin: right top !important;
  }

  /* 3-й+ уровни: открываются влево, но на Npx правее (ближе к родителю) */
  .banner-menu-absolute .mod-menu__sub .mod-menu__sub,
  .banner-menu-absolute .dropdown-menu .dropdown-menu {
    left: auto !important;
    right: calc(100% - var(--submenu-shift)) !important; /* тянем на Npx вправо */
    top: 0 !important;
    transform: none !important;
    transform-origin: right top !important;
  }
}


/* Подменю: всегда сплошной фон */
body.itemid-101 .banner-menu-absolute .mod-menu__sub,
#maximenuck113 ul.maximenuck ul.submenu,
.dropdown-menu {
  background: #fff !important;      /* непрозрачный белый */
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
  backdrop-filter: none !important;  /* на всякий */
  opacity: 1 !important;             /* на случай, если где-то ставили opacity */
}

/* Ховер внутри подменю (по желанию) */
#maximenuck113 ul.maximenuck ul.submenu > li > a:hover,
.mod-menu__sub li > a:hover,
.dropdown-menu li > a:hover {
  background: rgba(0,0,0,0.04) !important;
}













/* позицию кладём поверх баннера и центрируем */
body.itemid-101 .container-banner { position: relative; }

body.itemid-101 .banner-menu-absolute-left{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;  /* центр по горизонтали */
  top: clamp(28px, 10vw, 200px) !important;/* подними/опусти по вкусу */
  z-index: 9999;                           /* ниже меню (у него ~10000) */
  width: min(92vw, 1200px);
  padding: 0 clamp(12px, 3vw, 24px);
  pointer-events: none;                     /* не блокируем клики по баннеру */
}

/* внутри позиции клики разрешаем */
body.itemid-101 .banner-menu-absolute-left *{ pointer-events: auto; }

/* На мобильных — пускаем позицию в поток как top-a */
@media (max-width: 992px){
  body.itemid-101 .banner-menu-absolute-left{
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    margin: 12px auto 0;
    pointer-events: auto;
  }
}



/* Меню: жёстко фиксируем в правом верхнем углу баннера и поднимаем слой */
body.itemid-101 .container-banner { overflow: visible !important; position: relative; }

body.itemid-101 .banner-menu-absolute{
  position: absolute !important;
  top: 32px !important;
  right: 50px !important;
  z-index: 10010 !important; /* выше всего на баннере */
  transform: none !important;
  filter: none !important;
}

/* Выпадающие пункты — ещё выше */
body.itemid-101 .banner-menu-absolute .mod-menu__sub{
  position: absolute !important;
  z-index: 10020 !important;
}

/* Центральная позиция на баннере — ниже меню и не мешает hover */
body.itemid-101 .banner-menu-absolute-left{
  z-index: 5 !important;
  pointer-events: none !important;
}
body.itemid-101 .banner-menu-absolute-left *{ pointer-events: auto; }


/* ===== EFL HERO (мини-набор, адаптив, серый прозрачный фон) ===== */
#efl-hero-embed{
  background: rgba(38,44,55,.55);         /* полупрозрачный серый под всем */
  color:#fff;                              /* весь текст белый */
  padding: clamp(24px,5vw,56px) clamp(16px,4vw,48px);
  box-sizing: border-box;
}

#efl-hero-embed .efl-inner{
  max-width: 1800px;
  margin: 0 auto;
  text-align: center;
  min-width: 0;
  font-family: var(--cassiopeia-font-family-body, system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif);
}

/* H1 — широко, с полями и адаптивным размером */
#efl-hero-embed h1{
  max-width: 1800px;
  margin: 0 auto clamp(14px,3vw,24px);
  padding-inline: clamp(12px,4vw,48px);
  font-family: var(--cassiopeia-font-family-headings, inherit);
  font-weight: var(--cassiopeia-font-weight-headings, 700);
  font-size: clamp(28px,6vw,56px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color:#fff;
}

/* Лид — почти на всю страницу */
#efl-hero-embed .efl-lead{
  max-width: 1300px;
  margin: 0 auto;
  font-size: clamp(16px,2.4vw,19px);
  text-align: center;
  color:#fff;
}

/* CTA — центр и нормальные промежутки (переносятся при узком экране) */
#efl-hero-embed .efl-cta{
  margin-top: clamp(22px,3.4vw,36px);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: clamp(12px,2vw,20px);
}
#efl-hero-embed .efl-btn{
  --accent:#0ec3ff;
  --bg:linear-gradient(180deg,var(--accent),#57d1ff 40%,#23b6f2);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 20px; border-radius:999px; font-weight:800; text-decoration:none;
  color:#07283c !important; background:var(--bg); border:0;
  box-shadow:0 10px 18px rgba(14,195,255,.25), inset 0 -1px 0 rgba(8,63,123,.25);
  white-space:nowrap;
}
#efl-hero-embed .efl-btn.efl-btn--secondary{
  background:linear-gradient(180deg,#fff,#e8eef7); color:#001B4C !important;
}
#efl-hero-embed .efl-btn.efl-btn--call{
  background:linear-gradient(180deg,#9bffb8,#48d07c 45%,#22b668); color:#06361f !important;
}

/* USPs — иконки Font Awesome в кружках */
#efl-hero-embed .efl-usps{
  margin-top: clamp(24px,3.6vw,40px);
  display:flex; align-items:center; justify-content:center;
  gap: 18px; flex-wrap:wrap; color:#fff;
}
#efl-hero-embed .efl-usp{ display:inline-flex; align-items:center; gap:10px; }
#efl-hero-embed .efl-ico{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.18);
}
#efl-hero-embed .efl-ico i{ font-size:18px; color:#fff; }

/* Чуть компактнее на мобильных */
@media (max-width: 768px){
  #efl-hero-embed h1{ font-size: clamp(24px,7vw,34px); }
  #efl-hero-embed .efl-lead{ font-size: 16px; max-width: 100%; }
  #efl-hero-embed .efl-cta{ gap: 10px; }
  #efl-hero-embed .efl-btn{ padding: 12px 16px; }
}
@media (max-width: 560px){
  #efl-hero-embed .efl-cta{ flex-direction: column; align-items: stretch; }
  #efl-hero-embed .efl-btn{ width: 100%; }
  #efl-hero-embed .efl-ico{ width:32px; height:32px; }
  #efl-hero-embed .efl-ico i{ font-size:16px; }
}














/* Цвет #71a3c1 при наведении на обе кнопки */
.custom-header .phone:hover,
.custom-header .btn-quote:hover,
#mod-custom121 .custom-header .phone:hover,
#mod-custom121 .custom-header .btn-quote:hover {
  background: #71a3c1 !important;
  color: #fff !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px) scale(1.03);
}




/* 1) Убедимся, что фильтр задан по умолчанию */
.services-row .card {
  /* уже есть стили рамок и теней… */
  filter: brightness(1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;  /* добавляем анимацию для фильтра */
}

/* 2) При наведении слегка затемняем */
.services-row .card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
  filter: brightness(0.9); /* значение 0.9 = на 10% темнее */
}





/* Карточки с 3D рамкой и тенью */
.services-row .card {
  border: 3px solid #ced4da;               /* светлая рамка */
  border-radius: 0.5rem;                /* скруглённые углы */
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),         /* лёгкая тень снизу */
    0 4px 8px rgba(0,0,0,0.05);         /* мягкая тень вокруг */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* При наведении — карточка «выходит» вперёд */
.services-row .card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
}



/* templates/ВАШ_ШАБЛОН/css/user.css */
@media only screen and (max-width: 576px) {
  /* Обёртка ряда */
  .services-row {
    padding: 0 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Колонки */
  .services-row > [class*="col-"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  /* Картинка в карточке */
  .services-row .card-img-top {
    width: 100% !important;
    max-height: 140px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* Тело карточки */
  .services-row .card-body {
    padding: 0.75rem !important;
  }
  /* Заголовок */
  .services-row .card-title {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }
  /* Основной текст */
  .services-row .card-text {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
}






.banner-menu-absolute a {
  position: relative;
  color: #222;
  font-weight: 900;
  font-size: 1.18em;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.18s, filter 0.18s;
  text-shadow: 0 0 24px #fff, 0 0 36px #fff;
}

.banner-menu-absolute a:hover {
  color: #ff7f00;
  /* ещё более яркий glow */
  filter: brightness(1.3) drop-shadow(0 0 40px #fff);
}

/* Жёлтая линия — только для подменю, если надо */
.banner-menu-absolute a:not(.main-menu-item)::after {
  content: '';
  display: block;
  margin: 0 auto;
  width: 0%;
  height: 3px;
  background: #ff7f00;
  border-radius: 2px;
  transition: width 0.23s;
}


/* 1. Общие настройки для кнопок */
.custom-header .phone,
.custom-header .btn-quote {
  display: inline-block;
  padding: 0.5rem 1.2rem;       /* вертикальные/горизонтальные отступы */
  margin-left: 0.5rem;          /* расстояние между кнопками */
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 0.4rem;        /* скруглённые углы */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 2. Отдельные цвета и фон */
.custom-header .phone {
  background-color: #0056b3;    /* глубокий синий */
  color: #fff;
}

.custom-header .btn-quote {
  background-color: #ff7f00;    /* акцентный оранжевый */
  color: #fff;
}

/* 3. Hover-эффекты */
.custom-header .phone:hover,
.custom-header .btn-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  opacity: 0.95;
}

/* 4. Акцент на мобильных — чуть больше кликабельной зоны */
@media (max-width: 767px) {
  .custom-header .phone,
  .custom-header .btn-quote {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
}












/* ======================================================
   1) ВСЕГДА фиксируем шапку сверху и ставим её на самый
      высокий уровень, чтобы она не ушла под меню
   ====================================================== */
.custom-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
}

/* Предположим, нижнее меню — #maximenuck113, .bottom-menu или схожий селектор,
   сделаем его ниже по z-index */
#maximenuck113,
.bottom-menu {
  position: relative !important;
  z-index: 500 !important;
}

/* ======================================================
   2) ПОВТОРИМ MOBILE-СТЕКАНИЕ ДЛЯ ЛАНДШАФТА
   ====================================================== */
/* Если устройство в ландшафтной ориентации и
   ширина экрана не слишком велика */
@media (orientation: landscape) and (max-width: 1024px),
       (max-width: 768px) {
  /* Страница как на узком экране: колонки → колонка */
  #mod-custom121 .custom-header .header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding-block: 1rem !important;
    overflow: visible !important;
  }

  /* Убедимся, что логотип тоже масштабируется */
  #mod-custom121 .custom-header .logo-wrapper {
    width: clamp(40px, 15vw, 100px) !important;
  }
  #mod-custom121 .custom-header .logo-wrapper img {
    width: 100% !important;
    height: auto !important;
  }

  /* Отодвигаем следующий блок от шапки, чтобы не было наложения */
  #mod-custom121 .custom-header + * {
    margin-top: clamp(1rem, 5vh, 2rem) !important;
  }
}





/* ========== MOBILE COMPANY-NAME OVERRIDE ========== */
@media (max-width: 768px) {
  /* Точный селектор под ваш модуль */
  #mod-custom121 .custom-header .company-name {
    /* минимум 14px, динамика 5vw, максимум 20px */
    font-size: clamp(14px, 5vw, 20px) !important;
    line-height: 1.2 !important;
    white-space: normal !important; /* разрешаем перенос, если строка слишком длинная */
  }
}


/* ===================================================
   MOBILE STACKED LAYOUT: header-inner → column
   =================================================== */
@media (max-width: 768px) {
  /* 1) Сбрасываем grid и превращаем header-inner в колонку */
  #mod-custom121 .custom-header .header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding-block: 1rem !important;
    /* убираем возможные fixed-width/overflow */
    width: 100% !important;
    overflow: visible !important;
  }

  /* 2) Контейнер с горизонтальными отступами */
  #mod-custom121 .custom-header .container {
    padding: 0 1rem !important;
  }

  /* 3) Каждый блок — 100% по ширине и центр внутри */
  #mod-custom121 .custom-header .header-left,
  #mod-custom121 .custom-header .header-center,
  #mod-custom121 .custom-header .header-right {
    width: 100% !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  /* 4) Отступы между зонами */
  #mod-custom121 .custom-header .header-center {
    margin: 1rem 0 !important;
  }
  #mod-custom121 .custom-header .header-right {
    margin-top: 1rem !important;
  }

  /* 5) Логотип адаптивный фикс */
  #mod-custom121 .custom-header .logo-wrapper {
    width: clamp(40px, 20vw, 100px) !important;
    margin: 0 auto !important;
  }
  #mod-custom121 .custom-header .logo-wrapper img {
    width: 100% !important;
    height: auto !important;
  }
}




/* 1) Убираем всякую “плюшку” слева */
.custom-header .container {
  /* уменьшили паддинг слева до нуля–20px */
  padding-left: clamp(0px, 2vw, 20px) !important;
}

/* 2) Если нужен дополнительный вынос лого за контейнер — только НЕ на главной */
.custom-header .header-left {
  margin-left: 0 !important; /* по умолчанию: выравниваем по сетке */
}

/* Только для внутренних страниц — выносим лого влево */
body:not(.itemid-101) .custom-header .header-left {
  margin-left: -50px !important;
}




.custom-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;  /* отступ между лого и названием */
  
  /* увеличенный адаптивный зазор до центра */
  margin-right: clamp(32px, 10vw, 128px) !important;
}






/* Базовая обёртка */
.custom-header {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Центрирующий контейнер */
.custom-header .container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Grid-разметка шапки */
.custom-header .header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;       /* расстояние между зонами */
  height: 80px;    /* по необходимости */
}

/* LEFT: Логотип + название */
.custom-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* CENTER: Телефон по центру сетки */
.custom-header .header-center {
  justify-self: center;
}

/* RIGHT: Кнопка справа */
.custom-header .header-right {
  justify-self: end;
}

/* Логотип */
.custom-header .logo img {
  max-height: 60px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Название с градиентом + shimmer */
.custom-header .company-name {
  font-size: 34px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: linear-gradient(90deg, #fff 25%, #c0d6ff 50%, #fff 75%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent !important;
  animation: shimmer 8s infinite linear;
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Телефон */
.custom-header .phone {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

/* Кнопка */
.custom-header .btn-quote {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  color: #222;
  text-decoration: none;
  border-radius: 4px;
}

/* М*


.brand-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.navbar-brand {
  width: 100%;
  display: flex;
  justify-content: center; /* по центру по горизонтали */
  align-items: center;     /* по центру по вертикали (если нужно) */
  text-align: center;
}

.brand-logo {
  display: block;
  max-width: 100%;
}

.brand-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Обёртка шапки */
.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 20px;
}

/* Логотип: тянется, центрируется */
.header-logo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Контейнер логотипа */
.header-logo {
  flex: 1 1 auto;
  text-align: center;
}

/* Кнопка */
.quote-button {
  flex: 0 0 auto;
}

/* Адаптация на малых экранах */
@media (max-width: 768px) {
  .header-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .quote-button {
    margin-top: 10px;
    order: 2;
  }
  .header-logo {
    order: 1;
  }
}

/* 1. Сужаем область контента блога */
.blog-featured .item-content {
  max-width: 1200px;           /* подберите своё значение */
  margin: 0 auto;             /* центрируем внутри родителя */
  padding: 0 15px;            /* отступы слева-справа */
  box-sizing: border-box;     /* чтобы padding не “ломал” ширину */
}

/* 2. На всякий случай — картинки тоже влезают по ширине */
.blog-featured .item-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}





/* Универсальная 3D-рамка для основного контент-блока на всех страницах */
.container-component > main > div {
  position: relative !important;
  background-color: #fafafa !important;
  padding: 1.5em !important;
  border: 2px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow:
    4px 4px 6px rgba(0,0,0,0.2),
   -4px -4px 6px rgba(0,0,0,0.2),
    4px -4px 6px rgba(0,0,0,0.15),
   -4px  4px 6px rgba(0,0,0,0.15) !important;
  z-index: 0;
}

/* Чтобы всё, что внутри блока, рисовалось поверх рамки */
.container-component > main > div > * {
  position: relative !important;
  z-index: 1 !important;
}





/* 1) Сделаем контейнер main флексом и центрируем внутри него всё содержимое */
.grid-child.container-component > main {
  display: flex;
  justify-content: center; /* по горизонтали */
  /* align-items: center; */ /* по вертикали, если нужно */
}

/* 2) Ограничим ширину самой формы и дадим ей margin:auto */
.convertforms.wrapper-static.view-form {
  width: 100%;
  max-width: 600px;      /* или ваше значение */
  margin: 0 auto;        /* центрирование, если не используете flex */
}

/* 3) Если внутри есть ещё обёртка cf-form-wrap, тоже можно сузить её */
.convertforms .cf-form-wrap {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}


/* 1) Снимаем фон у cf-form-wrap */
.convertforms .cf-form-wrap {
  background-color: transparent !important;
}

/* 2) Затеняем контейнер формы целиком */
#cf_2, 
.convertforms.wrapper-static.view-form {
  background-color: #1e73be !important;  /* ваш цвет */
  padding: 20px !important;              /* чтоб поля не прилегали вплотную */
  border-radius: 6px !important;
  box-shadow:
    4px 4px 8px rgba(0,0,0,0.2),
   -4px -4px 8px rgba(0,0,0,0.2),
    4px -4px 8px rgba(0,0,0,0.15),
   -4px  4px 8px rgba(0,0,0,0.15) !important;
}

/* Меняем цвет мигающего текстового курсора (caret) на чёрный */
.convertforms .cf-form-wrap input,
.convertforms .cf-form-wrap textarea {
  caret-color: #000 !important;
}

/* Делаем названия (лейблы) полей жирнее */
.convertforms .cf-form-wrap label,
.convertforms .cf-form-wrap .cf-field-label {
  font-weight: 700 !important;   /* или bold */
}

/* Если у вас есть заголовки внутри .cf-form-wrap */
.convertforms .cf-form-wrap h3,
.convertforms .cf-form-wrap h4 {
  font-weight: 700 !important;
}


/* Усиленная кнопка Send */
.cf-btn.cf-width-auto {
  display: block !important;
  margin: 2.5em auto 0 !important;              /* чуть больше отступ сверху */
  padding: 18px 54px !important;                /* увеличенные внутренние отступы */
  font-size: 1.4rem !important;                 /* крупный текст */
  font-weight: 700 !important;                  /* жирнее */
  background: linear-gradient(145deg, #ffffff, #f4f4f4) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 60px !important;               /* супер-скругление */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

/* Сильный эффект при наведении */
.cf-btn.cf-width-auto:hover {
  transform: translateY(-6px) scale(1.08) !important;  
  box-shadow: 0 12px 24px rgba(0,0,0,0.25) !important;
  background: linear-gradient(145deg, #ededed, #ffffff) !important;
  cursor: pointer !important;
}

/* Эффект «нажатия» */
.cf-btn.cf-width-auto:active {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* Поднимаем кнопку ближе к полю */
.cf-btn.cf-width-auto {
  /* Было margin: 2.5em auto 0; — сделаем поменьше */
  margin: 1em auto 0 !important;
}





/* Светло-серый фон для всего сайта */
html,
body {
  background-color: #f0f0f0 !important;
}

/* На всякий случай для контейнера шаблона */
.site,
.wrapper-static {
  background-color: transparent !important;
}






/* обёртка для кнопки */
.quote-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px 0 20px;
}

/* сама кнопка Request a Quote */
.quote-btn {
  background-color: #ffc107;
  color: #000;
  padding: 5px 20px;
  font-size: 16px;
  text-decoration: none;
  border-radius: 6px;
  display: inline-block; /* чтобы паддинги работали корректно */
}

/* при ховере, если нужно */
.quote-btn:hover {
  opacity: 0.9;
}

/* === Базовые стили для кнопки === */
.quote-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 10px 20px 0 20px !important;
}

.quote-btn {
  background-color: #ffc107 !important;
  color: #000 !important;
  padding: 5px 20px !important;
  font-size: 16px !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

/* === Медиазапрос для мобильных (ширина ≤767px) === */
@media only screen and (max-width: 767px) {
  .quote-wrapper {
    padding: 8px 15px 0 15px !important;
  }
  .quote-btn {
    padding: 4px 12px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
  }
}

@keyframes slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

/* фон-баннер будет медленно «подъезжать» */
.container-banner img {
  animation: slow-zoom 20s ease-in-out infinite alternate;
  width: 100%;
  height: auto;
}

/* Основной текст пунктов меню — тёмно-синий */
#maximenuck113 ul.maximenuck > li > a {
  color: #002433 !important;  /* ваш корпоративный синий */
}

/* Текст пунктов подменю — тот же синий */
#maximenuck113 ul.maximenuck ul.submenu > li > a {
  color: #002433 !important;
}

/* Если нужно, чтобы и при наведении оставался синим (без смены на другой цвет) */
#maximenuck113 ul.maximenuck > li > a:hover,
#maximenuck113 ul.maximenuck ul.submenu > li > a:hover {
  color: #002433 !important;
}

/* Фон подменю — белый */
#maximenuck113 ul.maximenuck ul.submenu {
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; /* лёгкая тень для отделения */
}

/* Пункты подменю — тёмно-синий текст */
#maximenuck113 ul.maximenuck ul.submenu > li > a {
  color: #002433 !important;
}





/* 1. Убедимся, что пункты — inline-block, и фон всегда прозрачный */
#maximenuck113 ul.maximenuck > li > a {
  display: inline-block !important;
  background: transparent !important;
  transition: transform 0.2s ease, font-size 0.2s ease !important;
}

/* 2. Снимаем фон у вложенных спанов на hover/active */
#maximenuck113 ul.maximenuck > li.current > a,
#maximenuck113 ul.maximenuck > li > a:hover {
  background: transparent !important;
}
#maximenuck113 ul.maximenuck > li > a:hover * {
  background: transparent !important;
}

/* 3. Умеренный эффект при hover */
#maximenuck113 ul.maximenuck > li > a:hover {
  transform: scale(1.05) !important;
}

/* 4. Немного меньший размер шрифта при hover/active */
#maximenuck113 ul.maximenuck > li > a:hover,
#maximenuck113 ul.maximenuck > li.current > a {
  font-size: 15px !important;
}





/* Активный пункт — белый текст */
#maximenuck113 ul.maximenuck > li.current > a,
#maximenuck113 ul.maximenuck > li.current > a *,
#maximenuck113 ul.maximenuck > li.current > a span {
  color: #ffffff !important;
}



/* 1) Задаём базовый размер и плавный переход */
#maximenuck113 ul.maximenuck2 li > a .titreck-title {
  font-size: 16px !important;                /* исходный размер */
  transition: font-size 0.2s ease !important;
}

/* 2) При наведении на пункт — увеличиваем шрифт */
#maximenuck113 ul.maximenuck2 li:hover > a .titreck-title {
  font-size: 18px !important;                /* новый размер */
}



/* Сделаем стрелки у пунктов с подпунктами тёмно-синими */

/* Для уровня 1 */
#maximenuck113 ul.maximenuck > li.parent > a::after {
  color: #002433 !important;             /* цвет иконки */
  border-top-color: #002433 !important;  /* если используется CSS-треугольник */
}

/* Для подпунктов (уровень 2) */
#maximenuck113 ul.maximenuck ul.submenu > li.parent > a::after {
  color: #002433 !important;
  border-top-color: #002433 !important;
}






/* ========== 1. Основные стили шапки ========== */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(0, 24, 45, 0.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 1000;
}

/* Контейнер */
.site-header .header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  flex-wrap: wrap;
}

/* Логотип */
.site-header .logo img {
  height: 48px;
  max-width: 100%;
  display: block;
}

/* Информация (название + телефон) */
.site-header .header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 1.5rem;
}
.site-header .company-name {
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.site-header .phone {
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  color: #FFC107;
  margin-top: 0.3rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-header .phone:hover {
  color: #FFD746;
}

/* Кнопка Request a Quote */
.site-header .btn-quote {
  background-color: #FFC107;
  color: #002433;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.site-header .btn-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  background-color: #e6b008;
}

/* ========== 2. Адаптивные стили ========== */
@media (max-width: 768px) {
  .site-header .header-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .site-header .header-info {
    margin: 0 !important;          /* было 0.75rem 0 */
    align-items: center !important;
    gap: 2px !important;           /* добавляем плотный зазор внутри */
  }
  .site-header .btn-quote {
    margin-top: 2px !important;    /* было 0.75rem */
  }
}




.site-header {
  position: relative;
  width: 100vw;
  left: calc(50% - 50vw);
  right: auto;
}
html, body {
  overflow-x: hidden;
}
.site-header {
  background: #122955 !important;
}






/* Вся полоса шапки — элементы в одну строку, без переносов */
.site-header .header-inner{
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
  flex-wrap:nowrap !important;     /* ничего не переносим */
}

/* Логотип побольше */
.site-header .logo img{
  height:64px !important;
  width:auto !important;
  display:block !important;
}

/* Блок с названием и телефоном — тоже в одну строку */
.site-header .header-info{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:24px !important;             /* расстояние между названием и телефоном */
  white-space:nowrap !important;   /* запрет переносов внутри */
  margin-left:16px !important;     /* отступ от логотипа */
  flex:1 1 auto !important;        /* занимает свободное пространство */
  justify-content:center !important;/* центрируем группу "название+телефон" */
}

/* Текстовые элементы — без переносов */
.site-header .company-name,
.site-header .phone{
  white-space:nowrap !important;
  display:inline-block !important;
  margin:0 !important;
}

/* Кнопка — всегда у правого края */
.site-header .btn-quote{
  margin-left:auto !important;     /* уводит кнопку вправо */
  flex:0 0 auto !important;
}

/* Адаптив: на узких экранах разрешаем перенос в столбик */
@media (max-width: 900px){
  .site-header .header-inner{ flex-wrap:wrap !important; }
  .site-header .header-info{
    order:2; flex:1 1 100% !important; justify-content:center !important; gap:10px !important;
  }
  .site-header .btn-quote{ order:3; margin-left:0 !important; }
  .site-header .logo{ order:1; }
  .site-header .logo img{ height:48px !important; }
}


/* 1) Убираем общий разрыв между элементами строки */
.site-header .header-inner { gap: 32 !important; }

/* 2) Сдвигаем ЛОГО вправо, но держим маленький зазор до названия */
.site-header .logo {
  padding-left: 24px !important;   /* сдвиг вправо (подберите 16–32px) */
  margin-right: 8px !important;    /* минимальный зазор до названия */
  flex-shrink: 0 !important;
}

/* 3) Прижимаем НАЗВАНИЕ ближе к лого */
.site-header .header-info {
  margin-left: 0 !important;       /* убираем возможный отступ слева */
  gap: 12px !important;            /* расстояние между названием и телефоном */
}

/* На всякий случай убираем внутренние отступы у названия */
.site-header .company-name { margin: 0 !important; }


.site-header .header-info {
  display: flex !important;
  gap: 2px !important; /* компактный зазор */
}




/* Базовый стиль ссылки телефона */
.site-header .phone {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease !important;
}

/* Эффект при наведении */
.site-header .phone:hover {
  color: #ffc107 !important; /* жёлтый */
  text-shadow: 0 0 6px rgba(255, 193, 7, 0.6) !important;
  transform: scale(1.05); /* лёгкое увеличение */
}


@media (max-width: 768px) {
  /* 1) Снимаем прежние отступы, если они мешают */
  body.itemid-101 header.header .phone,
  body.itemid-101 header.header .btn-quote {
    margin: 0 !important;
  }

  /* 2) Центрируем кнопки внутри шапки */
  body.itemid-101 header.header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem; /* расстояние между кнопками, можно подкорректировать */
  }
}





/* ==== Ещё более компактный шрифт для основных пунктов MaxiMenu ==== */
#maximenuck113 ul.maximenuck > li > a {
  font-size: clamp(12px, 1vw, 14px) !important;
}


/* ==== Уменьшаем размер шрифта названия компании ==== */
#mod-custom121 .custom-header .company-name {
  /* минимум 16px, идеал — 1.8% ширины экрана, максимум 28px */
  font-size: clamp(16px, 1.8vw, 28px) !important;
  line-height: 1.2 !important;
}



/* ==== Предотвращаем перенос текста в кнопке «Request a Quote» ==== */
#mod-custom121 .custom-header .btn-quote {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: none !important;
}


/* ==== На десктопе: заставляем шапку и телефон оставаться в одну строку ==== */
@media (min-width: 769px) {
  /* 1) header-inner — flex без переноса */
  #mod-custom121 .custom-header .header-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* 2) Центр блока (телефон) не сжимается */
  #mod-custom121 .custom-header .header-center {
    flex-shrink: 0 !important;
  }
  /* 3) Телефон — без переноса и с чуть более компактным фоном */
  #mod-custom121 .custom-header .phone {
    white-space: nowrap !important;
    padding: clamp(4px, 1vh, 6px) clamp(6px, 2vw, 12px) !important;
  }
}


/* ==== Подгоняем фон под размер номера: чуть больше текста ==== */
#mod-custom121 .custom-header .phone {
  /* вертикальный отступ небольшой, горизонтальный — чуть больше текста */
  padding: clamp(4px, 1vh, 8px) clamp(8px, 3vw, 16px) !important;
}


/* Увеличиваем максимальный отступ между телефоном и кнопкой вдвое */
#mod-custom121 .custom-header .btn-quote {
  margin-left: clamp(16px, 5vw, 150px) !important;
}


/* ==== Убираем старый фон и задаём яркий градиент для телефона ==== */
#mod-custom121 .custom-header .phone {
  background: linear-gradient(
    90deg,
    #FFEB3B 0%,   /* более яркий жёлтый */
    #FFC107 100%
  ) !important;
  color: #002433 !important;        /* оставляем контрастный текст */
  transition: background 0.3s ease, transform 0.2s ease !important;
}

/* ==== Применяем такой же фон к кнопке Request a Quote ==== */
#mod-custom121 .custom-header .btn-quote {
  background: linear-gradient(
    90deg,
    #FFEB3B 0%,
    #FFC107 100%
  ) !important;
  color: #002433 !important;
  transition: background 0.3s ease, transform 0.2s ease !important;
}

/* ==== Лёгкий эффект «подпрыгивания» на hover для обоих ==== */
#mod-custom121 .custom-header .phone:hover,
#mod-custom121 .custom-header .btn-quote:hover {
  transform: translateY(-2px) !important;
}



@media (max-width: 768px) {
  /* 1) Сброс высоты и колонковая вёрстка для шапки */
  header.container-header.full-width .header-inner {
    height: auto !important;               /* отменяем жесткие 80px */
    display: flex !important;
    flex-direction: column !important;     /* логотип → телефон → кнопка */
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 1rem 0 !important;
  }

  /* 2) Центрируем сами блоки внутри шапки */
  header.container-header.full-width .header-left,
  header.container-header.full-width .header-center,
  header.container-header.full-width .header-right {
    margin: 0 auto !important;
  }

 
  
  
 @media (max-width: 768px) {
  /* Контейнер шапки: строго колонкой и без внутренних gap */
  .site-header .header-inner,
  header.container-header.full-width .header-inner,
  .custom-header .header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    height: auto !important;
  }

  /* Обнуляем внешние отступы у прямых детей, потом даем минимальный интервал */
  .site-header .header-inner > *,
  header.container-header.full-width .header-inner > *,
  .custom-header .header-inner > * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }
  .site-header .header-inner > * + *,
  header.container-header.full-width .header-inner > * + *,
  .custom-header .header-inner > * + * {
    margin-top: 1px !important; /* регулируйте 2–6px под вкус */
  }
}




  /* ===== Center the 3 header blocks on ALL pages ===== */

/* 1) Делаем единый flex-ряд по центру (перебиваем grid/старые правила) */
.custom-header .header-inner,
.site-header .header-inner,
header.container-header.full-width .header-inner {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;  /* центрируем группу из трёх блоков */
  align-items: center !important;
  gap: 8px !important;                 /* умеренный зазор между блоками */
  text-align: center !important;       /* центр текста внутри */
}

/* 2) Убираем «растягивания» и авто-сдвиги у самих блоков */
.custom-header .header-left,
.custom-header .header-center,
.custom-header .header-right,
.site-header .header-left,
.site-header .header-center,
.site-header .header-right,
header.container-header.full-width .header-left,
header.container-header.full-width .header-center,
header.container-header.full-width .header-right {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Частые мешающие правила — обнуляем */
.site-header .header-info {
  margin: 0 !important;
  gap: 4px !important;  /* компактнее внутри блока с названием/телефоном */
}
.site-header .btn-quote,
.custom-header .btn-quote,
header.container-header.full-width .btn-quote {
  margin-left: 0 !important;  /* убираем «уход вправо» */
}

/* 4) Мобильная колонка — всё по центру и ещё плотнее */
@media (max-width: 768px) {
  .custom-header .header-inner,
  .site-header .header-inner,
  header.container-header.full-width .header-inner {
    flex-direction: column !important;  /* логотип/название → телефон → кнопка */
    gap: 4px !important;                /* уменьшенный вертикальный интервал */
    padding: 8px 0 !important;
  }
}



/* === Правим выравнивание на планшетах (769–1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
  .custom-header .header-inner,
  .site-header .header-inner,
  header.container-header.full-width .header-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .custom-header .header-left,
  .custom-header .header-center,
  .custom-header .header-right {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .custom-header .logo,
  .site-header .logo {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .custom-header .logo img,
  .site-header .logo img {
    margin: 0 auto !important;
    display: block !important;
  }
}



  
/* Отключаем left и устанавливаем right */
.banner-menu-absolute {
  left: auto !important;
  right: 300px !important;  /* подберите своё значение */
}
  
  
  
  /* === Размер шрифта меню === */
.banner-menu-absolute ul.mod-menu li > a {
  font-size: 1.1rem;              /* базовый размер, можно поставить 1.2rem или px */
  transition: transform 0.2s ease, color 0.2s ease;
}

/* === Эффект при наведении === */
.banner-menu-absolute ul.mod-menu li > a:hover {
  transform: scale(1.2);          /* увеличиваем на 20% */
  color: #154fb2 !important;      /* новый цвет текста, подберите свой */
}


  
  
/* Везде — сплошной фон подменю */
.dropdown-menu,
.mod-menu__sub {
  background: #fff !important;                 /* белый, без прозрачности */
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}


  
  
  
  
  
  
  
  
  /* Синие буквы внутри подменю (если нужно усилить цвет) */
.dropdown-menu li a,
.mod-menu__sub li a {
  color: #0056b3 !important;
}

/* При наведении — чуть более заметный фон */
.dropdown-menu li a:hover,
.mod-menu__sub li a:hover {
  background-color: rgba(0, 123, 255, 0.2) !important;
}
  
  
  
  
  
  /* Эффект пульсирующей подсветки для названия компании */
.custom-header .company-name {
  /* Убираем предыдущий градиент */
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important; /* чистый белый текст */

  /* Базовое свечение */
  text-shadow: 0 0 8px rgba(192, 214, 255, 0.6),
               0 0 16px rgba(192, 214, 255, 0.4);

  /* Плавный цикл анимации */
  animation: highlight 3s infinite ease-in-out alternate;
}

/* Ключевые кадры пульсации */
@keyframes highlight {
  from {
    text-shadow: 0 0 4px rgba(192, 214, 255, 0.3),
                 0 0 8px rgba(192, 214, 255, 0.2);
  }
  to {
    text-shadow: 0 0 16px rgba(192, 214, 255, 0.8),
                 0 0 32px rgba(192, 214, 255, 0.6);
  }
}


  
  
  /* === Базовая сетка для header-inner === */
#mod-custom121 .custom-header .header-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 84px;
}

/* Логотип + название слева */
#mod-custom121 .custom-header .header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Центрируем Give us a call */
#mod-custom121 .custom-header .header-center {
  display: flex;
  justify-content: center;
}

/* Request a Quote справа */
#mod-custom121 .custom-header .header-right {
  display: flex;
  justify-content: flex-end;
}

/* Адаптив для мобильных — колоночная верстка */
@media (max-width: 768px) {
  #mod-custom121 .custom-header .header-inner {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-height: unset;
  }
  #mod-custom121 .custom-header .header-left,
  #mod-custom121 .custom-header .header-center,
  #mod-custom121 .custom-header .header-right {
    justify-content: center;
    margin: 0;
  }
}

/* === Логотип корректно сжимается === */
#mod-custom121 .custom-header .logo-wrapper {
  width: clamp(40px, 16vw, 90px);
}
#mod-custom121 .custom-header .logo-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* === Название компании — шрифт и градиент/свечение === */
#mod-custom121 .custom-header .company-name {
  font-size: clamp(17px, 2vw, 30px);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(192,214,255,0.5), 0 2px 12px rgba(30,80,180,0.07);
  animation: highlight 3s infinite ease-in-out alternate;
}
@keyframes highlight {
  from { text-shadow: 0 0 4px #c0d6ff33, 0 2px 10px #1e50b22a; }
  to   { text-shadow: 0 0 16px #c0d6ffdd, 0 4px 20px #1e50b244; }
}

/* === Телефон — объёмная кнопка === */
#mod-custom121 .custom-header .phone {
  display: inline-block;
  padding: 0.6em 1.3em;
  font-size: 1.08em;
  font-weight: 600;
  color: #002433 !important;
  background: linear-gradient(180deg, #fff 80%, #e7e7e7 100%);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1.5px 0 rgba(255,255,255,0.6) inset;
  border: 1px solid #e4e4e4;
  text-decoration: none;
  transition: box-shadow 0.17s, background 0.17s, transform 0.13s;
  transform: translateY(2px);
}
#mod-custom121 .custom-header .phone:hover {
  background: linear-gradient(180deg, #f7f7f7 80%, #e3e3e3 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,0.13), 0 2px 0 rgba(255,255,255,0.77) inset;
  transform: translateY(0);
}
#mod-custom121 .custom-header .phone:active {
  transform: translateY(4px);
  box-shadow: 0 1.5px 3px rgba(0,0,0,0.11), 0 1px 0 rgba(255,255,255,0.65) inset;
}

/* === Request a Quote — стиль яркой кнопки === */
#mod-custom121 .custom-header .btn-quote {
  display: inline-block;
  padding: 0.58em 1.3em;
  background: linear-gradient(90deg, #FFEB3B 0%, #FFC107 100%);
  color: #002433 !important;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.13);
  text-decoration: none;
  font-size: 1.07em;
  border: none;
  transition: background 0.16s, transform 0.14s;
}
#mod-custom121 .custom-header .btn-quote:hover {
  background: linear-gradient(90deg, #ffe066 0%, #ffd10b 100%);
  transform: translateY(-2px) scale(1.04);
}
#mod-custom121 .custom-header .btn-quote:active {
  transform: translateY(2px) scale(0.98);
}

/* === Убираем лишние отступы, делаем header компактным === */
#mod-custom121 .custom-header {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #122955;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 1000;
}
#mod-custom121 .custom-header .container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

  
  /* Насколько top-a должен залезать на баннер */
:root { --hero-overlap: clamp(360px, 16vw, 560px); }

/* 1) Резервируем место под налезание, чтобы сетка не «прыгала» */
body.itemid-101 .container-banner{
  position: relative;                     /* баннер и так блочный, просто страхуемся */
  padding-bottom: var(--hero-overlap) !important;
  overflow: visible !important;
}

/* 2) Поднимаем ВЕСЬ блок top-a в потоке (без transform) */
body.itemid-101 .grid-child.container-top-a{
  position: relative;                     /* по умолчанию он relative — ок */
  margin-top: calc(-1 * var(--hero-overlap)) !important;
  z-index: 9000;                          /* оставь ниже меню на баннере */
}

/* 3) Если ранее поднимали только модуль — выключаем transform */
body.itemid-101 #mod-custom135{
  transform: none !important;
}

/* 4) На мобилках перекрытие не нужно */
@media (max-width: 992px){
  :root { --hero-overlap: 0px; }
}