@charset "UTF-8";
/**
  Нормализация блочной модели
 */
*,
::before,
::after {
  box-sizing: border-box;
}

/**
  Убираем внутренние отступы слева тегам списков,
  у которых есть атрибут class
 */
:where(ul, ol):where([class]) {
  padding-left: 0;
}

/**
  Убираем внешние отступы body и двум другим тегам,
  у которых есть атрибут class
 */
body,
:where(blockquote, figure):where([class]) {
  margin: 0;
}

/**
  Убираем внешние отступы вертикали нужным тегам,
  у которых есть атрибут class
 */
:where(h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl):where([class]) {
  margin-block: 0;
}

:where(dd[class]) {
  margin-left: 0;
}

:where(fieldset[class]) {
  margin-left: 0;
  padding: 0;
  border: none;
}

/**
  Убираем стандартный маркер маркированному списку,
  у которого есть атрибут class
 */
:where(ul[class]) {
  list-style: none;
}

:where(address[class]) {
  font-style: normal;
}

/**
  Обнуляем вертикальные внешние отступы параграфа,
  объявляем локальную переменную для внешнего отступа вниз,
  чтобы избежать взаимодействие с более сложным селектором
 */
p {
  --paragraphMarginBottom: 14px;
  margin-block: 0;
}

/**
  Внешний отступ вниз для параграфа без атрибута class,
  который расположен не последним среди своих соседних элементов
 */
p:where(:not([class]):not(:last-child)) {
  margin-bottom: var(--paragraphMarginBottom);
}

/**
  Упрощаем работу с изображениями и видео
 */
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/**
  Наследуем свойства шрифт для полей ввода
 */
input,
textarea,
select,
button {
  font: inherit;
}

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  color: #000; /* Укажите нужный цвет текста */
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

html {
  /**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
   */
  height: 100%;
  /**
    Убираем скачок интерфейса по горизонтали
    при появлении / исчезновении скроллбара
   */
  scrollbar-gutter: stable;
}

/**
  Плавный скролл
 */
html,
:has(:target) {
  scroll-behavior: smooth;
}

body {
  /**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
   */
  min-height: 100%;
  /**
    Унифицированный интерлиньяж
   */
  line-height: 1.5;
}

/**
  Нормализация высоты элемента ссылки при его инспектировании в DevTools
 */
a:where([class]) {
  display: inline-flex;
}

/**
  Курсор-рука при наведении на элемент
 */
button,
label {
  cursor: pointer;
}

/**
  Приводим к единому цвету svg-элементы
  (за исключением тех, у которых уже указан
  атрибут fill со значением 'none' или начинается с 'url')
 */
:where([fill]:not([fill=none],
[fill^=url])) {
  fill: currentColor;
}

/**
  Приводим к единому цвету svg-элементы
  (за исключением тех, у которых уже указан
  атрибут stroke со значением 'none')
 */
:where([stroke]:not([stroke=none])) {
  stroke: currentColor;
}

/**
  Чиним баг задержки смены цвета при взаимодействии с svg-элементами
 */
svg * {
  transition-property: fill, stroke;
}

/**
  Приведение рамок таблиц в классический 'collapse' вид
 */
:where(table) {
  border-collapse: collapse;
  border-color: currentColor;
}

/**
  Удаляем все анимации и переходы для людей,
  которые предпочитают их не использовать
 */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: get-vw(16px, 1440);
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 1.1111111111vw;
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
@media screen and (min-width: 650px) {
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1.875vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }
  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header__logo {
    width: 4.4444444444vw;
    height: 0.9722222222vw;
  }
  .header__sber {
    width: 11.25vw;
    height: 1.875vw;
    text-decoration: none;
    cursor: default;
  }
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 1.1111111111vw;
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
@media screen and (min-width: 650px) {
  .section__start {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  .section__start .hero-bg {
    position: absolute;
    z-index: -1;
  }
  .section__start .hero {
    display: flex;
    justify-content: space-between;
    align-items: start;
    -moz-column-gap: 3.125vw;
         column-gap: 3.125vw;
  }
  .section__start .hero__img {
    width: 43.6805555556vw;
    height: 44.6527777778vw;
  }
  .section__start .hero__body {
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 2.4305555556vw;
    max-width: 45.4861111111vw;
    padding-top: 6.3888888889vw;
  }
  .section__start .hero__test {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10.0694444444vw;
    height: 3.8888888889vw;
    text-transform: uppercase;
    font-size: 1.875vw;
    color: var(--color-grean);
    font-weight: 400;
    border: 0.1388888889vw solid var(--color-grean);
    border-radius: 3.9583333333vw;
  }
  .section__start .hero__title {
    font-size: 3.3333333333vw;
    font-weight: 500;
  }
  .section__start .start__info {
    position: absolute;
    bottom: 1.3888888889vw;
    right: 1.3888888889vw;
    z-index: 100;
  }
  .section__start .start__info .info-container {
    position: relative;
    display: inline-block;
  }
  .section__start .start__info .info-container .start__info-btn {
    width: 1.3888888889vw;
    height: 1.3888888889vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .section__start .start__info .info-container .start__info-btn svg {
    width: 100%;
    height: 100%;
  }
  .section__start .start__info .info-container .start__info-block {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    left: -12.5vw;
    top: -2.4305555556vw;
    transform: translateY(-50%);
    width: 12.1527777778vw;
    height: auto;
    background-color: #fff;
    padding: 0.4861111111vw;
    font-size: 0.625vw;
    color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 0.6944444444vw;
  }
  .section__start .start__info .info-container .start__info-block.show {
    opacity: 0.9;
    visibility: visible;
  }
}
@media screen and (min-width: 650px) {
  .section__test {
    display: none;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  .section__test .test-bg {
    position: absolute;
    z-index: -1;
    width: 100vw; /* Растянуть по ширине контейнера */
    height: 114vh; /* Автоматически подобрать высоту */
  }
  .section__test .container__test {
    width: 93.125vw;
    position: relative;
  }
  .section__test .container__test .test {
    display: none;
    justify-content: space-between;
    align-items: center;
  }
  .section__test .container__test .test__body {
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 3.1944444444vw;
    max-width: 43.9583333333vw;
  }
  .section__test .container__test .test__body_mini {
    row-gap: 2.4305555556vw;
  }
  .section__test .container__test .test__body_mini {
    row-gap: 2.4305555556vw;
  }
  .section__test .container__test .test__body_small {
    row-gap: 3.4722222222vw;
  }
  .section__test .container__test .test__img {
    width: 49.1666666667vw;
    height: 49.5138888889vw;
    position: relative;
  }
  .section__test .container__test .test__number {
    color: var(--color-gray);
  }
  .section__test .container__test .test__number_one {
    margin-bottom: -1.3888888889vw;
  }
  .section__test .container__test .test__text {
    font-size: 1.3888888889vw;
  }
  .section__test .container__test .test__text span {
    font-weight: 700;
  }
  .section__test .container__test .test__question {
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 1.3888888889vw;
  }
  .section__test .container__test .test__button_four {
    margin-top: 0.6944444444vw;
  }
  .section__test .container__test .test__answer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 41.3194444444vw;
    min-height: 4.1666666667vw;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease;
    /* Когда кнопка активирована */
    /* Правильный ответ */
    /* Неправильный ответ */
    /* Блокировка */
  }
  .section__test .container__test .test__answer .num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.0972222222vw;
    height: 4.0972222222vw;
    background: var(--color-gray);
    border-radius: 50%;
    color: var(--color-ligth);
    font-size: 2.0833333333vw;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .section__test .container__test .test__answer button {
    width: 31.875vw;
    height: auto;
    border: 0.1388888889vw solid var(--color-gray);
    border-radius: 4.5138888889vw;
    padding: 0.6944444444vw 2.7083333333vw 0.6944444444vw 2.0138888889vw;
    background: inherit;
  }
  .section__test .container__test .test__answer button .text {
    max-width: 27.0833333333vw;
  }
  .section__test .container__test .test__answer button .text-content {
    text-align: start;
    font-size: 0.7986111111vw;
    border-top: 0.0694444444vw solid #fff;
    margin-top: 0.625vw;
    padding-top: 0.625vw;
    color: #fff;
    opacity: 0;
    transition: background-color 1s ease-out opacity 1s ease-out; /* Плавное изменение фона */
  }
  .section__test .container__test .test__answer button.active .text-content {
    opacity: 1; /* Плавно отображается */
    transform: translateY(0); /* Плавно появляется сверху */
    color: #fff; /* Белый текст при активации */
  }
  .section__test .container__test .test__answer button.active {
    border-radius: 2.0833333333vw;
    opacity: 1;
    color: #fff;
    border: none;
    transition: background-color 1s ease-out; /* Плавное изменение фона */
  }
  .section__test .container__test .test__answer .correct {
    background-color: var(--color-grean);
    color: var(--color-ligth);
  }
  .section__test .container__test .test__answer .correct .num {
    background-color: var(--color-grean); /* Кружок правильного ответа */
  }
  .section__test .container__test .test__answer .incorrect {
    background-color: var(--color-malina);
    color: var(--color-ligth);
  }
  .section__test .container__test .test__answer .incorrect .num {
    background-color: var(--color-malina); /* Кружок неправильного ответа */
  }
  .section__test .container__test .test__answer .disabled {
    pointer-events: none;
    opacity: 1; /* Блокируем кнопки и делаем их полупрозрачными */
  }
  .section__test .container__test .test .test__answer_katan button {
    padding: 1.25vw 2.7083333333vw 1.25vw 2.0138888889vw;
  }
  .section__test .container__test .test .test__answer.selected {
    align-items: flex-start;
  }
  .section__test .container__test .test .magic {
    position: absolute;
    top: 0;
    left: 4.5138888889vw;
    width: 40.1388888889vw;
  }
  .section__test .container__test .test .answer__true {
    position: relative;
    opacity: 1 !important;
    z-index: 99;
  }
  .section__test .container__test .test .test__img-movie {
    animation: fadeIn 1s ease-in forwards; /* Время и тип анимации */
  }
  .section__test .container__test .test .test__img-animation {
    display: none;
    width: 39.4444444444vw;
    height: 40.9027777778vw;
    position: absolute;
    top: 4.1666666667vw;
    right: 4.1666666667vw;
    left: 0;
    bottom: 0;
    z-index: 10;
    opacity: 0;
    transform: scale(0);
    animation: image-scale 0.8s ease-out forwards; /* Анимация появления */
    animation-delay: 0.3s;
  }
  .section__test .container__test .test .test__img-confity {
    display: none;
    width: 45.5555555556vw;
    height: 43.4722222222vw;
    position: absolute;
    top: 1.3888888889vw;
    right: 0;
    left: 2.0833333333vw;
    bottom: 0;
    z-index: 5;
    opacity: 0;
    transform: scale(0);
    animation: confetti-scale 1.2s ease-out 0.8s forwards;
  }
  .section__test .container__test .test .test__img-animation1 {
    width: 30.2777777778vw;
    height: 32.4305555556vw;
    top: 6.25vw;
    left: 8.3333333333vw;
  }
  .section__test .container__test .test .test__img-animation1 img {
    transform: rotate(10deg);
  }
  .section__test .container__test .test .test__img-animation2 {
    width: 30.9722222222vw;
    height: 27.7777777778vw;
    top: 9.0277777778vw;
    left: 8.3333333333vw;
  }
  .section__test .container__test .test .test__img-animation3 {
    width: 30.9722222222vw;
    height: 31.1111111111vw;
    top: 9.0277777778vw;
    left: 8.3333333333vw;
  }
  .section__test .container__test .test .test__img-animation4 {
    width: 35.2777777778vw;
    height: 35.1388888889vw;
    top: 6.9444444444vw;
    left: 8.3333333333vw;
  }
  .section__test .container__test .test .test__img-animation5 {
    width: 31.1111111111vw;
    height: 33.75vw;
    top: 9.0277777778vw;
    left: 8.3333333333vw;
  }
  .section__test .container__test .test .select {
    border-radius: 2.0833333333vw;
    color: var(--color-ligth);
  }
  .section__test .container__test .test__footer {
    position: absolute;
    bottom: 0;
    right: 4.8611111111vw;
    font-size: 0.6944444444vw;
    font-weight: 400;
  }
  .section__test .container__test .test.show {
    display: flex;
  }
  .section__test .test__info {
    position: absolute;
    bottom: 1.3888888889vw;
    right: 1.3888888889vw;
    z-index: 100;
  }
  .section__test .test__info .info-container {
    position: relative;
    display: inline-block;
  }
  .section__test .test__info .info-container .test__info-btn {
    width: 1.3888888889vw;
    height: 1.3888888889vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .section__test .test__info .info-container .test__info-btn svg {
    width: 100%;
    height: 100%;
  }
  .section__test .test__info .info-container .test__info-block {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    left: -12.5vw;
    top: -2.4305555556vw;
    transform: translateY(-50%);
    width: 12.1527777778vw;
    height: auto;
    background-color: #fff;
    padding: 0.4861111111vw;
    font-size: 0.625vw;
    color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 0.6944444444vw;
  }
  .section__test .test__info .info-container .test__info-block.show {
    opacity: 0.9;
    visibility: visible;
  }
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 1.1111111111vw;
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
@media screen and (min-width: 650px) {
  .section__result {
    display: none;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  .section__result .result-bg {
    position: absolute;
    z-index: -1;
  }
  .section__result .container__result {
    width: 93.125vw;
  }
  .section__result .container__result .section__body .result {
    display: none;
    justify-content: space-between;
    align-items: start;
  }
  .section__result .container__result .section__body .result__img {
    width: 49.3055555556vw;
    height: 49.5138888889vw;
  }
  .section__result .container__result .section__body .result__body {
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 2.0833333333vw;
    max-width: 43.9583333333vw;
    padding-top: 3.6805555556vw;
  }
  .section__result .container__result .section__body .result__cicle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 38.4722222222vw;
    margin-bottom: 1.0416666667vw;
  }
  .section__result .container__result .section__body .result__cicle-img {
    width: 6.7361111111vw;
    height: 6.7361111111vw;
  }
  .section__result .container__result .section__body .result__title {
    font-size: 3.3333333333vw;
    font-weight: 500;
  }
  .section__result .container__result .section__body .result__description {
    max-width: 43.9583333333vw;
  }
  .section__result .container__result .section__body .result__button {
    width: 14.5833333333vw;
  }
  .section__result .container__result .section__body .result__footer {
    width: 46.7361111111vw;
    font-size: 0.625vw;
    font-weight: 400;
    padding-top: 1.3194444444vw;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  .section__result .container__result .section__body .result__footer .result__info-qr {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .section__result .container__result .section__body .result__footer .result__info-qr .qr {
    width: 3.2638888889vw;
    height: 3.2638888889vw;
    margin-right: 0.4861111111vw;
  }
  .section__result .container__result .section__body .result__footer .result__info-qr .gr__text {
    width: 8.3333333333vw;
    font-size: 0.4861111111vw;
    font-weight: 400;
  }
  .section__result .container__result .section__body .result.show {
    display: flex;
  }
  .section__result .result__info {
    position: absolute;
    bottom: 1.3888888889vw;
    right: 1.3888888889vw;
  }
  .section__result .result__info .info-container {
    position: relative;
    display: inline-block;
  }
  .section__result .result__info .info-container .result__info-btn {
    width: 1.3888888889vw;
    height: 1.3888888889vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .section__result .result__info .info-container .result__info-btn svg {
    width: 100%;
    height: 100%;
  }
  .section__result .result__info .info-container .result__info-block {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    left: -12.5vw;
    top: -2.4305555556vw;
    transform: translateY(-50%);
    width: 12.1527777778vw;
    height: auto;
    background-color: #fff;
    padding: 0.4861111111vw;
    font-size: 0.625vw;
    color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 0.6944444444vw;
  }
  .section__result .result__info .info-container .result__info-block.show {
    opacity: 0.9;
    visibility: visible;
  }
  .item_mobile {
    display: none !important;
  }
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 1.1111111111vw;
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 1.1111111111vw;
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
@media screen and (max-width: 650px) {
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.87rem;
    position: relative;
    z-index: 99;
  }
  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header__logo {
    width: 3.6rem;
    height: 0.8rem;
  }
  .header__sber {
    width: 8.8rem;
    height: 1.5rem;
  }
  .header .container {
    width: 22.6rem;
  }
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 1.1111111111vw;
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
@media screen and (max-width: 650px) {
  .section__start {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
    color: #000000;
    position: relative;
    padding-bottom: 1.2rem;
  }
  .section__start .hero-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Растягиваем по ширине */
    height: 100%; /* Растягиваем по высоте */
    -o-object-fit: cover;
       object-fit: cover; /* Заполняет контейнер, сохраняя пропорции */
    z-index: -1; /* Отправляем изображение на задний план, если нужно */
  }
  .section__start .hero {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: row-reverse;
    flex-direction: column-reverse;
  }
  .section__start .hero__img {
    width: 20.5rem;
    height: 20.8rem;
    margin-left: 1rem;
    margin-top: 2rem;
  }
  .section__start .hero__body {
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 1rem;
    max-width: 22.4rem;
    margin-top: 2rem;
  }
  .section__start .hero__test {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.5rem;
    height: 2.1rem;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--color-grean);
    font-weight: 400;
    border: 0.12rem solid var(--color-grean);
    border-radius: 21rem;
  }
  .section__start .hero__title {
    width: 18rem;
    font-size: 1.3rem;
    font-weight: 500;
  }
  .section__start .hero__description {
    font-size: 0.75rem;
  }
  .section__start .hero__description p:where(:not([class]):not(:last-child)) {
    margin-bottom: 0.8rem;
  }
  .section__start .hero .button__grean {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--color-grean);
    color: var(--color-ligth);
    border: none;
    cursor: pointer;
    min-width: 14.1rem;
    height: 2.3rem;
    transition: var(--transition-duration);
    border-radius: 1.8rem;
    font-size: 0.8rem;
  }
  .section__start .start__info {
    position: absolute;
    bottom: 5.0890585242vw;
    right: 5.0890585242vw;
  }
  .section__start .start__info .info-container {
    position: relative;
    display: inline-block;
  }
  .section__start .start__info .info-container .start__info-btn {
    width: 7.3791348601vw;
    height: 7.3791348601vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .section__start .start__info .info-container .start__info-btn svg {
    width: 100%;
    height: 100%;
  }
  .section__start .start__info .info-container .start__info-block {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    left: -45.8015267176vw;
    top: -6.3613231552vw;
    transform: translateY(-50%);
    width: 44.5292620865vw;
    height: auto;
    background-color: #fff;
    padding: 1.7811704835vw;
    font-size: 2.2900763359vw;
    color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 2.5445292621vw;
  }
  .section__start .start__info .info-container .start__info-block.show {
    opacity: 0.9;
    visibility: visible;
  }
  .section__start .container {
    width: 22.6rem;
  }
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 1.1111111111vw;
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
@media screen and (max-width: 650px) {
  .section__test {
    display: none;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
    color: #000000;
    position: relative;
    padding-bottom: 1.4rem;
  }
  .section__test .test-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Растягиваем по ширине */
    height: 100%; /* Растягиваем по высоте */
    -o-object-fit: cover;
       object-fit: cover; /* Заполняет контейнер, сохраняя пропорции */
    z-index: -1; /* Отправляем изображение на задний план, если нужно */
  }
  .section__test .container__test {
    width: 22.6rem;
  }
  .section__test .container__test .test {
    display: none;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    margin-top: 2rem;
  }
  .section__test .container__test .test__body {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .section__test .container__test .test__img {
    width: 15.6rem;
    height: 15.8rem;
    position: relative;
    margin-bottom: 5.0890585242vw;
  }
  .section__test .container__test .test__number {
    font-size: 1rem;
    color: var(--color-gray);
    margin-bottom: 1.6rem;
  }
  .section__test .container__test .test__text {
    font-size: 0.87rem;
    margin-bottom: 2.1rem;
  }
  .section__test .container__test .test__text span {
    font-weight: 700;
  }
  .section__test .container__test .test__question {
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 0.55rem;
    margin-bottom: 1.8rem;
    width: 21.8rem;
    height: auto;
  }
  .section__test .container__test .test__answer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 22rem;
    min-height: 2.5rem;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease;
    /* Когда кнопка активирована */
    /* Правильный ответ */
    /* Неправильный ответ */
    /* Блокировка */
  }
  .section__test .container__test .test__answer .num {
    display: none;
    justify-content: center;
    align-items: center;
    width: 15.0127226463vw;
    height: 15.0127226463vw;
    background: var(--color-gray);
    border-radius: 50%;
    color: var(--color-ligth);
    font-size: 7.6335877863vw;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .section__test .container__test .test__answer button {
    width: 21rem;
    height: auto;
    border: 0.12rem solid var(--color-gray);
    border-radius: 4rem;
    padding: 0.5rem 1.6rem 0.5rem 1.1rem;
    background: inherit;
    font-size: 0.5rem;
  }
  .section__test .container__test .test__answer button .text {
    max-width: 16.5rem;
    font-size: 0.7rem;
  }
  .section__test .container__test .test__answer button .text-content {
    text-align: start;
    border-top: 0.2544529262vw solid #fff;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    color: #fff;
    font-size: 0.55rem;
    line-height: 1.1;
    opacity: 0;
    transition: background-color 1s ease-out opacity 1s ease-out; /* Плавное изменение фона */
  }
  .section__test .container__test .test__answer button.active .text-content {
    opacity: 1; /* Плавно отображается */
    transform: translateY(0); /* Плавно появляется сверху */
    color: #fff; /* Белый текст при активации */
  }
  .section__test .container__test .test__answer button.active {
    border-radius: 1.8rem;
    opacity: 1;
    color: #fff;
    border: none;
    transition: background-color 1s ease-out; /* Плавное изменение фона */
  }
  .section__test .container__test .test__answer .correct {
    background-color: var(--color-grean);
    color: var(--color-ligth);
  }
  .section__test .container__test .test__answer .correct .num {
    background-color: var(--color-grean); /* Кружок правильного ответа */
  }
  .section__test .container__test .test__answer .incorrect {
    background-color: var(--color-malina);
    color: var(--color-ligth);
  }
  .section__test .container__test .test__answer .incorrect .num {
    background-color: var(--color-malina); /* Кружок неправильного ответа */
  }
  .section__test .container__test .test__answer .disabled {
    pointer-events: none;
    opacity: 1; /* Блокируем кнопки и делаем их полупрозрачными */
  }
  .section__test .container__test .test .button__grey {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--color-gray);
    color: var(--color-ligth);
    border: none;
    cursor: pointer;
    min-width: 12.3rem;
    height: 2.3rem;
    transition: var(--transition-duration);
    border-radius: 1.8rem;
    font-size: 0.85rem;
    margin-bottom: 1.87rem;
  }
  .section__test .container__test .test .test__answer.selected {
    align-items: flex-start;
  }
  .section__test .container__test .test .magic {
    position: absolute;
    top: -1.7rem;
    left: 0;
    width: 19.5rem;
  }
  .section__test .container__test .test .answer__true {
    position: relative;
    opacity: 1 !important;
    z-index: 99;
  }
  .section__test .container__test .test .test__img-movie {
    animation: fadeIn 1s ease-in forwards; /* Время и тип анимации */
  }
  .section__test .container__test .test .test__img-animation {
    display: none;
    width: 19rem;
    height: 20rem;
    position: absolute;
    top: 3.75rem;
    right: 3.75rem;
    left: 0;
    bottom: 0;
    z-index: 10;
    opacity: 0;
    transform: scale(0);
    animation: image-scale 0.8s ease-out forwards; /* Анимация появления */
    animation-delay: 0.3s;
  }
  .section__test .container__test .test .test__img-confity {
    display: none;
    width: 20rem;
    height: 20rem;
    position: absolute;
    top: -8.9058524173vw;
    right: 0;
    left: -3rem;
    bottom: 0;
    z-index: 5;
    opacity: 0;
    transform: scale(0);
    animation: confetti-scale 1.2s ease-out 0.8s forwards;
  }
  .section__test .container__test .test .test__img-animation1 {
    width: 14.5rem;
    height: 15rem;
    top: 0vw;
    left: 0;
  }
  .section__test .container__test .test .test__img-animation1 img {
    transform: rotate(10deg);
  }
  .section__test .container__test .test .test__img-animation2 {
    width: 18rem;
    height: 16rem;
    top: 0;
    left: -1.3rem;
  }
  .section__test .container__test .test .test__img-animation3 {
    width: 18.5rem;
    height: 16.6rem;
    top: 0vw;
    left: -2.5rem;
  }
  .section__test .container__test .test .test__img-animation4 {
    width: 16.5rem;
    height: 17rem;
    top: -3.0534351145vw;
    left: -0.5rem;
  }
  .section__test .container__test .test .test__img-animation5 {
    width: 18.3rem;
    height: 20rem;
    top: -7.6335877863vw;
    left: -1.4rem;
  }
  .section__test .container__test .test .select {
    border-radius: 1.8rem;
    color: var(--color-ligth);
  }
  .section__test .container__test .test__footer {
    position: absolute;
    bottom: 0;
    left: 5.0890585242vw;
    font-size: 2.0356234097vw;
    font-weight: 400;
    margin-bottom: 2.2900763359vw;
  }
  .section__test .container__test .test.show {
    display: flex;
  }
  .section__test .test__info {
    position: absolute;
    bottom: 5.0890585242vw;
    right: 5.0890585242vw;
  }
  .section__test .test__info .info-container {
    position: relative;
    display: inline-block;
  }
  .section__test .test__info .info-container .test__info-btn {
    width: 7.3791348601vw;
    height: 7.3791348601vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .section__test .test__info .info-container .test__info-btn svg {
    width: 100%;
    height: 100%;
  }
  .section__test .test__info .info-container .test__info-block {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    left: -45.8015267176vw;
    top: -6.3613231552vw;
    transform: translateY(-50%);
    width: 44.5292620865vw;
    height: auto;
    background-color: #fff;
    padding: 1.7811704835vw;
    font-size: 2.2900763359vw;
    color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 2.5445292621vw;
  }
  .section__test .test__info .info-container .test__info-block.show {
    opacity: 0.9;
    visibility: visible;
    z-index: 99;
  }
  :root {
    --color-grean: #3DAC51;
    --color--dark: #000000;
    --color-gray: #787878;
    --color-malina: #B40057;
    --color-ligth: #ffffff;
    --border: 2px solid #787878;
    --border-radius: 65px;
    --border-radius-active: 30px;
    --border-radius-btn: 29px;
    --font-family-base: "Montserrat", sans-serif;
    --container-width: 1307px;
    --transition-duration: 0.2s;
  }
  body {
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 1.1111111111vw;
    line-height: 1.28;
    color: var(--color--dark);
    background-color: var(--color-ligth);
  }
  a,
  button,
  input,
  textarea,
  svg * {
    transition-duration: var(--transition-duration);
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .disclaymer {
    text-decoration: underline;
  }
  .container {
    width: 95.1388888889vw;
  }
  .test__button-action {
    pointer-events: none;
  }
  .hero__button:hover {
    opacity: 0.7;
  }
  .getin {
    font-weight: bold;
  }
  /* Делает полупрозрачным картинки с неправльным ответом */
  .result__cicle-img.opacity {
    opacity: 0.2 !important;
  }
  .button__grean {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--color-grean);
    color: var(--color-ligth);
    border: none;
    cursor: pointer;
    min-width: 21.7361111111vw;
    height: 2.5694444444vw;
    transition: var(--transition-duration);
    border-radius: 2.0138888889vw;
  }
  .button__grey {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--color-gray);
    color: var(--color-ligth);
    border: none;
    cursor: pointer;
    min-width: 21.7361111111vw;
    height: 2.5694444444vw;
    transition: var(--transition-duration);
    border-radius: 2.0138888889vw;
  }
  .button__result {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--color-grean);
    color: var(--color-ligth);
    border: 0.1388888889vw solid var(--color-grean);
    cursor: pointer;
    min-width: 23.6111111111vw;
    height: 2.7777777778vw;
    transition: var(--transition-duration);
    border-radius: 2.0138888889vw;
  }
  .button__return {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: inherit;
    color: var(--color-grean);
    border: 0.1388888889vw solid var(--color-grean);
    cursor: pointer;
    min-width: 21.7361111111vw;
    height: 2.5694444444vw;
    transition: var(--transition-duration);
    border-radius: 2.0138888889vw;
  }
  .btn:hover {
    background: #3DAC51;
  }
  .text {
    text-align: start;
  }
  .malina {
    background-color: var(--color-malina);
  }
  .green {
    background-color: var(--color-grean);
  }
  .show {
    display: flex !important;
  }
  .varfalse {
    opacity: 0.1 !important;
  }
  /* Скрытие текста */
  .hidden {
    display: none;
  }
  /* Общий класс для плавного появления */
  /* Задержки для последовательного появления */
  /* Анимации */
  /* Анимация плавного появления */
}
@media screen and (max-width: 650px) and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
@media screen and (max-width: 650px) {
  .button.disabled {
    pointer-events: none; /* Отключает клики на кнопке */
    opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
    cursor: not-allowed; /* Меняем курсор */
  }
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(100%); /* Позиция слева */
    }
    to {
      opacity: 1;
      transform: translateX(0); /* Конечное положение */
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0; /* Полностью прозрачный */
    }
    to {
      opacity: 1; /* Полностью видимый */
    }
  }
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.8s ease forwards;
  }
  .fade-in {
    opacity: 0;
    transform: translateY(20px); /* Лёгкий сдвиг вниз */
    animation: fadeIn 0.8s ease-out forwards;
  }
  .fade-in-result {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInRes 1.3s ease-out forwards;
    animation-delay: 1.5s;
  }
  .fade-inis {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
  }
  .fade-in:nth-child(1) {
    animation-delay: 0.2s;
  }
  .fade-in:nth-child(2) {
    animation-delay: 0.4s;
  }
  .fade-in:nth-child(3) {
    animation-delay: 0.6s;
  }
  .fade-in:nth-child(4) {
    animation-delay: 0.8s;
  }
  .fade-in:nth-child(5) { /* Например, кнопка */
    animation-delay: 1s;
  }
  @keyframes image-scale {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes confetti-scale {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes fadeInRes {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes fadeClose {
    from {
      opacity: 1;
      transform: translateY(20px);
    }
    to {
      opacity: 0;
      transform: translateY(0);
    }
  }
}
@media screen and (max-width: 650px) {
  .section__result {
    display: none;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
    color: #000000;
    position: relative;
    padding-bottom: 1.2rem;
  }
  .section__result .result-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Растягиваем по высоте */
    -o-object-fit: cover;
       object-fit: cover; /* Заполняет контейнер, сохраняя пропорции */
    z-index: -1; /* Отправляем изображение на задний план, если нужно */
  }
  .section__result .container__result {
    width: 22.6rem;
  }
  .section__result .container__result .section__body {
    margin-top: 2rem;
  }
  .section__result .container__result .section__body .result {
    display: none;
    justify-content: space-between;
    align-items: start;
    flex-direction: row-reverse;
    flex-direction: column-reverse;
  }
  .section__result .container__result .section__body .result__img {
    width: 20.6rem;
    height: 20.8rem;
  }
  .section__result .container__result .section__body .result__body {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .section__result .container__result .section__body .result__body .result__test {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.5rem;
    height: 2.1rem;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--color-grean);
    font-weight: 400;
    border: 0.12rem solid var(--color-grean);
    border-radius: 21rem;
    margin-bottom: 1.1rem;
  }
  .section__result .container__result .section__body .result__cicle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 18.6rem;
    margin-bottom: 0.8rem;
  }
  .section__result .container__result .section__body .result__cicle-img {
    width: 3rem;
    height: 3rem;
  }
  .section__result .container__result .section__body .result__title {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
  }
  .section__result .container__result .section__body .result__description {
    max-width: 21.5rem;
    font-size: 0.75rem;
    margin-bottom: 1.3rem;
  }
  .section__result .container__result .section__body .result__footer {
    width: 21rem;
    font-size: 0.43rem;
    font-weight: 400;
    padding-top: 0.8rem;
    padding-bottom: 2rem;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  .section__result .container__result .section__body .result__footer .result__info-qr {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .section__result .container__result .section__body .result__footer .result__info-qr .qr {
    width: 2.9rem;
    height: 2.9rem;
    margin-right: 0.45rem;
  }
  .section__result .container__result .section__body .result__footer .result__info-qr .gr__text {
    width: 7rem;
    font-size: 0.45rem;
    font-weight: 400;
  }
  .section__result .container__result .section__body .result .button__result {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--color-grean);
    color: var(--color-ligth);
    border: 0.12rem solid var(--color-grean);
    cursor: pointer;
    min-width: 17.8rem;
    height: 2.5rem;
    transition: var(--transition-duration);
    border-radius: 1.8rem;
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }
  .section__result .container__result .section__body .result .button__return {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: inherit;
    color: var(--color-grean);
    border: 0.12rem solid var(--color-grean);
    cursor: pointer;
    min-width: 16rem;
    height: 2.3rem;
    transition: var(--transition-duration);
    border-radius: 1.8rem;
    font-size: 1rem;
    margin-bottom: 1.3rem;
  }
  .section__result .container__result .section__body .result.show {
    display: flex;
  }
  .section__result .result__info {
    position: absolute;
    bottom: 5.0890585242vw;
    right: 5.0890585242vw;
  }
  .section__result .result__info .info-container {
    position: relative;
    display: inline-block;
  }
  .section__result .result__info .info-container .result__info-btn {
    width: 7.3791348601vw;
    height: 7.3791348601vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .section__result .result__info .info-container .result__info-btn svg {
    width: 100%;
    height: 100%;
  }
  .section__result .result__info .info-container .result__info-block {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    left: -45.8015267176vw;
    top: -6.3613231552vw;
    transform: translateY(-50%);
    width: 44.5292620865vw;
    height: auto;
    background-color: #fff;
    padding: 1.7811704835vw;
    font-size: 2.2900763359vw;
    color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 2.5445292621vw;
  }
  .section__result .result__info .info-container .result__info-block.show {
    opacity: 0.9;
    visibility: visible;
  }
  .item_desktop {
    display: none !important;
  }
}
:root {
  --color-grean: #3DAC51;
  --color--dark: #000000;
  --color-gray: #787878;
  --color-malina: #B40057;
  --color-ligth: #ffffff;
  --border: 2px solid #787878;
  --border-radius: 65px;
  --border-radius-active: 30px;
  --border-radius-btn: 29px;
  --font-family-base: "Montserrat", sans-serif;
  --container-width: 1307px;
  --transition-duration: 0.2s;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 1.1111111111vw;
  line-height: 1.28;
  color: var(--color--dark);
  background-color: var(--color-ligth);
}

a,
button,
input,
textarea,
svg * {
  transition-duration: var(--transition-duration);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
}

.disclaymer {
  text-decoration: underline;
}

.container {
  width: 95.1388888889vw;
}

.test__button-action {
  pointer-events: none;
}

.hero__button:hover {
  opacity: 0.7;
}

.getin {
  font-weight: bold;
}

/* Делает полупрозрачным картинки с неправльным ответом */
.result__cicle-img.opacity {
  opacity: 0.2 !important;
}

.button__grean {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__grey {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  color: var(--color-ligth);
  border: none;
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__result {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-grean);
  color: var(--color-ligth);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 23.6111111111vw;
  height: 2.7777777778vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.button__return {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: inherit;
  color: var(--color-grean);
  border: 0.1388888889vw solid var(--color-grean);
  cursor: pointer;
  min-width: 21.7361111111vw;
  height: 2.5694444444vw;
  transition: var(--transition-duration);
  border-radius: 2.0138888889vw;
}

.btn:hover {
  background: #3DAC51;
}

.text {
  text-align: start;
}

.malina {
  background-color: var(--color-malina);
}

.green {
  background-color: var(--color-grean);
}

.show {
  display: flex !important;
}

.varfalse {
  opacity: 0.1 !important;
}

/* Скрытие текста */
.hidden {
  display: none;
}

@media screen and (min-width: 650px) {
  .true__effect {
    opacity: 0.1 !important;
  }
}
@media screen and (max-width: 650px) {
  .true__effect {
    opacity: 0 !important;
  }
}
.button.disabled {
  pointer-events: none; /* Отключает клики на кнопке */
  opacity: 1; /* Можно изменить стиль, чтобы показать, что кнопка заблокирована */
  cursor: not-allowed; /* Меняем курсор */
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100%); /* Позиция слева */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Конечное положение */
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* Полностью прозрачный */
  }
  to {
    opacity: 1; /* Полностью видимый */
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

/* Общий класс для плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* Лёгкий сдвиг вниз */
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-result {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInRes 1.3s ease-out forwards;
  animation-delay: 1.5s;
}

.fade-inis {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Задержки для последовательного появления */
.fade-in:nth-child(1) {
  animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s;
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s;
}

.fade-in:nth-child(5) { /* Например, кнопка */
  animation-delay: 1s;
}

/* Анимации */
@keyframes image-scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes confetti-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Анимация плавного появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRes {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeClose {
  from {
    opacity: 1;
    transform: translateY(20px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}/*# sourceMappingURL=style.css.map */