/* style.css */
/* Общие стили */
/* Подключение шрифта Despair Display */
/*
@font-face {
    font-family: 'Despair Display';
    src: url('./fonts/DespairDisplay-Bold.woff2') format('woff2'),
         url('./fonts/DespairDisplay-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/
/* style.css */
/* Общие стили */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #FFFFFF;
  background: #F4F4F4;
}

/*хз в чем проблемма но у акций вытекают поля если меньше 245px экран, пока такое решение*/
html, body {
  overflow-x: hidden;
}


.hero-section {
  position: relative;
  height: 51.041vw;
  align-items: center;
  justify-content: center;
}

.hero-container {
  display: flex;
  position: absolute;
  width: 100%;
  top: 21.97vw; /* Высота остается неизменной */
  padding-left: 7.55vw; /* 145px / 1920px * 100% */
  padding-right: 7.55vw; /* 145px / 1920px * 100% */
  box-sizing: border-box; /* Учитываем padding в общей ширине */
  justify-content: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.08vw; /* 40px/1920px */
  width: 100%; /* 1630px/1920px */
}

.hero-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.04vw; /* 20px/1920px */
  width: 100%;
}

.hero-title {
  font-family: 'Despair Display', sans-serif;
  font-weight: 700;
  font-size: 6.67vw; /* 128px/1920px */
  line-height: 90%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  color: #ffffff;
}

.hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.25vw; /* 24px/1920px */
  line-height: 110%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  color: #ffffff;
}

.cta-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 29.17vw; /* 560px/1920px */
  height: 3.28vw; /* 63px/1920px */
  padding: 1.3vw 6.72vw; /* 25px 129px */
  background: #0000E9;
  border-radius: 2.08vw;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.94vw; /* 18px/1920px */
  line-height: 110%;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF; /* Белый цвет текста */
  border: 0.05208vw solid #0000E9;
}

/* Ховер-эффекты */
.cta-button:hover {
  background: #FFF;
  color: #0000E9;
}

/* Фоновое изображение с градиентом */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 51.041vw;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
            url('../images/image.png');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Планшетная версия (1024px) */
@media (max-width: 1024px) {
  .hero-section::before {
      height: 75vw; /* Высота фонового изображения */
  }
  .hero-section {
    height: 75vw;
  }

  .hero-container {
      top: 56.64vw; /* Позиция контейнера */
      padding-left: 10.25vw; /* 105px / 1024px * 100% */
      padding-right: 10.25vw; /* 105px / 1024px * 100% */
  }

  .hero-content {
      gap: 2.93vw; /* 30px / 1024px * 100% */
  }

  .hero-title {
      font-size: 6.25vw; /* 64px / 1024px * 100% */
  }

  .hero-subtitle {
      font-size: 1.76vw; /* 18px / 1024px * 100% */
  }

  .cta-button {
      width: 34.67vw; /* 355px / 1024px * 100% */
      height: 4.88vw; /* 50px / 1024px * 100% */
      padding: 1.95vw; /* 20px / 1024px * 100% */
      font-size: 1.37vw; /* 14px / 1024px * 100% */
      border-radius: 3.90vw;
  }
}

/* Мобильная версия (375px) */
@media (max-width: 375px) {
  
  .hero-section::before {          
    height: 216.53vw;
   }

  .hero-section {
    height: 216.53vw;
  }
   .hero-container {
    top: 162.4vw;
    padding-left: 2.67vw; /* 10px / 375px * 100% */
    padding-right: 2.67vw; /* 10px / 375px * 100% */
}
  
  .hero-content {
      gap: 5.33vw; /* 20px/375px */
  }
  
  .hero-text-group {
      gap: 2.67vw; /* 10px/375px */
  }
  
  .hero-title {
      font-size: 10.67vw; /* 40px/375px */
      line-height: 100%;
      white-space: normal;
  }
  
  .hero-subtitle {
      font-size: 3.73vw; /* 14px/375px */
  }
  
  .cta-button {
      width: 94.67%; /* 355px/375px */
      height: 13.33vw; /* 50px/375px */
      padding: 5.33vw; /* 20px/375px */
      font-size: 3.73vw; /* 14px/375px */
      border-radius: 10.66vw;
  }
}


/* pages-section.css */
/* Общие стили */
.pages-section {
  position: relative;
  width: 100%;
  margin: 0 auto;
  color: #FFFFFF; 
  background: #F4F4F4;
}

.pages-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.page-card {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s ease;
}

/* Контейнер для текста и стрелки */
.card-link-wrapper {
  width: 100%; /* Занимает всю ширину контейнера */
}

.card-link {
  display: flex;
  align-items: center;
  gap: 1.04vw; /* Отступ между текстом и стрелкой */
  justify-content: center;
}

.card-arrow {
  opacity: 0; /* Стрелка скрыта по умолчанию */
  transition: opacity 0.3s ease;
  width: 3.54vw; /* Размер стрелки для десктопной версии */
  height: 3.54vw;
  display: flex;
}

.card-arrow img {
  align-self: flex-start; /* Выравнивание по верху */
  width: 100%; /* Размер стрелки для десктопной версии */
  height: 100%;
}

/* Анимация появления стрелки */
.page-card:hover .card-arrow {
  opacity: 1;
}

.card-content {
  position: relative;
  display: flex;
  align-items: center; /* Вертикальное центрирование */
  top: 36.25vw; /* Высота для десктопа */
}

.card-title {
  font-family: 'Despair Display', sans-serif;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  transition: transform 0.3s ease;
}

.card-arrow {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  color: #FFFFFF;
}

/* Десктоп версия (1920px) */
.page-card {
  width: 33.33vw; /* 640px */
  height: 41.67vw; /* 800px */
}

.academic-card { background: url('../images/image_academia.png') center/cover; }
.tattoo-card { background: url('../images/image_tattoo.png') center/cover; }
.cleaning-card { background: url('../images/image_clean.png') center/cover; }

.card-title {
  font-size: 3.33vw; /* 64px */
  line-height: 100%;
}

/* Планшетная версия (1024px) */
@media (max-width: 1024px) {
  
  .page-card {
      width: 33.33vw;
      height: 50.78vw; /* 520px */
  }
  .card-content {
    top: 45.11vw; /* Высота для десктопа */
  }
  .card-title {
      font-size: 3.13vw; /* 32px */
  }
  
  .card-arrow {
      width: 2.73vw;
      height: 2.73vw;
  }
  .card-arrow img {
    width: 100%; /* Размер стрелки для планшетной версии */
    height: 100%;
}
}

/* Мобильная версия (375px) */
@media (max-width: 375px) {
  .pages-section {
      padding: 0;
  }
  .card-content {
    top: 84.26vw; /* Высота для десктопа */
  }
  .pages-container {
      flex-wrap: wrap;
      gap: 0;
  }
  
  .page-card {
      width: 100%;
      height: 94.67vw; /* 355px */
  }
  
  .page-card:nth-child(2),
  .page-card:nth-child(3) {
      width: 50%;
      height: 94.67vw;
  }
  
  .card-title {
      font-size: 4.27vw; /* 16px */
  }
  
  .card-arrow {
      opacity: 1; /* Всегда видимая на мобильных */
      transform: none;
      width: 4.8vw; /* Размер стрелки для мобильной версии */
      height: 4.8vw;
  }
  .card-arrow img {
        width: 100%; /* Размер стрелки для мобильной версии */
        height: 100%;
    }
}

/* Анимации */
.page-card:hover {
  transform: translateY(-1vw);
  text-decoration: none; /* Убираем подчеркивание при наведении */
  
}
.page-card.blue_hov:hover .card-title{
  color: #0000E9;
  
}
.page-card.red_hov:hover .card-title{
  color: #F00;
  
}
.page-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.page-card:hover .card-title {
  transform: translateY(0);
}
.page-card.red_hov:hover .card-arrow {
      filter: 
    brightness(0)    /* Делаем чёрный */
    invert(16%)      /* Частично инвертируем в тёмно-серый */
    sepia(100%)      /* Добавляем сепию (коричневый оттенок) */
    saturate(7236%) /* Максимальная насыщенность */
    hue-rotate(0deg) /* Без поворота цвета */
    brightness(103%) /* Лёгкая коррекция яркости */
    contrast(110%);  /* Увеличиваем контраст */
}

.page-card.blue_hov:hover .card-arrow {

      filter: 
    brightness(0) 
    invert(10%) 
    sepia(100%) 
    saturate(5000%) 
    hue-rotate(247deg) 
    brightness(94%) 
    contrast(143%);



}

/* about-us-section.css */
/* Общие стили */
.about-us-section {
  position: relative;
  padding-left: 20.3125vw; /* 10px / 375px * 100% */
  padding-right: 20.3125vw; /* 10px / 375px * 100% */
  padding-top: 9.375vw;
  display: flex;
  flex-direction: column;
  /*background: #FFFFFF;*/
  gap: 2.083vw;
}

/* Блок с иконкой и заголовком */
.about-us-headline {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 6.77vw; /* Отступ слева */
  padding-right: 6.77vw; /* Отступ справа */
  height: 12.76vw; /* Высота контейнера */
}

/* Внутренний контейнер для иконки */
.about-us-headline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6.77vw; /* Отступ слева */
  right: 6.77vw; /* Отступ справа */
  bottom: 0;
  background: url('../images/about_us.svg') center/contain no-repeat;
  z-index: 0; /* Иконка под текстом */
  margin: 0; /* Убираем отступы у параграфа */
}

/* Текст "О НАС" */
.about-us-headline h2 {
  position: relative; /* Относительное позиционирование */
  font-family: 'Despair Display', sans-serif;
  font-weight: 700;
  font-size: 6.67vw; /* 128px / 1920px */
  line-height: 90%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0A0A0A;
  z-index: 1; /* Текст поверх иконки */
  align-self: flex-end;
  left: 12.03vw; /* Отступ слева */
  margin: 0; /* Убираем отступы у параграфа */
  /*height: 4.9vw;*/
}

/* Блок с текстом */
.about-us-text {
  text-align: center;
  margin: 0 auto; /* Центрируем блок по горизонтали */
  width: 53.85416666666667vw;
}

.about-us-text p {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.67vw; /* 32px / 1920px */
  line-height: 110%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0A0A0A;
  width: 100%;
  margin: 0; /* Убираем отступы у параграфа */
  white-space: normal; /* Разрешаем перенос текста */
  word-wrap: break-word; /* Перенос длинных слов */
}

/* Блок с картинками */
.about-us-photos {
  display: flex;
  justify-content: space-between;
  gap: 1.04vw; /* 20px / 1920px */
  align-items: flex-start; /* Выравниваем картинки по верхнему краю */
}

.about-us-photos .photo {
  background-size: cover;
  background-position: center;
  flex-shrink: 0; /* Запрещаем сжатие элементов */
}

.photo-1 {
  width: 14.06vw; /* 270px / 1920px */
  height: 18.75vw; /* 360px / 1920px */
  margin-top: 5.2083vw; /* 100px / 1920px * 100 */
}

.photo-2 {
  width: 29.17vw; /* 560px / 1920px */
  height: 29.17vw;
}

.photo-3 {
  width: 14.06vw; /* 270px / 1920px */
  height: 18.75vw;
  margin-top: 5.2083vw; /* 100px / 1920px * 100 */
}

/* Планшетная версия (1024px) */
@media (max-width: 1024px) {
  .about-us-section {
      gap: 1.953125vw; /* 40px / 1024px */
      padding-left: 1.953125vw; /* 10px / 375px * 100% */
      padding-right: 1.953125vw; /* 10px / 375px * 100% */
      padding-top: 9.765625vw;
  }
  /* Блок с иконкой и заголовком */
  .about-us-headline {
      padding-left: 22.55859375vw; /* Отступ слева */
      padding-right: 22.55859375vw; /* Отступ справа */
      height: 14.16vw; /* Высота контейнера */
  }

  .about-us-headline::before {
    left: 22.55859375vw; /* Отступ слева */
    right: 22.55859375vw; /* Отступ справа */
  }

  .about-us-headline h2 {
      font-size: 6.25vw; /* 64px / 1024px */
      /*height: 4.6vw;*/
      left: 15.234vw; /* Отступ слева */
  }

  .about-us-text {
    width: 75.68359375vw;
  }
  
  .about-us-text p {
      font-size: 2.34vw; /* 24px / 1024px */
  }

  .about-us-photos {
    gap: 1.46484375vw; /* 20px / 1920px */
    padding-left: 16.2109375vw; /* Отступ слева */
    padding-right: 16.2109375vw; /* Отступ справа */
  }

  .photo-1 {
      width: 14.84vw; /* 152px / 1024px */
      height: 19.53vw; /* 200px / 1024px */
      margin-top: 5.76171875vw; /* 100px / 1920px * 100 */
  }

  .photo-2 {
      width: 31.05vw; /* 318px / 1024px */
      height: 31.05vw;
  }

  .photo-3 {
      width: 14.84vw; /* 152px / 1024px */
      height: 19.53vw;
      margin-top: 5.76171875vw; /* 100px / 1920px * 100 */
  }
}

/* Мобильная версия (375px) */
@media (max-width: 375px) {
  .about-us-section {
    gap: 2.66vw; /* 40px / 1024px */
    padding-left: 0.43229vw; /* 10px / 375px * 100% */
    padding-right: 0.43229vw; /* 10px / 375px * 100% */
    padding-top: 21.86vw;
}
  /* Блок с иконкой и заголовком */
  .about-us-headline {
    padding-left: 15.73vw; /* Отступ слева */
    padding-right: 15.73vw; /* Отступ справа */
    height: 14.66vw; /* Высота контейнера */
}

.about-us-headline::before {
  left: 15.73vw; /* Отступ слева */
  right: 15.73vw; /* Отступ справа */
}

  .about-us-headline h2 {
      font-size: 6.4vw; /* 24px / 375px */
      /*height: 4.53vw;*/
      left: 21.066vw;
  }

  .about-us-text {
    width: 94.66vw;
  }

  .about-us-text p {
      font-size: 3.73vw; /* 14px / 375px */
  }

  .about-us-photos {
    gap: 2.66vw; /* 20px / 1920px */
    padding-left: 0; /* Отступ слева */
    padding-right: 0; /* Отступ справа */
  }

  .photo-1, .photo-2, .photo-3 {
      width: 29.866vw; /* 150px / 375px */
      height: 29.866vw; /* 200px / 375px */
      margin-top: 0;
      aspect-ratio: 1/1;
  }

}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Основные размеры */
.banner {
  position: relative;
  width: 100%;
  /*background: #FFFFFF;*/
  padding-top: 4.16vw;
  flex-direction: column;
  display: flex;
}

.banner-inner {
  position: relative;
  height: 17.1875vw; /* 330px */
  overflow: hidden;
  display: flex;
  padding-left: 5.2083vw;
  padding-right: 5.2083vw;
}

/* Общие стили для лент */
.banner-strip {
  position: relative;
  left: 50%;
  width: 101%; /* 1963px */
  height: 4.427vw; /* 85px */ 
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 1.302vw 0; /* 25px */
}

/* Верхняя лента */
.banner-strip-bottom {
  position: absolute;
  top: 5.83vw;
  transform: translateX(-50%) rotate(-5deg);
  border: 0.052vw solid #0A0A0A; /* 1px */
  background: #FFF;
}

/* Нижняя лента */
.banner-strip-top {
  position: absolute;
  top: 7.2395vw;
  transform: translateX(-50%) rotate(5deg);
  background: #01FF00;
}

/* Бегущая строка */
.banner-content {
  display: flex;
  align-items: center;
  gap: 0.78125vw; /* 15px */
  width: max-content;
  animation: scroll var(--line-animation-speed, 20s) linear infinite;
  padding-right: 2.604vw; /* 50px */
}

/* Текст */
.discount-text {
  color: #0A0A0A;
  font-family: "Inter", sans-serif;
  font-size: 1.667vw; /* 32px */
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.033vw; /* -0.64px */
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

/* Звезда */
.star-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(5deg);
  width: 1.25vw; /* 24px */
  height: 1.25vw; /* 24px */
}

.banner-strip-top .star-wrapper {
  transform: rotate(-5deg);
}

.star-icon {
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .banner {
    padding-top: 5.859vw; /* 60px */
  }

  .banner-inner {
    height: 14.55vw; /* 117px (149px - 32px отступов) */
    padding-left: 1.95vw;
    padding-right: 1.95vw;
    
  }

  .banner-strip {
    height: 5.47vw; /* 56px */
    padding: 1.465vw 0; /* 15px */
  }

  /* Верхняя лента (зелёная) */
  .banner-strip-top {
    top: 4.39453125vw; /* 72.5px */
  }

  /* Нижняя лента (белая) */
  .banner-strip-bottom {
    top: 4.58984375vw; /* 13px */
  }

  .banner-content {
    gap: 1.465vw; /* 15px */
    padding-right: 4.88vw; /* 50px */
  }

  .discount-text {
    font-size: 2.34vw; /* 24px */
    letter-spacing: -0.047vw; /* -0.48px */
  }

  .star-wrapper {
    width: 2.34vw; /* 24px */
    height: 2.34vw; /* 24px */
  }

  /* Оптимизация анимации */
  /*.banner-content {
    animation-duration: 30s;
  }*/
}

@media (max-width: 375px) {
  .banner {
    padding-top: 16vw; /* ~20px */
  }

  .banner-inner {
    height: 14.4vw; /* 54px */
    padding: 0 2.67vw; /* 10px */
  }

  .banner-strip {
    width: 100vw;
    height: 14.4vw; /* 54px */
    padding: 3.2vw 0; /* 12px */
    left: 50%;
    transform: translateX(-50%);
  }

  /* Убираем наклоны для мобильной версии */
  .banner-strip-top,
  .banner-strip-bottom {
    transform: translateX(-50%);
    position: absolute;
    border: none;
  }

  .banner-strip-bottom {
    top: 0;
    background: #01FF00;
  }

  .banner-strip-top {
    top: auto;
    bottom: 0;
    background: #FFF;
    border: 0.267vw solid #0A0A0A; /* 1px */
  }

  .banner-content {
    gap: 2.67vw; /* 10px */
    padding-right: 5.33vw; /* 20px */
    /*animation-duration: 20s;*/
  }

  .discount-text {
    font-size: 3.73vw; /* 14px */
    letter-spacing: -0.053vw; /* -0.2px */
    transform: none;
  }

  .star-wrapper {
    width: 6.4vw; /* 24px */
    height: 6.4vw; /* 24px */
    transform: none;
  }
}

/* Контейнер прайс-листа */
.price_list_section {
  width: 100%;
  padding-top: 4.166vw;
}


/* Контейнер прайс-листа */
.price-list-container {
  position: relative;
  flex-direction: column;
  width: 100%;
  display: flex;

}

/* Стили для ролей барберов */
.roles-container {
    position: relative;
    width: 105%;
    height: 0.99vw;
    margin-left: -0.5vw;
}

.barber-role {
  position: absolute;
  height: 0.99vw; /* 19/1920*100 */
  top: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.83vw; /* 16/1920*100 */
  line-height: 120%;
  display: flex;
  align-items: center;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.junior {
  width: 7.81vw; /* 150/1920*100 */
  left: 50.364583vw; /* 777/1920*100 */
}

.barber {
  width: 3.18vw; /* 61/1920*100 */
  left: 65.46vw; /* 1097/1920*100 */
}

.brand {
  width: 6.25vw; /* 120/1920*100 */
  left: 80.5729vw; /* 1410/1920*100 */
}

/* Заголовок прайс-листа */
.price-list-heading {
  /* Позиционирование и размеры */
  position: relative;
  width: 22.448vw; /* 431px / 19.2 */
  height: 2.344vw; /* 45px */
  left: 5.208vw; /* 100px */
  
  /* Типографика */
  font-family: 'Despair Display', sans-serif;
  font-weight: 700;
  font-size: 3.333vw; /* 64px */
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0A0A0A;
  
  /* Выравнивание */
  display: flex;
  align-items: center;
  
  /* Адаптация высоты строки */
  padding: 0.26vw 0; /* Замена leading-trim */
}

/* Фильтры (кнопки выбора типа услуг) */
.button_section {
  position: relative;
  width: 31.615vw; /* 607px */
  height: 4.74vw; /* 91px */
  
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.781vw; /* 15px */
}

/* Фильтры (кнопки выбора типа услуг) */
.button_section_text {
  position: relative;
  width: 100%;
  height: 4.74vw; /* 91px */
  margin-top: 2.083vw;
  padding-left: 5.208vw; /* 100px */
  padding-right: 7.96875vw;
  justify-content: space-between;
}


.filter-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.781vw;
  align-items: flex-start;
}

.filter-btn {
  /* Общие стили для всех кнопок */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.417vw 1.302vw; /* 8px 25px */
  border-radius: 2.083vw; /* 40px */
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500; /* Исправлено с 700 на 500 */
  font-size: 1.042vw; /* 20px */
  line-height: 110%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s;
  
  /* Стандартные стили для неактивных кнопок */
  background: #FFFFFF;
  border: 0.052vw solid #0A0A0A;
  color: #0A0A0A;
}

/* Стили для активной кнопки и ховера */
.filter-btn.active,
.filter-btn:hover {
  background: #0000E9; /* Исправлено на синий из Figma */
  color: #FFFFFF;
  border: none;
}

/* Индивидуальные ширины кнопок из Figma */
.filter-btn[data-filter="head"] { width: 6.875vw; } /* 132px */
.filter-btn[data-filter="beard"] { width: 6.979vw; } /* 134px */
.filter-btn[data-filter="combo"] { width: 6.406vw; } /* 123px */
.filter-btn[data-filter="fresh_care"] { width: 9.01vw; } /* 173px */
.filter-btn[data-filter="coloring"] { width: 10.625vw; } /* 204px */
.filter-btn[data-filter="season_tickets"] { width: 9.948vw; } /* 191px */

/* Список услуг (таблица) */
.price_box {
  position: relative;
  width: 100%; /* 17172020px */
  margin-top: 2.5625vw; /* 336px */
  /*padding-left: 5.2083vw;*/
  display: flex;
  flex-direction: column;
  gap: 1.302vw; /* 25px */
  overflow: visible;
}

.price-list {
  display: flex;
  flex-direction: column;
 
}
.service-first {
  border-bottom: 0.052vw solid #CCCCCC;
}

.service-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #0A0A0A;
   transition: all 0.5s ease;
  cursor: pointer;
  /*background-color: #0000E9;*/
}

.service-item-info {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 88.18333vw;
  padding-top: 1.3020vw;
  padding-bottom: 1.3020vw;
  border-bottom: 0.052vw solid #CCCCCC;
  border-top: 0.052vw solid #CCCCCC;
  color: #0A0A0A;
  transition: all 0.3s;
  cursor: pointer;
}
.service-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.52vw; 
}

.service-name {
color: #000;
font-family: "Inter";
font-size: 1.25vw;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 24px */
text-transform: uppercase;
}

.new_service{
    width: 3.90625vw;
    height: 2.1875vw;
    margin-top: -0.5vw;
    background: url('../images/new_cours.svg') center/contain no-repeat;
}

.service-name-groub{
  display: flex;
  gap: 1.0416vw;
}
.service-description {
  display: none;
  width: 34.27vw; 
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375vw; 
  line-height: 120%;
  color: #0A0A0A;
  white-space: normal;
}

.service-prices {
  display: flex;
  width: 39.218vw;
  position: relative;
  margin-right: 0;
  margin-left: auto;
}

.price-column {
  display: flex;
  align-items: center;
  gap: 0.521vw;
  position: absolute;
}
.junior-price {
  left: 0; /* 777/1920*100 */
}

.barber-price {
  left: 15.104vw; /* 1097/1920*100 */
}

.brand-price {
  left: 30.20833vw; /* 1410/1920*100 */
}

.price {
  font-family: 'Despair Display', sans-serif;
  font-weight: 700;
  font-size: 1.667vw;
  line-height: 100%;
  /*text-transform: uppercase;*/
  color: #0A0A0A;
  white-space: nowrap;
  transition: inherit;
}

.divider {
  width: 3.333vw;
  border: 0.156vw solid #0A0A0A;
  margin-top: 0.6770vw;
}
.service-item.side_central .service-item-info{
  border-bottom: none;
  border-top: none;
}
.service-item.side_up .service-item-info{
  border-bottom: none;
  border-top: 0.052vw solid #CCCCCC;
}
.service-item.side_down .service-item-info{
  border-bottom: 0.052vw solid #CCCCCC;
  border-top: none;
}

.service-item.hover,
.service-item.active{
  background-color: #0000E9;
}
.service-item.hover .service-name,
.service-item.hover .price,
.service-item.hover .divider,
.service-item.hover .service-description  { 
  color: #ffffff;
  border-color: #ffffff; 
}

.service-item.disable{
opacity: 0.6;
}
.service-item.active .service-description,
.service-item.hover .service-description{
  display: block;
}
.service-item.active .service-name,
.service-item.active .price,
.service-item.active .divider,
.service-item.active .service-description  { 
  color: #ffffff;
  border-color: #ffffff; 
}


/*
.service-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 0.521vw;
  padding-bottom: 0.521vw;
  border-bottom: 0.052vw solid #CCCCCC;
  color: #0A0A0A;
  transition: all 0.3s;
  cursor: pointer;
}

.service-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.52vw; 
}

.service-description {
  display: none;
  width: 34.27vw; 
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375vw; 
  line-height: 120%;
  color: #0A0A0A;
  margin-top: 0.52vw; 
  white-space: normal;
}

.service-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.25vw;
  line-height: 110%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #0A0A0A;
  white-space: nowrap;
  margin-bottom: 0;
  transition: inherit;
}

.service-prices {
  display: flex;
  gap: 2.604vw;
  margin-right: 4.688vw;
  justify-content: space-between;
  width: 39.218vw;
}

.price-column {
  display: flex;
  align-items: center;
  gap: 0.521vw;
}

.price {
  font-family: 'Despair Display', sans-serif;
  font-weight: 700;
  font-size: 1.667vw;
  line-height: 100%;
  text-transform: uppercase;
  color: #0A0A0A;
  white-space: nowrap;
  transition: inherit;
}

.divider {
  width: 3.333vw;
  border: 0.156vw solid #0A0A0A;
  margin-right: 2.39vw;
}


.service-item.active {
  position: relative;
  background: transparent;
  overflow: visible;
  z-index: 2;
  margin-left: -5.2083vw;
  margin-right: -5.2083vw;
  padding-left: 5.2083vw;
  padding-right: 5.2083vw;
  width: calc(100% + 10.4166vw);
}

.service-item.active::before , .service-item:hover::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: #0000E9;
  z-index: -1;
  box-shadow: 0 0 0 100vmax #0000E9; 
  clip-path: inset(0 -100vmax); 
}

.service-item.active .service-name,
.service-item.active .price,
.service-item.active .divider,
.service-item.active .service-description  { 
  color: #ffffff;
  border-color: #ffffff; 
}
.service-item:hover .service-name,
.service-item:hover .price,
.service-item:hover .divider,
.service-item:hover .service-description  { 
  color: #ffffff;
  border-color: #ffffff; 
}

.service-item.inactive {
  opacity: 0.6;
}


.service-item:hover .service-description,
.service-item.active .service-description {
  display: block;
}

.service-item.active {
  padding-bottom: 1.042vw;
  align-items: flex-start;
  border-color: transparent; 
}
*/
.booking-btn {
  /* Layout */
  margin-top: 2.083vw; /* 4346px (4346/19.2) */
  margin-left: 35.416vw;
  /* Dimensions */
  width: 29.167vw; /* 560px */
  height: 3.281vw; /* 63px */
  
  /* Styling */
  background: #0000E9;
  border-radius: 2.08333vw;
  border: none;
  cursor: pointer;
  
  /* Text */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.938vw; /* 18px */
  line-height: 110%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
  border: 0.05208vw solid #0000E9;
  /* Padding */
  padding: 1.302vw 6.719vw; /* 25px 129px */

}

/* Ховер-эффекты */
.booking-btn:hover {
  background: #FFF;
  color: #0000E9;
}
.service-role-tab{
  display: none;
}
  .mobil{
    display: none;
  }
@media (max-width: 1024px) {
  .price_list_section {
    height: 100%; /* 619px */
  }

  .price-list-container {
    left: 0;
    top: 0;
  }

  .roles-container {
    height: 1.27vw; /* 13px */
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
  }
  .service-role-tab{
    top: 0.98vw;
    display: block;
    color: var(--Gray-Gray-Dark, #999);
/* Tablet/Card Text/Caption Small */
font-family: "Inter";
font-size: 1.17188vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 1.28906vw */
letter-spacing: -0.02344vw;
text-transform: uppercase;
position: absolute;
  }
  .barber-role {
    font-size: 1.17vw; /* 12px */
  }
  
  .junior {
    top: 0.98vw; /* 10px */
    left: 50.78125vw; /* 500px */
    width: 11.13vw; /* 114px */
  }
  
  .barber {
    top: 0.98vw; /* 10px */
    left: 64.64844vw; /* 672px */
    width: 4.49vw; /* 46px */
  }
  
  .brand {
    top: 0.98vw; /* 10px */
    left: 78.61328vw; /* 840px */
    width: 11.62vw; /* 119px */
  }

  .price-list-heading {
    width: 23.05vw; /* 236px */
    left: 1.95vw; /* 20px */
    font-size: 3.13vw; /* 32px */
    height: 2.15vw; /* 22px */
  }

  .button_section_text {
    padding: 0;
    left: 1.95vw; /* 20px */
    width: 79.10vw; /* 810px */
    height: 3.42vw; /* 35px */
  }

  .button_section {
    position: relative;
    width: 79.10vw; /* 810px */
    height: 4.74vw; /* 91px */
  }

  .filter-buttons {
    gap: 0.98vw; /* 10px */
    flex-wrap: nowrap;
  }

  .filter-btn {
    padding: 0.98vw 2.44vw; /* 10px 25px */
    border-radius: 3.91vw; /* 40px */
    font-size: 1.37vw; /* 14px */
  }

  .filter-btn[data-filter="head"] { width: 10.45vw; } /* 107px */
  .filter-btn[data-filter="beard"] { width: 10.64vw; } /* 109px */
  .filter-btn[data-filter="combo"] { width: 9.86vw; } /* 101px */
  .filter-btn[data-filter="fresh_care"] { width: 13.28vw; } /* 136px */
  .filter-btn[data-filter="coloring"] { width: 15.43vw; } /* 158px */
  .filter-btn[data-filter="season_tickets"] { width: 14.55vw; } /* 149px */

  .price_box {
    width: 100%;
    left: 0;
    padding: 0;
    margin-top: 5.18vw; /* 53px */
  }
.service-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #0A0A0A;
   transition: all 0.5s ease;
  cursor: pointer;
  /*background-color: #0000E9;*/
}

.service-item-info {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 96.09375vw;
  padding-top: 1.46484vw;
  padding-bottom: 1.46484vw;
  border-bottom: 0.09766vw solid #CCCCCC;
  border-top: 0.09766vw solid #CCCCCC;
  color: #0A0A0A;
  transition: all 0.3s;
  cursor: pointer;
}
.service-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.52vw; 
}

.service-name-groub {
  display: inline-flex; /* Ширина подстраивается под содержимое */
  gap: 1.0416vw;
  padding-right: calc(6.34766vw + 0.52vw); /* Учитываем .new_service + отступ */
  position: relative; /* Для абсолютного позиционирования .new_service */
  box-sizing: content-box; /* Учитываем только содержимое для ширины */
  max-width: 47.36328vw; /* Максимальная ширина контейнера */
}

.service-name {
  font-size: 1.75781vw;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 1.75781vw */
  letter-spacing: -0.03516vw;
  text-transform: uppercase;
  max-width: calc(47.36328vw - (6.34766vw + 0.52vw)); /* Ограничиваем ширину текста */
  overflow-wrap: break-word; /* Перенос только для слов, которые не умещаются */
}

.new_service {
  width: 6.34766vw;
  height: 3.32031vw;
  margin-top: -0.9vw;
  background: url('../images/new_cours.svg') center/contain no-repeat;
  position: absolute;
  right: 0;
  top: 0;
}

.service-description {
  display: none;
  width: 41.99219vw;
font-size: 1.36719vw;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 1.64062vw */
letter-spacing: -0.02734vw;
}

.service-prices {
  display: flex;
  width: 44.76562vw;
  position: relative;
  margin-right: 0;
  margin-left: auto;
}
.arrow_faq {
    width: 2.34375vw;
    height: 2.34375vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    position: absolute;
    right: 0;
    filter: invert(100%);
    margin-top: -0.4vw;
}

.arrow-icon-faq {
    width: 2.34375vw;
    height: 2.34375vw;
    transition: transform 0.3s ease;
    
}

.service-item.active .arrow_faq  { 
  transform: rotate(180deg);
  filter: invert(0);
}

.price-column {
  display: flex;
  align-items: center;
  gap: 0.521vw;
  position: absolute;
}
.junior-price {
  left: 0; /* 777/1920*100 */
}

.barber-price {
  left: 13.86719vw; /* 1097/1920*100 */
}

.brand-price {
  left: 27.83203vw; /* 1410/1920*100 */
}

.price {
font-size: 1.95312vw;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 1.95312vw */
}

.divider {
  width: 4.39vw; 
  border: 0.156vw solid #0A0A0A;
  margin-top: 0.6770vw;
}
.service-item.side_central .service-item-info{
  border-bottom: none;
  border-top: none;
}
.service-item.side_up .service-item-info{
  border-bottom: none;
  border-top: 0.052vw solid #CCCCCC;
}
.service-item.side_down .service-item-info{
  border-bottom: 0.052vw solid #CCCCCC;
  border-top: none;
}
  /*.service-item {
    padding: 1.46vw 1.95vw; 
  }

  .service-item.active {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.46vw; 
    padding-right: 1.95vw; 
    width: 100%;
  }

  .service-name {
    font-size: 1.7578125vw;
    white-space: normal;
    width: 41.992vw;
  }
  
  .service-description {
    font-size: 1.3671875vw;
 }

 .price {
  font-size: 1.953vw;
 }

  .service-item.active::before {
    left: 0; 
  }

  .service-prices {
    width: 40.04vw; 
    margin-right: 8.88vw;
    gap: 0;
  }

  .price-column {
    width: 6.54vw; 
  }

  .divider {
    width: 4.39vw; 
  }
*/
  .booking-btn {
    width: 34.67vw; /* 355px */
    height: 4.88vw; /* 50px */
    left: 32.71vw; /* 335px */
    margin-top: 2.93vw; /* 30px */
    margin-left: 32.71vw; /* 335px */
    font-size: 1.75781vw;
    border-radius: 3.90625vw
  }

  .mobil{
    display: none;
  }
}

@media (max-width: 375px) {
  .price_list_section {
    height: 100%; /* 572px */
  }

  .price-list-heading {
    width: 63.47vw; /* 236px */
    left: 2.67vw; /* 10px */
    font-size: 6.4vw; /* 24px */
    height: 5.87vw; /* 22px */
  }

  .button_section_text {
    left: 2.67vw; /* 10px */
    right: 2.67vw; /* 10px */
    width: 100%;
    height: 9.33vw; /* 35px */
  }

  .button_section {
    width: 87.5vw;
    z-index: 1;
  }

  .filter-buttons {
    gap: 2.67vw; /* 10px */
    flex-wrap: wrap;
  }

  .filter-btn {
    padding: 2.67vw 6.67vw; /* 10px 25px */
    border-radius: 10.67vw; /* 40px */
    font-size: 3.73vw; /* 14px */
    height: 9.33vw; /* 35px */
  }

  .filter-btn[data-filter="head"] { width: 28.53vw; } /* 107px */
  .filter-btn[data-filter="beard"] { width: 29.07vw; } /* 109px */
  .filter-btn[data-filter="combo"] { width: 26.93vw; } /* 101px */
  .filter-btn[data-filter="fresh_care"] { width: 36.27vw; } /* 136px */
  .filter-btn[data-filter="coloring"] { width: 42.13vw; } /* 158px */
  .filter-btn[data-filter="season_tickets"] { width: 39.73vw; } /* 149px */

  .roles-container {
    height: 3.47vw; /* 13px */
    z-index: 0;
  }

  .barber-role {
    color: var(--Gray-Gray-Dark, #999);
/* Mobile/Card Text/Caption Small */
font-family: "Inter";
font-size: 3.2vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 3.52vw */
letter-spacing: -0.064vw;
text-transform: uppercase;
    white-space: normal;
  }
  .service-role-tab{
    top: 9.5vw;
font-size: 3.2vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 3.52vw */
letter-spacing: -0.064vw;
text-transform: uppercase;
position: absolute;
  }
  .junior {
    top: 12.5vw;
    left: 29.33333vw; /* 120px */
    right: auto; /* 188px */
  }

  .barber {
    top: 9.5vw;
    left: 53.06667vw;
    right: auto;
    height: auto;
  }

  .brand {
    top: 12.5vw;
    left: 73.86667vw;/* 287px */
    right: auto; /* 42px */
  }

  .price_box {
    margin-top: 14.13vw; /* 53px */
  }

  .service-item.active .mobil{
    display: block;
  }


.service-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #0A0A0A;
   transition: all 0.5s ease;
  cursor: pointer;
  /*background-color: #0000E9;*/
}

.service-item-info {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 94.66667vw;
  padding-top: 2.66667vw;
  padding-bottom: 2.66667vw;
  border-bottom: 0.26667vw solid #CCCCCC;
  border-top: 0.26667vw solid #CCCCCC;
  color: #0A0A0A;
  transition: all 0.3s;
  cursor: pointer;
}
.service-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.52vw; 
}

.service-name-groub {
  display: inline-flex; /* Ширина подстраивается под содержимое */
  gap: 1.0416vw;
  padding-right: 0; /* Учитываем .new_service + отступ */
  position: relative; /* Для абсолютного позиционирования .new_service */
  box-sizing: content-box; /* Учитываем только содержимое для ширины */
  max-width: 28vw; /* Максимальная ширина контейнера */
}

.service-name {
  font-family: "Inter";
  font-size: 3.73333vw;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 4.10667vw */
  letter-spacing: -0.07467vw;
  text-transform: uppercase;
  max-width: 28vw; /* Ограничиваем ширину текста */
  overflow-wrap: break-word; /* Перенос для слов, которые не умещаются */
  hyphens: auto; /* Автоматическая расстановка дефисов */
}

.comp{
  display: none;
}
.new_service {
width: 17.33333vw;
height: 9.06667vw;
  margin-top: -0.9vw;
  background: url('../images/new_cours.svg') center/contain no-repeat;
  position: relative;
  right: 0;
  top: 0;
}

.service-description {
  display: none;
  width: 100%;
font-size: 3.73333vw;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 4.48vw */
letter-spacing: -0.07467vw;
}
.service-description-groub{
width: 94.66667vw;
display: inline-flex;
gap: 4.53333vw;
}
.service-prices {
  display: flex;
  width: 64.0vw;
  position: relative;
  margin-right: 0;
  margin-left: auto;
}
.arrow_faq {
display: none;
}

.price-column {
  display: flex;
  align-items: center;
  gap: 0.521vw;
  position: absolute;
}
.junior-price {
  left: 0; /* 777/1920*100 */
}

.barber-price {
  left: 23.73333vw; /* 1097/1920*100 */
}

.brand-price {
  left: 44.53333vw; /* 1410/1920*100 */
}

.price {
font-size: 3.2vw;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 3.2vw */

}

.divider {
    width: 7.47vw; 
    border-width: 0.53vw; 
  margin-top: 0.6770vw;
}
.service-item.side_central .service-item-info{
  border-bottom: none;
  border-top: none;
}
.service-item.side_up .service-item-info{
  border-bottom: none;
  border-top: 0.052vw solid #CCCCCC;
}
.service-item.side_down .service-item-info{
  border-bottom: 0.052vw solid #CCCCCC;
  border-top: none;
}

/*
  .service-item {
    padding: 2.67vw; 
    display: block;
  }

  .service-item.active {
    padding-left: 2.67vw; 
    padding-right: 2.67vw; 
    width: 100%;
    margin: 0;
    flex-wrap: wrap;
    display: block;
    overflow: hidden;
  }

  .service-item:hover {
    overflow: hidden;
  }

  .service-item.active .service-name {
    width: 10%;
  }

  .service-item:hover .service-name {
    width: 10%;
  }

  .service-name {
    font-size: 3.73vw; 
    white-space: normal;
    width: 10%;
  }

  .service-description {
    font-size: 3.73vw; 
    width: 94.67vw; 
  }

  .price {
    font-size: 3.2vw; 
  }

  .service-prices {
    width: 54.33vw;
    margin-right: 2.67vw;
    gap: 9.67vw;
}

  .price-column {
    width: 17.87vw; 
    gap: 2.67vw; 
  }

  .divider {
    width: 7.47vw; 
    border-width: 0.53vw; 
  }
*/
  .booking-btn {
    width: 94.67vw; /* 355px */
    height: 13.33vw; /* 50px */
    left: 2.67vw; /* 10px */
    right: 2.67vw; /* 10px */
    margin-top: 2.93vw;
    margin-left: 1.5vw;
    padding: 5.33vw 34.4vw; /* 20px 129px */
    font-size: 3.73vw; /* 14px */
      border-radius: 10.66667vw;
  }

  .filter-buttons {
    gap: 0; /* Было 2.67vw */
    flex-wrap: nowrap; /* Изменено с wrap */
    overflow-x: auto; /* Добавлено */
    -webkit-overflow-scrolling: touch; /* Добавлено */
    scrollbar-width: none; /* Добавлено */
    padding: 2.67vw 0; /* Добавлено */
    margin-left: -2.67vw; /* Добавлено */
    margin-right: -10.67vw; /* Добавлено */
    padding-left: 2.67vw; /* Добавлено */
    padding-right: 2.67vw; /* Добавлено */
  }

  .filter-buttons::-webkit-scrollbar {
    display: none; /* Добавлено */
  }

  .filter-btn {
    padding: 2.67vw 6.67vw;
    border-radius: 10.67vw;
    font-size: 3.73vw;
    height: 9.33vw;
    flex: 0 0 auto; /* Добавлено */
    white-space: nowrap; /* Добавлено */
    margin-right: 2.67vw; /* Добавлено вместо gap */
  }

  .filter-btn:last-child {
    margin-right: 0; /* Добавлено */
    padding-right: 2.67vw; /* Добавлено */
  }
/*
  .service-item.active::before {
    width: 100vw;
    left: 0;
    transform: none;
  }
*/
  .service-item {
    position: relative;
    overflow: visible;
  }

  
  .service-prices {
    position: absolute;
    left: 34.66vw;
    top: 3.2vw;
    z-index: 2;
}

  .service-name {
    position: relative;
    z-index: 1;
  }

}

.lookbook_section {
  margin-top: 9.375vw;
  margin-left: 5.2083vw;
  width: 89.583vw;
  height: 96.40625vw;
  position: relative;
}

@media (max-width: 1024px) {
  .lookbook_section {
    margin: auto; /* 20px */
    margin-top: 9.77vw; /* 100px */
    width: 96.09vw; /* 984px */
    height: 127.54vw; /* 1306px */
  }
}


/* Основной контейнер */
.promotions {
  position: relative;
  width: 100%;
  padding-top: 9.375vw; /* 180/1920 */
}

/* Заголовок секции */
.promotions-header {
  padding-left: 5.208vw; /* 100/1920 */
  width: 89.583vw; /* 1720/1920 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.083vw; /* 40/1920 */
}

.section-title {
  font-family: 'Despair Display', sans-serif;
  font-size: 3.333vw; /* 64/1920 */
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  color: #0A0A0A;
}

/* Ссылка "Смотреть все" */
.view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.781vw; /* 15/1920 */
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 1.25vw; /* 24/1920 */
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0A0A0A;
  transition: opacity 0.3s;
}

.view-all span {
  display: inline-block;
  width: 9.688vw; /* 186/1920 */
  height: 1.354vw; /* 26/1920 */
}

.view-all:hover {
  opacity: 0.8;
  color: #0000E9;
  text-decoration: none;
}

/* Иконка стрелки */
.arrow-icon-stock {
  width: 1.458vw; /* 28/1920 */
  height: 1.458vw; /* 28/1920 */
  background-image: url('../images/arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  filter: invert(100%);
}
.view-all:hover .arrow-icon-stock {
      filter: 
    brightness(0) 
    invert(10%) 
    sepia(100%) 
    saturate(5000%) 
    hue-rotate(247deg) 
    brightness(94%) 
    contrast(143%);
}
/* Контейнер с карточками */
.stocks-container {
  display: flex;
  gap: 1.042vw; /* 20/1920 */
  padding-left: 5.208vw; /* 100/1920 */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.stocks-container::-webkit-scrollbar {
  display: none;
}



.discount-percent {
  font-family: 'Despair Display', sans-serif;
  font-size: 3.333vw; /* 64/1920 */
  font-weight: 700;
  color: #0A0A0A;
}

.stock-button {
  display: none;
}

@media (max-width: 1024px) {
  /* Основной контейнер */
  .promotions {
    padding-top: 9.766vw; /* 100/1024 */
    /*height: 42.1875vw;*/
  }

  /* Заголовок секции */
  .promotions-header {
    padding-left: 1.953vw; /* 20/1024 */
    width: 1.953vw; /* 984/1024 */
    margin-bottom: 2.93vw; /* 30/1024 */
  }

  .section-title {
    font-size: 3.125vw; /* 32/1024 */
  }

  /* Ссылка "Смотреть все" */
  .view-all {
    display: none;
  }

  .view-all span {
    display: none;
  }

  .view-all:hover {
    display: none;
  }

  /* Иконка стрелки */
  .arrow-icon-stock {
    display: none;
  }

  /* Контейнер с карточками */
  .stocks-container {
    gap: 1.465vw; /* 15/1024 */
    padding-left: 1.953vw; /* 20/1024 */
  }

  
  .stock-button {
    width: 34.67vw; /* 355px */
    height: 4.88vw; /* 50px */
    margin-top: 2.9296vw; /* 30px */
    margin-left: 32.667vw; /* 335px */
    background: #0000E9;
    border-radius: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.367vw;
    line-height: 110%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    border: 1px solid #0000E9;
  }
  
  .stock-button:hover {
    background: #FFFFFF;
    color: #0000E9;
    text-decoration: none; /* важно */
  }



}

@media (max-width: 375px) {
  /* Основной контейнер */
  .promotions {
    padding-top: 21.333vw; /* 80/375 */
  }

  /* Заголовок секции */
  .promotions-header {
    padding-left: 2.667vw; /* 10/375 */
    width: 0.521vw; /* 1.953/375 */
    margin-bottom: 5.333vw; /* 20/375 */
    
  }

  .section-title {
    font-size: 6.4vw; /* 24/375 */
  }

  /* Контейнер с карточками */
  .stocks-container {
    gap: 2.667vw; /* 10/375 */
    padding-left: 2.667vw; /* 10/375 */
  }



  .stock-button {
    display: flex;
    width: 94.667vw; /* 355/375 */
    height: 13.333vw; /* 50/375 */
    margin-top: 5.333vw; /* 20/375 */
    margin-left: 2.667vw; /* 10/375 */
    font-size: 3.733vw; /* 14/375 */
  }
}

/* Основной контейнер */
.bestsellers-product  {
    position: relative;
    width: 100%;
    margin-top: 9.375vw; /* 180/1920 */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    gap: 2.083vw;
  }

  .bestseller-header {
    position: relative;
    width: 88.5417vw; /* 1700px */
    height: 12.7604vw; /* 245px */
    display: flex;
    align-items: flex-end;
    justify-content: center; 
  }
  
  
  .bestseller-header::before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background: url('../images/bestrelers.svg') center/contain no-repeat;
    z-index: 0; /* Иконка под текстом */
    margin: 0; /* Убираем отступы у параграфа */
  }
  .bestseller-header-text {
    font-family: 'Despair Display', sans-serif;
    font-weight: 700;
    font-size: 6.6667vw; /* 128px */
    line-height: 0.9;
    letter-spacing: -0.1333vw; /* -2.56px */
    text-transform: uppercase;
    display: inline-block;
    color: #000;
    margin-bottom: 0;
    height: 4.6875vw; /* 90px */
    margin-left: 0.3906vw; /* 7.5px */
    z-index: 1;
  }
  
  /* Контейнер с карточками */
  .products-container-bestseller {
    display: flex;
    gap: 1.042vw; /* 20/1920 */
    padding-left: 5.2083vw; /* 100/1920 */
    padding-right: 5.2083vw;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
  }
  
  .products-container-bestseller::-webkit-scrollbar {
    display: none;
  }
  .button-big-bestsellers {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    outline: none;
    background: #0000E9;
    color: white;
    width: 29.1667vw;
    height: 3.2813vw;
    border-radius: 2.0833vw;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.938vw;
    line-height: 110%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    box-shadow: none;
  }
  
  .button-big-bestsellers:hover {
    background: #FFFFFF;
    color: #0000E9;
    border: 1px solid #0000E9;
    text-decoration: none; /* важно */
  }
  
  .button-big-bestsellers span {
    text-decoration: none;
  }

  @media (max-width: 1024px) {
    .button-big-bestsellers {
      width: 34.67vw; /* 355px (было 560px) */
      height: 4.88vw; /* 50px (было 63px) */
      border-radius: 3.91vw; /* 40px */
      font-size: 1.37vw; /* 14px (было 18px) */
    }
    
    .bestseller-header {
      width: 96.09vw; /* 984px (было 1700px) */
      height: 14.16vw; /* 145px (было 245px) */
      margin-left: 0;
    }
    
    .bestseller-header-text {
      font-size: 6.25vw; /* 64px (было 128px) */
      height: 4.39vw; /* 45px (было 90px) */
      margin: 0 auto;
    }

        /* Основной контейнер */
.bestsellers-product  {
  margin-top: 9.765625vw; /* 180/1920 */
  gap: 2.929vw;
}

  /* Контейнер с карточками */
  .products-container-bestseller {
    gap: 1.46484375vw; /* 20/1920 */
    padding-left: 1.953125vw; /* 100/1920 */
    padding-right: 1.953125vw;
  }
  
  }

  @media (max-width: 375px) {

    .button-big-bestsellers {
      width: 94.667vw;
      height: 13.333vw;
      border-radius: 10.667vw;
      font-size: 3.733vw;
    }

    /* Заголовок */
    .bestseller-header {
        width: 94.667vw;
        height: 14.667vw;
        margin: 0 auto;
    }

    .bestseller-header-text {
        font-size: 6.4vw;
        height: 4.533vw;
        margin: 0 auto;
    }

      /* Основной контейнер */
.bestsellers-product  {
  margin-top: 21.33333vw; /* 180/1920 */
  gap: 5.333333333333333vw;
}

  /* Контейнер с карточками */
  .products-container-bestseller {
    gap: 2.666666666666667vw; /* 20/1920 */
    padding-left: 2.666666666666667vw; /* 100/1920 */
    padding-right: 2.666666666666667vw;
  }

  }


  /* Основные размеры */
.banner-loyalty {
  position: relative;
  width: 100%;
  /*background: #FFFFFF;*/
  margin-top: 9.375vw;
  flex-direction: column;
  display: flex;
  height: 35.41666vw;
  justify-content: center; 
}

/* Верхняя лента */
.banner-strip-bottom-loyalty {
  position: absolute;
  top: 5.83vw;
  transform: translateX(-50%) rotate(-5deg);
  border: 0.052vw solid #0A0A0A; /* 1px */
  background: #FFF;
}

/* Нижняя лента */
.banner-strip-top-loyalty {
  position: absolute;
  top: 7.2395vw;
  transform: translateX(-50%) rotate(5deg);
  background: #0A0A0A;
}

/* Бегущая строка */
.banner-content-loyalty {
  display: flex;
  align-items: center;
  gap: 0.78125vw; /* 15px */
  width: max-content;
  animation: scroll var(--line-animation-speed, 20s) linear infinite;
  padding-right: 2.604vw; /* 50px */
}

/* Общие стили для текста */
.discount-text-top,
.discount-text-bottom {
  font-family: "Inter", sans-serif;
  font-size: 1.667vw;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.033vw;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}

/* Стили для верхней ленты */
.discount-text-top {
  color: #FFF;
}

/* Стили для нижней ленты */
.discount-text-bottom {
  color: #0A0A0A;
}

.loyalty-programm {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  width: 49.479vw; /* 950px */
  height: 35.417vw; /* 680px */
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  background: url('../images/green_sun.svg') center/contain no-repeat;
}

.loyalty-programm-header{
  width: 24.896vw; /* 478px */
  color: #0A0A0A;
  text-align: center;
  font-family: "Despair Display";
  font-size: 3.333vw; /* 64px */
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.067vw; /* -1.28px */
  text-transform: uppercase;
}

.loyalty-programm-description{
  width: 29.167vw; /* 560px */
  margin-top: 1.042vw; /* 20px */
  color: #0A0A0A;
  text-align: center;
  font-family: "Inter";
  font-size: 0.938vw; /* 18px */
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.019vw; /* -0.36px */
}

.loyalty-programm-more{
  display: flex;
  gap: 0.781vw; /* 15px */
  margin-top: 2.083vw; /* 40px */
  color: #0A0A0A;
  font-family: "Inter";
  font-size: 1.25vw; /* 24px */
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.025vw; /* -0.48px */
  text-transform: uppercase;
}

.loyalty-programm-more {
  /* существующие стили */
  text-decoration: none; /* Убираем подчеркивание по умолчанию */
}

.loyalty-programm-more:hover {
  color: #0000E9; /* Черный цвет при наведении */
  text-decoration: none; /* Гарантированно убираем подчеркивание */
}

/* Если нужно убрать подчеркивание у span */
.loyalty-programm-more span {
  text-decoration: none;
}
.loyalty-programm-more:hover {
  color: #0000E9;
   text-decoration: none;
}
/* Если используются состояния visited/focus */
/*.loyalty-programm-more:visited,
.loyalty-programm-more:focus,
.loyalty-programm-more:active {
  color: #0A0A0A;
  text-decoration: none;
}*/
.loyalty-programm-more:hover .arrow-icon-stock {
      filter: 
    brightness(0) 
    invert(10%) 
    sepia(100%) 
    saturate(5000%) 
    hue-rotate(247deg) 
    brightness(94%) 
    contrast(143%);
}
@media (max-width: 1024px) {
  .banner-loyalty {
    margin-top: 9.76562vw; /* 60px */
    height: 46.875vw;
  }

  /* Верхняя лента (зелёная) */
  .banner-strip-top-loyalty {
    top: 4.39453125vw; /* 72.5px */
  }

  /* Нижняя лента (белая) */
  .banner-strip-bottom-loyalty {
    top: 4.58984375vw; /* 13px */
  }

  .banner-content-loyalty {
    gap: 1.465vw; /* 15px */
    padding-right: 4.88vw; /* 50px */
  }

  /* Оптимизация анимации */
  /*.banner-content {
   /* animation-duration: 30s;
  }*/
  .loyalty-programm {
    width: 63.476vw; /* 950px */
    height: 46.875vw; /* 680px */
  }
  
  .loyalty-programm-header {
    width: 23.05vw; /* 236px */
    font-size: 3.13vw; /* 32px */
    letter-spacing: -0.06vw; /* -0.64px */
}

.loyalty-programm-description {
    width: 41.99vw; /* 430px */
    margin-top: 1.95vw; /* 20px */
    font-size: 1.37vw; /* 14px */
    letter-spacing: -0.03vw; /* -0.28px */
}

.loyalty-programm-more {
    margin-top: 2.93vw; /* 30px */
    font-size: 1.37vw; /* 14px */
    letter-spacing: -0.03vw; /* -0.28px */
    display: flex;
    width: 34.67vw; /* 355px */
    padding: 1.95vw 12.60vw; /* 20px 129px */
    justify-content: center;
    align-items: center;
    gap: 0.98vw; /* 10px */
    border-radius: 3.91vw; /* 40px */
    background: #0000E9;
    color: #FFF;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

.loyalty-programm-more:hover {
    background: #FFFFFF;
    color: #0000E9 !important;
    border: 0.098vw solid #0000E9; /* 1px */
    text-decoration: none;
}
  /* Если используются состояния visited/focus */
.loyalty-programm-more:visited,
.loyalty-programm-more:focus,
.loyalty-programm-more:active {
  color: #fff;
  text-decoration: none;
}


  .arrow-loyalty {
    display: none;
  }


}

@media (max-width: 375px) {
  .banner-loyalty {
    margin-top: 21.333vw; /* 16vw (60px/375*100) */
    height: 128vw;
}

/* Убираем наклоны для мобильной версии */
.banner-strip-top-loyalty,
.banner-strip-bottom-loyalty {
    display: none;
}

.loyalty-programm {
    width: 173.333vw;
    height: 128vw;
}

.loyalty-programm-header {
    width: 46.4vw;
    font-size: 6.4vw;
    letter-spacing: -0.128vw; /* -0.48px/375*100 */
}

.loyalty-programm-description {
    width: 94.666vw; /* 114.666vw (430px) */
    margin-top: 2.666vw; /* 5.333vw (20px) */
    font-size: 3.733vw;
    letter-spacing: -0.074vw; /* -0.28px/375*100 */
}

.loyalty-programm-more {
    margin-top: 5.333vw; /* 8vw (30px) */
    font-size: 3.733vw;
    letter-spacing: -0.074vw;
    width: 94.666vw;
    padding: 5.333vw 34.4vw;
    gap: 2.666vw;
    border-radius: 10.666vw;
}

.loyalty-programm-more:hover {
    border: 0.266vw solid #0000E9; /* 1px/375*100 */
}
  
}







/* Основной контейнер */
.personalities  {
  position: relative;
  width: 100%;
  margin-top: 9.375vw; /* 180/1920 */
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  gap: 2.083vw;
}

.personalities-header {
  position: relative;
  width: 88.5417vw; /* 1700px */
  height: 12.7604vw; /* 245px */
  display: flex;
  align-items: flex-end;
  justify-content: center; 
}


.personalities-header::before {
  content: '';
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: url('../images/team.svg') center/contain no-repeat;
  z-index: 0; /* Иконка под текстом */
  margin: 0; /* Убираем отступы у параграфа */
}
.personalities-header-text {
  font-family: 'Despair Display', sans-serif;
  font-weight: 700;
  font-size: 6.6667vw; /* 128px */
  line-height: 0.9;
  letter-spacing: -0.1333vw; /* -2.56px */
  text-transform: uppercase;
  display: inline-block;
  color: #000;
  margin-bottom: 0;
  height: 4.6875vw; /* 90px */
  margin-left: 0.3906vw; /* 7.5px */
  z-index: 1;
}

/* Сетка */
.personalities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.042vw; /* 20px */
  align-items: start;
}

/* Карточка */
.personality-card {
  position: relative;
  width: 14.063vw; /* 270px */
  text-decoration: none;
  overflow: hidden;
  display: flex;
  gap: 0.781vw; /* 15px */
  flex-direction: column;
}

.personality-card__image {
  width: 14.063vw; /* 270px */
  height: 18.75vw; /* 360px */
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
  background-image: var(--bg-url);
}

/* Информация */
.personality-info {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.26vw; /* ~5px */
}

.personality-name {
  color: #0A0A0A;
  font-family: "Inter";
  font-size: 1.042vw; /* 20px */
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: -0.021vw; /* -0.4px */
  text-transform: uppercase;
}

.personality-role {
  color: #999;
  font-family: "Inter";
  font-size: 0.938vw; /* 18px */
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.019vw; /* -0.36px */
}

/* Заглушка */
.personality-placeholder {
  width: 14.063vw; /* 270px */
  height: 0;
}


@media (max-width: 1024px) {
  .personalities-header {
    width: 96.09vw; /* 984px (было 1700px) */
    height: 14.16vw; /* 145px (было 245px) */
    margin-left: 0;
  }
  
  .personalities-header-text {
    font-size: 6.25vw; /* 64px (было 128px) */
    height: 4.39vw; /* 45px (было 90px) */
    margin: 0 auto;
  }
          /* Основной контейнер */
.personalities {
  margin-top: 9.765625vw; /* 180/1920 */
  gap: 2.929vw;
}
 /* Контейнер с карточками */
.personalities-grid {
  display: flex;
  grid-template-columns: unset;
  gap: 1.46vw; /* 15px */
  padding-left: 1.95vw; /* 20px */
  padding-right: 1.95vw;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
}

.products-container-bestseller::-webkit-scrollbar {
  display: none;
}

/* Карточка */
.personality-card {
  width: 26.37vw; /* 270px */
  gap: 0.98vw; /* 10px */
  flex: 0 0 26.37vw; /* 270px */
}

.personality-card__image {
  width: 26.37vw; /* 270px */
  height: 35.16vw; /* 360px */
}

/* Информация */
.personality-info {
  gap: 0.49vw; /* 5px */
}

.personality-name {
  font-size: 1.37vw; /* 14px */
  letter-spacing: -0.03vw; /* -0.28px */
}

.personality-role {
  font-size: 1.37vw; /* 14px */
  letter-spacing: -0.03vw; /* -0.28px */
}

/* Заглушка */
.personality-placeholder {
  display: none;
}


}


@media (max-width: 375px) {
      /* Заголовок */
      .personality-header {
        width: 94.667vw;
        height: 14.667vw;
        margin: 0 auto;
    }

    .personality-header-text {
        font-size: 6.4vw;
        height: 4.533vw;
        margin: 0 auto;
    }

      /* Основной контейнер */
.personality  {
  margin-top: 21.33333vw; /* 180/1920 */
  gap: 5.333333333333333vw;
}

  /* Контейнер с карточками */
  .personalities-grid {
    gap: 2.666666666666667vw; /* 20/1920 */
    padding-left: 2.666666666666667vw; /* 100/1920 */
    padding-right: 2.666666666666667vw;
  }


/* Карточка */
.personality-card {
  width: 78.4vw; /* 294px/375*100 */
  gap: 1.867vw; /* 2.667vw (10px) */
  flex: 0 0 78.4vw; /* 72vw (270px) */
}

.personality-card__image {
  width: 78.4vw;
  height: 94.666vw; /* 355px/375*100 */
}

/* Информация */
.personality-info {
  gap: 1.333vw; /* 5px/375*100 */
}

.personality-name {
  font-size: 3.733vw; /* 14px/375*100 */
  letter-spacing: -0.075vw; /* -0.28px/375*100 */
}

.personality-role {
  font-size: 3.733vw;
  letter-spacing: -0.075vw;
}

}

.certificates-loyalty{
  margin-top: 9.375vw;
  width: 89.58333vw;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  gap: 2.08333vw;
}
.certificates-heading{
  display: flex;
  width: 100%;
}

.certificates-heading-text{
  color:  #0A0A0A;
  font-family: "Despair Display";
  font-size: 3.33333vw;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 3.33333vw */
  letter-spacing: -0.06667vw;
  text-transform: uppercase;
}

.certificates-heading-about{
  width: 29.16667vw;
  color:  #0A0A0A;
  font-family: "Inter";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 1.03125vw */
  letter-spacing: -0.01875vw;
  margin-right: 15.10417vw;
  margin-left: auto;
}

.certificates-png{
  gap: 1.04167vw;
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  position: relative;
  width: 89.58333vw;
}

.certificates-card-number{
  margin-top: 2.08333vw;
  margin-left: 2.08333vw;
  color:  #0A0A0A;
  font-family: "Despair Display";
  font-size: 1.66667vw;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 1.66667vw */
  text-transform: uppercase;
}
.certificates-card-text-group{
  position: absolute;
  left: 50%;
  top: 13.33333vw;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.04167vw;
}

/* Добавляем плавность для фона */
.certificates-card-png {
  width: 44.27083vw;
  height: 28.125vw;
  aspect-ratio: 85/54;
  background: url('../images/gift_2.png') lightgray 50% / cover no-repeat;
  position: relative;
  transition: background-image 0.5s ease; /* Плавная смена фона */
}

.certificates-card-png:hover {
  background: url('../images/gift_1.png') lightgray 50% / cover no-repeat;
}

/* Плавное появление кнопки */
.design-link {
  border: none;
  display: none;
  padding: 0.41667vw 1.30208vw;
  justify-content: center;
  align-items: center;
  gap: 0.52083vw;
  border-radius: 2.08333vw;
  background: #0000E9;
  color: #FFF;
  font-family: "Inter";
  font-size: 1.04167vw;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: -0.02083vw;
  text-transform: uppercase;
  opacity: 0; /* Начальная прозрачность */
  transform: translateY(1.04167vw); /* Начальное смещение */
  transition: 
    opacity 0.4s ease,
    transform 0.4s ease,
    background 0.3s ease,
    color 0.3s ease,
    border 0.3s ease; /* Анимации для всех свойств */
}

.certificates-card-png:hover .design-link {
  display: flex; /* Показываем кнопку */
  opacity: 1; /* Конечная прозрачность */
  transform: translateY(0); /* Возвращаем на место */
}

.design-link:hover {
  background: #FFF;
  color: #0000E9;
  border: 0.05208vw solid #0000E9;
}

/* Плавность для текста (опционально) */
.certificates-card-text {
  color: #0A0A0A;
  text-align: center;
  font-family: "Despair Display";
  font-size: 2.08333vw;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.04167vw;
  text-transform: uppercase;
  width: 21.875vw;
  transition: transform 0.4s ease, color 0.4s ease; /* Анимация текста */
}
.certificates-about-heading.tablet{
  display: none;
}

@media (max-width: 1024px) {
  .certificates-loyalty{
    margin-top: 9.76562vw;
    width: 96.09375vw;
    gap: 2.92969vw;
  }
  
  .certificates-heading-text{
    font-size: 3.125vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 3.125vw */
    letter-spacing: -0.0625vw;
    text-transform: uppercase;
  }
  
  .certificates-heading-about{
    width: 44.04297vw;
    font-size: 1.36719vw;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 1.64062vw */
    letter-spacing: -0.02734vw;
    margin-right: 3.32031vw;
    margin-left: auto;
  }
  .certificates-png{
    gap: 1.46484vw;
    width: 95.99609vw;
  }

  .certificates-card-number{
    margin-top: 1.95312vw;
    margin-left: 1.95312vw;
    font-size: 1.95312vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 1.95312vw */
    text-transform: uppercase;
  }
  .certificates-card-text-group{
    top: 14.35547vw;
    gap: 0.97656vw;
  }

  /* Добавляем плавность для фона */
.certificates-card-png {
    width: 47.26562vw;
    height: 30.27344vw;
    aspect-ratio: 242/155;
    background: url('../images/gift_1.png') lightgray 0vw -0.00117vw / 100.826% 100.008% no-repeat;
  }
  
  .certificates-card-png:hover {
    background: url('../images/gift_1.png') lightgray 0vw -0.00117vw / 100.826% 100.008% no-repeat;
  }
  
  /* Плавное появление кнопки */
  .design-link {
    display: flex;
    padding: 0.97656vw  2.44141vw;
    border-radius: 3.90625vw;
    font-size: 1.36719vw;
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 1.50391vw */
    letter-spacing: -0.02734vw;
    text-transform: uppercase;
    opacity: 1; /* Начальная прозрачность */
  }
  
  .design-link:hover {
    background: #FFF;
    color: #0000E9;
    border: 0.09766vw solid #0000E9;
  }
  
  /* Плавность для текста (опционально) */
  .certificates-card-text {
    font-size: 2.34375vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 2.34375vw */
    letter-spacing: -0.04688vw;
    text-transform: uppercase;
    width: 23.4375vw;
  }

}

@media (max-width: 375px) {
  .certificates-loyalty{
    margin-top: 21.33333vw;
    width: 94.66667vw;
    gap: 5.33333vw;
  }
  .certificates-heading{
    flex-direction: column;
    gap: 2.66667vw;
  }
  .certificates-heading-text{
    font-size: 6.4vw;
    font-style: normal;
    font-weight: 700;
    line-height: 90%; /* 5.76vw */
    letter-spacing: -0.128vw;
    text-transform: uppercase;
  }
  
  .certificates-heading-about{
    width: 94.66667vw;
    font-size: 3.73333vw;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 4.48vw */
    letter-spacing: -0.07467vw;
    margin-right: auto;
    margin-left: auto;
  }
  .certificates-png{
    gap: 4vw;
    width: 100%;
    flex-direction: column;
  }

  .certificates-card-number{
    margin-top: 4vw;
    margin-left: 4vw;
    font-size: 3.2vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 3.2vw */
    text-transform: uppercase;
  }
  .certificates-card-text-group{
    top: 28.8vw;
    gap: 2.66667vw;
  }

  /* Добавляем плавность для фона */
.certificates-card-png {
    width: 94.66667vw;
    height: 64vw;
    background: url('../images/gift_1.png') lightgray 0vw -0.0024vw / 100.826% 100.008% no-repeat;
  }
  
  .certificates-card-png:hover {
    background: url('../images/gift_1.png') lightgray 0vw -0.0024vw / 100.826% 100.008% no-repeat;
  }
  
  /* Плавное появление кнопки */
  .design-link {
    padding:  2.66667vw 6.66667vw;
    border-radius: 10.66667vw;
    font-size: 3.73333vw;
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 4.10667vw */
    letter-spacing: -0.07467vw;
    text-transform: uppercase;
    opacity: 1; /* Начальная прозрачность */
    white-space: nowrap;
  }
  
  .design-link:hover {
    border: 0.26667vw solid #0000E9;
  }
  
  /* Плавность для текста (опционально) */
  .certificates-card-text {
    font-size: 5.33333vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 5.33333vw */
    letter-spacing: -0.10667vw;
    text-transform: uppercase;
    width: 66.66667vw;
  }
}

.application-section{
  margin: 0 auto;
  margin-top: 9.375vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  width: 80.20833vw;
}

.application-heading{
  color: #0A0A0A;
  font-family: "Despair Display";
  font-size: 10.41667vw;
  font-style: normal;
  font-weight: 700;
  line-height: 80%; /* 8.33333vw */
  letter-spacing: -0.20833vw;
  text-transform: uppercase;
}
.application-groub-about{
  margin-top: 11.66667vw;
  display: flex;
  gap: 18.22917vw;
}
.application-about{
  color: #0A0A0A;
  /* Desktop/Text/Text Small */
  font-family: "Inter";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 1.03125vw */
  letter-spacing: -0.01875vw;
  width: 19.0625vw;
}
.application-about.about-1{
  text-align: right;
}
.application-about.about-2{
  text-align: left;
}
.application-ending{
  margin-top: 11.61458vw;
  color:  #0A0A0A;
  /* Desktop/Headlines/H1 */
  font-family: "Despair Display";
  font-size: 10.41667vw;
  font-style: normal;
  font-weight: 700;
  line-height: 80%; /* 8.33333vw */
  letter-spacing: -0.20833vw;
  text-transform: uppercase;
}
.application-button{
  margin-top: 2.08333vw;
  display: flex;
  gap: 1.04167vw;
}
.application-png{
  top: 3.64583vw;
  position: absolute;
  z-index: 1;
  display: flex;
  width: 16.14583vw;
  height: 32.65625vw;
  flex-shrink: 0;
  aspect-ratio: 310/627;
  background: url('../images/telephon.png') center/contain no-repeat;
}
/*app_bonus.png*/
.application-app-bonus-png::before {
  content: '';
  position: absolute;
  width: 8.85417vw;
  height: 8.85417vw;
  left: 43.75vw;
  top: 23.02083vw;
  background: url('../images/app_bonus.png') center/contain no-repeat;
  animation: rotate var(--sticker-animation-speed, 10s) linear infinite;
  z-index: 2;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1024px) {
  .application-section{
    margin-top: 9.76562vw;
    width: 80.76172vw;
  }
  
  .application-heading{
    font-size: 9.375vw;
    font-style: normal;
    font-weight: 700;
    line-height: 80%; /* 7.5vw */
    letter-spacing: -0.1875vw;
    text-transform: uppercase;
  }
  .application-groub-about{
    margin-top: 18.16406vw;
    gap: 25.78125vw;
  }
  .application-about{
    font-size: 1.36719vw;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 1.64062vw */
    letter-spacing: -0.02734vw;
    width: 27.34375vw;
  }

  .application-ending{
    margin-top: 18.35938vw;
    font-size: 9.375vw;
    font-style: normal;
    font-weight: 700;
    line-height: 80%; /* 7.5vw */
    letter-spacing: -0.1875vw;
    text-transform: uppercase;
  }
  .application-button{
    margin-top: 2.92969vw;
    gap: 1.46484vw;
  }
  .application-png{
    top: 3.22266vw;
    width: 22.85156vw;
    height: 46.38672vw;
  }
  .application-app-bonus-png::before {
    width: 14.64844vw;
    height: 14.64844vw;
    left: 44.33594vw;
    top: 30.07812vw;
  }
  
}

@media (max-width: 375px) {
  .application-section{
    margin-top: 21.33333vw;
    width: 94.66667vw;
  }
  
  .application-heading{
    font-size: 10.66667vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 10.66667vw */
    letter-spacing: -0.21333vw;
    text-transform: uppercase;
  }
  .application-groub-about{
    margin-top: 0vw;
    flex-direction: column;
    gap: 64vw;
  }
  .application-about{
    font-size: 3.73333vw;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 4.48vw */
    letter-spacing: -0.07467vw;
    width: 77.06667vw;
  }

  .application-about.about-1{
    text-align: center;
  }
  .application-about.about-2{
    text-align: center;
  }
  .application-ending{
    margin-top: 2.66667vw;
    font-size: 10.66667vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 10.66667vw */
    letter-spacing: -0.21333vw;
    text-transform: uppercase;
  }
  .application-button{
    margin-top: 5.33333vw;
    gap: 5.33333vw;
    flex-direction: column;
  }
  .application-png{
    top: 20vw;
    width: 29.6vw;
    height: 60.26667vw;
  }
  .application-app-bonus-png::before {
    width: 21.33333vw;
    height: 21.33333vw;
    left: 51.46667vw;
    top: 51.2vw;
  }
  
}

.salons {
  position: relative;
  width: 100%;
  margin-top: 9.375vw; /* 180/1920 */
}

/* Заголовок секции */
.salons-header {
  padding-left: 5.208vw; /* 100/1920 */
  width: 89.583vw; /* 1720/1920 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.083vw; /* 40/1920 */
  color: var(--Black-Black-Basic, #0A0A0A);
  font-family: "Despair Display";
  font-size: 3.33333vw;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 3.33333vw */
  letter-spacing: -0.06667vw;
  text-transform: uppercase;
}

/* Контейнер с карточками */
.salons-container {
  display: flex;
  gap: 1.042vw; /* 20/1920 */
  padding-left: 5.208vw; /* 100/1920 */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.salons-container::-webkit-scrollbar {
  display: none;
}

.salon-card{
  width: 29.16667vw;
  height: 38.90625vw;
  padding: 2.08333vw;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.salon-card__title{
  color: var(--Black-Black-Basic, #0A0A0A);
  /* Desktop/Card Text/Tables Headline */
  font-family: "Despair Display";
  font-size: 1.66667vw;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 1.66667vw */
  text-transform: uppercase;
  white-space: pre-line;
}

.salon-card__about{
    display: flex;
    flex-direction: column;
    margin-top: 1.04167vw;
}

.salon-card__about-txt{
  width: 13.02083vw;
  color: var(--Black-Black-Basic, #0A0A0A);
  font-family: "Inter";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 1.03125vw */
  letter-spacing: -0.01875vw;
}

.salon-card__map-link{
  display: flex;
  gap: 0.78125vw;
  margin-top: 1.5625vw;
  color: var(--Black-Black-Basic, #0A0A0A);
  font-family: "Inter";
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 1.375vw */
  letter-spacing: -0.025vw;
  text-transform: uppercase;
}
.salon-card__map-link:hover {
  /* Убираем все изменения при наведении */
  color: #0000E9;
  text-decoration: none ;
}
.arrow-icon{
  width: 1.458vw; /* 28/1920 */
  height: 1.458vw; /* 28/1920 */
  background-image: url('../images/arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  filter: invert(100%);
}
.salon-card__map-link:hover .arrow-icon {
      filter: 
    brightness(0) 
    invert(10%) 
    sepia(100%) 
    saturate(5000%) 
    hue-rotate(247deg) 
    brightness(94%) 
    contrast(143%);
}
.salon-card__image{
  position: relative;
  margin-top: 1.5625vw;
  width: 25vw;
  height: 16.66667vw;
}

.salon-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--bg-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    transform: scale(1);
    z-index: 0;
    width: 100%;
    height: 100%;
}

.salon-card__book-button{
  margin-top: 1.5625vw;
  border-radius:  2.08333vw;
  background:  #0000E9;
  display: flex;
  padding:  1.30208vw 6.71875vw;
  justify-content: center;
  align-items: center;
  gap: 0.52083vw;
  align-self: stretch;
  color:  #FFF;
  font-family: "Inter";
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 1.03125vw */
  letter-spacing: -0.01875vw;
  text-transform: uppercase;
  border: 0.05208vw solid #0000E9;
}

.salon-card__book-button:hover {
  background: #FFF;
  color: #0000E9;
}

@media (max-width: 1024px) {
  /* Основной контейнер */
  .salons {
    margin-top: 9.766vw; /* 100/1024 */
    /*height: 42.1875vw;*/
  }

  /* Заголовок секции */
  .salons-header {
    padding-left: 1.953vw; /* 20/1024 */
    width: 1.953vw; /* 984/1024 */
    margin-bottom: 2.93vw; /* 30/1024 */
    font-size: 3.125vw; /* 32/1024 */
  }

  /* Контейнер с карточками */
  .salons-container {
    gap: 1.465vw; /* 15/1024 */
    padding-left: 1.953vw; /* 20/1024 */
  }

  .salon-card{
  width: 31.05469vw;
  height: 47.36328vw;
  padding: 1.95312vw;
}

.salon-card__title{
font-size: 1.95312vw;
width: 27.83203vw;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 1.95312vw */
text-transform: uppercase;
}

.salon-card__about{

  margin-top: 0.97656vw;
}

.salon-card__about-txt{
  width: 24.41406vw;
  font-size: 1.36719vw;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 1.64062vw */
  letter-spacing: -0.02734vw;
}

.salon-card__map-link{
  margin-top: 1.46484vw;
  border-radius:  3.90625vw;

  display: flex;
  padding:  1.95312vw 12.59766vw;
  justify-content: center;
  align-items: center;
  align-self: stretch;

  font-family: "Inter";
  font-size: 1.36719vw;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 1.03125vw */
  letter-spacing: -0.01875vw;
  text-transform: uppercase;
  border: 0.09766vw solid #0000E9;
  white-space: nowrap;
  order: 1;
  background:  #0000E9;
  color:  #FFF;
}

.salon-card__map-link:hover {
  background: #FFF;
  color: #0000E9;
}


.arrow-icon{
  display: none;
}

.salon-card__image{
  margin-top: 1.46484vw;
  width: 27.14844vw;
  height: 18.06641vw;
}


.salon-card__book-button{
  margin-top: 1.46484vw;
  border-radius:  3.90625vw;
  padding:  1.95312vw 12.59766vw;
  font-size: 1.36719vw;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 1.03125vw */
  letter-spacing: -0.01875vw;
  border: 0.09766vw solid #0000E9;
  order: 2;
}

  
}

@media (max-width: 375px) {
  /* Основной контейнер */
  .salons {
    margin-top: 21.333vw; /* 80/375 */
  }

  /* Заголовок секции */
  .salons-header {
    padding-left: 2.667vw; /* 10/375 */
    width: 0.521vw; /* 1.953/375 */
    margin-bottom: 5.333vw; /* 20/375 */
    font-size: 6.4vw; /* 24/375 */
  }

  /* Контейнер с карточками */
  .salons-container {
    gap: 2.667vw; /* 10/375 */
    padding-left: 2.667vw; /* 10/375 */
  }
  .salon-card{
  width: 78.4vw;
  height: 129.33333vw;
  padding: 5.33333vw;
}

.salon-card__title{
  font-size: 4.8vw;
  width: 76vw;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 5.33333vw */
  text-transform: uppercase;
}

.salon-card__about{
  margin-top: 1.86667vw;
}

.salon-card__about-txt{
  width: 66.66667vw;
  font-size: 3.73333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 4.48vw */
  letter-spacing: -0.07467vw;
}

.salon-card__map-link{
  margin-top: 3.2vw;
  border-radius:  10.66667vw;
  padding:  5.33333vw 34.4vw;
  font-size: 3.73333vw;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 1.03125vw */
  letter-spacing: -0.01875vw;
  text-transform: uppercase;
  border: 0.26667vw solid #0000E9;
}


.salon-card__image{
  margin-top: 3.2vw;
  width: 70.4vw;
  height: 46.66667vw;
}


.salon-card__book-button{
  margin-top: 3.2vw;
  border-radius:  10.66667vw;
  padding:  5.33333vw 34.4vw;
  font-size: 3.73333vw;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 1.03125vw */
  letter-spacing: -0.01875vw;
  border: 0.26667vw solid #0000E9;
  order: 2;
}

}