/* Start:/local/templates/bike_site/css/main_vertical_style.css?174787009717508*/
header {
  position: fixed;
  top: 0;
}

.site-main {
  /* overflow-x: hidden; */
}

#main-section {
  width: 200vw;
}

.horizontal__item-bcolor {
  position: relative;
  /* Контекст позиционирования для фона */
  background-color: #f5f5f5;
  /* Белый фон ВОКРУГ текста */
  /* overflow: hidden; */
  /* Чтобы фон не вылезал за пределы */
  /* Убедитесь, что у блока есть размеры или контент, чтобы он был виден */
  min-height: 100vh;
  /* Пример высоты, настройте под себя */
}

.background-video {
  position: absolute;
  /* top: -5vh;
  left: 0;
  width: 100%; */

  top: 0vh;
  left: 8vw;
  width: 82%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  /* Фон должен быть ПОД белым слоем и текстом */
}

.background-video img,
.background-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Масштабирует изображение/видео для заполнения контейнера */
  display: block;
  /* transform: rotate(-7deg); */
}

.super-heavy-h1.mask-text {
  position: relative;
  /* Чтобы z-index сработал */
  z-index: 2;
  /* Текст НАД фоновым видео, но под "эффектом" */
  /* font-size: 18rem; */
  font-size: clamp(3rem, 15vw, 25rem);
  font-family: Lozung, sans-serif;
  /* Добавьте запасной шрифт */
  font-weight: 900;
  /* Убедитесь, что шрифт достаточно "жирный" */
  line-height: 1;
  /* Может понадобиться для плотного текста */
  text-align: start;
  /* Пример выравнивания */
  height: 100vh;
  padding-left: 10vw;
  /* padding-top: calc(10vh + 6vw); */
  padding-top: clamp(100px, 30vmax, 230px);
  /* --- Магия начинается здесь --- */
  color: black;
  /* Цвет текста ДО смешивания */
  background-color: white;
  /* Фон ПОД текстом, который будет смешиваться */
  mix-blend-mode: screen;
  /* Смешивает черный текст на белом фоне, делая текст прозрачным */
}

/* Стили для первой буквы остаются */
.super-heavy-h1.mask-text::first-letter {
  /* font-size: 40rem; */
  font-size: clamp(8rem, 30vw, 50rem);
}

/* Вспомогательный стиль для остального текста */
.super-heavy-h1.mask-text span {
  position: relative;
  top: -7rem;
  /* Смещаем остальной текст вверх (отрицательное значение) */
}

.main-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.main-inscriptions {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
}

.top-inscription {
  position: absolute;
  /* font-size: 1.2rem; */
  left: 44vw;
  top: clamp(100px, 14vmax, 350px);
  z-index: 2;
}

.bottom-inscription {
  position: absolute;
  font-size: 1.2rem;
  left: 41vw;
  /* top: 60vh; */
  /* top: calc(51vh + 5vw); */
  top: clamp(100px, 33vmax, 575px);
  z-index: 2;
  display: flex;
  gap: 5rem;
}

@media (min-width: 2000px) {
  .bottom-inscription {
    top: clamp(100px, 33vmax, 630px);
  }
}

.bottom-inscription > div p {
  margin-bottom: 0;
}

.left-inscription {
  position: absolute;
  /* font-size: 1.2rem; */
  right: 0;
  top: 24vh;
  z-index: 2;
  transform: rotate(-90deg);
}

/* Стили для блока, содержащего картинку и текст */
.first-box,
.second-box,
.third-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Стили для спана с картинкой */
.bottom-inscription .icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-image: url("/local/templates/bike_site/css/../images/icons/toggle-button.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.bottom-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15vh;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}

.bottom-content::before {
  content: "";
  position: absolute;
  left: 20%;
  /* background-color: rgb(112, 112, 112); */
  background-color: #010101;
  width: 74%;
  height: 100%;
  z-index: -1;
}

.first-screen {
  padding: 0 1rem;
  padding-left: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
}

.first-block {
  margin-left: 1rem;
}

.second-block {
  height: 100%;
}

.second-block .brands {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1rem;
}

.second-block .brands .brand {
  z-index: 2;
  background-color: #E31E25;
  height: 7vh;
  width: 10vw;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.5s, width 0.5s, height 0.5s;
}

.second-block .brands .brand:hover {
  /* background-color:red; */
  height: 9vh;
  width: 10.5vw;
}

.second-block .brands .brand:first-child img {
  width: 70%;
}

.brand img {
  width: 100%;
  height: 100%;
  filter: invert(1);
  object-fit: contain !important;
}

.third-block {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: 2rem;
  cursor: pointer;
}

.third-block p {
  color: white;
}

.third-block .round-icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-image: url("/local/templates/bike_site/css/../images/icons/arrow-round.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: slideX 2s ease-in-out infinite;
}

@keyframes slideX {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(10px);
    /* смещение вправо на 10px, можно менять */
  }

  100% {
    transform: translateX(0);
  }
}

.second-screen {
  z-index: 2;
  width: 100vw;
}

.second-screen .mini-content {
  position: absolute;
  right: 0;
  top: -10rem;
  right: 0;
  background-color: white;
  border: 2px solid #E31E25;
  border-radius: 10px;
  height: 15rem;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
}

.second-screen .mini-content p {
  margin-bottom: 10px;
  text-align: left;
}

/* --- Информация о каталоге --- */

.catalog-info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 5rem 12rem 0rem 1rem;
  background-color: white;
}

.catalog-info-left-section {
  width: 100%;
  padding-left: 3vw;
}

.up-text-box {
  display: flex;
}

.up-text-box > h1 {
  margin-top: 3rem;
  font-size: 32px;
}

/* Контейнер, обеспечивающий БЕЛЫЙ ФОН ВОКРУГ текста */
.up-text-box-bcolor {
  position: relative;
  /* Может понадобиться для позиционирования "БОЛЕЕ", если оно абсолютное */
  /* background-color: rgba(62, 168, 145, 0.192);  */
  overflow: hidden;
  /* Можно использовать flex/grid для позиционирования текста внутри, если нужно */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

/* Текст, который будет маской */
.super-heavy-h1-catalog.clip-text {
  /* Стили шрифта и позиционирования текста */
  /* font-size: 18rem; */
  font-size: clamp(3rem, 15vw, 25rem);
  font-family: Lozung, sans-serif;
  text-align: start;
  /* Важно! У текста должны быть размеры, чтобы фон был виден */
  /* display: inline-block; */
  /* Раскомментируй, если текст не занимает место */

  /* --- Магия background-clip --- */
  background-image: url(/local/templates/bike_site/css/../images/catalog/catalog-image3.webp);
  /* Устанавливаем изображение как фон ТЕКСТА */
  background-size: cover;
  /* Масштабируем фон */
  /* background-position: center center; */
  background-size: 200% 200%; /* Увеличиваем ширину фона в 2 раза */
  background-position: center center; /* Начальная позиция */
  /* Центрируем фон */
  /* background-attachment: fixed; */
  /* Опционально: фон зафиксирован относительно viewport */

  -webkit-background-clip: text;
  /* Для поддержки Safari/Chrome */
  background-clip: text;
  /* Обрезаем фон по форме текста */

  color: transparent;
  /* <--- Делаем сам цвет букв прозрачным */
  /* --- Конец магии --- */
}

.down-text-box {
  display: flex;
  gap: 8rem;
}

.down-text-box > h1 {
  opacity: 0;
}

.down-text-box .text-box-wrapper {
  margin-left: 8rem;
}

.down-text-box .text-box-wrapper > p {
  margin-bottom: 1rem;
}

.catalog-info-right-section {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.up-box-wrapper .up-box {
  background: url("/local/templates/bike_site/css/../images/catalog/catalog-image1.png") no-repeat center;
}

.down-box-wrapper .down-box {
  background: url("/local/templates/bike_site/css/../images/catalog/catalog-image2.png") no-repeat center;
}

.catalog-info .image-box {
  background-size: 100%;
  /* задаём числовое значение */
  width: 20rem;
  height: 20rem;
  color: white;
  font-size: 1.4rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2rem;
  transition: all 0.5s ease-in-out;
}

.catalog-info .image-box:hover {
  background-size: 120%;
}

/* --- секция контакта --- */

#contacts-section {
  width: 150vw;
}

/* Контейнер, который растягивает блок на всю ширину и ставит элементы рядом */
#contacts-section .contacts-wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100vw;
  /* на случай, если нужно адаптивное поведение */
  justify-content: space-between;
  /* разделяем элементы по горизонтали */
  padding: 1rem;
  padding-top: 16vh;
  padding-bottom: 2vh;
}

/* Левая часть с картинкой */
#contacts-section .contacts-image-box {
  flex: 1 1 50%;
  /* можно настроить по вкусу */
  max-width: 40%;
  /* ограничиваем ширину картинки, если нужно */
  margin-right: 20px;
  /* отступ справа для красоты */
  overflow: hidden;
  height: 100%;
  cursor: pointer;
}

#contacts-section .contacts-image-box img {
  /* width: clamp(60%, 70%, 100%); */
  width: auto;
  max-width: auto !important;
  /* Минимум 60%, динамический 80%, максимум 100% */
  height: 100% !important;
  display: block;
  object-fit: cover;
}

/* Правая часть с контактной информацией */
#contacts-section .contacts-info-box {
  padding: 1vh;
  padding-top: 10vh;
  flex: 1 1 40%;
  max-width: 60%;
  /* чтобы текст не сжимался слишком сильно на узких экранах */
}

#contacts-section .contacts-info-box h2 {
  /* font-size: clamp(1.5rem, 1.8vw, 7rem); */
  /* Минимум 1.5rem, адаптивный размер 2.5vw, максимум 2.5rem */
  margin-bottom: 1rem;
}

#contacts-section .contacts-info-box p {
  /* font-size: clamp(0.9rem, 1vw, 6rem); */
  /* Минимум 0.9rem, адаптивный размер 1.8vw, максимум 1.2rem */
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Стили для иконок */
.social-icons {
  display: inline-flex;
  gap: 10px;
  margin-top: 5px;
}

.icon-contact {
  font-size: 2.5em;
  transition: transform 0.3s ease, color 0.3s ease;
  display: inline-block;
}

/* Анимация при наведении */
.icon-contact:hover {
  transform: scale(1.2);
}

/* Цвета для каждой соцсети */
.icon-whatsapp {
  color: #25d366;
}

.icon-telegram {
  color: #0088cc;
}

/* Дополнительная анимация: плавное пульсирование */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.icon-contact:hover {
  animation: pulse 0.6s infinite;
}

.contacts-hidden-footer {
  width: 100%;
  height: 70px;
  background-color: transparent;
}

/* --- Горизонтальная секция --- */
.horizontal-pin-wrapper {
  position: relative;
  /* Необходимо для правильной работы pinSpacer */
  z-index: 9;
  /* !!! Ставим ВЫШЕ следующей секции */
  width: 100%;
  overflow: hidden;
  /* !!! Обязательно, чтобы обрезать контент */
}

.horizontal-section {
  width: 100%;
  box-sizing: border-box;
}

.horizontal__content {
  display: flex;
  width: max-content;
  /* Ширина по содержимому */
  /* Отступы по краям */
  box-sizing: border-box;
  position: relative;
  /* Для контекста дочерних элементов */
  /* background: #444; */
  /* Фон для отладки контента */
}

.horizontal__item {
  /* padding: 200px 150px; */
  position: relative;
  height: 100vh;
  width: 100vw;
  flex-shrink: 0;
  /* display: flex;
    justify-content: center;
    align-items: center; */
}

/* .horizontal__num {
  font-size: 80px;
} */

/* .horizontal__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
} */

.parallax {
  /* position: absolute;
    width: 50%;
    height: 50%; */
  z-index: 2;
  /* border: 1px solid rgba(255, 0, 0, 0.5); */
  overflow: hidden;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */
  transform: translateZ(0);
  /* Для лучшей производительности */
  /* top: 25%; */
  /* Центрируем по вертикали */
  /* left: 25%; */
  /* Центрируем по горизонтали */
}

.parallax img {
  width: 110%;
  /* Немного больше контейнера */
  height: 110%;
  object-fit: cover;
  /* transform: scale(1.1); */
  /* Начальное увеличение */
  transition: transform 0.3s ease;
  /* Плавное изменение при hover */
}

/* Опционально, добавляем hover эффект */
.horizontal__item:hover .parallax {
  border-color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Точки останова (Breakpoints) - Используем min-width (Mobile First)
   ========================================================================== */

/* --- Small devices (Ландшафтные телефоны, маленькие планшеты) --- */
/* Начинаем изменять стили для экранов ШИРЕ ИЛИ РАВНО 576px */
@media (min-width: 576px) {
}

/* --- Medium devices (Планшеты) --- */
/* Начинаем изменять стили для экранов ШИРЕ ИЛИ РАВНО 768px */
@media (min-width: 768px) {
}

/* --- Large devices (Ноутбуки, десктопы) --- */
/* Начинаем изменять стили для экранов ШИРЕ ИЛИ РАВНО 992px */
@media (min-width: 992px) {
}

/* --- Extra large devices (Большие десктопы) --- */
/* Начинаем изменять стили для экранов ШИРЕ ИЛИ РАВНО 1200px */
@media (min-width: 1200px) {
}

/* --- XX large devices (Очень большие десктопы) --- */
/* Начинаем изменять стили для экранов ШИРЕ ИЛИ РАВНО 1400px */
@media (min-width: 1400px) {
  .super-heavy-h1.mask-text {
    /* padding-top: calc(130vh + 20vw); */
  }
}

@media (min-width: 2278px) {
  .super-heavy-h1.mask-text {
    /* padding-top: calc(10vh + 4vw); */
  }
}

/* Стили для вертикального спейсера */
.vertical-spacer {
  height: 200vh; /* Создаем дополнительное пространство для прокрутки */
  background-color: #333;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.preloader_wall {
  /* display: none; */
  background-color: #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 1000;
  font-size: 4rem;
  font-family: 'MicraBold', Micra;
}

.preloader_wall.hide {
  opacity: 0;
  visibility: hidden;
}
/* End */
/* /local/templates/bike_site/css/main_vertical_style.css?174787009717508 */