/* Start:/local/templates/main/rombic-blog/blog.css?179309394057187*/
/*!
 * РОМБИК · раздел «Блог» — стиль «Техно-Бенто»
 * ---------------------------------------------------------------------------
 * Файл:      /local/templates/.default/rombic-blog/blog.css
 * Где живёт: общий слой ассетов раздела (не зависит от активного шаблона сайта).
 * Подключение: в /blog/index.php ДО require header.php (см. docs/03),
 *              иначе CSS попадёт в <body> и вызовет FOUC.
 *
 * ВАЖНО (аудит header/footer):
 *   • Сайт без Bootstrap/Tailwind/UI-kit — сетка своя (/css/grid.css),
 *     переопределения в /css/custom.css, который грузится ПОСЛЕДНИМ.
 *   • Поэтому здесь НЕТ ни одного глобального селектора: всё скоупировано
 *     под .rb-blog. Классы с префиксом rb-, токены с префиксом --rb-.
 *   • Токены из style.css сайта: градиент #FFBB00→#FF5900, текст #2E333D,
 *     радиус карточек 20px, фон #F5F7FA.
 *   • Брейкпоинты сайта: 1100 / 992 / 768 / 480.
 *   • Нативный CSS Grid + grid-auto-flow: dense, без новых библиотек.
 *
 * Структура файла:
 *   1. Токены
 *   2. Корень раздела и типографика
 *   3. Хлебные крошки
 *   4. Шапка раздела (H1 + описание)
 *   5. Чипсы рубрик
 *   6. Бенто-сетка
 *   7. Карточка: база, медиа, тело, мета, заголовок, лид, подвал, стрелка
 *   8. Стили карточек: white / dark / accent
 *   9. Размеры карточек: S / M / T / L / XL
 *  10. Карточка без обложки
 *  11. Пустое состояние и «фильтр без результатов»
 *  12. Пагинация (обёртка над bitrix:system.pagenavigation)
 *  13. Адаптив ленты: 1100 → 992 → 768 → 480
 *  14. Доступность ленты: фокус, reduced-motion, печать
 *
 *  15. Детальная статья: каркас
 *  16. Hero статьи (обложка, H1, лид, автор, дата)
 *  17. Раскладка «контент + сайдбар»
 *  18. Содержание (TOC) и прогресс чтения
 *  19. Типографика статьи
 *  20. FAQ-аккордеон (details/summary)
 *  21. Теги, источники, «Поделиться»
 *  22. CTA и кнопка
 *  23. Похожие и соседние статьи
 *  24. Адаптив статьи, reduced-motion, печать
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   1. ТОКЕНЫ РАЗДЕЛА
   Объявлены на .rb-blog, поэтому не протекают в остальной сайт.
   =========================================================================== */
.rb-blog {
  /* Бренд */
  --rb-gradient: linear-gradient(to bottom, #FFBB00, #FF5900);
  --rb-gradient-x: linear-gradient(90deg, #FFBB00, #FF5900);
  --rb-accent: #FF5900;
  --rb-accent-2: #FFBB00;
  --rb-accent-ink: #1F2329; /* тёмный текст на градиенте — контрастнее белого */

  /* Поверхности и текст */
  --rb-bg: #F5F7FA;
  --rb-surface: #FFFFFF;
  --rb-surface-dark: #23272F; /* производный от #2E333D, глубже для контраста */
  --rb-text: #2E333D;
  --rb-text-soft: rgba(46, 51, 61, .64);
  --rb-text-invert: #FFFFFF;
  --rb-text-invert-soft: rgba(255, 255, 255, .72);
  --rb-border: rgba(46, 51, 61, .10);
  --rb-border-strong: rgba(46, 51, 61, .18);

  /* Геометрия */
  --rb-radius: 20px; /* из style.css */
  --rb-radius-md: 16px;
  --rb-radius-sm: 12px;
  --rb-radius-pill: 999px;

  /* Тени */
  --rb-shadow-sm: 0 1px 2px rgba(46, 51, 61, .06);
  --rb-shadow: 0 12px 30px rgba(46, 51, 61, .10);
  --rb-shadow-hover: 0 22px 48px rgba(46, 51, 61, .18);
  --rb-shadow-accent: 0 10px 26px rgba(255, 89, 0, .26);

  /* Сетка */
  --rb-gap: 16px;
  --rb-row: clamp(196px, 17vw, 262px); /* высота «кванта» бенто-сетки */
  --rb-max: 1400px;
  --rb-pad-x: clamp(16px, 3vw, 32px);

  /* Анимации */
  --rb-ease: cubic-bezier(.22, .61, .36, 1);
  --rb-dur: .28s;
}

/* ===========================================================================
   2. КОРЕНЬ РАЗДЕЛА И ТИПОГРАФИКА
   =========================================================================== */
.rb-blog {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--rb-max);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 36px) var(--rb-pad-x) clamp(40px, 6vw, 72px);
  color: var(--rb-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* Локальный border-box: сайтовый reset может не доставать до компонента */
.rb-blog,
.rb-blog *,
.rb-blog *::before,
.rb-blog *::after {
  box-sizing: border-box;
}

/* Модификатор, если страница уже обёрнута в контейнер сайта:
   <section class="rb-blog rb-blog--flush"> — убирает свои отступы/лимит. */
.rb-blog.rb-blog--flush {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.rb-blog__visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ===========================================================================
   3. ХЛЕБНЫЕ КРОШКИ
   В header.php сайта bitrix:breadcrumb закомментирован, поэтому крошки
   рисуем сами. JSON-LD BreadcrumbList добавим в детальном шаблоне.
   =========================================================================== */
.rb-blog__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--rb-text-soft);
}

.rb-blog__crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.rb-blog__crumbs li + li::before {
  content: "/";
  color: var(--rb-text-soft);
  opacity: .55;
}

.rb-blog__crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--rb-dur) var(--rb-ease),
              border-color var(--rb-dur) var(--rb-ease);
}

.rb-blog__crumbs a:hover {
  color: var(--rb-text);
  border-bottom-color: var(--rb-accent);
}

.rb-blog__crumbs [aria-current="page"] {
  color: var(--rb-text);
  font-weight: 600;
}

/* ===========================================================================
   4. ШАПКА РАЗДЕЛА
   =========================================================================== */
.rb-blog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 2.4vw, 34px);
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}

.rb-blog__intro {
  max-width: 760px;
  min-width: 0;
}

.rb-blog__title {
  margin: 0;
  padding: 0;
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--rb-text);
}

/* Акцентный фрагмент: <span class="rb-blog__title-accent">…</span> */
.rb-blog__title-accent {
  background: var(--rb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.rb-blog__desc {
  margin: 12px 0 0;
  max-width: 640px;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--rb-text-soft);
}

.rb-blog__total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-pill);
  background: var(--rb-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-text-soft);
  white-space: nowrap;
}

.rb-blog__total b {
  color: var(--rb-text);
  font-weight: 800;
}

/* ===========================================================================
   5. ЧИПСЫ РУБРИК
   Кнопки, а не ссылки: фильтрация клиентская (blog.js) — без перезагрузки
   и без влияния на кэш компонента. Без JS видны все карточки.
   =========================================================================== */
.rb-blog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  padding: 0;
}

.rb-chip {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-pill);
  background: var(--rb-surface);
  color: var(--rb-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rb-dur) var(--rb-ease),
              color var(--rb-dur) var(--rb-ease),
              border-color var(--rb-dur) var(--rb-ease),
              box-shadow var(--rb-dur) var(--rb-ease),
              transform var(--rb-dur) var(--rb-ease);
}

.rb-chip:hover {
  border-color: var(--rb-border-strong);
  box-shadow: var(--rb-shadow-sm);
  transform: translateY(-1px);
}

.rb-chip:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}

.rb-chip.is-active,
.rb-chip[aria-pressed="true"] {
  background: var(--rb-gradient);
  border-color: transparent;
  color: var(--rb-accent-ink);
  box-shadow: var(--rb-shadow-accent);
}

.rb-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--rb-radius-pill);
  background: rgba(46, 51, 61, .07);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.rb-chip.is-active .rb-chip__count,
.rb-chip[aria-pressed="true"] .rb-chip__count {
  background: rgba(255, 255, 255, .55);
  color: var(--rb-accent-ink);
}

/* ===========================================================================
   6. БЕНТО-СЕТКА
   Нативный CSS Grid 4 колонки. Размеры плиток задаются модификаторами
   .rb-card--s / --m / --t / --l / --xl. grid-auto-flow: dense закрывает
   «дыры», которые оставляют крупные плитки.
   =========================================================================== */
.rb-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--rb-row), auto);
  grid-auto-flow: dense;
  gap: var(--rb-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Обёртка нужна, если вёрстка карточки пойдёт списком (<ul class="rb-bento">) */
.rb-bento > li {
  display: contents;
}


/* ===========================================================================
   7. КАРТОЧКА
   Структура (см. template.php):
   article.rb-card > a.rb-card__link > .rb-card__media > img.rb-card__img
                                  > .rb-card__body > meta / title / lead / footer
   =========================================================================== */
.rb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  grid-column: span 1;
  grid-row: span 1;
  border-radius: var(--rb-radius);
  background: var(--rb-surface);
  box-shadow: inset 0 0 0 1px var(--rb-border), var(--rb-shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--rb-dur) var(--rb-ease),
              transform var(--rb-dur) var(--rb-ease);
}

/* Скрытая карточка при клиентской фильтрации: специфичнее .rb-card */
.rb-blog .rb-card[hidden] {
  display: none !important;
}

.rb-card__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.rb-card__link:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: -3px;
  border-radius: inherit;
}

/* --- Обложка ------------------------------------------------------------- */
.rb-card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 96px;
  overflow: hidden;
  background: linear-gradient(135deg, #E7ECF3 0%, #D9E1EB 100%);
}

/* Низ обложки затемняем — подпись/чипсы читаются на любом фото */
.rb-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(35, 39, 47, .22), rgba(35, 39, 47, 0) 58%);
  pointer-events: none;
}

.rb-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .6s var(--rb-ease);
}

/* --- Тело карточки ------------------------------------------------------- */
.rb-card__body {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 14px 16px 16px;
}

/* --- Мета: рубрика + дата ------------------------------------------------ */
.rb-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--rb-text-soft);
}

.rb-card__rubric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--rb-radius-pill);
  background: rgba(46, 51, 61, .06);
  color: var(--rb-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.rb-card__rubric::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rb-gradient);
  flex: 0 0 auto;
}

.rb-card__date {
  white-space: nowrap;
}

/* --- Заголовок ----------------------------------------------------------- */
.rb-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 2px 0 0;
  padding: 0;
  overflow: hidden;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: inherit;
  text-wrap: balance;
}

/* --- Лид ---------------------------------------------------------------- */
.rb-card__lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  color: var(--rb-text-soft);
}

/* --- Подвал: время чтения + стрелка -------------------------------------- */
.rb-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.rb-card__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rb-text-soft);
  white-space: nowrap;
}

.rb-card__arrow {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--rb-border-strong);
  border-radius: 50%;
  color: inherit;
  transition: background var(--rb-dur) var(--rb-ease),
              border-color var(--rb-dur) var(--rb-ease),
              color var(--rb-dur) var(--rb-ease),
              transform var(--rb-dur) var(--rb-ease);
}

.rb-card__arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* --- Ховер / фокус ------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .rb-card:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--rb-border), var(--rb-shadow-hover);
  }

  .rb-card:hover .rb-card__img {
    transform: scale(1.045);
  }

  .rb-card:hover .rb-card__arrow {
    color: #FFFFFF;
    background: var(--rb-gradient);
    border-color: transparent;
    transform: translateX(2px);
  }
}


/* ===========================================================================
   8. СТИЛИ КАРТОЧЕК: white / dark / accent
   Приходят из свойства BENTO_STYLE инфоблока №1.
   =========================================================================== */
.rb-card--white {
  /* база = белая карточка, объявляем явно для читаемости */
  background: var(--rb-surface);
  color: var(--rb-text);
}

/* --- dark: тёмная «стеклянная» плитка ------------------------------------ */
.rb-card--dark {
  background: var(--rb-surface-dark);
  color: var(--rb-text-invert);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--rb-shadow);
}

.rb-card--dark .rb-card__meta {
  color: var(--rb-text-invert-soft);
}

.rb-card--dark .rb-card__rubric {
  background: rgba(255, 255, 255, .12);
  color: var(--rb-text-invert);
}

.rb-card--dark .rb-card__lead,
.rb-card--dark .rb-card__time {
  color: var(--rb-text-invert-soft);
}

.rb-card--dark .rb-card__arrow {
  border-color: rgba(255, 255, 255, .32);
}

.rb-card--dark .rb-card__media::after {
  background: linear-gradient(to top, rgba(35, 39, 47, .68), rgba(35, 39, 47, 0) 62%);
}

/* --- accent: фирменный градиент ----------------------------------------- */
.rb-card--accent {
  background: var(--rb-gradient);
  color: var(--rb-text-invert);
  box-shadow: var(--rb-shadow-accent);
}

/* Тёмное «стекло» под текстом — белый текст читается на всём протяжении
   градиента, включая самый светлый #FFBB00. */
.rb-card--accent .rb-card__body {
  background: linear-gradient(to top, rgba(27, 30, 36, .66), rgba(27, 30, 36, .30));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rb-card--accent .rb-card__meta {
  color: rgba(255, 255, 255, .84);
}

.rb-card--accent .rb-card__rubric {
  background: rgba(255, 255, 255, .92);
  color: var(--rb-accent-ink);
}

.rb-card--accent .rb-card__lead,
.rb-card--accent .rb-card__time {
  color: rgba(255, 255, 255, .84);
}

.rb-card--accent .rb-card__arrow {
  border-color: rgba(255, 255, 255, .55);
  color: #FFFFFF;
}

.rb-card--accent .rb-card__media::after {
  background: linear-gradient(to top, rgba(255, 89, 0, .32), rgba(255, 89, 0, 0) 60%);
}

/* --- pinned: бейдж «Главное» (свойство BENTO_PINNED = Y) ----------------- */
.rb-card--pinned::after {
  content: "Главное";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: var(--rb-radius-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--rb-accent-ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(46, 51, 61, .16);
  pointer-events: none;
}

/* ===========================================================================
   9. РАЗМЕРЫ КАРТОЧЕК
   S  1×1   M  2×1   T  1×2   L  2×2   XL 4×2
   =========================================================================== */
.rb-card--s {
  grid-column: span 1;
  grid-row: span 1;
}

.rb-card--m {
  grid-column: span 2;
  grid-row: span 1;
}

.rb-card--t {
  grid-column: span 1;
  grid-row: span 2;
}

.rb-card--l {
  grid-column: span 2;
  grid-row: span 2;
}

.rb-card--xl {
  grid-column: span 4;
  grid-row: span 2;
}

/* --- M и XL: горизонтальная раскладка «обложка слева, текст справа» ------ */
.rb-card--m .rb-card__link,
.rb-card--xl .rb-card__link {
  flex-direction: row;
}

.rb-card--m .rb-card__media,
.rb-card--xl .rb-card__media {
  flex: 0 0 44%;
  min-height: 0;
}

.rb-card--xl .rb-card__media {
  flex-basis: 58%;
}

.rb-card--m .rb-card__body,
.rb-card--xl .rb-card__body {
  flex: 1 1 auto;
  justify-content: center;
  padding: 18px 20px;
}

/* --- Типографика по размерам -------------------------------------------- */
.rb-card--s .rb-card__body {
  gap: 4px;
  padding: 12px 14px 14px;
}

.rb-card--s .rb-card__title {
  font-size: 15px;
  -webkit-line-clamp: 3;
}

.rb-card--s .rb-card__lead,
.rb-card--s .rb-card__time {
  display: none;
}

.rb-card--s .rb-card__arrow {
  width: 28px;
  height: 28px;
}

.rb-card--m .rb-card__title {
  font-size: clamp(16px, 1.3vw, 19px);
  -webkit-line-clamp: 2;
}

.rb-card--m .rb-card__lead {
  -webkit-line-clamp: 2;
}

.rb-card--t .rb-card__title {
  -webkit-line-clamp: 4;
}

.rb-card--l .rb-card__title {
  font-size: clamp(18px, 1.7vw, 26px);
  -webkit-line-clamp: 3;
}

.rb-card--l .rb-card__body {
  padding: 18px 20px 20px;
}

.rb-card--xl .rb-card__title {
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.12;
  -webkit-line-clamp: 3;
}

.rb-card--xl .rb-card__lead {
  font-size: 15px;
  -webkit-line-clamp: 3;
}

/* S-плитка без обложки выглядит пустой — прячем стрелку, оставляем текст */
.rb-card--s.rb-card--no-media .rb-card__footer {
  padding-top: 4px;
}


/* ===========================================================================
   10. КАРТОЧКА БЕЗ ОБЛОЖКИ
   Если у новости нет PREVIEW_PICTURE/DETAIL_PICTURE — плитка не «ломается»,
   а получает фирменное градиентное свечение (декор, не влияет на контраст).
   =========================================================================== */
.rb-card--no-media .rb-card__link {
  flex-direction: column;
}

.rb-card--no-media .rb-card__body {
  flex: 1 1 auto;
  justify-content: space-between;
  padding: 18px 18px 16px;
}

.rb-card--no-media::before {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -42%;
  z-index: 0;
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--rb-gradient);
  opacity: .26;
  filter: blur(46px);
  pointer-events: none;
}

.rb-card--no-media.rb-card--dark::before {
  opacity: .34;
}

.rb-card--no-media.rb-card--accent::before {
  display: none;
}

/* ===========================================================================
   11. ПУСТЫЕ СОСТОЯНИЯ
   .rb-empty         — в инфоблоке нет активных новостей
   .rb-blog__notice  — рубрика выбрана, но на текущей странице её статей нет
   =========================================================================== */
.rb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(28px, 5vw, 64px) 20px;
  border: 1px dashed var(--rb-border-strong);
  border-radius: var(--rb-radius);
  background: var(--rb-surface);
  text-align: center;
}

.rb-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rb-gradient);
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--rb-shadow-accent);
}

.rb-empty__title {
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--rb-text);
}

.rb-empty__text {
  margin: 0;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rb-text-soft);
}

.rb-blog__notice {
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--rb-border);
  border-left: 3px solid var(--rb-accent);
  border-radius: var(--rb-radius-sm);
  background: var(--rb-surface);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rb-text-soft);
}

/* ===========================================================================
   12. ПАГИНАЦИЯ
   Обёртка над штатным bitrix:system.pagenavigation (PAGER_TEMPLATE по
   умолчанию). Стилизуем и свои классы, и «modern-page-*» из ядра.
   =========================================================================== */
.rb-pagination {
  display: flex;
  justify-content: center;
  margin: clamp(24px, 3.4vw, 40px) 0 0;
}

.rb-pagination > div,
.rb-pagination > nav,
.rb-pagination > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rb-pagination a,
.rb-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-pill);
  background: var(--rb-surface);
  color: var(--rb-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--rb-dur) var(--rb-ease),
              color var(--rb-dur) var(--rb-ease),
              background var(--rb-dur) var(--rb-ease),
              box-shadow var(--rb-dur) var(--rb-ease);
}

.rb-pagination a:hover {
  border-color: var(--rb-accent);
  color: var(--rb-accent);
  box-shadow: var(--rb-shadow-sm);
}

.rb-pagination .modern-page-current,
.rb-pagination .bx-active {
  background: var(--rb-gradient);
  border-color: transparent;
  color: var(--rb-accent-ink);
  box-shadow: var(--rb-shadow-accent);
}

.rb-pagination .modern-page-title {
  display: none;
}

.rb-pagination .modern-page-first,
.rb-pagination .modern-page-last,
.rb-pagination .modern-page-prev,
.rb-pagination .modern-page-next,
.rb-pagination .modern-page-dots,
.rb-pagination .bx-pag-next,
.rb-pagination .bx-pag-prev,
.rb-pagination .bx-pag-all {
  padding: 0 14px;
  color: var(--rb-text-soft);
}

.rb-pagination a.modern-page-first:hover,
.rb-pagination a.modern-page-last:hover,
.rb-pagination a.modern-page-prev:hover,
.rb-pagination a.modern-page-next:hover {
  color: var(--rb-accent);
}


/* ===========================================================================
   13. АДАПТИВ
   Брейкпоинты сайта: 1100 / 992 / 768 / 480.
   4 колонки → 2 (992) → 1 (768); на мобиле все плитки 1×1.
   =========================================================================== */

/* --- ≤ 1100: плотнее сетка, компактнее отступы -------------------------- */
@media (max-width: 1100px) {
  .rb-blog {
    --rb-gap: 14px;
    --rb-row: clamp(180px, 19vw, 240px);
    --rb-pad-x: 20px;
  }

  .rb-card--xl .rb-card__media {
    flex-basis: 52%;
  }

  .rb-card--xl .rb-card__title {
    font-size: clamp(21px, 3vw, 32px);
  }

  .rb-card--m .rb-card__body,
  .rb-card--xl .rb-card__body {
    padding: 16px 18px;
  }
}

/* --- ≤ 992: две колонки -------------------------------------------------- */
@media (max-width: 992px) {
  .rb-blog {
    --rb-row: clamp(190px, 26vw, 250px);
    --rb-gap: 14px;
  }

  .rb-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rb-card--xl,
  .rb-card--l {
    grid-column: span 2;
    grid-row: span 2;
  }

  .rb-card--m {
    grid-column: span 2;
    grid-row: span 1;
  }

  .rb-card--t {
    grid-column: span 1;
    grid-row: span 2;
  }

  .rb-card--xl .rb-card__title {
    font-size: clamp(22px, 3.4vw, 30px);
  }

  .rb-card--l .rb-card__title {
    font-size: clamp(18px, 2.4vw, 24px);
  }
}

/* --- ≤ 768: одна колонка, все плитки 1×1 -------------------------------- */
@media (max-width: 768px) {
  .rb-blog {
    --rb-pad-x: 16px;
    --rb-gap: 12px;
  }

  .rb-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .rb-blog .rb-card,
  .rb-blog .rb-card--s,
  .rb-blog .rb-card--m,
  .rb-blog .rb-card--t,
  .rb-blog .rb-card--l,
  .rb-blog .rb-card--xl {
    grid-column: span 1;
    grid-row: span 1;
  }

  .rb-card__link,
  .rb-blog .rb-card--m .rb-card__link,
  .rb-blog .rb-card--xl .rb-card__link,
  .rb-blog .rb-card--no-media .rb-card__link {
    flex-direction: column;
  }

  .rb-blog .rb-card__media,
  .rb-blog .rb-card--m .rb-card__media,
  .rb-blog .rb-card--xl .rb-card__media {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .rb-blog .rb-card__body,
  .rb-blog .rb-card--m .rb-card__body,
  .rb-blog .rb-card--xl .rb-card__body {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 14px 16px 16px;
  }

  .rb-blog .rb-card--s .rb-card__title,
  .rb-blog .rb-card__title {
    font-size: 18px;
    -webkit-line-clamp: 3;
  }

  .rb-blog .rb-card--l .rb-card__title,
  .rb-blog .rb-card--xl .rb-card__title {
    font-size: 21px;
    -webkit-line-clamp: 3;
  }

  .rb-blog .rb-card--s .rb-card__lead,
  .rb-blog .rb-card--s .rb-card__time {
    display: initial;
  }

  .rb-blog .rb-card--s .rb-card__lead {
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }

  .rb-blog .rb-card--s .rb-card__body {
    gap: 6px;
    padding: 14px 16px 16px;
  }

  .rb-card__footer {
    margin-top: 10px;
  }

  .rb-blog__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .rb-blog__total {
    order: 3;
  }

  /* Чипсы превращаются в горизонтальный скролл — ряд не переносится */
  .rb-blog__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .rb-blog__filters::-webkit-scrollbar {
    display: none;
  }

  .rb-chip {
    flex: 0 0 auto;
  }
}

/* --- ≤ 480: мелкие экраны ---------------------------------------------- */
@media (max-width: 480px) {
  .rb-blog {
    padding-top: 14px;
    padding-bottom: 36px;
  }

  .rb-blog__title {
    font-size: 27px;
    line-height: 1.08;
  }

  .rb-blog__desc {
    margin-top: 8px;
    font-size: 14px;
  }

  .rb-blog .rb-card__media {
    aspect-ratio: 4 / 3;
  }

  .rb-blog .rb-card__body {
    padding: 13px 14px 15px;
  }

  .rb-blog .rb-card__title,
  .rb-blog .rb-card--l .rb-card__title,
  .rb-blog .rb-card--xl .rb-card__title {
    font-size: 17px;
  }

  .rb-card__lead {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }

  .rb-card__arrow {
    width: 30px;
    height: 30px;
  }

  .rb-chip {
    min-height: 36px;
    padding: 7px 13px;
    font-size: 13px;
  }

  .rb-pagination a,
  .rb-pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* ===========================================================================
   14. ДОСТУПНОСТЬ И ПЕЧАТЬ
   =========================================================================== */

/* Мягкое появление карточек. Класс .rb-js ставит blog.js — без JS контент
   виден сразу, ничего не «прячется» насовсем. */
@media (prefers-reduced-motion: no-preference) {
  .rb-js .rb-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--rb-ease),
                transform .5s var(--rb-ease),
                box-shadow var(--rb-dur) var(--rb-ease);
  }

  .rb-js .rb-card.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Возвращаем ховер-подъём: правило .is-visible выше перебивает базовый ховер */
  .rb-js .rb-card.is-visible:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-blog *,
  .rb-blog *::before,
  .rb-blog *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .rb-js .rb-card {
    opacity: 1;
    transform: none;
  }
}

/* Пользователь просит больше контраста (Windows high contrast / macOS) */
@media (prefers-contrast: more) {
  .rb-blog {
    --rb-text-soft: #3C424E;
    --rb-border: rgba(46, 51, 61, .32);
    --rb-border-strong: rgba(46, 51, 61, .52);
  }

  .rb-card {
    box-shadow: inset 0 0 0 1px var(--rb-border-strong);
  }
}

@media print {
  .rb-blog__filters,
  .rb-pagination,
  .rb-card__arrow {
    display: none !important;
  }

  .rb-blog .rb-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #CCCCCC;
  }

  .rb-js .rb-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===========================================================================
   15. ДЕТАЛЬНАЯ СТАТЬЯ: КАРКАС
   Тот же корень .rb-blog (токены + контейнер), плюс модификатор .rb-article-page.
   =========================================================================== */
.rb-article-page {
  padding-top: clamp(14px, 2.2vw, 26px);
}

.rb-article-page__article {
  display: block;
  min-width: 0;
}

/* ===========================================================================
   16. HERO СТАТЬИ
   Тёмная карточка: текст слева, обложка справа (на планшете — сверху).
   =========================================================================== */
.rb-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 30px);
  margin: 0 0 clamp(24px, 3.2vw, 44px);
  padding: clamp(22px, 3.2vw, 44px);
  border-radius: clamp(20px, 2.4vw, 30px);
  background: var(--rb-surface-dark);
  color: var(--rb-text-invert);
  overflow: hidden;
  isolation: isolate;
}

/* Мягкое «свечение» бренда в углу — только фон, клики не перехватывает */
.rb-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  left: -15%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 187, 0, .28), transparent 62%);
  pointer-events: none;
}

.rb-hero--media {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}

.rb-hero__body {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
  min-width: 0;
}

.rb-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.rb-hero__rubric {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--rb-radius-pill);
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rb-text-invert);
}

.rb-hero__rubric::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rb-gradient);
}

.rb-hero__time {
  font-size: 13px;
  color: var(--rb-text-invert-soft);
}

.rb-hero__title {
  margin: 0;
  font-size: clamp(26px, 3.9vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--rb-text-invert);
}

.rb-hero__lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--rb-text-invert-soft);
}

.rb-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: auto;
  padding-top: clamp(10px, 1.6vw, 18px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.rb-hero__date {
  font-size: 13px;
  color: var(--rb-text-invert-soft);
}

.rb-hero__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--rb-radius);
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}

.rb-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Автор: фото кругом, при отсутствии фото — инициалы на градиенте */
.rb-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rb-author__photo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  object-fit: cover;
}

.rb-author__photo--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  background: var(--rb-gradient);
  color: var(--rb-accent-ink);
  font-size: 17px;
  font-weight: 800;
}

.rb-author__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.rb-author__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--rb-text-invert);
}

.rb-author__role {
  font-size: 12px;
  color: var(--rb-text-invert-soft);
}

/* ===========================================================================
   17. РАСКЛАДКА «КОНТЕНТ + САЙДБАР»
   =========================================================================== */
.rb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 3.2vw, 52px);
  align-items: start;
}

.rb-layout__main {
  min-width: 0;
}

.rb-layout__aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ===========================================================================
   18. СОДЕРЖАНИЕ (TOC) И ПРОГРЕСС ЧТЕНИЯ
   =========================================================================== */
.rb-toc {
  padding: 16px 16px 14px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-md);
  background: var(--rb-surface);
  box-shadow: var(--rb-shadow-sm);
}

.rb-toc__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rb-text-soft);
}

.rb-toc__progress {
  height: 3px;
  margin: 0 0 12px;
  border-radius: var(--rb-radius-pill);
  background: var(--rb-border);
  overflow: hidden;
}

.rb-toc__progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--rb-gradient-x);
  transition: width .12s linear;
}

.rb-toc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  max-height: min(56vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.rb-toc__item {
  min-width: 0;
}

.rb-toc__item--h2 {
  padding-left: 0;
}

.rb-toc__item--h3 {
  padding-left: 16px;
}

.rb-toc__link {
  display: flex;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--rb-text-soft);
  text-decoration: none;
  transition: background var(--rb-dur) var(--rb-ease),
              color var(--rb-dur) var(--rb-ease);
}

.rb-toc__link:hover {
  background: var(--rb-bg);
  color: var(--rb-text);
}

.rb-toc__link.is-current {
  background: rgba(255, 89, 0, .08);
  color: var(--rb-text);
  font-weight: 600;
}

.rb-toc__num {
  flex: 0 0 auto;
  min-width: 1.9em;
  padding-top: 1px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rb-text-soft);
  opacity: .85;
}

.rb-toc__link.is-current .rb-toc__num {
  color: var(--rb-accent);
  opacity: 1;
}

.rb-toc__text {
  min-width: 0;
}

.rb-toc__link:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}

/* ===========================================================================
   19. ТИПОГРАФИКА СТАТЬИ
   Стилизуем только то, что отдал визуальный редактор. Классы не навязываем:
   контент-менеджер может вставлять любую стандартную разметку.
   =========================================================================== */
.rb-article {
  font-size: clamp(16px, 1.12vw, 18px);
  line-height: 1.72;
  color: var(--rb-text);
}

.rb-article > :first-child {
  margin-top: 0;
}

.rb-article > :last-child {
  margin-bottom: 0;
}

.rb-article p,
.rb-article ul,
.rb-article ol,
.rb-article blockquote,
.rb-article figure,
.rb-article pre,
.rb-article table,
.rb-article__scroll {
  margin: 0 0 20px;
}

.rb-article h2 {
  margin: clamp(30px, 4vw, 44px) 0 14px;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--rb-text);
  scroll-margin-top: clamp(80px, 9vw, 104px);
}

.rb-article h3 {
  margin: clamp(22px, 3vw, 32px) 0 10px;
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--rb-text);
  scroll-margin-top: clamp(80px, 9vw, 104px);
}

.rb-article h4 {
  margin: 22px 0 8px;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.35;
}

.rb-article a {
  color: var(--rb-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.rb-article a:hover {
  text-decoration-thickness: 2px;
}

.rb-article strong,
.rb-article b {
  font-weight: 700;
}

.rb-article ul,
.rb-article ol {
  padding-left: 22px;
}

.rb-article li {
  margin: 6px 0;
}

.rb-article li::marker {
  color: var(--rb-accent);
  font-weight: 700;
}

.rb-article blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 16px 20px;
  border-left: 4px solid var(--rb-accent);
  border-radius: 0 var(--rb-radius-sm) var(--rb-radius-sm) 0;
  background: var(--rb-surface);
  box-shadow: var(--rb-shadow-sm);
  font-size: 1.02em;
  color: var(--rb-text);
}

.rb-article blockquote > :last-child {
  margin-bottom: 0;
}

.rb-article img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--rb-radius-md);
}

.rb-article figure {
  margin-left: 0;
  margin-right: 0;
}

.rb-article figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rb-text-soft);
}

.rb-article hr {
  height: 0;
  margin: clamp(24px, 3vw, 36px) 0;
  border: 0;
  border-top: 1px solid var(--rb-border);
}

.rb-article code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(46, 51, 61, .06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}

.rb-article pre {
  padding: 16px 18px;
  border-radius: var(--rb-radius-sm);
  background: var(--rb-surface-dark);
  color: var(--rb-text-invert);
  overflow: auto;
}

.rb-article pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

/* Обёртка таблиц (result_modifier оборачивает <table>) — скролл на мобильных */
.rb-article__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
}

.rb-article__scroll table {
  min-width: 520px;
  margin: 0;
}

.rb-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--rb-surface);
}

.rb-article th,
.rb-article td {
  padding: 10px 14px;
  border: 1px solid var(--rb-border);
  text-align: left;
  vertical-align: top;
}

.rb-article th {
  background: var(--rb-bg);
  font-weight: 700;
}

.rb-article__empty {
  padding: 18px 20px;
  border: 1px dashed var(--rb-border-strong);
  border-radius: var(--rb-radius-md);
  color: var(--rb-text-soft);
}

/* ===========================================================================
   20. FAQ-АККОРДЕОН
   Нативный <details name="rb-faq"> — работает без JS, поддерживает
   «только один открытый» в современных браузерах; JS добавляет фолбэк.
   =========================================================================== */
.rb-faq {
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  background: var(--rb-surface);
  box-shadow: var(--rb-shadow-sm);
}

.rb-faq__title {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--rb-text);
}

.rb-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rb-faq__item {
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  background: var(--rb-bg);
  overflow: hidden;
  transition: border-color var(--rb-dur) var(--rb-ease),
              background var(--rb-dur) var(--rb-ease);
}

.rb-faq__item:hover {
  border-color: var(--rb-border-strong);
}

.rb-faq__item[open] {
  border-color: rgba(255, 89, 0, .35);
  background: var(--rb-surface);
}

.rb-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--rb-text);
  cursor: pointer;
  list-style: none;
}

.rb-faq__q::-webkit-details-marker {
  display: none;
}

.rb-faq__q:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: -2px;
  border-radius: var(--rb-radius-sm);
}

.rb-faq__q-text {
  min-width: 0;
}

/* Кружок с плюсом → минусом */
.rb-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(46, 51, 61, .06);
}

.rb-faq__icon::before,
.rb-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--rb-accent);
  transform: translate(-50%, -50%);
  transition: transform var(--rb-dur) var(--rb-ease),
              opacity var(--rb-dur) var(--rb-ease);
}

.rb-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.rb-faq__item[open] .rb-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.rb-faq__a {
  padding: 0 18px 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--rb-text-soft);
}

.rb-faq__a > :last-child {
  margin-bottom: 0;
}

.rb-faq__a p {
  margin: 0 0 10px;
}

.rb-faq__a a {
  color: var(--rb-accent);
}

/* ===========================================================================
   21. ТЕГИ, ИСТОЧНИКИ, «ПОДЕЛИТЬСЯ»
   =========================================================================== */
.rb-article-footer {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--rb-border);
}

.rb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rb-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-pill);
  background: var(--rb-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-text-soft);
}

.rb-sources {
  min-width: 0;
}

.rb-sources__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rb-text-soft);
}

.rb-sources__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rb-text-soft);
}

.rb-sources__item::marker {
  color: var(--rb-accent);
}

.rb-sources__item a {
  color: var(--rb-text);
  text-decoration: underline;
  text-decoration-color: var(--rb-border-strong);
  text-underline-offset: 3px;
  word-break: break-word;
}

.rb-sources__item a:hover {
  text-decoration-color: var(--rb-accent);
}

.rb-sources__host {
  margin-left: 8px;
  font-size: 12px;
  color: var(--rb-text-soft);
  opacity: .8;
}

/* [hidden] обязателен: иначе display:flex его перебивает (грабли шага 2) */
.rb-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
}

.rb-share[hidden] {
  display: none;
}

.rb-share__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-text-soft);
}

.rb-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rb-share__btn {
  -webkit-appearance: none;
  appearance: none;
  padding: 8px 14px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-pill);
  background: var(--rb-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-text);
  cursor: pointer;
  transition: border-color var(--rb-dur) var(--rb-ease),
              color var(--rb-dur) var(--rb-ease);
}

.rb-share__btn:hover {
  border-color: var(--rb-accent);
  color: var(--rb-accent);
}

.rb-share__btn:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}

.rb-share__status {
  font-size: 13px;
  font-weight: 600;
  color: var(--rb-accent);
}

.rb-share__status:empty {
  display: none;
}

/* ===========================================================================
   22. CTA В САЙДБАРЕ И КНОПКА
   =========================================================================== */
.rb-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--rb-radius-md);
  background: var(--rb-surface-dark);
  color: var(--rb-text-invert);
}

.rb-cta__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rb-text-invert-soft);
}

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--rb-radius-pill);
  background: var(--rb-gradient);
  box-shadow: var(--rb-shadow-accent);
  font-size: 14px;
  font-weight: 800;
  color: var(--rb-accent-ink);
  text-align: center;
  text-decoration: none;
  transition: transform var(--rb-dur) var(--rb-ease),
              box-shadow var(--rb-dur) var(--rb-ease);
}

.rb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 89, 0, .34);
}

.rb-btn:focus-visible {
  outline: 2px solid var(--rb-accent-ink);
  outline-offset: 3px;
}

/* ===========================================================================
   23. ПОХОЖИЕ И СОСЕДНИЕ СТАТЬИ
   =========================================================================== */
.rb-related {
  margin: clamp(32px, 4.4vw, 56px) 0 0;
}

.rb-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 clamp(14px, 2vw, 20px);
}

.rb-related__title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--rb-text);
}

.rb-related__all {
  font-size: 14px;
  font-weight: 600;
  color: var(--rb-text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rb-border-strong);
  transition: color var(--rb-dur) var(--rb-ease),
              border-color var(--rb-dur) var(--rb-ease);
}

.rb-related__all:hover {
  color: var(--rb-text);
  border-bottom-color: var(--rb-accent);
}

.rb-teasers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rb-teaser {
  min-width: 0;
}

.rb-teaser__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  background: var(--rb-surface);
  box-shadow: var(--rb-shadow-sm);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--rb-dur) var(--rb-ease),
              box-shadow var(--rb-dur) var(--rb-ease),
              border-color var(--rb-dur) var(--rb-ease);
}

.rb-teaser__link:hover {
  transform: translateY(-3px);
  border-color: var(--rb-border-strong);
  box-shadow: var(--rb-shadow);
}

.rb-teaser__link:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 3px;
}

.rb-teaser__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--rb-bg);
  overflow: hidden;
}

.rb-teaser__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rb-teaser__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 14px 16px 16px;
}

.rb-teaser__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--rb-text-soft);
}

.rb-teaser__date + .rb-teaser__time::before {
  content: "·";
  margin-right: 6px;
}

.rb-teaser__title {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--rb-text);
}

.rb-teaser__arrow {
  position: relative;
  width: 26px;
  height: 26px;
  margin-top: auto;
  border-radius: 50%;
  background: var(--rb-bg);
}

.rb-teaser__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  border-top: 2px solid var(--rb-accent);
  border-right: 2px solid var(--rb-accent);
  transform: rotate(45deg);
}

.rb-postnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rb-gap);
  margin: clamp(24px, 3vw, 36px) 0 0;
}

.rb-postnav__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-md);
  background: var(--rb-surface);
  color: inherit;
  text-decoration: none;
  transition: transform var(--rb-dur) var(--rb-ease),
              border-color var(--rb-dur) var(--rb-ease),
              box-shadow var(--rb-dur) var(--rb-ease);
}

.rb-postnav__item:hover {
  transform: translateY(-2px);
  border-color: var(--rb-accent);
  box-shadow: var(--rb-shadow-sm);
}

.rb-postnav__item:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}

.rb-postnav__item--prev {
  text-align: left;
}

.rb-postnav__item--next {
  text-align: right;
}

.rb-postnav__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rb-text-soft);
}

.rb-postnav__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rb-text);
}

/* ===========================================================================
   24. АДАПТИВ СТАТЬИ, ДОСТУПНОСТЬ, ПЕЧАТЬ
   =========================================================================== */
@media (max-width: 1100px) {
  .rb-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
  }
}

@media (max-width: 992px) {
  .rb-hero--media {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-hero__media {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  /* Сайдбар уходит наверх: содержание перед текстом, без sticky */
  .rb-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vw, 30px);
  }

  .rb-layout__aside {
    position: static;
    order: -1;
  }

  .rb-toc__list {
    max-height: none;
  }

  .rb-teasers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .rb-hero {
    padding: 20px 18px;
    border-radius: 22px;
  }

  .rb-teasers {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-postnav {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-postnav__item--next {
    text-align: left;
  }

  .rb-faq {
    padding: 18px 16px;
  }
}

@media (max-width: 480px) {
  .rb-author__photo {
    width: 40px;
    height: 40px;
  }

  .rb-hero__meta {
    gap: 10px;
  }

  .rb-article {
    font-size: 16px;
  }

  .rb-faq__q {
    padding: 13px 14px;
  }

  .rb-faq__a {
    padding: 0 14px 14px;
  }

  .rb-toc__item--h3 {
    padding-left: 8px;
  }
}

@media print {
  .rb-toc,
  .rb-share,
  .rb-related,
  .rb-postnav,
  .rb-cta,
  .rb-blog__crumbs {
    display: none !important;
  }

  .rb-hero {
    padding: 0 0 12px !important;
    border-radius: 0;
    background: none !important;
    color: #000000 !important;
    overflow: visible;
  }

  .rb-hero::before {
    display: none;
  }

  .rb-hero__title,
  .rb-hero__lead,
  .rb-hero__date,
  .rb-hero__time,
  .rb-author__name,
  .rb-author__role {
    color: #000000 !important;
  }

  .rb-hero__media {
    display: none !important;
  }

  .rb-faq,
  .rb-faq__item {
    border: 1px solid #CCCCCC;
    box-shadow: none;
  }

  .rb-article a {
    color: #000000;
    text-decoration: underline;
  }
}

/* End */


/* Start:/css/style.css?178643826248012*/
/* ===========================
   RESET & BASE
=========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --orange: #F5A623;
  --orange-dark: #e09510;
  --bg-dark: #0f0f1a;
  --bg-section: #f7f7f7;
  --bg-white: #ffffff;
  --text-dark: #2E333D;
  --text-mid: #444;
  --text-light: #888;
  --border: #e5e5e5;
  --header-max: 1728px;
  --content-max: 1366px;
  --radius: 12px;
  --transition: 0.25s ease;
}

html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: 'Inter';
  src: url('/css/../fonts/Inter-Regular.eot');
  src: local('Inter Regular'), local('Inter-Regular'),
    url('/css/../fonts/Inter-Regular.eot?#iefix') format('embedded-opentype'),
    url('/css/../fonts/Inter-Regular.woff2') format('woff2'),
    url('/css/../fonts/Inter-Regular.woff') format('woff'),
    url('/css/../fonts/Inter-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/css/../fonts/Inter-Medium.eot');
  src: local('Inter Medium'), local('Inter-Medium'),
    url('/css/../fonts/Inter-Medium.eot?#iefix') format('embedded-opentype'),
    url('/css/../fonts/Inter-Medium.woff2') format('woff2'),
    url('/css/../fonts/Inter-Medium.woff') format('woff'),
    url('/css/../fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/css/../fonts/Inter-SemiBold.eot');
  src: local('Inter Semi Bold'), local('Inter-SemiBold'),
    url('/css/../fonts/Inter-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('/css/../fonts/Inter-SemiBold.woff2') format('woff2'),
    url('/css/../fonts/Inter-SemiBold.woff') format('woff'),
    url('/css/../fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/css/../fonts/Inter-Bold.eot');
  src: local('Inter Bold'), local('Inter-Bold'),
    url('/css/../fonts/Inter-Bold.eot?#iefix') format('embedded-opentype'),
    url('/css/../fonts/Inter-Bold.woff2') format('woff2'),
    url('/css/../fonts/Inter-Bold.woff') format('woff'),
    url('/css/../fonts/Inter-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background: #F5F7FA;
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===========================
   LAYOUT HELPERS
=========================== */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===========================
   BUTTONS
=========================== */
.btn-orange {
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}

.btn-orange:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-orange:active {
  transform: translateY(0);
}

.btn-lg {
  padding: 14px 36px;
  font-size: 16px;
}

.btn-sm {
  padding: 8px 18px;
  font-size: 13px;
}

.btn-full {
  width: 100%;
}

/* ===========================
   HEADER
=========================== */
.header {
  background: #F5F7FA;
  height: 70px;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  /* ВАЖНО: позиционируем хедер, чтобы оверлей был внутри него */
  z-index: 1000;
  margin-top: 30px;
  margin-bottom: 30px;
}

@media screen and (max-width: 992px) {
  .header {
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.header-inner {
  max-width: calc(1920px - 192px);
  margin: 0 auto;
  padding: 10px 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 30px;
  background: #fff;
  position: relative;
  /* Важно для десктопного меню */
  z-index: 2;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1a1a2e;
}

.logo img {
  height: 30px;
  width: auto;
}

.nav {
  display: flex;
  gap: 30px;
}

.nav a {
  text-decoration: none;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #F5A623;
}

.actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ----- Модальное окно выбора города (Ваше старое) ----- */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2000;
  justify-content: flex-end;
  align-items: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: #ffffff;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  min-height: 100vh;
  height: auto;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 26px;
  color: #888;
  background: #F5F7FA;
  border: none;
  transition: color 0.2s;
  height: 50px;
  width: 50px;
  border-radius: 10px;
}

.modal-close:hover {
  color: #333;
}

.modal-title {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1A2B4C;
}

.modal-title {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1A2B4C;
}

.city-list {
  display: grid;
  margin-top: 20px;
  grid-template-columns: 1fr;
  gap: 10px;
}

.city-list .custom-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 17px;
  color: #2E333D;
  user-select: none;
  border-bottom: 1px #F5F7FA solid;
  justify-content: space-between;
  padding-bottom: 15px;
  padding-top: 15px;
}

.search-wrapper {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 22px 40px 22px 16px;
  background-color: #f3f4f6;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  outline: none;
  box-sizing: border-box;
}

.search-input:focus {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #e5e7eb;
}

.search-icon {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.btn-phone {
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  color: #ffffff !important;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.btn-phone:hover {
  opacity: 0.9;
}

.region-selector {
  background-color: #f4f6f8;
  border: 0px;
  border-radius: 30px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}

.region-selector:before {
  content: '';
  display: block;
  position: relative;
  width: 11px;
  height: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/css/../img/pin.svg');
  background-size: contain;
}

.region-selector:hover {
  background-color: #eef0f2;
}

.region-selector span {
  font-size: 14px;
  color: #1a1a2e;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 35px;
  height: 35px;
  background-color: #F5F7FA;
  border: none;
  cursor: pointer;
  padding: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/css/../img/burger.svg');
  background-size: 15px auto;
}

.region-selector-mobile {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 35px;
  height: 35px;
  background-color: #F5F7FA;
  border: none;
  cursor: pointer;
  padding: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/css/../img/pin.svg');
  background-size: 15px auto;
}

/* ========================================
   MOBILE NAVIGATION (НОВОЕ, как в модалке)
======================================== */
.mobile-nav-wrapper {
  display: none;
  position: fixed;
  /* Позиционируется относительно header */
  top: 0;
  /* Сразу под header-ом */
  left: 0;
  width: 100%;
  height: 100dvh;
  /* Высота = экран минус высота хедера */
  z-index: 9999;
}

.mobile-nav-wrapper.active {
  display: block;
}

/* Оверлей внутри враппера */
.mobile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* Темный полупрозрачный слой */
  backdrop-filter: blur(2px);
  /* Размытие (опционально) */
}

/* Само меню (окно) */
.mobile-nav {
  position: absolute;
  top: 0;
  left: 0;
  /* Прижимаем к правому краю */
  width: 100%;
  max-width: 480px;
  /* Ширина как на планшете */
  height: 100%;
  background: #ffffff;
  padding: 24px 28px;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateX(100%);
  /* Скрыто за правым краем */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
  /* Скругление слева */
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.mobile-nav-wrapper.active .mobile-nav {
  transform: translateX(0);
  /* Выезжает */
}

@media (max-width: 599px) {
  .mobile-nav {
    max-width: 100%;
    border-radius: 0;
    /* На телефоне скругление сверху */
    transform: translateY(100%);
    /* Скрыто снизу */
  }

  .mobile-nav-wrapper.active .mobile-nav {
    transform: translateY(0);
  }
}

/* Шапка внутри меню */
.mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}

.mobile-close {
  width: 40px;
  height: 40px;
  background: #F2F4F7;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.mobile-close:hover {
  background: #e5e7eb;
}

/* Ссылки */
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.mobile-nav-links a {
  text-decoration: none;
  color: #2E333D;
  font-size: 16px;
  font-weight: 500;
  transition: color 0.2s;
}

.mobile-nav-links a:hover {
  color: var(--orange);
}

/* Подвал (Колонки) */
.mobile-nav-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-label {
  font-size: 14px;
  color: #2E333D;
  font-weight: 600;
}

/* Оранжевые кнопки контактов */
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  min-width: 150px;
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  border-radius: 30px;
  text-align: center;
  transition: opacity 0.2s;
}

.contact-btn:hover {
  opacity: 0.9;
}

/* Соцсети */
.social-icons {
  display: flex;
  gap: 10px;
}

/* Планшетная версия */
@media (min-width: 600px) {
  .mobile-nav-footer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-col {
    flex: 1;
    min-width: 120px;
  }

  .footer-col.socials-col {
    flex: 0 0 auto;
    align-items: flex-start;
  }
}

/* Адаптивность хедера */
@media (max-width: 992px) {

  .nav,
  .actions {
    display: none;
  }

  .burger {
    margin-left: auto;
    margin-right: 15px;
  }

  .burger,
  .region-selector-mobile {
    display: flex;
  }
}


/* ===========================
   ОСТАЛЬНЫЕ СТИЛИ СТРАНИЦЫ
=========================== */
/* STATS BAR */
.stats-container {
  max-width: calc(1920px - 192px);
  margin: 0 auto;
}

@media (max-width: 992px) {
  .stats-container {
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.stats-box {
  background-color: #ffffff;
  border-radius: 30px;
  padding: 24px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 992px) {
  .stats-box {
    padding: 20px;
  }
}

.stats-text {
  flex: 1;
  min-width: 250px;
}

.stats-text h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 4px 0;
}

.stats-text p {
  font-size: 14px;
  color: #5a6874;
  margin: 0;
}

.stats-list {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-badge {
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  color: white;
  font-weight: 700;
  font-size: 24px;
  padding: 8px 16px;
  border-radius: 8px;
  line-height: 1;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .stat-badge {
    padding: 8px 12px;
  }
      .nav, .actions {
        display: flex;
    }
	.actions .btn-phone{display:none;}
	.region-selector-mobile{display:none !important;}
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .stats-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-list {
    width: 100%;
    justify-content: space-between;
  }
}

@media screen and (max-width: 767px) {
  .stats-list {
	display:none;
    
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px 20px;
    justify-content: flex-start;
  }

  .stat-item {
    flex-wrap: nowrap;
  }

  .stat-label {
    font-size: 12px;
  }

  .stat-badge {
    font-size: 20px;
    padding: 4px 8px;
  }
}

/* HERO */
.hero-bottom {
  font-family: 'Inter';
  max-width: calc(1920px - 192px);
  margin: 0 auto;
  margin-top: 21px;
  margin-bottom: 30px;
}

.hero-bottom .hero-bg {
  position: relative;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 30px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 631px;
  padding-top: 41px;
  background-image: url('/css/../img/Component_4.png');
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 50px 60px;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title {
  font-size: clamp(5rem, 2.5vw, 2.625rem);
  font-weight: 900;
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 0;
  line-height: 0.9;
  letter-spacing: -2px;
}

.hero-sub {
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  margin-top: 15px;
  margin-bottom: 10px;
}

.hero-desc {
  font-size: 14px;
  color: #E0E0E0;
  margin-bottom: 30px;
  line-height: 1.5;
}

.hero-btns {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 320px;
}

.hero-top {
  font-family: 'Inter';
  max-width: calc(1920px - 192px);
  margin: 0 auto;
  margin-top: 44px;
  margin-bottom: 30px;
}

.hero-top .hero-content {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.hero-top picture,
.hero-top img {
  width: 100%;
}

.hero-top .hero-bg {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.btn-orange.btn-lg {
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  color: #FFFFFF;
  border: none;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
}

.btn-orange.btn-lg:hover {
  background-color: #f09100;
  opacity: 0.9;
}

.btn-glass.btn-lg {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
}

.btn-glass.btn-lg:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 992px) {
  .hero-top {
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-content {
    max-width: 70%;
    padding: 40px;
  }

  .hero-title {
    font-size: 60px;
  }
}

@media (max-width: 768px) {
  .hero-content {
    max-width: 100%;
    padding: 30px;
    align-items: start;
    text-align: left;
  }

  .hero-title {
    font-size: 42px;
  }

  .hero-sub {
    font-size: 12px;
  }

  .hero-top {
    margin-bottom: 0px;
  }

  .btn-orange.btn-lg {
    font-size: 11px;
    width: 70%;
  }

  .btn-glass.btn-lg {
    font-size: 11px;
    width: 70%;
  }

  .hero-desc {
    font-size: 10px;
    width: 60%;
    margin-bottom: 20px;
  }

  .hero-btns {
    max-width: 100%;
  }
}

/* SECTION BASE */
.section {
  padding: 64px 0;
}

.section-title {
  font-size: 35px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.section-title.centered {
  text-align: center;
}

.section-sub {
  font-size: 25px;
  color: #1A2B4C;
  margin-bottom: 36px;
  font-weight: 500;
}

.section-sub.centered {
  text-align: center;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

/* SLIDER COMMON */
.slider-wrapper {
  overflow: hidden;
  position: relative;
}

.arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #727C83;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}

.arrow-btn:hover {
  border-color: var(--orange);
  background: var(--orange);
}

.arrow-btn:hover svg path {
  stroke: #fff;
}

.slider-arrows {
  display: flex;
  gap: 8px;
  margin-right: 20px;
}

/* MOTO CARDS SLIDER */
.in-stock {}

.cards-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.moto-card {
  min-width: 23.5%;
  flex-shrink: 0;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.moto-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.card-img {
  height: 180px;
  overflow: hidden;
  background: #f0f0f0;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.moto-card:hover .card-img img {
  transform: scale(1.05);
}

.card-body {
  padding: 16px;
}

.card-name {
  font-size: 15px;
  color: var(--text-mid);
  margin-bottom: 6px;
  line-height: 23px;
  font-weight: 600;
}

.card-price {
  font-size: 25px;
  font-weight: 600;
  color: #2E333D;
  margin-bottom: 12px;
}

.card-credit {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 400;
  right: 20px;
  position: absolute;
  margin-top: 10px;
  text-decoration: line-through;
}

.card-body .btn-orange {
  width: 100%;
  font-size: 17px;
  padding: 20px 10px;
}

.show-all-link {
  text-align: right;
  margin-top: 36px;
  margin-right: 20px;
}

.show-all-link a {
  color: #2E333D;
  font-size: 15px;
  font-weight: 600;
  transition: opacity var(--transition);
  background: #FFFFFF;
  border-radius: 30px;
  padding: 20px 70px;
}

.show-all-link a:hover {
  opacity: 0.75;
}

/* FIND IN 2 STEPS */
.section-head {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 40px;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a233a;
  margin: 0 0 10px 0;
}

.section-sub {
  font-size: 16px;
  color: #5a6874;
  margin: 0;
}

.find-grid {
  display: flex;
  gap: 40px;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.find-form-wrap {
  width: 55%;
  padding: 30px;
}

.form-group {
  margin-bottom: 16px;
}

.form-input {
  width: 100%;
  padding: 14px 18px;
  background: #f4f6f9;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  color: #1a233a;
  outline: none;
  transition: background 0.2s;
}

.form-input::placeholder {
  color: #8a9aa8;
}

.form-input:focus {
  background: #eef1f5;
}

.checkbox-group-wrapper .group-label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: #1a233a;
  margin-bottom: 12px;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #2c3e50;
  user-select: none;
}

.custom-checkbox input {
  display: none;
}

.custom-checkbox .checkmark {
  width: 16px;
  height: 16px;
  border: 2px solid #d1dbe5;
  transform: rotate(45deg);
  border-radius: 2px;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}

.custom-checkbox input:checked+.checkmark {
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  border-color: #F5A623;
  border: 0px;
}

.custom-checkbox input:checked+.checkmark::after {
  content: "✔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 10px;
}

.btn-submit:hover {
  opacity: 0.9;
}

.find-steps-wrap {
  width: 45%;
  background-color: #1a233a;
  border-radius: 20px;
  position: relative;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}

.steps-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
  background-image: url('/css/../img/find-steps-list.png');
  background-size: cover;
}

.step-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.step-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  transform: rotate(45deg);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-icon span {
  transform: rotate(-45deg);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.step-content .step-title {
  font-weight: 700;
  font-size: 15px;
  color: #1a233a;
  margin: 0 0 2px 0;
}

.step-content .step-desc {
  font-size: 13px;
  color: #5a6874;
  margin: 0;
}

@media (max-width: 900px) {
  .find-grid {
    flex-direction: column;
    gap: 10px;
  }

  .find-steps-wrap {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 30px 20px;
  }

  .step-card {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 500px) {
  .checkbox-grid {
    flex-direction: row;
    gap: 26px;
  }

  .find-steps-wrap {
    flex-direction: column;
  }

  .step-card {
    width: 100%;
  }
}

/* WHY ROMBIK */
.why-section {}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.why-card {
  padding: 28px 24px;
  background: #fff;
  border-radius: var(--radius);
  transition: box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.whySwiper .swiper-slide {
  height: auto;
  display: flex;
}

.why-card .why-icon {
  justify-content: center;
  width: 100%;
  text-align: center;
  display: flex;
}

.why-card .why-icon img {
  width: 80%;
}

.why-card .why-btn {
  width: 100%;
  height: 60px;
  font-size: 17px;
  font-weight: 700;
  margin-top: auto;
}

.why-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border-color: var(--orange);
}

.why-title {
  font-size: 25px;
  font-weight: 600;
  color: var(--text-dark);
}

.why-desc {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-mid);
  line-height: 1.6;
  flex: 1;
}

.why-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* PAYMENT SECTION */
.payment-section {
  background-color: #F5F7FA;
  padding: 60px 20px;
  font-family: Arial, sans-serif;
}

.payment-cards {
 
  display: flex;
  flex-wrap: wrap; 
  gap: 20px;
  
  align-items: stretch; 
}

.pay-card {
  flex: 1 1 0; 
  min-width: 200px;

  background: #FFFFFF;
  border-radius: 20px;
  padding: 20px 15px 10px;
  display: flex;
  flex-direction: column;
 
  align-items: flex-start;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.pay-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}



.pay-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.badge-green { background-color: #4CAF50; }
.badge-light-green { background-color: #8BC34A; }
.badge-blue { background-color: #03A9F4; }
.badge-purple { background-color: #9C27B0; }
.badge-pink { background-color: #E91E63; }

.pay-price {
  font-size: 24px;
  font-weight: 800;
  color: #1a2634;
  margin-bottom: 12px;
}

.pay-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 15px;
}

.pay-tags span {
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  border-radius: 30px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 500;
  color: #333;
  display: inline-block;
  text-align: center;
  width: fit-content;
}

.pay-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: 0; 
  display: block;
  
}

.payment-cards .swiper-wrapper {
  display: flex;
  align-items: stretch; /* Растягиваем все слайды по высоте */
}

.payment-cards .swiper-slide {
  height: auto !important; 
  display: flex;
  flex-direction: column;
}


.pay-card {
  flex: 1; 
  display: flex;
  flex-direction: column;
  height: 100%; 
}


.pay-card img {
  margin-top: auto; 
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 992px) {
  .payment-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .payment-cards {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .pay-price {
    font-size: 20px;
  }

  .section-title.centered {
    font-size: 23px !important;
  }

  .how-title {
    text-align: center;
  }

  .how-desc {
    text-align: center;
  }
}

/* CREDIT SECTION */
.credit-section {
  background-color: #F5F7FA;
  padding: 10px 20px;
  font-family: Arial, sans-serif;
}

.section-title.centered {
  text-align: center;
  color: #1a2634;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-sub.centered {
  text-align: center;
  color: #2c3e50;
  font-size: 18px;
  margin-bottom: 40px;
}

.credit-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

.cf-item {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.cf-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.cf-item h4 {
  font-size: 20px;
  font-weight: 700;
  color: #1a2634;
  margin: 0;
}

.cf-badge {
  display: inline-block;
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 30px;
  width: fit-content;
}

.cf-item p {
  font-size: 14px;
  color: #34495e;
  line-height: 1.6;
  margin: 0;
}

.credit-grid {
  display: flex;
  gap: 40px;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.credit-form-wrap {
  width: 55%;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 16px;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  background-color: #F2F5F8;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #FFA000;
  background-color: #FFFFFF;
}

.form-input::placeholder {
  color: #5d6d7e;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  color: #2c3e50;
  line-height: 1.5;
  margin-bottom: 20px;
  margin-top: 5px;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #FFA000;
}

.link-orange {
  color: #FFA000;
  text-decoration: none;
}

.link-orange:hover {
  text-decoration: underline;
}

.btn-orange.btn-full {
  width: 100%;
  background-color: #FFA000;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-orange.btn-full:hover {
  background-color: #f09100;
}

.credit-benefits-wrapper {
  width: 45%;
  background-color: #1A2B4C;
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-image: url(/css/../img/find-steps-list.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.benefit-item {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.benefit-item:last-child {
  margin-bottom: 0;
}

.benefit-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  border-radius: 3px;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.benefit-icon::before {
  content: attr(data-number);
  display: block;
  transform: rotate(-45deg);
}

.benefit-item:nth-child(1) .benefit-icon::before {
  content: "1";
}

.benefit-item:nth-child(2) .benefit-icon::before {
  content: "2";
}

.benefit-item:nth-child(3) .benefit-icon::before {
  content: "3";
}

.benefit-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.benefit-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a2634;
  margin: 0;
}

.benefit-desc {
  font-size: 13px;
  color: #2c3e50;
  margin: 0;
}

@media (max-width: 992px) {
  .credit-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .credit-grid {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .credit-features {
    grid-template-columns: 1fr;
  }

  .credit-form-wrap {
    padding: 20px;
    width: 100%;
  }

  .credit-benefits-wrapper {
    width: 100%;
  }

  .benefit-item {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .partner-logo {
    max-width: 100%;
  }

  .section-title.centered {
    font-size: 24px;
  }
}

/* HOW IT WORKS */
.how-section {
  background-color: #f4f6f9;
  padding: 60px 0;
  font-family: sans-serif;
}

.how-steps {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.how-step {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 15px 20px;
  flex: 1;
  min-width: 180px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  margin-top: 15px;
}

.how-num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 28px;
  height: 28px;
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-num span {
  transform: rotate(-45deg);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
}

.how-title {
  margin: 0 0 6px 0;
  color: #2a3342;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.how-desc {
  margin: 0;
  color: #556070;
  font-size: 15px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .how-steps {
    flex-direction: column;
    align-items: center;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: left !important;
    gap: 10px !important;
    border-top: 0px !important;
  }

  .footer-bottom span {
    margin: 0 !important;
  }

  .how-step {
    width: 100%;
    max-width: 300px;
  }

  .partner-logo {
    max-width: 100% !important;
  }
}

/* PARTNERS */
.partners-section {}

.partners-track {
  display: flex;
  gap: 15px;
  transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  align-items: center;
  padding: 8px 0;
}

.partner-logo {
  max-width: 23%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-mid);
  letter-spacing: 1px;
  flex-shrink: 0;
  transition: all var(--transition);
  padding: 40px;
}

.partner-logo:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: scale(1.03);
}

/* FOOTER */
.site-footer {
  background-color: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 40px 60px;
  max-width: 1366px;
  margin: 0 auto;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
  font-size: 14px;
  color: #333;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 30px;
}

.col-logo {
  flex: 1.5;
  min-width: 0;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.col-logo p {
  color: #2E333D;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 75%;
}

.col-links {
  flex: 1;
}

.col-links ul {
  list-style: none;
}

.col-links li {
  margin-bottom: 12px;
}

.col-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.col-links a:hover {
  color: #FFA000;
}

.col-contacts {
  flex: 1.5;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-group a {
  width: 100%;
}

.contact-group span {
  font-weight: 600;
  font-size: 13px;
}

.col-links,
.col-contacts,
.col-socials {
  flex: 1;
  min-width: 0;
}

.orange-btn {
  display: flex;
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  transition: background-color 0.3s;
  width: fit-content;
  min-width: 140px;
  height: 50px;
  justify-content: center;
  align-items: center;
}

.orange-btn:hover {
  background-color: #f09100;
  opacity: 0.9;
}

.col-socials {
  flex: 1;
  min-width: 150px;
}

.col-socials span {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #FFBB00, #FF5900);
  color: white;
  fill: white;
  transition: opacity 0.3s;
}

.social-icon:hover {
  opacity: 0.8;
}

.social-icon svg {
  width: 20px;
  height: 20px;
}

.footer-divider {
  border: none;
  border-top: 1px solid #EAEAEA;
  margin: 20px 0;
}

.footer-legal h4 {
  color: #2E333D;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-legal p {
  font-size: 14px;
  color: #2E333D;
  margin-bottom: 5px;
}

.footer-tabs {
  max-width: 1200px;
  font-family: "Inter";
  background: #fff;
}

.tabs-nav {
  display: flex;
  gap: 30px;
  margin-bottom: 10px;
}

.tab-btn {
  font-weight: 700;
  font-size: 15px;
  color: #1a233a;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  position: relative;
  padding-right: 20px;
}

.tab-btn .arrow {
  transform: rotateX(-180deg);
  width: 10px;
  height: 10px;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('/css/../img/chevron.svg');
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.tab-btn.active .arrow {
  transform: rotateX(0deg);
}

.tabs-content {}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.tab-pane ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5a6a;
}

.tab-pane ol li {
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .tabs-nav {
    flex-direction: column;
    gap: 10px;
  }

  .tab-btn {
    border-bottom: 1px solid #eef0f2;
    padding-bottom: 10px;
  }

  .tab-btn.active {
    border-bottom: 2px solid #F5A623;
  }
}

.footer-bottom {
  text-align: center;
  font-size: 12px;
  color: #333;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
}

.footer-bottom span {
  margin: 0 15px;
}

.footer-bottom a {
  color: #333;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 30px 20px;
  }

  .footer-top {
    flex-direction: column;
    gap: 30px;
  }

  .col-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .col-contacts {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .col-socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* RESPONSIVE */
@media ((min-width: 769px) and (max-width: 1600px)) {
  .header-inner {
    max-width: calc(100% - 50px) !important;
    margin: 0 auto;
    padding: 10px 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 30px;
    background: #fff;
  }

  .stats-container {
    max-width: calc(100% - 50px) !important;
    margin: 0 auto;
  }

  .hero-top {
    font-family: 'Inter';
    max-width: calc(100% - 50px) !important;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .hero-bottom {
    font-family: 'Inter';
    max-width: calc(100% - 50px) !important;
    margin: 0 auto;
    margin-top: 21px;
    margin-bottom: 30px;
  }
}

@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .footer-brand {
    grid-column: 1;
  }

  .footer-nav {
    grid-column: 2;
  }

  .footer-cta {
    grid-column: 1;
  }

  .footer-social {
    grid-column: 2;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .credit-features {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .find-grid {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr 1fr;
  }

  .credit-grid {
    grid-template-columns: 1fr;
  }

  .how-arrow {
    display: none;
  }

  .how-steps {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .nav {
    display: none;
  }

  .header-right {
    display: none;
  }

  .burger {
    display: flex;
    margin-right: 10px;
  }

  .stats-bar-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  .stat-divider {
    display: none;
  }

  .hero-btns {
    flex-direction: column;
  }

  .hero-btns button {
    width: 100%;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .credit-features {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    padding: 32px 16px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 20px;
  }

  .footer-bottom .footer-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 12px;
  }

  .section {
    padding: 40px 0;
  }

  .how-steps {
    flex-direction: column;
    align-items: center;
  }

  .how-step {
    max-width: none;
    flex-direction: row;
    text-align: left;
  }

  .pay-card {
    min-height: 280px;
  }

  .why-card {
    min-height: 552px;
  }

  .hero-bottom .hero-bg {
    min-height: 317px;
    padding-top: 0;
    background-size: contain;
    background-image: url(/css/../img/banner_mobile_2.png);
  }
}

@media (max-width: 480px) {
  .header-inner {
    border-radius: 20px;
  }

  .region-selector-mobile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35px;
    height: 35px;
    background-color: #F5F7FA;
    border: none;
    cursor: pointer;
    padding: 0;
    border: 10px;
    padding: 7px;
  }

  .find-form-wrap {
    width: 100%;
  }

  .moto-card {
    min-width: 240px;
  }

  .section-title {
    font-size: 22px;
  }

  .hero-title {
    font-size: 42px;
  }
}

/* Scroll reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .cards-track,
  .partners-track {
    transition: none !important;
  }
}

.custom-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 10px;
  color: #2E333D;
  margin-bottom: 16px;
}

.custom-checkbox-wrapper label {
  display: flex;
  align-items: center;
}

.custom-checkbox-wrapper a {
  font-weight: bold;
  text-decoration: underline;
  line-height: normal;
}

.custom-checkbox-input {
  display: none;
}

.custom-checkbox-input+.agreement-text::before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url('/css/../img/check_dis.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.2s ease;
}

.custom-checkbox-input:checked+.agreement-text::before {
  background-image: url('/css/../img/check_en.svg');
}

.whySwiper {
  width: 100%;
  padding-bottom: 40px;
  margin-top: 30px;
}

.paySwiper {
  width: 100%;
  padding-bottom: 40px;
  margin-top: 30px;
}

@media (min-width: 769px) {

  .whySwiper .swiper-pagination,
  .whySwiper .swiper-button-prev,
  .whySwiper .swiper-button-next {
    display: none !important;
  }

  .whySwiper {
    padding-bottom: 0;
  }

  .whySwiper .swiper-wrapper {
    transform: none !important;
  }

  .paySwiper .swiper-pagination,
  .paySwiper .swiper-button-prev,
  .paySwiper .swiper-button-next {
    display: none !important;
  }

  .paySwiper {
    padding-bottom: 0;
  }

  .paySwiper .swiper-wrapper {
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .slider-arrows {
    display: none;
  }

  .swiper-button-prev,
  .swiper-button-next {
    color: #ff7a00;
    background: #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none !important;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 18px;
    font-weight: bold;
  }

  .swiper-button-prev {
    left: 10px;
  }

  .swiper-button-next {
    right: 10px;
  }

  .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    /* display: none !important; */
  }

  .swiper-pagination-bullet-active {
    background: #ff7a00;
  }

  .swiper-pagination {
    bottom: 0 !important;
  }
}

.breadcrumb {
  margin-bottom: 16px;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #727C83;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item:not(:first-child)::before {
  content: "›";
  margin-right: 8px;
  color: #727C83;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}

.breadcrumb__link {
  color: #727C83;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb__link:hover {
  color: #727C83;
  text-decoration: underline;
}

.breadcrumb__link:focus-visible {
  outline: 2px solid #727C83;
  outline-offset: 2px;
  border-radius: 2px;
}

.breadcrumb__item--current .breadcrumb__text {
  color: #727C83;
  font-weight: 500;
}

.breadcrumb__text {
  display: inline-block;
}

@media (max-width: 480px) {
  .breadcrumb__list {
    font-size: 13px;
    gap: 2px 6px;
  }

  .breadcrumb__item:not(:first-child)::before {
    font-size: 16px;
    margin-right: 6px;
  }
}

.swiper .swiper-pagination {height: 20px;top:100%;}
.swiper .swiper-pagination-bullet {height: 15px;width:15px;border-radius:50%;}
.swiper .swiper-pagination-bullet-active {
  height: 15px;width:15px;border-radius:50%;
      background: linear-gradient(to right, #FFBB00, #FF5900);
}

.paySwiper .swiper-wrapper, .whySwiper .swiper-wrapper {box-sizing: border-box;padding-bottom: 30px;}

/* End */


/* Start:/css/grid.css?1786438262100623*/

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

.grid {
    display               : grid;
    grid-template-rows    :repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns :repeat(var(--bs-columns, 12), 1fr);
    gap                   : var(--bs-gap, 1.5rem)
}

.grid .g-col-1 {
    grid-column : auto/span 1
}

.grid .g-col-2 {
    grid-column : auto/span 2
}

.grid .g-col-3 {
    grid-column : auto/span 3
}

.grid .g-col-4 {
    grid-column : auto/span 4
}

.grid .g-col-5 {
    grid-column : auto/span 5
}

.grid .g-col-6 {
    grid-column : auto/span 6
}

.grid .g-col-7 {
    grid-column : auto/span 7
}

.grid .g-col-8 {
    grid-column : auto/span 8
}

.grid .g-col-9 {
    grid-column : auto/span 9
}

.grid .g-col-10 {
    grid-column : auto/span 10
}

.grid .g-col-11 {
    grid-column : auto/span 11
}

.grid .g-col-12 {
    grid-column : auto/span 12
}

.grid .g-start-1 {
    grid-column-start : 1
}

.grid .g-start-2 {
    grid-column-start : 2
}

.grid .g-start-3 {
    grid-column-start : 3
}

.grid .g-start-4 {
    grid-column-start : 4
}

.grid .g-start-5 {
    grid-column-start : 5
}

.grid .g-start-6 {
    grid-column-start : 6
}

.grid .g-start-7 {
    grid-column-start : 7
}

.grid .g-start-8 {
    grid-column-start : 8
}

.grid .g-start-9 {
    grid-column-start : 9
}

.grid .g-start-10 {
    grid-column-start : 10
}

.grid .g-start-11 {
    grid-column-start : 11
}


.row {
    --bs-gutter-x : 1.5rem;
    --bs-gutter-y : 0;
    display       : flex;
    flex-wrap     : wrap;
    margin-top    : calc(-1 * var(--bs-gutter-y));
    margin-right  : calc(-0.5 * var(--bs-gutter-x));
    margin-left   : calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
    flex-shrink   : 0;
    width         : 100%;
    max-width     : 100%;
    padding-right : calc(var(--bs-gutter-x) * 0.5);
    padding-left  : calc(var(--bs-gutter-x) * 0.5);
    margin-top    : var(--bs-gutter-y);
}

.col {
    flex : 1 0 0;
}

.row-cols-auto > * {
    flex  : 0 0 auto;
    width : auto;
}

.row-cols-1 > * {
    flex  : 0 0 auto;
    width : 100%;
}

.row-cols-2 > * {
    flex  : 0 0 auto;
    width : 50%;
}

.row-cols-3 > * {
    flex  : 0 0 auto;
    width : 33.33333333%;
}

.row-cols-4 > * {
    flex  : 0 0 auto;
    width : 25%;
}

.row-cols-5 > * {
    flex  : 0 0 auto;
    width : 20%;
}

.row-cols-6 > * {
    flex  : 0 0 auto;
    width : 16.66666667%;
}

.col-auto {
    flex  : 0 0 auto;
    width : auto;
}

.col-1 {
    flex  : 0 0 auto;
    width : 8.33333333%;
}

.col-2 {
    flex  : 0 0 auto;
    width : 16.66666667%;
}

.col-3 {
    flex  : 0 0 auto;
    width : 25%;
}

.col-4 {
    flex  : 0 0 auto;
    width : 33.33333333%;
}

.col-5 {
    flex  : 0 0 auto;
    width : 41.66666667%;
}

.col-6 {
    flex  : 0 0 auto;
    width : 50%;
}

.col-7 {
    flex  : 0 0 auto;
    width : 58.33333333%;
}

.col-8 {
    flex  : 0 0 auto;
    width : 66.66666667%;
}

.col-9 {
    flex  : 0 0 auto;
    width : 75%;
}

.col-10 {
    flex  : 0 0 auto;
    width : 83.33333333%;
}

.col-11 {
    flex  : 0 0 auto;
    width : 91.66666667%;
}

.col-12 {
    flex  : 0 0 auto;
    width : 100%;
}

.offset-1 {
    margin-left : 8.33333333%;
}

.offset-2 {
    margin-left : 16.66666667%;
}

.offset-3 {
    margin-left : 25%;
}

.offset-4 {
    margin-left : 33.33333333%;
}

.offset-5 {
    margin-left : 41.66666667%;
}

.offset-6 {
    margin-left : 50%;
}

.offset-7 {
    margin-left : 58.33333333%;
}

.offset-8 {
    margin-left : 66.66666667%;
}

.offset-9 {
    margin-left : 75%;
}

.offset-10 {
    margin-left : 83.33333333%;
}

.offset-11 {
    margin-left : 91.66666667%;
}

.g-0,
.gx-0 {
    --bs-gutter-x : 0;
}

.g-0,
.gy-0 {
    --bs-gutter-y : 0;
}

.g-1,
.gx-1 {
    --bs-gutter-x : 0.25rem;
}

.g-1,
.gy-1 {
    --bs-gutter-y : 0.25rem;
}

.g-2,
.gx-2 {
    --bs-gutter-x : 0.5rem;
}

.g-2,
.gy-2 {
    --bs-gutter-y : 0.5rem;
}

.g-3,
.gx-3 {
    --bs-gutter-x : 1rem;
}

.g-3,
.gy-3 {
    --bs-gutter-y : 1rem;
}

.g-4,
.gx-4 {
    --bs-gutter-x : 1.5rem;
}

.g-4,
.gy-4 {
    --bs-gutter-y : 1.5rem;
}

.g-5,
.gx-5 {
    --bs-gutter-x : 3rem;
}

.g-5,
.gy-5 {
    --bs-gutter-y : 3rem;
}


@media (min-width : 576px) {
    .col-sm {
        flex : 1 0 0;
    }

    .row-cols-sm-auto > * {
        flex  : 0 0 auto;
        width : auto;
    }

    .row-cols-sm-1 > * {
        flex  : 0 0 auto;
        width : 100%;
    }

    .row-cols-sm-2 > * {
        flex  : 0 0 auto;
        width : 50%;
    }

    .row-cols-sm-3 > * {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .row-cols-sm-4 > * {
        flex  : 0 0 auto;
        width : 25%;
    }

    .row-cols-sm-5 > * {
        flex  : 0 0 auto;
        width : 20%;
    }

    .row-cols-sm-6 > * {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-sm-auto {
        flex  : 0 0 auto;
        width : auto;
    }

    .col-sm-1 {
        flex  : 0 0 auto;
        width : 8.33333333%;
    }

    .col-sm-2 {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-sm-3 {
        flex  : 0 0 auto;
        width : 25%;
    }

    .col-sm-4 {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .col-sm-5 {
        flex  : 0 0 auto;
        width : 41.66666667%;
    }

    .col-sm-6 {
        flex  : 0 0 auto;
        width : 50%;
    }

    .col-sm-7 {
        flex  : 0 0 auto;
        width : 58.33333333%;
    }

    .col-sm-8 {
        flex  : 0 0 auto;
        width : 66.66666667%;
    }

    .col-sm-9 {
        flex  : 0 0 auto;
        width : 75%;
    }

    .col-sm-10 {
        flex  : 0 0 auto;
        width : 83.33333333%;
    }

    .col-sm-11 {
        flex  : 0 0 auto;
        width : 91.66666667%;
    }

    .col-sm-12 {
        flex  : 0 0 auto;
        width : 100%;
    }

    .offset-sm-0 {
        margin-left : 0;
    }

    .offset-sm-1 {
        margin-left : 8.33333333%;
    }

    .offset-sm-2 {
        margin-left : 16.66666667%;
    }

    .offset-sm-3 {
        margin-left : 25%;
    }

    .offset-sm-4 {
        margin-left : 33.33333333%;
    }

    .offset-sm-5 {
        margin-left : 41.66666667%;
    }

    .offset-sm-6 {
        margin-left : 50%;
    }

    .offset-sm-7 {
        margin-left : 58.33333333%;
    }

    .offset-sm-8 {
        margin-left : 66.66666667%;
    }

    .offset-sm-9 {
        margin-left : 75%;
    }

    .offset-sm-10 {
        margin-left : 83.33333333%;
    }

    .offset-sm-11 {
        margin-left : 91.66666667%;
    }

    .g-sm-0,
    .gx-sm-0 {
        --bs-gutter-x : 0;
    }

    .g-sm-0,
    .gy-sm-0 {
        --bs-gutter-y : 0;
    }

    .g-sm-1,
    .gx-sm-1 {
        --bs-gutter-x : 0.25rem;
    }

    .g-sm-1,
    .gy-sm-1 {
        --bs-gutter-y : 0.25rem;
    }

    .g-sm-2,
    .gx-sm-2 {
        --bs-gutter-x : 0.5rem;
    }

    .g-sm-2,
    .gy-sm-2 {
        --bs-gutter-y : 0.5rem;
    }

    .g-sm-3,
    .gx-sm-3 {
        --bs-gutter-x : 1rem;
    }

    .g-sm-3,
    .gy-sm-3 {
        --bs-gutter-y : 1rem;
    }

    .g-sm-4,
    .gx-sm-4 {
        --bs-gutter-x : 1.5rem;
    }

    .g-sm-4,
    .gy-sm-4 {
        --bs-gutter-y : 1.5rem;
    }

    .g-sm-5,
    .gx-sm-5 {
        --bs-gutter-x : 3rem;
    }

    .g-sm-5,
    .gy-sm-5 {
        --bs-gutter-y : 3rem;
    }
}

@media (min-width : 768px) {
    .col-md {
        flex : 1 0 0;
    }

    .row-cols-md-auto > * {
        flex  : 0 0 auto;
        width : auto;
    }

    .row-cols-md-1 > * {
        flex  : 0 0 auto;
        width : 100%;
    }

    .row-cols-md-2 > * {
        flex  : 0 0 auto;
        width : 50%;
    }

    .row-cols-md-3 > * {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .row-cols-md-4 > * {
        flex  : 0 0 auto;
        width : 25%;
    }

    .row-cols-md-5 > * {
        flex  : 0 0 auto;
        width : 20%;
    }

    .row-cols-md-6 > * {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-md-auto {
        flex  : 0 0 auto;
        width : auto;
    }

    .col-md-1 {
        flex  : 0 0 auto;
        width : 8.33333333%;
    }

    .col-md-2 {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-md-3 {
        flex  : 0 0 auto;
        width : 25%;
    }

    .col-md-4 {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .col-md-5 {
        flex  : 0 0 auto;
        width : 41.66666667%;
    }

    .col-md-6 {
        flex  : 0 0 auto;
        width : 50%;
    }

    .col-md-7 {
        flex  : 0 0 auto;
        width : 58.33333333%;
    }

    .col-md-8 {
        flex  : 0 0 auto;
        width : 66.66666667%;
    }

    .col-md-9 {
        flex  : 0 0 auto;
        width : 75%;
    }

    .col-md-10 {
        flex  : 0 0 auto;
        width : 83.33333333%;
    }

    .col-md-11 {
        flex  : 0 0 auto;
        width : 91.66666667%;
    }

    .col-md-12 {
        flex  : 0 0 auto;
        width : 100%;
    }

    .offset-md-0 {
        margin-left : 0;
    }

    .offset-md-1 {
        margin-left : 8.33333333%;
    }

    .offset-md-2 {
        margin-left : 16.66666667%;
    }

    .offset-md-3 {
        margin-left : 25%;
    }

    .offset-md-4 {
        margin-left : 33.33333333%;
    }

    .offset-md-5 {
        margin-left : 41.66666667%;
    }

    .offset-md-6 {
        margin-left : 50%;
    }

    .offset-md-7 {
        margin-left : 58.33333333%;
    }

    .offset-md-8 {
        margin-left : 66.66666667%;
    }

    .offset-md-9 {
        margin-left : 75%;
    }

    .offset-md-10 {
        margin-left : 83.33333333%;
    }

    .offset-md-11 {
        margin-left : 91.66666667%;
    }

    .g-md-0,
    .gx-md-0 {
        --bs-gutter-x : 0;
    }

    .g-md-0,
    .gy-md-0 {
        --bs-gutter-y : 0;
    }

    .g-md-1,
    .gx-md-1 {
        --bs-gutter-x : 0.25rem;
    }

    .g-md-1,
    .gy-md-1 {
        --bs-gutter-y : 0.25rem;
    }

    .g-md-2,
    .gx-md-2 {
        --bs-gutter-x : 0.5rem;
    }

    .g-md-2,
    .gy-md-2 {
        --bs-gutter-y : 0.5rem;
    }

    .g-md-3,
    .gx-md-3 {
        --bs-gutter-x : 1rem;
    }

    .g-md-3,
    .gy-md-3 {
        --bs-gutter-y : 1rem;
    }

    .g-md-4,
    .gx-md-4 {
        --bs-gutter-x : 1.5rem;
    }

    .g-md-4,
    .gy-md-4 {
        --bs-gutter-y : 1.5rem;
    }

    .g-md-5,
    .gx-md-5 {
        --bs-gutter-x : 3rem;
    }

    .g-md-5,
    .gy-md-5 {
        --bs-gutter-y : 3rem;
    }
}

@media (min-width : 992px) {
    .col-lg {
        flex : 1 0 0;
    }

    .row-cols-lg-auto > * {
        flex  : 0 0 auto;
        width : auto;
    }

    .row-cols-lg-1 > * {
        flex  : 0 0 auto;
        width : 100%;
    }

    .row-cols-lg-2 > * {
        flex  : 0 0 auto;
        width : 50%;
    }

    .row-cols-lg-3 > * {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .row-cols-lg-4 > * {
        flex  : 0 0 auto;
        width : 25%;
    }

    .row-cols-lg-5 > * {
        flex  : 0 0 auto;
        width : 20%;
    }

    .row-cols-lg-6 > * {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-lg-auto {
        flex  : 0 0 auto;
        width : auto;
    }

    .col-lg-1 {
        flex  : 0 0 auto;
        width : 8.33333333%;
    }

    .col-lg-2 {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-lg-3 {
        flex  : 0 0 auto;
        width : 25%;
    }

    .col-lg-4 {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .col-lg-5 {
        flex  : 0 0 auto;
        width : 41.66666667%;
    }

    .col-lg-6 {
        flex  : 0 0 auto;
        width : 50%;
    }

    .col-lg-7 {
        flex  : 0 0 auto;
        width : 58.33333333%;
    }

    .col-lg-8 {
        flex  : 0 0 auto;
        width : 66.66666667%;
    }

    .col-lg-9 {
        flex  : 0 0 auto;
        width : 75%;
    }

    .col-lg-10 {
        flex  : 0 0 auto;
        width : 83.33333333%;
    }

    .col-lg-11 {
        flex  : 0 0 auto;
        width : 91.66666667%;
    }

    .col-lg-12 {
        flex  : 0 0 auto;
        width : 100%;
    }

    .offset-lg-0 {
        margin-left : 0;
    }

    .offset-lg-1 {
        margin-left : 8.33333333%;
    }

    .offset-lg-2 {
        margin-left : 16.66666667%;
    }

    .offset-lg-3 {
        margin-left : 25%;
    }

    .offset-lg-4 {
        margin-left : 33.33333333%;
    }

    .offset-lg-5 {
        margin-left : 41.66666667%;
    }

    .offset-lg-6 {
        margin-left : 50%;
    }

    .offset-lg-7 {
        margin-left : 58.33333333%;
    }

    .offset-lg-8 {
        margin-left : 66.66666667%;
    }

    .offset-lg-9 {
        margin-left : 75%;
    }

    .offset-lg-10 {
        margin-left : 83.33333333%;
    }

    .offset-lg-11 {
        margin-left : 91.66666667%;
    }

    .g-lg-0,
    .gx-lg-0 {
        --bs-gutter-x : 0;
    }

    .g-lg-0,
    .gy-lg-0 {
        --bs-gutter-y : 0;
    }

    .g-lg-1,
    .gx-lg-1 {
        --bs-gutter-x : 0.25rem;
    }

    .g-lg-1,
    .gy-lg-1 {
        --bs-gutter-y : 0.25rem;
    }

    .g-lg-2,
    .gx-lg-2 {
        --bs-gutter-x : 0.5rem;
    }

    .g-lg-2,
    .gy-lg-2 {
        --bs-gutter-y : 0.5rem;
    }

    .g-lg-3,
    .gx-lg-3 {
        --bs-gutter-x : 1rem;
    }

    .g-lg-3,
    .gy-lg-3 {
        --bs-gutter-y : 1rem;
    }

    .g-lg-4,
    .gx-lg-4 {
        --bs-gutter-x : 1.5rem;
    }

    .g-lg-4,
    .gy-lg-4 {
        --bs-gutter-y : 1.5rem;
    }

    .g-lg-5,
    .gx-lg-5 {
        --bs-gutter-x : 3rem;
    }

    .g-lg-5,
    .gy-lg-5 {
        --bs-gutter-y : 3rem;
    }
}

@media (min-width : 1200px) {
    .col-xl {
        flex : 1 0 0;
    }

    .row-cols-xl-auto > * {
        flex  : 0 0 auto;
        width : auto;
    }

    .row-cols-xl-1 > * {
        flex  : 0 0 auto;
        width : 100%;
    }

    .row-cols-xl-2 > * {
        flex  : 0 0 auto;
        width : 50%;
    }

    .row-cols-xl-3 > * {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .row-cols-xl-4 > * {
        flex  : 0 0 auto;
        width : 25%;
    }

    .row-cols-xl-5 > * {
        flex  : 0 0 auto;
        width : 20%;
    }

    .row-cols-xl-6 > * {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-xl-auto {
        flex  : 0 0 auto;
        width : auto;
    }

    .col-xl-1 {
        flex  : 0 0 auto;
        width : 8.33333333%;
    }

    .col-xl-2 {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-xl-3 {
        flex  : 0 0 auto;
        width : 25%;
    }

    .col-xl-4 {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .col-xl-5 {
        flex  : 0 0 auto;
        width : 41.66666667%;
    }

    .col-xl-6 {
        flex  : 0 0 auto;
        width : 50%;
    }

    .col-xl-7 {
        flex  : 0 0 auto;
        width : 58.33333333%;
    }

    .col-xl-8 {
        flex  : 0 0 auto;
        width : 66.66666667%;
    }

    .col-xl-9 {
        flex  : 0 0 auto;
        width : 75%;
    }

    .col-xl-10 {
        flex  : 0 0 auto;
        width : 83.33333333%;
    }

    .col-xl-11 {
        flex  : 0 0 auto;
        width : 91.66666667%;
    }

    .col-xl-12 {
        flex  : 0 0 auto;
        width : 100%;
    }

    .offset-xl-0 {
        margin-left : 0;
    }

    .offset-xl-1 {
        margin-left : 8.33333333%;
    }

    .offset-xl-2 {
        margin-left : 16.66666667%;
    }

    .offset-xl-3 {
        margin-left : 25%;
    }

    .offset-xl-4 {
        margin-left : 33.33333333%;
    }

    .offset-xl-5 {
        margin-left : 41.66666667%;
    }

    .offset-xl-6 {
        margin-left : 50%;
    }

    .offset-xl-7 {
        margin-left : 58.33333333%;
    }

    .offset-xl-8 {
        margin-left : 66.66666667%;
    }

    .offset-xl-9 {
        margin-left : 75%;
    }

    .offset-xl-10 {
        margin-left : 83.33333333%;
    }

    .offset-xl-11 {
        margin-left : 91.66666667%;
    }

    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x : 0;
    }

    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y : 0;
    }

    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x : 0.25rem;
    }

    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y : 0.25rem;
    }

    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x : 0.5rem;
    }

    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y : 0.5rem;
    }

    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x : 1rem;
    }

    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y : 1rem;
    }

    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x : 1.5rem;
    }

    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y : 1.5rem;
    }

    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x : 3rem;
    }

    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y : 3rem;
    }
}

@media (min-width : 1400px) {
    .col-xxl {
        flex : 1 0 0;
    }

    .row-cols-xxl-auto > * {
        flex  : 0 0 auto;
        width : auto;
    }

    .row-cols-xxl-1 > * {
        flex  : 0 0 auto;
        width : 100%;
    }

    .row-cols-xxl-2 > * {
        flex  : 0 0 auto;
        width : 50%;
    }

    .row-cols-xxl-3 > * {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .row-cols-xxl-4 > * {
        flex  : 0 0 auto;
        width : 25%;
    }

    .row-cols-xxl-5 > * {
        flex  : 0 0 auto;
        width : 20%;
    }

    .row-cols-xxl-6 > * {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-xxl-auto {
        flex  : 0 0 auto;
        width : auto;
    }

    .col-xxl-1 {
        flex  : 0 0 auto;
        width : 8.33333333%;
    }

    .col-xxl-2 {
        flex  : 0 0 auto;
        width : 16.66666667%;
    }

    .col-xxl-3 {
        flex  : 0 0 auto;
        width : 25%;
    }

    .col-xxl-4 {
        flex  : 0 0 auto;
        width : 33.33333333%;
    }

    .col-xxl-5 {
        flex  : 0 0 auto;
        width : 41.66666667%;
    }

    .col-xxl-6 {
        flex  : 0 0 auto;
        width : 50%;
    }

    .col-xxl-7 {
        flex  : 0 0 auto;
        width : 58.33333333%;
    }

    .col-xxl-8 {
        flex  : 0 0 auto;
        width : 66.66666667%;
    }

    .col-xxl-9 {
        flex  : 0 0 auto;
        width : 75%;
    }

    .col-xxl-10 {
        flex  : 0 0 auto;
        width : 83.33333333%;
    }

    .col-xxl-11 {
        flex  : 0 0 auto;
        width : 91.66666667%;
    }

    .col-xxl-12 {
        flex  : 0 0 auto;
        width : 100%;
    }

    .offset-xxl-0 {
        margin-left : 0;
    }

    .offset-xxl-1 {
        margin-left : 8.33333333%;
    }

    .offset-xxl-2 {
        margin-left : 16.66666667%;
    }

    .offset-xxl-3 {
        margin-left : 25%;
    }

    .offset-xxl-4 {
        margin-left : 33.33333333%;
    }

    .offset-xxl-5 {
        margin-left : 41.66666667%;
    }

    .offset-xxl-6 {
        margin-left : 50%;
    }

    .offset-xxl-7 {
        margin-left : 58.33333333%;
    }

    .offset-xxl-8 {
        margin-left : 66.66666667%;
    }

    .offset-xxl-9 {
        margin-left : 75%;
    }

    .offset-xxl-10 {
        margin-left : 83.33333333%;
    }

    .offset-xxl-11 {
        margin-left : 91.66666667%;
    }

    .g-xxl-0,
    .gx-xxl-0 {
        --bs-gutter-x : 0;
    }

    .g-xxl-0,
    .gy-xxl-0 {
        --bs-gutter-y : 0;
    }

    .g-xxl-1,
    .gx-xxl-1 {
        --bs-gutter-x : 0.25rem;
    }

    .g-xxl-1,
    .gy-xxl-1 {
        --bs-gutter-y : 0.25rem;
    }

    .g-xxl-2,
    .gx-xxl-2 {
        --bs-gutter-x : 0.5rem;
    }

    .g-xxl-2,
    .gy-xxl-2 {
        --bs-gutter-y : 0.5rem;
    }

    .g-xxl-3,
    .gx-xxl-3 {
        --bs-gutter-x : 1rem;
    }

    .g-xxl-3,
    .gy-xxl-3 {
        --bs-gutter-y : 1rem;
    }

    .g-xxl-4,
    .gx-xxl-4 {
        --bs-gutter-x : 1.5rem;
    }

    .g-xxl-4,
    .gy-xxl-4 {
        --bs-gutter-y : 1.5rem;
    }

    .g-xxl-5,
    .gx-xxl-5 {
        --bs-gutter-x : 3rem;
    }

    .g-xxl-5,
    .gy-xxl-5 {
        --bs-gutter-y : 3rem;
    }
}


@media (min-width : 576px) {
    .grid .g-col-sm-1 {
        grid-column : auto/span 1
    }

    .grid .g-col-sm-2 {
        grid-column : auto/span 2
    }

    .grid .g-col-sm-3 {
        grid-column : auto/span 3
    }

    .grid .g-col-sm-4 {
        grid-column : auto/span 4
    }

    .grid .g-col-sm-5 {
        grid-column : auto/span 5
    }

    .grid .g-col-sm-6 {
        grid-column : auto/span 6
    }

    .grid .g-col-sm-7 {
        grid-column : auto/span 7
    }

    .grid .g-col-sm-8 {
        grid-column : auto/span 8
    }

    .grid .g-col-sm-9 {
        grid-column : auto/span 9
    }

    .grid .g-col-sm-10 {
        grid-column : auto/span 10
    }

    .grid .g-col-sm-11 {
        grid-column : auto/span 11
    }

    .grid .g-col-sm-12 {
        grid-column : auto/span 12
    }

    .grid .g-start-sm-1 {
        grid-column-start : 1
    }

    .grid .g-start-sm-2 {
        grid-column-start : 2
    }

    .grid .g-start-sm-3 {
        grid-column-start : 3
    }

    .grid .g-start-sm-4 {
        grid-column-start : 4
    }

    .grid .g-start-sm-5 {
        grid-column-start : 5
    }

    .grid .g-start-sm-6 {
        grid-column-start : 6
    }

    .grid .g-start-sm-7 {
        grid-column-start : 7
    }

    .grid .g-start-sm-8 {
        grid-column-start : 8
    }

    .grid .g-start-sm-9 {
        grid-column-start : 9
    }

    .grid .g-start-sm-10 {
        grid-column-start : 10
    }

    .grid .g-start-sm-11 {
        grid-column-start : 11
    }
}

@media (min-width : 768px) {
    .grid .g-col-md-1 {
        grid-column : auto/span 1
    }

    .grid .g-col-md-2 {
        grid-column : auto/span 2
    }

    .grid .g-col-md-3 {
        grid-column : auto/span 3
    }

    .grid .g-col-md-4 {
        grid-column : auto/span 4
    }

    .grid .g-col-md-5 {
        grid-column : auto/span 5
    }

    .grid .g-col-md-6 {
        grid-column : auto/span 6
    }

    .grid .g-col-md-7 {
        grid-column : auto/span 7
    }

    .grid .g-col-md-8 {
        grid-column : auto/span 8
    }

    .grid .g-col-md-9 {
        grid-column : auto/span 9
    }

    .grid .g-col-md-10 {
        grid-column : auto/span 10
    }

    .grid .g-col-md-11 {
        grid-column : auto/span 11
    }

    .grid .g-col-md-12 {
        grid-column : auto/span 12
    }

    .grid .g-start-md-1 {
        grid-column-start : 1
    }

    .grid .g-start-md-2 {
        grid-column-start : 2
    }

    .grid .g-start-md-3 {
        grid-column-start : 3
    }

    .grid .g-start-md-4 {
        grid-column-start : 4
    }

    .grid .g-start-md-5 {
        grid-column-start : 5
    }

    .grid .g-start-md-6 {
        grid-column-start : 6
    }

    .grid .g-start-md-7 {
        grid-column-start : 7
    }

    .grid .g-start-md-8 {
        grid-column-start : 8
    }

    .grid .g-start-md-9 {
        grid-column-start : 9
    }

    .grid .g-start-md-10 {
        grid-column-start : 10
    }

    .grid .g-start-md-11 {
        grid-column-start : 11
    }
}

@media (min-width : 992px) {
    .grid .g-col-lg-1 {
        grid-column : auto/span 1
    }

    .grid .g-col-lg-2 {
        grid-column : auto/span 2
    }

    .grid .g-col-lg-3 {
        grid-column : auto/span 3
    }

    .grid .g-col-lg-4 {
        grid-column : auto/span 4
    }

    .grid .g-col-lg-5 {
        grid-column : auto/span 5
    }

    .grid .g-col-lg-6 {
        grid-column : auto/span 6
    }

    .grid .g-col-lg-7 {
        grid-column : auto/span 7
    }

    .grid .g-col-lg-8 {
        grid-column : auto/span 8
    }

    .grid .g-col-lg-9 {
        grid-column : auto/span 9
    }

    .grid .g-col-lg-10 {
        grid-column : auto/span 10
    }

    .grid .g-col-lg-11 {
        grid-column : auto/span 11
    }

    .grid .g-col-lg-12 {
        grid-column : auto/span 12
    }

    .grid .g-start-lg-1 {
        grid-column-start : 1
    }

    .grid .g-start-lg-2 {
        grid-column-start : 2
    }

    .grid .g-start-lg-3 {
        grid-column-start : 3
    }

    .grid .g-start-lg-4 {
        grid-column-start : 4
    }

    .grid .g-start-lg-5 {
        grid-column-start : 5
    }

    .grid .g-start-lg-6 {
        grid-column-start : 6
    }

    .grid .g-start-lg-7 {
        grid-column-start : 7
    }

    .grid .g-start-lg-8 {
        grid-column-start : 8
    }

    .grid .g-start-lg-9 {
        grid-column-start : 9
    }

    .grid .g-start-lg-10 {
        grid-column-start : 10
    }

    .grid .g-start-lg-11 {
        grid-column-start : 11
    }
}

@media (min-width : 1200px) {
    .grid .g-col-xl-1 {
        grid-column : auto/span 1
    }

    .grid .g-col-xl-2 {
        grid-column : auto/span 2
    }

    .grid .g-col-xl-3 {
        grid-column : auto/span 3
    }

    .grid .g-col-xl-4 {
        grid-column : auto/span 4
    }

    .grid .g-col-xl-5 {
        grid-column : auto/span 5
    }

    .grid .g-col-xl-6 {
        grid-column : auto/span 6
    }

    .grid .g-col-xl-7 {
        grid-column : auto/span 7
    }

    .grid .g-col-xl-8 {
        grid-column : auto/span 8
    }

    .grid .g-col-xl-9 {
        grid-column : auto/span 9
    }

    .grid .g-col-xl-10 {
        grid-column : auto/span 10
    }

    .grid .g-col-xl-11 {
        grid-column : auto/span 11
    }

    .grid .g-col-xl-12 {
        grid-column : auto/span 12
    }

    .grid .g-start-xl-1 {
        grid-column-start : 1
    }

    .grid .g-start-xl-2 {
        grid-column-start : 2
    }

    .grid .g-start-xl-3 {
        grid-column-start : 3
    }

    .grid .g-start-xl-4 {
        grid-column-start : 4
    }

    .grid .g-start-xl-5 {
        grid-column-start : 5
    }

    .grid .g-start-xl-6 {
        grid-column-start : 6
    }

    .grid .g-start-xl-7 {
        grid-column-start : 7
    }

    .grid .g-start-xl-8 {
        grid-column-start : 8
    }

    .grid .g-start-xl-9 {
        grid-column-start : 9
    }

    .grid .g-start-xl-10 {
        grid-column-start : 10
    }

    .grid .g-start-xl-11 {
        grid-column-start : 11
    }
}

@media (min-width : 1400px) {
    .grid .g-col-xxl-1 {
        grid-column : auto/span 1
    }

    .grid .g-col-xxl-2 {
        grid-column : auto/span 2
    }

    .grid .g-col-xxl-3 {
        grid-column : auto/span 3
    }

    .grid .g-col-xxl-4 {
        grid-column : auto/span 4
    }

    .grid .g-col-xxl-5 {
        grid-column : auto/span 5
    }

    .grid .g-col-xxl-6 {
        grid-column : auto/span 6
    }

    .grid .g-col-xxl-7 {
        grid-column : auto/span 7
    }

    .grid .g-col-xxl-8 {
        grid-column : auto/span 8
    }

    .grid .g-col-xxl-9 {
        grid-column : auto/span 9
    }

    .grid .g-col-xxl-10 {
        grid-column : auto/span 10
    }

    .grid .g-col-xxl-11 {
        grid-column : auto/span 11
    }

    .grid .g-col-xxl-12 {
        grid-column : auto/span 12
    }

    .grid .g-start-xxl-1 {
        grid-column-start : 1
    }

    .grid .g-start-xxl-2 {
        grid-column-start : 2
    }

    .grid .g-start-xxl-3 {
        grid-column-start : 3
    }

    .grid .g-start-xxl-4 {
        grid-column-start : 4
    }

    .grid .g-start-xxl-5 {
        grid-column-start : 5
    }

    .grid .g-start-xxl-6 {
        grid-column-start : 6
    }

    .grid .g-start-xxl-7 {
        grid-column-start : 7
    }

    .grid .g-start-xxl-8 {
        grid-column-start : 8
    }

    .grid .g-start-xxl-9 {
        grid-column-start : 9
    }

    .grid .g-start-xxl-10 {
        grid-column-start : 10
    }

    .grid .g-start-xxl-11 {
        grid-column-start : 11
    }
}


.order-first {
    order : -1 !important;
}

.order-0 {
    order : 0 !important;
}

.order-1 {
    order : 1 !important;
}

.order-2 {
    order : 2 !important;
}

.order-3 {
    order : 3 !important;
}

.order-4 {
    order : 4 !important;
}

.order-5 {
    order : 5 !important;
}

.order-last {
    order : 6 !important;
}

.m-0 {
    margin : 0 !important;
}

.m-1 {
    margin : 0.25rem !important;
}

.m-2 {
    margin : 0.5rem !important;
}

.m-3 {
    margin : 1rem !important;
}

.m-4 {
    margin : 1.5rem !important;
}

.m-5 {
    margin : 3rem !important;
}

.m-auto {
    margin : auto !important;
}

.mx-0 {
    margin-right : 0 !important;
    margin-left  : 0 !important;
}

.mx-1 {
    margin-right : 0.25rem !important;
    margin-left  : 0.25rem !important;
}

.mx-2 {
    margin-right : 0.5rem !important;
    margin-left  : 0.5rem !important;
}

.mx-3 {
    margin-right : 1rem !important;
    margin-left  : 1rem !important;
}

.mx-4 {
    margin-right : 1.5rem !important;
    margin-left  : 1.5rem !important;
}

.mx-5 {
    margin-right : 3rem !important;
    margin-left  : 3rem !important;
}

.mx-auto {
    margin-right : auto !important;
    margin-left  : auto !important;
}

.my-0 {
    margin-top    : 0 !important;
    margin-bottom : 0 !important;
}

.my-1 {
    margin-top    : 0.25rem !important;
    margin-bottom : 0.25rem !important;
}

.my-2 {
    margin-top    : 0.5rem !important;
    margin-bottom : 0.5rem !important;
}

.my-3 {
    margin-top    : 1rem !important;
    margin-bottom : 1rem !important;
}

.my-4 {
    margin-top    : 1.5rem !important;
    margin-bottom : 1.5rem !important;
}

.my-5 {
    margin-top    : 3rem !important;
    margin-bottom : 3rem !important;
}

.my-auto {
    margin-top    : auto !important;
    margin-bottom : auto !important;
}

.mt-0 {
    margin-top : 0 !important;
}

.mt-1 {
    margin-top : 0.25rem !important;
}

.mt-2 {
    margin-top : 0.5rem !important;
}

.mt-3 {
    margin-top : 1rem !important;
}

.mt-4 {
    margin-top : 1.5rem !important;
}

.mt-5 {
    margin-top : 3rem !important;
}

.mt-auto {
    margin-top : auto !important;
}

.me-0 {
    margin-right : 0 !important;
}

.me-1 {
    margin-right : 0.25rem !important;
}

.me-2 {
    margin-right : 0.5rem !important;
}

.me-3 {
    margin-right : 1rem !important;
}

.me-4 {
    margin-right : 1.5rem !important;
}

.me-5 {
    margin-right : 3rem !important;
}

.me-auto {
    margin-right : auto !important;
}

.mb-0 {
    margin-bottom : 0 !important;
}

.mb-1 {
    margin-bottom : 0.25rem !important;
}

.mb-2 {
    margin-bottom : 0.5rem !important;
}

.mb-3 {
    margin-bottom : 1rem !important;
}

.mb-4 {
    margin-bottom : 1.5rem !important;
}

.mb-5 {
    margin-bottom : 3rem !important;
}

.mb-auto {
    margin-bottom : auto !important;
}

.ms-0 {
    margin-left : 0 !important;
}

.ms-1 {
    margin-left : 0.25rem !important;
}

.ms-2 {
    margin-left : 0.5rem !important;
}

.ms-3 {
    margin-left : 1rem !important;
}

.ms-4 {
    margin-left : 1.5rem !important;
}

.ms-5 {
    margin-left : 3rem !important;
}

.ms-auto {
    margin-left : auto !important;
}

.p-0 {
    padding : 0 !important;
}

.p-1 {
    padding : 0.25rem !important;
}

.p-2 {
    padding : 0.5rem !important;
}

.p-3 {
    padding : 1rem !important;
}

.p-4 {
    padding : 1.5rem !important;
}

.p-5 {
    padding : 3rem !important;
}

.px-0 {
    padding-right : 0 !important;
    padding-left  : 0 !important;
}

.px-1 {
    padding-right : 0.25rem !important;
    padding-left  : 0.25rem !important;
}

.px-2 {
    padding-right : 0.5rem !important;
    padding-left  : 0.5rem !important;
}

.px-3 {
    padding-right : 1rem !important;
    padding-left  : 1rem !important;
}

.px-4 {
    padding-right : 1.5rem !important;
    padding-left  : 1.5rem !important;
}

.px-5 {
    padding-right : 3rem !important;
    padding-left  : 3rem !important;
}

.py-0 {
    padding-top    : 0 !important;
    padding-bottom : 0 !important;
}

.py-1 {
    padding-top    : 0.25rem !important;
    padding-bottom : 0.25rem !important;
}

.py-2 {
    padding-top    : 0.5rem !important;
    padding-bottom : 0.5rem !important;
}

.py-3 {
    padding-top    : 1rem !important;
    padding-bottom : 1rem !important;
}

.py-4 {
    padding-top    : 1.5rem !important;
    padding-bottom : 1.5rem !important;
}

.py-5 {
    padding-top    : 3rem !important;
    padding-bottom : 3rem !important;
}

.pt-0 {
    padding-top : 0 !important;
}

.pt-1 {
    padding-top : 0.25rem !important;
}

.pt-2 {
    padding-top : 0.5rem !important;
}

.pt-3 {
    padding-top : 1rem !important;
}

.pt-4 {
    padding-top : 1.5rem !important;
}

.pt-5 {
    padding-top : 3rem !important;
}

.pe-0 {
    padding-right : 0 !important;
}

.pe-1 {
    padding-right : 0.25rem !important;
}

.pe-2 {
    padding-right : 0.5rem !important;
}

.pe-3 {
    padding-right : 1rem !important;
}

.pe-4 {
    padding-right : 1.5rem !important;
}

.pe-5 {
    padding-right : 3rem !important;
}

.pb-0 {
    padding-bottom : 0 !important;
}

.pb-1 {
    padding-bottom : 0.25rem !important;
}

.pb-2 {
    padding-bottom : 0.5rem !important;
}

.pb-3 {
    padding-bottom : 1rem !important;
}

.pb-4 {
    padding-bottom : 1.5rem !important;
}

.pb-5 {
    padding-bottom : 3rem !important;
}

.ps-0 {
    padding-left : 0 !important;
}

.ps-1 {
    padding-left : 0.25rem !important;
}

.ps-2 {
    padding-left : 0.5rem !important;
}

.ps-3 {
    padding-left : 1rem !important;
}

.ps-4 {
    padding-left : 1.5rem !important;
}

.ps-5 {
    padding-left : 3rem !important;
}

.gap-0 {
    gap : 0 !important;
}

.gap-1 {
    gap : 0.25rem !important;
}

.gap-2 {
    gap : 0.5rem !important;
}

.gap-3 {
    gap : 1rem !important;
}

.gap-4 {
    gap : 1.5rem !important;
}

.gap-5 {
    gap : 3rem !important;
}


.object-fit-contain {
    -o-object-fit : contain !important;
    object-fit    : contain !important;
}

.object-fit-cover {
    -o-object-fit : cover !important;
    object-fit    : cover !important;
}

.object-fit-fill {
    -o-object-fit : fill !important;
    object-fit    : fill !important;
}

.object-fit-scale {
    -o-object-fit : scale-down !important;
    object-fit    : scale-down !important;
}

.object-fit-none {
    -o-object-fit : none !important;
    object-fit    : none !important;
}

.d-inline {
    display : inline !important;
}

.d-inline-block {
    display : inline-block !important;
}

.d-block {
    display : block !important;
}

.d-grid {
    display : grid !important;
}

.d-inline-grid {
    display : inline-grid !important;
}

.d-table {
    display : table !important;
}

.d-table-row {
    display : table-row !important;
}

.d-table-cell {
    display : table-cell !important;
}

.d-flex {
    display : flex !important;
}

.d-inline-flex {
    display : inline-flex !important;
}

.d-none {
    display : none !important;
}


.flex-fill {
    flex : 1 1 auto !important;
}

.flex-row {
    flex-direction : row !important;
}

.flex-column {
    flex-direction : column !important;
}

.flex-row-reverse {
    flex-direction : row-reverse !important;
}

.flex-column-reverse {
    flex-direction : column-reverse !important;
}

.flex-grow-0 {
    flex-grow : 0 !important;
}

.flex-grow-1 {
    flex-grow : 1 !important;
}

.flex-shrink-0 {
    flex-shrink : 0 !important;
}

.flex-shrink-1 {
    flex-shrink : 1 !important;
}

.flex-wrap {
    flex-wrap : wrap !important;
}

.flex-nowrap {
    flex-wrap : nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap : wrap-reverse !important;
}

.justify-content-start {
    justify-content : flex-start !important;
}

.justify-content-end {
    justify-content : flex-end !important;
}

.justify-content-center {
    justify-content : center !important;
}

.justify-content-between {
    justify-content : space-between !important;
}

.justify-content-around {
    justify-content : space-around !important;
}

.justify-content-evenly {
    justify-content : space-evenly !important;
}

.align-items-start {
    align-items : flex-start !important;
}

.align-items-end {
    align-items : flex-end !important;
}

.align-items-center {
    align-items : center !important;
}

.align-items-baseline {
    align-items : baseline !important;
}

.align-items-stretch {
    align-items : stretch !important;
}

.align-content-start {
    align-content : flex-start !important;
}

.align-content-end {
    align-content : flex-end !important;
}

.align-content-center {
    align-content : center !important;
}

.align-content-between {
    align-content : space-between !important;
}

.align-content-around {
    align-content : space-around !important;
}

.align-content-stretch {
    align-content : stretch !important;
}

.align-self-auto {
    align-self : auto !important;
}

.align-self-start {
    align-self : flex-start !important;
}

.align-self-end {
    align-self : flex-end !important;
}

.align-self-center {
    align-self : center !important;
}

.align-self-baseline {
    align-self : baseline !important;
}

.align-self-stretch {
    align-self : stretch !important;
}

@media (min-width : 576px) {
    .order-sm-first {
        order : -1 !important;
    }

    .order-sm-0 {
        order : 0 !important;
    }

    .order-sm-1 {
        order : 1 !important;
    }

    .order-sm-2 {
        order : 2 !important;
    }

    .order-sm-3 {
        order : 3 !important;
    }

    .order-sm-4 {
        order : 4 !important;
    }

    .order-sm-5 {
        order : 5 !important;
    }

    .order-sm-last {
        order : 6 !important;
    }

    .m-sm-0 {
        margin : 0 !important;
    }

    .m-sm-1 {
        margin : 0.25rem !important;
    }

    .m-sm-2 {
        margin : 0.5rem !important;
    }

    .m-sm-3 {
        margin : 1rem !important;
    }

    .m-sm-4 {
        margin : 1.5rem !important;
    }

    .m-sm-5 {
        margin : 3rem !important;
    }

    .m-sm-auto {
        margin : auto !important;
    }

    .mx-sm-0 {
        margin-right : 0 !important;
        margin-left  : 0 !important;
    }

    .mx-sm-1 {
        margin-right : 0.25rem !important;
        margin-left  : 0.25rem !important;
    }

    .mx-sm-2 {
        margin-right : 0.5rem !important;
        margin-left  : 0.5rem !important;
    }

    .mx-sm-3 {
        margin-right : 1rem !important;
        margin-left  : 1rem !important;
    }

    .mx-sm-4 {
        margin-right : 1.5rem !important;
        margin-left  : 1.5rem !important;
    }

    .mx-sm-5 {
        margin-right : 3rem !important;
        margin-left  : 3rem !important;
    }

    .mx-sm-auto {
        margin-right : auto !important;
        margin-left  : auto !important;
    }

    .my-sm-0 {
        margin-top    : 0 !important;
        margin-bottom : 0 !important;
    }

    .my-sm-1 {
        margin-top    : 0.25rem !important;
        margin-bottom : 0.25rem !important;
    }

    .my-sm-2 {
        margin-top    : 0.5rem !important;
        margin-bottom : 0.5rem !important;
    }

    .my-sm-3 {
        margin-top    : 1rem !important;
        margin-bottom : 1rem !important;
    }

    .my-sm-4 {
        margin-top    : 1.5rem !important;
        margin-bottom : 1.5rem !important;
    }

    .my-sm-5 {
        margin-top    : 3rem !important;
        margin-bottom : 3rem !important;
    }

    .my-sm-auto {
        margin-top    : auto !important;
        margin-bottom : auto !important;
    }

    .mt-sm-0 {
        margin-top : 0 !important;
    }

    .mt-sm-1 {
        margin-top : 0.25rem !important;
    }

    .mt-sm-2 {
        margin-top : 0.5rem !important;
    }

    .mt-sm-3 {
        margin-top : 1rem !important;
    }

    .mt-sm-4 {
        margin-top : 1.5rem !important;
    }

    .mt-sm-5 {
        margin-top : 3rem !important;
    }

    .mt-sm-auto {
        margin-top : auto !important;
    }

    .me-sm-0 {
        margin-right : 0 !important;
    }

    .me-sm-1 {
        margin-right : 0.25rem !important;
    }

    .me-sm-2 {
        margin-right : 0.5rem !important;
    }

    .me-sm-3 {
        margin-right : 1rem !important;
    }

    .me-sm-4 {
        margin-right : 1.5rem !important;
    }

    .me-sm-5 {
        margin-right : 3rem !important;
    }

    .me-sm-auto {
        margin-right : auto !important;
    }

    .mb-sm-0 {
        margin-bottom : 0 !important;
    }

    .mb-sm-1 {
        margin-bottom : 0.25rem !important;
    }

    .mb-sm-2 {
        margin-bottom : 0.5rem !important;
    }

    .mb-sm-3 {
        margin-bottom : 1rem !important;
    }

    .mb-sm-4 {
        margin-bottom : 1.5rem !important;
    }

    .mb-sm-5 {
        margin-bottom : 3rem !important;
    }

    .mb-sm-auto {
        margin-bottom : auto !important;
    }

    .ms-sm-0 {
        margin-left : 0 !important;
    }

    .ms-sm-1 {
        margin-left : 0.25rem !important;
    }

    .ms-sm-2 {
        margin-left : 0.5rem !important;
    }

    .ms-sm-3 {
        margin-left : 1rem !important;
    }

    .ms-sm-4 {
        margin-left : 1.5rem !important;
    }

    .ms-sm-5 {
        margin-left : 3rem !important;
    }

    .ms-sm-auto {
        margin-left : auto !important;
    }

    .p-sm-0 {
        padding : 0 !important;
    }

    .p-sm-1 {
        padding : 0.25rem !important;
    }

    .p-sm-2 {
        padding : 0.5rem !important;
    }

    .p-sm-3 {
        padding : 1rem !important;
    }

    .p-sm-4 {
        padding : 1.5rem !important;
    }

    .p-sm-5 {
        padding : 3rem !important;
    }

    .px-sm-0 {
        padding-right : 0 !important;
        padding-left  : 0 !important;
    }

    .px-sm-1 {
        padding-right : 0.25rem !important;
        padding-left  : 0.25rem !important;
    }

    .px-sm-2 {
        padding-right : 0.5rem !important;
        padding-left  : 0.5rem !important;
    }

    .px-sm-3 {
        padding-right : 1rem !important;
        padding-left  : 1rem !important;
    }

    .px-sm-4 {
        padding-right : 1.5rem !important;
        padding-left  : 1.5rem !important;
    }

    .px-sm-5 {
        padding-right : 3rem !important;
        padding-left  : 3rem !important;
    }

    .py-sm-0 {
        padding-top    : 0 !important;
        padding-bottom : 0 !important;
    }

    .py-sm-1 {
        padding-top    : 0.25rem !important;
        padding-bottom : 0.25rem !important;
    }

    .py-sm-2 {
        padding-top    : 0.5rem !important;
        padding-bottom : 0.5rem !important;
    }

    .py-sm-3 {
        padding-top    : 1rem !important;
        padding-bottom : 1rem !important;
    }

    .py-sm-4 {
        padding-top    : 1.5rem !important;
        padding-bottom : 1.5rem !important;
    }

    .py-sm-5 {
        padding-top    : 3rem !important;
        padding-bottom : 3rem !important;
    }

    .pt-sm-0 {
        padding-top : 0 !important;
    }

    .pt-sm-1 {
        padding-top : 0.25rem !important;
    }

    .pt-sm-2 {
        padding-top : 0.5rem !important;
    }

    .pt-sm-3 {
        padding-top : 1rem !important;
    }

    .pt-sm-4 {
        padding-top : 1.5rem !important;
    }

    .pt-sm-5 {
        padding-top : 3rem !important;
    }

    .pe-sm-0 {
        padding-right : 0 !important;
    }

    .pe-sm-1 {
        padding-right : 0.25rem !important;
    }

    .pe-sm-2 {
        padding-right : 0.5rem !important;
    }

    .pe-sm-3 {
        padding-right : 1rem !important;
    }

    .pe-sm-4 {
        padding-right : 1.5rem !important;
    }

    .pe-sm-5 {
        padding-right : 3rem !important;
    }

    .pb-sm-0 {
        padding-bottom : 0 !important;
    }

    .pb-sm-1 {
        padding-bottom : 0.25rem !important;
    }

    .pb-sm-2 {
        padding-bottom : 0.5rem !important;
    }

    .pb-sm-3 {
        padding-bottom : 1rem !important;
    }

    .pb-sm-4 {
        padding-bottom : 1.5rem !important;
    }

    .pb-sm-5 {
        padding-bottom : 3rem !important;
    }

    .ps-sm-0 {
        padding-left : 0 !important;
    }

    .ps-sm-1 {
        padding-left : 0.25rem !important;
    }

    .ps-sm-2 {
        padding-left : 0.5rem !important;
    }

    .ps-sm-3 {
        padding-left : 1rem !important;
    }

    .ps-sm-4 {
        padding-left : 1.5rem !important;
    }

    .ps-sm-5 {
        padding-left : 3rem !important;
    }

    .gap-sm-0 {
        gap : 0 !important;
    }

    .gap-sm-1 {
        gap : 0.25rem !important;
    }

    .gap-sm-2 {
        gap : 0.5rem !important;
    }

    .gap-sm-3 {
        gap : 1rem !important;
    }

    .gap-sm-4 {
        gap : 1.5rem !important;
    }

    .gap-sm-5 {
        gap : 3rem !important;
    }

    .object-fit-sm-contain {
        -o-object-fit : contain !important;
        object-fit    : contain !important;
    }

    .object-fit-sm-cover {
        -o-object-fit : cover !important;
        object-fit    : cover !important;
    }

    .object-fit-sm-fill {
        -o-object-fit : fill !important;
        object-fit    : fill !important;
    }

    .object-fit-sm-scale {
        -o-object-fit : scale-down !important;
        object-fit    : scale-down !important;
    }

    .object-fit-sm-none {
        -o-object-fit : none !important;
        object-fit    : none !important;
    }

    .d-sm-inline {
        display : inline !important;
    }

    .d-sm-inline-block {
        display : inline-block !important;
    }

    .d-sm-block {
        display : block !important;
    }

    .d-sm-grid {
        display : grid !important;
    }

    .d-sm-inline-grid {
        display : inline-grid !important;
    }

    .d-sm-table {
        display : table !important;
    }

    .d-sm-table-row {
        display : table-row !important;
    }

    .d-sm-table-cell {
        display : table-cell !important;
    }

    .d-sm-flex {
        display : flex !important;
    }

    .d-sm-inline-flex {
        display : inline-flex !important;
    }

    .d-sm-none {
        display : none !important;
    }

    .flex-sm-fill {
        flex : 1 1 auto !important;
    }

    .flex-sm-row {
        flex-direction : row !important;
    }

    .flex-sm-column {
        flex-direction : column !important;
    }

    .flex-sm-row-reverse {
        flex-direction : row-reverse !important;
    }

    .flex-sm-column-reverse {
        flex-direction : column-reverse !important;
    }

    .flex-sm-grow-0 {
        flex-grow : 0 !important;
    }

    .flex-sm-grow-1 {
        flex-grow : 1 !important;
    }

    .flex-sm-shrink-0 {
        flex-shrink : 0 !important;
    }

    .flex-sm-shrink-1 {
        flex-shrink : 1 !important;
    }

    .flex-sm-wrap {
        flex-wrap : wrap !important;
    }

    .flex-sm-nowrap {
        flex-wrap : nowrap !important;
    }

    .flex-sm-wrap-reverse {
        flex-wrap : wrap-reverse !important;
    }

    .justify-content-sm-start {
        justify-content : flex-start !important;
    }

    .justify-content-sm-end {
        justify-content : flex-end !important;
    }

    .justify-content-sm-center {
        justify-content : center !important;
    }

    .justify-content-sm-between {
        justify-content : space-between !important;
    }

    .justify-content-sm-around {
        justify-content : space-around !important;
    }

    .justify-content-sm-evenly {
        justify-content : space-evenly !important;
    }

    .align-items-sm-start {
        align-items : flex-start !important;
    }

    .align-items-sm-end {
        align-items : flex-end !important;
    }

    .align-items-sm-center {
        align-items : center !important;
    }

    .align-items-sm-baseline {
        align-items : baseline !important;
    }

    .align-items-sm-stretch {
        align-items : stretch !important;
    }

    .align-content-sm-start {
        align-content : flex-start !important;
    }

    .align-content-sm-end {
        align-content : flex-end !important;
    }

    .align-content-sm-center {
        align-content : center !important;
    }

    .align-content-sm-between {
        align-content : space-between !important;
    }

    .align-content-sm-around {
        align-content : space-around !important;
    }

    .align-content-sm-stretch {
        align-content : stretch !important;
    }

    .align-self-sm-auto {
        align-self : auto !important;
    }

    .align-self-sm-start {
        align-self : flex-start !important;
    }

    .align-self-sm-end {
        align-self : flex-end !important;
    }

    .align-self-sm-center {
        align-self : center !important;
    }

    .align-self-sm-baseline {
        align-self : baseline !important;
    }

    .align-self-sm-stretch {
        align-self : stretch !important;
    }

}

@media (min-width : 768px) {
    .order-md-first {
        order : -1 !important;
    }

    .order-md-0 {
        order : 0 !important;
    }

    .order-md-1 {
        order : 1 !important;
    }

    .order-md-2 {
        order : 2 !important;
    }

    .order-md-3 {
        order : 3 !important;
    }

    .order-md-4 {
        order : 4 !important;
    }

    .order-md-5 {
        order : 5 !important;
    }

    .order-md-last {
        order : 6 !important;
    }

    .m-md-0 {
        margin : 0 !important;
    }

    .m-md-1 {
        margin : 0.25rem !important;
    }

    .m-md-2 {
        margin : 0.5rem !important;
    }

    .m-md-3 {
        margin : 1rem !important;
    }

    .m-md-4 {
        margin : 1.5rem !important;
    }

    .m-md-5 {
        margin : 3rem !important;
    }

    .m-md-auto {
        margin : auto !important;
    }

    .mx-md-0 {
        margin-right : 0 !important;
        margin-left  : 0 !important;
    }

    .mx-md-1 {
        margin-right : 0.25rem !important;
        margin-left  : 0.25rem !important;
    }

    .mx-md-2 {
        margin-right : 0.5rem !important;
        margin-left  : 0.5rem !important;
    }

    .mx-md-3 {
        margin-right : 1rem !important;
        margin-left  : 1rem !important;
    }

    .mx-md-4 {
        margin-right : 1.5rem !important;
        margin-left  : 1.5rem !important;
    }

    .mx-md-5 {
        margin-right : 3rem !important;
        margin-left  : 3rem !important;
    }

    .mx-md-auto {
        margin-right : auto !important;
        margin-left  : auto !important;
    }

    .my-md-0 {
        margin-top    : 0 !important;
        margin-bottom : 0 !important;
    }

    .my-md-1 {
        margin-top    : 0.25rem !important;
        margin-bottom : 0.25rem !important;
    }

    .my-md-2 {
        margin-top    : 0.5rem !important;
        margin-bottom : 0.5rem !important;
    }

    .my-md-3 {
        margin-top    : 1rem !important;
        margin-bottom : 1rem !important;
    }

    .my-md-4 {
        margin-top    : 1.5rem !important;
        margin-bottom : 1.5rem !important;
    }

    .my-md-5 {
        margin-top    : 3rem !important;
        margin-bottom : 3rem !important;
    }

    .my-md-auto {
        margin-top    : auto !important;
        margin-bottom : auto !important;
    }

    .mt-md-0 {
        margin-top : 0 !important;
    }

    .mt-md-1 {
        margin-top : 0.25rem !important;
    }

    .mt-md-2 {
        margin-top : 0.5rem !important;
    }

    .mt-md-3 {
        margin-top : 1rem !important;
    }

    .mt-md-4 {
        margin-top : 1.5rem !important;
    }

    .mt-md-5 {
        margin-top : 3rem !important;
    }

    .mt-md-auto {
        margin-top : auto !important;
    }

    .me-md-0 {
        margin-right : 0 !important;
    }

    .me-md-1 {
        margin-right : 0.25rem !important;
    }

    .me-md-2 {
        margin-right : 0.5rem !important;
    }

    .me-md-3 {
        margin-right : 1rem !important;
    }

    .me-md-4 {
        margin-right : 1.5rem !important;
    }

    .me-md-5 {
        margin-right : 3rem !important;
    }

    .me-md-auto {
        margin-right : auto !important;
    }

    .mb-md-0 {
        margin-bottom : 0 !important;
    }

    .mb-md-1 {
        margin-bottom : 0.25rem !important;
    }

    .mb-md-2 {
        margin-bottom : 0.5rem !important;
    }

    .mb-md-3 {
        margin-bottom : 1rem !important;
    }

    .mb-md-4 {
        margin-bottom : 1.5rem !important;
    }

    .mb-md-5 {
        margin-bottom : 3rem !important;
    }

    .mb-md-auto {
        margin-bottom : auto !important;
    }

    .ms-md-0 {
        margin-left : 0 !important;
    }

    .ms-md-1 {
        margin-left : 0.25rem !important;
    }

    .ms-md-2 {
        margin-left : 0.5rem !important;
    }

    .ms-md-3 {
        margin-left : 1rem !important;
    }

    .ms-md-4 {
        margin-left : 1.5rem !important;
    }

    .ms-md-5 {
        margin-left : 3rem !important;
    }

    .ms-md-auto {
        margin-left : auto !important;
    }

    .p-md-0 {
        padding : 0 !important;
    }

    .p-md-1 {
        padding : 0.25rem !important;
    }

    .p-md-2 {
        padding : 0.5rem !important;
    }

    .p-md-3 {
        padding : 1rem !important;
    }

    .p-md-4 {
        padding : 1.5rem !important;
    }

    .p-md-5 {
        padding : 3rem !important;
    }

    .px-md-0 {
        padding-right : 0 !important;
        padding-left  : 0 !important;
    }

    .px-md-1 {
        padding-right : 0.25rem !important;
        padding-left  : 0.25rem !important;
    }

    .px-md-2 {
        padding-right : 0.5rem !important;
        padding-left  : 0.5rem !important;
    }

    .px-md-3 {
        padding-right : 1rem !important;
        padding-left  : 1rem !important;
    }

    .px-md-4 {
        padding-right : 1.5rem !important;
        padding-left  : 1.5rem !important;
    }

    .px-md-5 {
        padding-right : 3rem !important;
        padding-left  : 3rem !important;
    }

    .py-md-0 {
        padding-top    : 0 !important;
        padding-bottom : 0 !important;
    }

    .py-md-1 {
        padding-top    : 0.25rem !important;
        padding-bottom : 0.25rem !important;
    }

    .py-md-2 {
        padding-top    : 0.5rem !important;
        padding-bottom : 0.5rem !important;
    }

    .py-md-3 {
        padding-top    : 1rem !important;
        padding-bottom : 1rem !important;
    }

    .py-md-4 {
        padding-top    : 1.5rem !important;
        padding-bottom : 1.5rem !important;
    }

    .py-md-5 {
        padding-top    : 3rem !important;
        padding-bottom : 3rem !important;
    }

    .pt-md-0 {
        padding-top : 0 !important;
    }

    .pt-md-1 {
        padding-top : 0.25rem !important;
    }

    .pt-md-2 {
        padding-top : 0.5rem !important;
    }

    .pt-md-3 {
        padding-top : 1rem !important;
    }

    .pt-md-4 {
        padding-top : 1.5rem !important;
    }

    .pt-md-5 {
        padding-top : 3rem !important;
    }

    .pe-md-0 {
        padding-right : 0 !important;
    }

    .pe-md-1 {
        padding-right : 0.25rem !important;
    }

    .pe-md-2 {
        padding-right : 0.5rem !important;
    }

    .pe-md-3 {
        padding-right : 1rem !important;
    }

    .pe-md-4 {
        padding-right : 1.5rem !important;
    }

    .pe-md-5 {
        padding-right : 3rem !important;
    }

    .pb-md-0 {
        padding-bottom : 0 !important;
    }

    .pb-md-1 {
        padding-bottom : 0.25rem !important;
    }

    .pb-md-2 {
        padding-bottom : 0.5rem !important;
    }

    .pb-md-3 {
        padding-bottom : 1rem !important;
    }

    .pb-md-4 {
        padding-bottom : 1.5rem !important;
    }

    .pb-md-5 {
        padding-bottom : 3rem !important;
    }

    .ps-md-0 {
        padding-left : 0 !important;
    }

    .ps-md-1 {
        padding-left : 0.25rem !important;
    }

    .ps-md-2 {
        padding-left : 0.5rem !important;
    }

    .ps-md-3 {
        padding-left : 1rem !important;
    }

    .ps-md-4 {
        padding-left : 1.5rem !important;
    }

    .ps-md-5 {
        padding-left : 3rem !important;
    }

    .gap-md-0 {
        gap : 0 !important;
    }

    .gap-md-1 {
        gap : 0.25rem !important;
    }

    .gap-md-2 {
        gap : 0.5rem !important;
    }

    .gap-md-3 {
        gap : 1rem !important;
    }

    .gap-md-4 {
        gap : 1.5rem !important;
    }

    .gap-md-5 {
        gap : 3rem !important;
    }


    .object-fit-md-contain {
        -o-object-fit : contain !important;
        object-fit    : contain !important;
    }

    .object-fit-md-cover {
        -o-object-fit : cover !important;
        object-fit    : cover !important;
    }

    .object-fit-md-fill {
        -o-object-fit : fill !important;
        object-fit    : fill !important;
    }

    .object-fit-md-scale {
        -o-object-fit : scale-down !important;
        object-fit    : scale-down !important;
    }

    .object-fit-md-none {
        -o-object-fit : none !important;
        object-fit    : none !important;
    }

    .d-md-inline {
        display : inline !important;
    }

    .d-md-inline-block {
        display : inline-block !important;
    }

    .d-md-block {
        display : block !important;
    }

    .d-md-grid {
        display : grid !important;
    }

    .d-md-inline-grid {
        display : inline-grid !important;
    }

    .d-md-table {
        display : table !important;
    }

    .d-md-table-row {
        display : table-row !important;
    }

    .d-md-table-cell {
        display : table-cell !important;
    }

    .d-md-flex {
        display : flex !important;
    }

    .d-md-inline-flex {
        display : inline-flex !important;
    }

    .d-md-none {
        display : none !important;
    }

    .flex-md-fill {
        flex : 1 1 auto !important;
    }

    .flex-md-row {
        flex-direction : row !important;
    }

    .flex-md-column {
        flex-direction : column !important;
    }

    .flex-md-row-reverse {
        flex-direction : row-reverse !important;
    }

    .flex-md-column-reverse {
        flex-direction : column-reverse !important;
    }

    .flex-md-grow-0 {
        flex-grow : 0 !important;
    }

    .flex-md-grow-1 {
        flex-grow : 1 !important;
    }

    .flex-md-shrink-0 {
        flex-shrink : 0 !important;
    }

    .flex-md-shrink-1 {
        flex-shrink : 1 !important;
    }

    .flex-md-wrap {
        flex-wrap : wrap !important;
    }

    .flex-md-nowrap {
        flex-wrap : nowrap !important;
    }

    .flex-md-wrap-reverse {
        flex-wrap : wrap-reverse !important;
    }

    .justify-content-md-start {
        justify-content : flex-start !important;
    }

    .justify-content-md-end {
        justify-content : flex-end !important;
    }

    .justify-content-md-center {
        justify-content : center !important;
    }

    .justify-content-md-between {
        justify-content : space-between !important;
    }

    .justify-content-md-around {
        justify-content : space-around !important;
    }

    .justify-content-md-evenly {
        justify-content : space-evenly !important;
    }

    .align-items-md-start {
        align-items : flex-start !important;
    }

    .align-items-md-end {
        align-items : flex-end !important;
    }

    .align-items-md-center {
        align-items : center !important;
    }

    .align-items-md-baseline {
        align-items : baseline !important;
    }

    .align-items-md-stretch {
        align-items : stretch !important;
    }

    .align-content-md-start {
        align-content : flex-start !important;
    }

    .align-content-md-end {
        align-content : flex-end !important;
    }

    .align-content-md-center {
        align-content : center !important;
    }

    .align-content-md-between {
        align-content : space-between !important;
    }

    .align-content-md-around {
        align-content : space-around !important;
    }

    .align-content-md-stretch {
        align-content : stretch !important;
    }

    .align-self-md-auto {
        align-self : auto !important;
    }

    .align-self-md-start {
        align-self : flex-start !important;
    }

    .align-self-md-end {
        align-self : flex-end !important;
    }

    .align-self-md-center {
        align-self : center !important;
    }

    .align-self-md-baseline {
        align-self : baseline !important;
    }

    .align-self-md-stretch {
        align-self : stretch !important;
    }
}


@media (min-width : 992px) {
    .order-lg-first {
        order : -1 !important;
    }

    .order-lg-0 {
        order : 0 !important;
    }

    .order-lg-1 {
        order : 1 !important;
    }

    .order-lg-2 {
        order : 2 !important;
    }

    .order-lg-3 {
        order : 3 !important;
    }

    .order-lg-4 {
        order : 4 !important;
    }

    .order-lg-5 {
        order : 5 !important;
    }

    .order-lg-last {
        order : 6 !important;
    }

    .m-lg-0 {
        margin : 0 !important;
    }

    .m-lg-1 {
        margin : 0.25rem !important;
    }

    .m-lg-2 {
        margin : 0.5rem !important;
    }

    .m-lg-3 {
        margin : 1rem !important;
    }

    .m-lg-4 {
        margin : 1.5rem !important;
    }

    .m-lg-5 {
        margin : 3rem !important;
    }

    .m-lg-auto {
        margin : auto !important;
    }

    .mx-lg-0 {
        margin-right : 0 !important;
        margin-left  : 0 !important;
    }

    .mx-lg-1 {
        margin-right : 0.25rem !important;
        margin-left  : 0.25rem !important;
    }

    .mx-lg-2 {
        margin-right : 0.5rem !important;
        margin-left  : 0.5rem !important;
    }

    .mx-lg-3 {
        margin-right : 1rem !important;
        margin-left  : 1rem !important;
    }

    .mx-lg-4 {
        margin-right : 1.5rem !important;
        margin-left  : 1.5rem !important;
    }

    .mx-lg-5 {
        margin-right : 3rem !important;
        margin-left  : 3rem !important;
    }

    .mx-lg-auto {
        margin-right : auto !important;
        margin-left  : auto !important;
    }

    .my-lg-0 {
        margin-top    : 0 !important;
        margin-bottom : 0 !important;
    }

    .my-lg-1 {
        margin-top    : 0.25rem !important;
        margin-bottom : 0.25rem !important;
    }

    .my-lg-2 {
        margin-top    : 0.5rem !important;
        margin-bottom : 0.5rem !important;
    }

    .my-lg-3 {
        margin-top    : 1rem !important;
        margin-bottom : 1rem !important;
    }

    .my-lg-4 {
        margin-top    : 1.5rem !important;
        margin-bottom : 1.5rem !important;
    }

    .my-lg-5 {
        margin-top    : 3rem !important;
        margin-bottom : 3rem !important;
    }

    .my-lg-auto {
        margin-top    : auto !important;
        margin-bottom : auto !important;
    }

    .mt-lg-0 {
        margin-top : 0 !important;
    }

    .mt-lg-1 {
        margin-top : 0.25rem !important;
    }

    .mt-lg-2 {
        margin-top : 0.5rem !important;
    }

    .mt-lg-3 {
        margin-top : 1rem !important;
    }

    .mt-lg-4 {
        margin-top : 1.5rem !important;
    }

    .mt-lg-5 {
        margin-top : 3rem !important;
    }

    .mt-lg-auto {
        margin-top : auto !important;
    }

    .me-lg-0 {
        margin-right : 0 !important;
    }

    .me-lg-1 {
        margin-right : 0.25rem !important;
    }

    .me-lg-2 {
        margin-right : 0.5rem !important;
    }

    .me-lg-3 {
        margin-right : 1rem !important;
    }

    .me-lg-4 {
        margin-right : 1.5rem !important;
    }

    .me-lg-5 {
        margin-right : 3rem !important;
    }

    .me-lg-auto {
        margin-right : auto !important;
    }

    .mb-lg-0 {
        margin-bottom : 0 !important;
    }

    .mb-lg-1 {
        margin-bottom : 0.25rem !important;
    }

    .mb-lg-2 {
        margin-bottom : 0.5rem !important;
    }

    .mb-lg-3 {
        margin-bottom : 1rem !important;
    }

    .mb-lg-4 {
        margin-bottom : 1.5rem !important;
    }

    .mb-lg-5 {
        margin-bottom : 3rem !important;
    }

    .mb-lg-auto {
        margin-bottom : auto !important;
    }

    .ms-lg-0 {
        margin-left : 0 !important;
    }

    .ms-lg-1 {
        margin-left : 0.25rem !important;
    }

    .ms-lg-2 {
        margin-left : 0.5rem !important;
    }

    .ms-lg-3 {
        margin-left : 1rem !important;
    }

    .ms-lg-4 {
        margin-left : 1.5rem !important;
    }

    .ms-lg-5 {
        margin-left : 3rem !important;
    }

    .ms-lg-auto {
        margin-left : auto !important;
    }

    .p-lg-0 {
        padding : 0 !important;
    }

    .p-lg-1 {
        padding : 0.25rem !important;
    }

    .p-lg-2 {
        padding : 0.5rem !important;
    }

    .p-lg-3 {
        padding : 1rem !important;
    }

    .p-lg-4 {
        padding : 1.5rem !important;
    }

    .p-lg-5 {
        padding : 3rem !important;
    }

    .px-lg-0 {
        padding-right : 0 !important;
        padding-left  : 0 !important;
    }

    .px-lg-1 {
        padding-right : 0.25rem !important;
        padding-left  : 0.25rem !important;
    }

    .px-lg-2 {
        padding-right : 0.5rem !important;
        padding-left  : 0.5rem !important;
    }

    .px-lg-3 {
        padding-right : 1rem !important;
        padding-left  : 1rem !important;
    }

    .px-lg-4 {
        padding-right : 1.5rem !important;
        padding-left  : 1.5rem !important;
    }

    .px-lg-5 {
        padding-right : 3rem !important;
        padding-left  : 3rem !important;
    }

    .py-lg-0 {
        padding-top    : 0 !important;
        padding-bottom : 0 !important;
    }

    .py-lg-1 {
        padding-top    : 0.25rem !important;
        padding-bottom : 0.25rem !important;
    }

    .py-lg-2 {
        padding-top    : 0.5rem !important;
        padding-bottom : 0.5rem !important;
    }

    .py-lg-3 {
        padding-top    : 1rem !important;
        padding-bottom : 1rem !important;
    }

    .py-lg-4 {
        padding-top    : 1.5rem !important;
        padding-bottom : 1.5rem !important;
    }

    .py-lg-5 {
        padding-top    : 3rem !important;
        padding-bottom : 3rem !important;
    }

    .pt-lg-0 {
        padding-top : 0 !important;
    }

    .pt-lg-1 {
        padding-top : 0.25rem !important;
    }

    .pt-lg-2 {
        padding-top : 0.5rem !important;
    }

    .pt-lg-3 {
        padding-top : 1rem !important;
    }

    .pt-lg-4 {
        padding-top : 1.5rem !important;
    }

    .pt-lg-5 {
        padding-top : 3rem !important;
    }

    .pe-lg-0 {
        padding-right : 0 !important;
    }

    .pe-lg-1 {
        padding-right : 0.25rem !important;
    }

    .pe-lg-2 {
        padding-right : 0.5rem !important;
    }

    .pe-lg-3 {
        padding-right : 1rem !important;
    }

    .pe-lg-4 {
        padding-right : 1.5rem !important;
    }

    .pe-lg-5 {
        padding-right : 3rem !important;
    }

    .pb-lg-0 {
        padding-bottom : 0 !important;
    }

    .pb-lg-1 {
        padding-bottom : 0.25rem !important;
    }

    .pb-lg-2 {
        padding-bottom : 0.5rem !important;
    }

    .pb-lg-3 {
        padding-bottom : 1rem !important;
    }

    .pb-lg-4 {
        padding-bottom : 1.5rem !important;
    }

    .pb-lg-5 {
        padding-bottom : 3rem !important;
    }

    .ps-lg-0 {
        padding-left : 0 !important;
    }

    .ps-lg-1 {
        padding-left : 0.25rem !important;
    }

    .ps-lg-2 {
        padding-left : 0.5rem !important;
    }

    .ps-lg-3 {
        padding-left : 1rem !important;
    }

    .ps-lg-4 {
        padding-left : 1.5rem !important;
    }

    .ps-lg-5 {
        padding-left : 3rem !important;
    }

    .gap-lg-0 {
        gap : 0 !important;
    }

    .gap-lg-1 {
        gap : 0.25rem !important;
    }

    .gap-lg-2 {
        gap : 0.5rem !important;
    }

    .gap-lg-3 {
        gap : 1rem !important;
    }

    .gap-lg-4 {
        gap : 1.5rem !important;
    }

    .gap-lg-5 {
        gap : 3rem !important;
    }


    .object-fit-lg-contain {
        -o-object-fit : contain !important;
        object-fit    : contain !important;
    }

    .object-fit-lg-cover {
        -o-object-fit : cover !important;
        object-fit    : cover !important;
    }

    .object-fit-lg-fill {
        -o-object-fit : fill !important;
        object-fit    : fill !important;
    }

    .object-fit-lg-scale {
        -o-object-fit : scale-down !important;
        object-fit    : scale-down !important;
    }

    .object-fit-lg-none {
        -o-object-fit : none !important;
        object-fit    : none !important;
    }

    .d-lg-inline {
        display : inline !important;
    }

    .d-lg-inline-block {
        display : inline-block !important;
    }

    .d-lg-block {
        display : block !important;
    }

    .d-lg-grid {
        display : grid !important;
    }

    .d-lg-inline-grid {
        display : inline-grid !important;
    }

    .d-lg-table {
        display : table !important;
    }

    .d-lg-table-row {
        display : table-row !important;
    }

    .d-lg-table-cell {
        display : table-cell !important;
    }

    .d-lg-flex {
        display : flex !important;
    }

    .d-lg-inline-flex {
        display : inline-flex !important;
    }

    .d-lg-none {
        display : none !important;
    }

    .flex-lg-fill {
        flex : 1 1 auto !important;
    }

    .flex-lg-row {
        flex-direction : row !important;
    }

    .flex-lg-column {
        flex-direction : column !important;
    }

    .flex-lg-row-reverse {
        flex-direction : row-reverse !important;
    }

    .flex-lg-column-reverse {
        flex-direction : column-reverse !important;
    }

    .flex-lg-grow-0 {
        flex-grow : 0 !important;
    }

    .flex-lg-grow-1 {
        flex-grow : 1 !important;
    }

    .flex-lg-shrink-0 {
        flex-shrink : 0 !important;
    }

    .flex-lg-shrink-1 {
        flex-shrink : 1 !important;
    }

    .flex-lg-wrap {
        flex-wrap : wrap !important;
    }

    .flex-lg-nowrap {
        flex-wrap : nowrap !important;
    }

    .flex-lg-wrap-reverse {
        flex-wrap : wrap-reverse !important;
    }

    .justify-content-lg-start {
        justify-content : flex-start !important;
    }

    .justify-content-lg-end {
        justify-content : flex-end !important;
    }

    .justify-content-lg-center {
        justify-content : center !important;
    }

    .justify-content-lg-between {
        justify-content : space-between !important;
    }

    .justify-content-lg-around {
        justify-content : space-around !important;
    }

    .justify-content-lg-evenly {
        justify-content : space-evenly !important;
    }

    .align-items-lg-start {
        align-items : flex-start !important;
    }

    .align-items-lg-end {
        align-items : flex-end !important;
    }

    .align-items-lg-center {
        align-items : center !important;
    }

    .align-items-lg-baseline {
        align-items : baseline !important;
    }

    .align-items-lg-stretch {
        align-items : stretch !important;
    }

    .align-content-lg-start {
        align-content : flex-start !important;
    }

    .align-content-lg-end {
        align-content : flex-end !important;
    }

    .align-content-lg-center {
        align-content : center !important;
    }

    .align-content-lg-between {
        align-content : space-between !important;
    }

    .align-content-lg-around {
        align-content : space-around !important;
    }

    .align-content-lg-stretch {
        align-content : stretch !important;
    }

    .align-self-lg-auto {
        align-self : auto !important;
    }

    .align-self-lg-start {
        align-self : flex-start !important;
    }

    .align-self-lg-end {
        align-self : flex-end !important;
    }

    .align-self-lg-center {
        align-self : center !important;
    }

    .align-self-lg-baseline {
        align-self : baseline !important;
    }

    .align-self-lg-stretch {
        align-self : stretch !important;
    }
}


@media (min-width : 1200px) {

    .order-xl-first {
        order : -1 !important;
    }

    .order-xl-0 {
        order : 0 !important;
    }

    .order-xl-1 {
        order : 1 !important;
    }

    .order-xl-2 {
        order : 2 !important;
    }

    .order-xl-3 {
        order : 3 !important;
    }

    .order-xl-4 {
        order : 4 !important;
    }

    .order-xl-5 {
        order : 5 !important;
    }

    .order-xl-last {
        order : 6 !important;
    }

    .m-xl-0 {
        margin : 0 !important;
    }

    .m-xl-1 {
        margin : 0.25rem !important;
    }

    .m-xl-2 {
        margin : 0.5rem !important;
    }

    .m-xl-3 {
        margin : 1rem !important;
    }

    .m-xl-4 {
        margin : 1.5rem !important;
    }

    .m-xl-5 {
        margin : 3rem !important;
    }

    .m-xl-auto {
        margin : auto !important;
    }

    .mx-xl-0 {
        margin-right : 0 !important;
        margin-left  : 0 !important;
    }

    .mx-xl-1 {
        margin-right : 0.25rem !important;
        margin-left  : 0.25rem !important;
    }

    .mx-xl-2 {
        margin-right : 0.5rem !important;
        margin-left  : 0.5rem !important;
    }

    .mx-xl-3 {
        margin-right : 1rem !important;
        margin-left  : 1rem !important;
    }

    .mx-xl-4 {
        margin-right : 1.5rem !important;
        margin-left  : 1.5rem !important;
    }

    .mx-xl-5 {
        margin-right : 3rem !important;
        margin-left  : 3rem !important;
    }

    .mx-xl-auto {
        margin-right : auto !important;
        margin-left  : auto !important;
    }

    .my-xl-0 {
        margin-top    : 0 !important;
        margin-bottom : 0 !important;
    }

    .my-xl-1 {
        margin-top    : 0.25rem !important;
        margin-bottom : 0.25rem !important;
    }

    .my-xl-2 {
        margin-top    : 0.5rem !important;
        margin-bottom : 0.5rem !important;
    }

    .my-xl-3 {
        margin-top    : 1rem !important;
        margin-bottom : 1rem !important;
    }

    .my-xl-4 {
        margin-top    : 1.5rem !important;
        margin-bottom : 1.5rem !important;
    }

    .my-xl-5 {
        margin-top    : 3rem !important;
        margin-bottom : 3rem !important;
    }

    .my-xl-auto {
        margin-top    : auto !important;
        margin-bottom : auto !important;
    }

    .mt-xl-0 {
        margin-top : 0 !important;
    }

    .mt-xl-1 {
        margin-top : 0.25rem !important;
    }

    .mt-xl-2 {
        margin-top : 0.5rem !important;
    }

    .mt-xl-3 {
        margin-top : 1rem !important;
    }

    .mt-xl-4 {
        margin-top : 1.5rem !important;
    }

    .mt-xl-5 {
        margin-top : 3rem !important;
    }

    .mt-xl-auto {
        margin-top : auto !important;
    }

    .me-xl-0 {
        margin-right : 0 !important;
    }

    .me-xl-1 {
        margin-right : 0.25rem !important;
    }

    .me-xl-2 {
        margin-right : 0.5rem !important;
    }

    .me-xl-3 {
        margin-right : 1rem !important;
    }

    .me-xl-4 {
        margin-right : 1.5rem !important;
    }

    .me-xl-5 {
        margin-right : 3rem !important;
    }

    .me-xl-auto {
        margin-right : auto !important;
    }

    .mb-xl-0 {
        margin-bottom : 0 !important;
    }

    .mb-xl-1 {
        margin-bottom : 0.25rem !important;
    }

    .mb-xl-2 {
        margin-bottom : 0.5rem !important;
    }

    .mb-xl-3 {
        margin-bottom : 1rem !important;
    }

    .mb-xl-4 {
        margin-bottom : 1.5rem !important;
    }

    .mb-xl-5 {
        margin-bottom : 3rem !important;
    }

    .mb-xl-auto {
        margin-bottom : auto !important;
    }

    .ms-xl-0 {
        margin-left : 0 !important;
    }

    .ms-xl-1 {
        margin-left : 0.25rem !important;
    }

    .ms-xl-2 {
        margin-left : 0.5rem !important;
    }

    .ms-xl-3 {
        margin-left : 1rem !important;
    }

    .ms-xl-4 {
        margin-left : 1.5rem !important;
    }

    .ms-xl-5 {
        margin-left : 3rem !important;
    }

    .ms-xl-auto {
        margin-left : auto !important;
    }

    .p-xl-0 {
        padding : 0 !important;
    }

    .p-xl-1 {
        padding : 0.25rem !important;
    }

    .p-xl-2 {
        padding : 0.5rem !important;
    }

    .p-xl-3 {
        padding : 1rem !important;
    }

    .p-xl-4 {
        padding : 1.5rem !important;
    }

    .p-xl-5 {
        padding : 3rem !important;
    }

    .px-xl-0 {
        padding-right : 0 !important;
        padding-left  : 0 !important;
    }

    .px-xl-1 {
        padding-right : 0.25rem !important;
        padding-left  : 0.25rem !important;
    }

    .px-xl-2 {
        padding-right : 0.5rem !important;
        padding-left  : 0.5rem !important;
    }

    .px-xl-3 {
        padding-right : 1rem !important;
        padding-left  : 1rem !important;
    }

    .px-xl-4 {
        padding-right : 1.5rem !important;
        padding-left  : 1.5rem !important;
    }

    .px-xl-5 {
        padding-right : 3rem !important;
        padding-left  : 3rem !important;
    }

    .py-xl-0 {
        padding-top    : 0 !important;
        padding-bottom : 0 !important;
    }

    .py-xl-1 {
        padding-top    : 0.25rem !important;
        padding-bottom : 0.25rem !important;
    }

    .py-xl-2 {
        padding-top    : 0.5rem !important;
        padding-bottom : 0.5rem !important;
    }

    .py-xl-3 {
        padding-top    : 1rem !important;
        padding-bottom : 1rem !important;
    }

    .py-xl-4 {
        padding-top    : 1.5rem !important;
        padding-bottom : 1.5rem !important;
    }

    .py-xl-5 {
        padding-top    : 3rem !important;
        padding-bottom : 3rem !important;
    }

    .pt-xl-0 {
        padding-top : 0 !important;
    }

    .pt-xl-1 {
        padding-top : 0.25rem !important;
    }

    .pt-xl-2 {
        padding-top : 0.5rem !important;
    }

    .pt-xl-3 {
        padding-top : 1rem !important;
    }

    .pt-xl-4 {
        padding-top : 1.5rem !important;
    }

    .pt-xl-5 {
        padding-top : 3rem !important;
    }

    .pe-xl-0 {
        padding-right : 0 !important;
    }

    .pe-xl-1 {
        padding-right : 0.25rem !important;
    }

    .pe-xl-2 {
        padding-right : 0.5rem !important;
    }

    .pe-xl-3 {
        padding-right : 1rem !important;
    }

    .pe-xl-4 {
        padding-right : 1.5rem !important;
    }

    .pe-xl-5 {
        padding-right : 3rem !important;
    }

    .pb-xl-0 {
        padding-bottom : 0 !important;
    }

    .pb-xl-1 {
        padding-bottom : 0.25rem !important;
    }

    .pb-xl-2 {
        padding-bottom : 0.5rem !important;
    }

    .pb-xl-3 {
        padding-bottom : 1rem !important;
    }

    .pb-xl-4 {
        padding-bottom : 1.5rem !important;
    }

    .pb-xl-5 {
        padding-bottom : 3rem !important;
    }

    .ps-xl-0 {
        padding-left : 0 !important;
    }

    .ps-xl-1 {
        padding-left : 0.25rem !important;
    }

    .ps-xl-2 {
        padding-left : 0.5rem !important;
    }

    .ps-xl-3 {
        padding-left : 1rem !important;
    }

    .ps-xl-4 {
        padding-left : 1.5rem !important;
    }

    .ps-xl-5 {
        padding-left : 3rem !important;
    }

    .gap-xl-0 {
        gap : 0 !important;
    }

    .gap-xl-1 {
        gap : 0.25rem !important;
    }

    .gap-xl-2 {
        gap : 0.5rem !important;
    }

    .gap-xl-3 {
        gap : 1rem !important;
    }

    .gap-xl-4 {
        gap : 1.5rem !important;
    }

    .gap-xl-5 {
        gap : 3rem !important;
    }

    .object-fit-xl-contain {
        -o-object-fit : contain !important;
        object-fit    : contain !important;
    }

    .object-fit-xl-cover {
        -o-object-fit : cover !important;
        object-fit    : cover !important;
    }

    .object-fit-xl-fill {
        -o-object-fit : fill !important;
        object-fit    : fill !important;
    }

    .object-fit-xl-scale {
        -o-object-fit : scale-down !important;
        object-fit    : scale-down !important;
    }

    .object-fit-xl-none {
        -o-object-fit : none !important;
        object-fit    : none !important;
    }

    .d-xl-inline {
        display : inline !important;
    }

    .d-xl-inline-block {
        display : inline-block !important;
    }

    .d-xl-block {
        display : block !important;
    }

    .d-xl-grid {
        display : grid !important;
    }

    .d-xl-inline-grid {
        display : inline-grid !important;
    }

    .d-xl-table {
        display : table !important;
    }

    .d-xl-table-row {
        display : table-row !important;
    }

    .d-xl-table-cell {
        display : table-cell !important;
    }

    .d-xl-flex {
        display : flex !important;
    }

    .d-xl-inline-flex {
        display : inline-flex !important;
    }

    .d-xl-none {
        display : none !important;
    }

    .flex-xl-fill {
        flex : 1 1 auto !important;
    }

    .flex-xl-row {
        flex-direction : row !important;
    }

    .flex-xl-column {
        flex-direction : column !important;
    }

    .flex-xl-row-reverse {
        flex-direction : row-reverse !important;
    }

    .flex-xl-column-reverse {
        flex-direction : column-reverse !important;
    }

    .flex-xl-grow-0 {
        flex-grow : 0 !important;
    }

    .flex-xl-grow-1 {
        flex-grow : 1 !important;
    }

    .flex-xl-shrink-0 {
        flex-shrink : 0 !important;
    }

    .flex-xl-shrink-1 {
        flex-shrink : 1 !important;
    }

    .flex-xl-wrap {
        flex-wrap : wrap !important;
    }

    .flex-xl-nowrap {
        flex-wrap : nowrap !important;
    }

    .flex-xl-wrap-reverse {
        flex-wrap : wrap-reverse !important;
    }

    .justify-content-xl-start {
        justify-content : flex-start !important;
    }

    .justify-content-xl-end {
        justify-content : flex-end !important;
    }

    .justify-content-xl-center {
        justify-content : center !important;
    }

    .justify-content-xl-between {
        justify-content : space-between !important;
    }

    .justify-content-xl-around {
        justify-content : space-around !important;
    }

    .justify-content-xl-evenly {
        justify-content : space-evenly !important;
    }

    .align-items-xl-start {
        align-items : flex-start !important;
    }

    .align-items-xl-end {
        align-items : flex-end !important;
    }

    .align-items-xl-center {
        align-items : center !important;
    }

    .align-items-xl-baseline {
        align-items : baseline !important;
    }

    .align-items-xl-stretch {
        align-items : stretch !important;
    }

    .align-content-xl-start {
        align-content : flex-start !important;
    }

    .align-content-xl-end {
        align-content : flex-end !important;
    }

    .align-content-xl-center {
        align-content : center !important;
    }

    .align-content-xl-between {
        align-content : space-between !important;
    }

    .align-content-xl-around {
        align-content : space-around !important;
    }

    .align-content-xl-stretch {
        align-content : stretch !important;
    }

    .align-self-xl-auto {
        align-self : auto !important;
    }

    .align-self-xl-start {
        align-self : flex-start !important;
    }

    .align-self-xl-end {
        align-self : flex-end !important;
    }

    .align-self-xl-center {
        align-self : center !important;
    }

    .align-self-xl-baseline {
        align-self : baseline !important;
    }

    .align-self-xl-stretch {
        align-self : stretch !important;
    }
}


@media (min-width : 1400px) {
    .order-xxl-first {
        order : -1 !important;
    }

    .order-xxl-0 {
        order : 0 !important;
    }

    .order-xxl-1 {
        order : 1 !important;
    }

    .order-xxl-2 {
        order : 2 !important;
    }

    .order-xxl-3 {
        order : 3 !important;
    }

    .order-xxl-4 {
        order : 4 !important;
    }

    .order-xxl-5 {
        order : 5 !important;
    }

    .order-xxl-last {
        order : 6 !important;
    }

    .m-xxl-0 {
        margin : 0 !important;
    }

    .m-xxl-1 {
        margin : 0.25rem !important;
    }

    .m-xxl-2 {
        margin : 0.5rem !important;
    }

    .m-xxl-3 {
        margin : 1rem !important;
    }

    .m-xxl-4 {
        margin : 1.5rem !important;
    }

    .m-xxl-5 {
        margin : 3rem !important;
    }

    .m-xxl-auto {
        margin : auto !important;
    }

    .mx-xxl-0 {
        margin-right : 0 !important;
        margin-left  : 0 !important;
    }

    .mx-xxl-1 {
        margin-right : 0.25rem !important;
        margin-left  : 0.25rem !important;
    }

    .mx-xxl-2 {
        margin-right : 0.5rem !important;
        margin-left  : 0.5rem !important;
    }

    .mx-xxl-3 {
        margin-right : 1rem !important;
        margin-left  : 1rem !important;
    }

    .mx-xxl-4 {
        margin-right : 1.5rem !important;
        margin-left  : 1.5rem !important;
    }

    .mx-xxl-5 {
        margin-right : 3rem !important;
        margin-left  : 3rem !important;
    }

    .mx-xxl-auto {
        margin-right : auto !important;
        margin-left  : auto !important;
    }

    .my-xxl-0 {
        margin-top    : 0 !important;
        margin-bottom : 0 !important;
    }

    .my-xxl-1 {
        margin-top    : 0.25rem !important;
        margin-bottom : 0.25rem !important;
    }

    .my-xxl-2 {
        margin-top    : 0.5rem !important;
        margin-bottom : 0.5rem !important;
    }

    .my-xxl-3 {
        margin-top    : 1rem !important;
        margin-bottom : 1rem !important;
    }

    .my-xxl-4 {
        margin-top    : 1.5rem !important;
        margin-bottom : 1.5rem !important;
    }

    .my-xxl-5 {
        margin-top    : 3rem !important;
        margin-bottom : 3rem !important;
    }

    .my-xxl-auto {
        margin-top    : auto !important;
        margin-bottom : auto !important;
    }

    .mt-xxl-0 {
        margin-top : 0 !important;
    }

    .mt-xxl-1 {
        margin-top : 0.25rem !important;
    }

    .mt-xxl-2 {
        margin-top : 0.5rem !important;
    }

    .mt-xxl-3 {
        margin-top : 1rem !important;
    }

    .mt-xxl-4 {
        margin-top : 1.5rem !important;
    }

    .mt-xxl-5 {
        margin-top : 3rem !important;
    }

    .mt-xxl-auto {
        margin-top : auto !important;
    }

    .me-xxl-0 {
        margin-right : 0 !important;
    }

    .me-xxl-1 {
        margin-right : 0.25rem !important;
    }

    .me-xxl-2 {
        margin-right : 0.5rem !important;
    }

    .me-xxl-3 {
        margin-right : 1rem !important;
    }

    .me-xxl-4 {
        margin-right : 1.5rem !important;
    }

    .me-xxl-5 {
        margin-right : 3rem !important;
    }

    .me-xxl-auto {
        margin-right : auto !important;
    }

    .mb-xxl-0 {
        margin-bottom : 0 !important;
    }

    .mb-xxl-1 {
        margin-bottom : 0.25rem !important;
    }

    .mb-xxl-2 {
        margin-bottom : 0.5rem !important;
    }

    .mb-xxl-3 {
        margin-bottom : 1rem !important;
    }

    .mb-xxl-4 {
        margin-bottom : 1.5rem !important;
    }

    .mb-xxl-5 {
        margin-bottom : 3rem !important;
    }

    .mb-xxl-auto {
        margin-bottom : auto !important;
    }

    .ms-xxl-0 {
        margin-left : 0 !important;
    }

    .ms-xxl-1 {
        margin-left : 0.25rem !important;
    }

    .ms-xxl-2 {
        margin-left : 0.5rem !important;
    }

    .ms-xxl-3 {
        margin-left : 1rem !important;
    }

    .ms-xxl-4 {
        margin-left : 1.5rem !important;
    }

    .ms-xxl-5 {
        margin-left : 3rem !important;
    }

    .ms-xxl-auto {
        margin-left : auto !important;
    }

    .p-xxl-0 {
        padding : 0 !important;
    }

    .p-xxl-1 {
        padding : 0.25rem !important;
    }

    .p-xxl-2 {
        padding : 0.5rem !important;
    }

    .p-xxl-3 {
        padding : 1rem !important;
    }

    .p-xxl-4 {
        padding : 1.5rem !important;
    }

    .p-xxl-5 {
        padding : 3rem !important;
    }

    .px-xxl-0 {
        padding-right : 0 !important;
        padding-left  : 0 !important;
    }

    .px-xxl-1 {
        padding-right : 0.25rem !important;
        padding-left  : 0.25rem !important;
    }

    .px-xxl-2 {
        padding-right : 0.5rem !important;
        padding-left  : 0.5rem !important;
    }

    .px-xxl-3 {
        padding-right : 1rem !important;
        padding-left  : 1rem !important;
    }

    .px-xxl-4 {
        padding-right : 1.5rem !important;
        padding-left  : 1.5rem !important;
    }

    .px-xxl-5 {
        padding-right : 3rem !important;
        padding-left  : 3rem !important;
    }

    .py-xxl-0 {
        padding-top    : 0 !important;
        padding-bottom : 0 !important;
    }

    .py-xxl-1 {
        padding-top    : 0.25rem !important;
        padding-bottom : 0.25rem !important;
    }

    .py-xxl-2 {
        padding-top    : 0.5rem !important;
        padding-bottom : 0.5rem !important;
    }

    .py-xxl-3 {
        padding-top    : 1rem !important;
        padding-bottom : 1rem !important;
    }

    .py-xxl-4 {
        padding-top    : 1.5rem !important;
        padding-bottom : 1.5rem !important;
    }

    .py-xxl-5 {
        padding-top    : 3rem !important;
        padding-bottom : 3rem !important;
    }

    .pt-xxl-0 {
        padding-top : 0 !important;
    }

    .pt-xxl-1 {
        padding-top : 0.25rem !important;
    }

    .pt-xxl-2 {
        padding-top : 0.5rem !important;
    }

    .pt-xxl-3 {
        padding-top : 1rem !important;
    }

    .pt-xxl-4 {
        padding-top : 1.5rem !important;
    }

    .pt-xxl-5 {
        padding-top : 3rem !important;
    }

    .pe-xxl-0 {
        padding-right : 0 !important;
    }

    .pe-xxl-1 {
        padding-right : 0.25rem !important;
    }

    .pe-xxl-2 {
        padding-right : 0.5rem !important;
    }

    .pe-xxl-3 {
        padding-right : 1rem !important;
    }

    .pe-xxl-4 {
        padding-right : 1.5rem !important;
    }

    .pe-xxl-5 {
        padding-right : 3rem !important;
    }

    .pb-xxl-0 {
        padding-bottom : 0 !important;
    }

    .pb-xxl-1 {
        padding-bottom : 0.25rem !important;
    }

    .pb-xxl-2 {
        padding-bottom : 0.5rem !important;
    }

    .pb-xxl-3 {
        padding-bottom : 1rem !important;
    }

    .pb-xxl-4 {
        padding-bottom : 1.5rem !important;
    }

    .pb-xxl-5 {
        padding-bottom : 3rem !important;
    }

    .ps-xxl-0 {
        padding-left : 0 !important;
    }

    .ps-xxl-1 {
        padding-left : 0.25rem !important;
    }

    .ps-xxl-2 {
        padding-left : 0.5rem !important;
    }

    .ps-xxl-3 {
        padding-left : 1rem !important;
    }

    .ps-xxl-4 {
        padding-left : 1.5rem !important;
    }

    .ps-xxl-5 {
        padding-left : 3rem !important;
    }

    .gap-xxl-0 {
        gap : 0 !important;
    }

    .gap-xxl-1 {
        gap : 0.25rem !important;
    }

    .gap-xxl-2 {
        gap : 0.5rem !important;
    }

    .gap-xxl-3 {
        gap : 1rem !important;
    }

    .gap-xxl-4 {
        gap : 1.5rem !important;
    }

    .gap-xxl-5 {
        gap : 3rem !important;
    }

    .object-fit-xxl-contain {
        -o-object-fit : contain !important;
        object-fit    : contain !important;
    }

    .object-fit-xxl-cover {
        -o-object-fit : cover !important;
        object-fit    : cover !important;
    }

    .object-fit-xxl-fill {
        -o-object-fit : fill !important;
        object-fit    : fill !important;
    }

    .object-fit-xxl-scale {
        -o-object-fit : scale-down !important;
        object-fit    : scale-down !important;
    }

    .object-fit-xxl-none {
        -o-object-fit : none !important;
        object-fit    : none !important;
    }

    .d-xxl-inline {
        display : inline !important;
    }

    .d-xxl-inline-block {
        display : inline-block !important;
    }

    .d-xxl-block {
        display : block !important;
    }

    .d-xxl-grid {
        display : grid !important;
    }

    .d-xxl-inline-grid {
        display : inline-grid !important;
    }

    .d-xxl-table {
        display : table !important;
    }

    .d-xxl-table-row {
        display : table-row !important;
    }

    .d-xxl-table-cell {
        display : table-cell !important;
    }

    .d-xxl-flex {
        display : flex !important;
    }

    .d-xxl-inline-flex {
        display : inline-flex !important;
    }

    .d-xxl-none {
        display : none !important;
    }

    .flex-xxl-fill {
        flex : 1 1 auto !important;
    }

    .flex-xxl-row {
        flex-direction : row !important;
    }

    .flex-xxl-column {
        flex-direction : column !important;
    }

    .flex-xxl-row-reverse {
        flex-direction : row-reverse !important;
    }

    .flex-xxl-column-reverse {
        flex-direction : column-reverse !important;
    }

    .flex-xxl-grow-0 {
        flex-grow : 0 !important;
    }

    .flex-xxl-grow-1 {
        flex-grow : 1 !important;
    }

    .flex-xxl-shrink-0 {
        flex-shrink : 0 !important;
    }

    .flex-xxl-shrink-1 {
        flex-shrink : 1 !important;
    }

    .flex-xxl-wrap {
        flex-wrap : wrap !important;
    }

    .flex-xxl-nowrap {
        flex-wrap : nowrap !important;
    }

    .flex-xxl-wrap-reverse {
        flex-wrap : wrap-reverse !important;
    }

    .justify-content-xxl-start {
        justify-content : flex-start !important;
    }

    .justify-content-xxl-end {
        justify-content : flex-end !important;
    }

    .justify-content-xxl-center {
        justify-content : center !important;
    }

    .justify-content-xxl-between {
        justify-content : space-between !important;
    }

    .justify-content-xxl-around {
        justify-content : space-around !important;
    }

    .justify-content-xxl-evenly {
        justify-content : space-evenly !important;
    }

    .align-items-xxl-start {
        align-items : flex-start !important;
    }

    .align-items-xxl-end {
        align-items : flex-end !important;
    }

    .align-items-xxl-center {
        align-items : center !important;
    }

    .align-items-xxl-baseline {
        align-items : baseline !important;
    }

    .align-items-xxl-stretch {
        align-items : stretch !important;
    }

    .align-content-xxl-start {
        align-content : flex-start !important;
    }

    .align-content-xxl-end {
        align-content : flex-end !important;
    }

    .align-content-xxl-center {
        align-content : center !important;
    }

    .align-content-xxl-between {
        align-content : space-between !important;
    }

    .align-content-xxl-around {
        align-content : space-around !important;
    }

    .align-content-xxl-stretch {
        align-content : stretch !important;
    }

    .align-self-xxl-auto {
        align-self : auto !important;
    }

    .align-self-xxl-start {
        align-self : flex-start !important;
    }

    .align-self-xxl-end {
        align-self : flex-end !important;
    }

    .align-self-xxl-center {
        align-self : center !important;
    }

    .align-self-xxl-baseline {
        align-self : baseline !important;
    }

    .align-self-xxl-stretch {
        align-self : stretch !important;
    }

    .order-xxl-first {
        order : -1 !important;
    }
}

/* End */


/* Start:/css/swiper-bundle.min.css?178669968014609*/
/**
 * Swiper 12.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 27, 2026
 */

:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}}
/* End */


/* Start:/css/jquery.fancybox.min.css?178669972612795*/
body.compensate-for-scrollbar{overflow:hidden}.fancybox-active{height:auto}.fancybox-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancybox-container{-webkit-backface-visibility:hidden;height:100%;left:0;outline:none;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:manipulation;touch-action:manipulation;transform:translateZ(0);width:100%;z-index:99992}.fancybox-container *{box-sizing:border-box}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancybox-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancybox-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.9;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;visibility:hidden;z-index:99997}.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;transition:opacity .25s ease 0s,visibility 0s ease 0s;visibility:visible}.fancybox-infobar{color:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-toolbar{right:0;top:0}.fancybox-stage{direction:ltr;overflow:visible;transform:translateZ(0);z-index:99994}.fancybox-is-open .fancybox-stage{overflow:hidden}.fancybox-slide{-webkit-backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:transform,opacity;white-space:normal;width:100%;z-index:99994}.fancybox-slide:before{content:"";display:inline-block;font-size:0;height:100%;vertical-align:middle;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--image{overflow:hidden;padding:44px 0}.fancybox-slide--image:before{display:none}.fancybox-slide--html{padding:6px}.fancybox-content{background:#fff;display:inline-block;margin:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:relative;text-align:left;vertical-align:middle}.fancybox-slide--image .fancybox-content{animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;transform-origin:top left;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancybox-can-zoomOut .fancybox-content{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-content{cursor:zoom-in}.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-content{cursor:grab}.fancybox-is-grabbing .fancybox-content{cursor:grabbing}.fancybox-container [data-selectable=true]{cursor:text}.fancybox-image,.fancybox-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancybox-spaceball{z-index:1}.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--pdf .fancybox-content,.fancybox-slide--video .fancybox-content{height:100%;overflow:visible;padding:0;width:100%}.fancybox-slide--video .fancybox-content{background:#000}.fancybox-slide--map .fancybox-content{background:#e5e3df}.fancybox-slide--iframe .fancybox-content{background:#fff}.fancybox-iframe,.fancybox-video{background:transparent;border:0;display:block;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancybox-iframe{left:0;position:absolute;top:0}.fancybox-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancybox-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancybox-button{background:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;display:inline-block;height:44px;margin:0;padding:10px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:44px}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:hover{color:#fff}.fancybox-button:focus{outline:none}.fancybox-button.fancybox-focus{outline:1px dotted}.fancybox-button[disabled],.fancybox-button[disabled]:hover{color:#888;cursor:default;outline:none}.fancybox-button div{height:100%}.fancybox-button svg{display:block;height:100%;overflow:visible;position:relative;width:100%}.fancybox-button svg path{fill:currentColor;stroke-width:0}.fancybox-button--fsenter svg:nth-child(2),.fancybox-button--fsexit svg:first-child,.fancybox-button--pause svg:first-child,.fancybox-button--play svg:nth-child(2){display:none}.fancybox-progress{background:#ff5268;height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:99998}.fancybox-close-small{background:transparent;border:0;border-radius:0;color:#ccc;cursor:pointer;opacity:.8;padding:8px;position:absolute;right:-12px;top:-44px;z-index:401}.fancybox-close-small:hover{color:#fff;opacity:1}.fancybox-slide--html .fancybox-close-small{color:currentColor;padding:10px;right:0;top:0}.fancybox-slide--image.fancybox-is-scaling .fancybox-content{overflow:hidden}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small{display:none}.fancybox-navigation .fancybox-button{background-clip:content-box;height:100px;opacity:0;position:absolute;top:calc(50% - 50px);width:70px}.fancybox-navigation .fancybox-button div{padding:7px}.fancybox-navigation .fancybox-button--arrow_left{left:0;left:env(safe-area-inset-left);padding:31px 26px 31px 6px}.fancybox-navigation .fancybox-button--arrow_right{padding:31px 6px 31px 26px;right:0;right:env(safe-area-inset-right)}.fancybox-caption{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:75px 44px 25px;pointer-events:none;right:0;text-align:center;z-index:99996}@supports (padding:max(0px)){.fancybox-caption{padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))}}.fancybox-caption--separate{margin-top:-50px}.fancybox-caption__body{max-height:50vh;overflow:auto;pointer-events:all}.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited{color:#ccc;text-decoration:none}.fancybox-caption a:hover{color:#fff;text-decoration:underline}.fancybox-loading{animation:a 1s linear infinite;background:transparent;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}@keyframes a{to{transform:rotate(1turn)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{opacity:0;transform:translate3d(-100%,0,0)}.fancybox-fx-slide.fancybox-slide--next{opacity:0;transform:translate3d(100%,0,0)}.fancybox-fx-slide.fancybox-slide--current{opacity:1;transform:translateZ(0)}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{opacity:0;transform:scale3d(1.5,1.5,1.5)}.fancybox-fx-zoom-in-out.fancybox-slide--next{opacity:0;transform:scale3d(.5,.5,.5)}.fancybox-fx-zoom-in-out.fancybox-slide--current{opacity:1;transform:scaleX(1)}.fancybox-fx-rotate.fancybox-slide--previous{opacity:0;transform:rotate(-1turn)}.fancybox-fx-rotate.fancybox-slide--next{opacity:0;transform:rotate(1turn)}.fancybox-fx-rotate.fancybox-slide--current{opacity:1;transform:rotate(0deg)}.fancybox-fx-circular.fancybox-slide--previous{opacity:0;transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancybox-fx-circular.fancybox-slide--next{opacity:0;transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancybox-fx-circular.fancybox-slide--current{opacity:1;transform:scaleX(1) translateZ(0)}.fancybox-fx-tube.fancybox-slide--previous{transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{transform:translateZ(0) scale(1)}@media (max-height:576px){.fancybox-slide{padding-left:6px;padding-right:6px}.fancybox-slide--image{padding:6px 0}.fancybox-close-small{right:-6px}.fancybox-slide--image .fancybox-close-small{background:#4e4e4e;color:#f2f4f6;height:36px;opacity:1;padding:6px;right:0;top:0;width:36px}.fancybox-caption{padding-left:12px;padding-right:12px}@supports (padding:max(0px)){.fancybox-caption{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}}.fancybox-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancybox-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancybox-share p{margin:0;padding:0}.fancybox-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancybox-share__button:link,.fancybox-share__button:visited{color:#fff}.fancybox-share__button:hover{text-decoration:none}.fancybox-share__button--fb{background:#3b5998}.fancybox-share__button--fb:hover{background:#344e86}.fancybox-share__button--pt{background:#bd081d}.fancybox-share__button--pt:hover{background:#aa0719}.fancybox-share__button--tw{background:#1da1f2}.fancybox-share__button--tw:hover{background:#0d95e8}.fancybox-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancybox-share__button svg path{fill:#fff}.fancybox-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancybox-thumbs{background:#ddd;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:rgba(0,0,0,0);top:0;width:212px;z-index:99995}.fancybox-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs__list{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancybox-thumbs-x .fancybox-thumbs__list{overflow:hidden}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar{width:7px}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs__list a{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(0,0,0,.1);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancybox-thumbs__list a:before{border:6px solid #ff5268;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancybox-thumbs__list a:focus:before{opacity:.5}.fancybox-thumbs__list a.fancybox-thumbs-active:before{opacity:1}@media (max-width:576px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs__list a{max-width:calc(100% - 10px)}}
/* End */


/* Start:/css/custom.css?17867006878049*/
.pageBody {
    margin-bottom : 3rem;
}

.btn-orange[disabled] {
    cursor  : default;
    opacity : .5;
}

.pageBody ol, .pageBody ul {
    margin       : 0;
    padding-left : 20px;
    font-size    : 14px;
    line-height  : 1.6;
    color        : #4a5a6a;
}

.pageBody h2 {
    margin-top    : 1rem;
    margin-bottom : 1rem;
}

.pageBody h3 {
    margin-top    : .7rem;
    margin-bottom : .7rem;
}

.pageBody h4 {
    margin-top    : .3rem;
    margin-bottom : .3rem;
}

.pageHead, .page-title {
    margin-bottom  : 35px;
    color          : rgba(26, 43, 76, 1);

    font-size      : 35px;
    font-weight    : 700;
    letter-spacing : 0%;

    line-height    : 1.2;
}

.grid.about {
    --bs-gap : 25px;
}

.about-block {
    border-radius : 20px;
    background    : rgba(255, 255, 255, 1);
    padding       : 15px 50px 0;
}

.about h2 {
    margin-top  : 0;
    padding-top : 0;
}

.about p {
    margin-bottom : 15px;
}

.about .d-inline-block {
    width : auto;
}

.contacts {
    margin-top : 70px;
}

.contacts-block {
    border-radius   : 20px;
    background      : rgba(255, 255, 255, 1);
    padding         : 35px 35px;

    height          : 390px;
    display         : flex;
    align-items     : flex-start;
    justify-content : flex-end;
    flex-direction  : column;
    gap             : 25px;
}

.contacts-block span {
    color          : rgba(46, 51, 61, 1);

    font-size      : 35px;
    font-weight    : 600;
    line-height    : 52px;
    letter-spacing : 0%;
    text-align     : left;
}

.contacts-block-1 {
    background : #fff url("/img/contacts-mail.png") no-repeat right top;
}

.contacts-block-2 {
    background : #fff url("/img/contacts-chat.png") no-repeat right top;
}

.contacts-block .btn-orange {
    width : auto;
}

.credit .section-title.centered {
    margin-bottom : 10px;
}

@media (max-width : 1025px) {
    .contacts-block {

        background-size : 60% auto;
        min-height      : 330px;
        height          : auto;
    }
}

@media (max-width : 768px) {

    .contacts-block {

        align-items         : flex-start;
        justify-content     : flex-start;
        background-position : bottom right;
        padding-top         : 35px;
        background-size     : 70% auto;
        min-height          : 430px;
        height              : auto;
        gap                 : 20px;
    }

    .contacts-block-1 {
        min-height : 380px;
    }

    .contacts-block .btn-orange.btn-lg {
        font-size : 12px;
        width     : 100%;
    }

    .pageHead, .page-title {
        font-size     : 25px;
        margin-bottom : 15px;
    }

    .grid.about {
        --bs-gap : 20px;
    }

    .contacts {
        margin-top : 30px;
    }

    .catalog-results {
        width : 100%;
    }


    .mobile-nav-footer {
        margin-top            : 4rem;
        display               : grid;
        grid-auto-columns     : 1fr;
        grid-template-columns : repeat(2, 1fr);
        grid-template-rows    : repeat(2, 1fr);
    }

    .mobile-nav-footer span:not(.contact-label) {
        display : none
    }

    .footer-col:nth-child(1) {
        grid-area : 1 / 1 / 2 / 2;
    }

    .footer-col:nth-child(2) {
        grid-area : 2 / 1 / 3 / 2;
    }

    .footer-col:nth-child(3) {
        grid-area  : 2 / 2 / 3 / 3;
        align-self : end;
    }

    .stats-text p {
        font-size : 14px;
    }
}

@media (max-width : 480px) {
    .why-card, .moto-card {
        min-width : 200px;
        max-width : 240px;
    }
}

@media (max-width : 500px) {
    .checkbox-grid {
        gap : 11px;
    }

    .find-form-wrap {
        padding : 15px;
    }

    .pay-tags span {
        font-size : 10px;
    }

    .partner-logo {
        max-width : 70% !important;
    }


    .breadcrumb {
        margin-bottom : 16px;
        margin-top    : 1rem;
    }

    .about-block {
        padding  : 15px 30px 0 !important;
        overflow : hidden;
    }

    .about-block .btn-orange {
        width     : 100%;
        font-size : 14px;
    }

    .about-block p {
        margin-bottom : 15px;
        font-size     : 14px;
        line-height   : 1.3;
    }

    .country img {
        max-width   : 120%;
        margin-left : -10%;
    }

    .calc-result-item {
        width : 50%;
    }

    .credit_summ_field, .calc-result-big {
        font-size : 17px !important;
    }

    .pay-tags span {
        font-size : 10px !important;
    }

    .custom-checkbox-wrapper label {
        display         : flex;
        align-items     : center;
        flex-wrap       : wrap;
        justify-content : center;
    }
    .container .container{
        padding: 0;
    }
    .contacts .pageHead{
        text-align: center;
    }.pageHead{
         text-align: center;
     }
}

.navigation {
    display : none;
}

.sort-menu a {
    width   : 90%;
    display : inline-block;
}

.catalog-card-body {
    justify-content : space-between;
}

.btn-link {
    border          : none;
    background      : transparent;
    text-decoration : underline;
}

.catalog-card-img img {
    object-fit : contain;
}

.thumb-item img {
    object-fit     : contain;
    mix-blend-mode : multiply;
}


.nav {
    margin-left  : 70px;
    margin-right : auto;
}

.nav a.active {
    color : #F5A623;
}

body .logo img {
    height : 50px;
}

.nav a {
    font-size : 17px;
}


.stats-text p {
    font-size : 17px;
    color     : rgba(46, 51, 61, 1);
}

.hero-top {
    margin-top : 11px;
}

.steps-bg-pattern {
    opacity : 1;
}


.credit_preim {
}

.subMenu {
    display         : none;
    position        : absolute;
    right           : 0;
    left            : 0;
    bottom          : 0;
    transform       : translateY(100%);
    background      : #fff;
    list-style      : none;
    border-radius   : 0 0 20px 20px;
    padding         : 0 35px 35px;

    justify-content : space-around;
}


.nav {
}

.nav .parent {
}

.nav .parent:hover .subMenu {
    display : flex;
}

.nav .parent:hover:before {
    content       : '';
    height        : 50px;
    z-index       : -1;
    position      : absolute;
    right         : -1px;
    left          : -1px;
    bottom        : 0;
    background    : #fff;
    list-style    : none;
    transform     : translateY(28%);
    border-radius : 0;
}

.subMenu img {
    max-height : 140px;
    width      : auto;
}

.subMenu li {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
}


.subMenu li a {
    color          : rgba(46, 51, 61, 1);

    font-size      : 17px;
    font-weight    : 500;
    line-height    : 23px;
    letter-spacing : 0%;
    text-align     : center;
}


.calc-term.custom-select-trigger.active .custom-select-menu {
    opacity    : 1;
    visibility : visible;
}


.blog .card-img {
    max-height    : 250px;
    height        : 200px;
    overflow      : hidden;
    border-radius : 20px;
}

.blog .section {
    padding : 0;
}

.blog .card-date {
    position        : absolute;
    z-index         : 100;
    color           : #fff;
    border-radius   : 20px;
    border          : 1px solid #fff;
    margin-top      : 15px;
    margin-left     : 15px;
    padding         : 7px 14px;
    font-size       : 14px;
    background      : rgba(255, 255, 255, 0.15);
    backdrop-filter : blur(2px);
}

.blog .card-name {
    font-size     : 25px;
    color         : #2E333D;
    margin-bottom : 6px;
    line-height   : 23px;
    font-weight   : 600;
}

.blog .card-desc {
    font-size     : 15px;
    color         : #2E333D80;
    margin-top    : 15px;
    margin-bottom : 15px;
    line-height   : 20px;
    font-weight   : 600;
}

.blog .moto-card:hover {
    box-shadow : unset;
}

@media (max-width : 680px) {
    .credit-calc-card {
        overflow: visible;
    }
    .calc-image-part{
        overflow: hidden;
    }
}
.gallery-main-slider .slider-item {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

/* End */


/* Start:/local/templates/main/components/intec.regionality/regions.select/template1/style.css?17864382625229*/
.ns-intec-regionality.c-regions-select.c-regions-select-default {
  display: inline-block;
  position: relative;
  color: #2d2d2d;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-region {
  display: inline-flex;
  cursor: pointer;
  -webkit-transition: color 350ms;
  -moz-transition: color 350ms;
  -ms-transition: color 350ms;
  -o-transition: color 350ms;
  transition: color 350ms;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-region:hover {
  color: #868686;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-overlay {
  display: block;
  position: absolute;
  background-color: #000000;
  opacity: 0.3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-window {
  display: block;
  position: relative;
  color: #2d2d2d;
  
  right: 0;
  bottom: auto;
  left: auto;
  background-color: #fff;
 
  max-width: 650px;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-window-header {
  display: block;
  position: relative;
 
  padding: 10px;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-window-title {
  display: block;
  padding-right: 60px;
  margin-bottom:0;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-window-close {
  display: flex;
  position: absolute;
  top: 50%;
  right: 10px;
  bottom: auto;
  left: auto;
  font-size: 12px;
  line-height: 1;
  margin-top: -7px;
  padding-bottom: 1px;
  cursor: pointer;
    top: 15px;
    right: 15px;
    cursor: pointer;
    font-size: 26px;
	text-align: center;
    align-items: center;
	width:35px;
	height:35px;
	justify-content:center;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-window-content {
  display: block; overflow-y: auto;max-height: 100vh;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-search {
  display: block;
  position: relative;
  
  padding: 10px;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-search-title {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-search-input {
  display: block;
  width: 100%;
  color: #727C83;
  background-color: #f7f7f7;
  border: 0px solid #e7e7e7;
  border-radius: 2px;
  padding: 5px 5px;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
    padding: 22px 40px 22px 16px;
    background-color: #f3f4f6;
    font-weight:700;
    border-radius: 8px;
    font-size: 12px;
    color: #374151;
    outline: none;
    box-sizing: border-box;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-regions {
  display: grid;
  margin-top: 0px; 
    grid-template-columns: 1fr;
    gap: 10px;
      



}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-region {
  display: flex;
  cursor: pointer;
  -webkit-transition: background-color 350ms;
  -moz-transition: background-color 350ms;
  -ms-transition: background-color 350ms;
  -o-transition: background-color 350ms;
  transition: background-color 350ms;
  padding-left:20px;
  padding-right:20px;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-region:hover {
  background-color: #f7f7f7;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-question {
  display: block;
  position: absolute;
  border: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  top: 100%;
  right: auto;
  bottom: auto;
  left: 0;
  min-width: 200px;
  margin-top: 10px;
  padding: 10px;
  z-index: 10;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-question-text {
  display: block;
  margin-bottom: 10px;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-question-buttons {
  display: block;
  font-size: 0;
  white-space: nowrap;
  margin: -5px;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-question-button {
  display: inline-block;
  font-size: 14px;
  margin: 5px;
  padding: 5px 15px;
  background-color: #2d2d2d;
  border: none;
  color: #fff;
  -webkit-transition: background-color 350ms;
  -moz-transition: background-color 350ms;
  -ms-transition: background-color 350ms;
  -o-transition: background-color 350ms;
  transition: background-color 350ms;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-question-button:hover {
  background-color: #868686;
}

/*# sourceMappingURL=style.css.map */

/* End */


/* Start:/local/templates/main/styles.css?17932118741472*/
/* ==========================================================================
   ROMBIC BENTO — плавные hover-эффекты
   --------------------------------------------------------------------------
   Блок изолирован префиксом .rombic-bento-wrapper, чтобы scale и box-shadow
   применялись только к бенто-карточкам главной и не влияли на каталог.
   ========================================================================== */
.rombic-bento-wrapper .rombic-bento__card,
.rombic-bento-wrapper .rombic-bento__service {
    transition:
        transform .32s cubic-bezier(.2, .8, .2, 1),
        box-shadow .32s cubic-bezier(.2, .8, .2, 1),
        border-color .32s cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) {
    .rombic-bento-wrapper .rombic-bento__card:hover,
    .rombic-bento-wrapper .rombic-bento__service:hover {
        z-index: 3;
        transform: scale(1.03);
        box-shadow: 0 18px 42px rgba(16, 24, 39, .16);
    }

    .rombic-bento-wrapper .rombic-bento__card:hover {
        border-color: rgba(249, 115, 22, .18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rombic-bento-wrapper .rombic-bento__card,
    .rombic-bento-wrapper .rombic-bento__service {
        transition: none;
    }

    .rombic-bento-wrapper .rombic-bento__card:hover,
    .rombic-bento-wrapper .rombic-bento__service:hover {
        transform: none;
    }
}


/* End */


/* Start:/local/templates/main/template_styles.css?179321187419686*/
.credit_summ_field{

    font-size: 25px;
    font-weight: 700;
    color: #2E333D;
    border: none;
    outline: none;
    flex-shrink: 0;

}

.ya-share2__list {
    padding : 8px 0 !important;
}

.why-card .why-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.btn-sm {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.card-body {
    max-width : 360px;
}

.moto-card {
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
}

.pay-tags span {
    font-size : 13px;
}

.tabsContent {
    font-size : 16px;
}

.btn-submit[disabled] {
    cursor  : default;
    opacity : .5;
}

@media (max-width : 400px) {
    .btn-glass.btn-lg,
    .btn-orange.btn-lg {
        font-size : 11px;
        width     : auto;
        padding   : 10px 20px;
    }

    .hero-desc {
        width         : 100%;
        margin-bottom : 10px;
    }

    .hero-title {
        font-size : 22px;
    }

    .hero-sub {
        margin-top : 5px;
    }
}

@media (max-width : 680px) {
    .show-all-link {
        text-align   : center;
        margin-right : 0;
    }
}

.calc-btn-submit {
    text-align : center;
}


[href^="https://dzen.ru"] {
    display: flex !important;
}


dialog {
    position: fixed;
    min-height: 150px;
    min-width: 350px;
    max-width: 500px;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
    border-radius: 24px;
    padding: 40px 60px;
}


.closeDialogBtn {

    margin: 0;
    font-size: 18px;
    font-weight: 300;
    font-family: inherit;
    transition: background-color 0.2s linear;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #000;
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 50%;
    opacity: .5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: none;
}

.dialog__wrapper {
    padding: 1em;
}

dialog::backdrop {
    background-color: rgb(0 0 0 / 0.8);
}

.scroll-lock {
    overflow: hidden;
}
.modalHead{}
.modalInfo{ text-align: center; padding-top: 10px;}
.calc-value2 {
    font-size: 17px;
    font-weight: 700;
    color: #2E333D;
    background: transparent;
    border: none;
}
.calc-value {
    background: transparent;
    border: none;
}
.calc-value2:focus,.calc-value:focus,
.calc-value2:active,.calc-value:active,
.calc-value2,.calc-value{ outline: none}
.header .ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-question {
    right: 0 !important;
    left: auto !important;

    border-radius: 30px;
    box-shadow: 0 0 8px #0000004d;
}
.header .ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-dialog-window {

    margin-left: auto;
}
.ns-intec-regionality.c-regions-select.c-regions-select-default .regions-select-question-button {

    background: linear-gradient(to bottom, #FFBB00, #FF5900);
    color: #ffffff !important;
    cursor: pointer;
}

/* ==========================================================================
   ROMBIC BENTO — первый экран главной
   --------------------------------------------------------------------------
   12-колоночная сетка, ровно два этажа:
     1) hero 8/12 + CTA 4/12, высота 350px;
     2) 3 категории по 3/12 + сервисы 3/12, высота 180px.
   Слайдер «Предложения в наличии» намеренно живёт вне этой сетки.
   ========================================================================== */
.rombic-bento-wrapper {
    --bento-gap: 20px;
    --bento-radius: 22px;
    --bento-radius-md: 16px;
    --bento-radius-sm: 13px;
    --bento-ink: #151922;
    --bento-muted: #6b7280;
    --bento-line: #e6e8ec;
    --bento-orange: #f97316;
    --bento-orange-deep: #ea580c;
    --bento-dark: #101827;
    --bento-ease: cubic-bezier(.2, .8, .2, 1);
    box-sizing: border-box;
    width: 100%;
    max-width: 1728px; /* как .header-inner и .stats-container */
    margin: 24px auto 0;
    padding: 0 24px;
    color: var(--bento-ink);
    font-family: inherit;
}

.rombic-bento-wrapper *,
.rombic-bento-wrapper *::before,
.rombic-bento-wrapper *::after {
    box-sizing: border-box;
}

.rombic-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 350px 180px;
    gap: var(--bento-gap);
    width: 100%;
}

.rombic-bento__cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--bento-radius);
}

.rombic-bento__cell--span-8 { grid-column: span 8; }
.rombic-bento__cell--span-4 { grid-column: span 4; }
.rombic-bento__cell--span-3 { grid-column: span 3; }

.rombic-bento__card {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(16, 24, 39, .07);
    box-shadow: 0 4px 18px rgba(16, 24, 39, .05);
    transition:
        transform .32s var(--bento-ease),
        box-shadow .32s var(--bento-ease),
        border-color .32s var(--bento-ease);
}

.rombic-bento__card:focus-visible,
.rombic-bento__service:focus-visible {
    outline: 3px solid rgba(249, 115, 22, .55);
    outline-offset: 3px;
}

.rombic-bento__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bento-orange);
}

.rombic-bento__eyebrow::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/* ---------- 1 этаж: hero ---------- */
.rombic-bento__hero {
    border: 0;
    background: #0d1522;
    box-shadow: 0 14px 40px rgba(10, 17, 29, .16);
}

.rombic-bento__hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    opacity: .60;
    transform: scale(1.01);
    transition: transform .8s var(--bento-ease), opacity .4s ease;
}

.rombic-bento__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(8, 13, 22, .97) 0%,
            rgba(8, 13, 22, .88) 42%,
            rgba(8, 13, 22, .48) 72%,
            rgba(8, 13, 22, .16) 100%);
}

.rombic-bento__hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 40px 44px;
}

.rombic-bento__hero-title {
    max-width: 730px;
    margin: 14px 0 0;
    font-size: clamp(30px, 2.9vw, 46px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.035em;
    color: #fff;
}

.rombic-bento__hero-brand {
    color: #ffb15c;
}

.rombic-bento__hero-text {
    max-width: 570px;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .76);
}

.rombic-bento__hero:hover .rombic-bento__hero-bg {
    opacity: .68;
    transform: scale(1.055);
}

/* ---------- 1 этаж: CTA ---------- */
.rombic-bento__cta {
    display: flex;
    border: 0;
    background: linear-gradient(135deg, #ff9a1f 0%, #ff6a00 52%, #ef4d00 100%);
    box-shadow: 0 12px 32px rgba(249, 115, 22, .22);
    color: #fff;
}

.rombic-bento__cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .18;
    mix-blend-mode: soft-light;
    transform: scale(1.02);
    transition: transform .7s var(--bento-ease);
}

.rombic-bento__cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .32), transparent 38%),
        linear-gradient(160deg, rgba(255, 255, 255, .08), transparent 50%, rgba(120, 35, 0, .20));
}

.rombic-bento__cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    padding: 32px 30px;
}

.rombic-bento__cta .rombic-bento__eyebrow {
    color: rgba(255, 255, 255, .88);
}

.rombic-bento__cta .rombic-bento__eyebrow::before {
    background: rgba(255, 255, 255, .72);
}

.rombic-bento__cta-title {
    display: block;
    max-width: 290px;
    margin-top: 16px;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: -.035em;
}

.rombic-bento__cta-text {
    display: block;
    margin-top: 9px;
    font-size: 15px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .84);
}

.rombic-bento__cta-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    transition: background .25s ease, transform .25s ease;
}

.rombic-bento__cta-btn svg {
    flex: 0 0 auto;
    transition: transform .25s ease;
}

.rombic-bento__cta:hover .rombic-bento__cta-bg {
    transform: scale(1.07);
}

.rombic-bento__cta:hover .rombic-bento__cta-btn {
    background: rgba(255, 255, 255, .24);
    transform: translateX(2px);
}

.rombic-bento__cta:hover .rombic-bento__cta-btn svg {
    transform: translateX(3px);
}

/* ---------- 2 этаж: категории ---------- */
.rombic-bento__category {
    display: flex;
    isolation: isolate;
}

.rombic-bento__category::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        #fff 0%,
        #fff 44%,
        rgba(255, 255, 255, .88) 56%,
        rgba(255, 255, 255, .10) 84%,
        transparent 100%);
}

.rombic-bento__category-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 64%;
    height: 100%;
    padding: 20px 0 20px 22px;
}

.rombic-bento__category-title {
    display: block;
    font-size: 20px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
}

.rombic-bento__category-subtitle {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--bento-muted);
}

.rombic-bento__category-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    color: var(--bento-orange-deep);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rombic-bento__category-link svg {
    transition: transform .25s ease;
}

.rombic-bento__category-img {
    position: absolute;
    right: -5px;
    bottom: -7px;
    z-index: 0;
    width: 53%;
    height: 92%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 12px 14px rgba(16, 24, 39, .13));
    transition: transform .38s var(--bento-ease);
}

.rombic-bento__category:hover .rombic-bento__category-img {
    transform: translateX(-4px) scale(1.05);
}

.rombic-bento__category:hover .rombic-bento__category-link svg {
    transform: translateX(3px);
}

/* ---------- 2 этаж: сервисы ---------- */
.rombic-bento__services {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--bento-gap);
    overflow: visible;
    border-radius: 0;
}

.rombic-bento__service {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 0;
    padding: 0 13px 0 15px;
    overflow: hidden;
    border-radius: var(--bento-radius-md);
    text-decoration: none;
    transition:
        transform .3s var(--bento-ease),
        box-shadow .3s var(--bento-ease),
        background .3s ease;
}

.rombic-bento__service--credit {
    background: linear-gradient(135deg, #1a2436 0%, #0d1421 100%);
    box-shadow: 0 7px 20px rgba(10, 17, 29, .15);
    color: #fff;
}

.rombic-bento__service--soon {
    border: 1px solid var(--bento-line);
    background: #fff;
    box-shadow: 0 4px 15px rgba(16, 24, 39, .05);
    color: var(--bento-ink);
}

.rombic-bento__service-icon {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.rombic-bento__service--credit .rombic-bento__service-icon {
    background: rgba(255, 255, 255, .10);
    color: #ffb15c;
}

.rombic-bento__service--soon .rombic-bento__service-icon {
    background: #fff3e6;
    color: var(--bento-orange-deep);
}

.rombic-bento__service-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rombic-bento__service-title {
    overflow: hidden;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rombic-bento__service-subtitle {
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.25;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rombic-bento__service-badge {
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: 999px;
    background: #fff0e0;
    color: #c2410c;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rombic-bento__service-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    opacity: .55;
    transition: transform .25s ease, opacity .25s ease;
}

.rombic-bento__service:hover .rombic-bento__service-arrow {
    opacity: 1;
    transform: translateX(3px);
}
/* ---------- Плавные hover-эффекты ---------- */
@media (hover: hover) {
    .rombic-bento-wrapper .rombic-bento__card:hover,
    .rombic-bento-wrapper .rombic-bento__service:hover {
        z-index: 3;
        transform: scale(1.03);
        box-shadow: 0 18px 42px rgba(16, 24, 39, .16);
    }

    .rombic-bento-wrapper .rombic-bento__card:hover {
        border-color: rgba(249, 115, 22, .18);
    }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1200px) {
    .rombic-bento-wrapper {
        padding: 0 20px;
    }

    .rombic-bento {
        grid-template-rows: 340px 180px;
    }

    .rombic-bento__hero-content {
        padding: 34px 36px;
    }

    .rombic-bento__hero-title {
        font-size: clamp(28px, 3.3vw, 42px);
    }

    .rombic-bento__cta-content {
        padding: 28px 26px;
    }

    .rombic-bento__cta-title {
        font-size: clamp(24px, 2.8vw, 32px);
    }

    .rombic-bento__category-text {
        width: 68%;
        padding-left: 18px;
    }

    .rombic-bento__category-title {
        font-size: 18px;
    }

    .rombic-bento__category-subtitle {
        display: none;
    }

    .rombic-bento__category-link {
        margin-top: 10px;
        font-size: 9px;
        letter-spacing: .045em;
    }

    .rombic-bento__service {
        padding: 0 12px;
    }

    .rombic-bento__service-subtitle {
        display: none;
    }
}

@media (max-width: 992px) {
    .rombic-bento {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: 320px minmax(220px, auto) 176px 88px;
    }

    .rombic-bento__cell--span-8,
    .rombic-bento__cell--span-4 {
        grid-column: span 6;
    }

    .rombic-bento__cell--span-3 {
        grid-column: span 2;
    }

    .rombic-bento__services {
        grid-column: span 6;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        gap: var(--bento-gap);
    }

    .rombic-bento__hero-content {
        padding: 28px 32px;
    }

    .rombic-bento__hero-title {
        max-width: 640px;
        font-size: clamp(26px, 4.4vw, 38px);
    }

    .rombic-bento__hero-text {
        max-width: 520px;
        font-size: 14px;
    }

    .rombic-bento__cta-content {
        padding: 23px 28px;
    }

    .rombic-bento__cta-title {
        max-width: none;
        font-size: 25px;
    }

    .rombic-bento__cta-text {
        font-size: 14px;
    }

    .rombic-bento__category-text {
        width: 62%;
        padding-left: 18px;
    }

    .rombic-bento__category-title {
        font-size: clamp(17px, 2.1vw, 18px);
    }

    .rombic-bento__category-img {
        right: -3px;
        width: 48%;
        height: 88%;
    }
}

@media (max-width: 720px) {
    .rombic-bento-wrapper {
        margin-top: 16px;
        padding: 0 16px;
    }

    .rombic-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-rows: auto;
        gap: 14px;
    }

    .rombic-bento__cell--span-8,
    .rombic-bento__cell--span-4,
    .rombic-bento__cell--span-3,
    .rombic-bento__services {
        grid-column: 1 / -1;
    }

    .rombic-bento__hero {
        min-height: 300px;
    }

    .rombic-bento__cta {
        min-height: 182px;
    }

    .rombic-bento__category {
        min-height: 142px;
    }

    .rombic-bento__hero-content {
        padding: 26px 24px;
    }

    .rombic-bento__hero-title {
        font-size: clamp(26px, 6.9vw, 34px);
    }

    .rombic-bento__hero-text {
        font-size: 14px;
    }

    .rombic-bento__cta-content {
        padding: 23px 24px;
    }

    .rombic-bento__cta-title {
        font-size: 28px;
    }

    .rombic-bento__cta-text {
        display: none;
    }

    .rombic-bento__category-text {
        width: 61%;
        padding: 18px 0 18px 18px;
    }

    .rombic-bento__category-link {
        font-size: 10px;
        letter-spacing: .07em;
    }

    .rombic-bento__category-subtitle {
        display: block;
    }

    .rombic-bento__category-img {
        width: 46%;
        height: 90%;
    }

    .rombic-bento__services {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, 76px);
        gap: 12px;
    }

    .rombic-bento__service-subtitle {
        display: block;
    }
}

@media (max-width: 480px) {
    .rombic-bento__hero {
        min-height: 326px;
    }

    .rombic-bento__hero-content {
        padding: 24px 20px;
    }

    .rombic-bento__hero-title {
        font-size: 27px;
    }

    .rombic-bento__hero-text {
        font-size: 13.5px;
    }

    .rombic-bento__cta {
        min-height: 172px;
    }

    .rombic-bento__cta-title {
        font-size: 25px;
    }

    .rombic-bento__category {
        min-height: 134px;
    }

    .rombic-bento__category-text {
        width: 65%;
        padding-left: 16px;
    }

    .rombic-bento__category-title {
        font-size: 17px;
    }

    .rombic-bento__category-subtitle {
        font-size: 11px;
    }

    .rombic-bento__service-subtitle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rombic-bento-wrapper .rombic-bento__card,
    .rombic-bento-wrapper .rombic-bento__service,
    .rombic-bento__hero-bg,
    .rombic-bento__cta-bg,
    .rombic-bento__category-img,
    .rombic-bento__category-link svg,
    .rombic-bento__service-arrow {
        transition: none !important;
    }

    .rombic-bento-wrapper .rombic-bento__card:hover,
    .rombic-bento-wrapper .rombic-bento__service:hover {
        transform: none;
    }
}

/* End */
/* /local/templates/main/rombic-blog/blog.css?179309394057187 */
/* /css/style.css?178643826248012 */
/* /css/grid.css?1786438262100623 */
/* /css/swiper-bundle.min.css?178669968014609 */
/* /css/jquery.fancybox.min.css?178669972612795 */
/* /css/custom.css?17867006878049 */
/* /local/templates/main/components/intec.regionality/regions.select/template1/style.css?17864382625229 */
/* /local/templates/main/styles.css?17932118741472 */
/* /local/templates/main/template_styles.css?179321187419686 */