@charset "UTF-8";

/* Base */

html {
  --refRes: 1440;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
  font-size: calc(100vw / var(--refRes) * 10);
  font-size: calc(100dvw / var(--refRes) * 10);
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

body {
  min-width: 320px;
  background: var(--body-bg);
  font-family: var(--font-family);
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top, 20px);
  padding-bottom: env(safe-area-inset-bottom, 20px);
  position: relative;
}

.main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  position: relative;
}

.footer {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

section {
  padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

a {
  color: inherit;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.audio-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.18rem;
}

.audio-wave {
  display: block;
  width: 0.35rem;
  height: 4rem;
  border-radius: 10rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: var(--medium-gray);
}

.audio-wave--1 {
  background-color: var(--bright-orange);
}

.audio-wave--2 {
  height: 2.6rem;
  background-color: var(--bright-orange);
}

.audio-wave--3 {
  height: 1.6rem;
}

.audio-wave--4 {
  height: 2.6rem;
}

.audio-wave--6 {
  height: 2.6rem;
}

.audio-wave--7 {
  height: 1.6rem;
}

.audio-wave--8 {
  height: 2.6rem;
}

.container {
  max-width: calc(var(--container-width) + var(--container-padding) * 2);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

.container--fluid {
  max-width: calc(var(--container-width) + var(--container-padding) * 2);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.container--fluid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: Effra;
  font-display: swap;
  src: url("../fonts/Effra-Bold.woff2") format("woff2"), url("../fonts/Effra-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Effra;
  font-display: swap;
  src: url("../fonts/Effra-Medium.woff2") format("woff2"), url("../fonts/Effra-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Effra;
  font-display: swap;
  src: url("../fonts/Effra-Regular.woff2") format("woff2"), url("../fonts/Effra-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Rubik;
  font-display: swap;
  src: url("../fonts/Rubik-Bold.woff2") format("woff2"), url("../fonts/Rubik-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Rubik;
  font-display: swap;
  src: url("../fonts/Rubik-Medium.woff2") format("woff2"), url("../fonts/Rubik-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Rubik;
  font-display: swap;
  src: url("../fonts/Rubik-Regular.woff2") format("woff2"), url("../fonts/Rubik-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

.general {
  margin-bottom: 12rem;
}

.general__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1.6rem 2rem;
}

.profile-page .general__inner {
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.general__lesson {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem 3.2rem 1rem 1.4rem;
  border-radius: 2rem;
  background-color: var(--lime-green);
  color: var(--white);
}

.general__lesson:hover {
  background-color: #1d2d8c;
}

.general__lesson-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.9rem;
}

.general__lesson-img {
  width: auto;
  height: 7.8rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.general__lesson-img img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.general__lesson-text {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 120%;
}

.general__lesson-icon {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.general__lesson-icon i {
  --font-size: 3.2rem;
}

.general__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.4rem;
}

.profile-page .general__content {
  margin-top: 0;
}

.general__title h1 {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  color: var(--blue);
}

.general__tabs {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[5];
  grid-template-columns: repeat(5, 1fr);
  background-color: var(--deep-blue);
  border-radius: 2rem 2rem 0 0;
}

.general__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.2rem 0 1.8rem 0;
  border-bottom: 0.4rem solid transparent;
  color: var(--white);
}

.general__tab--active {
  border-color: var(--lime-green);
  color: var(--lime-green);
}

.general__tab-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
}

.general__tab-icon svg {
  fill: var(--white);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.general__tab--active .general__tab-icon svg {
  fill: var(--lime-green);
}

.general__tab p {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 120%;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.general__control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.6rem;
}

.general__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--blue);
}

.general__back:hover {
  color: #636363;
}

.general__back i {
  font-size: 2.6rem;
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.general__filter {
  position: relative;
  z-index: 101;
}

.general__filter-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  background-color: var(--white);
  overflow: hidden;
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}

.general__filter--active .general__filter-btn {
  border-radius: 1rem 1rem 0 0;
  -webkit-box-shadow: 0px -8px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px -8px 15px rgba(94, 58, 67, 0.15);
}

.general__filter-btn i {
  --font-size: 3.2rem;
}

.general__filter-body {
  display: -ms-grid;
  display: grid;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  pointer-events: none;
  background-color: var(--white);
  border-radius: 1rem;
  width: 56.9444444444vw;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

.general__filter--active .general__filter-body {
  border-radius: 0 1rem 1rem 1rem;
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  -webkit-box-shadow: 0px 10px 10px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 10px 10px rgba(94, 58, 67, 0.15);
}

.general__filter-content {
  overflow: hidden;
  padding: 2rem;
}

.general__filter-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.general__filter-item {
  --filter-item-color: var(--blue);
}

.general__filter-item .form-radio-label {
  gap: 1rem;
}

.general__filter-item .form-radio-input:checked + .form-radio-item::before {
  background-color: var(--filter-item-color);
}

.general__filter-item .form-radio-item::before {
  background-color: transparent;
}

.general__filter-item .form-radio-text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--filter-item-color) !important;
}

.general__scenes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.general__scenes-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 120%;
  color: var(--blue);
}

.general__scenes-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

.general__scenes-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 3rem;
}

.general__scenes-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.general__scenes-item.is-active .general__scenes-img::before {
  opacity: 1;
}

.general__scenes-img {
  width: 10.2rem;
  height: 10.2rem;
  position: relative;
}

.general__scenes-img::before {
  content: "";
  display: block;
  width: 10.2rem;
  height: 10.2rem;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAyIiBoZWlnaHQ9IjEwMiIgdmlld0JveD0iMCAwIDEwMiAxMDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8Y2lyY2xlIGN4PSI1MSIgY3k9IjUxIiByPSI0OSIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXJfNjY1NV8xMjI5OCkiIHN0cm9rZS13aWR0aD0iNCIvPg0KPGRlZnM+DQo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNjY1NV8xMjI5OCIgeDE9Ii02Ljc3OTE2IiB5MT0iOTMuODk4OSIgeDI9Ijg5LjE1MDciIHkyPSIxMS44MzAzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQo8c3RvcCBzdG9wLWNvbG9yPSIjRTM2MzMzIi8+DQo8c3RvcCBvZmZzZXQ9IjAuNTgzODQ5IiBzdG9wLWNvbG9yPSIjQjczQjYyIi8+DQo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4MTI3NzUiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8L2RlZnM+DQo8L3N2Zz4NCg==);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.general__scenes-img img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.general__scenes-text {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--medium-gray);
}

.swiper {
  max-width: 100%;
  width: 100%;
  height: 100%;
  overflow: visible;
  margin: 0;
}

.swiper-slide {
  height: auto;
}

.swiper-button-disabled {
  opacity: 0.5 !important;
  pointer-events: none;
}

.swiper-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 0.5rem;
  font-size: 0.5rem;
  bottom: -2rem !important;
  z-index: 1;
}

.swiper-pagination-bullet {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 3.2rem;
  height: 0.4rem;
  border-radius: 0.4rem;
  margin: 0 0.35rem !important;
  background-color: var(--blue-20);
  opacity: 1;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: var(--blue);
}

[class^=swiper-button-],
[class*=" swiper-button-"] {
  width: 5.6rem;
  height: 5.6rem;
  margin: 0;
  border-radius: 50%;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--black);
  position: static;
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset;
}

[class^=swiper-button-]:hover,
[class*=" swiper-button-"]:hover {
  color: var(--accent);
}

[class^=swiper-button-].partners-button-prev,
[class^=swiper-button-].partners-button-next,
[class*=" swiper-button-"].partners-button-prev,
[class*=" swiper-button-"].partners-button-next {
  background-color: var(--gray);
}

[class^=swiper-button-]::after,
[class*=" swiper-button-"]::after {
  display: none;
}

[class^=swiper-button-] i,
[class*=" swiper-button-"] i {
  --font-size: 5.6rem;
}

[class^=swiper-button-] .swiper-navigation-icon,
[class*=" swiper-button-"] .swiper-navigation-icon {
  display: none;
}

.f-html {
  padding: 0;
}

.fancybox__slide.has-close-btn {
  padding: 0;
}

.f-button.is-close-button {
  --f-close-button-width: 4.5rem;
  --f-close-button-height: 4.5rem;
  --f-close-border-radius: 50%;
  --f-close-button-color: var(--blue);
  --f-close-button-hover-color: var(--blue);
  --f-close-button-bg: transparent;
  --f-close-button-hover-bg: transparent;
  --f-close-button-active-bg: transparent;
  --f-button-svg-stroke-width: 0.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  top: 2rem;
  left: 2rem;
}

.f-button.is-close-button svg {
  stroke-linecap: square !important;
  stroke-width: 0.3rem;
}

.fancybox__container,
.fancybox__viewport,
.fancybox__slide {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.fancybox__content {
  border-radius: 1rem;
  margin: 2rem;
  overflow: hidden !important;
  padding: 0;
}

.fancybox__content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

.fancybox__slide {
  padding: 5rem;
}

.f-panzoom__wrapper {
  border-radius: 1rem;
  overflow: hidden;
}

/* Reset and base styles  */

* {
  padding: 0px;
  margin: 0px;
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Links */

a,
a:link,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Common */

aside,
nav,
footer,
header,
section,
main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

img,
svg {
  max-width: 100%;
  display: block;
}

address {
  font-style: normal;
}

/* Form */

input,
textarea,
button,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

input::-ms-clear {
  display: none;
}

button,
input[type=submit] {
  display: inline-block;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  background: none;
  cursor: pointer;
}

input:focus,
input:active,
textarea:focus,
textarea:active,
button:focus,
button:active {
  outline: none;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

label {
  cursor: pointer;
}

legend {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
}

.none {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.html-no-scroll {
  overflow: hidden !important;
  --f-scrollbar-compensate: 0px;
  max-height: 100vh;
}

.no-scroll {
  overflow: hidden !important;
  overscroll-behavior-y: none;
  max-height: 100vh;
}

:root {
  --font-family: Effra, Arial, Verdana, sans-serif;
  --second-family: Rubik, Arial, Verdana, sans-serif;
  --container-padding: 10rem;
  --container-width: 124rem;
  --header-height: 9rem;
  --body-bg: #F8F9FE;
  /* Светлые оттенки */
  --white: #fffffe;
  --white-10: rgba(255, 255, 254, 0.1);
  --white-20: rgba(255, 255, 254, 0.2);
  --white-30: rgba(255, 255, 254, 0.3);
  --white-40: rgba(255, 255, 254, 0.4);
  --white-50: rgba(255, 255, 254, 0.5);
  --white-75: #fffffebf;
  --white-80: rgba(255, 255, 254, 0.8);
  --ghost-white: #f8f9fe;
  --snow-white: #f6f6f6;
  --alabaster: #f6e6cc;
  /* Серые оттенки */
  --light-gray: #cccccc;
  --light-gray-20: rgba(204, 204, 204, 0.2);
  --light-gray-30: rgba(204, 204, 204, 0.3);
  --medium-gray: #636463;
  --medium-gray-10: rgba(99, 100, 99, 0.1);
  --medium-gray-20: rgba(99, 100, 99, 0.2);
  --medium-gray-30: rgba(99, 100, 99, 0.3);
  /* Темные оттенки */
  --black: #1a1919;
  --black-20: rgba(26, 25, 25, 0.2);
  --black-50: rgba(26, 25, 25, 0.5);
  --dark-burgundy: #5e3a43;
  /* Синие оттенки */
  --blue: #1d2d8c;
  --blue-10: rgba(29, 45, 140, 0.1);
  --blue-20: #1d2d8c33;
  --deep-blue: #2e2b74;
  --midnight-blue: #443793;
  --midnight-blue-30: rgba(68, 55, 147, 0.3);
  --steel-blue: #3b81b6;
  --electric-blue: #3e3ef4;
  --sky-blue: #01b4ff;
  /* Бирюзовые и Зеленые оттенки */
  --cyan: #17e9e0;
  --mint: #2bc995;
  --emerald: #6bcb77;
  --lime-green: #b4d335;
  --lime-green-20: #b4d33533;
  /* Желтые и Оранжевые оттенки */
  --amber-yellow: #fccd05;
  --bright-orange: #f37021;
  --bright-orange-20: #f3702133;
  --tangerine: #e3672a;
  --tangerine-10: rgba(227, 103, 42, 0.1);
  /* Красные и Розовые оттенки */
  --crimson-red: #da2a55;
  --magenta-rose: #8e2b7d;
  /* Фиолетовые оттенки */
  --deep-purple: #6a2c91;
  --dark-magenta: #9f248f;
  --dark-magenta-10: rgba(159, 36, 143, 0.1);
  --dark-magenta-20: rgba(159, 36, 143, 0.2);
  --dark-magenta-30: rgba(159, 36, 143, 0.3);
  --plum-purple: #96248d;
  --orchid-purple: #94268f;
  --bright-purple: #a64ac9;
}

/* Components */

.accordion-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0;
  -webkit-transition: gap 0.3s ease;
  -o-transition: gap 0.3s ease;
  transition: gap 0.3s ease;
}

.accordion-item--active .accordion-body {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
}

.accordion-item--active .accordion-icon {
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

.accordion-icon {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.accordion-body {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.accordion-content {
  overflow: hidden;
}

.achievs {
  padding: 3.8rem 3rem 3rem 3rem;
  border-radius: 2rem;
  background-color: var(--white);
}

.achievs__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 2rem;
}

.achievs__title {
  margin-bottom: 2rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 120%;
  color: var(--dark-magenta);
  text-align: center;
}

.achievs__cover {
  width: 100%;
}

.achievs__cover img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.achievs__bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
  color: var(--medium-gray);
}

.achievs__bar-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.achievs__bar-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.achievs__bar-text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
}

.achievs__bar-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  text-align: right;
}

.achievs__bar-count i {
  --font-size: 1.3rem;
}

.achievs__bar-body {
  height: 0.8rem;
}

.achievs__bar-body progress {
  background: var(--light-gray-20);
  color: var(--lime-green);
  display: block;
  width: 100%;
  height: 0.8rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 10rem;
  overflow: hidden;
  cursor: default;
}

.achievs__bar-body progress::-webkit-progress-bar {
  background: var(--light-gray-20);
  border-radius: 10rem;
}

.achievs__bar-body progress::-webkit-progress-value {
  background: var(--lime-green);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.achievs__bar-body progress[value="0"]::-webkit-progress-value {
  background: var(--light-gray-20);
}

.achievs__btn.btn {
  --btn-width: 100%;
}

/* Хлебные крошки */

.breadcrumbs {
  --breadcrumbs-gap: 1rem;
  width: calc(100% + var(--container-padding) * 2);
  margin-left: calc(var(--container-padding) * -1);
  padding: 0 var(--container-padding);
  overflow-x: auto;
  overflow-y: hidden;
}

.breadcrumbs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

.breadcrumbs__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--breadcrumbs-gap);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.breadcrumbs__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--breadcrumbs-gap);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black);
  color: var(--red);
  white-space: nowrap;
}

.breadcrumbs__item:first-child {
  color: var(--accent);
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  color: var(--accent);
}

.breadcrumbs a span {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.1rem, transparent), color-stop(0, currentColor), color-stop(0.24rem, currentColor), color-stop(0, transparent), to(transparent));
  background-image: -o-linear-gradient(bottom, transparent 0.1rem, currentColor 0, currentColor 0.24rem, transparent 0, transparent 100%);
  background-image: linear-gradient(0deg, transparent 0.1rem, currentColor 0, currentColor 0.24rem, transparent 0, transparent 100%);
  background-size: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  background-position: left;
  background-repeat: no-repeat;
}

/* Кнопки */

.btn {
  --btn-width: fit-content;
  --btn-height: 5.2rem;
  --btn-padding-x: 2.5rem;
  --btn-border-radius: 1rem;
  --btn-background: transparent;
  --btn-border-color: var(--blue);
  --btn-color: var(--blue);
  --btn-transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: var(--btn-width);
  min-width: var(--btn-height);
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  border: 0.1rem solid var(--btn-border-color);
  background-color: var(--btn-background);
  -webkit-transition: var(--btn-transition);
  -o-transition: var(--btn-transition);
  transition: var(--btn-transition);
  pointer-events: all;
  overflow: hidden;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 2rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--btn-color);
  cursor: pointer;
  position: relative;
}

.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn:hover {
  border-color: #1d2d8c;
  background-color: #1d2d8c;
  color: #fff;
}

.btn--green {
  --btn-background: var(--lime-green);
  --btn-border-color: var(--lime-green);
}

.btn--white {
  --btn-background: var(--white);
  --btn-border-color: var(--white);
  --btn-color: var(--deep-blue);
}

.dropdown {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  z-index: 9;
}

.dropdown__selected {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 7rem;
  background-color: transparent;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.dropdown__selected i {
  --font-size: 1.5rem;
  -webkit-transform: rotate(90deg) translateY(-50%);
  -ms-transform: rotate(90deg) translateY(-50%);
  transform: rotate(90deg) translateY(-50%);
  margin-top: -1.5rem;
  color: var(--red);
  position: absolute;
  top: 50%;
  right: 1rem;
}

.dropdown.is-active .dropdown__selected i {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.dropdown__selected-label--js::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.2rem;
  background-color: var(--white-50);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.dropdown__selected-label--js::after {
  content: "";
  display: block;
  width: 0%;
  height: 0.2rem;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.dropdown__input {
  cursor: text;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.filled .dropdown__input + .form-label,
.dropdown__input:focus + .form-label,
.dropdown__input:active + .form-label,
.dropdown__input:checked + .form-label {
  height: calc(100% + 2rem);
  font-size: 2rem;
  top: -2rem;
}

.filled .dropdown__input + .form-label::after,
.dropdown__input:focus + .form-label::after,
.dropdown__input:active + .form-label::after,
.dropdown__input:checked + .form-label::after {
  width: 100%;
}

.dropdown__input:hover + .dropdown__label::after {
  width: 100%;
}

.dropdown__input:required + .form-label .typewriter__word::after {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  right: -2rem;
}

.dropdown__label {
  display: block;
  width: 100%;
  background-color: transparent;
  overflow: hidden;
  font-weight: 400;
  font-size: 3rem;
  line-height: 120%;
  color: var(--white);
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
}

.dropdown__container {
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: calc(100% - 0.2rem);
  left: 0;
  right: 0;
  z-index: 10;
}

.dropdown.is-active .dropdown__container {
  pointer-events: all;
}

.dropdown__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  padding: 4rem 3rem;
  background-color: var(--red);
  -webkit-transform: translateY(-110%);
  -ms-transform: translateY(-110%);
  transform: translateY(-110%);
  will-change: transform;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.dropdown.is-active .dropdown__content {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.dropdown__content .dropdown__label {
  font-size: 2rem;
  color: var(--white);
}

.dropdown__radio {
  display: none;
}

.form-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.form-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.form-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.form-suptitle p {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
  color: var(--medium-gray);
}

.form-col-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.form-group {
  position: relative;
}

.form-input {
  width: 100%;
  height: 5.5rem;
  background-color: var(--white);
  border: 0.2rem solid #e4e8ef;
  border-radius: 1rem;
  padding: 0 2rem;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 140%;
  color: var(--black);
}

.form-input.filled,
.form-input:focus,
.form-input:active,
.form-input:checked {
  border-color: var(--black-50);
}

.has-error .form-input.filled,
.has-error .form-input:focus,
.has-error .form-input:active,
.has-error .form-input:checked {
  color: var(--accent);
}

.form-input::-webkit-input-placeholder {
  color: var(--black-50);
}

.form-input::-moz-placeholder {
  color: var(--black-50);
}

.form-input:-ms-input-placeholder {
  color: var(--black-50);
}

.form-input::-ms-input-placeholder {
  color: var(--black-50);
}

.form-input::placeholder {
  color: var(--black-50);
}

.has-error .form-input::-webkit-input-placeholder {
  color: var(--accent);
}

.has-error .form-input::-moz-placeholder {
  color: var(--accent);
}

.has-error .form-input:-ms-input-placeholder {
  color: var(--accent);
}

.has-error .form-input::-ms-input-placeholder {
  color: var(--accent);
}

.has-error .form-input::placeholder {
  color: var(--accent);
}

.form-input:hover {
  border-color: var(--black-50);
}

.has-error .form-input {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-10) !important;
}

.form-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.form-textarea {
  width: 100%;
  height: 11rem;
  background-color: var(--white);
  border: 0.2rem solid #e4e8ef;
  border-radius: 1rem;
  padding: 0 2rem;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 140%;
  color: var(--black);
}

.form-text p {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 150%;
  text-align: center;
  color: var(--medium-gray);
}

.form-radio-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.form-radio-input {
  visibility: hidden;
  position: absolute;
  top: -99999px;
  left: -999999px;
}

.form-radio-input:checked + .form-radio-item::before {
  background-color: var(--dark-magenta);
}

.form-radio-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 0.1rem solid var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  background-color: var(--white);
  -webkit-transition: border-color 0.15s ease;
  -o-transition: border-color 0.15s ease;
  transition: border-color 0.15s ease;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
}

.form-radio-item::before {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--black);
  border-radius: 50%;
  -webkit-transition: background-color 0.15s ease;
  -o-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.form-radio-text {
  -webkit-transition: color 0.15s ease;
  -o-transition: color 0.15s ease;
  transition: color 0.15s ease;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 143%;
  color: var(--black-50);
}

.form-checkbox-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.8rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.form-checkbox-input {
  visibility: hidden;
  position: absolute;
  top: -99999px;
  left: -999999px;
}

.form-checkbox-input:checked + .form-checkbox-item {
  background-color: var(--lime-green);
}

.form-checkbox-input:checked + .form-checkbox-item::before {
  -webkit-transform: translateY(-50%) translateX(-1.6rem);
  -ms-transform: translateY(-50%) translateX(-1.6rem);
  transform: translateY(-50%) translateX(-1.6rem);
}

.form-checkbox-item {
  width: 4.6rem;
  height: 3rem;
  padding: 0.3rem;
  background-color: #E4E8EF;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 10rem;
  position: relative;
}

.form-checkbox-item::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50%;
  -webkit-transition: background-color 0.15s ease, -webkit-transform 0.15s ease;
  transition: background-color 0.15s ease, -webkit-transform 0.15s ease;
  -o-transition: transform 0.15s ease, background-color 0.15s ease;
  transition: transform 0.15s ease, background-color 0.15s ease;
  transition: transform 0.15s ease, background-color 0.15s ease, -webkit-transform 0.15s ease;
  position: absolute;
  top: 50%;
  right: 0.3rem;
  left: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

.form-checkbox-text {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 120%;
  color: var(--black-50);
}

.form-text a {
  color: var(--dark-magenta);
}

.form-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  max-width: 36.8rem;
  width: 100%;
}

.form-btns .btn {
  max-width: 36.8rem;
}

/* Стили для иконок */

[class^=icon-],
[class*=" icon-"] {
  --font-size: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: var(--font-size);
  height: var(--font-size);
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: var(--font-size);
  color: inherit;
  position: relative;
  z-index: 1;
}

.icon {
  --border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: var(--border-radius);
  background-color: var(--white-50);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  color: var(--gray);
  position: relative;
}

.progress {
  border-radius: 2rem;
  background: -o-linear-gradient(40.55deg, #9F248F 0.08%, #1D2D8C 87.86%);
  background: linear-gradient(49.45deg, #9F248F 0.08%, #1D2D8C 87.86%);
  padding: 3.8rem 3rem 1.8rem 3rem;
  overflow: hidden;
  color: var(--white);
}

.progress.progress--list .progress__title {
  text-align: left;
}

.progress__head {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  margin-bottom: 3.7rem;
}

.progress__title {
  margin-bottom: 2.3rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 120%;
  text-align: center;
}

.progress__subtitle {
  padding: 0.5rem 1rem;
  border-radius: 20rem;
  background-color: var(--white-10);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--white);
}

.progress__cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.progress__cover img {
  width: auto;
  height: 15.6rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.progress__text {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
}

.progress__text span {
  font-weight: 900;
  color: var(--bright-orange);
}

.progress__bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 4rem;
}

.progress__bar-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.progress__bar-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.progress__bar-text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
}

.progress__bar-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  text-align: right;
}

.progress__bar-count i {
  --font-size: 1.3rem;
}

.progress__bar-body {
  height: 0.8rem;
}

.progress__bar-body progress {
  background: var(--light-gray-20);
  color: var(--lime-green);
  display: block;
  width: 100%;
  height: 0.8rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 10rem;
  overflow: hidden;
  cursor: default;
}

.progress__bar-body progress::-webkit-progress-bar {
  background: var(--light-gray-20);
  border-radius: 10rem;
}

.progress__bar-body progress::-webkit-progress-value {
  background: var(--lime-green);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.progress__bar-body progress[value="0"]::-webkit-progress-value {
  background: var(--light-gray-20);
}

.progress__active-head {
  margin-bottom: 1rem;
}

.progress__active-title {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
}

.progress__active-body {
  margin-bottom: 2.3rem;
}

.progress__active-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 1.6rem;
}

.progress__active-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.progress__active-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1.2rem;
  height: 4.6rem;
  position: relative;
}

.progress__active-wrap progress {
  background: transparent;
  color: var(--lime-green);
  width: 4.6rem;
  min-width: 4.6rem;
  height: 1.2rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 10rem;
  -webkit-transform: rotate(-90deg) translate(-40%, -140%);
  -ms-transform: rotate(-90deg) translate(-40%, -140%);
  transform: rotate(-90deg) translate(-40%, -140%);
  overflow: hidden;
  cursor: default;
}

.progress__active-wrap progress::-webkit-progress-bar {
  background: transparent;
  border-radius: 10rem;
}

.progress__active-wrap progress::-webkit-progress-value {
  background: var(--lime-green);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.progress__active-wrap progress[value="0"]::-webkit-progress-value {
  background: transparent;
}

.progress__active-wrap.empty {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.progress__active-wrap.empty progress {
  opacity: 0;
}

.progress__active-wrap.empty::after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.1rem;
  background: var(--dark-magenta);
  border-radius: 2rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.progress__active-label {
  color: var(--white);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 110%;
}

.progress__active-foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
}

.progress__active-foot i {
  --font-size: 3.2rem;
  color: var(--bright-orange);
}

.progress__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.3rem;
  color: var(--white);
}

.progress__list-title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 100%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.progress__list-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.progress__list-item {
  --progress-list-dot: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.6rem 0.8rem 0.6rem 2.1rem;
  border-radius: 0.7rem;
  min-height: 3rem;
  position: relative;
}

.progress__list-item--passed {
  --progress-list-dot: var(--lime-green);
}

.progress__list-item--passed i {
  opacity: 1 !important;
  color: var(--lime-green);
}

.progress__list-item--current {
  --progress-list-dot: var(--dark-magenta);
  background-color: var(--white-80);
  color: var(--dark-magenta);
}

.progress__list-item--current p {
  font-weight: 700 !important;
}

.progress__list-item--current i {
  --font-size: 1.6rem;
  border: 0.2rem dashed var(--progress-list-dot);
  opacity: 1 !important;
}

.progress__list-item--current i::before {
  display: none;
}

.progress__list-item::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: var(--progress-list-dot);
  position: absolute;
  top: 1.2rem;
  left: 0.8rem;
}

.progress__list-item p {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 100%;
}

.progress__list-item i {
  --font-size: 1.3rem;
  width: 1.6rem;
  height: 1.6rem;
  opacity: 0;
}

.repl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 3rem 2rem 5rem 2rem;
  background-color: var(--white);
  border-radius: 2rem;
  text-align: center;
}

.repl__cover {
  width: 100%;
  margin-bottom: 2rem;
}

.repl__cover img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.repl__title {
  margin-bottom: 1.6rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 120%;
  color: var(--blue);
}

.repl__text {
  max-width: 23rem;
  margin-bottom: 1.7rem;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 120%;
}

/* Главный заголовок страницы */

/* Заголовок блока */

/* Подзаголовок блока */

/* Текст */

/* Modules */

.burger-btn {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
  width: 5.6rem;
  height: 5.6rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  pointer-events: all;
  position: relative;
}

.burger-btn.burger--open .burger__line {
  background-color: var(--accent);
}

.burger-btn.burger--open .burger__line--first {
  -webkit-transform: rotate(45deg) translateY(0);
  -ms-transform: rotate(45deg) translateY(0);
  transform: rotate(45deg) translateY(0);
}

.burger-btn.burger--open .burger__line--second {
  width: 0;
}

.burger-btn.burger--open .burger__line--third {
  -webkit-transform: rotate(-45deg) translateY(0);
  -ms-transform: rotate(-45deg) translateY(0);
  transform: rotate(-45deg) translateY(0);
}

.burger__line {
  width: 3rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background-color: var(--white);
  -webkit-transition: width 0.3s ease, -webkit-transform 0.3s ease;
  transition: width 0.3s ease, -webkit-transform 0.3s ease;
  -o-transition: width 0.3s ease, transform 0.3s ease;
  transition: width 0.3s ease, transform 0.3s ease;
  transition: width 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.burger__line--first {
  -webkit-transform: translateY(calc(-50% - 0.8rem));
  -ms-transform: translateY(calc(-50% - 0.8rem));
  transform: translateY(calc(-50% - 0.8rem));
}

.burger__line--third {
  -webkit-transform: translateY(calc(-50% + 0.8rem));
  -ms-transform: translateY(calc(-50% + 0.8rem));
  transform: translateY(calc(-50% + 0.8rem));
}

/* Blocks */

.footer {
  background-color: var(--deep-blue);
}

.footer__inner {
  padding: 3.6rem 0;
}

.footer__nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}

.footer__nav a {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--white);
}

.header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  padding: 2.4rem 3rem 2.4rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 0 0 2rem 2rem;
}

.header__logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.header__logos-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  height: 3rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.header__logos-item:nth-child(1) {
  height: 2rem;
}

.header__logos-item:not(:first-child)::before {
  content: "";
  display: block;
  width: 0.1rem;
  height: 100%;
  background-color: #AFAEB0;
}

.header__logos-item img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.header__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5.6rem;
  color: var(--blue);
}

.header__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font-style: normal;
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
}

.header__item-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
}

.header__profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 120%;
}

.header__profile:hover {
  color: #636363;
}

.header__profile:hover .header__item-icon {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.header__profile .icon-triangle-down {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

.logo {
  display: block;
  width: auto;
  height: 4.2rem;
}

.logo img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.plate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  position: absolute;
  right: 10rem;
  bottom: 4rem;
  z-index: 1000;
}

.plate__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.plate__block {
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem 0 1rem 1rem;
  padding: 1.2rem 1.7rem 1.1rem 1.7rem;
  min-width: 15.8rem;
}

.plate__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.4rem;
}

.plate__wrap span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.plate__wrap p {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--blue);
}

.plate__cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.plate__cover img {
  width: auto;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.popup {
  display: none;
  padding: 6rem;
  background-color: var(--white);
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.popup--login .popup__body {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 13.4rem;
}

.popup--login .popup__cover {
  width: auto;
  height: 51.4rem;
  margin-bottom: 0;
}

.popup--login .form-content {
  gap: 1.5rem;
}

.popup--login .form .btn {
  width: 100%;
}

.popup--login .form-foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
}

.popup--pay .popup__form {
  gap: 7.7rem;
  max-width: 49.2rem;
}

.popup--pay .form-content {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3.2rem;
}

.popup--subscribe .popup__body {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.popup--subscribe .popup__body .btn {
  max-width: 36.8rem;
  width: 100%;
}

.popup__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 4.2rem;
}

.popup__logo img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.popup__cover {
  width: auto;
  height: 16rem;
  margin-bottom: 6rem;
}

.popup__cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.popup__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

.popup__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5rem;
  width: 100%;
}

#popup-success .popup__content {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0;
}

.popup__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

#popup-success .popup__head {
  margin-bottom: 4rem;
}

.popup__title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.8rem;
  line-height: 120%;
  text-align: center;
  color: var(--blue);
}

.popup__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.popup__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2rem;
}

.popup__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2rem;
  border-radius: 2rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  text-align: center;
}

.popup__item:hover {
  -webkit-box-shadow: 0px 4px 15px var(--lime-green);
  box-shadow: 0px 4px 15px var(--lime-green);
}

.popup__item-img {
  width: auto;
  height: 20.4rem;
  margin-bottom: 2rem;
}

.popup__item-img img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.popup__item-title {
  margin-bottom: 0.9rem;
  font-weight: 700;
  font-size: 2rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}

.popup__item-text {
  font-size: 1.4rem;
}

.popup__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 4.7rem;
  max-width: 36.8rem;
  width: 100%;
}

.popup__form .form-text {
  max-width: 20.5rem;
}

.popup__foot {
  padding: 3rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 2rem;
  margin-top: auto;
}

.popup__foot-text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 120%;
  text-align: center;
  color: var(--medium-gray);
}

.popup__foot-text a {
  text-transform: uppercase;
}

#popup-success .btn {
  --btn-padding-x: 11rem;
}

.sidebar {
  margin-bottom: 3.1rem;
}

.sidebar__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.sidebar .sidebar-rating {
  padding: 3rem 0.6rem 4rem 1.5rem;
  border-radius: 2rem;
  background: -o-linear-gradient(40deg, #9f248f 0%, #1d2d8c 100%);
  background: linear-gradient(50deg, #9f248f 0%, #1d2d8c 100%);
  color: var(--white);
}

.sidebar .sidebar-rating__title {
  width: 100%;
  margin-bottom: 2.1rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 120%;
  text-align: center;
}

.sidebar .sidebar-rating__items {
  max-height: 54.5rem;
  padding-right: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

.sidebar .sidebar-rating__items::-webkit-scrollbar {
  width: 0.4rem;
}

.sidebar .sidebar-rating__items::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar .sidebar-rating__items::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.8rem;
}

.sidebar .sidebar-rating__item {
  padding: 1.1rem 0.7rem 1.1rem 1.2rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.8rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--white);
}

.sidebar .sidebar-rating__item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.sidebar .sidebar-rating__item .user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.8rem;
}

.sidebar .sidebar-rating__item .score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
}

.sidebar .sidebar-rating__item img {
  max-width: 2.4rem;
}

.sidebar .sidebar-rating__item:nth-child(1) {
  border-color: #fccd05;
}

.sidebar .sidebar-rating__item:nth-child(1) .count {
  color: #fccd05;
}

.sidebar .sidebar-rating__item:nth-child(2) {
  border-color: #ccc;
}

.sidebar .sidebar-rating__item:nth-child(2) .count {
  color: #ccc;
}

.sidebar .sidebar-rating__item:nth-child(3) {
  border-color: #e3672a;
}

.sidebar .sidebar-rating__item:nth-child(3) .count {
  color: #e3672a;
}

.sidebar .sidebar-rating__item-scores {
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.9rem;
}

.sidebar .sidebar-results {
  padding: 2rem 2rem 3rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  background-color: var(--white);
  border: 0.1rem solid #F8F9FE;
  border-radius: 2rem;
}

.sidebar .sidebar-results__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}

.sidebar .sidebar-results__btns .btn {
  --btn-color: var(--black);
  --btn-border-color: var(--medium-gray);
  width: auto;
  padding: 2.1rem 1.1rem 2rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.sidebar .sidebar-results__btns .btn._active {
  --btn-border-color: #b4d335;
  --btn-background: rgba(180, 211, 53, 0.2);
}

.sidebar .sidebar-results__ach {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.sidebar .sidebar-results__progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.sidebar .sidebar-results__progress-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.9rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
}

.sidebar .sidebar-results__progress-item img {
  max-width: 3.2rem;
}

.sidebar .sidebar-results__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.4rem;
}

.sidebar .sidebar-results__items .sidebar-results__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 200%;
  color: #636463;
}

.sidebar .sidebar-results__items .sidebar-results__item img {
  max-width: 2.4rem;
}

.sidebar .checkpoint {
  padding: 3rem;
  border-radius: 2rem;
  background-color: #1d2d8c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.sidebar .checkpoint__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 120%;
  color: var(--white);
}

.sidebar .checkpoint__header img {
  width: 4.9rem;
  height: 5.2rem;
}

.sidebar .checkpoint__descr {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--white);
}

/* Elements */

/* Pages */

/* Sections */

.about {
  margin-bottom: 16rem;
}

.about__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1.5rem;
  padding: 4rem;
}

.about__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6rem;
}

.about__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6.6rem;
}

.about__block:nth-child(2) {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 3.5rem;
}

.about__block:nth-child(2) .about__img {
  padding-top: 3.4rem;
  -webkit-transform: rotate(11.83deg);
  -ms-transform: rotate(11.83deg);
  transform: rotate(11.83deg);
}

.about__img {
  width: 38.2rem;
  height: auto;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.about__img img {
  width: 100%;
  height: auto;
}

.about__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.about__title {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  color: var(--dark-magenta);
}

.about__text {
  font-size: 2rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.callback {
  margin-bottom: 4rem;
}

.callback__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
  padding: 4rem 4rem 8.6rem 4rem;
  border-radius: 1.5rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  position: relative;
}

.callback__body {
  max-width: 75.6rem;
}

.callback__body .btn {
  --btn-padding-x: 12rem;
}

.callback__cover {
  height: 40.4rem;
  position: absolute;
  top: 9rem;
  right: 5.7rem;
}

.callback__cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.eht__items {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 3rem;
}

.eht__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.eht__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  padding: 3rem 4rem 3.7rem 4rem;
  border-radius: 2rem 2rem 0 0;
  background-color: var(--blue);
}

.eht__head-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.4rem 1.8rem;
}

.eht__head-progress progress {
  background: var(--medium-gray-20);
  color: var(--lime-green);
  display: block;
  width: 34rem;
  height: 1rem;
  border-radius: 10rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  cursor: default;
}

.eht__head-progress progress::-webkit-progress-bar {
  background: var(--medium-gray-20);
  border-radius: 10rem;
}

.eht__head-progress progress::-webkit-progress-value {
  background: var(--lime-green);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.eht__head-progress progress[value="0"]::-webkit-progress-value {
  background: var(--medium-gray-20);
}

.eht__head-progress span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--white);
}

.eht__head-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
}

.eht__head-text i {
  --font-size: 3.4rem;
}

.eht__item {
  min-height: 26.5rem;
  padding-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  border-radius: 1.5rem;
  -webkit-box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  background: var(--white);
}

.eht__item:hover {
  -webkit-box-shadow: 0 0.4rem 1.5rem 0 #b4d335;
  box-shadow: 0 0.4rem 1.5rem 0 #b4d335;
}

.eht__item img {
  width: auto;
  height: 18rem;
  -o-object-fit: contain;
  object-fit: contain;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.eht__item-title {
  margin: 1.7rem 0.5rem;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue);
}

.eht-internal__box {
  padding: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3.5rem;
  border-radius: 1.5rem;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  background: #fff;
}

.eht-internal__header {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.eht-internal__header-img {
  width: 6.5rem;
}

.eht-internal__header-title {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1d2d8c;
}

.eht-internal__items {
  padding: 4rem;
  display: -ms-grid;
  display: grid;
  gap: 1.5rem;
  border-radius: 1rem;
  background: #f8f9fe;
}

.eht-internal__item {
  padding: 2.4rem 2.4rem 2.4rem 4rem;
  border-radius: 1.5rem;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.eht-internal__item-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2rem;
  line-height: 120%;
  color: #1d2d8c;
}

.eht-internal__item-start {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: right;
  color: #1d2d8c;
}

.eht-internal__item-progress {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  text-align: center;
  color: #636363;
  z-index: 10;
}

.eht-internal__item-progress-track {
  position: relative;
  border-radius: 10rem;
  width: 7rem;
  height: 0.8rem;
  background: rgba(99, 99, 99, 0.2);
}

.eht-internal__item-progress-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10%;
  border-radius: 10rem;
  background-color: #9F248F;
}

.eht-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 7rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1.5rem;
}

.eht-result__title {
  margin-bottom: 6rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  color: var(--blue);
}

.eht-result__success span {
  color: var(--lime-green);
}

.eht-result__fail span {
  color: var(--crimson-red);
}

.eht-result__passed span {
  color: var(--bright-orange);
}

.eht-result__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 4rem;
}

.eht-result__diagramm {
  position: relative;
}

.eht-result__diagramm-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.eht-result__diagramm-text {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 130%;
}

.eht-result__diagramm-ring {
  -webkit-transform: rotate(-90deg) scale(1, -1);
  -ms-transform: rotate(-90deg) scale(1, -1);
  transform: rotate(-90deg) scale(1, -1);
}

.eht-result__diagramm-circle {
  -webkit-transition: stroke-dashoffset 0.35s;
  -o-transition: stroke-dashoffset 0.35s;
  transition: stroke-dashoffset 0.35s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.eht-result__diagramm-value {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-weight: 500;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--medium-gray);
}

.eht-result__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.eht-result__foot .btn {
  min-width: 24.2rem;
}

.exercises {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.exercises__block {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5rem auto;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 1.5rem 2rem 1.8rem 2rem;
  border-radius: 1.5rem;
  background-color: var(--dark-magenta);
  color: var(--white);
}

.speech-page .exercises__block,
.listening-page .exercises__block {
  background-color: var(--blue);
}

.exercises__block-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

.exercises__block-text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 150%;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}

.exercises__block-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.5rem;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

.exercises__block-progress progress {
  background: var(--white-20);
  color: var(--white);
  display: block;
  width: 6.9rem;
  height: 0.8rem;
  border-radius: 10rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  cursor: default;
}

.exercises__block-progress progress::-webkit-progress-bar {
  background: var(--white-20);
  border-radius: 10rem;
}

.exercises__block-progress progress::-webkit-progress-value {
  background: var(--white);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.exercises__block-progress progress[value="0"]::-webkit-progress-value {
  background: var(--white);
}

.exercises__block-progress span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  white-space: nowrap;
}

.exercises__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.exercises__wrapper .btn {
  font-size: 1.6rem;
}

.exercises__wrapper .btn i {
  --font-size: 2.4rem;
}

.exercises__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.exercises__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.2rem;
  border-radius: 1.5rem 1.5rem 2rem 2rem;
}

.exercises__item--success .exercises__item-progress--wrap i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.exercises__item--lock {
  opacity: 0.4;
}

.exercises__item--lock .exercises__item-count {
  background-color: var(--medium-gray);
}

.exercises__item--lock .exercises__item-title {
  color: var(--medium-gray);
}

.exercises__item:nth-child(2) .exercises__item-count {
  background-color: var(--bright-orange);
}

.exercises__item:nth-child(2) .exercises__item-progress progress {
  color: var(--bright-orange);
}

.exercises__item:nth-child(2) .exercises__item-progress progress::-webkit-progress-value {
  background: var(--bright-orange);
}

.exercises__item:nth-child(2) .exercises__item-progress progress[value="0"]::-webkit-progress-value {
  background: var(--bright-orange);
}

.exercises__item-head {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 6rem 1.7rem 1fr 1.7rem auto;
  grid-template-columns: 6rem 1fr auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem 1.7rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 0.5rem 2.8rem 0.5rem 0.5rem;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.exercises__item-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  background-color: var(--dark-magenta);
  border-radius: 1rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-bottom: auto;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
}

.exercises__item-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.exercises__item-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 120%;
  color: var(--blue);
  margin-top: 0.3rem;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

.exercises__item-text {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 150%;
  color: var(--medium-gray);
  margin-bottom: 0.5rem;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}

.exercises__item-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

.exercises__item-progress progress {
  background: var(--medium-gray-20);
  color: var(--lime-green);
  display: block;
  width: 6.9rem;
  height: 0.8rem;
  border-radius: 10rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  cursor: default;
}

.exercises__item-progress progress::-webkit-progress-bar {
  background: var(--medium-gray-20);
  border-radius: 10rem;
}

.exercises__item-progress progress::-webkit-progress-value {
  background: var(--lime-green);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.exercises__item-progress progress[value="0"]::-webkit-progress-value {
  background: var(--lime-green);
}

.exercises__item-progress--wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.6rem;
}

.exercises__item-progress--wrap span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--medium-gray);
}

.exercises__item-progress--wrap i {
  --font-size: 1.3rem;
  display: none;
  color: var(--lime-green);
}

.exercises__item-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.6rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 0 0 2rem 2rem;
  padding: 2rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.exercises__item-blocks {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.exercises__item-block {
  --item-bg-color: var(--white);
  --item-border-color: var(--medium-gray);
  --item-icon-color: var(--medium-gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-height: 12rem;
  background-color: var(--item-bg-color);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 2rem;
  border: 0.2rem solid var(--item-border-color);
  padding: 1rem 1rem 1.5rem 1rem;
  opacity: 0.4;
}

.exercises__item-block--success {
  --item-bg-color: var(--lime-green-20);
  --item-border-color: var(--lime-green);
  --item-icon-color: var(--lime-green);
  opacity: 1;
}

.exercises__item-block--success .exercises__item-block--check i {
  font-size: 1.3rem;
}

.exercises__item-block--success .exercises__item-block--check i::before {
  content: "\e909";
}

.exercises__item-block--fail {
  --item-bg-color: var(--bright-orange-20);
  --item-border-color: var(--bright-orange);
  --item-icon-color: var(--bright-orange);
  opacity: 1;
}

.exercises__item-block--fail .exercises__item-block--check i {
  border: 0.2rem dashed var(--item-icon-color);
  background: transparent;
}

.exercises__item-block--fail .exercises__item-block--check i::before {
  display: none;
}

.exercises__item-block--check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
}

.exercises__item-block--check i {
  --font-size: 2.4rem;
  color: var(--white);
  background-color: var(--item-icon-color);
}

.exercises__item-block--check span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.exercises__item-block--wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.exercises__item-block--title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exercises__item-block--text {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.exercises__item-placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.3rem;
  padding: 1.2rem 0;
}

.exercises__item-placeholder i {
  --font-size: 2.4rem;
  color: var(--white-40);
  background-color: var(--medium-gray);
}

.exercises__item-placeholder span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.exercises__checkpoint {
  --checkpoint-color: var(--medium-gray);
  --checkpoint-bg-color: var(--white);
  --checkpoint-icon-bg-color: var(--medium-gray);
  --checkpoint-border-color: var(--medium-gray);
  --checkpoint-img-color: var(--medium-gray-20);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem 3.4rem 1rem 1rem;
  border-radius: 2rem;
  border: 0.2rem solid var(--checkpoint-border-color);
  background-color: var(--checkpoint-bg-color);
}

.exercises__checkpoint--success {
  --checkpoint-color: var(--blue);
  --checkpoint-bg-color: var(--lime-green-20);
  --checkpoint-icon-bg-color: var(--lime-green);
  --checkpoint-border-color: var(--lime-green);
  --checkpoint-img-color: var(--lime-green);
}

.exercises__checkpoint--success .exercises__checkpoint-text i {
  font-size: 1.3rem;
}

.exercises__checkpoint--success .exercises__checkpoint-text i::before {
  content: "\e909";
}

.exercises__checkpoint--lock {
  opacity: 0.4;
}

.exercises__checkpoint--lock .exercises__checkpoint-btn {
  --btn-border-color: var(--medium-gray);
  --btn-color: var(--medium-gray);
}

.exercises__checkpoint-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 10rem;
  height: 10rem;
  background-color: var(--checkpoint-img-color);
  border-radius: 1rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.exercises__checkpoint-img img {
  width: auto;
  height: 7rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.exercises__checkpoint-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.exercises__checkpoint-subtitle {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exercises__checkpoint-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 120%;
  color: var(--checkpoint-color);
}

.exercises__checkpoint-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.exercises__checkpoint-text i {
  --font-size: 2.4rem;
  background-color: var(--checkpoint-icon-bg-color);
  color: var(--white);
}

.exercises__checkpoint-text span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.help {
  margin-bottom: 4rem;
}

.help__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1.5rem;
  padding: 4rem 4rem 4rem 4rem;
}

.help__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 6.7rem;
}

.help__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  max-width: 75rem;
  width: 100%;
}

.help__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: var(--white);
  border-radius: 1.5rem;
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border: 0.2rem solid transparent;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.help__item.accordion-item--active {
  background-color: var(--ghost-white);
  border-color: #E4E8EF;
  border-radius: 1.2rem;
}

.help__item-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem 2rem;
}

.help__item-title {
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 180%;
  color: var(--medium-gray);
}

.accordion-item--active .help__item-title {
  color: var(--dark-magenta);
}

.help__item-icon {
  width: 1rem;
  height: 1rem;
}

.help__item-body {
  padding: 0 2rem 0 2rem;
}

.accordion-item--active .help__item-body {
  padding: 0 2rem 2rem 2rem;
}

.help__item-content {
  max-width: 45rem;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 150%;
  color: #022A4A;
}

.help__bg {
  width: auto;
  height: 43.8rem;
  margin-top: -1.1rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.hero__inner {
  padding: 5.8rem 0 5.5rem;
  position: relative;
}

.hero__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3.6rem;
  max-width: 60rem;
}

.hero__title {
  position: relative;
  z-index: 2;
}

.hero__title h1 {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 110%;
  color: var(--blue);
}

.hero__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.hero__bg {
  max-width: 87.4rem;
  width: auto;
  height: 49rem;
  position: absolute;
  top: -1.3rem;
  right: -2.6rem;
  z-index: 1;
}

.hero__bg img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.lessons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.lessons__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
  padding-bottom: 3rem;
}

.lessons__block--1 .lessons__cover {
  top: -0.7rem;
  right: 10.2rem;
}

.lessons__block--1 .lessons__item--1 {
  top: 0;
  left: 5.7rem;
}

.lessons__block--1 .lessons__item--2 {
  top: 10.2rem;
  left: 13.1rem;
}

.lessons__block--1 .lessons__item--3 {
  top: 21.4rem;
  left: 18.7rem;
}

.lessons__block--1 .lessons__item--4 {
  top: 29.6rem;
  left: 28.7rem;
}

.lessons__block--1 .lessons__item--5 {
  top: 31.2rem;
  left: 41.1rem;
}

.lessons__block--1 .lessons__item--6 {
  top: 42.8rem;
  left: 46.6rem;
}

.lessons__block--1 .lessons__item--7 {
  top: 44.9rem;
  left: 58.9rem;
}

.lessons__block--2 .lessons__cover {
  top: 14.5rem;
  left: 3.2rem;
}

.lessons__block--2 .lessons__item--1 {
  top: 0;
  left: 24.5rem;
}

.lessons__block--2 .lessons__item--2 {
  top: 10.2rem;
  left: 32.6rem;
}

.lessons__block--2 .lessons__item--3 {
  top: 14.2rem;
  left: 44.8rem;
}

.lessons__block--2 .lessons__item--4 {
  top: 18.2rem;
  left: 57rem;
}

.lessons__block--2 .lessons__item--5 {
  top: 28.4rem;
  left: 65.6rem;
}

.lessons__block--2 .lessons__item--6 {
  top: 40.8rem;
  left: 61.2rem;
}

.lessons__block--2 .lessons__item--7 {
  top: 44.8rem;
  left: 48.5rem;
}

.lessons__block--2 .lessons__item-block i {
  color: var(--midnight-blue);
}

.lessons__heads {
  height: 11rem;
  margin-bottom: 7rem;
  position: -webkit-sticky;
  position: sticky;
  top: 2rem;
  z-index: 100;
}

.lessons__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  padding: 1.5rem 2.4rem 1.8rem 2rem;
  border-radius: 1.5rem;
  background-color: var(--dark-magenta);
  width: 100%;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  pointer-events: none;
  color: var(--white);
  position: absolute;
  top: 0;
  left: 0;
}

.lessons__head--show {
  opacity: 1;
  pointer-events: all;
}

.lessons__head--purple {
  background-color: var(--dark-magenta);
}

.lessons__head--blue {
  background-color: var(--blue);
}

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

.lessons__head-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
}

.lessons__head-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
}

.lessons__head-text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 150%;
}

.lessons__body {
  min-height: 55.1rem;
  position: relative;
}

.lessons__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 10.2rem;
  height: 10.2rem;
  border-radius: 50%;
  border: 0.2rem dashed var(--midnight-blue-30);
  position: absolute;
}

.lessons__item--active {
  border: 0;
  cursor: pointer;
}

.lessons__item--active .lessons__item-block {
  background-color: var(--deep-blue);
  color: var(--white);
}

.lessons__item--1 {
  border: 0.2rem solid var(--lime-green);
  color: var(--white);
}

.lessons__item--1 .lessons__item-block {
  background-color: var(--lime-green);
}

.lessons__item--1 .icon-uzor {
  --font-size: 5rem;
}

.lessons__item-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.6rem;
  padding: 1.7rem 4.6rem 1.2rem 4.6rem;
  border-radius: 10rem;
  background-color: var(--midnight-blue);
  text-align: center;
  position: absolute;
  top: 1.1rem;
  left: calc(100% - 1.1rem);
}

.lessons__item-wrap p {
  font-weight: 700;
  font-size: 2rem;
  line-height: 100%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
}

.lessons__item-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.4rem;
}

.lessons__item-wrapper span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  text-align: center;
  text-transform: uppercase;
  color: var(--white-50);
}

.lessons__item-wrapper progress {
  background: var(--white-20);
  color: var(--mint);
  display: block;
  width: 8.5rem;
  height: 0.4rem;
  border-radius: 0.4rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  cursor: default;
}

.lessons__item-wrapper progress::-webkit-progress-bar {
  background: var(--white-20);
  border-radius: 0.4rem;
}

.lessons__item-wrapper progress::-webkit-progress-value {
  background: var(--mint);
  border-radius: 0.4rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.lessons__item-wrapper progress[value="0"]::-webkit-progress-value {
  background: var(--mint);
}

.lessons__item-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: var(--light-gray-30);
  color: var(--medium-gray);
}

.lessons__item-block i {
  --font-size: 3.2rem;
}

.lessons__cover {
  width: auto;
  height: 41.7rem;
  position: absolute;
}

.lessons__cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.lessons__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3.7rem;
  margin-bottom: 4.6rem;
}

.lessons__wrap .exercises__checkpoint {
  width: 100%;
}

.lessons__wrap-cover {
  width: auto;
  height: 10.7rem;
}

.lessons__wrap-cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.levels__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.levels__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[6];
  grid-template-columns: repeat(6, 1fr);
}

.levels__item--lock {
  pointer-events: none;
  opacity: 0.4;
}

.levels__item--lock .levels__item-btn {
  --btn-border-color: var(--medium-gray);
  --btn-color: var(--medium-gray);
}

.levels__item--lock .levels__item-btn i {
  background-color: var(--medium-gray);
  color: var(--white);
}

.levels__item--beginner {
  --item-color: var(--dark-magenta);
  --item-color-2: var(--dark-magenta-10);
}

.levels__item--middle {
  --item-color: var(--blue);
  --item-color-2: var(--blue-10);
}

.levels__item--pro {
  --item-color: var(--medium-gray);
  --item-color-2: var(--medium-gray-10);
}

.levels__item-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
}

.levels__item-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
}

.levels__item-text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 150%;
}

.levels__item-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 1.6rem;
}

.levels__item-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.levels__item-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.levels__item-wrap--item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--item-color-2);
  border-radius: 10rem;
}

.levels__item-wrap--item i {
  --font-size: 2.4rem;
  color: var(--item-color);
}

.levels__item-wrap--item p {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.levels__item-wrap--text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--medium-gray);
}

.levels__item-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 1rem;
}

.levels__item-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.9rem;
}

.levels__item-progress progress {
  background: var(--medium-gray-20);
  color: var(--item-color);
  display: block;
  width: 6.9rem;
  height: 0.8rem;
  border-radius: 10rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  cursor: default;
}

.levels__item-progress progress::-webkit-progress-bar {
  background: var(--medium-gray-20);
  border-radius: 10rem;
}

.levels__item-progress progress::-webkit-progress-value {
  background: var(--item-color);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.levels__item-progress progress[value="0"]::-webkit-progress-value {
  background: var(--medium-gray-20);
}

.levels__item-progress span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--medium-gray);
}

.levels__item-btn {
  --btn-height: fit-content;
  gap: 1rem;
  padding: 1.5rem var(--btn-padding-x);
}

.levels__item-btn i {
  --font-size: 2.4rem;
}

.privacy {
  margin-bottom: 3rem;
}

.privacy__content p {
  margin-bottom: 1rem;
}

.privacy__content a {
  color: var(--blue);
}

.profile {
  padding: 4rem 4rem 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4rem;
  border-radius: 1.5rem;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  background: #fff;
}

.profile h1.profile__title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  color: #1D2D8C;
}

.profile h2.profile__title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 120%;
  color: #1D2D8C;
}

.profile-edit__inputs {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 36.8rem 5rem 36.8rem;
  grid-template-columns: repeat(2, 36.8rem);
  gap: 2rem 5rem;
}

.profile-edit__inputs-col {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.profile-edit__inputs-col .btn {
  width: 100%;
}

.profile .user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
}

.profile .user__avatar {
  width: 17rem;
  height: 17rem;
}

.profile .user__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.4rem;
}

.profile .user__info {
  display: -ms-grid;
  display: grid;
  gap: 0.8rem;
  color: var(--medium-gray);
}

.achivments {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
}

.achivments-page .general__inner {
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.achivments-page .general__content {
  margin-top: 0;
}

.achivments__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.achivments__header-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.3rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--blue);
}

.achivments__header-all i:not(.profile-page .achivments__header-all i) {
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.achivments__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.achivments__item {
  width: 100%;
  padding: 1.8rem 3.6rem 1.8rem 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem 2.7rem;
  border: 0.2rem solid #e4e8ef;
  border-radius: 1.6rem;
}

.achivments__item:nth-child(3n+2) {
  border-color: #e3672a;
}

.achivments__item:nth-child(3n+3) {
  border-color: #fccd05;
}

.achivments__item-img {
  width: 6.8rem;
  height: 6.2rem;
}

.achivments__item-descr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.8rem;
}

.achivments__item-title {
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
  color: #636363;
}

.achivments__item-subtitle {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: #9F248F;
}

.achivments__item-progress {
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  text-align: right;
  color: #636363;
}

.achivments__item-progress-track {
  position: relative;
  width: 34rem;
  height: 1rem;
  border-radius: 1.6rem;
  background-color: rgba(99, 99, 99, 0.2);
  overflow: hidden;
}

.achivments__item-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 30%;
  border-radius: 1.6rem;
  background-color: #b4d335;
}

.subscription {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
}

.subscription__box {
  width: 100%;
  padding: 1.4rem 1.4rem 1.4rem 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.5rem;
  border-radius: 2rem;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  background: #fff;
}

.subscription__title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #636363;
}

.subscription__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.5rem;
}

.subscription__change-tarif {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 120%;
  text-align: right;
  color: #1d2d8c;
}

.rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.rating__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.rating__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1rem 4.5rem 1rem 2.9rem;
  background-color: var(--white);
  border: 0.2rem solid transparent;
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1.5rem;
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
}

.rating__item--you {
  background-color: var(--blue);
  color: var(--white);
}

.rating__item:nth-child(1) {
  border-color: var(--amber-yellow);
}

.rating__item:nth-child(1) .rating__item-count {
  color: var(--amber-yellow);
}

.rating__item:nth-child(2) {
  border-color: var(--light-gray);
}

.rating__item:nth-child(2) .rating__item-count {
  color: var(--light-gray);
}

.rating__item:nth-child(3) {
  border-color: var(--tangerine);
}

.rating__item:nth-child(3) .rating__item-count {
  color: var(--tangerine);
}

.rating__item-count {
  display: block;
  width: 4.1rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 120%;
  width: 2.7rem;
}

.rating__item-photo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 1rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.rating__item-photo img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.rating__item-name {
  width: 100%;
  margin-right: 3.9rem;
}

.rating__item--you .rating__item-name::after {
  content: "Это вы";
  display: block;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 120%;
}

.rating__item-status {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 120%;
  width: 100%;
  margin-right: auto;
}

.rating__item-stars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
  margin-right: 3rem;
}

.rating__item-trophies {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
}

.rating__item-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  overflow: hidden;
}

.rating__item-img img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.rating__btn {
  margin: 0 auto;
}

.scenes-choice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.scenes-choice__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.scenes-choice__item {
  --scenes-bg-color: var(--white);
  --scenes-border-color: var(--medium-gray-30);
  --scenes-letter-color: var(--blue);
  --scenes-letter-bg-color: var(--medium-gray-20);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  border: 0.2rem solid var(--scenes-border-color);
  background-color: var(--scenes-bg-color);
  -webkit-filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  border-radius: 1rem;
  padding: 1rem;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.scenes-choice__item:hover {
  --scenes-bg-color: var(--lime-green-20);
  --scenes-border-color: var(--lime-green);
  --scenes-letter-color: var(--white);
  --scenes-letter-bg-color: var(--lime-green);
}

.scenes-choice__item.scenes-item-js--active {
  --scenes-bg-color: var(--dark-magenta-20);
  --scenes-border-color: var(--dark-magenta);
  --scenes-letter-color: var(--white);
  --scenes-letter-bg-color: var(--dark-magenta);
}

.scenes-choice__item-letter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background-color: var(--scenes-letter-bg-color);
  border-radius: 0.5rem;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 700;
  font-size: 2rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--scenes-letter-color);
}

.scenes-choice__item-text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.scenes-choice__audio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 2rem;
  background-color: var(--ghost-white);
  border-radius: 1rem;
}

.scenes-choice__audio-suptitle {
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.scenes-choice__audio-title {
  margin-bottom: 2rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 120%;
  color: var(--blue);
}

.scenes-choice__audio-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.6rem;
}

.scenes-choice__audio-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--bright-orange);
  color: var(--white);
}

.scenes-choice__audio-btn i {
  --font-size: 3.2rem;
}

.scenes-choice__audio-icon {
  height: 4rem;
}

.scenes-choice__audio-icon img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.scenes-choice__audio-time {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--bright-orange);
}

.scenes-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.scenes-lesson-page .scenes-inner {
  gap: 0;
}

.scenes-inner__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--bright-orange-20);
  border-radius: 0px 0px 2rem 2rem;
  min-height: 22rem;
  margin-top: -3rem;
  position: relative;
}

.scenes-lesson-page .scenes-inner__head {
  border-radius: 2rem 2rem 0px 0px;
  margin-top: 0;
}

.scenes-result-page .scenes-inner__head {
  background-color: var(--lime-green-20);
}

.scenes-inner__head-img {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 14.6rem;
}

.scenes-inner__head-img img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.scenes-inner__head-wrap {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--white);
  border-radius: 20rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 150%;
  color: var(--medium-gray);
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}

.scenes-lesson-page .scenes-inner__body {
  padding: 4rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 0 0 2rem 2rem;
}

.scenes-inner__title {
  margin-bottom: 1.2rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  color: var(--blue);
}

.scenes-result-page .scenes-inner__title {
  margin-bottom: 2rem;
}

.scenes-inner__subtitle {
  margin-bottom: 3rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.scenes-inner__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.scenes-inner__tags-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20rem;
  background-color: var(--dark-magenta-10);
}

.scenes-inner__tags-item i {
  --font-size: 2.4rem;
  color: var(--dark-magenta);
}

.scenes-inner__tags-item span {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.scenes-inner__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding: 2rem 13.7rem 2rem 2rem;
  border-radius: 1rem;
  background-color: var(--medium-gray-10);
}

.scenes-inner__text p {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.scenes-inner__text-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
}

.scenes-inner__text-item {
  padding: 0.5rem 1rem;
  background-color: var(--white);
  border-radius: 20rem;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--blue);
}

.scenes-inner__text-item span {
  font-weight: 700;
}

.scenes-inner__block {
  margin-bottom: 2rem;
}

.scenes-inner .task__result-items {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 2rem;
}

.scenes-inner .task__control {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.scenes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.scenes .training__item-head {
  border-radius: 1.5rem;
}

.scenes__level {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.scenes__level-title {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--medium-gray);
}

.scenes__level-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.scenes__level-item:nth-child(1) {
  --scenes-item-color: var(--dark-magenta);
}

.scenes__level-item:nth-child(2) {
  --scenes-item-color: var(--bright-orange);
}

.scenes__level-item:nth-child(3) {
  --scenes-item-color: var(--blue);
}

.scenes__level-item .form-radio-label {
  gap: 0.5rem;
}

.scenes__level-item .form-radio-input:checked + .form-radio-item::before {
  background-color: var(--scenes-item-color);
}

.scenes__level-item .form-radio-item::before {
  background-color: transparent;
}

.scenes__level-item .form-radio-text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--scenes-item-color);
}

.scenes__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5rem;
}

.scenes__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.5rem;
}

.scenes__item-title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--medium-gray);
}

.scenes__item-body {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.scenes__block {
  --item-bg-color: var(--white);
  --item-border-color: var(--medium-gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  min-height: 22rem;
  padding: 1rem 1rem 3rem 1rem;
  background-color: var(--item-bg-color);
  border: 0.2rem solid var(--item-border-color);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 2rem;
  position: relative;
}

.scenes__block--success {
  --item-bg-color: var(--lime-green-20);
  --item-border-color: var(--lime-green);
  opacity: 1;
}

.scenes__block--success .scenes__block-check i {
  font-size: 1.3rem;
}

.scenes__block--success .scenes__block-check i::before {
  content: "\e909";
}

.scenes__block--fail {
  --item-bg-color: var(--bright-orange-20);
  --item-border-color: var(--bright-orange);
  opacity: 1;
}

.scenes__block--fail .scenes__block-check i {
  border: 0.2rem dashed var(--item-border-color);
  background: transparent;
}

.scenes__block--fail .scenes__block-check i::before {
  display: none;
}

.scenes__block--lock {
  -webkit-filter: saturate(0%);
  filter: saturate(0%);
  opacity: 0.4;
}

.scenes__block-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}

.scenes__block-check i {
  --font-size: 2.4rem;
  background-color: var(--item-border-color);
  color: var(--white);
}

.scenes__block-check span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.scenes__block-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 9rem;
}

.scenes__block-img img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.scenes__block-title {
  max-width: 16rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scenes__progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.4rem;
  width: 100%;
}

.scenes__progress-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.scenes__progress-title {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--dark-magenta);
}

.scenes__segment {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 0.4rem;
  background-color: var(--blue-20);
  border-radius: 3rem;
  position: relative;
  overflow: hidden;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.scenes__segment.current::before {
  width: 100%;
  background-color: var(--dark-magenta);
}

.scenes__segment.passed::before {
  width: 100%;
  background-color: var(--lime-green);
}

.scenes__segment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--blue-20);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.services {
  padding: 4rem 0;
  overflow: hidden;
}

.services__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 2rem;
}

.services__slider {
  width: calc(66.66666% + 2rem);
  z-index: 1;
}

.services__slide {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
  -o-transition: opacity 0.5s ease, visibility 0.5s ease;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.services__slide.swiper-slide-visible {
  opacity: 1;
  visibility: visible;
}

.services__item {
  height: 100%;
  padding: 2.5rem 2.5rem 1.4rem 7rem;
  border-radius: 2rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  position: relative;
}

.services__item--main {
  width: 33.33334%;
  height: auto;
  padding: 2.5rem 2.5rem 1.4rem 15rem;
  background-color: var(--blue);
  color: var(--white);
  z-index: 2;
}

.services__item--main .services__item-content {
  gap: 1.6rem;
}

.services__item--main .services__item-title {
  color: var(--white);
}

.services__item--main .services__item-text {
  color: var(--white-75);
  padding-right: 4.5rem;
}

.services__item--main .services__item-icon {
  width: 3.2rem;
  height: 3.2rem;
  top: unset;
  right: 4rem;
  bottom: 3.7rem;
  left: unset;
}

.services__item--main .services__item-icon i {
  --font-size: 3.2rem;
}

.services__item-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.services__item-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 120%;
  color: var(--dark-magenta);
}

.services__item-text {
  font-size: 1.4rem;
}

.services__item-icon {
  width: auto;
  height: 3rem;
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.services__item-icon svg {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.services__item-img {
  width: auto;
  height: 15.6rem;
  position: absolute;
  top: -2.4rem;
  left: 3rem;
}

.services__item-img img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-transform: rotate(11.8deg);
  -ms-transform: rotate(11.8deg);
  transform: rotate(11.8deg);
}

.speech .scenes__block-img {
  height: 6.5rem;
  margin-bottom: 1.5rem;
}

.speech .exercises__item-block:not(.exercises__item-block--fail, .exercises__item-block--success) .scenes__block-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.speech .exercises__item-blocks {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 16.5rem));
}

.speech .exercises__item-block--fail .exercises__item-block--check i {
  background-color: transparent;
  border: 0.2rem dashed var(--item-icon-color);
}

.task-speed-page .task__block-head {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.task__head {
  padding: 1.5rem 2rem 3rem 2rem;
  background-color: var(--blue);
  border-radius: 1.5rem 1.5rem 0 0;
  color: var(--white);
}

.task__head-title {
  margin-bottom: 0.5rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
}

.task__head-text {
  margin-bottom: 2.8rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 150%;
}

.task {
  /* Контейнер для полосок */
}

.task__progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8rem;
  width: 100%;
}

.task {
  /* Базовый серый цвет сегмента */
}

.task__segment {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 0.4rem;
  background-color: var(--white-30);
  border-radius: 3rem;
  position: relative;
  overflow: hidden;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.task__segment.current::before {
  width: 100%;
  background-color: var(--ghost-white);
}

.task__segment.passed::before {
  width: 100%;
  background-color: var(--lime-green);
}

.task__segment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--white-30);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.task__body {
  padding: 4rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 0 0 2rem 2rem;
}

.task__body .js-item {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.task__block {
  margin-bottom: 3rem;
}

.task__block-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2rem;
}

.task__block-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 120%;
  color: var(--blue);
}

.task__block-text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.task__block-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.task__block-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--blue);
}

.task__block-time i {
  --font-size: 3.4rem;
}

.task__block-time span {
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 130%;
  text-align: right;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.task__matching {
  --item-border-color: var(--medium-gray-30);
  --item-bg-color: var(--white);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.6rem 1fr 1.6rem 1fr 1.6rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

.task__matching .js-item-active {
  --item-border-color: var(--lime-green);
  --item-bg-color: var(--lime-green-20);
}

.task__matching-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 1rem;
  border: 0.2rem solid var(--item-border-color);
  background-color: var(--item-bg-color);
  height: 22.6rem;
  -webkit-filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
}

.task__matching-img {
  width: auto;
  height: 100%;
}

.task__matching-img img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__choice {
  --item-letter-color: var(--blue);
  --item-letter-bg-color: var(--medium-gray-20);
  --item-border-color: var(--medium-gray-30);
  --item-bg-color: var(--white);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.task__choice .js-item-active {
  --item-letter-color: var(--white);
  --item-letter-bg-color: var(--lime-green);
  --item-border-color: var(--lime-green);
  --item-bg-color: var(--lime-green-20);
}

.task__choice-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 0.2rem solid var(--item-border-color);
  background-color: var(--item-bg-color);
  -webkit-filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
}

.task__choice-item:hover:not(.task__choice-item.js-item-active) {
  background-color: #f8f9fe;
}

.task__choice-letter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: var(--item-letter-bg-color);
  border-radius: 0.5rem;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 700;
  font-size: 2rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--item-letter-color);
}

.task__choice-text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__recognition-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.7rem;
  width: 100%;
  padding: 2rem;
  background: var(--ghost-white);
  border-radius: 1rem;
}

.task__recognition-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--bright-orange);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.task__recognition-icon i {
  --font-size: 3.2rem;
  color: var(--white);
}

.task__recognition-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 4rem;
}

.task__recognition-block img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__recognition-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.8rem;
}

.task__recognition-time {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--bright-orange);
}

.task__recognition-speed {
  padding: 0.5rem 1rem;
  border-radius: 20rem;
  background-color: var(--blue-20);
}

.task__recognition-speed span {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--blue);
}

.task__recognition-input {
  min-height: 6rem;
  background: var(--white);
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  padding: 0 2.3rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__recognition-input::-webkit-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__recognition-input::-moz-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__recognition-input:-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__recognition-input::-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__recognition-input::placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__pairs {
  --item-border-color: var(--medium-gray-30);
  --item-bg-color: var(--white);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 12.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 12.5rem;
  position: relative;
}

.task__pairs .js-item-active {
  --item-border-color: var(--lime-green);
  --item-bg-color: var(--lime-green-20);
}

.task__pairs-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.task__pairs-item {
  padding: 2rem;
  background-color: var(--item-bg-color);
  border: 0.2rem solid var(--item-border-color);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  cursor: pointer;
  position: relative;
  z-index: 3;
}

.task__pairs-item.js-item-connected {
  pointer-events: none;
}

.task__select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  background: var(--body-bg);
  border-radius: 1rem;
}

.task__select-cover {
  max-width: 24rem;
  height: 27.5rem;
}

.task__select-cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__select-text {
  max-width: 31rem;
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.task__fill {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.task__fill--complete .task__fill-text {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.task__fill--complete .task__fill-input {
  width: 14.8rem;
}

.task__fill--complete .task__fill-content {
  max-width: 100%;
}

.task__fill--gap .task__fill-input {
  width: 11.6rem;
  background-color: var(--white);
  border: 0.2rem solid var(--medium-gray-30);
}

.task__fill-head {
  background: var(--ghost-white);
  border-radius: 1rem;
  padding: 2rem 3rem;
}

.task__fill-span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2.5rem;
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
  color: var(--black);
}

.task__fill-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.task__fill-input {
  width: 8.4rem;
  height: 6rem;
  border: 0.2rem dashed rgba(99, 100, 99, 0.3);
  -webkit-filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  border-radius: 1rem;
  padding: 0 1.5rem;
}

.task__fill-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 2.6rem;
}

.task__fill-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  max-width: 55.5rem;
  width: 100%;
}

.task__fill-cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28.2rem;
}

.task__fill-cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__building {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3.4rem;
  padding: 3rem;
  background-color: var(--ghost-white);
  border-radius: 1rem;
}

.task-matching .task__building {
  gap: 3rem;
  background-color: transparent;
  padding: 0;
}

.task__building-col {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2.2rem 1fr 2.2rem 1fr 2.2rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem;
}

.task-matching .task__building-col:nth-child(2) {
  padding: 2rem 2.5rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__building-null {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 6rem;
  border: 0.2rem dashed rgba(99, 100, 99, 0.3);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  text-align: center;
}

.task__building-null.js-item-active {
  border: 0.2rem solid var(--lime-green);
  background-color: var(--lime-green-20);
}

.task-matching .task__building-null.js-item-active {
  border: 0.2rem solid #E1E2E1;
  background-color: var(--white-20);
}

.task__building-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 6rem;
  background-color: var(--white);
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  padding: 2rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  text-align: center;
}

.task__building-item.js-item-active {
  opacity: 0.6;
  pointer-events: none;
}

.task__formal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.task__formal-head {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.task__formal-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 0 0 4rem;
  border-radius: 1rem;
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  color: var(--medium-gray);
}

.task__formal-cover {
  width: auto;
  height: 22.6rem;
}

.task__formal-cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__formal-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.7rem;
}

.task__formal-title {
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 120%;
}

.task__formal-text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__formal-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 3rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__formal-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--white);
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 42rem;
  width: 100%;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  text-align: center;
}

.task__formal-side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--blue);
}

.task__formal-side i {
  --font-size: 3.2rem;
}

.task__formal-right {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.task__formal-left i {
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.task__order {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3rem 1fr 3rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 3rem;
  padding: 3rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__item {
  --item-border-color: var(--medium-gray-30);
  --item-bg-color: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 6rem;
  background-color: var(--item-bg-color);
  border: 0.2rem solid var(--item-border-color);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__item.js-item-active {
  --item-border-color: var(--lime-green);
  --item-bg-color: var(--lime-green-20);
}

.task__blank-cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  height: 19.7rem;
  margin-top: -5rem;
}

.task__blank-cover img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__blank .task__chat {
  margin-top: -2rem;
}

.task__creative {
  padding-top: 6rem;
}

.task__chat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.6rem;
}

.task__chat-item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 6rem 1.2rem auto;
  grid-template-columns: 6rem auto;
  -ms-grid-rows: 1fr 0.5rem auto;
  grid-template-rows: 1fr auto;
  gap: 0.5rem 1.2rem;
}

.task__chat-item > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.task__chat-item > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.task__chat-item > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.task__chat-item > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.task__chat-item--reverse {
  -ms-grid-columns: auto 6rem;
  grid-template-columns: auto 6rem;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
}

.task__chat-item--reverse > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.task__chat-item--reverse > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.task__chat-item--reverse > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.task__chat-item--reverse > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.task__chat-item--reverse .task__chat-avatar {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
}

.task__chat-item--reverse .task__chat-name {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  text-align: right;
}

.task__chat-item--reverse .task__chat-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.8rem;
  padding-left: 0;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

.task__dialogue .task__chat-item--reverse .task__chat-wrap {
  padding-right: 4.7rem;
  padding-left: 2rem;
}

.task__chat-add {
  width: 100%;
  min-height: 6rem;
  background: var(--white);
  border-radius: 1rem;
  padding: 0 2.3rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__chat-add::-webkit-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__chat-add::-moz-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__chat-add:-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__chat-add::-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__chat-add::placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__chat-wrapper.task__chat-wrap {
  padding: 0;
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  max-width: 49rem;
}

.task__chat-input {
  width: 12.7rem;
  height: 6rem;
  border: 0.2rem dashed var(--medium-gray-30);
  -webkit-filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  filter: drop-shadow(0px 4px 15px rgba(94, 58, 67, 0.15));
  border-radius: 1rem;
  padding: 0 1.7rem;
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
  color: var(--blue);
}

.task__chat-avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}

.task__chat-avatar img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__chat-content {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
}

.task__chat-name {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--medium-gray);
}

.task__chat-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--ghost-white);
  border-radius: 0 1rem 1rem 1rem;
  padding: 0 1.7rem;
  max-width: 28.4rem;
  width: 100%;
  min-height: 6rem;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}

.task__chat-wrap p {
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
  color: var(--blue);
}

.task__chat-item--reverse .task__chat-wrap {
  border-radius: 1rem 0 1rem 1rem;
}

.scenes-choice__chat .task__chat-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1rem 2rem;
}

.scenes-choice__chat .task__chat-wrap p {
  font-size: 1.6rem;
}

.scenes-choice__chat .task__chat-wrap span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.task__chat-wrap.task__chat-wrap--dotted {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem !important;
  border: 0.2rem dashed var(--dark-magenta);
}

.task__chat-wrap.task__chat-wrap--dotted p {
  color: var(--dark-magenta);
}

.task__chat-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--bright-orange);
}

.task__chat-btn i {
  --font-size: 2.4rem;
  color: var(--white);
}

.scenes-lesson-page .task__chat-btn {
  background-color: var(--dark-magenta);
}

.task__fix {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.4rem;
  padding: 3rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__fix-text {
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.task__fix-input {
  min-height: 6rem;
  background: var(--white);
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  padding: 0 2.3rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__fix-input::-webkit-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__fix-input::-moz-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__fix-input:-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__fix-input::-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__fix-input::placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__situation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 0 0 6.5rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__situation-text {
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.task__situation-cover {
  height: 27.7rem;
}

.task__situation-cover img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__situation-textarea {
  width: 100%;
  min-height: 6rem;
  background: var(--white);
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  padding: 2rem 2.3rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__situation-textarea::-webkit-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__situation-textarea::-moz-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__situation-textarea:-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__situation-textarea::-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__situation-textarea::placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__listen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: -1rem;
}

.task__listen-q {
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
}

.task__listen .task__recognition {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
  padding: 2rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__listen .task__recognition-item {
  padding: 0;
}

.task__speak {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
  padding: 5rem 2rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__speak-title {
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.task__speak-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--bright-orange);
}

.task__speak-btn i {
  --font-size: 3.2rem;
  color: var(--white);
}

.task__dialogue {
  padding-top: 3.4rem;
}

.task__describe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem 3rem 3rem 3rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__describe-cover {
  width: auto;
  height: 26.5rem;
  margin: 0 auto;
}

.task__describe-cover img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__describe-textarea {
  width: 100%;
  min-height: 6rem;
  background: var(--white);
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  padding: 2rem 2.3rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__describe-textarea::-webkit-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__describe-textarea::-moz-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__describe-textarea:-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__describe-textarea::-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__describe-textarea::placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.task__review-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2.4rem;
  padding: 3rem 3rem 4rem 3rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
}

.task__review-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.task__review-title {
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.task__review-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--dark-magenta-10);
  border-radius: 20rem;
}

.task__review-time i {
  --font-size: 2.4rem;
  color: var(--dark-magenta);
}

.task__review-time--text {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.task__review-time--text span {
  font-weight: 700;
}

.task__review-input {
  width: 100%;
  min-height: 6rem;
  background: var(--white);
  border: 0.2rem solid var(--medium-gray-30);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1rem;
  padding: 0 2.3rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__review-input::-webkit-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__review-input::-moz-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__review-input:-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__review-input::-ms-input-placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__review-input::placeholder {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black-20);
}

.task__review-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.4rem;
  width: 100%;
}

.task__review-segment {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 0.4rem;
  background-color: var(--medium-gray-20);
  border-radius: 3rem;
  position: relative;
  overflow: hidden;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.task__review-segment.current::before {
  width: 100%;
  background-color: var(--dark-magenta);
}

.task__review-segment.passed::before {
  width: 100%;
  background-color: var(--lime-green);
}

.task__review-segment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--medium-gray-20);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.task__control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem 2rem;
}

.task-checkpoint .task__control {
  width: 100%;
}

.task-checkpoint--fail .task__control {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.task__control-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  display: none;
}

.task__control-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: 2rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.task__control-text i {
  --font-size: 3.2rem;
}

.task__control-success {
  color: var(--lime-green);
}

.task__control-fail {
  color: var(--bright-orange);
}

.task__result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.task-checkpoint .task__result {
  gap: 4rem;
}

.task__result + .task__control {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.task__result-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.task__result-cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  height: 16rem;
  margin-bottom: 1.5rem;
}

.task-checkpoint .task__result-cover {
  height: 14rem;
  margin-bottom: 3rem;
}

.task__result-cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__result-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.task__result-progress progress {
  background: var(--medium-gray-20);
  color: var(--bright-orange);
  display: block;
  width: 6.9rem;
  height: 0.8rem;
  border-radius: 10rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  cursor: default;
}

.task__result-progress progress::-webkit-progress-bar {
  background: var(--medium-gray-20);
  border-radius: 10rem;
}

.task__result-progress progress::-webkit-progress-value {
  background: var(--bright-orange);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.task__result-progress progress[value="0"]::-webkit-progress-value {
  background: var(--medium-gray-20);
}

.task__result-progress span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--medium-gray);
}

.task__result-title {
  margin-bottom: 2rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  text-align: center;
  color: var(--blue);
}

.task-checkpoint .task__result-title {
  margin-bottom: 2.8rem;
  font-size: 2.4rem;
}

.task__result-text {
  margin-bottom: 2.9rem;
  font-weight: 500;
  font-size: 2rem;
  line-height: 110%;
  text-align: center;
  color: var(--lime-green);
}

.task-checkpoint--fail .task__result-text {
  color: var(--bright-orange);
}

.task__result-items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.task-checkpoint-page .task__result-items {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}

.task__result-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.9rem 3rem;
  border-radius: 1rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  text-align: center;
}

.task__result-item span {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2rem;
  line-height: 120%;
  color: var(--dark-magenta);
}

.task__result-item p {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.task__result-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.6rem;
  background-color: var(--ghost-white);
  border-radius: 1rem;
  padding: 1.3rem 3rem 3rem 3rem;
  margin-bottom: 3rem;
}

.task-checkpoint-page .task-checkpoint .task__result-body {
  margin-bottom: 0;
}

.task-checkpoint-page .task__result-body {
  padding: 4rem;
}

.task__result-subtitle {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  text-align: center;
  color: var(--medium-gray);
}

.task__result-blocks {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.task__result-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3.6rem;
  width: 100%;
  padding: 4rem 2rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 0.5rem;
  text-align: center;
  position: relative;
}

.task__result-block--icon {
  color: var(--bright-orange);
}

.task__result-block--icon i {
  --font-size: 3.2rem;
}

.task__result-block--title {
  max-width: 12rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--black);
}

.task__result-link {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  -webkit-text-decoration: dotted !important;
  text-decoration: dotted !important;
  -webkit-text-decoration-line: underline !important;
          text-decoration-line: underline !important;
  color: var(--bright-orange);
  cursor: pointer;
}

.task__result-link:hover + .task__result-wrapper {
  opacity: 1;
  visibility: visible;
}

.task__result-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.8rem;
  padding: 2rem 2rem 2.5rem 2rem;
  border-radius: 0.5rem;
  background-color: var(--blue);
  opacity: 0;
  visibility: 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--white);
  text-align: center;
  position: absolute;
  top: calc(100% - 2.4rem);
  right: 0;
  left: 0;
  z-index: 1;
}

.task__result-wrapper::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 1rem;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE1IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNy4zNjEzMyAwTDE0LjcyMjUgNy41SDAuMDAwMTEyMDU3TDcuMzYxMzMgMFoiIGZpbGw9IiMxRDJEOEMiLz4NCjwvc3ZnPg0K);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -0.6rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.task__result-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
}

.task__result-wrap--title {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--white-50);
}

.task__result-wrap--text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__checkpoint-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.task-checkpoint .task__checkpoint-items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.task__checkpoint-item {
  --item-color: var(--lime-green);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem 2rem;
  border-radius: 1.5rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  overflow: clip;
  padding: 0.5rem 2.3rem 0.5rem 0.5rem;
}

.task__checkpoint-item:nth-child(2) {
  --item-color: var(--dark-magenta);
}

.task__checkpoint-item--block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem 2rem;
  border-radius: 1.5rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  overflow: clip;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 110%;
  text-align: center;
  color: var(--medium-gray);
}

.task__checkpoint-item--success + .task__checkpoint-item--block {
  color: var(--lime-green);
}

.task__checkpoint-item--fail + .task__checkpoint-item--block {
  color: var(--bright-orange);
}

.task__checkpoint-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 9rem;
  height: 9rem;
  background-color: var(--ghost-white);
  border-radius: 1rem;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.task__checkpoint-img img {
  max-width: 100%;
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.task__checkpoint-title {
  width: 100%;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  color: var(--blue);
}

.task__checkpoint-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.9rem;
}

.task__checkpoint-progress progress {
  background: var(--medium-gray-20);
  color: var(--item-color);
  display: block;
  width: 6.9rem;
  height: 0.8rem;
  border-radius: 10rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  cursor: default;
}

.task__checkpoint-progress progress::-webkit-progress-bar {
  background: var(--medium-gray-20);
  border-radius: 10rem;
}

.task__checkpoint-progress progress::-webkit-progress-value {
  background: var(--item-color);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.task__checkpoint-progress progress[value="0"]::-webkit-progress-value {
  background: var(--item-color);
}

.task__checkpoint-progress span {
  min-width: 3.6rem;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--medium-gray);
  white-space: nowrap;
}

.task__done + .task__control {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.task__done-items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.task__done-item {
  --item-color: var(--black);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 4rem 3rem 2rem 3rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 0.5rem;
  text-align: center;
}

.task__done-item--success {
  --item-color: var(--lime-green);
}

.task__done-item--success .task__done-item--icon i::before {
  content: "\e90a";
}

.task__done-item--fail {
  --item-color: var(--bright-orange);
}

.task__done-item--icon {
  color: var(--item-color);
  margin-bottom: 1.6rem;
}

.task__done-item--icon i {
  --font-size: 3.2rem;
}

.task__done-item--title {
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
}

.task__done-item--text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--item-color);
}

.theory {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.theory__bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.8rem;
}

.theory__bar-title {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--blue);
}

.theory__bar-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.theory__bar-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20rem;
  background-color: var(--dark-magenta-10);
}

.theory__bar-item i {
  --font-size: 2.4rem;
  color: var(--dark-magenta);
}

.theory__bar-item span {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.theory__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.theory__head-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  color: var(--blue);
}

.theory__head-text {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 150%;
}

.theory__body {
  margin-bottom: 3rem;
}

.theory__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.theory__item {
  --theory-color: var(--black);
}

.theory__item:not(:first-child) {
  margin-top: -1rem;
}

.theory__item.accordion-item--active {
  z-index: 51 !important;
}

.theory__item.theory--blue {
  --theory-color: var(--blue);
}

.theory__item.theory--orange {
  --theory-color: var(--tangerine);
}

.theory__item.theory--sky-blue {
  --theory-color: var(--sky-blue);
}

.theory__item.theory--purple {
  --theory-color: var(--dark-magenta);
}

.theory__item.theory--red {
  --theory-color: var(--crimson-red);
}

.theory__item-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  padding: 0.5rem 1.9rem 0.5rem 0.5rem;
  background-color: var(--theory-color);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1.5rem;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--white);
}

.accordion-item--active .theory__item-head {
  background-color: var(--white);
  border-radius: 1.5rem 1.5rem 0 0;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  position: relative;
  z-index: 1;
  color: var(--theory-color);
}

.theory__item-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--theory-color);
}

.accordion-item--active .theory__item-count {
  background-color: var(--theory-color);
  color: var(--white);
}

.theory__item-title {
  width: 100%;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 120%;
}

.theory__item-icon {
  width: 3.2rem;
  height: 3.2rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
}

.theory__item-icon::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.accordion-item--active .theory__item-icon::before {
  background-color: var(--theory-color);
}

.theory__item-icon::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  -ms-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-item--active .theory__item-icon::after {
  background-color: var(--theory-color);
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  -ms-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}

.theory__item-body {
  padding: 0 2rem;
  border-radius: 0 0 1.5rem 1.5rem;
  background-color: var(--white);
}

.accordion-item--active .theory__item-body {
  padding: 4rem 2rem;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
}

.theory__item-content {
  display: -ms-grid;
  display: grid;
  gap: 4rem;
}

.theory__item-content--1 {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}

.theory__item-content--2 {
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.theory__item-content--3 {
  -ms-grid-columns: 1fr;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}

.theory__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  border-radius: 1.5rem;
}

.theory__block--list {
  gap: 1rem;
  padding: 2rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
}

.theory__block--list .theory__block-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
}

.theory__block--list .theory__block-title {
  color: var(--medium-gray);
}

.theory__block--list .theory__block-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: var(--lime-green-20);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: var(--lime-green);
}

.theory__block--list .theory__block-icon i {
  --font-size: 1.3rem;
}

.theory__block--list .theory__block-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: var(--dark-magenta-20);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 100%;
  color: var(--dark-magenta);
  text-align: center;
}

.theory__block-sound {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.theory__block-sound--title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 150%;
  color: var(--blue);
}

.theory__block-sound--text {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 115%;
  color: var(--medium-gray);
}

.theory__block-sound--tags {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.5rem 1rem;
  border-radius: 20rem;
  background-color: var(--dark-magenta-20);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 150%;
  color: var(--dark-magenta);
}

.theory__block-wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.theory__block-foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1.3rem 4.6rem 1.3rem 1.3rem;
  border-radius: 1rem;
  background-color: var(--tangerine-10);
}

.theory__block-foot--cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.theory__block-foot--cover img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.theory__block-foot--text {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--medium-gray);
}

.theory__block-title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 100%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.theory__block-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

.theory__block-items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.theory__block-item {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.theory__block-item--box {
  border-radius: 1.5rem;
  padding: 2rem 4rem 2rem 2rem;
  -webkit-box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  background: var(--white);
}

.theory__block-item-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.1rem;
}

.theory__block-item-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.theory__block-item-row img {
  max-height: 2rem;
}

.theory__block .col-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.theory__block .theory__block-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 1rem;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  background: var(--white);
}

.theory__block .theory__block-table th,
.theory__block .theory__block-table td {
  padding: 0.8rem;
  text-align: left;
}

.theory__block .theory__block-table tr:not(:last-child) > td {
  border-bottom: 0.1rem solid #e8e8f0;
}

.theory__block .theory__block-table tr:not(:first-child) {
  height: 5rem;
}

.theory__block .theory__block-table td {
  padding: 0.9rem 1.1rem;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 129%;
  color: var(--medium-gray);
}

.theory__block .theory__block-table td:not(:last-child) {
  border-right: 0.1rem solid #e8e8f0;
}

.theory__block .theory__block-table td:nth-child(1) {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  color: var(--blue);
}

.theory__block .theory__block-table td:nth-child(2) {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 108%;
  color: var(--dark-magenta);
}

.theory__block .theory__block-table td:nth-child(2) span {
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  background: var(--dark-magenta-10);
}

.theory__block .theory__block-table th {
  padding: 0.7rem 1.1rem;
  background-color: var(--ghost-white);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--medium-gray);
}

.theory .theory-text-primary {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 98%;
  color: var(--blue);
}

.theory .theory-text-primary.hovered {
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

.theory .theory-text-secondary {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 125%;
  color: var(--dark-magenta);
}

.theory .accordion-item--active .accordion-content {
  overflow: visible;
}

.theory .hovered {
  position: relative;
}

.theory .hovered::before {
  content: "";
  position: absolute;
  inset: 0 0 -100% 0;
  z-index: 1;
}

.theory .hovered::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.4rem);
  translate: -50% 0;
  z-index: 2;
  width: 0;
  height: 0;
  display: none;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  border-bottom: 0.8rem solid var(--blue);
}

.theory .hovered:hover::after {
  display: block;
}

.theory .hovered:hover .baloon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.theory .hovered .baloon {
  position: absolute;
  left: 50%;
  top: calc(100% + 1rem);
  translate: -50% 0;
  z-index: 2;
  border-radius: 0.5rem;
  width: 18.5rem;
  padding: 2rem 1.2rem 2.6rem;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  background: var(--blue);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 117%;
  color: var(--white-50);
  text-align: center;
}

.theory .hovered .baloon:hover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.theory .hovered .baloon__subtitle {
  margin-bottom: 1.1rem;
  font-size: 1.4rem;
  line-height: 120%;
}

.theory .hovered .baloon__title {
  margin-bottom: 0.6rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--white);
}

.theory .hovered .baloon__text {
  margin-bottom: 3.5rem;
}

.theory .hovered .baloon__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
}

.theory .hovered .baloon__btn:hover .baloon__btn-icon-box {
  background-color: var(--white);
  color: var(--dark-magenta);
}

.theory .hovered .baloon__btn-icon-box {
  width: 3.4rem;
  height: 3.5rem;
  border-radius: 1rem;
  background-color: var(--white-10);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.theory .hovered .baloon__btn-icon-box i {
  font-size: 2.5rem;
}

.theory .hovered .baloon__btn._active .baloon__btn-icon-box {
  background-color: var(--white);
  color: #9F248F;
}

.theory__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

.theory__foot-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 120%;
  text-align: center;
  color: var(--medium-gray);
}

.training__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.training__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 1.5rem 1.5rem 2rem 2rem;
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  overflow: clip;
}

.training__item-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem 2rem;
  padding: 0.5rem 3rem 0.5rem 0.5rem;
  background-color: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1.5rem 1.5rem 0 0;
}

.training__item-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 9rem;
  height: 9rem;
  background-color: var(--ghost-white);
  border-radius: 1rem;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.training__item-img img {
  max-width: 100%;
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.training__item-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.training__item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  color: var(--blue);
}

.training__item-title i {
  --font-size: 3.2rem;
}

.training__item-text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.training__item-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.9rem;
}

.training__item-progress progress {
  background: var(--medium-gray-20);
  color: var(--dark-magenta);
  display: block;
  width: 6.9rem;
  height: 0.8rem;
  border-radius: 10rem;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  overflow: hidden;
  cursor: default;
}

.training__item-progress progress::-webkit-progress-bar {
  background: var(--medium-gray-20);
  border-radius: 10rem;
}

.training__item-progress progress::-webkit-progress-value {
  background: var(--dark-magenta);
  border-radius: 10rem;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.training__item-progress progress[value="0"]::-webkit-progress-value {
  background: var(--dark-magenta);
}

.training__item-progress span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 110%;
  color: var(--medium-gray);
  white-space: nowrap;
}

.training__item-body {
  display: -ms-grid;
  display: grid;
  overflow: hidden;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  padding: 2rem;
  border-radius: 0 0 2rem 2rem;
}

.training__item--hide .training__item-body {
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  padding: 0;
}

.training__item-content {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1.5rem;
  overflow: hidden;
}

.training__item-block {
  --training-bg-color: var(--white);
  --training-border-color: var(--medium-gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  background: var(--training-bg-color);
  border: 0.2rem solid var(--training-border-color);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 2rem;
  padding: 1rem 1rem 2rem 1rem;
  position: relative;
}

.training__item-block--success {
  --training-bg-color: var(--lime-green-20);
  --training-border-color: var(--lime-green);
}

.training__item-block--success .training__item-icon i {
  font-size: 1.3rem;
}

.training__item-block--success .training__item-icon i::before {
  content: "\e909";
}

.training__item-block--fail {
  --training-bg-color: var(--bright-orange-20);
  --training-border-color: var(--bright-orange);
}

.training__item-block--fail .training__item-icon i {
  border: 0.2rem dashed var(--training-border-color);
  background: transparent;
}

.training__item-block--fail .training__item-icon i::before {
  display: none;
}

.training__item-block--lock {
  pointer-events: none;
  opacity: 0.4;
}

.training__item-cover {
  height: 9rem;
}

.training__item-cover img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.training__item-name {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.training__item-icon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  color: var(--white);
}

.training__item-icon i {
  --font-size: 2.4rem;
  background-color: var(--training-border-color);
}

.training__item-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--lime-green);
  border-radius: 2rem;
  padding: 3rem 4rem 3rem 4.6rem;
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

.training__item-all .training__item-text {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 120%;
  color: var(--white);
}

.training__item-all .training__item-icon {
  position: static;
}

.training__item-all .training__item-icon i {
  --font-size: 3.2rem;
}

.vocabulary-choise {
  display: -ms-grid;
  display: grid;
  gap: 3rem;
}

.vocabulary-choise__title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 120%;
  color: #1d2d8c;
}

.vocabulary-choise__letter-header {
  width: 100%;
  padding: 2rem;
  border-radius: 1.5rem 1.5rem 0 0;
  -webkit-box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  background: #fff;
  position: relative;
  z-index: 1;
}

.vocabulary-choise__letter-items {
  padding: 2rem;
  border-radius: 0 0 2rem 2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.3rem 1fr 1.3rem 1fr 1.3rem 1fr 1.3rem 1fr 1.3rem 1fr 1.3rem 1fr;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.3rem;
  -webkit-box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  background: #fff;
}

.vocabulary-choise__letter-item {
  width: 100%;
  height: 9.5rem;
  border-radius: 2rem;
  -webkit-box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  background: #fff;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-align: center;
  color: #1d2d8c;
}

.vocabulary-choise__letter-item:hover {
  border-color: #1d2d8c;
}

.vocabulary-choise__letter-item._active {
  border-color: #1d2d8c;
}

.vocabulary-choise__letter-info {
  display: -ms-grid;
  display: grid;
  gap: 3rem;
  border-radius: 1.5rem 1.5rem 2rem 2rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  background: #fff;
}

.vocabulary-choise__letter-info-header {
  width: 100%;
  padding: 2rem 4rem 2.5rem 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4.5rem;
  background: #1d2d8c;
  color: #fff;
}

.vocabulary-choise__letter-info-header-letter {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 120%;
}

.vocabulary-choise__letter-info-header-descr {
  max-width: 54.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 150%;
}

.vocabulary-choise__letter-info-header-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 120%;
}

.vocabulary-choise__letter-info-header-btn {
  margin-left: auto;
  width: 6rem;
  height: auto;
}

.vocabulary-choise__letter-info-content {
  padding: 0 2rem;
  display: -ms-grid;
  display: grid;
  gap: 1rem;
}

.vocabulary-choise__letter-info-content-title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #636363;
}

.vocabulary-choise__letter-info-content-items {
  display: -ms-grid;
  display: grid;
  gap: 1rem;
}

.vocabulary-choise__letter-info-content-item {
  padding: 2.2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  border-radius: 1rem;
  background: #f8f9fe;
}

.vocabulary-choise__letter-info-content-item-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.vocabulary-choise__letter-info-content-item-left img {
  width: 6rem;
  height: auto;
}

.vocabulary-choise__letter-info-content-item-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 120%;
  color: #9F248F;
}

.vocabulary-choise__letter-info-content-item-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 120%;
  text-align: right;
  color: #636363;
}

.vocabulary-choise__letter-info-footer {
  padding: 0 2rem 3rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.vocabulary-choise__letter-info-footer > *:nth-child(2) {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 120%;
  text-align: center;
  color: #636363;
}

.vocabulary-choise__letter-info-footer > *:nth-child(3) {
  margin-left: auto;
}

.vocabulary__tabs {
  padding: 0 3.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  border-radius: 0 0 1.5rem 1.5rem;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  background: #fff;
}

.vocabulary__tabs-btn {
  width: auto;
  height: 100%;
  padding: 2rem;
  border-bottom: 4px solid transparent;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 120%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1d2d8c;
}

.vocabulary__tabs-btn._active {
  border-color: #B4D335;
  color: #B4D335;
}

.general__content:has(.vocabulary__tabs) {
  margin-top: -1.6rem;
}

.vocabulary-save {
  display: -ms-grid;
  display: grid;
  gap: 3rem;
}

.vocabulary-save__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
}

.vocabulary-save__header-checkbox:hover {
  background-color: var(--btn-background);
  color: #1d2d8c;
}

.vocabulary-save__header .form-checkbox-item {
  width: 5.4rem;
  height: 3.4rem;
  background-color: #fff;
  -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
}

.vocabulary-save__header .form-checkbox-item::before {
  width: 1.6rem;
  height: 1.6rem;
  left: 0.9rem;
  right: auto;
  background-color: #1d2d8c;
}

.vocabulary-save__header .form-checkbox-input:checked + .form-checkbox-item {
  background-color: #1d2d8c;
}

.vocabulary-save__header .form-checkbox-input:checked + .form-checkbox-item::before {
  -webkit-transform: translateY(-50%) translateX(1.8rem);
  -ms-transform: translateY(-50%) translateX(1.8rem);
  transform: translateY(-50%) translateX(1.8rem);
  background-color: #fff;
}

.vocabulary-save__header .form-radio-input:checked + .form-radio-item + .form-radio-text {
  color: var(--blue);
}

.vocabulary-save__items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.vocabulary-save__item {
  width: 100%;
  min-height: 15rem;
  padding: 3rem 2.5rem 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.4rem;
  border-radius: 2rem;
  -webkit-box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  box-shadow: 0 0.4rem 1.5rem 0 rgba(94, 58, 67, 0.15);
  background: #fff;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 120%;
  position: relative;
  z-index: 1;
}

.vocabulary-save__item.is-active .vocabulary-save__item-hover {
  opacity: 1;
  pointer-events: all;
}

.vocabulary-save__item.is-active button {
  opacity: 0;
  pointer-events: none;
}

.vocabulary-save__item-title {
  color: #1d2d8c;
}

.vocabulary-save__item button {
  width: auto;
  height: 5rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.vocabulary-save__item-hover {
  position: absolute;
  inset: 0;
  gap: 3rem;
  opacity: 0;
  background-color: #1d2d8c;
  color: #fff;
}

.vocabulary-save__item-hover .vocabulary-save__item-title {
  color: #fff;
}

.vocabulary-save__item-hover .vocabulary-save__item-subtitle {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
}

.vocabulary__blocks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}

.vocabulary__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4rem;
  background: var(--white);
  -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
  border-radius: 1.5rem;
  padding: 0.5rem 3.2rem 0.5rem 0.5rem;
}

.vocabulary__block-cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 19rem;
  height: 19rem;
  border-radius: 1rem;
  background-color: var(--ghost-white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.vocabulary__block-cover img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.vocabulary__block-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
}

.vocabulary__block-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.5rem 1rem;
  border-radius: 20rem;
  background-color: var(--dark-magenta-10);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: var(--medium-gray);
}

.vocabulary__block-tags i {
  --font-size: 2.4rem;
  color: var(--dark-magenta);
}

.vocabulary__block-title {
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 100%;
  color: var(--blue);
}

.vocabulary__block-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.7rem;
  margin-left: auto;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 2rem;
  line-height: 120%;
  text-align: right;
  color: var(--blue);
  white-space: nowrap;
}

.vocabulary__block-text i {
  --font-size: 3.2rem;
}

@media (min-width: 601px) {
  .main {
    padding-top: 4rem;
  }

  .general__inner {
    -ms-grid-columns: (1fr)[8];
    grid-template-columns: repeat(8, 1fr);
    -ms-grid-rows: 10.4rem auto auto;
    grid-template-rows: 10.4rem auto auto;
  }

  .general__inner > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  .general__inner > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  .general__inner > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }

  .general__inner > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
  }

  .general__inner > *:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }

  .general__inner > *:nth-child(6) {
    -ms-grid-row: 1;
    -ms-grid-column: 6;
  }

  .general__inner > *:nth-child(7) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
  }

  .general__inner > *:nth-child(8) {
    -ms-grid-row: 1;
    -ms-grid-column: 8;
  }

  .general__inner > *:nth-child(9) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  .general__inner > *:nth-child(10) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }

  .general__inner > *:nth-child(11) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }

  .general__inner > *:nth-child(12) {
    -ms-grid-row: 2;
    -ms-grid-column: 4;
  }

  .general__inner > *:nth-child(13) {
    -ms-grid-row: 2;
    -ms-grid-column: 5;
  }

  .general__inner > *:nth-child(14) {
    -ms-grid-row: 2;
    -ms-grid-column: 6;
  }

  .general__inner > *:nth-child(15) {
    -ms-grid-row: 2;
    -ms-grid-column: 7;
  }

  .general__inner > *:nth-child(16) {
    -ms-grid-row: 2;
    -ms-grid-column: 8;
  }

  .general__inner > *:nth-child(17) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }

  .general__inner > *:nth-child(18) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }

  .general__inner > *:nth-child(19) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }

  .general__inner > *:nth-child(20) {
    -ms-grid-row: 3;
    -ms-grid-column: 4;
  }

  .general__inner > *:nth-child(21) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }

  .general__inner > *:nth-child(22) {
    -ms-grid-row: 3;
    -ms-grid-column: 6;
  }

  .general__inner > *:nth-child(23) {
    -ms-grid-row: 3;
    -ms-grid-column: 7;
  }

  .general__inner > *:nth-child(24) {
    -ms-grid-row: 3;
    -ms-grid-column: 8;
  }

  .general__lesson {
    -ms-grid-column: 7;
    -ms-grid-column-span: 2;
    grid-column: 7/9;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .general__content {
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-column: 1/7;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
  }

  .profile-page .general__content {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .general__tabs {
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-column: 1/7;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .breadcrumbs a:hover span {
    background-size: 100%;
  }

  .form-col-2 .form-group:nth-child(3) {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
  }

  .progress.progress--list {
    padding: 3rem;
  }

  .progress.progress--list .progress__title {
    margin-bottom: 1rem;
  }

  .progress.progress--list .progress__head {
    margin-bottom: 3rem;
  }

  .progress.progress--list .progress__bar {
    margin-bottom: 3rem;
  }

  .sidebar {
    -ms-grid-column: 7;
    -ms-grid-column-span: 2;
    grid-column: 7/9;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    margin-bottom: 19.5rem;
  }

  .profile-page .sidebar {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .general--2 .sidebar {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1/4;
  }

  .levels__item-head {
    padding: 1.5rem 2rem;
    background-color: var(--item-color);
    border-radius: 1.5rem;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    color: var(--white);
  }

  .levels__item-body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0;
    padding: 2rem;
    background-color: var(--white);
    border-radius: 1.5rem;
    -webkit-box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
    box-shadow: 0px 4px 15px rgba(94, 58, 67, 0.15);
    -ms-grid-column: 3;
    -ms-grid-column-span: 4;
    grid-column: 3/7;
  }

  .profile-edit__inputs-col:nth-child(2) {
    padding-top: 3rem;
  }

  .achivments-page .general__content {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .achivments-page .sidebar {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .rating__item-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3.9rem;
  }

  .speech .exercises__item-progress {
    margin-left: auto;
  }

  .task__done {
    gap: 4rem;
  }

  .task__done .task__result-cover {
    margin-bottom: 4rem;
  }

  .task__done .task__result-title {
    margin-bottom: 4rem;
  }

  .task__done .task__result-items {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }

  .services__slider {
    width: calc(50% - 2rem);
  }

  .services__item--main {
    width: 50%;
  }
}

@media (max-width: 600px) {
  html {
    --refRes: 393;
  }

  .profile-page .general__inner {
    display: block;
  }

  .general__title h1 {
    font-size: 2.4rem;
  }

  .general__title br {
    display: none;
  }

  .general__tabs {
    width: 100vw;
    padding: 0 0.8rem 0 0.8rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
  }

  .general__tab {
    gap: 0.4rem;
  }

  .general__tab p {
    font-size: 1.1rem;
  }

  .general__control {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .general__filter-body {
    width: var(--container-width);
    right: 0;
    left: unset;
  }

  .general__filter--active .general__filter-body {
    border-radius: 1rem 0 1rem 1rem;
  }

  .general__scenes {
    width: 100%;
  }

  .general__scenes-wrap {
    width: calc(var(--container-width) + var(--container-padding) * 2);
    margin-right: calc(var(--container-padding) * -1);
    margin-left: calc(var(--container-padding) * -1);
    padding: 0 var(--container-padding);
    overflow-x: auto;
  }

  .general__scenes-items {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .general__scenes-img {
    width: 7.5rem;
    height: 7.5rem;
  }

  .general__scenes-img::before {
    width: 7.5rem;
    height: 7.5rem;
  }

  .f-button.is-close-button {
    top: 1rem;
    right: 1rem;
  }

  .fancybox__slide {
    padding: 1rem;
  }

  :root {
    --container-width: 35.3rem;
    --container-padding: 2rem;
  }

  .achievs {
    padding: 2rem;
  }

  .achievs__head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 3rem;
  }

  .achievs__title {
    margin-bottom: 0;
  }

  .achievs__cover {
    width: 6.8rem;
  }

  .breadcrumbs__item {
    font-size: 1.4rem;
  }

  .dropdown__selected {
    height: 3.7rem;
  }

  .dropdown__selected-label--js::before {
    height: 0.3rem;
  }

  .dropdown__selected-label--js::after {
    height: 0.3rem;
  }

  .dropdown__input {
    font-size: 1.6rem;
  }

  .filled .dropdown__input + .form-label,
  .dropdown__input:focus + .form-label,
  .dropdown__input:active + .form-label,
  .dropdown__input:checked + .form-label {
    height: calc(100% + 1.4rem);
    font-size: 1.4rem;
    top: -1.4rem;
  }

  .dropdown__input:required + .form-label .typewriter__word::after {
    width: 1rem;
    height: 1rem;
    right: -1.2rem;
  }

  .dropdown__label {
    font-size: 1.6rem;
  }

  .dropdown__content {
    gap: 2rem;
    padding: 2rem 1.5rem;
  }

  .dropdown__content .dropdown__label {
    font-size: 1.6rem;
  }

  .form-col-2 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .form-radio-item {
    width: 2rem;
    height: 2rem;
  }

  .form-radio-item::before {
    width: 0.8rem;
    height: 0.8rem;
  }

  .form-radio-text {
    font-size: 1.3rem;
  }

  .progress {
    padding: 3rem 2rem;
  }

  .progress__head {
    -ms-grid-columns: auto 0.6rem 1fr;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    margin-bottom: 3rem;
  }

  .progress__title {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    margin-bottom: 0;
  }

  .progress__cover {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
    margin-bottom: 0;
  }

  .progress__cover img {
    height: 4.9rem;
  }

  .progress__text {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    font-size: 1.4rem;
    text-align: left;
  }

  .progress__bar {
    margin-bottom: 3rem;
  }

  .progress__active-wrap {
    width: 1.6rem;
  }

  .progress__active-wrap progress {
    height: 1.6rem;
    -webkit-transform: rotate(-90deg) translate(-34%, -92%);
    -ms-transform: rotate(-90deg) translate(-34%, -92%);
    transform: rotate(-90deg) translate(-34%, -92%);
  }

  .progress__active-wrap.empty::after {
    width: 1.6rem;
  }

  .repl {
    display: none;
    padding: 2rem;
  }

  .burger-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .footer__inner {
    padding: 3.6rem 0 11.6rem;
  }

  .header__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    gap: 1rem;
    padding: 1.5rem 2rem 1.5rem;
    margin-bottom: 2rem;
  }

  .header-login .header__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: unset;
    -ms-flex-align: unset;
    align-items: unset;
    gap: 5rem;
    padding: 2.4rem 0 2.4rem;
    background: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    margin-bottom: 0;
  }

  .header-login .header__left {
    display: none;
  }

  .header__logos {
    gap: 1.5rem;
  }

  .header__logos-item {
    gap: 1.5rem;
    height: 2rem;
  }

  .header__logos-item:nth-child(1) {
    height: 1.4rem;
  }

  .header__items {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1rem;
  }

  .logo {
    height: 3.2rem;
  }

  .plate {
    right: 2rem;
    bottom: 2rem;
  }

  .popup {
    padding: 7.6rem 2rem;
  }

  .popup--login .popup__body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
  }

  .popup--login .popup__cover {
    display: none;
  }

  .popup--login .popup__content {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
  }

  .popup__content {
    gap: 3rem;
  }

  .popup__title {
    font-size: 3.2rem;
  }

  .popup__items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
  }

  .popup__item-img {
    height: 18rem;
  }

  .sidebar__inner {
    gap: 1.5rem;
  }

  .inner-page .sidebar {
    display: none;
  }

  .inner-page .general__lesson {
    display: none;
  }

  .about__inner {
    gap: 3rem;
    padding: 2rem;
  }

  .about__body {
    gap: 3rem;
  }

  .about__block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 3rem;
  }

  .about__block:nth-child(2) {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3rem;
  }

  .about__img {
    width: 100%;
  }

  .about__content {
    gap: 1.5rem;
  }

  .about__title {
    font-size: 2rem;
  }

  .about__text {
    font-size: 1.4rem;
  }

  .callback__inner {
    gap: 2rem;
    padding: 2rem;
  }

  .callback__body .btn {
    --btn-padding-x: 2rem;
    width: 100%;
  }

  .callback__cover {
    display: none;
  }

  .eht-page .sidebar {
    display: none;
  }

  .eht__items {
    -ms-grid-columns: 1fr 1rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .eht__head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 2rem;
  }

  .eht__head-progress {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
  }

  .eht__head-progress progress {
    width: 100%;
  }

  .eht__item {
    min-height: 20rem;
  }

  .eht__item img {
    height: 12rem;
  }

  .eht__item-title {
    margin: 1.5rem 1rem;
    font-size: 1.4rem;
  }

  .eht-internal__box {
    padding: 2rem;
    gap: 2rem;
  }

  .eht-internal__items {
    padding: 2rem;
  }

  .eht-internal__item {
    padding: 1.4rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .eht-result {
    padding: 3rem 2rem;
  }

  .eht-result__title {
    margin-bottom: 3rem;
  }

  .eht-result__body {
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .eht-result__foot {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .eht-result__foot .btn {
    width: 100%;
    min-width: unset;
  }

  .exercises__block-title {
    word-break: break-all;
  }

  .exercises__block-text {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
  }

  .exercises__block-progress {
    padding-top: 0;
  }

  .exercises__block-progress progress {
    width: 6.9rem;
  }

  .exercises__wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .exercises__wrapper .btn {
    --btn-padding-x: 1rem;
    width: 100%;
    gap: 1rem;
    font-size: 1.4rem;
  }

  .exercises__wrapper .btn i {
    --font-size: 2rem;
  }

  .exercises__item-head {
    -ms-grid-columns: 6rem 1fr auto;
    grid-template-columns: 6rem 1fr auto;
    padding: 1rem;
  }

  .exercises__item-title {
    font-size: 1.6rem;
    margin-top: 0;
  }

  .exercises__item-text {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;
    padding-right: 9rem;
    margin-bottom: 0;
  }

  .exercises__item-progress {
    gap: 0.2rem;
  }

  .exercises__item-progress progress {
    width: 6.9rem;
  }

  .exercises__item-blocks {
    -ms-grid-columns: 1fr 1rem 1fr !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }

  .exercises__checkpoint {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 1rem;
  }

  .exercises__checkpoint-img {
    width: 100%;
  }

  .exercises__checkpoint-subtitle {
    font-size: 1.2rem;
  }

  .exercises__checkpoint-title {
    font-size: 1.6rem;
  }

  .exercises__checkpoint-btn {
    width: 100%;
  }

  .help__inner {
    padding: 2rem;
  }

  .help__bg {
    display: none;
  }

  .hero__inner {
    padding: 0;
  }

  .hero__content {
    gap: 2rem;
    max-width: unset;
  }

  .hero__title h1 {
    font-size: 3.2rem;
    text-align: center;
  }

  .hero__btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
  }

  .hero__btns .btn {
    width: 100%;
  }

  .hero__bg {
    width: calc(100% + var(--container-padding) * 2);
    margin-left: calc(var(--container-padding) * -1);
    height: auto;
    position: static;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset;
  }

  .hero__bg img {
    width: 100%;
    height: auto;
  }

  .lessons__block {
    gap: 2rem;
    padding-bottom: 3rem;
  }

  .lessons__block--1 .lessons__cover {
    top: unset;
    right: unset;
    bottom: 4rem;
    left: 0;
  }

  .lessons__block--1 .lessons__item--2 {
    margin-left: 5.5rem;
  }

  .lessons__block--1 .lessons__item--3 {
    margin-top: 0.75rem;
    margin-left: 9.6rem;
  }

  .lessons__block--1 .lessons__item--4 {
    margin-top: -1.4rem;
    margin-left: 17.1rem;
  }

  .lessons__block--1 .lessons__item--5 {
    margin-top: -6.4rem;
    margin-left: 26.3rem;
  }

  .lessons__block--1 .lessons__item--6 {
    margin-top: 1.5rem;
    margin-left: 26rem;
  }

  .lessons__block--1 .lessons__item--7 {
    margin-top: 0.8rem;
    margin-left: 20.9rem;
  }

  .lessons__block--2 .lessons__cover {
    top: unset;
    right: unset;
    bottom: 3rem;
    left: 0;
  }

  .lessons__block--2 .lessons__item--1 {
    margin-top: -1.3rem;
  }

  .lessons__block--2 .lessons__item--2 {
    margin-left: 4.9rem;
  }

  .lessons__block--2 .lessons__item--3 {
    margin-top: 0.7rem;
    margin-left: 9.6rem;
  }

  .lessons__block--2 .lessons__item--4 {
    margin-top: -1.4rem;
    margin-left: 17.1rem;
  }

  .lessons__block--2 .lessons__item--5 {
    margin-top: -6.4rem;
    margin-left: 26.3rem;
  }

  .lessons__block--2 .lessons__item--6 {
    margin-top: 1.5rem;
    margin-left: 26rem;
  }

  .lessons__block--2 .lessons__item--7 {
    margin-top: -0.8rem;
    margin-left: 20.9rem;
  }

  .lessons__heads {
    height: 17rem;
    margin-bottom: 3rem;
  }

  .lessons__head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
  }

  .lessons__head-title {
    font-size: 2.4rem;
  }

  .lessons__head-text {
    font-size: 1.4rem;
  }

  .lessons__head-btn {
    --btn-padding-x: 2rem;
    --btn-height: 4.2rem;
    font-size: 1.6rem;
  }

  .lessons__body {
    min-height: unset;
  }

  .lessons__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
  }

  .lessons__item {
    width: 7.6rem;
    height: 7.6rem;
    position: relative;
    top: unset !important;
    left: unset !important;
  }

  .lessons__item-wrap {
    padding: 0.9rem 3.2rem 0.9rem 3.2rem;
    top: 0.8rem;
    left: 6.8rem;
  }

  .lessons__item-wrap p {
    font-size: 1.6rem;
  }

  .lessons__item-wrapper progress {
    width: 6.3rem;
  }

  .lessons__item-block {
    width: 6rem;
    height: 6rem;
  }

  .lessons__cover {
    height: 24.5rem;
  }

  .lessons__wrap {
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .levels__item {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 1.6rem;
    border-radius: 2rem;
    background-color: var(--white);
  }

  .levels__item-title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.6rem 1.2rem;
    border-radius: 0.8rem;
    background-color: var(--item-color);
    font-size: 2.4rem;
    color: var(--white);
  }

  .levels__item-block {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .levels__item-progress {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .levels__item-btn {
    --btn-padding-x: 2rem;
    font-size: 1.6rem;
  }

  .profile {
    padding: 3rem 2rem;
  }

  .profile-edit__inputs {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .profile .user {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .profile .user__info {
    text-align: center;
  }

  .achivments__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
  }

  .achivments__item {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 2rem;
  }

  .achivments__item-img {
    margin-inline: auto;
  }

  .achivments__item-progress {
    width: 100%;
  }

  .achivments__item-progress-track {
    width: 100%;
  }

  .subscription__box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 1.4rem;
  }

  .subscription__actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .rating {
    gap: 2rem;
  }

  .rating__item {
    gap: 1rem 0;
    padding: 1.4rem 1.4rem 1.4rem 1.4rem;
    font-size: 1.4rem;
  }

  .rating__item-name {
    margin-right: 0.5rem;
  }

  .rating__item--you .rating__item-name::after {
    margin-top: 0.1rem;
    font-size: 1.2rem;
  }

  .rating__item-stars {
    margin-right: 1.4rem;
  }

  .scenes-inner-page .general__lesson {
    display: none;
  }

  .scenes-inner-page .sidebar {
    display: none;
  }

  .scenes-inner__head {
    border-radius: 2rem;
  }

  .scenes-lesson-page .scenes-inner__body {
    padding: 2rem;
  }

  .scenes-inner__content .btn {
    width: 100%;
  }

  .scenes-inner__title {
    font-size: 2.4rem;
  }

  .scenes-inner__text {
    padding: 2rem;
  }

  .scenes-inner .task__result-items {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .scenes {
    gap: 2rem;
  }

  .scenes .training__item-head {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 0.7rem auto;
    grid-template-rows: 1fr auto;
    gap: 0.7rem 1.5rem;
    padding: 0.5rem;
  }

  .scenes .training__item-img {
    height: 100%;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
  }

  .scenes .training__item-wrap {
    width: 100%;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .scenes .training__item-progress {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
  }

  .scenes__level {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .scenes__items {
    gap: 3rem;
    margin-top: 1rem;
  }

  .scenes__item {
    gap: 1rem;
  }

  .scenes__item-body {
    -ms-grid-columns: 1fr 0.5rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .scenes__block {
    min-height: 12rem;
    padding: 1rem 1rem 2rem 1rem;
  }

  .scenes__block-check span {
    display: none;
  }

  .scenes__block-img {
    height: 7.2rem;
  }

  .scenes__progress {
    gap: 0.28rem;
  }

  .services__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .services__slider {
    width: 100%;
  }

  .services__item--main {
    width: 100%;
  }

  .speech .exercises__item-blocks {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }

  .speech .exercises__item-head {
    padding-right: 1rem;
    padding-bottom: 1rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .speech .exercises__item-wrap {
    width: auto;
  }

  .speech .exercises__item-title {
    font-size: 1.6rem;
  }

  .task-speed-page .task__block-head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .task-page .sidebar {
    display: none;
  }

  .task-page .general__scenes {
    display: none;
  }

  .task-page .general__lesson {
    display: none;
  }

  .task__head {
    padding: 1.5rem 2rem 2rem 2rem;
  }

  .task__head-title {
    font-size: 2.4rem;
  }

  .task__head-text {
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
  }

  .task__progress {
    gap: 0.28rem;
  }

  .task__body {
    padding: 3rem 2rem;
  }

  .task__block-title {
    font-size: 2rem;
  }

  .task__matching {
    -ms-grid-columns: 1fr 1rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .task__matching-item {
    height: 18rem;
  }

  .task__pairs {
    gap: 3rem;
  }

  .task__pairs-row {
    gap: 1rem;
  }

  .task__select {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
  }

  .task__select-text {
    font-size: 2.2rem;
  }

  .task__fill-span {
    font-size: 1.6rem;
  }

  .task__fill-text {
    font-size: 2.2rem;
  }

  .task__fill-input {
    width: 4.2rem;
    height: 3.6rem;
  }

  .task__fill-body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    gap: 1rem;
  }

  .task__building {
    gap: 3rem;
    padding: 2rem;
  }

  .task__building-col {
    -ms-grid-columns: 1fr 1rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .task__formal-head {
    gap: 1rem;
  }

  .task__formal-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 0 1rem 2rem 1rem;
    text-align: center;
  }

  .task__formal-cover {
    height: 18rem;
  }

  .task__formal-title {
    font-size: 2.2rem;
  }

  .task__formal-body {
    padding: 2rem 1rem;
  }

  .task__formal-btn {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 2rem 1rem;
  }

  .task__order {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding: 2rem;
  }

  .task__blank-cover {
    height: 18rem;
    margin-top: 0;
  }

  .task__blank .task__chat {
    margin-top: 2rem;
  }

  .task__creative {
    padding-top: 3rem;
  }

  .task__fix {
    gap: 2rem;
    padding: 2rem;
  }

  .task__fix-text {
    font-size: 2.2rem;
  }

  .task__situation {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    padding: 0 0 2rem 0;
  }

  .task__situation-text {
    font-size: 2.4rem;
  }

  .task__situation-cover {
    height: 18rem;
  }

  .task__speak-title {
    font-size: 2.4rem;
  }

  .task__dialogue {
    padding-top: 1rem;
  }

  .task__describe {
    padding: 0.5rem 1rem 1rem 1rem;
  }

  .task__describe-cover {
    height: 18rem;
  }

  .task__review-block {
    padding: 2rem;
  }

  .task__review-head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
  }

  .task__review-progress {
    gap: 0.28rem;
  }

  .task__control {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .task__control .btn {
    width: 100%;
    font-size: 1.6rem;
  }

  .task__control-wrap {
    width: 100%;
  }

  .task__control-text {
    gap: 0.5rem;
    font-size: 1.6rem;
  }

  .task__control-text i {
    --font-size: 2.4rem;
  }

  .task-checkpoint .task__result {
    gap: 2rem;
  }

  .task__result-items {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .task-checkpoint-page .task__result-items {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 2rem;
  }

  .task__result-body {
    padding: 2rem;
    margin-bottom: 2rem;
  }

  .task-checkpoint-page .task-checkpoint .task__result-body {
    padding: 0;
    background-color: transparent;
  }

  .task-checkpoint-page .task__result-body {
    padding: 2rem;
  }

  .task__result-blocks {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .task__checkpoint-item {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 8rem auto;
    grid-template-columns: 8rem auto;
  }

  .task-checkpoint .task__checkpoint-item {
    -ms-grid-columns: 6rem 1rem auto;
    grid-template-columns: 6rem auto;
    gap: 1rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
  }

  .task__checkpoint-item--block {
    font-size: 2rem;
  }

  .task__checkpoint-img {
    width: 8rem;
    height: 8rem;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
  }

  .task-checkpoint .task__checkpoint-img {
    width: 6rem;
    height: 6rem;
  }

  .task__checkpoint-title {
    font-size: 2.2rem;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .task-checkpoint .task__checkpoint-title {
    font-size: 2rem;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
  }

  .task__checkpoint-progress {
    width: 100%;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
  }

  .task__done-items {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }

  .theory-page .general__lesson,
  .theory-page .sidebar {
    display: none;
  }

  .theory__bar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .theory__head-title {
    font-size: 2.4rem;
  }

  .theory__head-text {
    font-size: 1.4rem;
  }

  .theory__item-content {
    gap: 2rem;
  }

  .theory__item-content--1 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }

  .theory__item-content--2 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }

  .theory__block--scroll {
    max-width: calc(var(--container-width) - var(--container-padding) * 2);
    overflow-x: auto;
  }

  .theory__block-wrap {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }

  .theory__block-items {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }

  .theory__block-item--box {
    padding: 2rem;
  }

  .theory__block-item-col {
    gap: 0.5rem;
  }

  .theory__block-wrapper {
    width: 100%;
    border-radius: 1rem;
    -webkit-box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
    box-shadow: 0 4px 15px 0 rgba(94, 58, 67, 0.15);
    background: var(--white);
  }

  .theory__block .theory__block-table {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    background: unset;
  }

  .theory__foot {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .theory__foot-text {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin-top: 2rem;
  }

  .theory__foot .btn:nth-child(1) {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .theory__foot .btn {
    width: 100%;
  }

  .training__item-head {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 1rem;
  }

  .training__item-wrap {
    width: calc(100% - 2rem - 9rem);
  }

  .training__item-title {
    font-size: 2.2rem;
  }

  .training__item-title i {
    --font-size: 2.4;
  }

  .training__item-progress {
    width: 100%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .training__item-content {
    -ms-grid-columns: 1fr 1rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .vocabulary-choise__letter-items {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }

  .vocabulary-choise__letter-info-header {
    padding: 2rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .vocabulary-choise__letter-info-header-descr {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .vocabulary-choise__letter-info-content-item {
    padding: 2rem;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }

  .vocabulary-choise__letter-info-content-item-left {
    grid-column: 1/-1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .vocabulary-choise__letter-info-content-item-right {
    text-align: center;
  }

  .vocabulary-choise__letter-info-footer {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .vocabulary-choise__letter-info-footer .btn {
    width: 100%;
  }

  .vocabulary-choise__letter-info-footer > *:nth-child(2) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .vocabulary__tabs {
    padding: 0 2rem;
    border-radius: 1rem;
  }

  .general__content:has(.vocabulary__tabs) {
    margin-top: 0;
  }

  .vocabulary-save__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .vocabulary-save__header .btn {
    width: 100%;
  }

  .vocabulary-save__items {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }

  .vocabulary__block {
    gap: 2rem;
    padding: 0.5rem 2rem 0.5rem 0.5rem;
  }

  .vocabulary__block-cover {
    width: 12rem;
    height: 12rem;
  }

  .vocabulary__block-wrap {
    gap: 1.2rem;
  }

  .vocabulary__block-title {
    font-size: 2rem;
  }

  .vocabulary__block-text span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  section {
    -webkit-animation: none !important;
    animation: none !important;
  }
}