#hero {
  padding-top: 0px;  /* вместо 80px */
  padding-bottom: 40px; /* можно оставить меньше, чем было */
}

#hero .hero-content {
  margin-top: 0;  /* убираем лишний отступ сверху */
}
@media (max-width: 768px) {
  #hero {
    padding-top: 0px !important;   /* уменьшили верхний отступ */
    padding-bottom: 30px !important;
  }

  #hero .hero-content {
    margin-top: 0 !important;       /* убрали лишние отступы сверху */
  }
}

@media (max-width: 768px) {
  #hero {
    padding-top: 0 !important;   /* убрать полностью отступ сверху */
    padding-bottom: 20px !important; /* можно уменьшить низ */
  }

  #header.sticky-top + #hero {
    margin-top: 0 !important;  /* убрать возможный margin от хедера */
  }
}
@media (max-width: 768px) {
  .hero.section {
    padding-top: 0 !important;   /* полностью убрали верхний отступ */
    padding-bottom: 20px !important;
  }
}
.hero.section {
  padding-top: 20px !important;  /* для ПК версии тоже меньше */
  padding-bottom: 40px !important;
}

@media (max-width: 768px) {
  #hero .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}




/* Общие стили для соц.иконок */
.header .logo i {
  font-size: 26px;           /* крупнее */
  margin-left: 12px;         /* отступ между иконками */
  padding: 8px;
  border-radius: 50%;        /* круглые */
  transition: all 0.3s ease;
  background: rgba(0,0,0,0.05);
}

/* WhatsApp */
.header .logo i.bi-whatsapp {
  color: #25d366;
}
.header .logo:hover i.bi-whatsapp {
  background: #25d366;
  color: #fff;
}

/* Telegram */
.header .logo i.bi-telegram {
  color: #0088cc;
}
.header .logo:hover i.bi-telegram {
  background: #0088cc;
  color: #fff;
}

/* Instagram */
.header .logo i.bi-instagram {
  color: #e1306c;
}
.header .logo:hover i.bi-instagram {
  background: #e1306c;
  color: #fff;
}



@media (max-width: 1199.98px) {

  #navmenu ul {
 
    height: 380px;

  }


}





.header .logo i {
  font-size: 20px;
  margin-left: 8px;
  padding: 6px;
}

.hero-title span {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 700; /* вместо 900 */
  letter-spacing: 0.5px;
}


.whatsapp-float {
  width: 45px;
  height: 45px;
  font-size: 24px;
}
.whatsapp-float {
  width: 45px;
  height: 45px;
  font-size: 24px;
}

/* Круглая play-кнопка — стабильная версия */
.play-round{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:#5c99ee; text-decoration:none;
  box-shadow:0 8px 24px rgba(13,110,253,.25);
}
.play-round i{ font-size:28px; color:#fff; line-height:1; }

/* Текст справа */
.play-label{ font-weight:500; color:#333; }

/* Чуть меньше на мобильных */
@media (max-width: 768px){
  .play-round{ width:52px; height:52px; }
  .play-round i{ font-size:24px; }
  .play-label{ font-size:14px; }
}


/* Увеличили высоту видео в слайдах и задали обтравку */
.video-swiper { padding: 8px 0; }
.video-swiper .swiper-slide {
  display: flex; align-items: center; justify-content: center;
}
.video-swiper .video-card {
  height: 320px;          /* ПК — больше */
  width: 100%;
  max-width: 560px;       /* ограничитель ширины */
  object-fit: cover;      /* можно поставить contain, если важны края */
  border-radius: 12px;
}

/* Планшет/мобилка — тоже крупнее, но компактнее чем на ПК */
@media (max-width: 992px){
  .video-swiper .video-card { height: 260px; max-width: 480px; }
}
@media (max-width: 576px){
  .video-swiper .video-card { height: 220px; max-width: 100%; }
}


/* Управляем количеством карточек через CSS-переменную */
.video-swiper {
  --gap: 16px;     /* отступ между карточками */
  --slides: 2.5;   /* мобайл: 2.5 карточки сразу */
  padding: 8px 0;
}
.video-swiper .swiper-wrapper { margin-right: calc(var(--gap) * -1); }
.video-swiper .swiper-slide {
  /* ширина одной карточки рассчитывается сразу по CSS, без ожиданий Swiper */
  width: calc( (100% - (var(--gap) * (var(--slides) - 1)) ) / var(--slides) );
  margin-right: var(--gap);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-swiper .video-card {
  width: 100%;
  height: 260px;        /* подберите под свой дизайн */
  object-fit: cover;
  border-radius: 12px;
}

/* ПК: 4 карточки */
@media (min-width: 992px){
  .video-swiper { --slides: 4; --gap: 18px; }
  .video-swiper .video-card { height: 320px; }
}
/* Мелкие экраны, если нужно компактнее */
@media (max-width: 576px){
  .video-swiper .video-card { height: 220px; }
}




    .services .service-card {
       aspect-ratio: 9 / 16;     /* сохраняем пропорцию 9:16 */
      }


#services .feature-video {
    width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;     /* сохраняем пропорцию 9:16 */
  object-fit: cover;        /* заполняем контейнер */
  display: block;
  pointer-events: none;     /* делаем некликабельными */
}

/* Видео в секции Функционал */
#services .feature-video-wrap {
  border-radius: 12px;      /* скруглённые углы */
  overflow: hidden;         /* обрезаем края за пределами */
    width: 100%;         /* займёт всю ширину карточки */
  height: 100%;        /* займёт всю доступную высоту */
  max-width: none;     /* убираем ограничение 360px */       /* ограничим ширину (напр. как в карусели) */
  max-height: none;  
  margin: 0 auto;           /* центрируем */
}

.header .logo .lang-short {
  font-size: 16px;
  color: #0d6efd;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.header .logo:hover .lang-short {
  background: #0d6efd;
  color: #fff;
}
#featured-services .service-item .icon {
  display: flex;
  justify-content: center;   /* по центру по горизонтали */
  align-items: center;       /* по центру по вертикали */
  margin: 0 auto 15px auto;  /* центрируем и добавляем отступ снизу */
  font-size: 40px;           /* можно увеличить размер */
  color: #0d6efd;            /* при желании задать фирменный цвет */
}

  :target { scroll-margin-top: 80px; }
  @media (max-width: 992px){
    :target { scroll-margin-top: 70px; }
  }


@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.social-float {
  animation: floatUpDown 3s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

/* плавное появление после загрузки */
.social-float.hidden {
  opacity: 0;
  pointer-events: none;
}


/* Валюта в хедере как обычный текст, а не иконка шрифта */
#currencyIcon{
  font-family: inherit !important;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.05);
  color: #0d6efd;
  transition: all .2s ease;
}
.header .logo:hover #currencyIcon{
  background: #0d6efd;
  color: #fff;
}


#currencyIcon{
  font-family: inherit !important;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.05);
  color: #0d6efd;
  transition: all .2s ease;
}
.header .logo:hover #currencyIcon{
  background: #0d6efd;
  color: #fff;
}

.more-btn .chev { display:inline-block; transition:transform .2s ease; }
.more-btn .chev.rotated { transform: rotate(180deg); }

#featured-services .service-item .icon {
  display: flex;
  justify-content: center;   /* по центру по горизонтали */
  align-items: center;       /* по центру по вертикали */
  margin: 0 auto 15px auto;  /* центрируем и добавляем отступ снизу */
  font-size: 40px;           /* можно увеличить размер */
  color: #0d6efd;            /* при желании задать фирменный цвет */
}

  /* Панели шагов с плавным открытием/закрытием */
  .step-panel{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
  }
  .step-panel.is-open{
    max-height: 5000px; /* с запасом под контент */
    opacity: 1;
    transform: translateY(0);
  }
  .step-panel.is-closed{
    max-height: 0;
    opacity: 0;
    transform: translateY(8px);
  }
  .was-validated .form-check-input:invalid ~ .form-check-label {
  color: #dc3545;
}
.md-2{
  margin-left: 20px;
}


  .step-panel.is-open  { display: block; }
  .step-panel.is-closed{ display: none; }

#currencyIcon {
  font-family: inherit !important;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.05);
  color: #0d6efd;
  transition: all .2s ease;
}
.header .logo:hover #currencyIcon {
  background: #0d6efd;
  color: #fff;
}

.btn-reverse {
  background-color: #5c99ee;     /* заливка как у btn-primary */
  border: 1px solid #5c99ee;     /* рамка как у outline */
  color: #fff;                   /* белый текст */
  font-weight: 500;              /* как у бутстрапа */
  border-radius: 0.375rem;       /* как у Bootstrap кнопок */
  padding: 18px 40px;     /* стандартные отступы */
  transition: all 0.3s ease;
}

.btn-reverse:hover {
  background-color: transparent; /* становимся прозрачной */
  color: #0d6efd;                /* текст синий */
  border: 1px solid #0d6efd;     /* рамка остаётся синей */
}

#hero.hero.section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* По умолчанию: голубая */
#moreDescBtn {
  background-color: #0d6efd;   /* фирменный Bootstrap синий */
  color: #fff;
  border: 1px solid #0d6efd;
  transition: all 0.3s ease;
}

/* Когда описание открыто (aria-expanded="true") → прозрачная */
#moreDescBtn[aria-expanded="true"] {
  background-color: transparent;
  color: #0d6efd;
  border: 1px solid #0d6efd;
}

.btn-success {

  bs-btn-bg: #1774fc;
}



/* Mobile-only Apple x Bootstrap pills for nav menu */
@media (max-width: 991.98px) {
  /* Контейнер меню: светлая карточка с блюром */
  #navmenu {
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  }

  /* Вертикальный список, центрируем элементы */
  #navmenu ul {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;           /* кнопки на всю ширину контейнера */
    gap: 10px;
    padding-left: 0 !important;
    margin: 0;
  }

  #navmenu ul li {
    list-style: none;
    margin: 0;
  }

  /* Кнопки-пилюли */
  #navmenu ul li > a {
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-weight: 600;
    border-radius: 16px;            /* скругление */
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.95);
    color: #0d0d0f;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: all .15s ease;
  }

  /* Hover/active — как у Bootstrap primary */
  #navmenu ul li > a:hover,
  #navmenu ul li > a.active {
    background: #0d6efd;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(13,110,253,0.25);
  }

  /* Тактильная микро-анимация при нажатии */
  #navmenu ul li > a:active {
    transform: translateY(1px) scale(0.99);
  }

  /* Чтобы иконка-бургер не перекрывалась */
  .mobile-nav-toggle {
    z-index: 20001;
  }
}


/* --- FIX: убираем правую линию у скрытого меню --- */
@media (max-width: 991.98px) {
  /* Состояние по умолчанию (меню закрыто) */
  #navmenu {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;                 /* не даём «пилюлям» выглядывать */
  }

  /* Стили применяем ТОЛЬКО когда меню открыто */
  body.mobile-nav-active #navmenu {
    background: rgba(255,255,255,0.85) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
  }

  /* Вертикальный список — только в открытом состоянии */
  body.mobile-nav-active #navmenu ul {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-left: 0 !important;
    margin: 0;
  }

  body.mobile-nav-active #navmenu ul li { list-style: none; margin: 0; }

  body.mobile-nav-active #navmenu ul li > a {
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-weight: 600;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.95);
    color: #0d0d0f;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: all .15s ease;
  }

  body.mobile-nav-active #navmenu ul li > a:hover,
  body.mobile-nav-active #navmenu ul li > a.active {
    background: #0d6efd;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(13,110,253,0.25);
  }

  body.mobile-nav-active #navmenu ul li > a:active {
    transform: translateY(1px) scale(0.99);
  }
}

/* --- Мобильная версия: уменьшаем фото взрослого экзороллера --- */
@media (max-width: 767.98px) {
  img[alt="adult_img"] {
    max-width: 70% !important;   /* уменьшает ширину до 70% контейнера */
    height: auto !important;     /* сохраняет пропорции */
    margin: 0 auto;              /* центрирует */
    display: block;
  }
}

/* Дизайн окна валюты как меню */
#currencyModal .modal-content {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Кнопки валюты как "пилюли" */
#currencyModal .modal-body button {
  display: block;
  text-align: center;
  padding: 12px 16px;
  font-weight: 600;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.95);
  color: #0d0d0f;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all .15s ease;
}

/* Hover/active */
#currencyModal .modal-body button:hover,
#currencyModal .modal-body button:focus {
  background: #0d6efd;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(13,110,253,0.25);
}

/* Небольшая анимация при клике */
#currencyModal .modal-body button:active {
  transform: translateY(1px) scale(0.99);
}

.product-img {
  height: 200px;          /* фиксированная высота */
  width: 100%;            /* на всю ширину блока */
  object-fit: contain;    /* сохраняет пропорции, не обрезает */
}

@media (max-width: 768px) {
  .section {
    padding-top: 0 !important;
    padding-bottom: 30px !important;
  }
}

.color-radio .color-box {
  display:inline-block;
  width:18px;
  height:18px;
  border:1px solid #ccc;
  border-radius:4px;
  margin-right:6px;
  vertical-align:middle;
}

/* Только для экранов до 768px (Bootstrap breakpoint для mobile/tablet) */
@media (max-width: 768px) {
  .hero-image img {
    margin-top: -40px; /* подними вверх, настрой значение под себя */
  }
}
.card-body{
  margin-top:20px;
}

.price-display{
  margin-bottom: 10px;
}

.color-radio .form-check-label {
  display: flex;
  align-items: center;
  gap: 8px; /* расстояние между квадратиком и текстом */
}

.color-radio .color-box {
  display: inline-block;
  width: 20px;   /* одинаковый размер */
  height: 20px;
  border-radius: 4px; /* скруглённые углы */
  border: 1px solid #ccc;
}