:root {
    --black: rgba(37, 37, 50, 1);
    --primary: rgb(64, 171, 179);
    --white: rgba(250, 250, 250, 1);

    --white-opacity: rgba(250, 250, 250, .1);
    --black-opacity: rgba(17, 17, 17, .1);

    --white-opacity-9: rgba(221, 221, 221, 0.9);
    --black-opacity-9: rgba(23, 23, 23, 0.9);

    --black-grey: rgba(19, 19, 37, 1);
    --white-grey: rgba(221, 221, 221, 1);

    --filter-black: brightness(0) saturate(100%) invert(0%) sepia(65%) saturate(2451%) hue-rotate(296deg) brightness(111%) contrast(87%);
    --filter-white: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(1860%) hue-rotate(110deg) brightness(125%) contrast(97%);
}

@font-face {
    src: url("../fonts/Stem-Medium.ttf"),
    url("../fonts/Stem-Medium.woff");
    font-family: Stem;
}

@font-face {
    src: url("../fonts/Stem-SemiLight.ttf"),
    url("../fonts/Stem-Regular.eot"),
    url("../fonts/Stem-Regular.woff");
    font-family: StemRegular;
}


html, body {
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    font-family: Stem, serif;

    background: var(--black);
}

h1, h2, h3, h4, h5, h6, p {
    padding: 0;
    margin: 0;
}

p, a {
    font-size: 14px;
    font-weight: 350;
    color: var(--white);
    font-family: StemRegular, serif;
}

.header-mobile {
    display: none;
}

.mobile-menu {
    display: none;
}

.cookie-policy .close-button {
    justify-content: center;
    margin: 10px auto 0;
    cursor: pointer !important;
    border-radius: 5px;
    height: 25px !important;
    width: 120px !important;
    background: #ffd585 !important;
    position: unset !important;
}

.cookie-policy .close-button:after {
    content: "" !important;
}

.cookie-policy .close-button p {
    padding: 7px 0;
    color: #464646;
    font-weight: 600;
}

header {
    width: calc(100% - 200px);
    max-width: 2720px;
    height: 60px;
    padding: 20px 100px 10px 100px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: fixed;
    background-color: var(--black);
    align-items: center;
    justify-content: space-between;
    z-index: 99;
}

header .logo-menu {
    display: flex;
    gap: 60px;
}

header .logo-menu .logo {
    width: 60px;
    height: 60px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid white;
    background-image: url("../images/logo-w.png");
}
header .logo-menu .logo-list {
    width: 60px;
    height: 60px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid white;
    background-image: url("../images/listli_logo-w.png");
    background-size: cover;
}

header .logo-menu .menu {
    display: flex;
    gap: 30px;
}

header .logo-menu .menu a {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: left;

    text-decoration: none;
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}

header .logo-menu .menu a span {
    padding: 5px 0 0 10px;
    font-size: 12px;
    color: #c3bcbc;
}


header .mode {
    margin-right: 140px;
}

header .mode .mode-container {
    width: 84px;
    height: 20px;
    padding: 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: relative;

    border-radius: 20px;
    background: var(--white);
    cursor: pointer;
}

header .mode .mode-container .on, header .mode .mode-container .off {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    color: var(--black);

    z-index: 1;
}

header .mode .mode-container .icon {
    width: 38px;
    height: 38px;

    position: absolute;
    left: 10px;
    top: 7px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--black);
}

header .mode .mode-container .icon img {
    width: 24px;
    height: 24px;

    object-fit: cover;
}

header .mode .sun-active .icon {
    animation: .3s mode-sun-anim linear forwards;
}

header .mode .moon-active .icon {
    animation: .3s mode-moon-anim linear forwards;
}

header .mode .sun-active .moon, header .mode .moon-active .sun {
    display: none;
}

header .mode .sun-active .sun, header .mode .moon-active .moon {
    display: flex;
}

@keyframes mode-sun-anim {
    0% {
        transform: translateX(60px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes mode-moon-anim {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(60px);
    }
}

header .contact {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-desktop .contact .header-address {
    position: absolute;
    margin-top: 40px;
    margin-left: 30px;
}

.header-desktop .contact .header-address p {
    font-size: 11px;
}

.wrap-filters-city {
    padding: 30px 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
}

.wrap-filters-city span {
    color: var(--white);
}

.wrap-filters-city img {
    filter: var(--filter-white);
}

.filters-city-title {
    display: flex;
    gap: 10px;
}

.wrap-filters-city-mobile {
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
}

.wrap-filters-city-mobile span {
    color: var(--black);
}

.wrap-filters-city-mobile img {
    filter: var(--filter-black);
}

.filters-city-title-mobile {
    display: flex;
    gap: 10px;
}

.phone-header-mobile {
    display: none;
}

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

/* Выпадающий список городов*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--black);
    border-radius: 10px;
    border: 1px solid white;
    min-width: 260px;
    max-height: 250px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #dddddd29;
}

.show {
    display: block;
}

/*------------Выпадающий список городов--------------*/
header .contact .phone, header .contact .button {
    display: flex;
    align-items: center;
    gap: 18px;
}

header .contact .phone img, header .contact .button img {
    width: 24px;
    height: 24px;
}

header .contact .button img {
    filter: var(--filter-white);
}

header .contact .phone a, header .contact .button span {
    font-family: Stem, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    color: var(--white);
}

header .contact .messengers img {
    height: 32px;
    width: 32px;
}

header .contact .button {
    padding: 14px 10px;

    border-radius: 10px;
    border: 2px solid var(--primary);
    cursor: pointer;
}

header .contact .button:hover {
    background: var(--primary);
}

header .contact .button:hover span {
    color: var(--black);
}

header .contact .button:hover img {
    filter: var(--filter-black);
}


.first {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 58px 100px;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
}

.first .info {
    max-width: 734px;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 60px;

    z-index: 3;
}

.first .info .title {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.first .info .title h1 {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);
}

.first .info .title h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.first .info ul {
    padding: 0;

    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 10px;
}

.first .info ul li {
    padding-left: 30px;

    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);

    display: flex;
    align-items: center;

    background-image: url("../icons/check.svg");
    background-repeat: no-repeat;
}

.first .info .desc {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.first .info .desc p {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.first .modal-contact {
    padding: 10px;
    height: 374px;
    z-index: 3;

    background: var(--black-grey);
    border-radius: 20px;
}

.first .modal-contact .modal-contact-container {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 10px;

    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 30px;

    border-radius: 20px;
    border: 1px dashed var(--white);
}

.first .modal-contact .modal-contact-container .title {
    width: 100%;

    display: flex;
    flex-flow: column;
    padding: 10px 0;
    gap: 10px;
}

.first .modal-contact .modal-contact-container .title h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: center;
    color: var(--white);
}

.first .modal-contact .modal-contact-container .title span {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    color: var(--white-grey);
}

.first .modal-contact .modal-contact-container .fields {
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 10px;
}

.first .modal-contact .modal-contact-container .fields .input {
    width: 420px;
    height: 20px;
    padding: 14px 10px 14px 10px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 10px;
    background: var(--white-opacity);
}

.first .modal-contact .modal-contact-container .fields .input img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}

.first .modal-contact .modal-contact-container .fields .input input {
    font-family: Stem, serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--white);

    background: none;
    border: none;
    outline: none;
}

.first .modal-contact .modal-contact-container .button {
    width: 250px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: var(--primary);
    cursor: pointer;
}

.first .modal-contact .modal-contact-container .processing-data-checkbox {
    display: flex;
    flex-direction: row;
    width: 90%;
}

.first .modal-contact .modal-contact-container .processing-data-checkbox p {
    padding: 0 10px;
}

.first .modal-contact .modal-contact-container .processing-data-checkbox a {
    color: orangered;
}

#w0 > div.button > button, #w1 > div.button > button {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: var(--black);
}

.first .modal-contact .modal-contact-container .button img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);

    display: none;
}

.first .modal-contact .modal-contact-container .button:hover {
    cursor: pointer;
    width: 280px;
    height: 52px;
    border: 1px solid white;
    gap: 10px;

    background: var(--black);
}

#w0 > div.button > button:hover {
    cursor: pointer;
    color: var(--white);
}

.first .modal-contact .modal-contact-container .button:hover img {
    display: block;
}

.first .modal-contact .modal-contact-container .result {
    display: none;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.first .modal-contact .modal-contact-container .result img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}

.first .modal-contact .modal-contact-container .result span {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    color: var(--white);
}

.first .ellipsis {
    width: 456px;
    height: 456px;

    position: absolute;
    right: 140px;
    z-index: 2;

    mix-blend-mode: hard-light;

    filter: var(--filter-white) blur(150px);
}

.first .background {
    width: 515px;
    height: 574px;

    position: absolute;
    top: 20px;
    left: auto;
    right: 600px;
    z-index: 1;
}

.first .background .shadow {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    background: linear-gradient(179.95deg, rgba(252, 252, 252, 0) 73.13%, var(--black) 96.48%);
}

.first .person {
    width: 100%;
    height: 100%;

    object-position: top;
    object-fit: cover;

    transform: rotateY(180deg);
}

.first .balls {
    width: 515px;
    height: 574px;
    margin: 0 auto;

    position: absolute;

    object-fit: cover;

    left: auto;
    right: 310px;
    top: 0;
    z-index: 0;
}


.items {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 80px 100px;
    margin-left: auto;
    margin-right: auto;

    position: relative;
}

.items h2 {
    width: 100%;

    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);
}

.items .box {
    width: 100%;
    margin-top: 52px;

    display: flex;
    gap: 30px;
}

.items .box .one-box {
    display: flex;
    gap: 30px;
}

.items .box .one {
    width: 650px;
    height: 300px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1px;

    background: var(--white);
    border-radius: 20px;

    cursor: pointer;
}

.items .box .one > img {
    width: 262px;
    height: 268px;
}

.items .box .one .info {
    margin-left: 30px;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 10px;
}

.items .box .one .info h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--black);
}

.items .box .one .info h4 {
    font-size: 48px;
    font-weight: 500;
    line-height: 52px;
    text-align: left;
    color: var(--black);
}

.items .box .one .info h6 {
    display: none;
}

.items .box .one .info .button {
    margin-top: 20px;
    width: 174px;
    height: 44px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    background: var(--black);
    border-radius: 10px;
}

.items .box .one .info .button span {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    color: var(--white);
}

.items .box .one .info .button img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}

.items .box .one-short {
    width: 183px;
    height: 270px;
    padding-top: 30px;

    flex-flow: column;
    justify-content: space-between;
}

.items .box .one-short > img {
    width: 148px;
    height: 148px;

    object-fit: contain;
    scale: 1;
}

.items .box .one-short .info {
    margin-left: 0;

    align-items: center;
}

.items .box .one-short .info h6 {
    display: block;

    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--black);
}

.items .box .one-short h5,
.items .box .one-short h4 {
    display: none;
}

.items .box .one-short .info .button {
    width: 44px;
    height: 44px;
    margin-top: 0;
}

.items .box .one-short .info .button span {
    display: none;
}


.items .box .one-with-image-double {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    gap: 30px;
}

.items .box .one-with-image {
    max-width: 553px;
    width: 553px;
    max-height: 576px;
    height: 576px;
    overflow: hidden;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;
}

.items .box .one-with-image img {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

    object-fit: cover;
    opacity: .4;
}

.items .box .one-with-image .background {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    background: linear-gradient(180deg, rgba(23, 23, 23, 0) 90%, var(--black-opacity-9) 100%);
}

.items .box .one-with-image h5 {
    max-width: 424px;

    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: center;
    color: var(--white);

    z-index: 2;
}

.items .box .one-with-image-double .one-with-image {
    max-width: 750px;
    width: 100%;
    max-height: 272px;
    height: 200px;
}


.itogi {
    width: calc(100% - 100px);
    padding: 80px 0 80px 100px;
    margin-left: auto;
    margin-right: auto;

    position: relative;
}

.itogi h2 {
    width: 100%;
    max-width: 1920px;

    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);
}

.itogi .box {
    width: 100%;
    padding-top: 60px;
    padding-bottom: 30px;
    overflow-x: auto;

    display: flex;
    gap: 30px;
}

.itogi .background {
    width: 301px;
    height: 234px;

    position: absolute;
    left: 0;
    top: 180px;
    z-index: 2;

    background: linear-gradient(90deg, var(--black) 30.5%, rgba(17, 17, 17, 0) 100%);
}

.itogi .box .one {
    width: 348px;
    min-width: 348px;
    height: 156px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;

    position: relative;

    display: flex;
    justify-content: flex-end;
    flex-flow: column;
    gap: 10px;

    background: var(--black-grey);
    border-radius: 20px;
}

.itogi .box .one h4 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.itogi .box .one h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--white);
}

.itogi .box .one span {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);

    position: absolute;
    left: 30px;
    top: -34px;
}

.itogi .box::-webkit-scrollbar {
    width: 541px;
    height: 10px;

    display: flex;
    align-items: center;
}

.itogi .box::-webkit-scrollbar-track {
    width: 541px;
    height: 10px;
    max-width: 541px;
    margin-left: 650px;
    margin-right: 650px;

    background: var(--black-grey);
    border-radius: 100px;
}

.itogi .box::-webkit-scrollbar-thumb {
    height: 4px;

    background: var(--white);
    border-radius: 100px;
}


.plans {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 80px 100px;
    margin-left: auto;
    margin-right: auto;

    position: relative;
}

.plans h2 {
    width: 100%;

    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);
}

.plans .box {
    width: 100%;
    margin-top: 60px;

    display: flex;
    flex-flow: row;
    justify-content: center;
    gap: 30px;
}


.plans .box .one {
    max-width: 715px;

    width: calc(50% - 30px - 15px);
    height: auto;
    padding-top: 30px;
    padding-left: 30px;
    overflow: hidden;

    display: flex;
    flex-flow: column;
    gap: 20px;

    position: relative;

    border-radius: 20px;
    background: var(--black-grey);
}

.plans .box .one .background {
    width: 372px;
    height: 377px;

    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;

    background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, var(--black-grey) 100%);
}

.plans .box .one .button {
    width: 82px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    color: var(--black);
    background: var(--white);
    border-radius: 10px;
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 2;
}

.plans .box .one .button:hover {
    cursor: pointer;
    color: var(--white);
    background: var(--black);
    border: 1px solid var(--white);
}

.plans .box .one h4 {
    max-width: 521px;

    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--primary);
    z-index: 2;
    padding-right: 10px;
}

.plans .box .one ul {
    max-width: 521px;
    padding: 0 10px 40px 0;
    list-style-position: inside;

    z-index: 2;
}

.plans .box .one ul li {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    text-align: left;
    color: var(--white);
}

.plans .box .one img {
    width: 372px;
    height: 377px;

    object-fit: cover;

    position: absolute;
    right: 0;
    bottom: -50px;
    z-index: 0;
}

.plans .box .one-small {
    max-width: 553px;
    min-width: 300px;
    width: calc(33% - 30px - 15px);
    height: 313px;
}

.plans .box .one-small img {
    width: 109px;
    height: 336px;
}

.plans .box .one-small h4 {
    max-width: 425px;
}

.plans .box .one-small ul {
    max-width: 425px;
}


.comments {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 80px 100px;
    margin-left: auto;
    margin-right: auto;

    position: relative;
}

.comments h2 {
    width: 100%;

    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);
}

.comments h5 {
    margin-top: 20px;

    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.comments .box {
    width: 100%;
    margin-top: 60px;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 30px;
}

.comments .box .one {
    max-width: 375px;
    width: calc(25% - 30px - 30px - 23px);
    height: auto;
    padding: 36px 30px;

    display: flex;
    align-items: center;

    flex-flow: column;
    gap: 10px;

    background: var(--white);
    border-radius: 20px;
}

.comments .box .one img {
    width: 90px;
    height: 90px;

    border-radius: 50%;
}

.comments .box .one h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 31px;
    text-align: center;
    color: var(--black);
}

.comments .box .one span {
    margin-top: 10px;

    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--black);
    opacity: .6;
}

.comments .bottom {
    width: 100%;
    margin-top: 60px;

    display: flex;
    justify-content: right;
}

.comments .bottom .button {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--primary);

    cursor: pointer;
}

.free .box > img:nth-child(2) {
    display: none;
}

footer {
    width: 100%;

    background: var(--black-grey);
}

footer .footer {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 70px 100px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    justify-content: space-between;
}

footer .footer .right {
    width: 704px;
    padding: 0 50px;
    display: flex;
    flex-flow: column;
    gap: 20px;
}

footer .footer .right .top {
    display: flex;
    justify-content: space-between;
}

footer .footer .right .top .col {
    width: 33%;
    display: flex;
    flex-flow: column;
    gap: 5px;
    padding: 0 10px;
}

footer .footer .right .top .col h5 {
    margin-bottom: 25px;

    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--primary);
}

footer .footer .right .top .col a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--white);
}

footer .footer .right .top .logo {
    width: 60px;
    min-width: 60px;
    height: 60px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid white;
    background-image: url(../images/logo-w.png);
}
footer .footer .right .top .logo-list {
    width: 60px;
    min-width: 60px;
    height: 60px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid white;
    background-image: url(../images/listli_logo-w.png);
    background-size: cover;
}

footer .footer .right .row {
    display: flex;
    flex-flow: column;
    gap: 5px;
}

.footer .right .last .moon-img {
    display: none;
}

.footer .right .last img {
    max-width: 250px;
}

footer .footer .right .row h5 {
    margin-bottom: 25px;

    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--primary);
}

footer .footer .right .row a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--white);
}

footer .footer .right .row input {
    padding: 14px 20px;

    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    color: var(--white);

    border: 1px solid var(--white);
    border-radius: 10px;
    background: none;
    opacity: .3;
}

footer .footer .right .center {
    width: 100%;

    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: right;
    color: var(--white);
    opacity: .4;

    display: flex;
    justify-content: center;
}


footer .left {
    width: 459px;
    padding: 30px;

    display: flex;
    flex-flow: column;
    gap: 28px;

    background: var(--black);
    border-radius: 20px;
}

footer .left .title {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

footer .left .title h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    opacity: .3;
}

footer .left .title h5 {
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

footer .left .fields {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

footer .left .fields .input {
    width: 439px;
    height: 20px;
    padding: 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--white-opacity);
}

footer .left .fields .processing-data-checkbox {
    display: flex;
    flex-direction: row;
}

footer .left .fields .processing-data-checkbox p {
    padding: 10px;
}

footer .left .fields .processing-data-checkbox a {
    color: orangered;
}

footer .left .fields .processing-data-checkbox input {
    height: 30px;
}

footer .left .fields .input img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}

footer .left .fields .input input {
    font-family: Stem, serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--white);

    background: none;
    border: none;
    outline: none;
}

footer .left .fields textarea {
    width: calc(100% - 20px);
    height: 108px;
    padding: 14px 10px;

    font-family: Stem, serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--white);

    resize: none;
    border: none;
    outline: none;

    border-radius: 10px;
    background: var(--white-opacity);
}

footer .left .fields .button {
    width: 159px;
    height: 44px;

    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--black);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
}

.center {
    background: var(--black-grey);
    color: var(--white);
    padding-bottom: 10px;
    text-align: center;
}

.first-choose {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 72px 100px;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;

    position: relative;
}

.first-choose .info {
    width: 50%;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 60px;
}

.first-choose .info h1 {
    max-width: initial;
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);
}

.first-choose .info .desc {
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.first-choose .info .desc p {
    font-size: 48px;
    font-weight: 350;
    line-height: 52px;
    text-align: left;
    color: var(--white);
}

.first-choose .info .desc .button {
    width: 243px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: var(--primary);
    border-radius: 10px;
    cursor: pointer;
}

.first-choose .info .desc a .button span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--black);
}

#choose {
    padding-top: 75px;
    margin-top: -75px;
    display: inline-block; /* required for webkit browsers */
    vertical-align: top;
}

.first-choose .info .desc a {
    text-decoration: none;
}

.first-choose .info .desc .button img {
    width: 24px;
    height: 24px;

    filter: var(--filter-black);
}

.first-choose .info .box {
    display: flex;
    justify-content: left;
    gap: 30px;
}

.first-choose .info .box .one {
    width: 286px;
    height: 104px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: var(--white);
    border-radius: 20px;
}

.first-choose .info .box .one img {
    width: 72px;
    height: 72px;
}

.first-choose .info .box .one span {
    width: 164px;

    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--black);
}

.first-choose .info .background {
    width: 814px;
    height: 646px;

    position: absolute;
    bottom: 300px;
    right: 0;
}

.first-choose .info .background .one-img {
    width: 553px;
    height: 291px;

    position: absolute;
    left: 0;
    bottom: 100px;

    object-fit: cover;

    border-radius: 20px;
}

.first-choose .info .background .second-img {
    width: 553px;
    height: 291px;

    position: absolute;
    right: 0;
    top: 100px;

    object-fit: cover;

    border-radius: 20px;
}

.first-choose .info .background .third-img {
    width: 386px;
    height: 386px;

    position: absolute;
    right: 20px;
    bottom: -20px;
}

.first-choose .info .background .fourth-img {
    width: 386px;
    height: 386px;

    position: absolute;
    left: -30px;
    top: 30px;
}


.choose {
    width: calc(100% - 200px);
    /*max-width: 1720px;*/
    padding: 80px 100px 0 100px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-flow: column;
    gap: 60px;

    position: relative;
}

.choose > .title {
    width: 700px;

    display: flex;
    align-items: flex-start;
    flex-flow: column;
    gap: 20px;
}

.choose .title h2 {
    width: 100%;

    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);
}

.choose .title h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.choose .filters-button {
    display: none;
}

.choose .filters {
    display: flex;
    gap: 30px;
}

.choose .filters .one {
    padding: 10px 20px;

    border-radius: 10px;
    border: 2px solid var(--white);
    cursor: pointer;
    margin: 15px;
}

.choose .filters .one .title {
    display: flex;
    gap: 10px;
}

.choose .filters .one .title span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--white);
}

.choose .filters .one .title img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}


.choose .box {
    width: 100%;

    display: flex;
    flex-flow: wrap row;
    gap: 30px;
}

.choose .box > .one {
    width: calc(50% - 15px - 60px);
    height: auto;
    padding: 30px;

    display: flex;
    justify-content: left;
    gap: 30px;

    position: relative;

    background: var(--black-grey);
    border-radius: 20px;
}

.choose .box .one > .img {
    width: 45%;
    height: 305px;

    position: relative;

    overflow: hidden;
    border-radius: 20px;
}

.choose .box .one .img .main-img {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    object-fit: cover;
}

.choose .box .one .img .play {
    width: 30%;
    max-width: 70px;
    height: auto;
    position: absolute;
    bottom: 5px;
    right: 5px;
    opacity: 0.7;
    z-index: 2;

}

.choose .box .one .img .bottom {
    width: 132px;

    display: flex;
    gap: 10px;

    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
}

.choose .box .one .img .bottom .left {
    width: 66px;

    display: flex;
    flex-flow: column;
}

.choose .box .one .img .bottom .left .top {
    display: flex;
    gap: 10px;
}

.choose .box .one .img .bottom .left .top img {
    width: 24px;
    height: 24px;
}

.choose .box .one .img .bottom .left .top span {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: white;
}

.choose .box .one .img .bottom .left > span {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: white;
    opacity: .3;
}

.choose .box .one .img .bottom .right img {
    width: 56px;
    height: 24px;
}

.choose .box .one .mobile-data {
    display: none;
}

.choose .box .one .info {
    height: 100%;
    width: 55%;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 30px;
}

.choose .box .one .info .title {
    display: flex;
    flex-flow: column;
    gap: 20px;

    text-decoration: none;
}

.choose .box .one .info .title .top {
    display: flex;
    gap: 10px;
}

.choose .box .one .info .title .top img {
    width: 32px;
    height: 32px;
}

.choose .box .one .info .title .top h4 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);

    position: relative;
}

/*.choose .box .one .info .title .top .online:after {*/
/*    content: '';*/
/*    width: 12px;*/
/*    height: 12px;*/

/*    position: absolute;*/
/*    right: -22px;*/
/*    top: 10px;*/

/*    background: rgba(28, 143, 40, 1);*/
/*    border-radius: 50%;*/
/*}*/

.choose .box .one .info .title span {
    width: 100%;

    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    text-align: left;
    color: var(--white);
}

.choose .box .one .info .param {
    width: 100%;

    display: flex;
    flex-flow: column;
    gap: 10px;
}

.choose .box .one .info .param a {
    text-align: right;
    font-size: 14px;
    font-weight: 650;
}

.choose .box .one .info .param .one {
    display: flex;
    gap: 10px;
}

.choose .box .one .info .param .one img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}

.choose .box .one .info .param .one h5 {
    font-size: 16px;
    font-weight: 350;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    font-family: StemRegular, serif;
}

.choose .box .one .info .buttons {
    width: 100%;
    display: flex;
    gap: 20px;
}

.choose .box .one .info .buttons .one-button {

    width: 50%;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: var(--primary);
    cursor: pointer;
}

.choose .box .one .info .buttons .one-button a {
    font-family: Stem, serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
    color: var(--black);
    text-decoration: none;
}

.choose .box .one .info .buttons .one-button span {
    font-size: 15px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
    color: var(--black);
}

.choose .box .one .info .buttons .one-button img {
    width: 24px;
    height: 24px;

    filter: var(--filter-black);
}

.choose .box .one > .like {
    position: absolute;
    right: 30px;
    top: 30px;

    display: flex;
    gap: 10px;
}

.choose .box .one > .like span {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

.choose .box .one > .like span:nth-child(1) {
    font-size: 15px;
    padding-top: 4px;
}

.choose .box .one > .like img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}


.free {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 80px 100px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.free .box {
    max-width: 1338px;
    width: 100%;
    height: auto;
    padding: 50px 40px;

    display: flex;
    gap: 63px;

    background: var(--black-grey);
    border-radius: 20px;
}

.free .other-box {
    height: 364px;
}

.free .box .left {
    width: 920px;

    display: flex;
    flex-flow: column;
    gap: 30px;
}

.free .box .child p {
    font-size: 50px;
    line-height: 60px;
}

.free .box .left h2 {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--white);
}

.free .box .child h2 {
    font-size: 44px;
    line-height: 48px;
}

.free .box .left ul {
    padding: 0;

    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 10px;
}

.free .box .left ul li {
    padding-left: 30px;

    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);

    display: flex;
    align-items: center;

    background-image: url("../icons/check-white.svg");
    background-repeat: no-repeat;
    filter: var(--filter-white);
}


.free .box .right {
    width: 440px;

    display: flex;
    justify-content: center;
    flex-flow: column;
    gap: 10px;
}

.free .box .right input {
    width: calc(100% - 10px);
    height: 48px;
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: rgba(17, 17, 17, 1);

    background: white;
    border-radius: 10px;
    border: none;
    outline: none;
}

.free .box .right .processing-data-checkbox {
    display: flex;
    flex-direction: row;
}

.free .box .right .processing-data-checkbox a {
    color: orangered;
}


.free .box .right .button {
    width: 100%;
    height: 48px;
    margin-top: 14px;
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: rgba(19, 19, 37, 1);
    cursor: pointer;
}

.free .box .right .button span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: white
}

.free .box .right p {
    padding: 20px 0;
}

.free .box > img {
    width: 850px;
    height: 588px;

    position: absolute;
    left: 200px;
    top: -44px;

    object-fit: cover;
}

.free .other-box {
    justify-content: right;
    overflow: hidden;
}

.free .other-box .info {
    width: 693px;

    display: flex;
    flex-flow: column;
    gap: 50px;

    z-index: 1;
}

.free .other-box .child-test {
    gap: 20px;

}

.free .other-box .info h2 {
    font-size: 54px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--black);
}

.free .other-box .info h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.free .other-box .info p {
    font-size: 20px;
}

.free .other-box .info .button {
    width: 299px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--black);
    border-radius: 10px;
    cursor: pointer;
}

.free .other-box .info .button span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--white);
}

.free .other-box .info a {
    text-decoration: none;
}

.for-you {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 180px 100px;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-flow: column;
    gap: 60px;

    position: relative;
}

.for-you h2 {
    width: 100%;

    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--primary);
}

.for-you .box {
    width: 100%;

    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap: 30px;
}

.for-you .box .col {
    width: 100%;
    height: 360px;

    display: flex;
    flex-flow: column;
    gap: 30px;
}

.for-you .box .one {
    width: 100%;
    height: 300px;
    padding: 30px;
    overflow: hidden;
    position: relative;
    background: var(--white);
    border-radius: 20px;
}

.for-you .box .col .one {
    width: calc(100% - 60px);
}

.for-you .box .col .one .moon {
    display: none;
    left: 0;
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.for-you .box .one h4 {
    font-size: 40px;
    font-weight: 500;
    line-height: 42px;
    text-align: left;
    max-width: 450px;
    color: var(--black);
}

.for-you .box .one img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.for-you .box .one .bottom {
    position: absolute;
    bottom: 30px;
    left: 30px;

    display: flex;
    align-items: flex-start;
    flex-flow: column;
    gap: 10px;
}

.for-you .box .col .one .bottom {
    left: auto;
    right: 30px;
    bottom: 28px;
}

.for-you .box .one .bottom p {
    font-family: 'Stem', sans-serif;
    font-size: 35px;
    font-weight: 500;
    line-height: 31px;
    text-align: center;
    color: var(--black);
}

.for-you .box .one .bottom p:nth-child(2) {
    font-size: 18px;
    margin-top: -15px;
}

.for-you .box .one .bottom p > span {
    margin-top: -20px;
}

.for-you .box .one .bottom .button {
    width: 188px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--black);
    border-radius: 10px;
    cursor: pointer;
}

.for-you .box .one .bottom .button span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--white);
}

.for-you .box .one .bottom .button:hover {
    background: var(--white);
    border: 1px solid var(--black);
}

.for-you .box .one .bottom .button:hover span {
    color: var(--black);
}


.coach {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 80px 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;

    display: flex;
    flex-flow: column;
    gap: 30px;

    position: relative;
}

.coach .top {
    display: flex;
    gap: 10%;
}

.coach .top .left {
    width: 720px;
    height: 405px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    border-radius: 20px;
}

.coach .top .left > img {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    object-fit: cover;
}

.coach .top .left .play {
    width: 157px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    z-index: 1;

    border-radius: 100px;
    border: 1px solid var(--black);
    cursor: pointer;
}

.coach .top .left .play img {
    width: 24px;
    height: 24px;

    filter: var(--filter-black);
}

.coach .top .left .play span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--black);
}

.coach .top .left .play:hover {
    background: var(--black);
}

.coach .top .left .play:hover img {
    filter: var(--filter-white);
}

.coach .top .left .play:hover span {
    color: var(--white);
}

.coach .top .right {
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.coach .top .right .title {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.coach .top .right .title .top {
    display: flex;
    gap: 10px;
}

.coach .top .right .title .top img {
    width: 32px;
    height: 32px;
}

.coach .top .right .title .top h4 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);

    position: relative;
}

.coach .top .right .title .top > .button-for-request {
    margin: -10px 10px 0 10px;
    padding: 10px 15px;
    display: flex;
    gap: 10px;
    border: 2px solid var(--primary);
    border-radius: 10px;
    cursor: pointer;
}

.coach .top .right .title .top > .button-for-request > span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}

.coach .top .right .title span {
    width: auto;

    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--white);
}

.coach .top .right .param {
    width: 436px;

    display: flex;
    flex-flow: column;
    gap: 10px;
}

.coach .top .right .param .one {
    display: flex;
    gap: 10px;
}

.coach .top .right .param .one img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}

.coach .top .right .param .one h5 {
    font-size: 16px;
    font-weight: 350;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    font-family: StemRegular, serif;
}

.coach .bottom {
    display: flex;
    gap: 30px;
}

.coach .coach-return a {
    font-size: 18px;
}

.coach .bottom .left {
    display: flex;
    flex-flow: column;
    gap: 60px;
}

.coach .super {
    width: 875px;
    height: 107px;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    border-top: 1px solid rgba(34, 34, 34, 1);
    border-bottom: 1px solid rgba(34, 34, 34, 1);
}

.coach .super .top {
    display: flex;
    gap: 10px;
}

.coach .super .top img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}

.coach .super .top span {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.coach .super .bottom {
    padding-left: 34px;
}

.coach .super .bottom span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

.coach .menu {
    width: 875px;
    height: 52px;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    border-bottom: 1px solid rgba(34, 34, 34, 1);
}

.coach .menu .one {
    padding-bottom: 20px;

    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);

    cursor: pointer;
}

.coach .menu .one-focus {
    border-bottom: 1px solid var(--white);
}

.coach .desc {
    width: 875px;
    padding-bottom: 30px;
    margin-top: -30px;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;

    position: relative;

    border-bottom: 1px solid rgba(34, 34, 34, 1);
}

.coach .desc .background {
    display: none;
}

.coach .desc h4 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.coach .desc span {
    font-family: 'StemRegular', sans-serif;
    font-size: 18px;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

.coach .desc .button {
    margin-top: 10px;

    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    text-decoration: underline;

    cursor: pointer;
}

.coach .bottom .right {
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.coach .bottom .right .title, .coach .bottom .right .buttons {
    display: flex;
    flex-flow: column;
}

.wrap-cost-repetit {
    display: flex;
    flex-direction: row;
}

.cost-repetit {
    padding-right: 30px;
}

.coach .bottom .right .buttons {
    gap: 10px;
}

.coach .bottom .right .title h3 {
    font-size: 40px;
    font-weight: 500;
    line-height: 52px;
    text-align: left;
    color: var(--white);
}

.coach .bottom .right .title span {
    font-size: 16px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.coach .bottom .right .buttons .one {
    padding: 10px 20px;

    display: flex;
    gap: 10px;

    background: var(--white);
    border-radius: 10px;
    cursor: pointer;
}

.coach .bottom .right .buttons .one img {
    width: 24px;
    height: 24px;

    filter: var(--filter-black);
}

.coach .bottom .right .buttons .one span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--black);
}


.about-top {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 10px 100px 10px 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;

    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 60px;

    position: relative;
}

.about-top .title {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.about-top .title h1 {
    font-size: 62px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--white);
}

.about-top .title span, .about-top .title p {
    font-family: StemRegular, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.about-top .title a {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    text-decoration: none;
}

.about-top .images {
    display: flex;
    gap: 30px;
}

.about-top .images img {
    width: 553px;
    height: 225px;

    object-fit: cover;

    border-radius: 20px;
}


.about-center {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 40px 100px 40px 100px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: column;
    gap: 100px;

    position: relative;
}

.about-center .main {
    width: 40%;
    height: auto;

    object-fit: cover;
}

.about-center .info {
    width: 50%;

    position: absolute;
    top: 80px;
    right: 100px;

    display: flex;
    align-items: flex-end;
    flex-flow: column;
    gap: 60px;
}

.about-center .info .title {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    gap: 20px;
}

.about-center .info .title h2 {
    width: 553px;

    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: right;
    color: var(--white);
}

.about-center .info .title span {
    width: 449px;

    font-family: StemRegular, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: right;
    color: var(--white);

    position: relative;
}

.about-center .info p {
    font-family: StemRegular, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

/*.about-center .info .title span:before {*/
/*    content: '';*/
/*    width: 50px;*/
/*    height: 0;*/

/*    position: absolute;*/
/*    top: 8px;*/
/*    left: -70px;*/

/*    border-radius: 10px;*/
/*    border: 4px solid rgba(146, 202, 206, 1);*/
/*}*/


.about-center .info > span {
    font-family: StemRegular, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: right;
    color: var(--white);
}

.about-center .numbers {
    width: 100%;
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 20px;
}

.about-center .numbers .one {
    display: flex;
    gap: 10px;
    padding: 0 20px;
}

.about-center .numbers .one h5 {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--black);
}

.about-center .numbers .one span {
    font-family: StemRegular, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--black);
}


.double {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 40px 100px 40px 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;

    display: flex;
    gap: 30px;

    position: relative;
}

main .double img {
    width: 40%;
    height: auto;
    border-radius: 20px;
}

.double .info {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.double .info h3 {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: left;
    color: var(--white);
}

.double .info p {
    font-family: StemRegular, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 27px;
    text-align: left;
    color: var(--white);
}

.double .info span {
    font-family: StemRegular, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

.first-double .info {
    padding-left: 50px;
}

.first-double .info h2 {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: right;
    color: var(--white);
}

.first-double .info span {
    text-align: right;
    color: var(--white);
}

.finance {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 80px 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;

    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 60px;

    position: relative;
}

.finance .title {
    max-width: 1458px;

    display: flex;
    flex-flow: column;
    gap: 20px;
}

.finance .title h2 {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: center;
    color: var(--white);
}

.finance .title span {
    font-family: StemRegular, serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: center;
    color: var(--white);
}

.finance .box {
    width: 100%;

    display: flex;
    align-items: flex-end;
    gap: 30px;
}

.finance .box .one {
    max-width: 554px;
    padding: 30px;

    display: flex;
    flex-flow: column;
    gap: 30px;

    position: relative;

    background: var(--primary);
    border-radius: 24px;
}

.finance .box .one .abs {
    width: 100%;

    position: absolute;
    top: -140px;
    left: 0;

    font-family: StemRegular, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: -0.015em;
    text-align: center;
    color: var(--white);
}

.finance .box .one > img {
    width: 364px;
    height: 69px;
}

.finance .box .one .info {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.finance .box .one .info h4 {
    font-size: 48px;
    font-weight: 500;
    line-height: 52px;
    text-align: left;
    color: var(--black);
}

.finance .box .one .info span {
    font-family: StemRegular, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--black);
}

.finance .box .one .info .button {
    max-width: 155px;
    padding: 14px 10px;

    background: var(--white);
    border-radius: 10px;
    cursor: pointer;
}

.finance .box .one .info .button span {
    font-family: StemRegular, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--black);
}


.news {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 80px 100px 80px 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;

    display: flex;
    flex-flow: column;
    gap: 60px;

    position: relative;
}

.online-test {

    width: calc(100% - 200px);
    max-width: 1720px;
    /*padding: 80px 100px 80px 100px;*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;

    /*display: flex;*/
    flex-flow: column;
    gap: 60px;

    position: relative;
}

.online-test-inner {

    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 100px;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
    /*display: flex*/;
    align-items: center;
    justify-content: left;
    background: var(--black-grey);
    border-radius: 20px;
    opacity: 0.8;
}

.online-test-inner h2 {
    padding-bottom: 30px;;
}

.online-test-inner h3 {
    color: chocolate;
    padding: 30px 0;
}

.online-test-inner p {
    font-size: 25px;
    padding: 0 30px 40px 30px;
}

.online-test-inner > p:nth-child(2) {
    padding: 10px 0;
    font-size: 18px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 22px;
    color: var(--white);
    margin-bottom: 10px;


}

.checkbox-input {
    display: none; /* Скрываем стандартный чекбокс */
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #007BFF;
    border-radius: 20px;
    margin: 0 20px;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-custom::after {
    content: '';
    width: 22px;
    height: 22px;
    background-color: #007BFF;
    border-radius: 20px;
    border: 1px solid #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s ease;
}

.checkbox-input:checked + .checkbox-custom::after {
    transform: translate(-50%, -50%) scale(1); /* Показываем галочку */
}

.checkbox-input:checked + .checkbox-custom {
    border-color: #007BFF;
}

.checkbox-label:hover .checkbox-custom {
    border-color: #0056b3;
}

.checkbox-label:hover .checkbox-input:checked + .checkbox-custom {
    border-color: #007BFF;

}

.test-online-question {
    margin-top: 50px;
}

.test-online-question-form {
    width: 100%;
    border: 2px solid var(--primary);
    border-radius: 10px;
    color: var(--white);
    background-color: rgba(3, 3, 3, 0);
    text-decoration: none;
    padding: 5px 15px;
    font-size: 23px;
    display: inline-block;
    margin-bottom: 10px;
    min-height: 36px;
    /* border-radius: 18px; */
    box-sizing: border-box;
    transition-duration: .2s;
}

.test-online-wrapp .online-test-inner .input-online-test {
    /*width: 420px;*/
    height: 20px;
    flex: 1;
    padding: 14px 10px 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--white-opacity);
    border: 2px solid var(--primary);
}

.test-online-wrapp .online-test-inner .input-online-test input {
    width: 100%;
    min-width: 200px;
    font-family: Stem, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--white);
    background: none;
    border: none;
    outline: none;
}

.test-online-wrapp .button {
    width: 250px;
    height: 52px;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary);
    cursor: pointer;
}

.test-online-wrapp button:hover {
    cursor: pointer;
    background: #ccf7fc;
    border-radius: 10px;
    transition: 1s;
}


.test-online-wrapp button {
    background: none;
    border: none;
    height: 100%;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: var(--black);
}

.test-online-wrapp .result {
    display: none;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}


.test-online-wrapp .button img {
    width: 24px;
    height: 24px;
    filter: var(--filter-black);
}

.test-online-wrapp .online-test-inner .input-online-test img {
    width: 24px;
    height: 24px;
    filter: var(--filter-white);
}

.test-online-wrapp .online-test-inner .input-online-test-wrapp {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 10px;
    padding: 50px 0;
}

.test-online-wrapp textarea {
    height: 15vh;
}

/*     !* Скрываем стандартную радиокнопку *!*/
/* .radio-input {*/
/*     display: none;*/
/* }*/

/*!* Стилизация контейнера радиокнопки *!*/
/*.radio-label {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    cursor: pointer;*/
/*    font-family: Arial, sans-serif;*/
/*    font-size: 22px;*/
/*    color: var(--white);*/
/*    margin-bottom: 10px;*/
/*}*/

/*!* Стилизация кастомной радиокнопки *!*/
/*.radio-custom {*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    border: 2px solid #007BFF;*/
/*    border-radius: 50%;*/
/*    margin: 0 20px;*/
/*    position: relative;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*!* Стилизация внутреннего круга (выбранное состояние) *!*/
/*.radio-custom::after {*/
/*    content: '';*/
/*    width: 10px;*/
/*    height: 10px;*/
/*    background-color: #007BFF;*/
/*    border-radius: 50%;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    opacity: 0;*/
/*    transition: opacity 0.3s ease;*/
/*}*/

/*!* Изменение стиля при выборе радиокнопки *!*/
/*.radio-input:checked + .radio-label .radio-custom {*/
/*    border-color: #007BFF;*/
/*}*/

/*.radio-input:checked + .radio-label .radio-custom::after {*/
/*    opacity: 1;*/
/*}*/

/*!* Эффект при наведении *!*/
/*.radio-label:hover .radio-custom {*/
/*    border-color: #0056b3;*/
/*    background-color: #007BFF;*/
/*}*/


.news h2 {
    width: calc(100% - 60px);
    height: 91px;
    padding: 0 30px;

    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);

    display: flex;
    align-items: center;
    justify-content: left;

    background: var(--black-grey);
    border-radius: 20px;
}

.news .box {
    width: 100%;

    display: flex;
    flex-flow: column;
    gap: 60px;
}

.news .box .top {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news .box .top .left {
    min-width: 479px;

    display: flex;
    flex-flow: column;
}

.news .box .top .left h3 {
    font-size: 48px;
    font-weight: 500;
    line-height: 52px;
    text-align: left;
    color: var(--white);
}

.news .box .top .right {
    max-width: 420px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.news .box .top .right span {
    font-family: StemRegular, serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}

.news .box .bottom {
    width: 100vw;

    position: relative;

    display: flex;
    justify-content: right;
    align-items: center;
    gap: 30px;
}

.news .box .bottom .buttons {
    position: absolute;
    left: 0;

    display: flex;
    align-items: center;
    gap: 30px;
}

.news .box .bottom .buttons a {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);
    text-decoration: underline;

    cursor: pointer;
}

.news .box .bottom .buttons .col {
    display: flex;
    flex-flow: column;
    gap: 10px;
}

.news .box .bottom .buttons .col img {
    width: 24px;
    height: 24px;

    cursor: pointer;
    filter: var(--filter-white);
}

.news .box .bottom .slider::-webkit-scrollbar {
    display: none;
}

.news .box .bottom .slider {
    width: calc(100% - 237px);
    overflow-x: auto;

    display: flex;
    gap: 30px;
}

.news .box .bottom .one {
    width: 321px;
    min-width: 312px;

    display: flex;
    flex-flow: column;
    gap: 20px;
}

.news .box .bottom .one img {
    width: 100%;
    height: 355px;

    object-fit: cover;
}

.news .box .bottom .one h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--white);
}

.news .box .bottom .one span {
    font-family: StemRegular, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--white);
}


.faq {
    width: calc(100% - 200px);
    max-width: 1490px;
    padding: 80px 100px 240px 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;

    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 60px;

    position: relative;
}

.faq h3 {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: center;
    color: var(--white);
}

.faq .box {
    width: 100%;

    display: flex;
    flex-flow: column;
    gap: 30px;
}

.faq .box .one {
    width: calc(100% - 60px);
    padding: 30px;

    position: relative;

    background: var(--white);
    border-radius: 20px;
    cursor: pointer;
}

.faq .box .one .icon {
    width: 60px;
    height: 60px;

    position: absolute;
    right: 30px;
    top: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    font-weight: 500;
    color: var(--white);

    background: var(--black-grey);
    border-radius: 50%;
}

.faq .box .one .title {
    max-width: calc(100% - 90px);
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.faq .box .one .title h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: left;
    color: var(--black);
}

.faq .box .one .title span {
    font-family: StemRegular, serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    color: var(--black);
}

.faq .box .one-close .title span {
    display: none;
}


.about-bottom {
    width: calc(100% - 200px);
    max-width: 1720px;
    padding: 0 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;

    display: flex;
    align-items: center;
    flex-flow: column;
    position: relative;
}

.about-bottom .title {
    max-width: 1490px;

    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 20px;
}

.about-bottom .title h2 {
    font-size: 64px;
    font-weight: 500;
    line-height: 68px;
    text-align: center;
    color: var(--white);
}

.about-bottom .title span {
    font-family: StemRegular, serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    text-align: center;
    color: var(--white);
}


.popup-container {
    width: 100vw;
    height: 100vh;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.3);
}

.popup-container .popup {
    width: 1010px;
    height: 619px;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 60px;

    position: relative;

    border-radius: 20px;
    background: var(--white);
}

.popup-container .popup .top {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 30px;
}

.popup-container .popup .top .img {
    width: 140px;
    height: 140px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(146, 202, 206, .1);
    border-radius: 20px;
}

.popup-container .popup .top .img img {
    width: 140px;
    height: 140px;
}

.popup-container .popup .top .title {
    display: flex;
    flex-flow: column;
    gap: 13px;
}

.popup-container .popup .top .title h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: 52px;
    text-align: center;
    color: var(--black);
}

.popup-container .popup .top .title h5 {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--black);
}

.popup-container .popup .bottom {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 30px;
}

.popup-container .popup .bottom .fields {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 10px;
}

.popup-container .popup .bottom .processing-data-checkbox {
    display: flex;
    flex-direction: row;
}

.popup-container .popup .bottom .processing-data-checkbox p {
    font-family: Stem, sans-serif;
    color: var(--black);
    padding: 0 10px 10px 10px;
}

.popup-container .popup .bottom .processing-data-checkbox a {
    font-family: Stem, sans-serif;
    color: orangered;
}

.popup-container .popup .bottom .fields input {
    width: 438px;
    height: 48px;
    padding-left: 10px;

    font-family: Stem, serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    border-radius: 10px;
    border: 1px solid rgb(54 185 195);
    /*background: var(--white);*/
    outline: none;
    box-shadow: 0px 2px 6px 0px rgba(19, 18, 66, 0.07);
}

.popup-container .popup .bottom .button {
    width: 229px;
    height: 44px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    background: var(--black);
    border-radius: 10px;

    cursor: pointer;
}

.popup-container .popup .bottom .button:hover {
    cursor: pointer;
    width: 219px;
    height: 40px;
    -webkit-box-shadow: 0px 0px 12px 5px rgba(82, 100, 114, 0.69);
    -moz-box-shadow: 0px 0px 12px 5px rgba(82, 100, 114, 0.69);
    box-shadow: 0px 0px 12px 5px rgba(82, 100, 114, 0.69);

}

.popup-container .popup .bottom .button button:hover {
    cursor: pointer;
}

.popup-container .popup .bottom .button img:hover {
    cursor: pointer;
}

.popup-container .popup .send-info p {
    font-size: 12px;
    color: #323232;
}

.popup-container .popup .bottom .button button {
    color: var(--white);
    font-size: 18px;
    border: none;
    background: none;
}

.popup-container .popup .bottom .button span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--white);
}

.popup-container .popup .bottom .button img {
    width: 24px;
    height: 24px;

    filter: var(--filter-white);
}

.popup-container .popup .cross {
    width: 24px;
    height: 24px;

    position: absolute;
    right: 60px;
    top: 60px;

    filter: var(--filter-black);

    cursor: pointer;
}

.magnet-container {
    width: 100%;
    height: 100%;

}

.magnet-container-wrapp {
    width: 100%;
    height: 100%;
    background-position: center center;
    /* определяет размер изображения на странице */
    background-size: cover;
    /* свойство устанавливает, будет ли повторяться изображение и каким образом */
    background-repeat: no-repeat;
}

.magnet-container-txt-wrapp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    margin: 0 15%;
}

.magnet-container-txt-wrapp .magnet-container-txt h1 {
    color: white;
    font-size: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif

}

.magnet-container-txt-wrapp .magnet-container-txt p {
    padding: 30px 60px;
    color: white;
    font-size: 22px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif

}

.magnet-container-txt-wrapp .magnet-container-txt .magnet-container-button button {
    width: 250px;
    height: 50px;
    background: yellow;
    border: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 10px;
    text-align: center;
    color: rgb(38 38 38);
    cursor: pointer;
}