.dot-btn_border {
  border-style: solid;
  border-width: 1px;
}

.big-accordion_item {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.big-accordion_content {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Пример cubic-bezier */
}

.big-accordion_item.active {
  width: 100%;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1),
    height 1s cubic-bezier(0.4, 0, 0.2, 1);
}
s .big-accordion_item.active .big-accordion_content {
  transition: max-height 1s cubic-bezier(0.4, 0, 0.2, 1); /* Пример cubic-bezier */
  /* width: 100%;
  height: auto; */
}

/* Стили для контейнера изображения в шапке */
.big-accordion_img-cont {
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Такая же как у контента */
}

/* Чтобы изображение внутри контейнера вело себя адекватно */
.big-accordion_img-cont img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Убедитесь, что у картинки нет своих стилей, мешающих видимости */
  opacity: 1; /* По умолчанию видимо */
  transition: opacity 0.3s ease-in-out; /* Плавное появление, если нужно */
}

/* Активное состояние (когда .big-accordion_item ИМЕЕТ класс .active) */
.big-accordion_item.active .big-accordion_img-cont {
  height: 220px; /* ОБЯЗАТЕЛЬНО: Целевая высота контейнера из вашего HTML */
  /* Если высота картинки должна быть автоматической, можно попробовать: */
  /* height: auto; */
  /* Но часто лучше задать фиксированную высоту для контейнера */
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1); /* Такая же как у контента */
}

.slider-btn.swiper-button-disabled {
  cursor: not-allowed;
  background-color: #f0f0f0;
  opacity: 20%;
}

.slider-btn_dark.swiper-button-disabled {
  cursor: not-allowed;
  background-color: transparent;
  opacity: 80%;
  border: 1px solid #707072;
}

.is-swiper-categories .swiper-slide {
  /* --- ВАЖНО --- */
  width: auto; /* Позволяет слайду принять ширину контента или другую заданную ширину */

  /* --- ВЫБЕРИТЕ ОДИН ИЗ ВАРИАНТОВ ЗАДАНИЯ ШИРИНЫ НИЖЕ --- */

  /* Вариант А: Фиксированная ширина (самый простой) */
  /* width: 280px; */ /* Укажите желаемую ширину карточки */

  /* Вариант Б: Адаптивная ширина (например, через % или flex-basis) */
  /* flex-shrink: 0; */ /* Не сжиматься */
  /* width: 85%; */ /* Например, для мобильных - почти весь экран */
  /* @media (min-width: 768px) { */
  /* width: 300px; */ /* Фиксированная на планшете/десктопе */
  /* ИЛИ */
  /* width: calc(33.333% - 16px); */ /* Примерно 3 колонки с учетом spaceBetween (24 * 2/3) */
  /* } */
  /* @media (min-width: 1240px) { */
  /* width: calc(25% - 18px); */ /* Примерно 4 колонки с учетом spaceBetween (24 * 3/4) */
  /* } */

  /* --- Убедитесь, что у слайдов есть контент или минимальная высота --- */
  /* min-height: 150px; Пример */
  /* background-color: #eee; */ /* Для отладки */
}

.swiper-slide {
  width: auto;
}
/* #section-how-work,
.product-categories,
.section-decisions {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 0;
} */

[text-split] {
  opacity: 0;
}
html.w-editor [text-split] {
  opacity: 1;
}

.word {
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.1em;
  transform-origin: bottom;
}

/* form styles */
/* Убираем position:sticky из селектора по умолчанию */
#section-how-work,
.product-categories,
.section-decisions,
.section-deadlines {
  /* Оставьте другие ваши стили секций */
  position: relative; /* Или static - главное не sticky по умолчанию */
  z-index: 0; /* Базовый z-index */
  /* Опционально: намек браузеру на будущие изменения */
  will-change: top;
}

/* Класс, который будет добавляться GSAP */
.is-sticky-active {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1; /* Стики-секции НАД обычными блоками при прокрутке */
  /* 'top' будет установлен инлайново через GSAP */
}

.video-play-button {
  /* background: #fa183d; */
  border-radius: 4px;
  user-select: none;
  transition: opacity 300ms ease;
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 4px;
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 4px;
  transition: all 200ms;
}

.video-play-button:hover {
  /* background-color: #f0f0f0; */
  opacity: 0.9;
}

.video-play-button:active {
  opacity: 0.8;
}

.video-play-button:before {
  content: "";
  color: white;
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 4px;
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}

.video-play-button span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 32px solid #fff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

.section-kuula,
.frame-179150646216 .text-50,
.info-block .info-block__wrapper,
.frame-1215940910 .text-34,
.showroom-card__info .showroom-address,
.frame-179150646227 .text-56,
.team-wrapper .swiper-slide:nth-child(2) {
  display: none;
}