/* Эффект при наведении на кнопку записи */
.banner-second .cta-block,
.banner-first .cta-block {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.banner-second .cta-block:hover,
.banner-first .cta-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  background-color: #2c2c2c !important; /* Чуть светлее чёрного при наведении */
}

/* Убираем стандартное выделение текста при клике на мобильных */
.banner-second .cta-block:active,
.banner-first .cta-block:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.banner-circle {
    max-width: 800px;
    margin: -20px auto 0;
}

.banner-circle-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
/* CTA-блок — плавно уменьшается */
.banner-second .bg-dark.rounded-5 {
  padding: clamp(0.5rem, 1.5vw, 1rem);
}

.banner-second .bg-dark .bg-warning {
  width: fit-content;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-second .bg-dark .fa-rocket {
  font-size: clamp(1.75rem, 3vw, 3.5rem) !important;
  padding: clamp(0.75rem, 1.5vw, 1.25rem) !important;
  transform: translate(-5px, 5px);
}

/* На планшетах */
@media (max-width: 1199.98px) {
  .banner-second .bg-dark .fa-rocket {
    font-size: 2rem !important;
    padding: 0.75rem !important;
  }
}

/* На мобильных */
@media (max-width: 767.98px) {
  .banner-second .bg-dark .fa-rocket {
    font-size: 1.5rem !important;
    padding: 0.6rem !important;
  }
}

/* На очень узких */
@media (max-width: 575.98px) {
  .banner-second .bg-dark .fa-rocket {
    font-size: 1.25rem !important;
    padding: 0.5rem !important;
  }
}

.banner-second .bg-dark .fs-4 {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

.banner-second .bg-dark .fs-5 {
  font-size: clamp(0.75rem, 1.4vw, 1.25rem);
}

.banner-second .bg-dark .me-4 {
  margin-right: clamp(0.4rem, 1vw, 1rem) !important;
}

.banner-second .bg-dark .me-5 {
  margin-right: clamp(0.5rem, 1.5vw, 1.5rem) !important;
}

.banner-second .bg-dark .ms-3 {
  margin-left: clamp(0.4rem, 1vw, 0.75rem) !important;
}

/* QR-код масштабируется вместе с блоком */
.banner-second .bg-white.shadow.rounded-5 {
  padding: clamp(0.4rem, 1vw, 0.75rem);
}

.banner-second .bg-white img {
  max-width: clamp(70px, 8vw, 120px);
}

/* Блоки с иконками "Изучение..." и "Инвестиция..." */
.banner-second .d-flex.flex-row.align-items-center {
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

/* Иконки в рамках */
.banner-second .text-primary.border,
.banner-second .text-warning.border {
  padding: clamp(0.4rem, 1vw, 0.75rem) !important;
  border-width: clamp(2px, 0.4vw, 4px) !important;
}

.banner-second .text-primary.border i,
.banner-second .text-warning.border i {
  font-size: clamp(1.25rem, 2.5vw, 2.25rem) !important;
}

/* Текст рядом с иконками */
.banner-second .d-flex.flex-row.align-items-center .fs-5 {
  font-size: clamp(0.8rem, 1.6vw, 1.25rem);
  line-height: 1.3;
}

/* Отступ между иконкой и текстом */
.banner-second .d-flex.flex-row.align-items-center .ms-4 {
  margin-left: clamp(0.5rem, 1.5vw, 1.5rem) !important;
}

/* Вертикальные отступы между блоками */
.banner-second .d-flex.flex-row.align-items-center.mt-3 {
  margin-top: clamp(0.5rem, 1.5vw, 1rem) !important;
}

/* На планшетах — дополнительное уменьшение */
@media (max-width: 1199.98px) {
  .banner-second .bg-dark.rounded-5 {
    padding: 0.6rem;
  }

  .banner-second .bg-dark .bg-warning {
    width: 55px;
    height: 55px;
  }

  .banner-second .bg-dark .fa-rocket {
    font-size: 2rem !important;
    padding: 0.5rem !important;
  }

  .banner-second .bg-dark .fs-4 {
    font-size: 1.1rem;
  }

  .banner-second .bg-dark .fs-5 {
    font-size: 0.85rem;
  }

  .banner-second .bg-white img {
    max-width: 90px;
  }

  .banner-second .text-primary.border i,
  .banner-second .text-warning.border i {
    font-size: 1.5rem !important;
  }

  .banner-second .d-flex.flex-row.align-items-center .fs-5 {
    font-size: 0.9rem;
  }
}

/* На мобильных — сильное уменьшение */
@media (max-width: 767.98px) {
  .banner-second .bg-dark .bg-warning {
    width: 45px;
    height: 45px;
  }

  .banner-second .bg-dark .fa-rocket {
    font-size: 1.5rem !important;
    padding: 0.4rem !important;
  }

  .banner-second .bg-dark .fs-4 {
    font-size: 0.95rem;
  }

  .banner-second .bg-dark .fs-5 {
    font-size: 0.75rem;
  }

  .banner-second .bg-white img {
    max-width: 75px;
  }

  .banner-second .text-primary.border,
  .banner-second .text-warning.border {
    padding: 0.4rem !important;
  }

  .banner-second .text-primary.border i,
  .banner-second .text-warning.border i {
    font-size: 1.25rem !important;
  }

  .banner-second .d-flex.flex-row.align-items-center .fs-5 {
    font-size: 0.8rem;
  }
}

/* На очень узких — весь блок масштабируется */
@media (max-width: 575.98px) {
  .banner-second .d-flex.flex-row.align-items-center.mt-4 {
    transform: scale(0.85);
    transform-origin: left center;
  }
}

/* =========================================
   НАСТРОЙКА БАННЕРОВ И ТОЧЕК ПЕРЕЛОМА
   ========================================= */

/* Стили для второго баннера (Мобильный) - работает по умолчанию */
.banner-not-xl {
  display: block;
  background-image:
    url(/img/index/banner/circle1.svg),
    url(/img/index/banner/circle1.svg);
  background-repeat: no-repeat, no-repeat;
  background-position:
    left -250px bottom -220px,
    right -270px top -200px;
  background-size: 400px;
}

/* Стили для первого баннера (Компьютерный) */
.banner-xl-only {
  display: none;
  position: relative;
  z-index: 1; /* Создаем изолированный контекст наложения */
}

/* Псевдоэлемент вынесен отдельно для управления прозрачностью фона */
.banner-xl-only::before {
  content: "";
  position: absolute;
  inset: 0; /* Эквивалент top:0; left:0; right:0; bottom:0; */
  background-image:
    url(/img/index/banner/boy2.png),
    url(/img/index/banner/circle1.svg),
    url(/img/index/banner/circle2.svg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:

    right -50px bottom 0px,
    left -240px bottom -240px,
    right -600px top -50px;
  background-size: 800px, 600px, 1700px;
  z-index: 0; /* Фон будет под текстом */
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Контент должен гарантированно быть поверх фона */
.banner-xl-only > * {
  position: relative;
  z-index: 1;
}

/* ОТ 1200px: Включаем компьютерный баннер, скрываем мобильный */
@media (min-width: 1200px) {
  .banner-xl-only {
    display: block !important;
  }
  .banner-not-xl {
    display: none !important;
  }
}

/* ОТ 1200px ДО 1599.98px: Компьютерный баннер виден, но фон слегка прозрачен */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .banner-xl-only::before {
    opacity: 0.35; /* Регулируйте от 0.2 до 0.5 для нужного эффекта */
  }
}

/* ОТ 1600px: Компьютерный баннер с полным фоном */
@media (min-width: 1600px) {
  .banner-xl-only::before {
    opacity: 1;
  }
}