/*
========================================================================
   NEW COMBINED STYLES

   Оглавление:

   01. ШРИФТЫ

   02. Общие элементы сайта
       - Mobile / desktop menu
       - Header messenger icons and top button
       - Shared content and breadcrumbs container
       - TG Reviews carousel controls
       - Utility links and full-width button helper
       - CTA / lead form
       - FAQ accordion

   03. Pages
       - Hero typography and HTML hero
       - Page typography
       - Page buttons
       - Tables, schematic blocks and images
       - YouTube video preview

   04. Posts
       - Post title, subtitle and tags
       - Post header layout
       - Post / page content body
       - Custom lists and featured image radius
========================================================================
*/

/*
========================================================================
   01. ШРИФТЫ
========================================================================
*/
.reloc-h1,
.reloc-h2,
.reloc-h3,
.reloc-h4,
.reloc-h5,
.reloc-h6,
.reloc-p,
.reloc-text-small,
.reloc-text-tiny {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    color: #000000;
}

.reloc-h1 {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.reloc-h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

.reloc-h3 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.reloc-h4 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

.reloc-h5 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

.reloc-h6 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.reloc-p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
}

.reloc-text-small {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
}

.reloc-text-tiny {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
}

/* Tablet: 640–1439px */
@media (min-width: 640px) and (max-width: 1439px) {
    .reloc-h1 {
        font-size: 56px;
    }

    .reloc-h2 {
        font-size: 40px;
    }

    .reloc-h3 {
        font-size: 34px;
    }

    .reloc-h4 {
        font-size: 26px;
    }

    .reloc-h5 {
        font-size: 20px;
    }

    .reloc-h6 {
        font-size: 16px;
    }

    .reloc-p {
        font-size: 18px;
    }

    .reloc-text-small {
        font-size: 16px;
    }

    .reloc-text-tiny {
        font-size: 14px;
    }
}

/* Mobile: <640px */
@media (max-width: 639px) {
    .reloc-h1 {
        font-size: 40px;
    }

    .reloc-h2 {
        font-size: 28px;
    }

    .reloc-h3 {
        font-size: 24px;
    }

    .reloc-h4 {
        font-size: 22px;
    }

    .reloc-h5 {
        font-size: 20px;
    }

    .reloc-h6 {
        font-size: 16px;
    }

    .reloc-p {
        font-size: 16px;
    }

    .reloc-text-small {
        font-size: 14px;
    }

    .reloc-text-tiny {
        font-size: 12px;
    }
}

/*
========================================================================
   02. ОБЩИЕ ЭЛЕМЕНТЫ
========================================================================
*/

/************************ ВЕРХНЕЕ МЕНЮ ************************/
/* Контейнер */
#reloc-topmenu {
  box-sizing: border-box;

  /*
   * ВАЖНО:
   * absolute вместо fixed.
   * Плашка находится поверх страницы,
   * но прокручивается вместе с ней.
   */
   
  position: fixed;
  top: 20px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 9999;

  width: 1316px;
  max-width: 1316px;
  height: 58px;

  margin: 0;

  padding: 10px 6px 10px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgb(73 73 73 / 60%);

  border: 1px solid rgb(217 217 217 / 10%);
  border-radius: 20px;

  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
}

/* Лого в контейнере */
#reloc-topmenu-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  margin-right: 12px;

  line-height: 0;
  text-decoration: none;
}

#reloc-topmenu-logo img {
  display: block;

  width: 48px;
  height: 48px;
  max-width: none;

  object-fit: contain;
}

/* =========================================================
   DESKTOP MENU ONLY — >= 1440px
========================================================= */
@media (min-width: 1440px) {

/* =========================================================
   TOP MENU — DESKTOP NAV
   Верхний уровень Max Mega Menu
========================================================= */

#reloc-topmenu .reloc-topmenu-menu {
  flex: 0 0 auto;

  width: auto;
  min-width: 0;
}

#reloc-topmenu .reloc-topmenu-menu > .elementor-widget-container {
  width: auto;

  margin: 0;
  padding: 0;
}


/* Обёртка Max Mega Menu */

#reloc-topmenu .reloc-topmenu-menu .mega-menu-wrap {
  width: auto;

  margin: 0;
  padding: 0;

  background: transparent;
}


/* UL верхнего уровня */

#reloc-topmenu .reloc-topmenu-menu .mega-menu {
  width: auto;
  height: 41px;

  display: flex;
  align-items: center;
  flex-wrap: nowrap;

  margin: 0;
  padding: 0;

  background: transparent;

  white-space: nowrap;
}


/* LI верхнего уровня */

#reloc-topmenu .reloc-topmenu-menu .mega-menu > li.mega-menu-item {
  height: 41px;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;
}


/* Ссылки верхнего уровня */

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item > a.mega-menu-link {
  box-sizing: border-box;

  height: 41px;

  display: flex !important;
  align-items: center !important;
  gap: 0 !important;

  margin: 0 !important;
  padding: 10px 8px !important;

  background: transparent !important;

  /* Border заранее резервируем,
     чтобы пункт не менял размер при hover */
  border: 1px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;

  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;

  color: #BEBEBE !important;

  text-decoration: none !important;
  white-space: nowrap;
  transition:
  color 0.15s ease,
  background-color 0.15s ease,
  border-color 0.15s ease !important;
}

/* =========================================================
   TOP MENU — DESKTOP NAV CHEVRONS
========================================================= */

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item-has-children
> a.mega-menu-link
> .mega-indicator {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;

  display: inline-block !important;

  margin: 0 0 0 2px !important;
  padding: 0 !important;

  font-size: 0 !important;
  line-height: 0 !important;

  /* Цвет default */
  background-color: #BEBEBE !important;

  /* Оригинальный дизайнерский chevron */
  -webkit-mask-image: url("https://relocationde.com/wp-content/uploads/2026/09/chevron_down.svg");
  mask-image: url("https://relocationde.com/wp-content/uploads/2026/09/chevron_down.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
}


/* Убираем штатную графику Max Mega Menu */

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item-has-children
> a.mega-menu-link
> .mega-indicator::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   TOP MENU — DESKTOP NAV HOVER / OPEN
========================================================= */

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item-has-children:hover
> a.mega-menu-link,

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item-has-children.mega-toggle-on
> a.mega-menu-link {
  color: #FFFFFF !important;

  /* ВАЖНО:
     типографика вообще не меняется */
  font-weight: 400 !important;
  line-height: 1.3 !important;

  background: #5F5F5F !important;

  border-color: rgb(217 217 217 / 10%) !important;
}


/* DOWN → UP + серый → белый */

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item-has-children:hover
> a.mega-menu-link
> .mega-indicator,

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item-has-children.mega-toggle-on
> a.mega-menu-link
> .mega-indicator {
  background-color: #FFFFFF !important;

  -webkit-mask-image: url("https://relocationde.com/wp-content/uploads/2026/09/chevron_up.svg");
  mask-image: url("https://relocationde.com/wp-content/uploads/2026/09/chevron_up.svg");
}

/* =========================================================
   TOP MENU — DESKTOP NAV HOVER
   Пункты без dropdown
   ========================================================= */

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item:not(.mega-menu-item-has-children)
> a.mega-menu-link:hover,

#reloc-topmenu .reloc-topmenu-menu
.mega-menu > li.mega-menu-item:not(.mega-menu-item-has-children)
> a.mega-menu-link:focus-visible {
  color: #FFFFFF !important;

  background: #5F5F5F !important;

  border-color: rgb(217 217 217 / 10%) !important;
  border-radius: 8px !important;

  font-weight: 400 !important;
  line-height: 1.3 !important;

  text-decoration: none !important;
}

/* =========================================================
   TOP MENU — DESKTOP FLYOUTS
   Раскрывашки меню по умолчанию
========================================================= */

  /* ---------------------------------------------------------
     Родительский пункт
  --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout {
    position: relative !important;
  }


  /* Ссылка родительского пункта держится поверх dropdown.
     Это позволяет визуально соединить обе фигуры. */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > a.mega-menu-link {
    position: relative !important;
    z-index: 2;
  }


  /* В открытом состоянии убираем нижнюю границу
     родительского пункта в месте соединения с dropdown */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout:hover
  > a.mega-menu-link,

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout.mega-toggle-on
  > a.mega-menu-link {
    border-bottom-color: transparent !important;
  }


  /* ---------------------------------------------------------
     Сам dropdown
  --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu {
    box-sizing: border-box !important;

    /*
     Верхний пункт = 41px.
     Заходим под него на 1px, как в language dropdown.
    */
    top: 40px !important;
    z-index: 1 !important;

    /*
     Figma:
     Width = Hug
     Content min-width = 200px
     Padding = 30px

     Для "Бизнес" итоговая ширина будет ≈262px.
     Более длинное меню сможет расшириться само.
    */
    width: max-content !important;
    min-width: 262px !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 30px !important;

    background: #5D5D5E !important;

    border: 0 !important;
    border-top: 1px solid rgb(255 255 255 / 10%) !important;

    border-radius: 0 20px 20px 20px !important;

    box-shadow: none !important;

    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
  }


  /* При открытии прижимаем flyout к левому краю
     родительского пункта */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout:hover
  > ul.mega-sub-menu,

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout.mega-toggle-on
  > ul.mega-sub-menu {
    left: 0 !important;
    right: auto !important;
  }


  /* ---------------------------------------------------------
     Пункты внутри dropdown
  --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item {
    box-sizing: border-box !important;

    width: auto !important;
    min-width: 200px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }


  /* Между строками по геометрии Figma получается 10px */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  + li.mega-menu-item {
    margin-top: 10px !important;
  }


  /* ---------------------------------------------------------
     Ссылки внутри dropdown
     Типографика = reloc-text-tiny desktop
  --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link {
    box-sizing: border-box !important;

    width: max-content !important;
    min-width: 200px !important;

    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    color: #FFFFFF !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: nowrap !important;
	
	transition: color 0.15s ease !important;
  }


  /* Hover пунктов внутри dropdown */

	#reloc-topmenu .reloc-topmenu-menu
	.mega-menu > li.mega-menu-flyout
	> ul.mega-sub-menu
	> li.mega-menu-item
	> a.mega-menu-link:hover,

	#reloc-topmenu .reloc-topmenu-menu
	.mega-menu > li.mega-menu-flyout
	> ul.mega-sub-menu
	> li.mega-menu-item
	> a.mega-menu-link:focus-visible {
	background: transparent !important;
	color: rgb(255 255 255 / 70%) !important;
	text-decoration: none !important;
	}


/* =========================================================
   MEGA MENU — ПРОГРАММЫ
   Верхний блок с тремя колонками
   ========================================================= */


/* ---------------------------------------------------------
   1. ОБЩАЯ ОБОЛОЧКА ВЫПАДАЮЩЕГО МЕНЮ
   --------------------------------------------------------- */

.reloc-menu-programs > .mega-sub-menu {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    padding: 30px !important;

    background: #5D5D5E !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 20px !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
}


/* ---------------------------------------------------------
   2. ВЕРХНЯЯ СТРОКА
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top > .mega-sub-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;

    gap: 30px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   3. ТРИ КОЛОНКИ
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top > .mega-sub-menu > .mega-menu-column {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* внутренний UL каждой колонки */

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column > .mega-sub-menu {
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   4. ГРУППА ВНУТРИ КОЛОНКИ
   Заголовок + дочерние ссылки
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column > .mega-sub-menu > .mega-menu-item {
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   5. ЗАГОЛОВКИ КОЛОНОК
   "По происхождению", "Работа и бизнес", "Другие"
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column > .mega-sub-menu > .mega-menu-item > .mega-menu-link {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 130% !important;
    letter-spacing: 0 !important;

    color: #F74E15 !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   6. СПИСОК ССЫЛОК ВНУТРИ КАЖДОЙ ГРУППЫ
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column
> .mega-sub-menu
> .mega-menu-item
> .mega-sub-menu {
    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   7. ДОЧЕРНИЕ ПУНКТЫ
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column
> .mega-sub-menu
> .mega-menu-item
> .mega-sub-menu
> .mega-menu-item {
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   8. ТЕКСТ ДОЧЕРНИХ ССЫЛОК
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column
> .mega-sub-menu
> .mega-menu-item
> .mega-sub-menu
> .mega-menu-item
> .mega-menu-link {
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 130% !important;
    letter-spacing: 0 !important;

    color: #FFFFFF !important;

    background: transparent !important;
}

/* ---------------------------------------------------------
   9. УБИРАЕМ КАПС У ОРАНЖЕВЫХ ЗАГОЛОВКОВ
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column > .mega-sub-menu > .mega-menu-item > .mega-menu-link {
    text-transform: none !important;
}


/* ---------------------------------------------------------
   10. УБИРАЕМ УГОЛ НА СТЫКЕ С АКТИВНЫМ ПУНКТОМ
   --------------------------------------------------------- */

/* сам пункт "Программы" держим выше выпадашки */
.reloc-menu-programs {
    position: relative;
}

.reloc-menu-programs > .mega-menu-link {
    position: relative;
    z-index: 3;
}

/* чуть поднимаем выпадашку вверх, чтобы не было щели */
.reloc-menu-programs > .mega-sub-menu {
    margin-top: -1px !important;
    border-top-left-radius: 0 !important;
}

/* у открытого пункта убираем нижние скругления,
   чтобы он сросся с выпадашкой */
.reloc-menu-programs.mega-toggle-on > .mega-menu-link,
.reloc-menu-programs:hover > .mega-menu-link {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ---------------------------------------------------------
   11. HOVER ВНУТРЕННИХ ССЫЛОК
   Аналогично стандартным dropdown
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column
> .mega-sub-menu
> .mega-menu-item
> .mega-sub-menu
> .mega-menu-item
> .mega-menu-link {
    transition: color 0.15s ease !important;
}

.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column
> .mega-sub-menu
> .mega-menu-item
> .mega-sub-menu
> .mega-menu-item
> .mega-menu-link:hover,
.reloc-menu-programs
.reloc-mega-programs-top
.mega-menu-column
> .mega-sub-menu
> .mega-menu-item
> .mega-sub-menu
> .mega-menu-item
> .mega-menu-link:focus-visible {
    color: rgb(255 255 255 / 70%) !important;
    background: transparent !important;
    text-decoration: none !important;
}

//* ---------------------------------------------------------
   12. СТРОКИ MEGA MENU + РАЗДЕЛИТЕЛЬ
   --------------------------------------------------------- */

/* Обе строки должны определяться своим содержимым,
   а не растягивать dropdown */
.reloc-menu-programs
.reloc-mega-programs-top,
.reloc-menu-programs
.reloc-mega-programs-bottom {
    box-sizing: border-box;

    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Разделитель ставим НЕ на внешнюю строку,
   а на внутренний контейнер шириной ровно по контенту */

.reloc-menu-programs
.reloc-mega-programs-top > .mega-sub-menu {
    margin: 0 0 16px 0 !important;
    padding: 0 0 16px 0 !important;

    border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
}

/* ---------------------------------------------------------
   13. НИЖНЯЯ СТРОКА MEGA MENU
   Одна колонка Max Mega Menu + собственный flex-контейнер
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-bottom,
.reloc-menu-programs
.reloc-mega-programs-bottom > .mega-sub-menu,
.reloc-menu-programs
.reloc-mega-programs-bottom > .mega-sub-menu > .mega-menu-column,
.reloc-menu-programs
.reloc-mega-programs-bottom
.mega-menu-column > .mega-sub-menu,
.reloc-menu-programs
.reloc-mega-programs-bottom
.mega-menu-column > .mega-sub-menu > .mega-menu-item {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}


/* ---------------------------------------------------------
   14. ВНУТРЕННИЙ FOOTER
   426 + 20 + 214 = 660px
   --------------------------------------------------------- */

.reloc-mega-programs-footer {
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 20px;

    width: auto;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   15. ТЕКСТ СЛЕВА
   --------------------------------------------------------- */

.reloc-mega-programs-question {
    flex: 0 0 426px;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0;

    color: #FFFFFF;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   16. КНОПКА "ПОДОБРАТЬ ПРОГРАММУ"
   --------------------------------------------------------- */

.reloc-mega-programs-button {
    box-sizing: border-box;

    width: 214px;
    height: 48px;
    flex: 0 0 214px;

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

    margin: 0;
    padding: 12px 16px;

    background: #EB1D19;

    border: 0;
    border-radius: 16px;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: 0;

    color: #FFFFFF;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    transition: background-color 0.2s ease;
}

.reloc-mega-programs-button:hover,
.reloc-mega-programs-button:focus-visible {
    background: #D20101;

    color: #FFFFFF;
    text-decoration: none;
}

/* ---------------------------------------------------------
   17. СЛОИ ВЕРХНЕЙ И НИЖНЕЙ СТРОКИ
   Нижняя строка не должна перекрывать ссылки верхней
   --------------------------------------------------------- */

.reloc-menu-programs
.reloc-mega-programs-top {
    position: relative !important;
    z-index: 2 !important;
}

.reloc-menu-programs
.reloc-mega-programs-bottom {
    position: relative !important;
    z-index: 1 !important;
}


/* Ссылки верхнего блока гарантированно принимают курсор */

.reloc-menu-programs
.reloc-mega-programs-top
a.mega-menu-link {
    position: relative !important;
    z-index: 3 !important;

    pointer-events: auto !important;
}

} /* /desktop menu >= 1440px */

/* =========================================================
   TOP MENU — MOBILE STRUCTURE
   < 1440px
========================================================= */

@media (max-width: 1439px) {

  /*
   * Не даём раскрывающемуся мобильному меню участвовать
   * в вертикальном центрировании 58px-плашки.
   */
  #reloc-topmenu .reloc-topmenu-menu {
    position: static !important;
  }

  #reloc-topmenu .reloc-topmenu-menu > .elementor-widget-container {
    position: static !important;
  }

  #reloc-topmenu .reloc-topmenu-menu .mega-menu-wrap {
    position: static !important;
  }

  /*
   * Сам список мобильного меню привязываем к нижнему краю
   * верхней плашки. Display/visibility не задаём — ими
   * продолжает управлять Max Mega Menu и его Slide Down.
   */
  #reloc-topmenu .reloc-topmenu-menu ul.mega-menu {
    position: absolute !important;

    top: 100% !important;

    /*
     * #reloc-topmenu имеет border 1px. Absolute-позиционирование
     * считается от внутренней границы containing block, поэтому
     * Navigation Stack визуально получался на 1px уже с каждой стороны.
     * Выводим его наружу ровно на толщину border.
     */
    left: -1px !important;
    right: -1px !important;
    width: auto !important;

    margin: 0 !important;

    z-index: 10 !important;
  }

}

/* =========================================================
   TOP MENU — ACTIONS
========================================================= */

#reloc-topmenu-actions {
  position: relative;

  width: 556px;
  height: 48px;
  flex: 0 0 556px;

  display: flex;
  align-items: center;
  gap: 10px;

  margin-left: auto;

  white-space: nowrap;
}


/* =========================================================
   ВЫБОР ЯЗЫКА
========================================================= */

#reloc-topmenu-lang {
  position: relative;

  width: 57px;
  height: 41px;
  flex: 0 0 57px;

  margin: 0;
  padding: 0;
}


/* ТЕКУЩИЙ ЯЗЫК */

#reloc-topmenu-lang > summary {
  box-sizing: border-box;

  position: relative;
  z-index: 2;

  width: 57px;
  height: 41px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;

  padding: 10px 8px;

  color: #BEBEBE;

  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;

  cursor: pointer;
  list-style: none;
  user-select: none;

  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

#reloc-topmenu-lang > summary:hover,
#reloc-topmenu-lang > summary:focus-visible,
#reloc-topmenu-lang[open] > summary {
  color: #FFFFFF;
}

#reloc-topmenu-lang > summary::-webkit-details-marker {
  display: none;
}

#reloc-topmenu-lang > summary::marker {
  content: "";
}


/* OPEN / ACTIVE */

#reloc-topmenu-lang[open] > summary {
  background: #5D5D5E;

  border-color: rgb(217 217 217 / 10%);
  border-bottom-color: transparent;

  border-radius: 20px 20px 0 0;
}


/* ШЕВРОН */

.reloc-lang-arrow {
  display: block;

  width: 16px;
  height: 16px;
  flex: 0 0 16px;

  transition: transform 0.2s ease;
}

#reloc-topmenu-lang[open] .reloc-lang-arrow {
  transform: rotate(180deg);
}


/* DROPDOWN */

.reloc-lang-dropdown {
  box-sizing: border-box;

  position: absolute;

  /* На 1px заходим под summary,
     чтобы соединение было бесшовным */
  top: 40px;
  left: 0;
  z-index: 1;

  width: 149px;
  height: 123px;

  display: flex;
  flex-direction: column;
  gap: 19px;

  padding: 10px 8px;

  background: #5D5D5E;

  border: 1px solid rgb(217 217 217 / 10%);
  border-radius: 0 20px 20px 20px;

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}


/* ЯЗЫКИ */

.reloc-lang-dropdown button.reloc-text-small {
  box-sizing: border-box;

  width: 100%;
  height: 21px;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 4px;

  background: transparent;

  color: #FFFFFF;

  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;

  text-align: left;
  text-transform: none !important;

  cursor: pointer;

  transition: color 0.15s ease;
}


/* Hover */

.reloc-lang-dropdown button.reloc-text-small:hover,
.reloc-lang-dropdown button.reloc-text-small:focus-visible {
  background: transparent;

  color: rgb(255 255 255 / 70%);

  outline: none;
}


/* =========================================================
   ТЕЛЕФОН
========================================================= */

#reloc-topmenu-phone {
  width: 156px;
  flex: 0 0 156px;

  display: block;

  color: rgb(255 255 255 / 60%);

  text-decoration: none;

  transition: color 0.15s ease;
}

#reloc-topmenu-phone:hover,
#reloc-topmenu-phone:focus-visible {
  color: #FFFFFF;
}


/* =========================================================
   ИКОНКИ СОЦСЕТЕЙ
========================================================= */

.reloc-topmenu-social {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

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

  border-radius: 16px;

  line-height: 0;
  text-decoration: none;

  transition: background-color 0.2s ease;
}


/* Telegram */

.reloc-topmenu-social--tg {
  background: #2F89CE;
}

.reloc-topmenu-social--tg img {
  display: block;

  width: 20.76px;
  height: 17.2px;
}

.reloc-topmenu-social--tg:hover,
.reloc-topmenu-social--tg:focus-visible {
  background: #2A7CBB;
}


/* WhatsApp */

.reloc-topmenu-social--wa {
  background: #25D366;
}

.reloc-topmenu-social--wa img {
  display: block;

  width: 20.16px;
  height: 20.16px;
}

.reloc-topmenu-social--wa:hover,
.reloc-topmenu-social--wa:focus-visible {
  background: #22C35E;
}

/* =========================================================
   КОНСУЛЬТАЦИЯ
========================================================= */

#reloc-topmenu-cta {
  box-sizing: border-box;

  width: 207px;
  height: 48px;
  flex: 0 0 207px;

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

  padding: 12px 40px;

  background: #EB1D19;

  border-radius: 16px;

  color: #FFFFFF;

  text-align: center;
  text-decoration: none;

  white-space: nowrap;

  transition: background-color 0.2s ease;
}

#reloc-topmenu-cta:hover,
#reloc-topmenu-cta:focus-visible {
  background: #D20101;
  color: #FFFFFF;
  text-decoration: none;
}
/* =========================================================
   TOP MENU — TABLET + MOBILE HEADER
   < 1440px
   ========================================================= */

@media (max-width: 1439px) {

  /* ---------------------------------------------------------
     1. ОБЩАЯ ПЛАШКА
     --------------------------------------------------------- */

  #reloc-topmenu {
    width: calc(100% - 32px);
    max-width: 1316px;
    height: 64px;

    padding: 8px 12px 8px 16px;

    background: rgb(73 73 73 / 60%);

    border: 1px solid rgb(217 217 217 / 10%);
    border-radius: 20px;

    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);

    transition:
      background-color 0.15s ease,
      border-radius 0.15s ease;
  }

  /*
   * Figma: в состоянии Menu Open верхняя плашка становится
   * непрозрачной #494949 и теряет нижние скругления, чтобы
   * Navigation Stack визуально продолжал её как единая карточка.
   */
  #reloc-topmenu:has(.mega-menu-toggle.mega-menu-open) {
    background: #494949;
    border-radius: 20px 20px 0 0;
  }

  /*
   * ВАЖНО: #reloc-topmenu — Elementor e-con-boxed.
   * Реальным flex-контейнером для виджетов является .e-con-inner,
   * поэтому раскладываем LOGO / ACTIONS / MMM именно здесь.
   */
  #reloc-topmenu > .e-con-inner {
    box-sizing: border-box;

    width: 100%;
    max-width: none !important;
    height: 100%;

    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ---------------------------------------------------------
     2. ЛОГО
     --------------------------------------------------------- */

  #reloc-topmenu > .e-con-inner
  > .elementor-element:has(#reloc-topmenu-logo) {
    order: 1;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    flex: 0 0 48px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #reloc-topmenu-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    margin-right: 0;
  }


  /* ---------------------------------------------------------
     3. ACTIONS
     RU + Telegram + WhatsApp + Consultation

     ACTIONS лежит внутри отдельного Elementor HTML-widget.
     Именно его wrapper является flex-элементом .e-con-inner.
     --------------------------------------------------------- */

  #reloc-topmenu > .e-con-inner
  > .elementor-element:has(#reloc-topmenu-actions) {
    order: 2;

    position: static !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;

    flex: 0 0 auto !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  #reloc-topmenu > .e-con-inner
  > .elementor-element:has(#reloc-topmenu-actions)
  > .elementor-widget-container {
    width: auto !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #reloc-topmenu-actions {
    position: static !important;

    width: auto !important;
    height: 48px;
    flex: 0 0 auto !important;

    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Телефон в tablet/mobile header по макету не используется */
  #reloc-topmenu-phone {
    display: none;
  }


  /* ---------------------------------------------------------
     4. КНОПКА «КОНСУЛЬТАЦИЯ»
     --------------------------------------------------------- */

  #reloc-topmenu-cta {
    width: auto;
    height: 48px;
    flex: 0 0 auto;

    padding: 10px 20px;

    border-radius: 16px;
  }


  /* ---------------------------------------------------------
     5. MAX MEGA MENU — TOGGLE
     Обычный flex-элемент сразу после ACTIONS.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu {
    order: 3;

    position: static !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;

    flex: 0 0 48px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu > .elementor-widget-container,
  #reloc-topmenu .reloc-topmenu-menu .mega-menu-wrap {
    position: static !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu .mega-menu-toggle {
    box-sizing: border-box !important;

    position: relative !important;
    inset: auto !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

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

    margin: 0 !important;
    padding: 6px !important;

    background-color: transparent !important;
    background-image: url("https://relocationde.com/wp-content/uploads/2026/10/menu_icon.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;

    border: 1px solid rgb(217 217 217 / 10%) !important;
    border-radius: 16px !important;

    cursor: pointer;
  }

  /* Открытое мобильное меню: hamburger -> X */
  #reloc-topmenu .reloc-topmenu-menu .mega-menu-toggle.mega-menu-open {
    background-image: url("https://relocationde.com/wp-content/uploads/2026/10/close_icon.svg") !important;
  }

  /* Toggle Bar Designer: используем только правый служебный block */
  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu-toggle .mega-toggle-blocks-left,
  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu-toggle .mega-toggle-blocks-center {
    display: none !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu-toggle .mega-toggle-blocks-right {
    width: 100% !important;
    height: 100% !important;

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

    /*
     * Штатную графику MMM делаем невидимой, но служебный блок
     * оставляем кликабельным: на нём может висеть обработчик toggle.
     */
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block {
    margin: 0 !important;
    padding: 0 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:only-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}

/* =========================================================
   TOP MENU — MOBILE HEADER
   < 640px

   375px — контрольный макет Figma, а НЕ отдельный breakpoint.

   Figma mobile:
   - header: Fill / 57px, padding 10px, bottom border 1px
   - logo: 36x36
   - language: 67x31, radius 8px, padding 6px 12px, gap 4px
   - RU: Inter 16 / 600 / 120%, #BEBEBE
   - Telegram / WhatsApp: 36x36, radius 8px
   - messenger glyphs остаются прежних размеров
   - menu / close: 36x36, radius 8px, padding 6px, icon 24x24
   ========================================================= */

@media (max-width: 639px) {

  /* ---------------------------------------------------------
     1. ОБЩАЯ ПЛАШКА
     --------------------------------------------------------- */

  #reloc-topmenu {
    top: 0;

    width: 100%;
    max-width: none;
    height: 57px;

    padding: 10px;

    /* В mobile-компоненте Figma рамка только снизу. */
    border: 0;
    border-bottom: 1px solid rgb(217 217 217 / 10%);
    border-radius: 0;
  }

  /* В открытом состоянии mobile-header тоже без скруглений. */
  #reloc-topmenu:has(.mega-menu-toggle.mega-menu-open) {
    background: #494949;

    /* В открытом mobile-состоянии линию между header и Navigation Stack
       рисует сам Navigation Stack ниже. Сам 1px border сохраняем в box model,
       но делаем прозрачным: так внутренняя высота header не меняется и
       LOGO / ACTIONS / toggle не прыгают по вертикали при open/close. */
    border-bottom-color: transparent;
    border-radius: 0;
  }

  #reloc-topmenu > .e-con-inner {
    gap: 10px !important;
  }


  /* ---------------------------------------------------------
     2. ЛОГО — 36x36
     --------------------------------------------------------- */

  #reloc-topmenu > .e-con-inner
  > .elementor-element:has(#reloc-topmenu-logo) {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  #reloc-topmenu-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  #reloc-topmenu-logo img {
    width: 36px;
    height: 36px;
  }


  /* ---------------------------------------------------------
     3. ACTIONS — RU + TG + WA
     --------------------------------------------------------- */

  #reloc-topmenu > .e-con-inner
  > .elementor-element:has(#reloc-topmenu-actions),
  #reloc-topmenu > .e-con-inner
  > .elementor-element:has(#reloc-topmenu-actions)
  > .elementor-widget-container,
  #reloc-topmenu-actions {
    height: 36px !important;
  }

  #reloc-topmenu-actions {
    gap: 10px;
  }

  /* На mobile кнопки «Консультация» и телефон не используются. */
  #reloc-topmenu-cta,
  #reloc-topmenu-phone {
    display: none;
  }


  /* ---------------------------------------------------------
     4. ЯЗЫК — 67x31
     --------------------------------------------------------- */

  #reloc-topmenu-lang {
    width: 67px;
    height: 31px;
    flex: 0 0 67px;
  }

  #reloc-topmenu-lang > summary {
    width: 67px;
    height: 31px;

    gap: 4px;
    padding: 6px 12px;

    border: 0;
    border-radius: 8px;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;

    color: #BEBEBE;
  }

  #reloc-topmenu-lang[open] > summary {
    border-radius: 8px 8px 0 0;
  }

  .reloc-lang-arrow {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  /* Подгоняем существующий language dropdown к новой высоте summary. */
  .reloc-lang-dropdown {
    top: 30px;
    border-radius: 0 8px 8px 8px;
  }


  /* ---------------------------------------------------------
     5. TELEGRAM / WHATSAPP — 36x36
     Внутренние SVG по Figma остаются прежних размеров.
     --------------------------------------------------------- */

  .reloc-topmenu-social {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    border-radius: 8px;
  }

  .reloc-topmenu-social--tg img {
    width: 20.76px;
    height: 17.2px;
  }

  .reloc-topmenu-social--wa img {
    width: 20.16px;
    height: 20.16px;
  }


  /* ---------------------------------------------------------
     6. MENU / CLOSE — 36x36, icon 24x24
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu,
  #reloc-topmenu .reloc-topmenu-menu > .elementor-widget-container,
  #reloc-topmenu .reloc-topmenu-menu .mega-menu-wrap {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  #reloc-topmenu .reloc-topmenu-menu .mega-menu-toggle {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    padding: 6px !important;

    background-size: 24px 24px !important;

    border: 1px solid rgb(255 255 255 / 10.2%) !important;
    border-radius: 8px !important;
  }


  /* ---------------------------------------------------------
     7. MOBILE NAV STACK
     Header больше не имеет боковой рамки, поэтому компенсация
     tablet-версии left/right:-1px здесь уже не нужна.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu ul.mega-menu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;

    border-radius: 0 !important;
  }

}


/* =========================================================
   TOP MENU — MOBILE NAVIGATION — TOP LEVEL
   < 1440px

   Figma:
   - Navigation Stack background: #494949
   - bottom radius: 20px
   - top-level item padding: 18px 16px
   - separator: 1px rgba(255,255,255,.10)
   - chevron: 24x24; only for items with children

   Typography is set below in separate breakpoint blocks:
   - Tablet 640–1439px: Inter 20px / 600 / 130%
   - Mobile <640px: Inter 20px / 600 / 130%
   ========================================================= */

@media (max-width: 1439px) {

  /* ---------------------------------------------------------
     1. ОБЩАЯ ПАНЕЛЬ НАВИГАЦИИ
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu ul.mega-menu {
    box-sizing: border-box !important;

    padding: 0 !important;

    /* Совпадает с открытым header: единая непрозрачная карточка */
    background: #494949 !important;

    border: 0 !important;
    border-radius: 0 0 20px 20px !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
  }


  /* ---------------------------------------------------------
     2. ПУНКТЫ ВЕРХНЕГО УРОВНЯ
     Высоту не задаём: 26px line-height + 18px + 18px = 62px.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item {
    box-sizing: border-box !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }


  /* ---------------------------------------------------------
     3. ССЫЛКИ ВЕРХНЕГО УРОВНЯ
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item > a.mega-menu-link {
    box-sizing: border-box !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

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

    gap: 12px !important;

    margin: 0 !important;
    padding: 18px 16px !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
    border-radius: 0 !important;

    font-family: "Inter", sans-serif !important;

    color: #FFFFFF !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: normal !important;

    transition:
      color 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease !important;
  }


  /* У последней строки нет нижнего разделителя */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item:last-child > a.mega-menu-link {
    border-bottom-color: transparent !important;
  }


  /* ---------------------------------------------------------
     4. ШЕВРОНЫ
     Только у пунктов, которые реально имеют подменю.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item-has-children
  > a.mega-menu-link
  > .mega-indicator {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;

    display: block !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    background-color: #FFFFFF !important;

    -webkit-mask-image: url("https://relocationde.com/wp-content/uploads/2026/09/chevron_down.svg") !important;
    mask-image: url("https://relocationde.com/wp-content/uploads/2026/09/chevron_down.svg") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: center !important;
    mask-position: center !important;

    -webkit-mask-size: 24px 24px !important;
    mask-size: 24px 24px !important;

    transition: opacity 0.15s ease !important;
  }


  /* Штатную стрелку Max Mega Menu не рисуем */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item-has-children
  > a.mega-menu-link
  > .mega-indicator::after {
    display: none !important;
    content: none !important;
  }


  /* Открытый пункт: используем отдельный дизайнерский SVG */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item-has-children.mega-toggle-on
  > a.mega-menu-link
  > .mega-indicator {
    -webkit-mask-image: url("https://relocationde.com/wp-content/uploads/2026/09/chevron_up.svg") !important;
    mask-image: url("https://relocationde.com/wp-content/uploads/2026/09/chevron_up.svg") !important;
  }


  /* ---------------------------------------------------------
     5. СОСТОЯНИЯ ВЕРХНЕГО УРОВНЯ
     Не меняем размеры/жирность при hover/open.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item > a.mega-menu-link:focus-visible,
  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background: transparent !important;
    color: #FFFFFF !important;

    text-decoration: none !important;
  }

}

/* =========================================================
   TOP MENU — MOBILE NAVIGATION — TYPOGRAPHY
   Separate breakpoint rules, even though the current Figma
   values happen to match. This keeps tablet/mobile independent.
   ========================================================= */

/* Tablet: 640–1439px — tablet/h5 SB 20 130 */
@media (min-width: 640px) and (max-width: 1439px) {

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item > a.mega-menu-link {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }

}

/* Mobile: <640px — mobile/h5 SB 20 130 */
@media (max-width: 639px) {

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-item > a.mega-menu-link {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }

}


/* =========================================================
   TOP MENU — MOBILE NAVIGATION — MOBILE VISUAL FIXES
   < 640px

   Figma mobile:
   - separator between header and first nav item: 1px / white 10%
   - Navigation Stack has no bottom corner radius
   - typography remains mobile/h5: Inter 20 / 600 / 130%
   ========================================================= */

@media (max-width: 639px) {

  #reloc-topmenu .reloc-topmenu-menu ul.mega-menu {
    /* Верхняя линия над «Программы».
       Ставим её здесь, ПОСЛЕ общего <1440 блока, чтобы border:0 выше
       не смог её затереть. */
    border-top: 1px solid rgb(255 255 255 / 10%) !important;

    /* Общий tablet-блок ниже/выше задаёт 20px нижних скруглений.
       На mobile по Figma Navigation Stack прямоугольный. */
    border-radius: 0 !important;

    /* Header fixed, поэтому длинное раскрытое меню само не увеличивает
       высоту документа. Даём Navigation Stack собственную прокрутку. */
    max-height: calc(100vh - 57px) !important;
    max-height: calc(100dvh - 57px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

}


/* =========================================================
   TOP MENU — TABLET/MOBILE «ПРОГРАММЫ» — СЛОИ
   < 1440px

   Нижняя строка Mega Menu технически может лежать поверх верхней.
   Поэтому верхний блок и его ссылки явно держим выше footer-строки.
   ========================================================= */

@media (max-width: 1439px) {

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs .reloc-mega-programs-top {
    position: relative !important;
    z-index: 2 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs .reloc-mega-programs-bottom {
    position: relative !important;
    z-index: 1 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs .reloc-mega-programs-top a.mega-menu-link {
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
  }

}


/* =========================================================
   TOP MENU — MOBILE NAVIGATION — SIMPLE FLYOUTS
   < 1440px

   Только обычные dropdown (.mega-menu-flyout).
   Mega Menu «Программы» этим блоком не затрагивается.

   Figma:
   - width: fill
   - padding: 30px 16px
   - background: #494949 / 60%
   - border: left/right/bottom 1px rgba(255,255,255,.10)
   - blur: 60px
   - links gap: tablet 10px; mobile 8px
   ========================================================= */

@media (max-width: 1439px) {

  /* ---------------------------------------------------------
     1. ОБОЛОЧКА ОБЫЧНОГО SUBMENU
     Показом/скрытием продолжает управлять Max Mega Menu.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout > ul.mega-sub-menu {
    box-sizing: border-box !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    /* Этот UL анимирует Max Mega Menu. Не фиксируем ему height и
       vertical padding через !important — иначе Slide Down становится резким. */
    margin: 0 !important;
    padding: 0 16px !important;

    background: rgb(73 73 73 / 60%) !important;

    border: 0 !important;
    border-left: 1px solid rgb(255 255 255 / 10%) !important;
    border-right: 1px solid rgb(255 255 255 / 10%) !important;
    border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
  }


  /* ---------------------------------------------------------
     2. ПУНКТЫ ВНУТРИ SUBMENU
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  + li.mega-menu-item {
    margin-top: 10px !important;
  }

  /* Те же 30px сверху/снизу, но уже на содержимом, а не на анимируемом UL. */
  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item:first-child {
    padding-top: 30px !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item:last-child {
    padding-bottom: 30px !important;
  }


  /* ---------------------------------------------------------
     3. ССЫЛКИ ВНУТРИ SUBMENU
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    color: #FFFFFF !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: normal !important;

    transition: color 0.15s ease !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link:hover,
  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link:focus-visible {
    background: transparent !important;
    color: rgb(255 255 255 / 70%) !important;
    text-decoration: none !important;
    outline: none !important;
  }

}

/* Tablet: 640–1439px — text tiny R 14 / 130% */
@media (min-width: 640px) and (max-width: 1439px) {

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link {
    font-size: 14px !important;
  }

}

/* Mobile: <640px — Figma simple flyout: 14px / 400 / 130%, gap 8px */
@media (max-width: 639px) {

  /* Figma: три строки по ~18px + два gap по 8px = 70px контента. */
  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  + li.mega-menu-item {
    margin-top: 8px !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .mega-menu > li.mega-menu-flyout
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }

}

/* =========================================================
   TOP MENU — TABLET MEGA MENU «ПРОГРАММЫ» — MAIN
   640–1439px

   Основная часть: 3 колонки + разделитель.
   Нижний CTA/footer оформлен отдельным tablet-блоком ниже.

   Figma (tablet):
   - outer submenu: fill width, padding 20px 16px
   - background: #494949 / 60%, blur 60px
   - border: left/right/bottom 1px rgba(255,255,255,.10)
   - columns: 3 x Fill, gap 30px
   - column: vertical, gap 14px
   - links list: vertical, gap 8px
   - title: Inter 14 / 400 / 130%, #F74E15
   - links: Inter 14 / 400 / 130%, #FFFFFF
   - divider: 1px rgba(217,217,217,.10)
   ========================================================= */

@media (min-width: 640px) and (max-width: 1439px) {

  /* ---------------------------------------------------------
     1. ОБЩАЯ ОБОЛОЧКА «ПРОГРАММ»
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu {
    box-sizing: border-box !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    /* Outer UL анимирует Max Mega Menu. */
    margin: 0 !important;
    padding: 0 16px !important;

    background: rgb(73 73 73 / 60%) !important;

    border: 0 !important;
    border-left: 1px solid rgb(255 255 255 / 10%) !important;
    border-right: 1px solid rgb(255 255 255 / 10%) !important;
    border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
  }


  /* Все внутренние технические уровни Mega Menu делаем прозрачными. */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu
  ul.mega-sub-menu,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu
  li.mega-menu-item,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu
  li.mega-menu-column {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }


  /* ---------------------------------------------------------
     2. ВЕРХНЯЯ СТРОКА — 3 КОЛОНКИ
     576px inner width при макете 608px:
     (576 - 30 - 30) / 3 = 172px на колонку.
     Жёсткие 172px не задаём — используем Fill/flex.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 0 16px 0 !important;
    padding: 20px 0 16px 0 !important;

    border-bottom: 1px solid rgb(217 217 217 / 10%) !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top > ul.mega-sub-menu {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;

    gap: 30px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ---------------------------------------------------------
     3. КОЛОНКА
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top > ul.mega-sub-menu > li.mega-menu-column {
    box-sizing: border-box !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: 1 1 0 !important;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* В каждой колонке один блок: title + link list. */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ---------------------------------------------------------
     4. ЗАГОЛОВКИ КОЛОНОК
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    color: #F74E15 !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: normal !important;
  }


  /* ---------------------------------------------------------
     5. СПИСОК ССЫЛОК В КОЛОНКЕ
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu {
    box-sizing: border-box !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu
  > li.mega-menu-item {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ---------------------------------------------------------
     6. ДОЧЕРНИЕ ССЫЛКИ
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    color: #FFFFFF !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: normal !important;

    transition: color 0.15s ease !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link:hover,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link:focus-visible {
    background: transparent !important;
    color: rgb(255 255 255 / 70%) !important;
    text-decoration: none !important;
    outline: none !important;
  }

}

/* =========================================================
   TOP MENU — TABLET MEGA MENU «ПРОГРАММЫ» — FOOTER
   640–1439px

   Figma (tablet):
   - footer width: Fill
   - footer height: 56px
   - horizontal gap: 20px
   - question: Inter 14 / 400 / 130%, #FFFFFF
   - button: 214x48, padding 12px 16px, radius 16px
   - button text: Inter 16 / 600 / 130%, #FFFFFF
   - button default: #EB1D19
   - button hover/focus: #D20101 (как desktop)
   ========================================================= */

@media (min-width: 640px) and (max-width: 1439px) {

  /* ---------------------------------------------------------
     1. ТЕХНИЧЕСКИЕ ОБЁРТКИ НИЖНЕЙ СТРОКИ
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom > ul.mega-sub-menu,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom > ul.mega-sub-menu > li.mega-menu-column,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* 20px снизу переносим с outer UL на внутреннюю строку. */
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom {
    padding-bottom: 20px !important;
  }


  /* ---------------------------------------------------------
     2. FOOTER: ТЕКСТ + КНОПКА
     342 + 20 + 214 = 576px на контрольном макете 608px.
     Левую часть не фиксируем: она забирает остаток ширины.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-footer {
    box-sizing: border-box;

    width: 100%;
    height: 56px;

    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 20px;

    margin: 0;
    padding: 0;
  }


  /* ---------------------------------------------------------
     3. ТЕКСТ СЛЕВА
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-question {
    box-sizing: border-box;

    width: auto;
    min-width: 0;
    flex: 1 1 auto;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;

    color: #FFFFFF;

    white-space: nowrap;
  }


  /* ---------------------------------------------------------
     4. КНОПКА «ПОДОБРАТЬ ПРОГРАММУ»
     Hover полностью повторяет desktop-версию.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-button {
    box-sizing: border-box;

    width: 214px;
    height: 48px;
    flex: 0 0 214px;

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

    margin: 0;
    padding: 12px 16px;

    background: #EB1D19;

    border: 0;
    border-radius: 16px;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;

    color: #FFFFFF;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    transition: background-color 0.2s ease;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-button:hover,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-button:focus-visible {
    background: #D20101;

    color: #FFFFFF;
    text-decoration: none;
    outline: none;
  }

}


/* =========================================================
   TOP MENU — MOBILE MEGA MENU «ПРОГРАММЫ»
   < 640px

   Figma mobile (375px — контрольный макет, не breakpoint):
   - outer submenu: Fill, padding 20px 16px
   - background: #494949 / 60%, blur 60px
   - border: bottom 1px rgba(217,217,217,.10)
   - columns stack: vertical, gap 30px
   - column: vertical, gap 14px
   - links list: vertical, gap 8px
   - title: Inter 14 / 400 / 130%, #F74E15
   - links: Inter 14 / 400 / 130%, #FFFFFF
   - divider: 1px rgba(217,217,217,.10)
   - footer: vertical, gap 20px
   ========================================================= */

@media (max-width: 639px) {

  /* ---------------------------------------------------------
     1. ОБЩАЯ ОБОЛОЧКА «ПРОГРАММ»
     Показом/скрытием продолжает управлять Max Mega Menu.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu {
    box-sizing: border-box !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    /* Этот outer UL анимирует Max Mega Menu. Height и vertical padding
       здесь не фиксируем через !important, иначе Slide Down обрывается. */
    margin: 0 !important;
    padding: 0 16px !important;

    background: rgb(73 73 73 / 60%) !important;

    border: 0 !important;
    border-bottom: 1px solid rgb(217 217 217 / 10%) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
  }


  /* Все технические уровни внутри Mega Menu прозрачные. */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu
  ul.mega-sub-menu,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu
  li.mega-menu-item,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu
  li.mega-menu-column {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }


  /* ---------------------------------------------------------
     2. ВЕРХНЯЯ ЧАСТЬ + РАЗДЕЛИТЕЛЬ
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 0 16px 0 !important;
    padding: 20px 0 16px 0 !important;

    border-bottom: 1px solid rgb(217 217 217 / 10%) !important;
  }


  /* Figma: Columns = vertical, gap 30px. */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top > ul.mega-sub-menu {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    gap: 30px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ---------------------------------------------------------
     3. КОЛОНКИ
     На mobile каждая колонка занимает всю внутреннюю ширину.
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top > ul.mega-sub-menu > li.mega-menu-column {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: 0 0 auto !important;
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* Figma: Column = title + list, gap 14px. */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ---------------------------------------------------------
     4. ЗАГОЛОВКИ КОЛОНОК
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    color: #F74E15 !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: normal !important;
  }


  /* ---------------------------------------------------------
     5. СПИСКИ ССЫЛОК — gap 8px
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu {
    box-sizing: border-box !important;

    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu
  > li.mega-menu-item {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ---------------------------------------------------------
     6. ДОЧЕРНИЕ ССЫЛКИ
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    color: #FFFFFF !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: normal !important;

    transition: color 0.15s ease !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link:hover,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-top
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item
  > ul.mega-sub-menu
  > li.mega-menu-item
  > a.mega-menu-link:focus-visible {
    background: transparent !important;
    color: rgb(255 255 255 / 70%) !important;
    text-decoration: none !important;
    outline: none !important;
  }


  /* ---------------------------------------------------------
     7. НИЖНЯЯ ЧАСТЬ: ВОПРОС + КНОПКА
     --------------------------------------------------------- */

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom > ul.mega-sub-menu,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom > ul.mega-sub-menu > li.mega-menu-column,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom
  > ul.mega-sub-menu
  > li.mega-menu-column
  > ul.mega-sub-menu
  > li.mega-menu-item {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Figma: снизу 20px. Держим их на внутренней строке,
     чтобы не мешать анимации outer UL. */
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-bottom {
    padding-bottom: 20px !important;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-footer {
    box-sizing: border-box;

    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;

    /* 18px текста + 20px gap + 48px кнопка = 86px (Figma). */
    gap: 20px;

    margin: 0;
    padding: 0;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-question {
    box-sizing: border-box;

    width: 100%;
    min-width: 0;
    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;

    color: #FFFFFF;

    white-space: normal;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-button {
    box-sizing: border-box;

    width: 214px;
    height: 48px;
    flex: 0 0 48px;

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

    margin: 0;
    padding: 12px 16px;

    background: #EB1D19;

    border: 0;
    border-radius: 16px;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;

    color: #FFFFFF;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    transition: background-color 0.2s ease;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-button:hover,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs
  .reloc-mega-programs-button:focus-visible {
    background: #D20101;

    color: #FFFFFF;
    text-decoration: none;
    outline: none;
  }

}

/* =========================================================
   TOP MENU — MOBILE SCROLL / MEGA ROW FLOW FIX
   < 640px

   1) Navigation Stack остаётся отдельной scroll-area под fixed header.
   2) Отключаем scroll anchoring, чтобы при раскрытии нижних пунктов
      браузер не подтягивал содержимое вверх.
   3) Строки Mega Menu «Программы» возвращаем в обычный поток,
      чтобы их реальная высота учитывалась outer submenu и следующий
      top-level пункт не заезжал под footer с кнопкой.
   ========================================================= */

@media (max-width: 639px) {

  #reloc-topmenu .reloc-topmenu-menu ul.mega-menu {
    overflow-anchor: none;
  }

  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu
  > .reloc-mega-programs-top,
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu
  > .reloc-mega-programs-bottom {
    box-sizing: border-box !important;

    position: relative !important;
    float: none !important;
    clear: both !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Страховочный clearfix для outer submenu: если MMM оставит float
     на каком-либо внутреннем техническом элементе, родитель всё равно
     получит полную высоту содержимого. */
  #reloc-topmenu .reloc-topmenu-menu
  .reloc-menu-programs > ul.mega-sub-menu::after {
    content: "";
    display: block;
    clear: both;
  }

}

/* =========================================================
   TOP MENU — MOBILE SCROLL / FLEX SHRINK FIX
   < 640px

   Diagnostic at 375x599 showed that ul.mega-menu is a vertical
   flex container capped by max-height. Its direct LI children were
   therefore shrinking to fit the 542px scroll viewport instead of
   keeping their natural height and overflowing into the scroll area.

   Also, Max Mega Menu leaves direct submenus floated on mobile.
   Resetting that float makes the open submenu contribute to the
   natural height of its top-level LI.
   ========================================================= */

@media (max-width: 639px) {

  /* Scroll viewport may be capped, but its rows must NEVER shrink. */
  #reloc-topmenu .reloc-topmenu-menu
  ul.mega-menu > li.mega-menu-item {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  /* Open submenus must participate in the height of their parent LI. */
  #reloc-topmenu .reloc-topmenu-menu
  ul.mega-menu > li.mega-menu-item-has-children > ul.mega-sub-menu {
    float: none !important;
    clear: both !important;
  }

}