.about-section {
  position: relative;              /* чтобы псевдоэлемент был внутри */
  padding: 80px 20px;
  background-color: #0a0a23;       /* тёмный основной фон */
  color: white;
  font-family: 'Manrope', sans-serif;
  overflow: hidden;                /* чтобы треугольник не вылезал */
}



.questions {
  display: flex;
  justify-content: center;      /* Центруем всё */
  gap: 80px;                    /* Меньше расстояние между блоками */
  margin-bottom: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  flex-wrap: nowrap;              /* Чтобы не вылезали */
}
.question-box {
  display: flex;
  align-items: center; /* выравнивание по вертикали */
  justify-content: center; /* выравнивание по горизонтали */
  text-align: center;
  padding: 10px 16px;
  border: 2px solid #FFD600;
  border-radius: 16px;
  background-color: #161633;
  box-shadow: 0 0 10px rgba(255, 214, 0, 0.3);
  width: 100%;
  max-width: 330px;
  height: 100px; /* фиксируем высоту для одинаковости */
  font-weight: 700;
  font-size: 18px;
}

.question {
  padding: 20px;
  border: 2px solid #FFD700;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
  transition: transform 0.3s ease;
  max-width: 260px;             /* Ограничим ширину */
  flex: 0 0 auto;               /* Не даём растягиваться */
}

.question:hover {
  transform: translateY(-5px);     /* лёгкое поднятие при наведении */
}

.about-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.about-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.6;
}

.about-photo img {
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  text-align: center;
  font-size: 16px;
}

.stat strong {
  font-size: 28px;
  background: linear-gradient(90deg, #ffffff, #FFD600, #ffffff);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradientFlow 4s linear infinite alternate;
}

/* Анимация при скролле */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.questions,
.about-content,
.stats {
  position: relative;
  z-index: 1;
}

.about-photo img {
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.about-wrapper {
  max-width: 1220px; /* подгони под ширину всей группы question-box */
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Контейнер текста и фоток: расположим их в строку */
.about-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

/* Текстовая часть — примерно половина */
.about-text {
  flex: 1 1 50%;
  min-width: 300px;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}

@media (max-width: 768px) {
  .questions {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden; /* важно, чтобы не дёргало вверх */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; /* именно smooth обеспечивает плавность */
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    scroll-padding: 0 16px;
  }

  .question-box {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
  }

  .about-text {
    text-align: justify;
  }
}

@media (max-width: 768px) {
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
    justify-items: center;
  }

  .stat {
    width: 100%;
  }


}