/** transition */
a, .btn, form-control {transition: all .25s ease-out;}

/** links, btns */
a {color: #fff}
a:hover {color: #DDFF00}

.btn {text-transform: lowercase;}

.btn-outline-white {border: 1px solid #fff; border-radius: 2rem; color: #fff; font-weight: 100; display: inline-flex; align-items: center; padding: .75rem 1.75rem;}
.btn-outline-white:hover {color: #fff; transform: scale(1.025); background-color: rgb(255 255 255 / 5%);;}
.btn-outline-white .svg-inline--fa {margin-right: 1rem; font-size: .875rem;}

.btn-yellow {background-color: #DDFF00; border-radius: 2rem; color: #000; font-weight: 100; display: inline-flex; align-items: center; padding: .75rem 1.75rem;}
.btn-yellow:hover {
    background-color: #ceec0a;
    transform: scale(1.025);
    color: #000;
}

/** helpers */

.moskvin-flex-row {display: flex; flex-flow: row nowrap; align-items: center;}

.mb-2 {margin-bottom: 2rem !important;}

/** forms */
.form-control {background-color: transparent; color: #fff; padding: .75rem 1.75rem; border-radius: 4rem;}
.form-control::placeholder {color: #fff;}

.moskvin-form-group label {text-transform: lowercase; font-size: 1.25rem;} 

.form-control:focus {
    color: #fff;
    background-color: transparent;
    border-color: #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.form-control::placeholder {text-transform: lowercase;}

/** main */

html, body {height: 100%;}

body {display: flex; flex-direction: column; background-color: #0D1117; color: #fff; font-family: 'Gotham Pro'; font-size: 1.5rem; font-weight: 100;}

.moskvin-hello-video {height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(45deg, rgb(0 0 0 / 80%) 0%, rgb(0 0 0 / 40%) 100%);}

.moskva-thematic-video {position: absolute; height: 100%; z-index: -100;}

.moskvin-hello-absolute {position: absolute; width: 100%; top: 8rem; bottom: 4rem;}
.moskvin-hello-absolute .container {height: 100%;}

.moskvin-hello-title {font-size: 4rem; line-height: 4rem; font-weight: 700; text-transform: lowercase;}

.moskvin-hello-caption {text-transform: lowercase; font-size: 1rem;}

.moskvin-benefits {display: flex; flex-flow: row nowrap; font-size: 1rem; flex: 0 0 auto;}

.moskvin-benefit + .moskvin-benefit {margin-left: 4rem;}

.moskvin-benefit-value {font-weight: 500;}

.moskvin-hello-column {display: flex; flex-direction: column; height: 100%;}

.moskvin-hello-course {flex: 1 0 auto;}

.moskvin-courses-link {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; cursor: none;}

header {padding-top: 2rem; position: relative; z-index: 1;}

.header-top {margin-bottom: 6rem;}

.header-logo img {max-width: 100%;}
.header-logo a {text-decoration: none; font-weight: 400;}
.header-logo a:hover {color: #fff;}

.header-description {font-size: 1.5rem; text-transform: lowercase; font-weight: 300;}

.header-social {display: flex; align-items: center; margin-left: 2rem;}

.header-social-link {color: #fff; text-decoration: none; font-size: 1.275rem;}
.header-social-link + .header-social-link {margin-left: 1rem;}

.header-switch {margin-left: 1rem;}
.header-switch::before {
    content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0L7.62054 4.37946L12 6L7.62054 7.62054L6 12L4.37946 7.62054L0 6L4.37946 4.37946L6 0Z' fill='white'/%3E%3C/svg%3E");
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 1rem;
}
.header-switch a {color: #fff; font-size: 1.275rem; text-decoration: none;}
.header-switch a:hover {color: #DDFF00}

.header-login {margin-left: 2rem;}

.content {flex: 1 0 auto;}

.course-caption {display: flex; flex-flow: row nowrap; font-size: 1.25rem; text-transform: lowercase; margin-bottom: 1rem;}

.course-caption-item + .course-caption-item::before {
    content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0L7.62054 4.37946L12 6L7.62054 7.62054L6 12L4.37946 7.62054L0 6L4.37946 4.37946L6 0Z' fill='white'/%3E%3C/svg%3E");
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 1rem;
}

.course h1 {font-size: 6rem; font-weight: 700; line-height: 5rem; margin-bottom: 2rem;}

.course-description {font-size: 1rem; font-weight: 500;}

.course-btns {margin-top: 2rem; margin-bottom: 8rem;}
.course-btns a + a {margin-left: .5rem;}

.career {padding: 10rem 0;}
.career h2 {font-size: 1.5rem; font-weight: 100;}

.career-activities h2 {border-bottom: 1px solid #fff; padding-bottom: 0.75rem; margin-bottom: 2rem;}

.moskvin-service-inner {padding-top: 6rem;}

.moskvin-services h2 {font-size: 1.5rem; font-weight: 100; margin-bottom: 2rem;}

.moskvin-service h3 {font-size: 6rem; font-weight: bold; text-transform: lowercase; line-height: 5.25rem; margin-bottom: 2rem;}

.moskvin-service-announce {font-size: 1rem; line-height: 1.75rem;}

.moskvin-service-tag {display: flex; flex-flow: row nowrap; align-items: center; margin-left: -.75rem;}
.moskvin-service-tag::before {content: ''; width: 4px; height: 4px; border-radius: 4px; background-color: #DDFF00; display: block; margin-right: .75rem;}

.moskvin-service-tags-title {font-size: 1rem; font-weight: 500;}

.career-activities {margin-bottom: 8rem;}

.career-salary h2 {margin-bottom: 0;}

.career-salary-caption {font-size: .875rem; font-weight: 500; margin-bottom: 1rem;}

.career-salary-row {display: flex; flex-flow: row nowrap;}

.career-salary-item {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.875rem;
    position: relative;
    perspective: 1000px;
    height: 6rem;
}

.career-salary-item + .career-salary-item {
    margin-left: .75rem;
}

.career-salary-front, .career-salary-back {
    font-size: 3.75rem;
    font-weight: 100;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Скрываем обратную сторону при перевороте */
    border-radius: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s; /* Анимация переворота */
}

.career-salary-front img {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
}

.career-salary-back {
    display: flex;
    transform: rotateY(180deg); /* Поворачиваем обратную сторону на 180 градусов */
    background-color: #DDFF00;
    color: #000;
    flex-direction: column;
}

.career-salary-item:hover .career-salary-front {
    transform: rotateY(180deg); /* Поворачиваем лицевую сторону на 180 градусов при наведении */
}

.career-salary-item:hover .career-salary-back {
    transform: rotateY(360deg); /* Возвращаем обратную сторону в исходное положение при наведении */
}

.career-salary-label {line-height: 3rem; margin-top: .75rem;}

.career-salary-caption-back {font-size: 1.5rem; font-weight: 100; align-self: flex-end; margin-right: 1rem;}

.industries {margin-bottom: 8rem;}
.industries h2 {
    font-size: 6rem;
    font-weight: bold;
    text-transform: lowercase;
    line-height: 5.25rem;
    margin-bottom: 6rem;
}

.industries-tags {display: flex; flex-flow: row wrap; margin-bottom: 4rem;}

.industries-tag {font-size: .75rem; padding: .5rem 1rem; border: 1px solid #fff; border-radius: 3rem; margin: 0 .25rem; margin-bottom: .65rem;}
.industries-tag.white {background-color: #fff; color: #000;}

.industries-logos {}

.industries-logo {display: flex; align-items: center; justify-content: center; height: 100%; margin-bottom: 2rem;}
.industries-logo img {max-width: 100%; opacity: .25;}

.trailer {margin-bottom: 8rem;}

.moskvin-showreel-caption { font-size: 1.3rem; font-weight: 300; margin-bottom: 2rem; }
.moskvin-showreel-caption img { margin-left: .5rem; position: relative; top: 4px; }

.moskvin-showreel-video {position: relative; margin-bottom: 2rem;}

.moskvin-trailer-video {width: 100%; border-radius: 3.75rem;}

.assets {margin-bottom: 8rem;}
.assets h2 {font-size: 6rem; font-weight: bold; text-transform: lowercase; line-height: 5.25rem; margin-bottom: 4rem;}

.assets-list {display: flex; margin: 0 -1rem; position: relative;}
.assets-list::after {
    content: '';
    width: 600px;
    height: 400px;
    background-color: rgb(0 178 255 / 60%);
    border-radius: 100%;
    filter: blur(100px);
    position: absolute;
    right: 10%;
    z-index: -1;
}
.assets-list::before {
    content: '';
    width: 600px;
    height: 400px;
    background-color: rgb(255 0 92 / 65%);
    border-radius: 100%;
    filter: blur(100px);
    position: absolute;
    left: 10%;
    bottom: 0;
    z-index: -1;
}

.assets-item {flex: 1; padding: 0 .5rem;}

.assets-item-image {border: 1px solid rgb(255 255 255 / 20%); border-radius: 1.875rem; overflow: hidden; margin-bottom: 1rem;}
.assets-item-image img {max-width: 100%;}

.assets-item-title {text-transform: lowercase; font-size: .875rem; font-weight: 500; padding: 0 .75rem;}

.moskvin-lessons h2 {font-size: 1.5rem; font-weight: 100; margin-bottom: 2rem;}
.moskvin-lessons h2 img {margin-left: .5rem; position: relative; top: 4px;}

.moskvin-lesson h3 {font-size: 3rem; font-weight: 700;}
.moskvin-lesson:last-child .moskvin-lesson-childrens {margin-bottom: 0;}
.moskvin-lesson:last-child .moskvin-lesson-inner {padding-bottom: 0;}

.moskvin-lesson-loop { border-bottom: 1px solid #fff; padding-bottom: 0.25rem; font-size: 1.125rem; }
.moskvin-lesson-loop > span { border: 1px solid #fff; display: flex; width: 30px; height: 30px; border-radius: 30px; align-items: center; justify-content: center; margin-bottom: 0.5rem; }

.moskvin-lesson-inner { padding: 6rem 0; }

.moskvin-lesson-childrens {margin-top: 4rem;}

.moskvin-lesson-title {font-size: 2rem; line-height: 2.25rem; text-transform: lowercase; margin-bottom: 1rem;}
.moskvin-lesson-title > span {font-size: 1rem; font-weight: 400; color: #DDFF00; margin-left: 1rem;}

.moskvin-lesson-announce {font-size: 1rem; font-weight: 400;}

.moskvin-lesson-children {margin-bottom: 2rem;}

.diploma {padding: 8rem 0; overflow: hidden}
.diploma h2 {font-size: 6rem; font-weight: bold; text-transform: lowercase; line-height: 5.25rem; margin-bottom: 4rem;}

.diploma-image {border-radius: 3rem; overflow: hidden;}
.diploma-image img {max-width: 100%;}

.diploma-logo {position: absolute; width: 40%; top: 2rem; left: 3rem;}

.diploma-description {font-size: 1rem; font-weight: 400;}

.diploma-inner {position: relative;}
.diploma-inner::after {
    content: '';
    width: 400px;
    height: 200px;
    background-color: rgb(0 178 255 / 60%);
    border-radius: 100%;
    filter: blur(70px);
    position: absolute;
    left: 20%;
    top: 10%;
    z-index: -1;
}
.diploma-inner::before {
    content: '';
    width: 400px;
    height: 200px;
    background-color: rgb(255 0 92 / 65%);
    border-radius: 100%;
    filter: blur(100px);
    position: absolute;
    right: 30%;
    bottom: 10%;
    z-index: -1;
}

.questions {margin-bottom: 8rem;}
.questions h2 {font-size: 6rem; font-weight: bold; text-transform: lowercase; line-height: 5.25rem; margin-bottom: 4rem;}

.question {padding: 1rem 0; border-bottom: 1px solid rgb(255 255 255 / 20%)}

.question-static {display: flex; align-items: center; justify-content: space-between;}

.question-title {flex: 1}

.question-toggler {
    text-decoration: none;
    border: 1px solid #fff;
    display: flex;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
}
.question-toggler:hover {border-color: #DDFF00;}

.question-toggle {overflow: hidden; transition: all 0.5s ease; max-height: 0; opacity: 0; font-size: 1rem;}
.question-toggle.open {max-height: 1000px; opacity: 1; padding: 1rem 0;}

.questions-more {margin-top: 6rem;}

.questions-more-title {margin-bottom: 2rem;}

.questions-more-email a {text-decoration: none; font-weight: 700;}

.questions-more-phone a {text-decoration: none; font-weight: 700;}

footer {padding: 1rem 0; flex: 0 0 auto;}
.footer-bottom {padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 20%); margin-top: 4rem;}

.footer-copyright {font-size: 1.25rem;}

.footer-flex-row {display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end;}

.footer-social {margin-left: 1rem;}
.footer-social::before {
    content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0L7.62054 4.37946L12 6L7.62054 7.62054L6 12L4.37946 7.62054L0 6L4.37946 4.37946L6 0Z' fill='white'/%3E%3C/svg%3E");
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 1rem;
}

.footer-menu-title {text-transform: lowercase; font-size: 1.5rem; font-weight: 500;}

.footer-menu-link {text-transform: lowercase; font-size: 1.25rem;}

/** ticker */

.moskvin-ticker {overflow: hidden; position: absolute; background-color: #DDFF00; color: #000; font-size: 1rem; z-index: 1;}

.moskvin-ticker-inner {display: flex; align-items: center; width: 100%;}

.moskvin-ticker-item {text-transform: lowercase; text-wrap: nowrap;}
.moskvin-ticker-item + .moskvin-ticker-item {margin-left: 4rem;}

.moskvin-ticker-top {top: .75rem; left: 0; right: 0;}

.moskvin-ticker-bottom {bottom: .75rem; left: 0; right: 0;}

/** cursor */

#cursor-container {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease, transform 0.4s ease; 
  z-index: 9999;
  opacity: 0;
}

#cursor-core, #cursor-explore {
  position: absolute;
  border: 2px solid #fff;
  border-radius: 50%;
  transform-origin: center;
}

#cursor-core {
  width: 20px;
  height: 20px;
}

#cursor-explore, #cursor-start {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 2rem;
}

#cursor-explore {
  transform: rotate(0deg);
}

#cursor-start {
    background: #DDFF00;
    color: #000;
    transform: rotate(0deg);
    width: 5rem;
    height: 5rem;
    border-radius: 5rem;
}

/** account */
.login-forms {margin-bottom: 4rem;}

.moskvin-terms {font-size: .875rem;}

.moskvin-form-flex {}

.moskvin-form-registration {font-size: 1rem; margin-top: 1rem;}

.moskvin-menu-link {text-transform: lowercase; font-size: 1.25rem;}
.moskvin-menu-link + .moskvin-menu-link {margin-left: 1rem;}

.account-courses {margin-bottom: 8rem;}

.account-courses-description {margin-bottom: 4rem;}

.account-course-image {border: 1px solid rgb(255 255 255 / 20%); border-radius: 1.875rem; overflow: hidden; margin-bottom: 1rem;}
.account-course-image img {max-width: 100%;}

.account-course-anounnce {font-size: 1rem; font-weight: 400; margin-bottom: 1rem;}

.account-course-title {font-size: 3rem; font-weight: 700; margin-bottom: 1rem;}

.account-course-lessons {display: flex; align-items: center;}

.account-course-module {font-size: .75rem; padding: .5rem 1rem; border: 1px solid #fff; border-radius: 3rem;}
.account-course-module + .account-course-module {margin-left: .75rem;}

.account-lessons-link {font-size: .75rem; color: #ceec0a}

.account-lessons-list {margin: 4rem 0;}

.account-lesson {margin-bottom: 6rem;}
.account-lesson h2 {font-size: 1.5rem; font-weight: 100; margin-bottom: 2rem; text-transform: lowercase;}
.account-lesson h2 img {margin-left: .5rem; position: relative; top: 4px;}

.account-lesson-sub {padding: 1rem; border-top: 1px solid #fff; display: flex; align-items: center; text-decoration: none;}
.account-lesson-sub + .account-lesson-sub {}

.account-lesson-name {text-transform: lowercase; font-weight: 500;}

.account-lesson-icon {margin-right: 2rem;}

.account-lesson-time {font-size: .875rem;}

.lesson-flex {display: flex; flex-flow: row nowrap;}

.lesson-sidebar {
    flex: 0 0 auto;
    width: 25%;
    padding: 4rem 2rem;
    position: fixed;
    overflow-y: scroll;
    height: 100vh;
}

.lesson-sidebar::-webkit-scrollbar {
    width: 2px; /* Ширина скроллбара */
}

.lesson-sidebar::-webkit-scrollbar-track {
    background: transparent; /* Фоновый цвет дорожки скроллбара */
}

.lesson-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.8); /* Цвет ползунка скроллбара */
    border-radius: 1px; /* Скругление углов ползунка */
}

.lesson-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #ffffff; /* Цвет ползунка при наведении */
}

.lesson-sidebar-title {font-size: 1rem; margin-bottom: 1rem; font-weight: 700; text-transform: lowercase;}

.lesson-sidebar-lesson {margin-bottom: 4rem;}

.lesson-sidebar-link {font-size: .875rem; padding: 1rem; border-top: 1px solid rgb(255 255 255 / 10%); display: flex; align-items: center; text-decoration: none;}
.lesson-sidebar-link.active {color: #ceec0a;}

.lesson-page-lesson {flex: 0 0 auto; width: 75%; margin-left: 25%;}

.lesson-page {}
.lesson-page h1 {text-transform: lowercase;}

.lesson-page-panel { margin-bottom: 4rem; padding-bottom: 1rem; border-bottom: 1px solid rgb(255 255 255 / 20%);}

.lesson-prev, .lesson-next {font-size: 1rem;}
.lesson-prev svg {margin-right: .5rem;}
.lesson-next svg {margin-left: .5rem;}

.lesson-page-lesson {padding-top: 2rem; margin-bottom: 4rem; }

.lesson-page-video {position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 4rem;}
.lesson-page-video video {max-width: 100%; width: 100%;}
.lesson-page-video .play-btn {position: absolute;}

.play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 1.125rem;
    border-radius: 50px;
    background-color: #ceec0a;
}

.play-btn svg {position: relative; left: 2px; }

.lesson-file {font-size: 1rem;}
.lesson-file a {text-decoration: none; font-weight: 400;}
.lesson-file a > span {font-weight: 200;}