* {
    margin: 0;
    padding: 0;
}

.ck-content > * {
    padding: inherit;
}

.ck-content > ul {
    margin-left: 40px;
}

html {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    --content-padding: 10%;
    --content-border-radius: 11px;
    --max-width: 1440px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

main {
    margin-bottom: 20px;
}

.cookie-notification {
    padding-top: 27px;
    padding-bottom: 60px;
    position: fixed;
    bottom: 1vw;
    left: 34px;
    background-color: var(--white-color);
    opacity: 1;
    width: 20%;
    min-width: 400px;
    height: auto;
    min-height: 35%;
    border-radius: var(--content-border-radius);
    text-align: center;
}

    .cookie-notification img {
        width: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 15px;
    }

    .cookie-notification p {
        padding-left: 45px;
        padding-right: 45px;
        margin-bottom: 45px;
        font-size: 14px;
        font-weight: 300;
        font-weight: normal;
        color: #000000;
    }

    .cookie-notification .cookie-notification-buttons {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        border-radius: var(--content-border-radius);
    }

    .cookie-notification a {
        width: 50%;
        padding: 23px 10px;
        text-align: center;
        border-top: 1px solid #00415F;
        border-radius: 0px 11px 11px 0px;
        font-size: 14px;
        font-weight: 300;
        font-weight: normal;
        color: #000000;
    }

        .cookie-notification a:first-child {
            background-color: var(--main-color);
            color: var(--white-color);
            border-radius: 11px 0px 0px 11px;
        }

body {
    background-color: var(--light-grey);
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Nunito";
}

    body.is-no-scroll {
        overflow: hidden;
    }

.field-validation-error {
    color: var(--validation-message);
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-Medium.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-Light.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-Black.ttf") format("truetype");
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-VariableFont_wght.ttf") format("truetype");
    font-weight: 1000;
    font-display: swap;
}

header {
    width: 100%;
}

nav {
    max-width: var(--max-width);
    background-color: var(--main-color);
    display: grid;
    grid-template-columns: 35% 1fr 35%;
    grid-gap: 10px;
    font-weight: 700;
    align-items: center;
    padding-left: var(--content-padding) !important;
    padding-right: var(--content-padding) !important;
    margin: auto;
    min-height: 61px;
}

    nav .nav__right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

.search__box {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
}


    .search__box .search__close {
        display: none;
        cursor: pointer;
        font-weight: 300;
        font-size: 16px;
        line-height: 22px;
        color: #FFFFFF;
        margin: 0 10px;
        opacity: 0;
        transition: opacity 0.4s;
    }

    .search__box.open .search__close {
        display: flex;
        width: 100%;
        opacity: 1;
        justify-content: flex-end;
    }

    .search__box.open.closed .search__close {
        display: none;
        opacity: 0;
    }

    .search__box .search {
        min-height: 61px;
    }

    .search__box.open .search {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        right: 24%;
    }

    .search__box.open.closed .search {
        background: transparent;
    }


    .search__box .search__form {
        align-items: center;
        position: relative;
        display: flex;
        min-height: 61px;
        justify-content: space-between;
        width: 16vw;
        max-width: 300px;
        transition: width 0.3s, justify-content 0.3s;
    }

    .search__box .input__cover {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        transition: width 0.2s;
        z-index: 2;
        max-width: 890px;
    }

    .search__box.open .input__cover {
        position: absolute;
        margin-right: 1%;
        animation: inputOpen 0.7s forwards;
    }

    .search__box.open.closed .input__cover {
        animation: inputClose 0.7s forwards;
    }

.no_animation {
    animation: none !important;
}

@keyframes inputOpen {
    from {
        right: 10%;
        width: 100%;
    }

    to {
        right: 35%;
        width: 45vw;
    }
}

@keyframes inputClose {
    from {
        right: 35%;
        width: 45vw;
    }

    to {
        right: 10%;
        width: 100%;
    }
}

.search__box input {
    background: #F5F5F5;
    border-radius: 59px;
    border: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    padding: 12px 10px 5px 50px;
    height: 40px;
    width: 100%;
    transition: width 0.5s;
}

    .search__box input:focus {
        outline: none;
    }

    .search__box input::placeholder {
        color: #D1D1D6;
    }

.search__box.open .clear__button {
    position: absolute;
    right: 8px;
    top: 12px;
    cursor: pointer;
    display: flex;
    font-size: 32px;
    color: var(--main-color);
}

.search__box.open.closed .clear__button {
    display: none;
}

.search__box label {
    position: absolute;
    top: 10px;
    left: 8px;
    transition: all 0.3s;
}

.search__box .nav__search__img {
    font-size: 28px;
    color: var(--main-color);
}

.search__box .search__mobile {
    display: none;
}

.search__box .search__results {
    width: 100%;
    max-height: 93vh;
    background: #fff;
    display: none;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 65px;
    z-index: 10;
}

.search__box.open .search__results {
    display: flex;
}

.search__box.open.closed .search__results {
    display: none;
}

.search__box .search__library {
    display: flex;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #000;
}

    .search__box .search__library .search__area {
        margin: 10px 25px;
        padding: 5px 10px;
        cursor: pointer;
        background: #DFDFDF;
        border-radius: 6px;
    }

.active__search__area {
    background: #E6D2B2 !important;
}

.search__box .search__library .search__area:hover {
    background: #E6D2B2;
}

.search__box .results__container {
    width: 44%;
    padding-left: 2%;
    margin-left: -6%;
    padding-right: 15px;
    margin-bottom: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
}

    .search__box .results__container div {
        width: 100%;
        text-align: center;
        padding: 20px 0;
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
        color: #D1D1D6;
    }

    .search__box .results__container::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .search__box .results__container::-webkit-scrollbar-track {
        background: #f6f4f4;
    }

    .search__box .results__container::-webkit-scrollbar-thumb {
        background: var(--main-color);
        border-radius: 3px;
    }

    .search__box .results__container h2 {
        font-weight: 700;
        font-size: 30px;
        line-height: 41px;
        display: flex;
        align-items: center;
        color: #00415F;
    }

    .search__box .results__container .theory__card {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-column-gap: 15px;
        border-radius: 11px;
        padding: 10px 15px;
        margin: 10px -20px;
    }

        .search__box .results__container .theory__card:hover {
            background: #F5F5F5;
        }

            .search__box .results__container .theory__card:hover .theory__card__category {
                background: #E6D2B2;
            }

    .search__box .results__container .theory__card__left {
        padding: 0;
    }

    .search__box .results__container p {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        text-align: left;
        color: #A3A3A3;
    }

    .search__box .results__container ul {
        font-weight: 700;
        font-size: 20px;
        line-height: 27px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        color: #000000;
    }

        .search__box .results__container ul li {
            color: #000;
            margin: 5px 0;
            text-align: start;
        }

        .search__box .results__container ul a {
            word-break: break-word;
        }

            .search__box .results__container ul a:hover {
                text-decoration: underline;
                color: #000;
            }

    .search__box .results__container .theory__card__right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding: 0;
    }

    .search__box .results__container .theory__card__category {
        font-style: normal;
        font-weight: 400;
        font-size: 11px;
        line-height: 15px;
        color: #000000;
        padding: 5px 10px;
        margin-right: 10px;
        background: #DFDFDF;
        border-radius: 6px;
        width: auto;
    }

    .search__box .results__container .glossary-card {
        text-align: start;
    }

        .search__box .results__container .glossary-card p {
            color: #000;
            font-size: 16px;
        }

nav img {
    max-height: 55px;
    cursor: pointer;
}

nav .login .login-for-mobile {
    padding: 8px 10px;
    color: var(--white-color);
    background-color: #54a9eb;
    text-align: center;
    border-radius: 20px;
    font-family: "Arial";
    max-width: 90px;
    align-items: center;
    justify-content: center;
}

nav .login {
    justify-content: right;
}

    nav .login .login-for-mobile i {
        margin-right: 5px;
    }

    nav .login .menu-right {
        display: flex;
        justify-content: right;
        position: relative;
        align-items: center;
    }


    nav .login .user {
        text-align: right;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fff;
        position: relative;
    }

    nav .login .notification__count {
        position: absolute;
        background: #838383;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        font-style: normal;
        font-weight: 700;
        font-size: 11px;
        line-height: 11px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        top: -1px;
        right: -1px;
    }

.menu__cabinet__button {
    position: relative;
}

    .menu__cabinet__button .notification__count {
        position: absolute;
        top: 3px;
        right: 3px;
        font-size: 10px;
        display: none;
    }

        .menu__cabinet__button .notification__count.alarm {
            display: flex;
        }

nav .login .user a {
    max-width: 34px;
    max-height: 34px;
}

nav .login .user img {
    max-width: 34px;
    max-height: 34px;
}

nav .login .user__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 0 0 10px;
}

    nav .login .user__info h3 {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 98.9%;
        text-align: start;
        color: #fff;
        margin: 3px 0;
        max-width: 135px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    nav .login .user__info p {
        font-style: normal;
        font-weight: 500;
        font-size: 11px;
        line-height: 98.9%;
        color: #D1D1D6;
        margin: 3px 0;
        max-width: 135px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

nav .login .open__arrow {
    color: #fff;
    font-size: 28px;
    line-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
}

    nav .login .open__arrow i {
        transition: all 0.1s;
    }

nav .login .menu-right.popup__open .open__arrow i {
    transform: rotate(-90deg);
}

nav .login .menu-right.popup__open .user__popup__menu {
    height: fit-content;
}

nav .login .menu-right .open__popup__menu {
    cursor: pointer;
}

.user__popup__menu {
    position: absolute;
    width: 230px;
    background: #fff;
    border-radius: 11px;
    top: 55px;
    z-index: 3;
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;
}

    .user__popup__menu .popup__box {
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

        .user__popup__menu .popup__box .user__info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 0 0 0 10px;
        }

        .user__popup__menu .popup__box .user__info__box {
            display: flex;
        }

            .user__popup__menu .popup__box .user__info__box img {
                max-height: 18px;
                margin: 3px 0;
            }

    .user__popup__menu .user__info {
        align-items: flex-start;
    }

nav .user__popup__menu .user__info h3 {
    color: #000 !important;
    max-width: 170px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.user__popup__menu .user__info h3 {
    color: #000;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user__popup__menu .popup__box .popup__item {
    display: flex;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 98.9%;
    margin: 5px 0;
    cursor: pointer;
}

    .user__popup__menu .popup__box .popup__item p {
        margin: 0px 7px;
    }

.user__popup__menu .popup__box .uil-sign-out-alt {
    color: #DA5742;
}

.user__popup__menu .popup__box .logout {
    font-weight: 700;
}

nav .mobile-logo a {
    display: inline-flex;
}

nav .mobile-logo h1 {
    font-weight: 300;
    margin-top: 5px;
    margin-left: 8px;
}

nav h1 {
    color: var(--white-color);
    cursor: pointer;
}

nav ul {
    text-align: center;
}

    nav ul li {
        margin-left: 10px;
        margin-right: 10px;
        color: var(--grey-color);
        display: inline;
    }

        nav ul li:hover {
            color: #fff;
        }

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

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

nav ul li a {
    cursor: pointer;
}

nav ul li.active {
    color: var(--white-color);
    display: inline;
}

.mobile-menu {
    display: none;
}

nav .login {
    text-align: right;
}

.hero-section {
    background-color: var(--main-color);
    text-align: center;
    overflow-wrap: break-word;
}

.hero-section-title {
    max-width: 1000px;
    margin: auto;
    padding-top: 60px;
}

.hero-section .logo-img {
    padding-top: 40px;
    height: 96px;
}

.hero-section h1 {
    text-transform: uppercase;
    padding-top: 40px;
    font-weight: 700;
    color: var(--white-color);
    font-size: 55px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin-bottom: 15px;
}

.hero-section .action-button {
    display: block;
    width: 271px;
    height: 46px;
    margin: auto;
    font-weight: 300;
    font-size: 17px;
    color: var(--main-color);
    background-color: var(--light-button);
    border-radius: var(--content-border-radius);
    cursor: pointer;
    line-height: 46px;
}

.main-image {
    width: 100%;
    max-width: var(--max-width);
    margin-bottom: 40px;
}

.top-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    font-weight: 700;
    margin: auto;
    margin-top: 20px;
    text-shadow: #00415f 1px 0 10px;
    color: var(--white-color);
}

    .top-menu li {
        margin: 5px;
    }

.description {
    font-size: 28px;
    font-weight: 300;
    color: var(--white-color);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: auto;
}

.hero-section .action {
    margin: 18px auto 42px;
}

.video-section video {
    width: 100%;
}

.benefits-section {
    font-weight: 300;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    padding-top: 55px;
    padding-bottom: 100px;
}

.benefits-section-container {
    max-width: var(--max-width);
    margin: auto;
}

.benefits-section-container-dark {
    background: var(--main-color);
}


.benefits-header {
    font-size: 43px;
    font-weight: 300;
    text-align: center;
    color: var(--main-color);
    margin-bottom: 1rem;
}

.benefits-section .benefit-raw {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 15px;
}

    .benefits-section .benefit-raw .element {
        text-align: left;
        max-width: 330px;
        width: 100%;
    }


        .benefits-section .benefit-raw .element i {
            font-size: 40px;
            color: var(--main-color);
        }


        .benefits-section .benefit-raw .element h2 {
            margin-bottom: 6px;
            margin-top: 10px;
            font-weight: bold;
            color: var(--main-color);
            margin-left: 6px;
        }

        .benefits-section .benefit-raw .element p {
            color: var(--main-color);
            padding-right: 25px;
            margin-left: 6px;
        }

.partners-top-section {
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: var(--light-grey);
}

    .partners-top-section h3 {
        padding-bottom: 40px;
        font-size: 28px;
        text-align: center;
        font-weight: 300;
        color: #00415f;
    }

.partners-logo-container {
    text-align: center;
    max-width: var(--max-width);
    margin: auto;
    display: flex;
}

.partners-line-item {
    border-top: 1px solid #d9d9d9;
    margin-left: 3%;
    margin-right: 3%;
}

.partner-logo {
    width: 50%;
    height: auto;
    margin-bottom: 20px;
    filter: grayscale(1);
}

    .partner-logo:hover {
        filter: grayscale(0);
    }

.print-edition {
    overflow-wrap: break-word;
}

.print-edition-bg {
    height: 2000px;
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

.print-edition .images {
    position: sticky;
    top: 250px;
    max-width: var(--max-width);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0px 5px;
}

    .print-edition .images .book-element {
        width: 100%;
        position: relative;
        margin: auto;
        height: 400px;
    }

        .print-edition .images .book-element img {
            margin: auto;
            width: 100%;
            position: absolute;
            max-width: 280px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }


.print-edition h2 {
    text-align: center;
    font-size: 64px;
    font-weight: 400;
    font-weight: normal;
    margin: auto;
    max-width: var(--max-width);
}

.print-edition-title-container {
    position: sticky;
    top: 25px;
}

.print-edition-title {
    visibility: hidden;
    color: var(--main-color);
    border-top-left-radius: var(--content-border-radius);
    border-top-right-radius: var(--content-border-radius);
    display: none;
}

.print-edition-subheader {
    position: sticky;
    top: 1500px;
    text-align: center;
    margin: auto;
    max-width: var(--max-width);
}

    .print-edition-subheader h3 {
        font-size: 28px;
        font-weight: 300;
        color: var(--main-color);
        border-bottom-right-radius: var(--content-border-radius);
        border-bottom-left-radius: var(--content-border-radius);
    }

.partner-proposition {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    background-color: var(--main-color);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

    .partner-proposition h3 {
        padding-bottom: 40px;
        font-size: 28px;
        font-weight: 300;
        color: var(--white-color);
    }

    .partner-proposition a {
        display: block;
        width: 271px;
        height: 46px;
        margin: auto;
        font-weight: 300;
        font-size: 17px;
        color: var(--main-color);
        background-color: var(--light-button);
        border-radius: var(--content-border-radius);
        cursor: pointer;
        line-height: 46px;
    }

.mobile-screen-item {
    visibility: hidden;
    position: sticky;
    top: 200px;
    text-align: center;
    margin-bottom: 100px;
}

    .mobile-screen-item img {
        z-index: 1;
        transform: scaleY(0.99439) scaleX(0.99439);
        max-width: 300px;
        width: 100%;
    }

.partners-section {
    text-align: center;
    padding-top: 50px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    overflow-wrap: break-word;
}

    .partners-section h2 {
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 43px;
        text-align: center;
        color: var(--main-color);
        margin-bottom: 1rem;
    }

    .partners-section img {
        width: 100%
    }

.packages {
    margin-bottom: 100px;
    max-width: var(--max-width);
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

.wrapper-mobile-menu {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

.card-template {
    box-shadow: 0px 17px 54px -19px #dfdfdf;
    margin-bottom: 5px;
    background-color: var(--white-color);
    border-radius: var(--content-border-radius);
    padding: 17px 21px;
    overflow-wrap: break-word;
}

    .card-template.light__blue {
        background: #EAF0F7;
    }

        .card-template.light__blue:hover {
            background: #D5F7D2;
        }

.card {
    cursor: pointer;
}

.list-tablet {
    list-style-type: none;
}

.card-wrapper {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card .image-container {
    display: flex;
    align-items: center;
    border-radius: var(--content-border-radius);
    justify-content: center;
}

.card .image-container-bgc {
    background-color: #F8CCCC;
}

.card .image-container div {
    text-align: center;
    border-radius: var(--content-border-radius);
}

header {
    background-color: var(--main-color);
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.card h2 {
    line-height: 1.36em;
    font-size: 30px;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card p {
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.36em;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 24px;
    font-weight: 300;
    font-weight: normal;
}

.tags {
    margin-bottom: 0px;
    padding-top: 3px
}

    .tags span {
        background-color: var(--light-button);
        border-radius: 5px;
        padding: 4px;
        font-size: 18px;
        font-weight: 300;
        margin: 0px 5px 0px 0px;
    }

.price-line {
    margin-top: 22px;
}

    .price-line .price {
        color: var(--main-color);
        font-size: 36px;
        line-height: 1.36em;
        font-weight: 300;
        text-align: right;
        margin: auto 0px;
    }

        .price-line .price span {
            font-weight: 300;
        }

.card .content {
    padding: 0px 20px;
    box-sizing: border-box;
    overflow: auto
}

.task {
    overflow-wrap: break-word;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

    .task h1 {
        text-align: center;
        color: var(--main-color);
        font-size: 64px;
        font-weight: 400;
        margin-top: 30px;
        margin-bottom: 50px;
    }

.list-with-actions-header {
    margin-bottom: 12px;
    display: block;
    overflow-wrap: break-word;
    display: grid;
    grid-template-columns: 1fr 180px;
}

    .list-with-actions-header a {
        margin: auto;
    }



    .list-with-actions-header h2 {
        font-size: 36px;
        font-weight: 400;
    }

.list-with-actions-body {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 15px 1fr 270px;
    background: #FFFFFF;
    border-radius: 12px;
}

    .list-with-actions-body:has(.drafts) {
        grid-template-columns: 15px 1fr 360px;
    }

    .list-with-actions-body:hover .marker {
        background: #00415F;
    }

    .list-with-actions-body .marker {
        background: #E6D2B2;
        border-radius: 12px 0px 0px 12px;
    }

    .list-with-actions-body:first-child {
        margin-top: 8px;
    }

    .list-with-actions-body a {
        display: flex;
        box-sizing: border-box;
        padding: 0px 5px 0px 5px;
        min-width: 100px;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        height: fit-content;
    }

        .list-with-actions-body a:last-child {
            background-color: var(--light-button);
            color: var(--main-color);
        }


    .list-with-actions-body h3 {
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 33px;
        margin-bottom: 0px;
        padding: 25px;
    }

.main-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 15px;
    gap: 15px;
}

.main-button {
    padding: 10px 15px 10px 15px;
    font-weight: 300;
    color: var(--white-color);
    border-radius: var(--content-border-radius);
    cursor: pointer;
    background-color: var(--main-color);
    border: none;
}

    .main-button:visited {
        color: var(--white-color);
    }

.light-button {
    padding: 10px 15px 10px 15px;
    font-weight: 300;
    color: var(--main-color);
    border-radius: var(--content-border-radius);
    cursor: pointer;
    background-color: var(--light-button);
    border: none;
}

.test-exam-button {
    padding: 10px 15px 10px 15px;
}

.test-exam h2 {
    font-size: 18px;
    font-weight: 400;
}

.test-exam p {
    padding: 15px 0px 15px 0px;
    font-weight: 300;
    font-size: 20px;
}

.test-exam-start {
    text-align: center;
}

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


.countdown-placeholder {
    background-color: #CCE3F8;
    border-radius: var(--content-border-radius);
    color: #00415F;
    padding: 20px;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
}

.countdouns-answer-count {
    font-weight: 300;
    text-align: center;
    padding: 10px 0px;
}

#step-three {
    text-align: center;
    font-weight: 700;
}

.user-exam-result {
    font-weight: 400;
    font-size: 60px;
}

    .user-exam-result .title {
        font-size: 30px;
        color: var(--main-color);
    }

.support__container {
    position: fixed;
    bottom: calc(10% + 125px);
    right: calc(5% + 10px);
    z-index: 10;
}

    .support__container .open__block {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 20px;
    }

        .support__container .open__block.hidden {
            display: flex !important;
            width: 0;
            height: 0;
            opacity: 0;
            visibility: hidden;
        }

            .support__container .open__block.hidden .callback__form {
                opacity: 0;
            }

        .support__container .open__block .callback__form {
            background: #DCE3F0;
            padding: 20px;
            border-radius: 30px;
            color: #08212D;
            max-width: 327px;
            display: flex;
            gap: 15px;
            flex-direction: column;
        }

            .support__container .open__block .callback__form .cross {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                font-size: 20px;
                line-height: 100%;
                margin-bottom: -30px;
            }

                .support__container .open__block .callback__form .cross i {
                    cursor: pointer;
                    z-index: 1;
                }

            .support__container .open__block .callback__form h4 {
                font-size: 24px;
                font-weight: 900;
            }

            .support__container .open__block .callback__form p {
                font-size: 15px;
            }

            .course__registration__template .registration__form .form__box .input__container,
            .support__container .open__block .callback__form .input__container {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #EAF0F7;
                border-radius: 24px;
                padding: 0px 30px;
                gap: 10px;
                font-size: 16px;
            }

                .course__registration__template .registration__form .form__box .input__container img,
                .support__container .open__block .callback__form .input__container img {
                    max-width: 20px;
                }

                .course__registration__template .registration__form .form__box .input__container input,
                .support__container .open__block .callback__form .input__container input {
                    background: transparent;
                    border: none;
                    outline: none;
                    color: #08212D;
                    font-family: 'Nunito';
                    padding: 12px 0;
                }

                    .course__registration__template .registration__form .form__box .input__container input::-webkit-input-placeholder,
                    .support__container .open__block .callback__form .input__container input::-webkit-input-placeholder {
                        color: rgba(163, 163, 163, 0.5);
                    }

            .support__container .open__block .callback__form .submit__button {
                background: #56CB4C;
                color: #fff;
                border-radius: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 18px 10px;
                font-size: 20px;
                font-weight: 700;
                cursor: pointer;
            }

        .support__container .open__block .options__block {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;
        }

    .support__container .action__button {
        width: 77px;
        height: 77px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        position: relative;
    }

    .support__container .light__circle {
        background: rgba(86, 203, 76, 0.2);
        height: 111px;
        width: 111px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        position: absolute;
        animation: hideshow 5s infinite;
    }

    .support__container .middle__circle {
        background: rgba(86, 203, 76, 0.5);
        height: 93px;
        width: 93px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        position: absolute;
        animation: hideshowcentral 5s infinite;
    }

    .support__container .internal__circle {
        background: #56CB4C;
        width: 77px;
        height: 77px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
    }

    .support__container .open__block .support__button {
        background: #2D8CFF;
        cursor: pointer;
    }

    .support__container .open__block .error__field {
        font-size: 10px;
        color: red;
        line-height: 10px;
        margin-left: 5px;
    }

@keyframes hideshow {
    0%, 20%, 80%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes hideshowcentral {

    0%, 100% {
        opacity: 0;
    }

    20%, 50%, 80% {
        opacity: 1;
    }
}

.course__registration__template {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}

    .course__registration__template .registration__form {
        background: #DCE3F0;
        border-radius: 30px;
        padding: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .course__registration__template .registration__form .form__container {
            max-width: 560px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
        }

            .course__registration__template .registration__form .form__container .texts {
                padding: 0 20px;
            }

            .course__registration__template .registration__form .form__container h4 {
                font-size: 24px;
                font-weight: 800;
            }

            .course__registration__template .registration__form .form__container .additional__text {
                font-size: 20px;
            }

            .course__registration__template .registration__form .form__container .form__box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 15px;
                width: 100%;
            }

                .course__registration__template .registration__form .form__container .form__box .error__field {
                    font-size: 12px;
                    padding: 0 20px;
                    color: red;
                }

                .course__registration__template .registration__form .form__container .form__box .submit__button {
                    background: var(--main-color);
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 64px;
                    border-radius: 24px;
                    font-size: 20px;
                    font-weight: 700;
                    width: 100%;
                    cursor: pointer;
                }

            .course__registration__template .registration__form .form__container .success__registration,
            .course__registration__template .registration__form .form__container .failed__registration {
                font-size: 26px;
                text-align: center;
            }

.concurency-button {
    text-align: right;
    margin-top: -24px;
    margin-bottom: 10px;
}

.package-list-menu h2 {
    font-size: 36px;
    font-weight: 300;
}

.sub-menu-packages {
    margin-top: 10px;
    margin-bottom: 10px;
}


.disable-mobile .card__template__menu {
    padding: 17px 15px;
    background: #fff linear-gradient(90deg, #fff, #fff 0px, #dfdfdf 0, #dfdfdf 2px, #fff, #fff 2px);
    background-position: 34px 50px;
    background-repeat: no-repeat;
}

.disable-mobile .card__template__menu__container.fixed,
.fixed__menu {
    position: sticky;
    top: 5px;
    width: 285px;
    max-height: 86vh;
    display: grid;
    grid-template-rows: auto 1fr;
}

.disable-mobile .card__template__menu.fixed__menu ul {
    overflow: hidden;
    overflow-y: auto;
}

    .disable-mobile .card__template__menu.fixed__menu ul::-webkit-scrollbar {
        width: 3px;
    }

    .disable-mobile .card__template__menu.fixed__menu ul::-webkit-scrollbar-track {
        background: inherit;
        border-radius: 5px;
    }

    .disable-mobile .card__template__menu.fixed__menu ul::-webkit-scrollbar-thumb {
        background: #00415F;
        border-radius: 3px;
    }

.card__template__menu.card__margin {
    margin-top: 66px;
}

.sub-menu-packages h2 {
    font-size: 36px;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px;
}

.sub-menu-packages h3 {
    font-size: 18px;
    font-weight: 400;
}

.sub-menu-packages .grid {
    cursor: pointer;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0px 5px;
}

    .sub-menu-packages .grid .content {
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 10px;
    }

    .sub-menu-packages .grid .image-container {
        background-color: var(--main-color);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 42px;
    }

        .sub-menu-packages .grid .image-container div {
            padding: 10px;
            border-radius: var(--content-border-radius);
        }

        .sub-menu-packages .grid .image-container img {
            width: 100%;
            height: auto;
        }


.sub-menu-packages .package-description h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: #000000;
}

.sub-menu-packages .price {
    text-align: right;
    font-size: 18px;
    font-weight: 400;
    color: var(--main-color);
}

    .sub-menu-packages .price span {
        font-size: 15px;
    }

.nunito-regular {
    font-weight: 400;
}

hr {
    border-top: 1px solid var(--main-color);
}


.theory {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

    .theory .title {
        text-align: center;
        color: var(--main-color);
        font-size: 24px;
        font-weight: 400;
        margin-top: 30px;
        margin-bottom: 50px;
    }

.package-description h3 {
    font-size: 18px;
}

.package-description h4 {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 400;
}

.package-list-menu ul li {
    margin: 15px 0;
    list-style-type: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #A3A3A3;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0px 5px;
    cursor: default;
    pointer-events: none;
}

    .package-list-menu ul li a {
        max-height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -moz-box;
        -moz-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .package-list-menu ul li.unlocked {
        cursor: pointer;
        pointer-events: auto;
    }

.package-list-menu .check {
    background: #D1D1D6;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: 11px;
}

.package-list-menu .unlocked .check,
.package-list-menu .active .check {
    background: var(--main-color);
}

.package-list-menu .unlocked,
.package-list-menu .active {
    color: #000;
}

.recovery-page {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    overflow-wrap: break-word;
    text-align: center;
    align-items: center;
    font-weight: 400;
}

    .recovery-page h1 {
        color: var(--main-color);
        font-size: 64px;
        font-weight: bold;
        text-align: center;
        padding-bottom: 0px;
        padding-top: var(--content-padding);
    }

.error-page {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    overflow-wrap: break-word;
    display: flex;
    text-align: left;
    align-items: center;
}

    .error-page .error-page-image {
        width: 55%;
    }

        .error-page .error-page-image img {
            width: 100%;
        }

    .error-page h1 {
        color: var(--main-color);
        font-size: 120px;
        font-weight: 400;
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .error-page h2 {
        text-align: center;
        color: var(--main-color);
        font-size: 64px;
        font-weight: 400;
    }

.profile-page {
    padding-top: 20px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    max-width: var(--max-width);
    margin: auto;
}

    .category__header .button,
    .profile-page .button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 64px;
        background: var(--main-color);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        border-radius: 8px;
        text-align: center;
        text-wrap: nowrap;
        cursor: pointer;
    }

        .profile-page .button.thintext {
            font-weight: 200;
        }

        .profile-page .button.bigtext {
            font-size: 24px;
        }

input {
    font-weight: 400;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-color: var(--main-color);
    border-radius: var(--content-border-radius);
    border: 1px solid;
    font-size: 16px;
}

    input[type=radio] {
        width: auto;
    }

    input:focus {
        border-color: var(--light-button);
    }

select {
    font-weight: 400;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-color: var(--main-color);
    border-radius: var(--content-border-radius);
    border: 1px solid;
}

::-webkit-input-placeholder {
    font-weight: 400;
    color: #404049;
    letter-spacing: 0.5px;
}

::-moz-placeholder {
    font-weight: 400;
}

:-ms-input-placeholder {
    font-weight: 400;
}

:-moz-placeholder {
    font-weight: 400;
}

.login__main__container {
    background: radial-gradient(circle, #BFD3E8 0%, #F5F5F5 35%), radial-gradient(circle, #F9EDC7 0%, #F5F5F5 35%);
    background-position: 40% 42%, -8% 75%;
    background-size: 33% 45%, 38% 45%;
    background-repeat: no-repeat;
}

.recovery__main__container {
    background: radial-gradient(circle, #BFD3E8 0%, #F5F5F5 35%), radial-gradient(circle, #F9EDC7 0%, #F5F5F5 35%);
    background-position: 45% 50%, -8% 75%;
    background-size: 44% 45%, 45% 45%;
    background-repeat: no-repeat;
}

    .recovery__main__container .login {
        display: flex;
        margin: 90px auto;
        font-size: 21px;
        line-height: 29px;
        letter-spacing: 0.02em;
        color: #14213D;
    }

.login__main__container .login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 90px auto;
    font-size: 21px;
    line-height: 29px;
    letter-spacing: 0.02em;
    color: #14213D;
    gap: 10px;
}

.login h1 {
    font-weight: 700;
    font-size: 64px;
    line-height: 87px;
    letter-spacing: 0.02em;
    color: #14213D;
    padding: 25px 0;
}

.login .login__image {
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
}

    .login .login__image.slide1 {
        background-image: url('img/login/slider1.png');
    }

    .login .login__image.slide2 {
        background-image: url('img/login/slider2.png');
    }

    .login .login__image.slide3 {
        background-image: url('img/login/slider3.png');
    }

    .login .login__image.slide4 {
        background-image: url('img/login/slider4.png');
    }

    .login .login__image .text {
        width: 70%;
        padding: 25px 10%;
    }

.recovery__main__container .login__image {
    width: 60%;
    background: none;
}

    .recovery__main__container .login__image img {
        width: 100%;
        margin: 0;
    }

.login .login__container {
    padding: 25px 0;
}

.login .logo {
    font-weight: 400;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #14213D;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 25px 0;
}

.recovery__main__container .logo {
    margin-bottom: 100px;
}

.login .logo img {
    width: 55px;
    margin-right: 20px;
}

.login .logo .small__text {
    font-size: 16px;
    line-height: 100%;
    padding-bottom: 5px;
    text-align: center;
}

.login form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.login .input__box {
    position: relative;
    display: flex;
    width: 30vw;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

    .login .input__box.check {
        display: grid;
        grid-template-columns: 1fr 20px;
        gap: 5px;
        max-width: 30vw;
    }

.login input {
    background: #EAF0F7;
    min-height: 90px;
    font-size: 24px;
    line-height: 33px;
    position: inherit;
    padding-top: 20px;
    border: none;
    border-radius: 24px;
    margin: 0;
    padding-left: 40px;
    outline: none;
}

.login .check input {
    min-height: 40px;
}

.login input + label {
    display: none;
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 14px;
    line-height: 19px;
    color: #B4B4C8;
}

.login input:not(:placeholder-shown) + label {
    display: flex;
}

.show__password__button {
    width: 50px;
    height: 75px;
    position: absolute;
    right: 20px;
    top: 8px;
    cursor: pointer;
}

input[type="email"] {
    background-image: url(img/icons/login.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
}

input[name="passwordrepeat"],
input[name="password"] {
    background-image: url(img/icons/password.png);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 46px;
}

.webinar__registration__template .registration__form .form__box .registration__button,
.webinar__registrationfull__template .registration__form .form__box .registration__button,
.login button {
    font-family: 'Nunito';
    width: 30vw;
    min-height: 90px;
    background: #00415F;
    border: none;
    border-radius: 24px;
    font-weight: 600;
    font-size: 36px;
    line-height: 49px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin: 0;
    transition: background 0.3s;
    transition: color 0.3s;
}

    .login button.google__button {
        font-family: 'Nunito';
        width: 30vw;
        min-height: 90px;
        background: #fff;
        border: none;
        border-radius: 24px;
        font-weight: 600;
        font-size: 36px;
        line-height: 49px;
        text-align: center;
        letter-spacing: 0.02em;
        color: #14213D;
        margin: 20px 0 0 0;
        transition: background 0.3s;
        transition: color 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .login button.google__button:hover {
            background: #FFD700;
        }

        .login button.google__button .img__box {
            padding: 20px 0 0 14px;
        }

    .login button:hover {
        background: #00AEFF;
    }

.login .login__reminder {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #858597;
    margin: 25px 0;
}

    .login .login__reminder hr {
        border: none;
        border-top: 1px solid #858597;
        width: 15%;
        margin: 0px 15px;
    }

.login .auth__switch__box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login .auth__switch {
    width: 30vw;
}

    .login .auth__switch a {
        color: #0057B8;
        text-decoration: underline 1px;
    }

        .login .auth__switch a:visited {
            color: blueviolet;
        }

.recovery__main__container .field-validation-error,
.field-validation-error {
    font-size: 14px;
    line-height: 19px;
    position: absolute;
    left: 20px;
    top: 15px;
}


.profile-page-form {
}

    .profile-page-form .image-container {
        text-align: center;
    }

        .profile-page-form .image-container img {
            max-height: 70px;
            border-radius: 50%;
        }

.progress {
    box-sizing: border-box;
    border-radius: 5px;
    width: 100%;
    background: #D1D1D6;
    height: 10px;
}

.my-progress {
    border: 1px solid #F78663;
}


.progress .progress__bar {
    height: 100%;
    background-color: #0FB800;
    border-radius: 11px;
    width: 91%;
    max-width: 100%;
}

.my-progress-bar {
    background-color: #F78663 !important;
}

.chart-list-progress {
    margin-left: 31px;
    margin-right: 25px;
}

.profile-page h1 {
    text-align: center;
    color: var(--main-color);
    line-height: 1.36em;
    font-weight: 400;
}

.profile-page .button-container {
    text-align: right;
}

.profile-page-content h2 {
    font-size: 36px;
    font-weight: 400;
}

.profile-page-content h3 {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.36em
}

.profile-page-content .overview-grid {
    display: grid;
    grid-auto-flow: column;
}

.profile-page-content .mistake-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.vertical-center {
    margin-bottom: auto;
    margin-top: auto;
}

.profile-page-content .vertical-center {
    margin-bottom: auto;
    margin-top: auto;
}

.profile-page-content .mistake-item .action-button {
    padding: 5px;
    display: block;
    color: white;
}

.user-task {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .user-task .desktop__report {
        display: grid;
        grid-template-columns: 1fr;
    }

.decktop-user-task .next-task,
.next-task.teacher__tasks {
    text-align: center;
    display: flex;
    justify-content: flex-end;
}

    .decktop-user-task .next-task button {
        padding: 10px;
    }

.user-task h1 {
    text-align: left;
    color: var(--main-color);
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 50px;
}

.user-task .question-with-answer-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    margin-bottom: 11px;
}

.question-with-answer-item .index {
    text-align: center;
    margin: auto;
    font-weight: 400;
    font-size: 20px;
    color: #000;
}

.question-with-answer-item .text {
    font-weight: 400;
    text-align: left;
}

.question-with-answer-item .bold-text {
    font-weight: 400;
    text-align: left;
}

.mistake-header {
    font-weight: 700;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 30px;
}

.exam__review__headerbox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.card-hover {
    cursor: pointer;
    transition: background 0.1s ease-out;
}

    .card-hover:hover {
        background: #f9f9f9;
    }

#awq-container .selected {
    background: var(--light-button);
    color: var(--main-color);
}

.wrong-answer {
    background: #F8CCCC !important;
}

.notanswered-answer {
    background: #00415f57 !important;
}

input[type='radio'].wrong-answer:after {
    background: #F8CCCC !important;
}

input[type='radio'].notanswered-answer:after {
    background: #00415f57 !important;
}

.correct-answer {
    background: #CCF8E0 !important;
}

input[type='radio'].correct-answer:after {
    background: #CCF8E0 !important;
}

.blog-list {
    max-width: var(--max-width);
    margin: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

    .blog-list h1 {
        text-align: center;
        color: var(--main-color);
        font-size: 30px;
        font-weight: 400;
        margin-top: 30px;
        margin-bottom: 50px;
    }

.blog-article {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

    .blog-article h1 {
        text-align: center;
        color: var(--main-color);
        font-size: 64px;
        font-weight: 400;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .blog-article h2 {
        text-align: center;
        font-weight: 600;
        line-height: 2.0em;
    }

    .blog-article p {
        font-weight: 300;
        text-align: justify;
        line-height: 1.36em;
    }

    .blog-article .highlight-text {
        font-weight: 600;
    }


    .blog-article p,
    .blog-article h2 {
        font-size: 20px;
    }

.mobile-menu-panel {
    position: fixed;
    left: 0;
    width: 100%;
    height: 400px;
    z-index: 1;
    overflow: scroll;
    bottom: 200px;
    padding: 0px;
    display: none;
}

.mobile-menu-panel-active {
    display: block;
}

.mobile-menu-panel .package-list-menu {
    padding: 20px;
}

footer {
    display: flex;
    margin-top: auto;
    background-color: var(--white-color);
}

.footer-container {
    color: var(--main-color);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    display: flex;
    max-width: var(--max-width);
}

footer div:not(:first-child) {
    margin-left: auto;
}

footer div {
    font-weight: 400;
    margin-top: auto;
    margin-bottom: auto;
}


    footer div img {
        width: 100%;
    }

.no-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.tabs__container {
    position: sticky;
    top: 0px;
    z-index: 2;
    background: var(--light-grey);
}

.packages-tabs {
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    padding-bottom: 50px;
    font-weight: 700;
    text-align: center;
    gap: 10px 10px;
    display: grid;
    cursor: pointer;
    z-index: 1;
    position: sticky;
    top: 0;
}

.packages .packages-tabs {
    padding-top: 50px;
}

.packages-tabs.packages-tabs-slider {
    position: absolute;
    bottom: 25px;
    right: 50%;
    transform: translate(50%);
    padding-bottom: 0px;
    display: flex;
    overflow: auto;
    flex: none;
    width: 100%;
    scroll-snap-type: x proximity;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 0px 0px;
}

    .packages-tabs.packages-tabs-slider p {
        margin-top: 0px;
        margin-bottom: 0px;
    }

.packages-tabs .tab-item {
    padding: 2px;
    background-color: #fff;
    border-radius: var(--content-border-radius);
}

.packages-tabs .tab-item-slider {
    min-width: 170px;
    padding: 2px;
    background-color: #fff;
    border-radius: 6px;
    background-color: #EDEDED;
    margin-right: 10px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.36em;
    scroll-snap-align: center;
}

    .packages-tabs .tab-item-slider:last-child {
        margin-right: 50%;
    }

    .packages-tabs .tab-item-slider:first-child {
        margin-left: 50%;
    }

.packages-tabs .tab-item:hover {
    background: var(--main-color);
    color: var(--white-color);
}

    .packages-tabs .tab-item:hover h1 {
        color: var(--white-color);
    }

.packages-tabs .active {
    background: var(--main-color);
    color: var(--white-color);
    border-radius: var(--content-border-radius);
}

    .packages-tabs .active h1 {
        color: var(--white-color);
    }

.packages-tabs h1 {
    font-size: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.profile-personal-card {
    display: block;
    position: relative;
}


.profile-page-content {
    display: flex;
    justify-content: space-between;
}



.profile-content-person-information-button {
    justify-content: right;
    display: flex;
}

profile-content-person-information-button.mobile-version {
    display: none;
}

.profile-content-person-information-button .button-edit {
    margin-right: 10px;
    font-size: 18px;
    cursor: pointer;
}

.profile-content-person-information-button .button-exit {
    font-size: 18px;
    cursor: pointer;
}

.button-exit {
    color: #F78663;
}

.mistake-analitics {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

a.is-disable {
    pointer-events: none;
    cursor: default;
    color: #7C633C;
}


.profile-page-form-mobile {
}

.card-template.profile-page-form-none {
    display: none;
}

.profile-page-form .image-container {
    text-align: center;
    max-width: 130px;
    display: flex;
    align-items: start;
    justify-content: center;
    margin-right: 28px;
}

    .profile-page-form .image-container img {
        max-height: 70px;
    }

.profile-button.profile-button-bgc {
    background-color: #CCE3F8;
    min-width: 90px;
}

.profile-button-wrapper {
    display: flex;
    margin-top: 17px;
    flex-wrap: wrap;
}

.profile-button {
    box-sizing: border-box;
    display: flex;
    background-color: #CCE3F8;
    padding: 15px 17px;
    margin-bottom: 10px;
    border-radius: var(--content-border-radius);
    text-align: center;
    line-height: 1.36em;
    font-size: 14px;
    font-weight: 300;
    background-color: #E6D2B2;
    min-width: 160px;
    align-items: center;
}

    .profile-button:not(:last-child) {
        margin-right: 10px;
    }

.profile-content-person-information {
    line-height: 1.36em;
    font-size: 12px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.68);
    margin-top: 7px;
}

.profile-content {
    color: var(--main-color);
    overflow: hidden;
}

    .profile-content h2 {
        font-size: 24px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.error-page .error-page-title {
    width: 45%;
}

    .error-page .error-page-title h1 {
        font-size: 58px;
        font-weight: 300;
        line-height: 1em;
        color: #000000;
    }

    .error-page .error-page-title p {
        margin-bottom: 42px;
        font-size: 18px;
        font-weight: 300;
    }

.error-page h2 {
    font-size: 48px;
    line-height: 1.36em;
}

.chart-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

    .chart-list p {
        font-size: 11px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.51);
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.current-user {
}

    .current-user p {
        color: #00415F
    }

    .current-user .progress__bar {
        background-color: #F78663;
    }

.chart {
    display: block;
}

.block-wrapper {
    text-align: center;
    display: flex;
    justify-content: center;
    color: var(--main-color);
}

    .block-wrapper p {
        font-size: 144px;
        font-weight: 300;
        line-height: 1.36em;
    }

    .block-wrapper i {
        padding-bottom: 45px;
    }

.emoji {
    font-size: 126px;
}

.empty-page-content {
    text-align: center;
}

    .empty-page-content .empty-page-text {
        text-align: center;
        color: var(--main-color);
        font-size: 64px;
        line-height: 1.36em;
        font-weight: 400;
    }

    .empty-page-content a {
        display: inline-block;
        font-weight: 300;
        font-size: 36px;
        border-radius: var(--content-border-radius);
        padding: 15px 56px 15px 56px;
        cursor: pointer;
        text-align: center;
        margin-top: 25px;
    }

.backdrop {
    display: none;
}

.is-hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.modal-window {
    box-sizing: border-box;
    top: 50%;
    width: 70vw;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    max-height: 95%;
    background-color: #ffffff;
    border-radius: 11px;
    color: #757575;
    padding: 26px 70px;
    font-size: 12px;
    line-height: 1.17em;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    line-height: 1.17em;
    font-style: normal;
    color: #757575;
    overflow-y: auto;
}

.content-mobile-menu {
    display: none;
}

.mobile-modal-title {
    line-height: 1.0em;
    font-size: 64px;
    font-weight: 300;
    color: #000000;
}

.modal-texst {
    line-height: 1.36em;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 24px;
    font-weight: 300;
    color: #000000;
    margin-bottom: 25px;
}

.modal-list span {
    line-height: 1.36em;
    font-size: 36px;
    font-weight: 300;
    color: #000000;
    margin-right: 24px;
}

.modal-list li {
    display: flex;
    line-height: 1.36em;
    font-size: 24px;
    font-weight: 300;
    color: #000000;
    box-shadow: 0px 17px 54px -19px #DFDFDF;
    align-items: center;
    padding-bottom: 7px;
    padding-top: 7px;
    cursor: pointer;
}

.ck-content img {
    max-width: 100%;
}

.loader-container {
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    text-align: center;
    top: 0;
    height: 100%;
    background-color: var(--main-color);
    opacity: 0.9;
}

    .loader-container img {
        width: 190px;
    }

.user__cabinet__grid .step-course-container {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

.profile-page .step-course-container {
    padding: 0;
    gap: 15px;
    display: flex;
    flex-direction: column;
}

.step-course-container {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

    .step-course-container .user-task .buttons__box {
        display: grid;
        grid-template-columns: minmax(0, 360px) minmax(0, 360px);
        gap: 14px;
        align-items: center;
        justify-content: space-between;
        justify-items: stretch;
    }

    .step-course-container.chunk__based {
        position: relative;
        margin: 0;
        padding: 0;
    }

        .step-course-container.chunk__based .result__container {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-align: center;
            background-image: radial-gradient(circle, rgb(0 102 204 / 15%) 14%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle, rgb(255 204 0 / 15%) 20%, rgba(255, 255, 255, 0) 50%);
            background-position: 30% 10%, 68% 59%;
            background-repeat: no-repeat;
            background-size: 50% 50%;
        }

            .step-course-container.chunk__based .result__container .img {
                max-width: 700px;
                max-height: 500px;
            }

                .step-course-container.chunk__based .result__container .img img {
                    max-width: inherit;
                    max-height: inherit;
                    object-fit: contain;
                }

            .step-course-container.chunk__based .result__container h3 {
                font-size: 48px;
                font-weight: 900;
                line-height: 50px;
                text-wrap: pretty;
                max-width: 900px;
            }

            .step-course-container.chunk__based .result__container .onechunk {
                display: none;
            }

        .step-course-container.chunk__based.one__task__chunk .result__container .onechunk {
            display: flex;
        }

        .step-course-container.chunk__based.one__task__chunk .result__container .alotchunks {
            display: none;
        }

        .step-course-container.chunk__based .result__container h3.green {
            color: #0FB800;
        }

        .step-course-container.chunk__based .result__container h3.yellow {
            color: #FFD700;
        }

        .step-course-container.chunk__based .result__container h3.red {
            color: #C43D28;
        }

        .step-course-container.chunk__based .result__container h3.blue {
            color: var(--main-color);
        }

        .step-course-container.chunk__based .result__container .text {
            font-size: 32px;
            font-weight: 800;
            color: #a3a3a3;
            max-width: 900px;
        }

        .step-course-container.chunk__based .result__container .buttons__box {
            display: grid;
            grid-template-columns: minmax(0, 302px) minmax(0, 302px);
            gap: 11px;
        }

            .step-course-container.chunk__based .result__container .buttons__box.oneline {
                display: grid;
                grid-template-columns: minmax(0, 302px);
                justify-content: center;
                align-items: center;
            }

.stepcourse__container {
    padding: 0 var(--content-padding);
}

.task__button {
    font-weight: 300;
    border-radius: var(--content-border-radius);
    cursor: pointer;
    border: none;
    font-size: 16px;
    font-family: "Nunito";
    max-width: 360px;
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.3s;
}

.notes__button {
    border-radius: var(--content-border-radius);
    cursor: pointer;
    border: none;
    font-size: 16px;
    font-family: "Nunito";
    max-width: 173px;
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--main-color);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

:root {
    --animated-button-color: #00415F;
}

.task__button.blue {
    color: var(--white-color);
    background-color: var(--main-color);
}

.task__button.light {
    color: var(--main-color);
    background-color: var(--light-button);
}

.task__button.yellow {
    background-color: #FBBC04;
    color: #08212D;
}

.task__button.red {
    background-color: #DA5742;
    color: #fff;
    transition: none;
}

.task__button.green {
    background: #0FB800;
    color: #fff;
}

.step-course-container .title {
    text-align: center;
    color: var(--main-color);
    font-size: 30px;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 50px;
}


.course-card {
    background: #FFFFFF;
    border-radius: 12px;
    margin: 15px 0;
}

.course_card_link {
    background: #FFFFFF;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 15px 28% repeat(3, 11%) repeat(2, minmax(0, 18%)) 8%;
}

    .course_card_link:hover .marker {
        background: #00415F;
    }

    .course_card_link .marker {
        background: #E6D2B2;
        border-radius: 12px 0px 0px 12px;
    }

    .course_card_link .info__container,
    .course_card_link .info__container__name {
        padding: 5px 25px;
        display: grid;
    }

        .course_card_link .info__container__name h5 {
            font-style: normal;
            font-weight: 300;
            font-size: 20px;
            line-height: 27px;
            letter-spacing: 0.02em;
            color: #A3A3A3;
        }

        .course_card_link .info__container__name .info__property {
            font-style: normal;
            font-weight: 700;
            font-size: 24px;
            line-height: 33px;
            letter-spacing: 0.02em;
            color: #000000;
            padding: 20px 0;
        }

        .course_card_link .info__container h5 {
            font-style: normal;
            font-weight: 300;
            font-size: 20px;
            line-height: 27px;
            letter-spacing: 0.02em;
            color: #A3A3A3;
            text-align: center;
        }

        .course_card_link .info__container .short__naming {
            display: none;
        }

    .course_card_link:hover .info__container .info__property {
        font-weight: 700;
    }

    .course_card_link .info__container .info__property {
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 33px;
        letter-spacing: 0.02em;
        color: #000000;
        padding: 20px 0;
        display: flex;
        justify-content: center;
    }

    .course_card_link .info__container h3 {
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 33px;
        letter-spacing: 0.02em;
        color: #000000;
    }

    .course_card_link:hover .info__container .info__property i {
        font-size: 58px;
        margin-bottom: -12px;
    }

    .course_card_link .info__container .info__property i {
        color: #00415F;
        font-size: 48px;
        margin-bottom: -10px;
    }

.user-cabinet .step-course-container .packages-tabs {
    gap: 0;
}

    .user-cabinet .step-course-container .packages-tabs .tab-item {
        padding: 2px;
        border-radius: 0;
        border-bottom: 2px solid #D1D1D6;
        background: none;
    }

        .user-cabinet .step-course-container .packages-tabs .tab-item.active,
        .user-cabinet .step-course-container .packages-tabs .tab-item:hover {
            border-bottom: 2px solid #000;
        }

            .user-cabinet .step-course-container .packages-tabs .tab-item:hover h1 {
                font-weight: 700;
                font-size: 24px;
                line-height: 33px;
                color: #000;
            }



.user-cabinet .step-course-container .tab-item h1 {
    color: #000;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-cabinet .step-course-container .packages-tabs .active h1 {
    font-weight: 700;
    font-size: 24px;
    line-height: 33px;
    color: #000;
}

.step-course-theory-list-item {
    display: grid;
    grid-template-columns: 1fr 150px 50px;
    grid-template-areas: "a b c";
}

.step-course-theory-arrow {
    margin: auto;
    font-size: 30px;
    grid-area: c;
}

.step-course-theory-lock {
    color: #F0F0F0;
}

.step-course-theory-unlock {
    color: var(--main-color);
}

.step-courst-title {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--main-color);
    grid-area: a;
}

.step-course-title-disable {
    color: var(--main-color);
    opacity: 0.7;
}

.step-course-span {
    color: #0000007d;
}

.step-lection-raw {
    margin-top: auto;
    text-align: center;
    margin-bottom: auto;
    grid-area: b;
}

.step-lection-button {
    display: block;
    color: var(--light-button);
}

.step-span {
    font-weight: 300;
    font-size: 12px;
}


.step-course-progress {
    margin-bottom: 10px !important;
    font-weight: 300;
}

.step-course-progress-title {
    font-size: 15px;
}

.step-course-progress-description {
    font-size: 16px;
    text-align: center;
}

.step-course-note-header {
    display: grid;
    grid-template-columns: 1fr 173px;
    margin-bottom: 10px;
    margin-top: 15px;
}

    .step-course-note-header h2 {
        font-weight: 300;
    }

    .step-course-note-header .save-button {
        text-align: right;
    }

.step-practice-container {
    text-align: center;
    font-weight: 300;
}

.step-practice-success > .step-practice-icon {
    color: #3bf25c;
    font-size: 150px;
}

.step-practice-failed > .step-practice-icon {
    color: #f05c5c;
    font-size: 150px;
}

.vertical-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 50px;
}

    .vertical-line > .left {
        border-right: 0.5px solid var(--main-color);
    }

    .vertical-line > .right {
        border-left: 0.5px solid var(--main-color);
    }

    .vertical-line > .left-disable {
        border-right: 0.5px solid #c1c0c0;
    }

    .vertical-line > .right-disable {
        border-left: 0.5px solid #c1c0c0;
    }

.no-bottom-margin {
    margin-bottom: 0px;
}

.pagination-container {
    display: grid;
    margin-top: 15px;
    justify-content: center;
    margin-bottom: 15px;
    font-weight: 400;
    grid-template-columns: repeat(auto-fit, minmax(48px, 48px));
    justify-items: center;
}

    .pagination-container > .pagination-item {
        margin: 5px 10px;
        padding: 0px 2px;
        font-size: 19px;
        transition-duration: 0.5s;
        cursor: pointer;
        text-align: center;
    }

        .pagination-container > .pagination-item:hover {
            margin: 0px 0px;
            padding: 5px 12px;
            color: var(--white-color);
            font-size: 19px;
            font-weight: 600;
            background-color: var(--main-color);
            border: none;
            border-radius: var(--content-border-radius);
        }

    .pagination-container > .active {
        margin: 0px 0px !important;
        padding: 5px 12px !important;
        color: var(--white-color);
        font-size: 19px !important;
        font-weight: 600;
        background-color: var(--main-color);
        border: none;
        border-radius: var(--content-border-radius);
    }

.preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    z-index: 1001;
}

.preloader__row {
    position: relative;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    text-align: center;
    animation: preloader-rotate 2s infinite linear;
}

.preloader__item {
    position: absolute;
    display: inline-block;
    top: 0;
    background-color: #337ab7;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    animation: preloader-bounce 2s infinite ease-in-out;
}

    .preloader__item:last-child {
        top: auto;
        bottom: 0;
        animation-delay: -1s;
    }



@keyframes preloader-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes preloader-bounce {

    0%, 100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

.loaded_hiding .preloader {
    transition: 0.3s opacity;
    opacity: 0;
}

.loaded .preloader {
    display: none;
}


.profile-page-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
}

.telegram-sync {
    text-align: center;
    margin-top: 15px;
}

    .telegram-sync h2 {
        font-weight: 400;
    }


.login-registration {
    font-weight: 300;
    text-align: right;
}

    .login-registration input {
        width: 20px;
        height: 20px;
    }

.user-quiz-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 500px;
}

.user-quiz-card-question {
    color: #14213D;
    font-size: 15px;
    text-align: start;
    font-weight: 700;
}

.user-quiz-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    color: #404049;
}

.user-quiz-list-container textarea {
    width: calc(100% - 90px);
    height: 50px;
    border: none;
    outline: none;
    background: #EAF0F7;
    border-radius: 30px;
    padding: 20px 45px;
    font-size: 24px;
    resize: none;
}

    .user-quiz-list-container textarea::-webkit-input-placeholder {
        font-weight: 400;
        color: #404049;
        letter-spacing: 0.5px;
        padding-bottom: 32px;
        border-bottom: 1px solid #D1D1D6;
    }

.user-quiz-card textarea {
    width: 100%;
    font-weight: 400;
    padding: 12px 20px;
    margin: 8px 0px;
    box-sizing: border-box;
    border-radius: var(--content-border-radius);
    resize: vertical;
}

.user-quiz-list-container .quiz__button {
    background: var(--main-color);
    color: #fff;
    height: 90px;
    padding: 0;
    font-size: 36px;
    font-weight: 500;
    border-radius: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.user-quiz-list-container .box__input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.user-quiz-card .button-el {
    width: 200px;
    text-align: center;
    margin: auto 0px 0px auto;
}

    .user-quiz-card .button-el > a {
        display: block;
    }


.dashboard-layout {
    display: grid;
    grid-template-columns: 330px 1fr;
}

.dashboard-menu {
    background-color: var(--main-color);
    position: fixed;
    width: 330px;
    height: 100%;
}

.dashboard-company {
    text-align: center;
    padding-top: 60px;
}

.dashboard-title {
    display: block;
    font-size: 40px;
    color: var(--white-color);
    font-weight: 700;
}

.dashboard-logo {
    width: 90px;
}

.dashboard-navigation {
    padding-left: 58px;
}

.dashboard-navigation-item {
    margin-bottom: 30px;
    margin-top: 30px;
    color: var(--white-color);
    font-size: 25px;
    font-weight: 300;
}

.dashboard-navigation-item-text {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px;
    margin-left: -5px;
}

    .dashboard-navigation-item-text-active,
    .dashboard-navigation-item-text:hover {
        width: 210px;
        background-color: var(--light-button);
        border-radius: 11px;
        color: var(--main-color);
    }

    .dashboard-navigation-item-text i {
        font-size: 40px;
        margin-right: 10px;
    }

.dashboard-content {
    grid-column-start: 2;
    padding-top: 45px;
}

.dashboard-exit {
    color: var(--white-color);
    font-size: 25px;
    font-weight: 300;
    padding-left: 58px;
    position: absolute;
    bottom: 10px;
}

.top-navbar-header {
    margin: auto auto auto 0px;
    font-weight: 700;
    color: var(--main-color);
}

.top-navbar {
    display: grid;
    grid-template-columns: 1fr 78px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

.top-navbar-image {
    width: 78px;
}


.user-quiz-title {
    font-weight: 700;
    text-align: center;
    color: var(--main-color);
    margin-bottom: 10px;
}

.test-exam-profile-button {
    display: block;
    width: 150px;
    margin: auto;
    margin-bottom: 30px;
}

.white-color i,
.white-color {
    color: var(--white-color) !important;
}

.package-description-container {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.checklist-item {
    display: flex;
    justify-content: space-between;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 10px;
}

.checklist-item-disabled {
    color: #818181;
}

.checklist-item i {
    color: var(--main-color);
}

.list-items-container {
    padding: 50px;
}


.price-plan-item-price {
    color: var(--main-color);
    font-weight: 400;
    font-size: 50px;
}

.price-plan-item {
    text-align: center;
    font-weight: 300;
    padding: 20px;
}

.card-pricing-header {
    margin-top: 60px;
    text-align: center;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 15px;
    color: #000;
    font-size: 64px;
}

.packages p {
    font-weight: 300;
}

.card-pricing-item-container {
    text-align: center;
}

.card-pricing-img {
    width: 100%;
    max-height: 150px;
}

.unsubsriptions {
    padding: 50px var(--content-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: radial-gradient(circle, #BFD3E8 0%, #F5F5F5 75%), radial-gradient(circle, #F9EDC7 0%, #F5F5F5 65%);
    background-position: 77% 45%, 20% 88%;
    background-size: 40% 98%, 45% 75%;
    background-repeat: no-repeat;
}

    .unsubsriptions .unsubs__h1 {
        font-style: normal;
        font-weight: 700;
        font-size: 64px;
        line-height: 87px;
        text-align: center;
        color: #000000;
    }

    .unsubsriptions .unsubs__p {
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 33px;
        margin: 10px 0;
        text-align: center;
        color: #08212D;
    }

    .unsubsriptions .empty-page-content {
        width: 100%;
        max-width: 500px;
    }

        .unsubsriptions .empty-page-content a {
            width: 100%;
            padding: 15px 0;
        }

    .unsubsriptions img {
        max-width: 40vw;
        margin: 65px 0;
    }

.subs-header {
    text-align: center;
    font-weight: 400;
    color: var(--main-color);
    margin-bottom: 15px;
    margin-top: 15px;
    font-size: 40px;
}

.subs-text {
    text-align: center;
    font-family: 'Nunito Regular';
    color: var(--main-color);
    margin-top: 15px;
    font-size: 36px;
}

.subsriptions {
    max-width: var(--max-width);
    margin: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

.sub-item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

    .sub-item-grid div {
        font-weight: 400;
        margin: auto;
    }

.user-quiz-action {
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glossary {
    font-weight: 400;
    margin: 10px auto;
}

    .glossary .search {
        display: flex;
        flex-direction: row;
        margin: 10px 0;
    }

    .glossary .search-input {
        padding: 7px;
        padding-left: 15px;
        margin: 0px;
        margin-right: 5px;
        width: 100%;
        font-size: 16px;
        border-color: var(--main-color);
    }

    .glossary .search-button {
        color: var(--white-color);
        background-color: var(--main-color);
        border: none;
        border-radius: var(--content-border-radius);
        font-size: 23px;
        transition-duration: 0.5s;
        cursor: pointer;
    }

        .glossary .search-button:hover {
            filter: brightness(150%);
        }

        .glossary .search-button i {
            margin: 0 9px;
        }

    .glossary .alphabet {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }

        .glossary .alphabet .letter-chosen {
            margin: 0px 0px !important;
            padding: 5px 12px !important;
            color: var(--white-color);
            font-size: 19px !important;
            font-weight: 600;
            background-color: var(--main-color);
            border: none;
            border-radius: var(--content-border-radius);
        }

        .glossary .alphabet .letter {
            margin: 5px 10px;
            padding: 0px 2px;
            font-size: 19px;
            transition-duration: 0.5s;
            cursor: pointer;
        }

            .glossary .alphabet .letter:hover {
                margin: 0px 0px;
                padding: 5px 12px;
                color: var(--white-color);
                font-size: 19px;
                font-weight: 600;
                background-color: var(--main-color);
                border: none;
                border-radius: var(--content-border-radius);
            }


.glossary-card {
    background-color: var(--white-color);
    border-radius: var(--content-border-radius);
    width: 100%;
}

    .glossary-card div {
        margin: 20px;
    }

    .glossary-card h5 {
        color: var(--main-color);
        font-size: 19px;
        margin-bottom: 5px;
    }

    .glossary-card p {
        font-size: 16px;
    }

.glossary .list-container {
    display: flex;
    flex-direction: column;
}

    .glossary .list-container .list {
        display: flex;
        gap: 15px;
        flex-direction: column;
    }

    .glossary .list-container .not-found {
        color: var(--temperate-grey);
        margin: 10px auto;
    }

.select-word-task-container {
    flex-wrap: wrap;
    font-weight: 400;
}

.select-word-task-text {
    margin-top: auto;
    margin-bottom: auto;
}

.select-word-variants {
    max-width: 150px;
}

.user-cabinet {
}

    .user-cabinet.user__cabinet__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-gap: 15px;
    }

        .user-cabinet.user__cabinet__grid .step-course-container {
            margin-top: 0px;
            padding: 0px;
            max-width: 60vw;
        }

    .user-cabinet .packages-tabs {
        padding-bottom: 0px;
        padding-top: 0px;
    }

        .user-cabinet .packages-tabs.sticky {
            position: fixed;
            top: 5px;
            display: grid;
            background: var(--light-grey);
        }

    .user-cabinet .title {
        font-weight: 400;
        color: #000;
        margin-bottom: 10px;
    }


    .user-cabinet .exam-button {
        background: var(--main-color);
        border-radius: 8px;
        padding: 15px;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        letter-spacing: 0.02em;
        color: #fff;
        margin: 15px 0;
        display: block;
        width: calc(100% - 30px);
    }

.hidden {
    display: none !important;
}

.zeroheight {
    height: 0px;
    overflow: hidden;
}

.availability-exam {
    color: var(--main-color);
    font-weight: 700;
    text-align: right;
    margin-top: 15px;
}

    .availability-exam.left {
        text-align: left;
    }

.test-exam-duration-container {
    text-align: center;
}

.test-exam-duration {
    font-weight: 400;
    color: var(--main-color);
    font-size: 30px;
}

.notifications-tab {
    box-shadow: 0px 17px 54px -19px #333;
    transition: transform 0.25s ease-in;
    z-index: 3;
    position: absolute;
    top: 60px;
    right: var(--content-padding);
    text-align: left;
}

    .notifications-tab .notifications-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        color: var(--main-color);
    }

        .notifications-tab .notifications-header h2 {
            font-weight: 700;
            font-size: 19px;
        }

        .notifications-tab .notifications-header i {
            font-size: 21px;
            cursor: pointer;
        }

.visible {
    visibility: visible !important;
}

.visibility-hidden {
    visibility: hidden;
}

.notifications {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    width: 380px;
    height: 450px;
}

    .notifications::-webkit-scrollbar {
        width: 3px;
    }

    .notifications::-webkit-scrollbar-track {
        background: #fff;
    }

    .notifications::-webkit-scrollbar-thumb {
        background: #A3A3A3;
        border-radius: 3px;
    }

.empty {
    color: var(--temperate-grey);
    font-weight: 400;
    font-size: 14px;
    margin: 20px auto;
}

.notifications-wrapper {
    display: flex;
    height: 92%;
    overflow-y: auto;
}

    .notifications-wrapper::-webkit-scrollbar {
        width: 3px;
    }

    .notifications-wrapper::-webkit-scrollbar-track {
        background: #fff;
    }

    .notifications-wrapper::-webkit-scrollbar-thumb {
        background: #A3A3A3;
        border-radius: 3px;
    }

.unviewed {
    background-color: #edf5fa;
}

.notification {
    padding: 0 20px;
}

    .notification .date-text {
        color: var(--temperate-grey);
        font-weight: 400;
        font-size: 12px;
        margin-top: 3px;
        margin-bottom: 10px;
    }

    .notification .notification-title {
        font-size: 15px;
        margin-top: 10px;
        margin-bottom: 2px;
        font-weight: 700;
    }

    .notification .notification-text {
        font-size: 13px;
        font-weight: 400;
    }

    .notification hr {
        border-top: 1px solid var(--temperate-grey);
    }

.notifications-button {
    display: flex;
    align-items: center;
}

.notifications-count {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    transition: 0.3s;
    background: #838383;
}

.alarm {
    background: red !important;
}

.notifications-tab-down {
    transform: translate(0, 0);
}

.notifications-tab-up {
    transform: translate(150%, 0);
}

.popup-background {
    width: 100vw;
    height: 100vh;
    position: fixed;
}

.d-flex {
    display: flex;
}

.d-none {
    display: none;
}

.small-loader {
    margin: auto auto;
}

    .small-loader img {
        width: 150px;
        height: 150px;
        max-height: 150px;
        cursor: default;
    }

.small__cover__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--light-grey);
}

    .small__cover__loader img {
        width: 150px;
        height: 150px;
        max-height: 150px;
        cursor: default;
    }

.canva-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.2500%;
    padding-bottom: 48px;
    box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16);
    margin-top: 1.6em;
    margin-bottom: 0.9em;
    overflow: hidden;
    border-radius: 8px;
    will-change: transform;
}

.canva-iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: none;
    padding: 0;
    margin: 0;
}

.float-rigth {
    float: right;
}

.text-center {
    text-align: center;
}

.blog-list-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--content-border-radius);
}

.blog-list .card-template {
    margin-bottom: 20px;
}

@media (min-width:1099px) {
    .list-mobile {
        display: none;
    }

    .list-tablet {
        display: block;
    }

    .card {
        display: grid;
        grid-template-columns: minmax(128px,290px) 1fr;
    }

        .card h2 {
            height: 40px;
            font-size: 32px;
        }

        .card p {
            margin-bottom: 14px;
            margin-top: 14px;
            font-size: 19px;
        }

        .card .content {
            padding: 10px 26px;
        }

    .price-line {
        display: flex;
        justify-content: space-between;
        margin-top: 0px;
    }

        .price-line .price {
            font-size: 25px;
        }

    .desktop-task {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 25px;
    }

    .decktop-theory {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 15px;
    }

    .decktop-user-task {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 15px;
    }

        .decktop-user-task.exam {
            display: flex;
            flex-direction: column;
        }

        .decktop-user-task .timer-and-buttons {
            display: grid;
            grid-template-columns: 1fr 150px 150px;
            gap: 10px;
        }
}


.partners-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-input-task {
    font-weight: 400;
}

    .user-input-task input {
        max-width: 150px;
    }

.user-input-task-correct {
    padding-left: 20px;
}

.build-sentence-task {
    font-weight: 400;
}

    .build-sentence-task .words-container {
        display: flex;
        flex-wrap: wrap;
    }

.word-variant {
    margin-left: 5px;
    margin-right: 5px;
}

.words-container-empty {
    background: var(--temperate-grey);
    color: var(--temperate-grey);
}

.report-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    transition: 0.5s;
    box-sizing: border-box;
    padding-bottom: 15px;
}

.report-textarea {
    width: 100%;
    border: 1px solid var(--main-color);
    border-radius: var(--content-border-radius);
    padding: 10px;
    transition: 0.5s;
    height: 100px;
    box-sizing: border-box;
}

.report-thank-you {
    display: flex;
    width: 100%;
    height: 100px;
}

    .report-thank-you h2 {
        margin: auto auto;
        color: var(--main-color);
        font-weight: 400;
    }

.report-button {
    transition: 0.5s;
    width: 100%;
    max-width: 360px;
    height: 62px;
    cursor: pointer;
    background-color: transparent;
    color: var(--main-color);
    border: solid 1px var(--main-color);
    border-radius: var(--content-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-size: 20px;
    font-weight: 500;
    font-family: 'Nunito';
}

.report__button__green {
    transition: 0.5s;
    width: 100%;
    max-width: 360px;
    height: 64px;
    cursor: pointer;
    background-color: #0FB800;
    border: none;
    border-radius: var(--content-border-radius);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-size: 20px;
    font-weight: 500;
    font-family: 'Nunito';
}

.visibiliti-hidden {
    visibility: hidden;
}

.left-right-container {
    font-weight: 400;
}

.left-right-task-item {
    display: grid;
    grid-template-columns: 30px 1fr;
}

.left-right-task-item-symbol {
    margin-top: auto;
    margin-bottom: auto;
}


.left-right-anwers {
    display: grid;
    padding-bottom: 5px;
    grid-template-columns: repeat(auto-fill, 35px);
}

    .left-right-anwers div {
        text-align: center;
    }

input[type='radio'] {
    appearance: none;
    visibility: hidden;
    width: 22px;
    height: 22px;
    cursor: pointer;
    padding: 0;
}

    input[type='radio']:after {
        width: 25px;
        height: 25px;
        border-radius: 32px;
        top: -13px;
        left: -4px;
        position: relative;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 4px solid #D1D1D6;
    }


    input[type='radio']:checked:after {
        width: 38px;
        height: 38px;
        border-radius: 38px;
        top: -19px;
        left: -8px;
        position: relative;
        content: url(/img/icons/check-circle.svg);
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

.event-section {
    font-weight: 400;
}

.event-page-hero-container {
    background-color: var(--main-color);
}

.event-section h1 {
    font-weight: 700;
}

.event-page-hero {
    padding-top: 140px;
    padding-bottom: 140px;
    color: var(--white-color);
    display: grid;
    grid-template-columns: 1fr max-content;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    max-width: var(--max-width);
    margin: auto;
    gap: 80px;
}

    .event-page-hero .small-title {
        font-size: 24px;
    }

    .event-page-hero .main-title {
        font-size: 36px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .event-page-hero .bottom-title {
        font-weight: 600;
        font-size: 20px;
    }

.registration-card {
    padding: 24px;
}

    .registration-card .registration-title {
        color: var(--main-color);
        font-size: 36px;
        text-align: right;
        margin-bottom: 24px;
    }

    .registration-card .registration-button {
        width: 100%;
        height: 57px;
        font-weight: 500;
        font-size: 18px;
        border-radius: 6px;
    }

    .registration-card .registration-input {
        height: 49px;
        border-radius: 6px;
    }

    .registration-card .timer-container {
        display: grid;
        grid-template-columns: 200px 1fr;
    }

.event-description {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: var(--max-width);
    margin: auto;
}


    .event-description .text-section {
        padding-bottom: 40px;
    }

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

    .text-section a {
        text-decoration: underline;
    }

    .text-section li {
        list-style: none;
    }

        .text-section li:not(:last-child) {
            margin-bottom: 20px;
        }

        .text-section li .list-check {
            position: absolute;
            margin-left: -25px;
            margin-top: -3px;
        }

.event-description h3 {
    font-size: 24px;
    margin-bottom: 24px;
}

.event-description ul {
    margin-left: 22px;
}

.event-lector {
    text-align: justify;
}

.event-lectors h2 {
    font-weight: 600;
    font-size: 36px;
    margin-bottom: 40px;
}

.event-lectors h4 {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 24px;
}

.event-lectors .photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.event-lectors .event-lector {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 40px;
    margin-bottom: 40px;
}


.remaining-timer {
    text-align: center;
    display: grid;
    grid-template-columns: 48px 20px 48px 20px 48px 20px 48px;
    justify-content: right;
}

    .remaining-timer .timer-item {
        padding: 8px;
        border-radius: 2px;
        background-color: #FFCC00;
    }

    .remaining-timer .timer-value {
        color: var(--white-color);
        font-weight: 700;
        font-size: 26px;
    }

    .remaining-timer .timer-subtext {
        color: #7C633C;
        font-weight: 600;
        font-size: 14px;
    }

    .remaining-timer .timer-separator {
        color: #000000;
        font-weight: 600;
        font-size: 14px;
        margin: auto;
    }


.thank-for-registration {
    color: var(--main-color);
    text-align: center;
    margin-top: 10px;
}

.bottom-register-form {
    display: grid;
    grid-template-areas: 'a a a a' 'b b c c';
    grid-template-columns: 1fr 1fr;
    gap: 5px 24px;
}

    .bottom-register-form .form-email {
        grid-area: a / a / a / a;
    }

    .bottom-register-form .form-button {
        grid-area: b / b / b / b;
    }

        .bottom-register-form .form-button button {
            font-weight: 500;
            font-size: 18px;
            height: 100%;
            width: 100%;
        }

    .bottom-register-form .form-timer {
        grid-area: c / c / c / c;
    }

.select-package-button {
    margin-top: 18.5px;
    text-align: right;
}

    .select-package-button button {
        font-size: 24px;
        padding: 16px 100px;
    }

.price-plan-raw {
    display: grid;
    margin-bottom: 20px;
    grid-template-columns: 100px 1fr 200px;
}

.price-text {
    text-align: left;
}

    .price-text h3 {
        font-weight: 700;
        font-size: 24px;
    }

    .price-text span {
        color: #A3A3A3;
        font-weight: 400;
        font-size: 12px;
    }

.price-el {
    display: block;
    font-weight: 700;
    font-size: 32px;
}

.price-el-text {
    font-weight: 600;
    font-size: 16px;
}

.sale-price {
    background-color: #FFCC00;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 300;
    padding: 5px 10px;
    color: var(--main-color);
}

.price-right {
    text-align: right;
}



.switch-input {
    display: none;
}

:root {
    --color-bg: #458;
    --color-switch-thumb: #fff;
    --color-switch-bg: #777;
    --color-switch-bg-active: var(--main-color);
    --switch-size: 60px;
    --theory-menu-ul-height: calc(86vh - 70px);
}

.switch {
    --switch-width: var(--switch-size);
    --switch-height: calc(var(--switch-width) / 2);
    --switch-border: calc(var(--switch-height) / 10);
    --switch-thumb-size: calc(var(--switch-height) - var(--switch-border) * 2);
    --switch-width-inside: calc(var(--switch-width) - var(--switch-border) * 2);
    display: block;
    box-sizing: border-box;
    width: var(--switch-width);
    height: var(--switch-height);
    border: var(--switch-border) solid var(--color-switch-bg);
    border-radius: var(--switch-height);
    background-color: var(--color-switch-bg);
    cursor: pointer;
    margin: var(--switch-margin) 0;
    transition: 300ms 100ms;
    position: relative;
}

    .switch::before {
        content: '';
        background-color: var(--color-switch-thumb);
        height: var(--switch-thumb-size);
        width: var(--switch-thumb-size);
        border-radius: var(--switch-thumb-size);
        position: absolute;
        top: 0;
        left: 0;
        transition: 300ms, width 600ms;
    }

.switch-input:checked + .switch {
    background-color: var(--color-switch-bg-active);
    border-color: var(--color-switch-bg-active);
}

.switch:active::before {
    width: 80%;
}

.switch-input:checked + .switch::before {
    left: 100%;
    transform: translateX(-100%);
}


.sub-item-grid-swich {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

    .sub-item-grid-swich h2 {
        font-weight: 700;
        font-size: 32px;
    }


.package-icon {
    width: 20px;
}

.package__container {
    display: flex;
    grid-gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
}

.main__container .packages {
    margin: 20px 0 60px 0;
    max-width: calc(100vw);
}

.packages .header__text {
    background-image: url(img/edki/Group363.svg);
    background-repeat: no-repeat;
    background-position: right;
    width: fit-content;
    padding: 10px 80px 10px 0;
    margin: 30px 0;
    background-size: contain;
}

    .packages .header__text h2 {
        color: #08212D;
        font-family: Nunito;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .packages .header__text p {
        color: #08212D;
        font-family: Nunito;
        font-size: 20px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }

.packages .package__description {
    color: #08212D;
    font-family: Nunito;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.package__box {
    border-radius: 12px;
    border: 1px solid #08212D;
    background: #FFF;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 408px;
}

    .package__box:hover {
        background: linear-gradient(165deg, rgba(248,231,204,0.6) 0%, rgba(248,231,204,0.6) 30%, rgba(0,65,95,0.4) 100%);
    }

    .package__box h3 {
        color: #08212D;
        font-family: Nunito;
        font-size: 40px;
        font-style: normal;
        font-weight: 900;
        line-height: normal;
    }

    .package__box p {
        color: #08212D;
        font-family: Nunito;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

        .package__box p span {
            color: #08212D;
            font-family: Nunito;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

    .package__box .old__price {
        color: #A3A3A3;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-right: 10px;
        position: relative;
    }

        .package__box .old__price .red__line {
            border-bottom: 3px solid #DA5742;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            width: 100%;
            transform: rotate(349deg) translateY(-20px);
        }

    .package__box .new__price {
        color: #08212D;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
        text-transform: lowercase;
    }

    .package__box .price__box {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .package__box hr {
        border: none;
        width: 100%;
        border-top: 1px solid rgba(8, 33, 45, 0.19);
        height: 1px;
    }

    .package__box .lines {
        padding: 30px 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

        .package__box .lines.super {
            background: rgba(15, 184, 0, 0.07);
            width: 100%;
            margin: 0 -25px 0 -25px;
            padding: 30px 25px;
        }

        .package__box .lines .line {
            color: #08212D;
            font-family: Nunito;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            display: grid;
            align-items: flex-start;
            grid-template-columns: 20px 1fr;
            gap: 15px;
        }

        .package__box .lines.super .line {
            color: #08212D;
            font-style: normal;
            font-weight: 600;
        }

        .package__box .lines .line .i {
            background: #08212D;
            color: #fff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .package__box .lines.super .line .i {
            background: #0FB800;
        }

    .package__box .package__button {
        border-radius: 7px;
        background: #00415F;
        width: 100%;
        padding: 15px 0;
        text-align: center;
    }

        .package__box .package__button.deactivated {
            pointer-events: none;
            cursor: not-allowed;
            background: var(--temperate-grey);
        }

.first-items-container {
    margin-bottom: 15px;
}

.hryvna-symbol {
    font-size: 20px;
}

.university-container {
    max-width: var(--max-width);
    margin: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    position: relative;
}

.universities__select__container {
    position: absolute;
    top: 0;
    right: 10vw;
}

.university-main-second-line {
    margin-top: auto;
    margin-bottom: auto;
}

.university-name {
    font-weight: 700;
    font-size: 20px;
}

.university-subname {
    font-weight: 600;
    font-size: 17px;
}

.university-header {
    color: var(--main-color);
    font-size: 64px;
    font-weight: 400;
    margin-top: 30px;
}

.speciality-info {
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.speciality-sub-item-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #D1D1D6;
    padding-bottom: 10px;
}


.university-button {
    display: block;
    text-align: center;
}

.unversity-sub-button {
    background-color: #E9E7E7;
    color: #000;
    padding: 10px 15px 10px 15px;
    font-weight: 300;
    border-radius: var(--content-border-radius);
    cursor: pointer;
    border: none;
}

.university-info-title {
    font-weight: 500;
    font-size: 14px;
}

.university-info {
    font-weight: 700;
    font-size: 14px;
}

.university-buttons-container {
    display: flex;
    gap: 5px;
    flex-direction: column;
    justify-content: space-between;
}

.university-price {
    font-weight: 500;
    font-size: 24px;
}

.university-item {
    padding-top: 10px;
    padding-bottom: 10px;
}


.speciality-info-underline {
    border-bottom: 1px solid #D1D1D6;
}

.details-toggle-button {
    max-height: 40px;
}

.multiselect-input-container {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
}

.multiselect-input {
    border-bottom: 1px solid #D1D1D6;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0px;
}

    .multiselect-input::placeholder {
        font-size: 18px;
        font-weight: 400;
    }

.multiselect-search-icon-container {
    margin: auto;
}

.multiselect-toggle-icon-container {
    margin: auto;
}

.selection-item {
    font-weight: 400;
    padding-left: 35px;
    padding-right: 21px;
    padding-top: 17px;
    padding-bottom: 17px;
}

.multiselect-selected {
    background-color: var(--light-button);
}

.selection-item:hover {
    background-color: var(--light-button);
}

.selection-item:first-child:hover {
    border-top-left-radius: var(--content-border-radius);
    border-top-right-radius: var(--content-border-radius);
}

.selection-item:last-child:hover {
    border-bottom-left-radius: var(--content-border-radius);
    border-bottom-right-radius: var(--content-border-radius);
}

.select-item-no-paddings {
    padding: 0px !important;
    position: absolute;
    width: 100%;
    max-height: 250px;
    overflow-y: scroll;
    z-index: 9999;
}

.tags-container {
    display: flex;
    gap: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #D1D1D6;
    cursor: text;
    flex-wrap: wrap;
    padding: 12px 5px;
    max-height: 34px;
    overflow-y: scroll;
}

.multiselect-tag {
    font-weight: 300;
    background-color: var(--light-button);
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    padding: 5px 10px;
    text-overflow: ellipsis;
    border-radius: var(--content-border-radius);
    cursor: pointer;
}

.rotate-90 {
    transform: rotate(90deg);
}

.multiselect-container {
    position: relative;
}

.select-text-item {
    padding-bottom: 10px;
    border-bottom: 1px solid #D1D1D6;
}

.filter-form-components {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.university-search-button {
    width: 49%;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .university-search-button.clear {
        background: transparent;
        color: var(--main-color);
        border: 1px solid;
        padding: 9px 15px 9px 15px;
    }

.university-image-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
}

.university-logo {
    width: auto;
    max-height: 100px;
}

.range-select {
}

.range-select-track {
    height: 5px;
    border-radius: 6px;
    background-color: #D9D9D9;
}

.range-select-container {
    position: relative;
}


.range-select-draggable {
    margin-left: 20%;
    margin-right: 50%;
    margin-top: -5px;
    height: 5px;
    border-radius: 6px;
    background-color: #00415F;
}

.range-select-left {
    position: absolute;
    background-color: #00415F;
    border-radius: 50%;
    left: 20%;
    height: 10px;
    width: 10px;
    margin-top: -2px;
}

.range-select-right {
    position: absolute;
    left: 50%;
    border-radius: 50%;
    background-color: #00415F;
    height: 10px;
    width: 10px;
    margin-top: -2px;
}

.range-select-value-label {
    font-weight: 300;
    color: #A3A3A3;
    margin-top: -20px;
    user-select: none;
}

.range-select-values {
    display: flex;
    justify-content: space-between;
    padding-bottom: 11px;
}

.range-select-title {
    font-weight: 400;
    color: #757575;
}

.programs-placeholder {
    max-width: 150px;
    max-height: 100px;
    overflow: hidden;
    overflow-y: scroll;
}

.university-details-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
}

.university-result-count {
    font-weight: 300;
}


.search-result-area {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    gap: 15px;
    align-items: center;
}

.search-button-area {
    display: flex;
    justify-content: space-between;
}

    .search-button-area .form__buttons__box {
        width: 40%;
    }

.programs-placeholder::-webkit-scrollbar {
    width: 3px;
}

.programs-placeholder::-webkit-scrollbar-track {
    background: inherit;
    border-radius: 5px;
}

.programs-placeholder::-webkit-scrollbar-thumb {
    background: #00415F;
    border-radius: 3px;
}


.radio-button-group {
    display: flex;
    justify-content: space-around;
}

.radio-button {
}


.radio-button-item {
    text-align: center;
    font-weight: 300;
}

.sort__button {
    font-size: 24px;
    cursor: pointer;
}

.university-subheader {
    font-weight: 400;
    color: #000000;
    margin-bottom: 50px;
    margin-top: 30px;
    display: block;
}

.mailto-university {
    color: var(--main-color) !important;
}

.university-logo-mobile {
    display: none;
}


a.disabled {
    pointer-events: none;
    cursor: default;
}

.progress-active {
    background-color: #5FCF65;
    border-radius: 5px;
}

.progress-inactive {
    background-color: #F0F0F0;
    border-radius: 5px;
}

.exam-summary {
    font-weight: 400;
    display: grid;
    grid-template-columns: 1fr 70px;
}

.category-exam-result {
    margin: auto;
}

/* Teacher cabinet */



.chat__section {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-weight: 400;
    height: 100%;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: 50px auto;
    max-width: calc(100% - 20%);
    max-height: -webkit-fill-available;
}

.chat__section__container {
    display: grid;
    grid-template-columns: minmax(0, 64%) minmax(0, 34%);
    grid-template-areas:
        "lessonsInfo chat";
    grid-gap: 15px;
    grid-template-rows: min-content 1fr;
    height: 100%;
    justify-content: space-between;
    width: -webkit-fill-available;
}

    .chat__section__container:has(> .teacher__cabinet__banners) {
        grid-template-areas:
            "banner chat"
            "lessonsInfo chat";
        grid-template-rows: min-content min-content 1fr;
    }

    .chat__section__container:has(> .few__banners) {
        grid-template-areas:
            "banner chat"
            "lessonsInfo chat";
    }

.chat__section .university-header {
    width: 100%;
    max-width: var(--max-width);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: auto;
    margin-top: 30px;
}

/* Teacher Info Block */

.teacher__info__block {
    background: #fff;
    border-radius: var(--content-border-radius);
    padding: 20px;
    width: calc(100% - 40px);
    grid-area: teacherInfo;
    height: fit-content;
}

    .teacher__info__block .teacher__info__top {
        display: grid;
        padding-bottom: 15px;
        border-bottom: 1px solid #D1D4E1;
    }

    .teacher__info__block .teacher__info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .teacher__info__block .photo__container {
        border: 2px solid #E6D2B2;
        background: #E6D2B2;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .teacher__info__block .teacher__photo {
        width: 40px;
        height: 40px;
        object-fit: cover;
    }

    .teacher__info__block .name__container p {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
    }

    .teacher__info__block .name__container h4 {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 22px;
    }

    .teacher__info__block .about__teacher {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        margin: 15px 5px 0 5px;
    }

/* Chat */

.chat__section .chat__box {
    gap: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chat__section .chat__container {
    display: grid;
    grid-template-rows: 70px 1fr;
    width: calc(100% - 40px);
    height: 100%;
    max-height: 100%;
    background-color: #fff;
    border: none;
    border-radius: var(--content-border-radius);
    padding: 5px 20px 10px 20px;
    position: relative;
}

.chat__section .chat__header {
    background-color: inherit;
    border-radius: 20px 20px 0 0;
    z-index: 1;
    min-height: 70px;
    border-bottom: 0.565815px solid #D1D4E1;
}

    .chat__section .chat__header .lessons__left {
        font-size: 12px;
        color: #A3A3A3;
        margin: 10px 0;
    }

        .chat__section .chat__header .lessons__left b {
            margin-left: 3px;
        }

    .chat__section .chat__header .tab__buttons {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

.mobile__teacher__name__box {
    display: none;
}

.chat__section .switch__tabs {
    display: flex;
}

.chat__section .tab__button {
    background: #fff;
    cursor: pointer;
    padding: 0px 15px;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    color: #A3A3A3;
    border: none;
    position: relative;
}

    .chat__section .tab__button.group.hidden {
        display: none;
    }

    .chat__section .tab__button:hover,
    .chat__section .tab__button.active {
        color: #000;
    }

        .chat__section .tab__button.active .selected {
            width: 100%;
            height: 5px;
            border-radius: 0 0 5px 5px;
            position: absolute;
            left: 0;
            bottom: -8px;
            background: var(--main-color);
        }

    .chat__section .tab__button.active {
        pointer-events: none;
    }

.chat__section .chat__body {
    flex: 1;
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
}

.chat__section .tab__content {
    display: none;
    width: 100%;
}

    .chat__section .tab__content.active {
        display: grid;
        grid-template-rows: 1fr 80px;
    }

.chat__section .message__area {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: scroll;
    padding-right: 20px;
}

    .chat__section .message__area::-webkit-scrollbar {
        width: 3px;
    }

    .chat__section .message__area::-webkit-scrollbar-track {
        background: inherit;
        border-radius: 5px;
    }

    .chat__section .message__area::-webkit-scrollbar-thumb {
        background: #00415F;
        border-radius: 3px;
    }


.chat__section .message {
    display: flex;
    margin-bottom: 20px;
}

.chat__section .message__system {
    margin: 0;
}

.chat__section .message__container {
    display: flex;
    width: 100%;
}

.chat__section .outgoing .message__container {
    display: flex;
    width: 100%;
    flex-direction: column-reverse;
    align-items: flex-end;
}

.chat__section .message__system .message__container {
    justify-content: center;
}

.chat__section .message__text {
    width: fit-content;
    max-width: 75%;
}

.chat__section .outgoing .message__text {
    width: fit-content;
    display: flex;
    justify-content: flex-end;
    width: 75%;
}

.chat__section .avatar__time__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
}

.chat__section .outgoing .avatar__time__box {
    margin: 10px 0 0 0;
}

.chat__section .message__system .avatar__time__box {
    display: none;
}

.chat__section .message__time {
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #A3A3A3;
}

.chat__section .avatar__container {
    width: 50px;
    height: 50px;
    background-color: #F5F5F5;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #fff;
    margin-bottom: 10px;
}

.chat__section .message__system .avatar__container,
.chat__section .outgoing .avatar__container {
    display: none;
}

.chat__section .message__name {
    margin-bottom: 10px;
}

.chat__section .message__system .message__name,
.chat__section .outgoing .message__name {
    display: none;
}

.chat__section .message__content {
    position: relative;
    background-color: #F5F5F5;
    padding: 10px 15px;
    border-radius: var(--content-border-radius);
    word-wrap: break-word;
    overflow: hidden;
}

.chat__section .message__system .message__content {
    background-color: transparent;
    font-size: 12px;
}

.chat__section .message__teacher .message__content {
    background-color: #E6D2B2;
}

.chat__section .outgoing .message__content {
    position: relative;
    background-color: #DCE3F0;
    padding: 10px 15px;
    border-radius: var(--content-border-radius);
    word-wrap: break-word;
    overflow: hidden;
}

.chat__section .chat__input {
    display: grid;
    grid-template-columns: auto 60px;
    border-radius: var(--content-border-radius);
    background: #fff;
    height: 60px;
    padding: 10px;
}

    .chat__section .chat__input textarea {
        border: none;
        outline: none;
        resize: none;
        padding: 20px;
        background: #F5F5F5;
        border-radius: 109px;
        margin-right: 15px;
    }

        .chat__section .chat__input textarea::-webkit-scrollbar {
            width: 3px;
        }

        .chat__section .chat__input textarea::-webkit-scrollbar-track {
            background: inherit;
            border-radius: 5px;
        }

        .chat__section .chat__input textarea::-webkit-scrollbar-thumb {
            background: var(--light-button);
            border-radius: 3px;
        }

    .chat__section .chat__input button {
        width: 60px;
        height: inherit;
        border: none;
        border-radius: 50%;
        background: var(--main-color);
        color: #fff;
        cursor: pointer;
        transition: all 0.3s;
        outline: none;
    }

        .chat__section .chat__input button:hover {
            transform: scale(1.1);
        }

    .chat__section .chat__input i::before {
        font-size: 28px;
    }

.chat__section .chat__container .locker.disabled {
    display: none;
}

.chat__section .chat__container .locker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    border-radius: var(--content-border-radius);
    background-color: #fff;
}

    .chat__section .chat__container .locker .chat_locker {
        display: grid;
        align-items: center;
        grid-template-rows: minmax(0, 1fr) 0.5fr 80px;
        padding: 5%;
        text-align: center;
        background: #7cb2e917;
        backdrop-filter: blur(35px);
        border-radius: var(--content-border-radius);
        background-image: linear-gradient(225deg, rgba(255, 255, 255, 0) 55%, #ffe48d6e), linear-gradient(112deg, rgba(255, 255, 255, 0) 45%, #ffe48d6e);
        background-position: left bottom, right bottom;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border: 2px solid var(--main-color);
    }

        .chat__section .chat__container .locker .chat_locker .img__box {
            height: 100%;
        }

        .chat__section .chat__container .locker .chat_locker .text {
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: 98.9%;
        }

        .chat__section .chat__container .locker .chat_locker a {
            width: 100%;
        }

        .chat__section .chat__container .locker .chat_locker .button {
            text-align: center;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 98.9%;
            color: #fff;
            background: var(--main-color);
            width: 90%;
            padding: 20px 5%;
            border-radius: var(--content-border-radius);
        }

.chat__section .chat__day__box {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .chat__section .chat__day__box p {
        background: #efefef;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 15px;
        font-weight: 700;
        margin-bottom: 15px;
    }

.chat__section .chat__container .locker img {
    max-width: 75%;
    max-height: 100%;
}

.chat__section .chat__container .hide {
    display: none !important;
}

/* info part */

.chat__section .info__section {
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-gap: 15px;
    max-height: inherit;
    overflow: hidden;
}

    .chat__section .info__section .info__lessons {
        max-height: inherit;
        overflow: hidden;
    }

        .chat__section .info__section .info__lessons .your__lessons__box {
            overflow: hidden;
            overflow-y: auto;
            padding-right: 5px;
            margin-top: 5px;
        }

            .chat__section .info__section .info__lessons .your__lessons__box::-webkit-scrollbar {
                width: 3px;
            }

            .chat__section .info__section .info__lessons .your__lessons__box::-webkit-scrollbar-track {
                background: inherit;
                border-radius: 5px;
            }

            .chat__section .info__section .info__lessons .your__lessons__box::-webkit-scrollbar-thumb {
                background: var(--main-color);
                border-radius: 3px;
            }

    .chat__section .info__section .your__lessons__box .no__lessons__block {
        padding: 20px 25px;
        background-image: radial-gradient(circle, rgba(255,228,141,0.1) 20%, rgba(255,255,255,0) 60%), radial-gradient(circle, rgba(190,215,241,0.3) 20%, rgba(255,255,255,0) 60%);
        background-position: left top, right;
        background-repeat: no-repeat;
        background-size: 50% 50%;
    }

.chat__section .your__lessons__box .no__lessons__block h2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.chat__section .your__lessons__box .no__lessons__block p {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.chat__section .your__lessons__box .no__lessons__block .img__box {
    display: flex;
    padding: 30px 0;
    justify-content: center;
    align-items: center;
}

    .chat__section .your__lessons__box .no__lessons__block .img__box img {
        max-width: 100%;
    }

.chat__section .info__section .info__lessons h3 {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 98.9%;
    width: 97%;
    border-bottom: 1px solid #D9D9D9;
    padding: 3px 0 3px 3%;
}

.chat__section .info__section .info__lessons .your__lesson {
    background: #fff;
    border-radius: var(--content-border-radius);
    display: grid;
    grid-template-areas:
        "a b"
        "a c";
    grid-template-columns: 20px 1fr;
    color: #000;
    margin: 20px 0;
}

    .chat__section .info__section .info__lessons .your__lesson .a {
        grid-area: a;
    }

    .chat__section .info__section .info__lessons .your__lesson .b {
        grid-area: b;
    }

    .chat__section .info__section .info__lessons .your__lesson .c {
        grid-area: c;
    }

    .chat__section .info__section .info__lessons .your__lesson .marker {
        width: 20px;
        border-radius: var(--content-border-radius) 0 0 var(--content-border-radius);
        background: #E6D2B2;
    }

    .chat__section .info__section .info__lessons .your__lesson.open .marker,
    .chat__section .info__section .info__lessons .your__lesson:hover .marker {
        background: var(--main-color);
    }

    .chat__section .info__section .info__lessons .your__lesson .head {
        display: grid;
        grid-template-columns: 60% 38%;
        grid-gap: 2%;
        padding: 0 15px;
    }

        .chat__section .info__section .info__lessons .your__lesson .head .info__lesson {
            display: flex;
            justify-content: flex-start;
            padding: 15px 0;
        }

.chat__section .your__lesson .head .info__lesson .icon {
    color: var(--main-color);
    display: flex;
    justify-content: center;
}

    .chat__section .your__lesson .head .info__lesson .icon i {
        display: flex;
        align-items: flex-start;
        margin: 0px 5px;
        font-size: 14px;
    }

    .chat__section .your__lesson .head .info__lesson .icon .group {
        display: none;
    }

.chat__section .your__lesson.group .head .info__lesson .icon .group {
    display: flex;
}

.chat__section .your__lesson.group .head .info__lesson .icon .personal {
    display: none;
}

.chat__section .your__lesson .head .info__lesson .text .title {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 98.9%;
}

.chat__section .your__lesson .head .info__lesson .text .date {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 98.9%;
    color: #A3A3A3;
    margin: 5px 0;
    display: none;
}

.chat__section .your__lesson.incoming .head .info__lesson .text .date {
    display: flex;
}

.chat__section .your__lesson .head .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chat__section .your__lesson .head .buttons .incoming {
        display: none;
    }

.chat__section .your__lesson.incoming .head .buttons .incoming {
    display: flex;
    width: 100%;
}

.chat__section .your__lesson.incoming .head .buttons .past {
    display: none;
}

.chat__section .your__lesson.incoming .head .buttons .group {
    display: none;
}

.chat__section .your__lesson.incoming.group .head .buttons .group {
    display: flex;
}

.chat__section .your__lesson.incoming.group .head .buttons .personal {
    display: none;
}

.chat__section .your__lesson .head .buttons .past {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 30px;
    grid-gap: 10px;
    width: 100%;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 98.9%;
    padding: 13px 0;
}

    .chat__section .your__lesson .head .buttons .past .zoom {
        display: none;
    }

    .chat__section .your__lesson .head .buttons .past.in__progress .zoom {
        display: block;
        width: 100%;
    }

    .chat__section .your__lesson .head .buttons .past .buttons__box {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .chat__section .your__lesson .head .buttons .past.in__progress .buttons__box,
    .chat__section .your__lesson .head .buttons .past.in__progress .toggle__button {
        display: none;
    }

.chat__section .your__lesson .head .buttons .test {
    background: #DCE3F0;
    border-radius: 28px;
    width: fit-content;
    padding: 10px 15px;
}

.chat__section .your__lesson .head .buttons .theory {
    background: #F8E7CC;
    border-radius: 28px;
    width: fit-content;
    padding: 10px 15px;
}

.chat__section .your__lesson .head .buttons .play {
    background: #E6D2B2;
    color: var(--main-color);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.chat__section .your__lesson .head .buttons .toggle__button {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

    .chat__section .your__lesson .head .buttons .toggle__button i {
        width: 28px;
        height: 28px;
        cursor: pointer;
        transform: rotate(0deg);
        transition: all 0.3s;
    }

.chat__section .your__lesson.open .head .buttons .toggle__button i {
    transform: rotate(90deg);
    transition: all 0.3s;
}

.chat__section .your__lesson .description {
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s;
    padding: 0 15px;
    margin: 0;
}

.chat__section .your__lesson.open .description {
    max-height: 200px;
    overflow: hidden;
    transition: all 0.5s;
    padding: 0 15px;
    width: -webkit-fill-available;
}

.chat__section .your__lesson.incoming .description {
    display: none;
}

.chat__section .your__lesson .description .description__box {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-gap: 15px;
    padding: 15px 0;
    border-top: 1px solid #D1D1D6;
}

.chat__section .your__lesson .description .video {
    max-width: inherit;
    max-height: inherit;
}

    .chat__section .your__lesson .description .video iframe {
        max-width: 100%;
        max-height: 100%;
        border: none;
        border-radius: var(--content-border-radius);
    }

.chat__section .your__lesson .description .teacher__comment {
    display: grid;
    grid-template-columns: 45px 1fr;
    grid-gap: 10px;
}

    .chat__section .your__lesson .description .teacher__comment .photo__container {
        border: 2px solid #E6D2B2;
        background: #E6D2B2;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .chat__section .your__lesson .description .teacher__comment .comment {
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        color: #000;
    }

.chat__section .full {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 45px;
    height: fit-content;
}

.chat__section .mobile {
    display: none;
}

/* Settings */
.chat__mobile__tabs {
    display: none;
    grid-area: mobiletabs;
}

.mobile__menu__controllers {
    display: none;
}

.chat__lesson__render {
    display: flex;
}

#chatBlock {
    grid-area: chat;
}

#lessonsBlock {
    grid-area: lessonsInfo;
}

.chat__menu__button {
    display: none;
}

.chat__info.mobile {
    display: none;
}

.chat__info.full {
    display: flex;
}
/* Demo Logic Banner */
.teacher__cabinet__banners {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-area: banner;
    margin-bottom: 15px;
}

.demo__logic__container {
    background: #7cb2e917;
    backdrop-filter: blur(35px);
    border-radius: var(--content-border-radius);
    background-image: linear-gradient(211deg, rgba(255, 255, 255, 0) 55%, #ffe48d54);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    border: 2px solid var(--main-color);
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 35%;
    grid-gap: 15px;
}

    .demo__logic__container .text {
        max-width: 90%;
    }

        .demo__logic__container .text h5 {
            font-size: 22px;
            font-style: normal;
            font-weight: 700;
            line-height: 94%;
        }

        .demo__logic__container .text p {
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 120%;
            margin: 5px 0;
            overflow-wrap: anywhere;
        }

    .demo__logic__container a {
        width: fit-content;
        display: block;
    }

    .demo__logic__container .button {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 98.9%;
        background: var(--main-color);
        width: fit-content;
        padding: 15px 60px;
        border-radius: var(--content-border-radius);
        color: #fff;
        margin-top: 15px;
    }

    .demo__logic__container .img {
        position: relative;
    }

        .demo__logic__container .img .price__button {
            position: absolute;
            top: -10px;
            right: 0;
            background: #0FB800;
            color: #fff;
            border-radius: 20px;
            padding: 5px 10px;
        }

    .demo__logic__container .button__mobile {
        display: none;
    }


/* Prepare with teacher */

.prepare_with_teacher {
    width: 100%;
    background: #FAF7EB;
    font-weight: 400;
    color: #000;
    margin: 0 0 -20px 0;
}

    .prepare_with_teacher .mobile {
        display: none;
    }

    .prepare_with_teacher section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .prepare_with_teacher .header {
        display: flex;
        align-items: center;
        width: 80%;
        font-weight: 400;
        font-size: 24px;
        line-height: 33px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

        .prepare_with_teacher .header img {
            width: 35px;
            padding: 20px 5px 28px 0;
        }

    .prepare_with_teacher .about__container,
    .prepare_with_teacher .lesson_types__container,
    .prepare_with_teacher .access_types__container,
    .prepare_with_teacher .about_teacher__container,
    .prepare_with_teacher .flipped_class__container,
    .prepare_with_teacher .advantages__container,
    .prepare_with_teacher .reviews__container,
    .prepare_with_teacher .faq__container,
    .prepare_with_teacher .footer {
        width: 80%;
        max-width: 1400px;
    }

#about {
    background: url(img/prepare/watch.png) no-repeat;
    background-size: contain;
    background-position: right 8% bottom 0%;
}

.prepare_with_teacher .about__container {
    position: relative;
}

.prepare_with_teacher .about__text {
    width: 65%;
    min-height: 475px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 250px 0 180px 0;
}

    .prepare_with_teacher .about__text p {
        font-weight: 300;
        font-style: normal;
        font-size: 24px;
        line-height: 33px;
    }

.prepare_with_teacher h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 66px;
}

.prepare_with_teacher h1 {
    font-style: normal;
    font-weight: 800;
    font-size: 130px;
    line-height: 124px;
    margin-top: -30px;
    color: #E6D2B2;
    text-shadow: 0px 7px 0px #000000, -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.prepare_with_teacher .about__button {
    width: 100%;
    max-width: 460px;
    min-height: 75px;
    background: #00415F;
    border: 2px solid #000000;
    border-radius: 15px;
    box-shadow: 0px 13px 0px #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: 900;
    font-size: 32px;
    line-height: 44px;
    color: #fff;
}

.prepare_with_teacher .about__text a {
    position: relative;
    max-width: 460px;
}

.prepare_with_teacher .about__text img {
    position: absolute;
    right: -25px;
    bottom: -30px;
}

.prepare_with_teacher .lesson_types__boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 25px;
    margin-bottom: 200px;
}

.prepare_with_teacher .lesson_types__box {
    background: #E6D2B2;
    border: 2px solid #000000;
    box-shadow: 0px 13px 0px #000000;
    border-radius: 15px;
    position: relative;
    padding: 25px;
    height: fit-content;
    min-width: 30%;
}

.prepare_with_teacher .lesson_types__box__header {
    display: flex;
}

.prepare_with_teacher .lesson_types__box img {
    position: absolute;
    max-width: 200px;
    left: 210px;
    max-height: 175px;
    top: -70px;
}

.prepare_with_teacher .lesson_types__box .first {
    left: 180px;
}

.prepare_with_teacher .lesson_types__box .second {
    left: 220px;
    scale: 0.9;
}

.prepare_with_teacher .lesson_types__box .third {
    left: 225px;
    top: -63px;
}

.prepare_with_teacher h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 50px;
    margin-bottom: 20px;
}

.prepare_with_teacher .lesson_types__boxes .central {
    margin-top: -20px;
}

.prepare_with_teacher .lesson_types__container h2 {
    margin-bottom: 100px;
}

.prepare_with_teacher .access_types__container {
    position: relative;
}

    .prepare_with_teacher .access_types__container img {
        position: absolute;
        max-width: 350px;
        right: 0;
        top: -135px;
    }

    .prepare_with_teacher .access_types__container h2 {
        margin-bottom: 100px;
    }

.prepare_with_teacher .access_types__boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 100px;
}

.prepare_with_teacher .access_types__box {
    max-width: 600px;
    padding: 30px;
    border: 2px solid #000000;
    box-shadow: 0px 13px 0px #000000;
    border-radius: 15px;
    position: relative;
    height: fit-content;
}

.prepare_with_teacher .access_types__boxes .first {
    transform: rotate(-3.15deg);
    background: #FAF7EB;
    z-index: 1;
    transition: all 0.3s ease;
}

    .prepare_with_teacher .access_types__boxes .first:hover {
        z-index: 3;
        transform: scale(1.1);
    }

.prepare_with_teacher .access_types__boxes .second {
    transform: rotate(5.04deg) translateX(-70px) translateY(100px);
    background: #E6D2B2;
    z-index: 2;
    transition: all 0.3s ease;
}

    .prepare_with_teacher .access_types__boxes .second:hover {
        transform: scale(1.1) translateX(-20px) translateY(100px);
    }

.prepare_with_teacher .access_types__boxes .third {
    background: #F0E7D8;
    transform: rotate(1.08deg) translateY(-45px) translateX(25px);
    z-index: 0;
    padding-top: 45px;
    transition: all 0.3s ease;
}

    .prepare_with_teacher .access_types__boxes .third:hover {
        z-index: 3;
        transform: scale(1.1) translateY(-45px) translateX(25px);
    }

.prepare_with_teacher .access_types__box .text {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    margin: 10px 0;
}

.prepare_with_teacher .access_types__boxes .teacher {
    position: absolute;
    right: 0;
    top: -55px;
    background: #27C840;
    border: 2px solid #000000;
    box-shadow: 0px 7px 0px #000000;
    border-radius: 37px;
    padding: 5px 65px;
}

    .prepare_with_teacher .access_types__boxes .teacher p {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        color: #FFFFFF;
        text-align: end;
        margin-bottom: -15px;
    }

    .prepare_with_teacher .access_types__boxes .teacher div {
        font-style: normal;
        font-weight: 700;
        font-size: 48px;
        line-height: 65px;
        color: #FFFFFF;
    }

.prepare_with_teacher .access_types__boxes .self {
    position: absolute;
    right: -35px;
    top: 15px;
    background: #FFCC00;
    border: 2px solid #000000;
    box-shadow: 0px 7px 0px #000000;
    border-radius: 37px;
    transform: rotate(-3.15deg);
    padding: 5px 45px;
}

    .prepare_with_teacher .access_types__boxes .self p {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        text-align: right;
        color: #000000;
        margin-bottom: -5px;
    }

    .prepare_with_teacher .access_types__boxes .self div {
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 33px;
        color: #000000;
    }

#about_teacher {
    background: #F8E7CC;
}

.prepare_with_teacher .about_teacher__container {
    margin: 50px 0;
}

.prepare_with_teacher .about_teacher__header {
    width: fit-content;
}

.prepare_with_teacher .about_teacher__container span {
    font-weight: 300;
    font-style: normal;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    text-align: end;
    width: 100%;
    display: block;
    margin-top: -10px;
}

.prepare_with_teacher .about_teacher__content {
    display: flex;
    justify-content: space-between;
}

.prepare_with_teacher .about_teacher__photo {
    position: relative;
    margin: 40px 0 40px 20px;
}

    .prepare_with_teacher .about_teacher__photo .teacher__photo {
        border: 2px solid #000000;
        border-radius: 235px;
        box-shadow: 0px 13px 0px #000000;
        width: 100%;
    }

    .prepare_with_teacher .about_teacher__photo .photo__decor__bottom {
        position: absolute;
        left: -40px;
        bottom: -35px;
        max-width: 350px;
        transform: rotate(15deg);
    }

    .prepare_with_teacher .about_teacher__photo .photo__decor__top {
        position: absolute;
        right: -205px;
        top: -65px;
        max-width: 330px;
    }

.prepare_with_teacher .about_teacher__achivements {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 60%;
    font-weight: 400;
    font-size: 36px;
    line-height: 40px;
    color: #000000;
}

    .prepare_with_teacher .about_teacher__achivements img {
        position: absolute;
        top: 20px;
        right: -60px;
        max-width: 200px;
    }

    .prepare_with_teacher .about_teacher__achivements ul {
        margin-top: 150px;
    }

    .prepare_with_teacher .about_teacher__achivements li {
        background: url(img/prepare/li_star.png) no-repeat 0px 2px;
        background-size: 32px;
        padding-left: 45px;
        list-style-type: none;
        margin-bottom: 25px;
    }

.prepare_with_teacher .classes_format__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .prepare_with_teacher .classes_format__container h2 {
        width: 80%;
        max-width: 1400px;
        margin: 100px 0;
    }

    .prepare_with_teacher .classes_format__container .classes_format__boxes {
        width: 100%;
        position: relative;
        margin-bottom: 175px;
    }

    .prepare_with_teacher .classes_format__container .classes_format__box {
        background: #00415F;
        border: 2px solid #000000;
        box-shadow: 0px 11px 0px #000000;
        border-radius: 9px;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 33px;
        color: #FFFFFF;
        padding: 20px;
        max-width: 600px;
        position: absolute;
    }

    .prepare_with_teacher .classes_format__container .classes_format__boxes .one {
        top: 11%;
        left: 5%;
        width: 32%;
    }

    .prepare_with_teacher .classes_format__container .classes_format__boxes .two {
        top: 12%;
        left: 50%;
        width: 38%;
    }

    .prepare_with_teacher .classes_format__container .classes_format__boxes .three {
        top: 47%;
        left: 43.5%;
        width: 35%;
    }

    .prepare_with_teacher .classes_format__container .classes_format__boxes .four {
        top: 69.5%;
        left: 10%;
        width: 25%;
    }

    .prepare_with_teacher .classes_format__container .classes_format__boxes .five {
        top: 82%;
        left: 48.5%;
        width: 40%;
    }

@keyframes horisontalDot {
    0% {
        transform: translateX(-30px);
    }

    50% {
        transform: translateX(110px);
    }

    100% {
        transform: translateX(-30px);
    }
}

@keyframes verticalDot {
    0% {
        transform: translateY(-30px);
    }

    50% {
        transform: translateY(110px);
    }

    100% {
        transform: translateY(-30px);
    }
}

#ball1,
#ball3 {
    animation: horisontalDot 6s infinite ease-in-out;
}

#ball2 {
    animation: verticalDot 6s infinite ease-in-out;
}

.prepare_with_teacher .flipped_class__container {
    margin: 100px 0;
    position: relative;
}

    .prepare_with_teacher .flipped_class__container .duck {
        position: absolute;
        right: 0;
        top: -50px;
        max-width: 250px;
        rotate: 180deg;
    }

    .prepare_with_teacher .flipped_class__container h2 {
        transform: rotate(180deg);
        text-align: end;
        margin-bottom: 200px;
    }

.prepare_with_teacher .flipped_class__box {
    width: 70%;
    background: #E6D2B2;
    border: 2px solid #000000;
    box-shadow: 0px 13px 0px #000000;
    border-radius: 15px;
    padding: 30px;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.prepare_with_teacher .flipped_class__boxes {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prepare_with_teacher .flipped_class__box img {
    position: absolute;
    top: -100px;
    left: 0;
    max-width: 250px;
}

.prepare_with_teacher h5 {
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    text-align: center;
}

#flipped_class,
#advantages {
    background: #fff;
}

.prepare_with_teacher .advantages__boxes {
    display: flex;
    justify-content: space-between;
    margin-bottom: 145px;
}

.prepare_with_teacher .advantages__box {
    background: #CCE3F8;
    border: 2px solid #000000;
    box-shadow: 0px 13px 0px #000000;
    border-radius: 15px;
    width: 100%;
    margin: 0 25px 25px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    min-height: 175px;
}

    .prepare_with_teacher .advantages__box img {
        position: absolute;
        bottom: -95px;
        left: 35%;
        max-width: 135px;
    }

.prepare_with_teacher .advantages__boxes hr {
    width: 99vw;
    border: none;
    border-top: 2px solid #000;
    position: absolute;
    left: 0;
    margin-top: 90px;
}

.prepare_with_teacher .advantages__container h2 {
    margin-bottom: 50px;
}

.prepare_with_teacher .reviews__container h2 {
    margin-top: 100px;
}

.prepare_with_teacher .reviews__container .reviews__main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prepare_with_teacher .reviews__container .reviews__box {
    background: #E6D2B2;
    border: 2px solid #000000;
    box-shadow: 0px 13px 0px #000000;
    border-radius: 15px;
    margin: 50px 0;
    padding: 30px;
}

.prepare_with_teacher .reviews__container .reviews__boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.prepare_with_teacher .reviews__container .reviews__box__top {
    display: flex;
    justify-content: space-between;
}

.prepare_with_teacher .reviews__container .buttons__imitation {
    display: flex;
    align-items: center;
    font-size: 36px;
}

    .prepare_with_teacher .reviews__container .buttons__imitation p {
        margin: 0 20px;
    }

.prepare_with_teacher .reviews__container .reviews__box__top__left {
    width: 30%;
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
}

.prepare_with_teacher .reviews__container .reviews__box__top__right {
    width: 65%;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
}

.prepare_with_teacher .reviews__container .reviews__box__top__left .stars {
    position: absolute;
    top: -15px;
    right: 10px;
    max-width: 55px;
}

.prepare_with_teacher .reviews__container .reviews__box__top__left h5 {
    text-align: left;
}

.prepare_with_teacher .reviews__container .reviews__boxes hr {
    border: none;
    border-right: 2px solid #000;
}

.prepare_with_teacher .reviews__container .reviews__box__bottom {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 55px;
}

.prepare_with_teacher .reviews__container .mobile {
    display: none;
}

.prepare_with_teacher .faq__container {
    margin: 100px 0;
}

    .prepare_with_teacher .faq__container .faq__boxes {
        margin-top: 50px;
    }

    .prepare_with_teacher .faq__container .faq__box {
        min-height: 60px;
        padding: 20px 20px 20px 60px;
        margin-bottom: 20px;
        background: #FFFFFF;
        border: 2px solid #000000;
        border-radius: 15px;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 33px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .prepare_with_teacher .faq__container .faq__box .answer {
            opacity: 0;
            height: 0;
            transition: all 0.3s;
        }

            .prepare_with_teacher .faq__container .faq__box .answer p {
                opacity: 0;
                height: 0;
                transition: all 0.3s;
            }

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

        .prepare_with_teacher .faq__container .faq__box .open {
            display: none;
        }

        .prepare_with_teacher .faq__container .faq__box:hover .answer {
            margin: 50px 0 30px 0;
            opacity: 1;
            height: auto;
        }

            .prepare_with_teacher .faq__container .faq__box:hover .answer p {
                opacity: 1;
                height: auto;
            }

        .prepare_with_teacher .faq__container .faq__box:hover .closed {
            display: none;
        }

        .prepare_with_teacher .faq__container .faq__box:hover .open {
            display: inline;
        }

.prepare_with_teacher .footer .imgs {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

    .prepare_with_teacher .footer .imgs i {
        font-size: 70px;
        margin: 0 10px;
    }

.document-title {
    text-align: center;
    color: var(--main-color);
    font-size: 30px;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Banner */

.banner__exams__boxes {
    position: sticky;
    top: 5px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 98dvh;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 5px 0 0;
    width: 100%;
}

    .banner__exams__boxes::-webkit-scrollbar {
        width: 3px;
    }

    .banner__exams__boxes::-webkit-scrollbar-track {
        background: #fff;
    }

    .banner__exams__boxes::-webkit-scrollbar-thumb {
        background: var(--main-color);
        border-radius: 3px;
    }

    .banner__exams__boxes .switch__buttons__container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

.profile-page .switch__buttons__container.disabled .button.light__blue {
    background: #D1D1D6;
    color: #fff;
    pointer-events: none;
}

    .profile-page .switch__buttons__container.disabled .button.light__blue.active {
        background: #DCE3F0;
        color: #08212D;
        pointer-events: none;
    }

.section__banner .banner {
    background: #7cb2e917;
    backdrop-filter: blur(35px);
    border-radius: var(--content-border-radius);
    background-image: linear-gradient(211deg, rgba(255, 255, 255, 0) 55%, #ffe48d54), linear-gradient(35deg, rgba(255, 255, 255, 0) 55%, #ffe48d54);
    background-position: left bottom, right top;
    background-repeat: no-repeat;
    background-size: 100%;
    border: 2px solid var(--main-color);
    padding: 5px 15px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 36px);
}

    .section__banner .banner h2 {
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 30px;
        letter-spacing: 0.02em;
        text-align: start;
        color: #000000;
    }

    .section__banner .banner .banner__text {
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0.02em;
        color: #000000;
    }

    .section__banner .banner a {
        width: fit-content;
        display: block;
    }

    .section__banner .banner ul {
        list-style-type: none;
    }

        .section__banner .banner ul li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: #000;
            line-height: 19px;
        }

            .section__banner .banner ul li .blue__dot {
                width: 10px;
                height: 10px;
                background: var(--main-color);
                border-radius: 50%;
            }

    .section__banner .banner .banner__button {
        background: var(--main-color);
        border-radius: 8px;
        padding: 15px;
        font-style: normal;
        font-weight: 800;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        letter-spacing: 0.02em;
        color: #fff;
        margin: 15px 0;
        width: calc(100%);
    }

/* Prepare to advocate */

.main__container {
    background: url(img/toadvocate/Group_back_dots.png) no-repeat top 17% right, url(img/toadvocate/Rectangle\ 340.svg) no-repeat top 8% right -500px, url(img/toadvocate/Rectangle\ 340.svg) no-repeat top 10% left -500px, url(img/toadvocate/Group_back_dots.png) no-repeat top 45% center, url(img/toadvocate/Rectangle\ 340.svg) no-repeat top 50% left -500px, url(img/toadvocate/Rectangle\ 340.svg) no-repeat top 65% right -200px, url(img/toadvocate/Rectangle\ 340.svg) no-repeat top 70% right -200px, url(img/toadvocate/Group_back_dots.png) no-repeat top 100% right 50px, url(img/toadvocate/Rectangle\ 340.svg) no-repeat top 120% center, repeating-linear-gradient(90deg, #F5F5F5, #F5F5F5 73px, #F2F2F2 0, #F2F2F2 75px);
    z-index: 0;
    position: relative;
}

    .main__container .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        padding: 15px var(--content-padding);
        position: absolute;
        width: -webkit-fill-available;
    }

        .main__container .header + div {
            padding-top: 83px;
        }

    .main__container .central__block.mobile,
    .main__container .menu__button.mobile,
    .main__container .nav.mobile {
        display: none;
    }

#menuButtonClose {
    cursor: pointer;
}

.main__container .header .logo {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 117.24%;
    letter-spacing: 0.02em;
    color: #08212D;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .main__container .header .logo img {
        max-height: 45px;
    }

    .main__container .header .logo .small__text {
        font-size: 16px;
        font-style: normal;
        font-weight: 200;
        line-height: 16px;
        text-transform: lowercase;
        text-wrap: nowrap;
        text-align: center;
    }

.main__container .nav {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    text-decoration: none;
    list-style: none;
    font-style: normal;
    font-weight: 200;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: #08212D;
}

    .main__container .nav li:hover {
        font-weight: 700;
        border-bottom: 2px solid #08212D;
        cursor: pointer;
    }

    .main__container .nav li.active {
        font-weight: 700;
        border-bottom: 2px solid #08212D;
        cursor: pointer;
    }

.main__container .header .button {
    background: #00415F;
    border-radius: 13px;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    padding: 10px 50px;
}

.main__container section {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: auto;
}

    .main__container section#notificationsTab {
        padding: 17px 21px;
    }

.main__container h1 {
    font-style: normal;
    font-weight: 400;
    font-size: 64px;
    line-height: 131.9%;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #08212D;
}

.main__container .background {
    position: relative;
}

    .main__container .background .line__one {
        position: absolute;
        top: 435px;
    }

    .main__container .background .line__two {
        position: absolute;
        top: 480px;
    }

    .main__container .background .back__one {
        position: absolute;
        left: 20%;
        top: 70%;
    }

    .main__container .background .back__two {
        position: absolute;
        left: 85%;
        top: 45%;
        animation: spin 6s infinite ease-in-out;
    }

    .main__container .background .back__three {
        position: absolute;
        left: 10%;
        top: 15%;
        animation: spin 4s infinite ease-in-out;
    }

    .main__container .background .back__four {
        position: absolute;
        left: 30%;
        top: 20%;
        animation: scaleBlur 5s infinite ease-in-out;
    }

    .main__container .background .back__five {
        position: absolute;
        left: 68%;
        top: 75%;
        animation: scaleBlur 2s infinite ease-in-out;
    }

@keyframes scaleBlur {
    0% {
        transform: scale(1.2);
        backdrop-filter: blur(0px);
    }

    50% {
        transform: scale(0.8);
        backdrop-filter: blur(20px);
    }

    100% {
        transform: scale(1.2);
        backdrop-filter: blur(0px);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(1turn);
    }
}

.main__container .section__start {
    padding-top: 200px;
    padding-bottom: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .main__container .section__start .button {
        background: #00415F;
        border-radius: 12px;
        padding: 25px 50px;
        font-style: normal;
        font-weight: 800;
        font-size: 36px;
        line-height: 131.9%;
        text-align: center;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #FFFFFF;
        margin: 20px;
        cursor: pointer;
        z-index: 1;
    }

.main__container .section__purpose {
    padding: 100px var(--content-padding);
}

    .main__container .section__purpose h3 {
        font-style: normal;
        font-weight: 400;
        font-size: 40px;
        line-height: 55px;
        letter-spacing: 0.02em;
        color: #000000;
    }

    .main__container .section__purpose ul {
        text-decoration: none;
        list-style: none;
        font-style: normal;
        font-weight: 400;
        font-size: 25px;
        line-height: 49px;
        letter-spacing: 0.02em;
        color: #08212D;
        padding: 15px 0;
    }

        .main__container .section__purpose ul li {
            padding-left: 80px;
            background: url(img/toadvocate/Ellipse\ 62.svg) no-repeat 25px 15px;
        }

.main__container .section__about {
    padding-bottom: 50px;
}

.main__container h3 {
    font-style: normal;
    font-weight: 800;
    font-size: 40px;
    line-height: 55px;
    letter-spacing: 0.02em;
    color: #000000;
}

.main__container .section__about p {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: 0.02em;
    color: #08212D;
    max-width: 725px;
}

.main__container .section__about .about__container {
    padding: 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.main__container .section__about .about__item {
    min-height: 109px;
    background: linear-gradient(-45deg, #EFF1F4 65%, transparent 30%), linear-gradient(-135deg, #EFF1F4 65%, #F3F5F7 30%);
    background-repeat: no-repeat;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 50px;
    flex-direction: column;
    font-style: normal;
}

    .main__container .section__about .about__item p {
        font-weight: 600;
        font-size: 24px;
        line-height: 33px;
        letter-spacing: 0.02em;
        color: #08212D;
        padding: 0;
    }

    .main__container .section__about .about__item a {
        font-weight: 700;
    }

    .main__container .section__about .about__item:hover a {
        text-decoration: underline;
        font-weight: 700;
    }

    .main__container .section__about .about__item:hover {
        background: linear-gradient(-45deg, #DCE3F0 65%, transparent 30%), linear-gradient(-135deg, #DCE3F0 65%, #E6EBF4 30%);
    }

.main__container .go__up__button {
    position: fixed;
    right: 5%;
    bottom: 10%;
    width: 100px;
    height: 100px;
    background: var(--main-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 90px;
    cursor: pointer;
    animation: showButton 0.5s forwards;
    z-index: 2;
}

    .main__container .go__up__button.hideGoUpButton {
        position: fixed;
        right: 5%;
        bottom: 10%;
        width: 100px;
        height: 100px;
        background: var(--main-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 90px;
        cursor: pointer;
        animation: hideButton 0.5s forwards;
    }

.main__container .section__program .program__box {
    background: #FFFFFF;
    border-radius: 13px;
    margin: 20px 0;
    cursor: pointer;
}

.main__container .section__program .program__box__header {
    display: grid;
    grid-template-columns: 150px 1fr 100px;
}

    .main__container .section__program .program__box__header .program__img {
        background: #DCE3F0;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 55px;
    }

    .main__container .section__program .program__box__header .program__name {
        font-style: normal;
        font-weight: 800;
        font-size: 24px;
        line-height: 33px;
        letter-spacing: 0.02em;
        color: #08212D;
        display: flex;
        align-items: center;
        padding-left: 30px;
    }

    .main__container .section__program .program__box__header .program__button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
        position: relative;
    }

.main__container .section__program .program__box .info__plus {
    position: absolute;
    transform: rotate(-90deg);
    transition: all 0.5s ease;
}

.main__container .section__program .program__box.open .info__plus {
    position: absolute;
    transform: rotate(0deg);
    transition: all 0.5s ease;
}

.main__container .section__program .program__box .program__box__body {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 0.02em;
    color: #08212D;
    padding: 0 50px;
    max-height: 0;
    transition: all 0.5s ease;
    overflow: hidden;
}

.main__container .section__program .program__box.open .program__box__body {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 33px;
    letter-spacing: 0.02em;
    color: #08212D;
    max-height: 2000px;
    padding: 30px 50px;
    transition: all 0.5s ease;
}

@keyframes hideButton {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes showButton {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.main__container .section__banner__cover {
    background: #DCE3F0 url(img/toadvocate/Lines.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    margin: 150px 0;
}

.main__container .section__banner {
    display: grid;
    grid-template-columns: 1fr 350px;
    padding: 90px var(--content-padding);
}

    .main__container .section__banner .banner__text p {
        font-weight: 300;
        font-size: 24px;
        line-height: 26px;
        letter-spacing: 0.02em;
        color: #08212D;
    }

    .main__container .section__banner .banner__button__cover {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main__container .section__banner .banner__button {
        font-style: normal;
        font-weight: 800;
        font-size: 36px;
        line-height: 131.9%;
        text-align: center;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #FFFFFF;
        background: #00415F;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 40px;
    }

.main__container .section__slider {
    background: rgba(217, 217, 217, 0.21);
    padding-top: 60px;
    padding-bottom: 50px;
    margin-bottom: 50px;
    position: inherit;
    z-index: -1;
}

.slider__text {
    min-height: 800px;
}

.main__container .section__slider .slider__text__boxes {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
}

.main__container .section__slider .slider__box {
    display: grid;
}

.main__container .section__slider .slider__text__box:hover,
.main__container .section__slider .slider__text__box.active {
    display: grid;
    grid-template-columns: 45px 1fr;
    background: #FFFFFF;
    border-radius: 13px;
    padding: 40px 20px;
    margin: 5px 0;
    width: 45%;
    transition: all 0.25s ease-in-out;
}

    .main__container .section__slider .slider__text__box:hover .img,
    .main__container .section__slider .slider__text__box.active .img {
        background: url(img/toadvocate/ListActive.svg);
        width: 135px;
        background-repeat: no-repeat;
        background-size: 30px;
        transition: all 0.25s ease-in-out;
    }

    .main__container .section__slider .slider__text__box:hover p,
    .main__container .section__slider .slider__text__box.active p {
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 33px;
        letter-spacing: 0.02em;
        transition: all 0.25s ease-in-out;
        color: #08212D;
    }

    .main__container .section__slider .slider__text__box:hover ~ .slider__text__box.active,
    .main__container .section__slider .slider__text__box {
        display: grid;
        grid-template-columns: 45px 1fr;
        border-radius: 13px;
        padding: 40px 20px;
        background: rgba(255, 255, 255, 0.27);
        margin: 5px 0;
        transition: all 0.25s ease-in-out;
        width: 45%;
    }

        .main__container .section__slider .slider__text__box:hover ~ .slider__text__box.active .img,
        .main__container .section__slider .slider__text__box .img {
            background: url(img/toadvocate/List.svg);
            width: 135px;
            background-repeat: no-repeat;
            background-size: 30px;
            transition: all 0.25s ease-in-out;
        }

        .main__container .section__slider .slider__text__box:hover ~ .slider__text__box.active p,
        .main__container .section__slider .slider__text__box p {
            font-style: normal;
            font-weight: 400;
            font-size: 24px;
            line-height: 33px;
            letter-spacing: 0.02em;
            color: #08212D;
            transition: all 0.25s ease-in-out;
        }

.main__container .section__slider .slider__img {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    position: absolute;
    right: 10%;
    top: 40px;
}

    .main__container .section__slider .slider__img img {
        max-width: 400px;
        position: absolute;
        top: -50px;
        right: 5%;
        max-width: 350px;
        height: 745px;
        border-radius: 38px;
    }


        .main__container .section__slider .slider__img img.iphone {
            max-width: 380px;
            height: 780px;
            margin: -18px -18px 0 0;
        }

.main__container .section__slider .screen-2,
.main__container .section__slider .screen-3,
.main__container .section__slider .screen-4 {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.trigger-2:hover ~ .slider__img .screen-2 {
    opacity: 1;
}

.trigger-3:hover ~ .slider__img .screen-3 {
    opacity: 1;
}

.trigger-4:hover ~ .slider__img .screen-4 {
    opacity: 1;
}

.main__container .section__slider .slider__box.mobile {
    display: none;
}

.section__qa h5 {
    font-style: normal;
    font-weight: 200;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 0.02em;
    color: #08212D;
}

.section__qa .qa__box ul,
.section__qa .qa__box p {
    color: #08212D;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.section__qa .qa__box.active ul,
.section__qa .qa__box.active p {
    max-height: 1000px;
    overflow: hidden;
    transition: all 0.5s ease;
}

.section__qa .qa__box {
    background: rgba(255, 255, 255, 0.33);
    border: 2px solid #DCE3F0;
    border-radius: 13px;
    padding: 20px 5px 20px 30px;
    height: fit-content;
    cursor: pointer;
}

.section__qa .qa__container {
    margin: 25px 0;
    display: grid;
    grid-template-columns: 49% 49%;
    grid-column-gap: 2%;
    grid-row-gap: 15px;
}

.section__qa .qa__box .i {
    font-size: 30px;
    transform: rotate(0deg);
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section__qa .qa__box.active .i {
    font-size: 30px;
    transform: rotate(90deg);
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section__qa .qa__box .box__header {
    display: grid;
    grid-template-columns: 1fr 30px;
    margin-bottom: 0;
    transition: all 0.5s ease;
}

.section__qa .qa__box.active .box__header {
    display: grid;
    grid-template-columns: 1fr 30px;
    margin-bottom: 20px;
    transition: all 0.5s ease;
}

.main__container .menu-right {
    display: flex;
    justify-content: right;
    position: relative;
    align-items: center;
}


.main__container .user {
    text-align: right;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    position: relative;
}

.main__container .white__notification {
    position: absolute;
    background: #838383;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 11px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -1px;
    right: -1px;
}

.main__container .user a {
    max-width: 34px;
    max-height: 34px;
}

.main__container .user img {
    max-width: 34px;
    max-height: 34px;
}

.main__container .user__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 0 0 10px;
}

    .main__container .user__info h3 {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 98.9%;
        text-align: start;
        color: #000;
        margin: 3px 0;
        max-width: 135px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .main__container .user__info p {
        font-style: normal;
        font-weight: 500;
        font-size: 11px;
        line-height: 98.9%;
        color: #000;
        margin: 3px 0;
        max-width: 135px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.main__container .open__arrow {
    color: #000;
    font-size: 28px;
    line-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
}

    .main__container .open__arrow i {
        transition: all 0.1s;
    }

.main__container .menu-right.popup__open .open__arrow i {
    transform: rotate(-90deg);
}

.main__container .menu-right.popup__open .user__popup__menu {
    height: fit-content;
}

.main__container .menu-right .open__popup__menu {
    cursor: pointer;
}

.main__container svg {
    z-index: -1;
}

/* EDKI Landing */

.edki {
    padding: 120px 0 30px 0;
    background: var(--light-grey);
    background-image: radial-gradient(circle, rgb(0 102 204 / 36%) 0%, var(--light-grey) 60%), radial-gradient(circle, rgb(255 204 0 / 30%) 0%, var(--light-grey) 65%);
    background-position: 69% 100%, 0% 0%;
    background-size: 44% 84%, 40% 75%;
    background-repeat: no-repeat;
    overflow: hidden;
}

    .edki section,
    .edki__block section,
    .section__edki__accordeon,
    .edki__banner section,
    .one__column .section__qa,
    .text__logo__bunner section,
    .social__links section {
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
        margin: auto;
    }

.section__edki__header .pre__text {
    display: flex;
    gap: 15px;
    align-items: center;
}

    .section__edki__header .pre__text p {
        color: #08212D;
        font-size: 16px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }

.section__edki__header h1 {
    color: #08212D;
    font-size: 64px;
    font-style: normal;
    font-weight: 300;
    line-height: 117.24%;
    text-align: start;
    letter-spacing: normal;
    text-transform: inherit;
}

.section__edki__header .after__text {
    max-width: 60%;
}

    .section__edki__header .after__text p {
        color: #08212D;
        font-size: 32px;
        font-style: normal;
        font-weight: 200;
        line-height: 102.4%;
        position: relative;
        padding: 10px 0;
    }

        .section__edki__header .after__text p img {
            position: absolute;
            top: calc( 100% - 25px );
            margin-left: 10px;
        }

.section__edki__header a {
    width: fit-content;
    display: block;
}

.section__edki__header .button {
    border-radius: 142px;
    background: #00415F;
    width: fit-content;
    color: #F5F5F5;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 15px 75px;
    margin-top: 90px;
}

.scrolling__lines {
    margin: 25px 0;
}

    .scrolling__lines .scroll {
        width: 110%;
        display: flex;
    }

        .scrolling__lines .scroll div {
            background-color: tranparent;
            leading-trim: both;
            text-edge: cap;
            font-family: Nunito;
            font-size: 36px;
            font-style: normal;
            font-weight: 900;
            line-height: 107.9%;
            text-transform: uppercase;
            white-space: nowrap;
            animation: animate 80s linear infinite;
            animation-delay: -80s;
        }

            .scrolling__lines .scroll div:nth-child(2) {
                animation: animate2 80s linear infinite;
                animation-delay: -40s;
            }

.section__edki__accordeon {
    background: #F2F2F2;
    padding-top: 50px;
    padding-bottom: 50px;
}

    .section__edki__accordeon h3 {
        color: #08212D;
        font-family: Nunito;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 95.9%;
        background-image: url(img/edki/Vector27.png);
        background-repeat: no-repeat;
        background-position: 100%;
        padding: 30px 0;
    }

    .section__edki__accordeon h5 {
        color: #000;
        font-family: Nunito;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 194.4%;
    }

    .section__edki__accordeon .box {
        padding: 25px;
        border-bottom: 1px solid #08212D;
    }

        .section__edki__accordeon .box .close {
            display: none;
        }

        .section__edki__accordeon .box.active .close {
            display: block;
        }

        .section__edki__accordeon .box.active .open {
            display: none;
        }

    .section__edki__accordeon .box__header {
        display: grid;
        grid-template-columns: 1fr 40px;
        align-items: center;
    }

        .section__edki__accordeon .box__header i {
            font-size: 30px;
        }

    .section__edki__accordeon .box .content {
        color: #000;
        font-family: Nunito;
        font-size: 16px;
        font-style: normal;
        font-weight: 200;
        line-height: 194.4%;
        transition: all 0.3s;
        max-height: 1px;
        overflow: hidden;
    }

        .section__edki__accordeon .box .content ol {
            margin-left: 32px;
        }

    .section__edki__accordeon .box.active .content {
        transition: all 0.3s;
        max-height: 1000px;
    }

@keyframes animate {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes animate2 {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-200%);
    }
}

.scrolling__lines .scroll.blue__line {
    transform: rotate(-4deg) translateY(20px) translateX(-10px);
    background: #06C;
    color: #fff;
    padding: 10px 0;
}

.scrolling__lines .scroll.yellow__line {
    transform: rotate(1deg) translateY(0px) translateX(0px);
    background: #FC0;
    color: #08212D;
    padding: 10px 0;
}

.edki__block {
    padding: 50px 0;
    background: var(--light-grey);
    background-image: radial-gradient(circle, rgb(0 102 204 / 20%) 0%, var(--light-grey) 60%), radial-gradient(circle, rgb(255 204 0 / 25%) 0%, var(--light-grey) 65%);
    background-position: 100% 100%, 0% 0%;
    background-size: 44% 84%, 40% 75%;
    background-repeat: no-repeat;
    overflow: hidden;
}

    .edki__block .description {
        color: #000;
        font-size: 20px;
        font-style: normal;
        line-height: 110.4%;
        max-width: 60%;
        width: fit-content;
        padding: 0;
        margin: 0;
        position: relative;
    }

.section__edki__about .info__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1fr;
    padding: 40px 0;
    gap: 20px;
}

    .section__edki__about .info__box .info__withimg {
        max-width: 100%;
        height: fit-content;
    }

    .section__edki__about .info__box .img__cover {
        overflow: hidden;
        border-radius: 18px;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .section__edki__about .info__box .img__cover img {
            object-fit: cover;
            max-width: 100%;
        }

    .section__edki__about .info__box .info__withimg .after__text {
        color: #000;
        font-size: 14px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        margin: 10px 0;
    }

    .section__edki__about .info__box ol {
        list-style-type: none;
        border-radius: 12px;
        border: 1px solid #08212D;
        background: rgb(255 255 255 / 79%);
        padding: 20px 35px;
        height: fit-content;
        background-image: linear-gradient(to right, #08212D 1px, transparent 1px);
        background-size: 100% calc( 100% - 180px );
        background-position: 55px center;
        background-repeat: no-repeat;
    }

        .section__edki__about .info__box ol li {
            display: flex;
            gap: 20px;
            align-items: center;
        }

            .section__edki__about .info__box ol li span {
                -webkit-text-stroke: 1px #000;
                color: rgba(255, 255, 255, 1);
                font-size: 64px;
                font-weight: 1000;
            }

            .section__edki__about .info__box ol li .text {
                color: #08212D;
                font-size: 20px;
                font-style: normal;
                font-weight: 200;
                line-height: normal;
                padding: 30px 0;
            }

            .section__edki__about .info__box ol li:hover span {
                color: #000;
            }

            .section__edki__about .info__box ol li:hover .text {
                font-weight: 500;
            }

        .section__edki__about .info__box ol hr {
            border: none;
            border-top: 2px solid #EDEDED;
            width: calc( 100% - 55px);
            margin-left: auto;
        }

.section__edki__arrowlist ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 30px 0;
}

    .section__edki__arrowlist ul li {
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.50);
        border: none;
        padding: 15px 45px;
        color: #08212D;
        font-size: 20px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        display: flex;
        gap: 10px;
    }

        .section__edki__arrowlist ul li img {
            display: none;
        }

        .section__edki__arrowlist ul li a {
            text-decoration: underline;
            text-decoration-thickness: 1px;
        }

        .section__edki__arrowlist ul li:hover {
            border: 1px solid #08212D;
            background: #FFF;
            font-weight: 400;
            padding: 15px 10px;
        }

            .section__edki__arrowlist ul li:hover img {
                display: flex;
            }

.edki__block .section__edki__arrowlist .description img {
    position: absolute;
    bottom: -10px;
    left: calc( 100% + 20px);
}

.edki__block .section__edki__slider h3 {
    max-width: fit-content;
    background-image: url(img/edki/Vector28.png);
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: contain;
    padding: 5px 15px 5px 0;
}

.edki__block .section__edki__slider .slider__box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0;
}

    .edki__block .section__edki__slider .slider__box .swiper,
    .edki__block .section__edki__slider .slider__box .swiper_bottom {
        max-width: 60vw;
        overflow: hidden;
    }

    .edki__block .section__edki__slider .slider__box .swiper-wrapper {
        max-width: 60vw;
    }

    .edki__block .section__edki__slider .slider__box .swiper-slide {
        max-width: 60vw;
        display: flex;
        justify-content: center;
    }

        .edki__block .section__edki__slider .slider__box .swiper-slide img {
            max-width: 100%;
        }

.edki__block .section__edki__slider .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    border: 1px solid black;
    border-radius: 50%;
    margin: 0 10px;
    cursor: pointer;
    background: transparent;
    opacity: 1;
}

    .edki__block .section__edki__slider .swiper-pagination-bullet.swiper-pagination-bullet-active,
    .edki__block .section__edki__slider .swiper-pagination-bullet:hover {
        background: #E6D2B2;
    }

.edki__block .section__edki__slider .dots {
    display: flex;
    margin: 20px;
    justify-content: center;
}

.edki__block .section__edki__slider .slider__box .img {
    position: absolute;
    top: 0;
    right: 0px;
}

.one__column .section__qa .qa__container {
    grid-template-columns: 1fr;
}

.one__column {
    background: var(--light-grey);
    background-image: radial-gradient(circle, rgb(0 102 204 / 20%) 0%, var(--light-grey) 45%), radial-gradient(circle, rgb(255 204 0 / 25%) 0%, var(--light-grey) 50%);
    background-position: 100% 100%, 0% 0%;
    background-size: 44% 84%, 40% 75%;
    background-repeat: no-repeat;
    padding: 50px 0;
}

.edki__banner {
    background-color: #00415F;
    color: #fff;
    padding: 60px 0;
}

    .edki__banner h3 {
        color: #fff;
    }

    .edki__banner .des__text {
        font-size: 18px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        display: flex;
        gap: 15px;
    }

        .edki__banner .des__text a {
            text-decoration: underline;
            text-decoration-thickness: 1px;
        }

    .edki__banner .banner__button__cover {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
    }

        .edki__banner .banner__button__cover .banner__bottom__text {
            font-size: 36px;
            font-style: normal;
            font-weight: 300;
            line-height: 107.9%;
            max-width: 400px;
        }

        .edki__banner .banner__button__cover .banner__button {
            border-radius: 142px;
            background: #E6D2B2;
            width: fit-content;
            color: #00415F;
            text-align: center;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            padding: 20px 100px;
        }

        .edki__banner .banner__button__cover a {
            width: fit-content;
        }

.text__logo__bunner {
    background: rgba(230, 210, 178, 0.12);
    backdrop-filter: blur(57.5px);
    z-index: -1;
    position: relative;
    padding: 40px 0;
}

    .text__logo__bunner img {
        max-width: 50px;
    }

    .text__logo__bunner section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .text__logo__bunner .text {
        color: #08212D;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 200;
        line-height: 113.9%;
        max-width: 75%;
    }

    .text__logo__bunner .button {
        border-radius: 7px;
        background: #00415F;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 116.9%;
        padding: 20px 60px;
        width: fit-content;
        color: #fff;
        margin: 20px 0;
        text-align: center;
    }

.social__links {
    background: var(--light-grey);
    padding: 40px 0;
}

    .social__links .links__container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 35px 0;
        gap: 30px;
        flex-wrap: wrap;
    }

        .social__links .links__container a {
            width: fit-content;
        }

        .social__links .links__container .link {
            background: var(--main-color);
            color: #fff;
            font-size: 46px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.efvv__template {
    background-image: url(/img/edki/background.png);
    background-size: cover;
}

.efvv {
    padding: 100px 0;
    border-bottom: 1px solid var(--temperate-grey);
}

    .efvv .section__efvv__header {
        position: relative;
    }

        .efvv .section__efvv__header h1 {
            color: #08212D;
            font-size: 40px;
            font-style: normal;
            line-height: 132%;
            text-align: start;
            text-transform: none;
            max-width: 70%;
        }

        .efvv .section__efvv__header .after__text {
            color: #08212D;
            font-size: 24px;
            font-style: normal;
            font-weight: 300;
            line-height: 116.9%;
        }

        .efvv .section__efvv__header .button {
            border-radius: 7px;
            background: #00415F;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 116.9%;
            padding: 20px 60px;
            width: fit-content;
            color: #fff;
            margin: 20px 0;
            text-align: center;
        }

        .efvv .section__efvv__header .sided__text {
            color: #08212D;
            font-size: 20px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            position: absolute;
            right: var(--content-padding);
            bottom: -25px;
            max-width: 35%;
            text-align: end;
        }

.efvv__nobackground {
    padding: 100px 0 0 0;
}

    .efvv__nobackground .section__efvv__side__text .header__box {
        display: grid;
        grid-template-columns: 30% 68%;
        gap: 2%;
        margin-bottom: 50px;
    }

    .efvv__nobackground h3 {
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: #08212D;
        max-width: 70%;
    }

    .efvv__nobackground .header__box h3 {
        max-width: 100%;
    }

    .efvv__nobackground .description {
        color: #08212D;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 0;
    }

    .efvv__nobackground .section__efvv__side__text .header__box .side__text {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 15px;
        border-left: 1px solid #08212D;
        color: #08212D;
        font-size: 20px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

        .efvv__nobackground .section__efvv__side__text .header__box .side__text a {
            text-decoration: underline;
            font-weight: 500;
        }

    .efvv__nobackground .section__efvv__side__text .after__text {
        color: #08212D;
        font-size: 20px;
        font-style: normal;
        line-height: normal;
    }

    .efvv__nobackground .section__efvv__list ul {
        list-style: none;
        margin: 20px 0;
        border-top: 1px solid #D1D1D6;
    }

        .efvv__nobackground .section__efvv__list ul li {
            padding: 8px 20px;
            border-bottom: 1px solid #D1D1D6;
            color: #08212D;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 168.9%;
            display: flex;
            gap: 10px;
        }

            .efvv__nobackground .section__efvv__list ul li .uil {
                color: #A3A3A3;
            }

            .efvv__nobackground .section__efvv__list ul li:hover {
                font-weight: 700;
            }

                .efvv__nobackground .section__efvv__list ul li:hover .uil {
                    color: #08212D;
                }

    .efvv__nobackground .description {
        font-weight: 500;
        margin: 0 0 30px 0;
    }

    .efvv__nobackground .section__efvv__text .background .description {
        font-weight: 500;
        max-width: 80%;
        margin: 0 0 30px 0;
    }

    .efvv__nobackground .section__efvv__text .background .main__text {
        font-size: 20px;
    }

    .efvv__nobackground .section__efvv__text .background {
        position: initial;
        padding: 50px 55px;
        margin-left: -55px;
        margin-right: -55px;
        background: linear-gradient(31deg, rgb(0 102 204 / 8%) 5%, rgb(0 102 204 / 17%) 21%, rgb(255 204 0 / 14%) 32%, rgb(255 204 0 / 14%) 68%, rgb(0 102 204 / 14%) 81%);
        border-radius: 30px;
        border: 1px solid #08212D;
    }

    .efvv__nobackground .section__efvv__text .description {
        font-weight: 300;
        max-width: 80%;
        margin: 0 0 30px 0;
    }

.section__efvv__text .main__text .text-huge {
    font-weight: 900;
    font-size: 40px;
}

.section__efvv__text .main__text .text-tiny {
    font-weight: 300;
    font-size: 13px;
}

.efvv__nobackground .section__efvv__img .img__box {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .efvv__nobackground .section__efvv__img .img__box .main__img {
        max-width: 100%;
    }

.section__efvv__banner .banner {
    background: #7cb2e917;
    border-radius: var(--content-border-radius);
    background-image: url(img/alter_bunner_background.png);
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid var(--main-color);
    padding: 5px 20px;
    position: relative;
}

    .section__efvv__banner .banner .banner__img {
        position: absolute;
        display: flex;
        top: 0;
        right: 0;
        height: 100%;
        max-width: 50%;
        overflow: hidden;
        aspect-ratio: 2/1;
        z-index: 0;
        align-items: center;
        justify-content: flex-end;
    }

        .section__efvv__banner .banner .banner__img img {
            max-height: 100%;
            max-width: 100%;
        }

    .section__efvv__banner .banner .banner__content {
        z-index: 1;
        position: relative;
        max-width: 60%;
        padding: 40px 0 40px 40px;
    }

        .section__efvv__banner .banner .banner__content h1 {
            font-size: 36px;
            font-weight: 500;
            text-transform: none;
            line-height: 92%;
            text-align: start;
        }

        .section__efvv__banner .banner .banner__content .banner__text {
            font-size: 20px;
            font-weight: 400;
            padding: 10px 0;
        }

        .section__efvv__banner .banner .banner__content a {
            width: fit-content;
            margin-top: 50px;
            display: flex;
        }

            .section__efvv__banner .banner .banner__content a .banner__button {
                background: var(--main-color);
                color: #fff;
                border-radius: 7px;
                padding: 15px 70px;
                font-size: 24px;
            }

.section__tznk__columns__cover {
    background: var(--light-grey);
    padding: 50px 0;
    position: relative;
}

    .section__tznk__columns__cover .back__img {
        background-image: url(img/logo2.png);
        filter: blur(25px);
        -webkit-filter: blur(25px);
        background-repeat: no-repeat;
        position: absolute;
        width: 70%;
        height: 80%;
        top: 10%;
        right: 0;
        background-size: contain;
        background-position: right;
        opacity: 0.5;
    }

.section__tznk__columns {
    z-index: 1;
    position: relative;
}

    .section__tznk__columns h3 {
        color: #08212D;
        font-size: 64px;
        font-style: normal;
        font-weight: 300;
        line-height: 104%;
        max-width: 1275px;
    }

    .section__tznk__columns .subtitle {
        color: #08212D;
        font-size: 18px;
        font-style: normal;
        font-weight: 200;
        line-height: 104%;
    }

    .section__tznk__columns ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid #D1D1D6;
        margin-top: 25px;
    }

        .section__tznk__columns ul li {
            color: #08212D;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 168.9%;
            list-style: none;
            border-bottom: 1px solid #D1D1D6;
            display: flex;
            align-items: center;
        }

.section__tznk__banners {
    padding: 50px 0;
}

    .section__tznk__banners .bunners {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 25px;
    }

    .section__tznk__banners .bunner__box {
        display: grid;
        grid-template-columns: 18px 1fr;
    }

    .section__tznk__banners .bunner__leftline {
        background: #E6D2B2;
        width: 18px;
        height: auto;
        border-radius: 12px 0 0 12px;
    }

    .section__tznk__banners .bunner__content {
        display: grid;
        grid-template-columns: 1fr 25%;
        padding: 15px;
        background: #fff;
        border-radius: 0 12px 12px 0;
    }

        .section__tznk__banners .bunner__content .texts {
            padding: 15px;
        }

            .section__tznk__banners .bunner__content .texts h3 {
                color: #000;
                font-family: Nunito;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 104%;
            }

            .section__tznk__banners .bunner__content .texts .text {
                color: #000;
                font-size: 16px;
                font-style: normal;
                font-weight: 300;
                line-height: 104%;
            }

        .section__tznk__banners .bunner__content .img__box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .section__tznk__banners .bunner__content img {
            max-width: 100%;
            max-height: 175px;
        }

.section__tznk__list {
    padding: 50px 0;
}

    .section__tznk__list h3 {
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
        margin: auto;
    }

    .section__tznk__list ol {
        margin: 35px 0 30px 0;
    }

        .section__tznk__list ol hr {
            border: none;
            border-bottom: 1px #08212D solid;
            width: 80%;
            margin: auto;
        }

        .section__tznk__list ol li {
            padding: 25px 0;
        }

            .section__tznk__list ol li:hover {
                background: rgba(230, 210, 178, 0.23);
            }

            .section__tznk__list ol li .li {
                padding-left: var(--content-padding);
                padding-right: var(--content-padding);
                margin: auto;
                display: grid;
                grid-template-columns: 165px 1fr;
                align-items: center;
            }

                .section__tznk__list ol li .li .number {
                    -webkit-text-stroke: 1px #000;
                    color: transparent;
                    font-size: 64px;
                    font-weight: 1000;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

            .section__tznk__list ol li:hover .li .number {
                color: #E6D2B2;
            }

            .section__tznk__list ol li .li .text h2 {
                color: #000;
                font-size: 36px;
                font-style: normal;
                font-weight: 400;
                line-height: 104%;
            }

            .section__tznk__list ol li:hover .li .text h2 {
                font-weight: 700;
            }

            .section__tznk__list ol li .li .text p {
                color: #000;
                font-size: 24px;
                font-style: normal;
                font-weight: 300;
                line-height: 116.9%;
                margin-top: 10px;
            }

    .section__tznk__list .additional__p {
        color: #000;
        font-size: 20px;
        font-style: normal;
        font-weight: 200;
        line-height: 104%;
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
        margin: auto;
    }

.section__tznk__ourproducts__container {
    margin: 50px 0;
}

.section__tznk__ourproducts .box {
    background: #FFFEFA;
    border-radius: 12px;
    padding: 55px;
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 15px;
    align-items: center;
}

    .section__tznk__ourproducts .box .products {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

        .section__tznk__ourproducts .box .products img {
            max-width: 100%;
        }

.black__with__lines {
    background: radial-gradient(circle, rgba(1, 3, 4, 1) 0%, rgba(9, 34, 46, 1) 89%);
    position: relative;
}

    .black__with__lines .black__with__lines__section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .black__with__lines .black__with__lines__section .pre__text {
            color: #FFCC00;
            font-size: 48px;
            font-weight: 900;
            text-align: center;
            max-width: 550px;
            line-height: 93%;
        }

        .black__with__lines .black__with__lines__section h1 {
            font-size: 163px;
            color: #FFCC00;
            text-align: center;
        }

        .black__with__lines .black__with__lines__section .after__text {
            font-size: 40px;
            color: #FFCF00;
            text-align: center;
            font-weight: 900;
        }

    .black__with__lines .line__lefttop__to__leftbottom__wrap {
        position: absolute;
        background: #675404;
        transform: rotate(39deg) translateY(0px) translateX(80px);
        transform-origin: right center;
        height: 63px;
        font-size: 40px;
        font-weight: 900;
        display: flex;
        align-items: center;
        right: 65%;
        bottom: 0;
        width: 100%;
        text-wrap-mode: nowrap;
    }

    .black__with__lines .line__lefttop__to__leftbottom {
        position: absolute;
        background: linear-gradient(171deg, rgba(255, 204, 0, 1) 54%, rgba(187, 151, 5, 1) 91%);
        transform: rotate(41deg) translateY(0px) translateX(80px);
        transform-origin: right center;
        height: 63px;
        font-size: 40px;
        font-weight: 900;
        display: flex;
        align-items: center;
        right: 65%;
        bottom: 0;
        width: fit-content;
        text-wrap-mode: nowrap;
    }

    .black__with__lines .line__leftbottom__to__lefttop {
        position: absolute;
        background: radial-gradient(circle,rgba(47, 40, 14, 1) 21%, rgba(126, 101, 0, 1) 63%);
        transform: rotate(-50deg) translateY(0px) translateX(65px);
        transform-origin: right center;
        height: 46px;
        font-size: 40px;
        font-weight: 900;
        display: flex;
        align-items: center;
        right: 63%;
        top: 0;
        width: fit-content;
        text-wrap-mode: nowrap;
    }

    .black__with__lines .line__rightbottom__to__righttop__wrap {
        position: absolute;
        background: #675404;
        transform: rotate(-18deg) translateY(0px) translateX(0px);
        transform-origin: left center;
        height: 63px;
        font-size: 40px;
        font-weight: 900;
        display: flex;
        align-items: center;
        left: 60%;
        top: 100%;
        width: 100%;
        text-wrap-mode: nowrap;
    }

    .black__with__lines .line__rightbottom__to__righttop {
        position: absolute;
        background: linear-gradient(214deg,rgba(255, 204, 0, 1) 54%, rgba(187, 151, 5, 1) 91%);
        transform: rotate(-20deg) translateY(0px) translateX(0px);
        transform-origin: left center;
        height: 63px;
        font-size: 40px;
        font-weight: 900;
        display: flex;
        align-items: center;
        left: 60%;
        top: 100%;
        width: fit-content;
        text-wrap-mode: nowrap;
    }

    .black__with__lines .line__righttop__to__rightbottom {
        position: absolute;
        background: radial-gradient(circle,rgba(47, 40, 14, 1) 21%, rgba(126, 101, 0, 1) 63%);
        transform: rotate(33deg) translateY(0px) translateX(-130px);
        transform-origin: left center;
        height: 46px;
        font-size: 40px;
        font-weight: 900;
        display: flex;
        align-items: center;
        top: 0;
        left: 70%;
        width: fit-content;
        text-wrap-mode: nowrap;
    }

    .black__with__lines .white__line {
        position: absolute;
    }

    .black__with__lines .cover {
        padding: 200px 0 100px 0;
        overflow: hidden;
        position: relative;
    }

    .black__with__lines .scrolling__lines {
        position: absolute;
    }

        .black__with__lines .scrolling__lines .scroll.yellow__line {
            transform: rotate(1.5deg) translateY(19px) translateX(0px);
            color: #000;
        }
/* Review Template*/
.reviews__template {
    display: flex;
    position: relative;
    height: 100dvh;
    background: #003851;
    color: #fff;
    gap: 15px;
    padding-bottom: 65px;
    overflow: hidden;
}

    .reviews__template .check_height {
        height: fit-content;
    }

    .reviews__template .swiper {
        width: 100%;
        height: 100%;
        padding: 20px 0 45px 0;
    }

    .reviews__template .swiper-slide {
        font-size: 18px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 12px;
        background: #00415F;
    }

    .reviews__template .swiper-fade .swiper-slide {
        opacity: 0 !important;
        background: transparent;
    }

    .reviews__template .swiper-fade .swiper-slide-active {
        opacity: 1 !important;
    }

    .reviews__template .swiper-vertical > .swiper-wrapper {
        gap: 15px;
    }

    .reviews__template .accent {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .reviews__template .reviewSwiperWord {
        position: absolute;
        left: 0;
        top: 0;
    }

    .reviews__template .review__header {
        padding: 15px;
        display: flex;
        justify-content: space-between;
    }

        .reviews__template .review__header h5 {
            font-size: 15px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .reviews__template .review__header .date {
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

    .reviews__template .review {
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 0 15px 15px 15px;
    }

    .reviews__template h1 {
        color: #fff;
        font-weight: 800;
    }

/* Progress bar */
.progress__bar__container {
    position: sticky;
    top: 61px;
    left: 0;
    width: 100%;
    background: #0063CC;
    z-index: 1;
}

.progress__bar {
    height: 5px;
    background: #FFCC00;
    border-radius: 0 3px 3px 0;
}

.inline__progress__bar__container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 75px;
    gap: 10px;
    align-items: center;
}

    .inline__progress__bar__container .inline__progressbar__box {
        background: #D1D1D6;
        border-radius: 11px;
        width: 100%;
        height: 20px;
    }

        .inline__progress__bar__container .inline__progressbar__box .inline__progress__bar {
            background: #0FB800;
            border-radius: 11px;
            height: 20px;
        }

    .inline__progress__bar__container .inline__progressbar__numbers {
        color: var(--main-color);
        font-size: 24px;
        font-weight: 800;
    }

        .inline__progress__bar__container .inline__progressbar__numbers .number__progress {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
        }

/* new profile page */
/* chunks */
.subject__box .chunk__item {
    display: grid;
    grid-template-columns: 20px minmax(160px, 1fr) 230px;
    align-items: center;
    background: #F9EDC7;
    padding: 23px 5px 23px 8px;
    border-radius: 11px;
    min-height: 64px;
}

    .subject__box .chunk__item.completed {
        background: #D5F7D2;
    }

    .subject__box .chunk__item.locked,
    .user-cabinet.all__unlocked .subject__box .chunk__item {
        background: #fff;
    }

    .subject__box .chunk__item .row__number {
        font-size: 16px;
        font-weight: 200;
        margin-top: -20px;
    }

    .subject__box .chunk__item .stats__box {
        display: grid;
        grid-template-columns: 235px minmax(194px, 400px);
        align-items: center;
        gap: 20px;
    }

    .subject__box .chunk__item .status {
        font-size: 24px;
        font-weight: 700;
    }

    .subject__box .chunk__item.locked .status {
        color: #b3aeae;
    }

    .subject__box .chunk__item .counts {
        display: grid;
        grid-template-columns: 87px minmax(160px, 230px);
        align-items: center;
        gap: 20px;
        justify-content: space-between;
    }

    .subject__box .chunk__item .chunk__counts {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

        .subject__box .chunk__item .chunk__counts .name {
            font-size: 20px;
            color: #a3a3a3;
            font-weight: 200;
            padding-bottom: 5px;
        }

        .subject__box .chunk__item .chunk__counts .success__box,
        .subject__box .chunk__item .chunk__counts .round__number {
            font-weight: 200;
            color: #fff;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 85px;
            border-radius: 44px;
        }

        .subject__box .chunk__item .chunk__counts .success__box {
            background: #D1D1D6;
            width: 100%;
            max-width: 230px;
            text-align: center;
            justify-content: left;
            position: relative;
            height: 27px;
        }

        .subject__box .chunk__item .chunk__counts .round__number.green {
            background: #0FB800;
        }

        .subject__box .chunk__item .chunk__counts .round__number.white {
            background: #fff;
            color: #14213D;
        }

        .subject__box .chunk__item .chunk__counts .round__number.red {
            background: #DA5742;
        }

        .subject__box .chunk__item .chunk__counts .round__number.inactive {
            background: #D1D1D6;
        }

        .subject__box .chunk__item .chunk__counts .success__box .text {
            width: 100%;
            text-align: center;
            position: absolute;
        }

        .subject__box .chunk__item .chunk__counts .success__box .success__rate {
            background: #0FB800;
            border-radius: 44px;
            height: 27px;
        }

    .subject__box .chunk__item.locked .chunk__counts .success__box .success__rate {
        background: #b0b0b7;
    }


    .subject__box .chunk__item .button__box {
        width: calc(100% - 16px);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 8px;
    }

    .user-cabinet.all__unlocked .subject__box .chunk__item.timer__chunk,
    .subject__box .chunk__item.timer__chunk {
        grid-template-columns: 100px minmax(160px, 1fr) 230px;
        background: url(/img/blue_back.png);
        background-position: center;
        background-size: cover;
        gap: 20px;
        padding: 23px 5px 23px 25px;
    }

    .subject__box .chunk__item.locked.timer__chunk {
        filter: grayscale(1);
        background: #fff;
    }

    .subject__box .chunk__item.timer__chunk .badge__box {
        filter: brightness(1.1) contrast(1.1) hue-rotate(178deg);
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .subject__box .chunk__item.timer__chunk .badge__box img {
            width: 100%;
        }

    .user-cabinet.all__unlocked .subject__box .chunk__item.timer__chunk .badge__box,
    .subject__box .chunk__item.completed.timer__chunk .badge__box {
        filter: none;
    }

    .subject__box .chunk__item.locked.timer__chunk .badge__box {
        filter: brightness(1) contrast(1) hue-rotate(178deg);
    }

    .subject__box .chunk__item.timer__chunk .stats__box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }

        .subject__box .chunk__item.timer__chunk .stats__box .chunk__name {
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            max-width: 500px;
        }

    .subject__box .chunk__item.timer__chunk .chunk__counts .round__number.inactive {
        color: #fff;
    }

    .subject__box .chunk__item.locked.timer__chunk .stats__box .chunk__name {
        color: rgb(163, 163, 163);
    }

    .subject__box .chunk__item.timer__chunk .chunk__counts .name {
        color: #fff;
    }

    .subject__box .chunk__item.locked.timer__chunk .chunk__counts .name {
        color: rgb(163, 163, 163);
    }

    .subject__box .chunk__item.timer__chunk .button__additional__box {
        display: flex;
        height: 100%;
        align-items: flex-end;
    }

/* Category driven */
.subject__box .category h2 {
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
}

.subject__box .category .header__withbutton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: #DCE3F0;
    border-radius: 11px;
    padding: 20px 15px;
    min-height: 74px;
}

    .subject__box .category .header__withbutton.locked {
        background: #ffffff52;
        color: #a3a3a3;
    }

.subject__box .header__withbutton.categorydriven {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.subject__box .header__withbutton.nochunksdriven {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.subject__box .category .header__withbutton h2 {
    font-weight: 500;
    line-height: 100%;
    width: 100%;
}

.subject__box .header__withbutton.categorydriven h2 {
    font-weight: 700;
}

.subject__box .category__statistics.locked {
    color: #a3a3a3;
}

.subject__box .category__statistics,
.category__header .category__info .info .data {
    display: flex;
    gap: 30px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

    .subject__box .category__statistics .static__blocks,
    .subject__box .category__statistics .transformed__blocks,
    .category__header .category__info .info .data .static__blocks,
    .category__header .category__info .info .data .transformed__blocks {
        display: flex;
        gap: 30px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .subject__box .category__statistics.underlined {
        border-bottom: 1px solid #000;
    }

    .category__header .category__info .info .data .stats__block,
    .subject__box .category__statistics .stats__block {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
    }

        .category__header .category__info .info .data .stats__block .name,
        .category__header .category__info .info .data .stats__block .name__fullscreen,
        .subject__box .category__statistics .stats__block .name,
        .subject__box .category__statistics .stats__block .name__fullscreen {
            font-size: 20px;
            font-weight: 200;
        }

        .category__header .category__info .info .data .stats__block .shorten__name,
        .subject__box .category__statistics .stats__block .shorten__name {
            font-size: 20px;
            font-weight: 200;
            color: #8C939F;
            display: none;
        }

        .category__header .category__info .info .data .stats__block h3,
        .subject__box .category__statistics .stats__block h3 {
            font-size: 24px;
            font-weight: 600;
        }

.subject__box .chunk__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 32px 0;
    position: relative;
}

    .subject__box .chunk__list.nopadding {
        padding: 0 0;
    }

    .subject__box .chunk__list .theme__block {
        background: #fff;
        border-radius: 11px;
        padding: 25px 10px;
        display: grid;
        grid-template-columns: 10px minmax(0, 1fr) minmax(0, 230px);
        align-items: center;
        gap: 10px;
    }

        .subject__box .chunk__list .theme__block.started {
            background: #F9EDC7;
        }

        .subject__box .chunk__list .theme__block.completed {
            background: #D5F7D2;
        }

        .subject__box .chunk__list .theme__block .row__number {
            color: #A3A3A3;
            font-size: 16px;
            font-weight: 200;
            align-self: start;
            display: flex;
            align-items: flex-start;
        }

        .subject__box .chunk__list .theme__block .name {
            font-size: 20px;
            color: var(--main-color);
            font-weight: 600;
        }

        .subject__box .chunk__list .theme__block.started .name,
        .subject__box .chunk__list .theme__block.completed .name {
            font-size: 24px;
            font-weight: 700;
        }

.category__header .button,
.subject__box .button {
    border-radius: 11px;
    width: 223px;
}

    .subject__box .button.mobile {
        display: none;
    }

    .category__header .button.big,
    .subject__box .button.big {
        font-size: 24px;
        font-weight: 500;
        padding: 5px 50px;
    }

        .subject__box .button.big.transparent {
            border: 2px solid var(--main-color);
            background: transparent;
            color: var(--main-color);
        }

            .subject__box .button.big.transparent:hover {
                background: var(--main-color);
                color: #fff;
            }

    .subject__box .button.skyblue {
        color: #fff;
        background: #0066CC;
    }

    .subject__box .button.green {
        background: #0FB800;
        background: #0FB800;
    }

    .subject__box .button.yellow {
        background: #FBBC04;
    }

    .subject__box .button.big.transparent.locked,
    .subject__box .button.locked {
        background: transparent;
        color: #D1D1D6;
        border: 2px solid #D1D1D6;
        padding: 5px 48px;
        cursor: default;
        pointer-events: none;
    }

    .subject__box .button.inactive {
        background: #D1D1D6;
        cursor: default;
        pointer-events: none;
    }

.subject__box .locker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 245, 245, 0.65);
}

.subject__box .locker__button__box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.subject__box .locker__button {
    font-weight: 700;
}

.subject__box .message {
    color: #A3A3A3;
    border-top: 2px solid #D1D1D6;
    font-size: 24px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px 0;
}

/* theory driven */

.subject__box .category .theories__list {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .subject__box .category .theories__list .theory {
        margin: 0;
        padding: 0;
    }

/* no chunks driven */

.subject__box .separator {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    padding: 10px 0px;
}

    .subject__box .separator h4 {
        color: #b3b2b2;
        font-size: 18px;
    }

    .subject__box .separator hr {
        border-color: #D1D1D6;
    }

.category__header {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .category__header h3 {
        font-size: 24px;
        letter-spacing: 0.48px;
        line-height: 34px;
    }

        .category__header h3.subj {
            text-align: center;
        }

    .category__header hr {
        border-top: 2px solid #000;
    }

    .category__header .category__info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 1fr);
        gap: 10px;
        padding: 15px 0 40px 0;
    }

        .category__header .category__info .button__box {
            display: flex;
            justify-content: flex-end;
        }

.task__button.blue:focus,
.animated__button.blue:focus,
.animated__button.light__blue:focus {
    --animated-button-color: var(--main-color);
    animation: radialButton 0.1s ease forwards;
}

.profile-page .button.light__blue {
    background: #DCE3F0;
    color: #08212D;
}

    .profile-page .button:hover.light__blue,
    .profile-page .button.light__blue.active {
        background: var(--main-color);
        color: #fff;
    }

.animated__button.blue__white:focus {
    --animated-button-color: var(--main-color);
    color: #fff !important;
    animation: radialButton 0.2s ease forwards;
}

.task__button.yellow:focus,
.animated__button.yellow:focus {
    --animated-button-color: #FBBC04;
    animation: radialButton 0.1s ease forwards;
}

.task__button.red:focus,
.animated__button.red:focus {
    --animated-button-color: #DA5742;
    animation: radialButton 0.1s ease forwards;
}

.task__button.green:focus,
.animated__button.green:focus {
    --animated-button-color: #0FB800;
    animation: radialButton 0.1s ease forwards;
}

.animated__button.yellow__to__transparent:focus {
    --animated-button-color: #FBBC04;
    animation: radialButtonToTransparent 0.1s ease forwards;
}

.animated__button.yellow__with__border:focus {
    --animated-button-color: #FBBC04;
    border-color: var(--animated-button-color);
    color: #fff;
    font-weight: 600;
    animation: radialButton 0.1s ease forwards;
}

@keyframes radialButton {
    0% {
        background: var(--animated-button-color) radial-gradient(farthest-corner at bottom, #00000045 23%, transparent 77%);
        background-size: 0% 0%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    35% {
        background: var(--animated-button-color) radial-gradient(farthest-corner at 50% 100%, #00000045 23%, transparent 77%);
        background-size: 100% 100%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    55% {
        background: var(--animated-button-color) radial-gradient(farthest-corner at 50% 70%, #00000045 23%, transparent 77%);
        background-size: 100% 100%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    75% {
        background: var(--animated-button-color) radial-gradient(circle, #00000045 70%, transparent 100%);
        background-size: 100% 100%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    99% {
        background: var(--animated-button-color) radial-gradient(circle, #00000045 100%, transparent 100%);
        background-size: 100% 100%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    100% {
        background: var(--animated-button-color) radial-gradient(farthest-corner at bottom, #00000045 23%, transparent 77%);
        background-size: 0% 0%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }
}

@keyframes radialButtonToTransparent {
    0% {
        background: transparent radial-gradient(circle, var(--animated-button-color) 100%, transparent 100%);
        background-size: 100% 100%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    1% {
        border: 1px var(--main-color) solid;
        color: var(--main-color);
    }

    35% {
        border: 1px var(--main-color) solid;
        color: var(--main-color);
        background: transparent radial-gradient(circle, var(--animated-button-color) 70%, transparent 100%);
        background-size: 100% 100%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    55% {
        border: 1px var(--main-color) solid;
        color: var(--main-color);
        background: transparent radial-gradient(farthest-corner at 50% 70%, var(--animated-button-color) 23%, transparent 77%);
        background-size: 100% 100%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    75% {
        border: 1px var(--main-color) solid;
        color: var(--main-color);
        background: transparent radial-gradient(farthest-corner at 50% 100%, var(--animated-button-color) 23%, transparent 77%);
        background-size: 100% 100%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }

    100% {
        border: 1px var(--main-color) solid;
        color: var(--main-color);
        background: transparent radial-gradient(farthest-corner at bottom, var(--animated-button-color) 23%, transparent 77%);
        background-size: 0% 0%;
        background-position: 50% 100%;
        background-repeat: no-repeat;
    }
}

.study__format__section {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Nunito";
    color: #08212D;
}

    .study__format__section h2 {
        font-size: 24px;
        text-align: center;
        letter-spacing: 0.48px;
        line-height: 33px;
        text-transform: uppercase;
        margin-top: 50px;
    }

    .study__format__section p {
        font-size: 16px;
        text-align: center;
        font-weight: 500;
        line-height: 33px;
        letter-spacing: 0.48px;
    }

    .study__format__section .buttons__box {
        display: flex;
        gap: 20px;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        padding: 50px 0;
    }

        .study__format__section .buttons__box .option__block:hover {
            background: url(/img/package/Maskgroup.png) #00415F;
            background-repeat: no-repeat;
            background-size: cover;
            padding: 35px 20px;
            margin-top: 0px;
            margin-bottom: 0px;
            max-width: 486px;
            min-height: 425px;
        }

        .study__format__section .buttons__box .option__block {
            max-width: 466px;
            background: #DCE3F0;
            width: 100%;
            border-radius: 30px;
            padding: 65px 30px;
            display: flex;
            flex-direction: column;
            margin-top: 15px;
            margin-bottom: 50px;
            cursor: pointer;
        }

            .study__format__section .buttons__box .option__block .small__text {
                font-size: 13px;
                line-height: 87.5%;
                font-weight: 200;
                text-align: left;
            }

            .study__format__section .buttons__box .option__block:hover .small__text {
                color: #fff;
            }

            .study__format__section .buttons__box .option__block h3 {
                font-size: 30px;
                font-weight: 900;
                letter-spacing: 0.5px;
            }

            .study__format__section .buttons__box .option__block:hover h3 {
                color: #fff;
                font-size: 40px;
            }

            .study__format__section .buttons__box .option__block .img__box {
                width: 100%;
                height: 250px;
                margin-top: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .study__format__section .buttons__box .option__block:hover .img__box {
                height: 200px;
            }

            .study__format__section .buttons__box .option__block .img__box img {
                object-fit: contain;
                width: 100%;
                height: 100%;
            }

            .study__format__section .buttons__box .option__block .hover__block {
                display: none;
                flex-direction: column;
            }

            .study__format__section .buttons__box .option__block:hover .hover__block {
                display: flex;
                color: #fff;
            }

            .study__format__section .buttons__box .option__block .hover__block p,
            .study__format__section .buttons__box .option__block .hover__block ul {
                font-size: 20px;
                font-weight: 100;
                line-height: 87.5%;
                text-align: left;
                margin: 10px 0px;
            }

            .study__format__section .buttons__box .option__block .hover__block ul {
                list-style-type: none;
            }

                .study__format__section .buttons__box .option__block .hover__block ul li {
                    display: grid;
                    gap: 8px;
                    align-items: flex-start;
                    grid-template-columns: 9px 1fr;
                }

                    .study__format__section .buttons__box .option__block .hover__block ul li .dot {
                        width: 9px;
                        height: 9px;
                        background: #0FB800;
                        border-radius: 50%;
                        margin-top: 5px;
                    }

                        .study__format__section .buttons__box .option__block .hover__block ul li .dot.orange {
                            background: #FF7536;
                        }

.subjects__menu__container {
}

    .subjects__menu__container .select__box {
        display: none;
        position: relative;
    }

        .subjects__menu__container .select__box.active {
            display: block;
        }

        .subjects__menu__container .select__box .selected {
            height: 64px;
            background: #E6D2B2;
            color: #08212D;
            border-radius: var(--content-border-radius);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            padding: 0 25px;
            gap: 5px;
            cursor: pointer;
        }

            .subjects__menu__container .select__box .selected.open {
                background: #fff;
            }

            .subjects__menu__container .select__box .selected .text__box {
                text-overflow: ellipsis;
                overflow: hidden;
                width: 225px;
                white-space: nowrap;
            }

            .subjects__menu__container .select__box .selected i {
                font-size: 24px;
                margin-top: -3px;
                transition: all 0.3s;
            }

            .subjects__menu__container .select__box .selected.open i {
                font-size: 24px;
                margin-top: -3px;
                transform: rotate(-90deg);
            }

        .subjects__menu__container .select__box .select__list {
            position: absolute;
            background: #fff;
            border-radius: var(--content-border-radius);
            list-style-type: none;
            color: #000;
            font-size: 16px;
            font-weight: 300;
            max-height: 400px;
            overflow: hidden;
            overflow-y: auto;
            top: 72px;
            height: 0;
            opacity: 0;
            transition: all 0.3s;
            width: 100%;
        }

            .subjects__menu__container .select__box .select__list::-webkit-scrollbar {
                width: 3px;
            }

            .subjects__menu__container .select__box .select__list::-webkit-scrollbar-thumb {
                background: var(--main-color);
                border-radius: 3px;
            }

            .subjects__menu__container .select__box .select__list::-webkit-scrollbar-track {
                background: #fff;
            }

            .subjects__menu__container .select__box .select__list.open {
                height: 400px;
                opacity: 1;
                z-index: 1;
            }

            .subjects__menu__container .select__box .select__list .category__option {
                display: flex;
                align-items: center;
                padding: 0 10px;
                cursor: pointer;
            }

                .subjects__menu__container .select__box .select__list .category__option .box {
                    min-height: 32px;
                    padding: 15px;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px #D1D1D6 solid;
                    width: 100%;
                }

                .subjects__menu__container .select__box .select__list .category__option.last .box {
                    border-bottom: none;
                }

                .subjects__menu__container .select__box .select__list .category__option:hover {
                    background: #F5F5F5;
                }

                .subjects__menu__container .select__box .select__list .category__option.active {
                    background: #F5F5F5;
                    font-weight: bold;
                }

.global__rating__container {
    display: flex;
    flex-direction: column;
}

    .global__rating__container .title {
        margin: 0;
        line-height: 24px;
    }

    .global__rating__container .light_h {
        font-size: 20px;
        font-weight: 200;
        margin: 0 0 15px 0;
        line-height: 20px;
    }

    .global__rating__container .rating__box {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

        .global__rating__container .rating__box .box {
            height: 30px;
            display: grid;
            grid-template-columns: 65px 1fr 95px;
            align-items: center;
            margin: 0px 5px;
            background: #fff;
            border-radius: 7px;
            color: #14213D;
            font-size: 14px;
        }

            .global__rating__container .rating__box .box.active {
                background: linear-gradient(90deg, rgba(12,40,54,1) 0%, rgba(95,203,254,1) 100%);
                height: 54px;
                margin: 0;
                color: #fff;
                grid-template-columns: 70px 1fr 100px;
            }

            .global__rating__container .rating__box .box .rate {
                padding: 0 10px;
                font-size: 15px;
                font-weight: bold;
            }

            .global__rating__container .rating__box .box .name {
                width: 125px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .global__rating__container .rating__box .box.active .rate {
                font-size: 20px;
            }

            .global__rating__container .rating__box .box.active .name {
                font-weight: 500;
            }

            .global__rating__container .rating__box .box.active .mark {
                font-weight: 500;
            }

.tests__progress {
    background: linear-gradient(90deg, rgba(12, 40, 54, 1) 0%, rgba(95, 203, 254, 1) 100%);
    padding: 15px 20px;
    color: #fff;
    border-radius: 11px;
}

    .tests__progress h5 {
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.4px;
    }

    .tests__progress p {
        font-size: 14px;
        font-weight: 200;
        line-height: 15px;
        letter-spacing: 0.4px;
    }

    .tests__progress .progress__bar__box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tests__progress .progress__bar {
        height: 9px;
        background: #F0F7FF;
        border-radius: 44px;
        margin-top: 50px;
        position: relative;
        width: 90%;
    }

        .tests__progress .progress__bar .progress__line {
            background: #FBBC04;
            height: 9px;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 44px;
        }

        .tests__progress .progress__bar .progress__number {
            position: absolute;
            font-size: 16px;
            font-weight: 900;
            color: var(--main-color);
            background: #fff;
            padding: 4px 15px;
            border-radius: 20px;
            bottom: 15px;
            transform: rotate(-5deg);
        }

            .tests__progress .progress__bar .progress__number::after {
                content: "";
                position: absolute;
                bottom: -11px;
                left: 35%;
                border-width: 14px 9px 0 10px;
                border-style: solid;
                border-radius: 0px;
                border-color: #fff transparent transparent transparent;
                transform: rotate(-1deg);
            }

.email__verification {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: 90px auto;
}

    .email__verification h1 {
        color: #14213D;
        font-size: 64px;
        font-family: 'Nunito';
        font-weight: 900;
        text-align: center;
    }

    .email__verification p {
        color: #14213D;
        font-size: 21px;
        margin-top: 20px;
        text-align: center;
    }

    .email__verification .img__box {
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -60px;
    }

        .email__verification .img__box img {
            width: 100%;
        }

.personalisation__start {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: 50px auto;
    background-image: url(img/personalisation/hatbookbackground.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 18% 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-x: hidden;
    padding-bottom: 30px;
}

    .personalisation__start.results {
        margin: auto;
        padding-top: 20px;
    }

    .personalisation__start .blocks {
        display: grid;
        justify-content: center;
        gap: 20px;
        grid-template-columns: minmax(0, 1fr) minmax(755px, 1fr);
        max-width: var(--max-width);
        width: 100%;
    }

        .personalisation__start .blocks .nobase {
            display: flex;
            justify-content: center;
        }

        .personalisation__start .blocks .standard__plan__block,
        .personalisation__start .blocks .personalisation__block {
            width: 367px;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .personalisation__start .blocks .start__block {
            padding: 50px 0 0 100px;
            color: #14213D;
        }

            .personalisation__start .blocks .start__block h1 {
                font-size: 60px;
                font-weight: 900;
                line-height: 88%;
            }

            .personalisation__start .blocks .start__block .text {
                font-size: 21px;
                margin: 30px 0;
            }

            .personalisation__start .blocks .start__block .demo__button a {
                min-height: 90px;
                background: #0066CC;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 36px;
                font-weight: 600;
                border-radius: 24px;
                max-width: 466px;
            }

            .personalisation__start .blocks .start__block .img__box {
                display: flex;
                padding: 30px 0;
                justify-content: flex-start;
                align-items: center;
            }

                .personalisation__start .blocks .start__block .img__box img {
                    max-width: 80%;
                }

        .personalisation__start .blocks .personalisation__block .package__box {
            background: #fff radial-gradient(#F9EDC7, transparent);
            background-position: 100% 0%;
            background-size: 100% 88%;
            background-repeat: no-repeat;
            height: 100%;
        }

        .personalisation__start .blocks .package__box {
            max-width: 315px;
        }

            .package__box.personalisated:hover,
            .personalisation__start .blocks .package__box:hover {
                background: #FFF;
            }

        .package__box.personalisated,
        .package__box.personalisated:hover,
        .personalisation__start .blocks .personalisation__block .package__box:hover {
            background: #fff radial-gradient(#F9EDC7, transparent);
            background-position: 100% 0%;
            background-size: 100% 88%;
            background-repeat: no-repeat;
        }

        .personalisation__start .blocks .personalisation__block .package__box h3 {
            line-height: 80%;
        }

        .personalisation__start .blocks .package__box h3 {
            text-transform: lowercase;
        }

        .personalisation__start .blocks .package__description {
            color: #08212D;
            font-size: 14px;
            font-weight: 200;
            line-height: 114%;
            margin: 20px 0;
        }

        .package__box.personalisated .package__button,
        .personalisation__start .blocks .personalisation__block .package__button {
            background: #0FB800;
            font-weight: 500;
        }

        .package__box.personalisated .line i,
        .personalisation__start .blocks .personalisation__block .line i {
            background: #0FB800;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-style: normal;
            font-size: 14px;
            font-weight: 600;
        }

    .personalisation__start .slider__box {
        display: block;
        width: 100%;
        padding-top: 70px;
    }

    .personalisation__start .swiper {
        overflow: visible;
    }

    .personalisation__start .swiper-wrapper {
        display: grid;
        grid-template-columns: 367px 367px;
        gap: 20px;
    }

    .personalisation__start .swiper-slide {
        width: fit-content !important;
        transition: margin 0.3s;
    }

.package__box .img__box {
    display: flex;
    padding: 30px 0;
    justify-content: flex-start;
    align-items: center;
}

    .package__box .img__box img {
        max-width: 100%;
    }

.personalisation__exam {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: auto;
    padding-bottom: 100px;
    background: radial-gradient(#bed5ed 0%, #F5F5F5 35%), radial-gradient(#ffeeb8 0%, #F5F5F5 35%);
    background-position: 39% 39%, -16% 167%;
    background-size: 43% 45%, 55% 73%;
    background-repeat: no-repeat;
}

    .personalisation__exam .intro {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 100px 0;
        gap: 10px;
        color: #14213D;
    }

        .personalisation__exam .intro h2 {
            font-size: 64px;
            margin: 0;
            font-weight: 900;
            text-align: center;
        }

        .personalisation__exam .intro p {
            margin: 0;
            font-size: 21px;
        }

        .personalisation__exam .intro .img__box {
            display: flex;
            padding: 30px 0;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 10px;
        }

            .personalisation__exam .intro .img__box img {
                max-width: 100%;
            }

        .personalisation__exam .intro .button {
            background: #00415F;
            width: 100%;
            max-width: 580px;
            min-height: 90px;
            border-radius: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 36px;
            cursor: pointer;
        }

.user-task .notimelimit__exam__name {
    font-size: 64px;
    font-weight: 800;
    color: #14213D;
    text-align: center;
    margin: 20px 0;
}

.personalisation__exam .user-task {
    position: relative;
}

.steps__bar {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 200px 250px repeat(2, 200px);
    margin-top: 15px;
}

    .steps__bar .bar__item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 5px 0;
        border-bottom: 2px solid;
        border-color: #D1D1D6;
        font-size: 24px;
        color: #A3A3A3;
    }

        .steps__bar .bar__item .step__ball {
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            background: #D1D1D6;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .steps__bar .bar__item.active {
            color: var(--main-color);
            font-weight: 700;
            border-color: var(--main-color);
        }

            .steps__bar .bar__item.active .step__ball {
                background: var(--main-color);
            }

        .steps__bar .bar__item.done {
            color: #0FB800;
            border-color: #0FB800;
        }

            .steps__bar .bar__item.done .step__ball {
                background: #0FB800;
            }

.personalisation__quiz {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding-bottom: 100px;
    background: radial-gradient(#bed5ed 0%, #F5F5F5 35%), radial-gradient(#ffeeb8 0%, #F5F5F5 35%);
    background-position: 39% 39%, -16% 167%;
    background-size: 43% 45%, 55% 73%;
    background-repeat: no-repeat;
    overflow-x: hidden;
}

    .personalisation__quiz .text__block {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #14213D;
    }

        .personalisation__quiz .text__block h2 {
            font-size: 64px;
            font-weight: 700;
            text-align: center;
        }

        .personalisation__quiz .text__block .subtitle {
            font-size: 24px;
            font-weight: 700;
            text-align: center;
        }

        .personalisation__quiz .text__block p {
            font-size: 24px;
            text-align: center;
        }

    .personalisation__quiz .quiz__block {
        width: 100%;
        max-width: 700px;
        min-height: 600px;
    }

.custom__select__container {
    position: relative;
    width: 100%;
}

.custom__select__input {
    width: 100%;
    height: 90px;
    border: none;
    outline: none;
    background: #EAF0F7;
    border-radius: 30px;
    padding: 20px 45px;
    font-size: 24px;
    margin: 0;
    cursor: pointer;
}

    .custom__select__input.is__small {
        height: 64px;
        font-size: 18px;
        border-radius: 24px;
    }

.custom__select__arrow {
    display: flex;
    position: absolute;
    top: 20px;
    right: 10px;
    font-size: 38px;
    transition: 0.3s all;
    cursor: pointer;
}

    .custom__select__arrow.is__small {
        top: 8px;
    }

    .custom__select__arrow.open {
        transform: rotate(90deg);
    }

.custom__select__options {
    position: absolute;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    background: #EAF0F7;
    display: none;
    z-index: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    top: calc(100% + 10px);
    border-radius: 24px;
    border: none;
}

    .custom__select__options::-webkit-scrollbar {
        width: 0px;
    }

    .custom__select__options::-webkit-scrollbar-track {
        width: 0;
    }

    .custom__select__options::-webkit-scrollbar-thumb {
        width: 0;
    }

.custom__select__option {
    padding: 20px 40px 20px 40px;
    cursor: pointer;
    width: calc(100% - 80px);
    color: #404049;
    font-size: 22px;
    align-items: center;
    justify-content: flex-start;
    line-height: 24px;
}

    .custom__select__option:hover {
        background: #D5F7D2;
    }

.custom__select__no-results {
    padding: 20px 40px 50px 40px;
    width: calc(100% - 80px);
    color: #404049;
    font-size: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
    max-height: 0;
}

.section__smallblocklist__template {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

    .section__smallblocklist__template .blocks__container {
        display: grid;
        align-items: stretch;
        gap: 17px;
        grid-template-columns: repeat(3, minmax(0, 380px));
        justify-items: center;
        justify-content: center;
    }

        .section__smallblocklist__template .blocks__container .block {
            background: #fff;
            border-radius: 30px;
            padding: 25px;
            display: grid;
            grid-template-rows: minmax(0, 1fr) minmax(30%, max-content);
            max-width: calc(380px - 50px);
        }

            .section__smallblocklist__template .blocks__container .block .top {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
            }

                .section__smallblocklist__template .blocks__container .block .top .texts {
                    color: #08212D;
                }

                    .section__smallblocklist__template .blocks__container .block .top .texts h4 {
                        font-size: 32px;
                        font-weight: 900;
                        line-height: 94%;
                    }

                    .section__smallblocklist__template .blocks__container .block .top .texts h2 {
                        font-size: 90px;
                        font-weight: 900;
                        line-height: 100%;
                    }

                        .section__smallblocklist__template .blocks__container .block .top .texts h2 span {
                            font-size: 48px;
                        }

                .section__smallblocklist__template .blocks__container .block .top .img__box {
                    max-width: 160px;
                    min-width: 100px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    height: 100%;
                }

                    .section__smallblocklist__template .blocks__container .block .top .img__box img {
                        max-width: 100%;
                    }

            .section__smallblocklist__template .blocks__container .block .bottom {
                font-size: 18px;
                line-height: 94%;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                height: 100%;
            }

.section__stackingcards__template {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

    .section__stackingcards__template .blocks__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

        .section__stackingcards__template .blocks__container .blocks {
            display: grid;
            grid-template-columns: 1fr;
            align-items: stretch;
            gap: 20px;
            width: 100%;
            max-width: 1240px;
        }

        .section__stackingcards__template .blocks__container .card {
            background: #EAF0F7 url(img/landing/bluerightback.png);
            width: 100%;
            max-width: calc(var(--max-width) - 100px);
            border-radius: 38px;
            padding: 50px;
            background-repeat: no-repeat;
            height: 555px;
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            justify-content: space-between;
            gap: 20px;
            border: 1px #08212D solid;
        }

            .section__stackingcards__template .blocks__container .card.yellow {
                background: #F8F7F1 url(img/landing/yellowrightback.png);
                background-repeat: no-repeat;
            }

            .section__stackingcards__template .blocks__container .card.bottom__right {
                background: #EAF0F7 url(img/landing/bluebottomrightback.png);
                grid-template-columns: 1fr;
                grid-template-rows: 1fr;
                background-repeat: no-repeat;
            }

                .section__stackingcards__template .blocks__container .card.bottom__right.yellow {
                    background: #F8F7F1 url(img/landing/yellowrightback.png);
                    grid-template-columns: 1fr;
                    grid-template-rows: 1fr;
                    background-repeat: no-repeat;
                }

            .section__stackingcards__template .blocks__container .card.bottom__center {
                background: #EAF0F7 url(img/landing/yellowbottomcenterback.png);
                grid-template-columns: 1fr;
                grid-template-rows: 1fr;
                background-repeat: no-repeat;
            }

                .section__stackingcards__template .blocks__container .card.bottom__center.yellow {
                    background: #F8F7F1 url(img/landing/yellowbottomcenterback.png);
                    grid-template-columns: 1fr;
                    grid-template-rows: 1fr;
                    background-repeat: no-repeat;
                }

            .section__stackingcards__template .blocks__container .card .text {
                color: #08212D;
                height: min-content;
                position: relative;
            }

                .section__stackingcards__template .blocks__container .card .text::after {
                    content: url('img/landing/bluearrow.png');
                    position: absolute;
                    top: 100%;
                    right: 0;
                }

            .section__stackingcards__template .blocks__container .card.yellow .text::after {
                content: url('img/landing/yellowarrow.png');
                position: absolute;
                right: 50%;
            }

            .section__stackingcards__template .blocks__container .card.bottom__right .text::after {
                content: url('img/landing/bottomrightarrow.png');
                position: absolute;
                right: 80%;
            }

            .section__stackingcards__template .blocks__container .card.bottom__right.yellow .text::after {
                content: url('img/landing/yellowbottomrightarrow.png');
                position: absolute;
                right: 66%;
            }

            .section__stackingcards__template .blocks__container .card.bottom__center .text::after {
                content: url('img/landing/bottomcenterarrow.png');
                position: absolute;
                top: 50%;
                right: 0;
            }

            .section__stackingcards__template .blocks__container .card.bottom__center .text,
            .section__stackingcards__template .blocks__container .card.bottom__right .text {
                padding-top: 0;
                height: min-content;
                position: relative;
            }

            .section__stackingcards__template .blocks__container .card .text p {
                font-size: 40px;
                font-weight: 300;
                line-height: 110%;
            }

            .section__stackingcards__template .blocks__container .card .img__box {
                display: flex;
                justify-content: center;
                max-width: 100%;
                align-items: center;
                max-height: 450px;
            }

            .section__stackingcards__template .blocks__container .card.bottom__right .img__box,
            .section__stackingcards__template .blocks__container .card.bottom__center .img__box {
                max-height: 225px;
            }

            .section__stackingcards__template .blocks__container .card .img__box img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .section__stackingcards__template .blocks__container .card.bottom__right .img__box img {
                object-position: right;
            }

            .section__stackingcards__template .blocks__container .card .circle__block {
                position: absolute;
                bottom: 17px;
                left: 17px;
                width: 76px;
                height: 76px;
                border: 1px solid;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 36px;
                font-weight: 200;
            }

                .section__stackingcards__template .blocks__container .card .circle__block .circle__progress {
                    mask: radial-gradient(circle, transparent 65%, black 59%);
                    position: absolute;
                    width: 76px;
                    height: 76px;
                    border: 1px solid;
                    border-radius: 50%;
                }

.our__other__products {
}

    .our__other__products .projects {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(290px, 310px));
        gap: 20px;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        margin: 50px 0;
        justify-items: center;
    }

        .our__other__products .projects a {
            color: var(--maim-text-color);
            text-decoration: none;
            width: 100%;
            height: 100%;
        }

        .our__other__products .projects .project__block {
            background: #DCE3F0;
            padding: 20px;
            border-radius: 30px;
            width: calc(100% - 40px);
            height: calc(100% - 40px);
            display: grid;
            gap: 10px;
            grid-template-rows: 30px 1fr;
            border: 2px transparent solid;
            transition: all 0.2s;
        }

            .our__other__products .projects .project__block:hover {
                /*background: #00415F linear-gradient(83deg, rgb(255 255 255 / 31%) 2%, rgba(230, 210, 178, 0) 38%);*/
                background: #00415F radial-gradient(circle, rgb(255 255 255 / 14%) 21%, rgb(255 255 255 / 0%) 64%);
                background-size: 82% 80%;
                background-position: -100% 94%;
                background-repeat: no-repeat;
                color: #fff;
                border: 2px #e6d2b2b8 solid;
                transform: scale(1.05);
            }

            .our__other__products .projects .project__block .head {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
            }

                .our__other__products .projects .project__block .head .logo {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                    .our__other__products .projects .project__block .head .logo img {
                        max-width: 100%;
                        max-height: 100%;
                    }

                .our__other__products .projects .project__block .head .button {
                    border-radius: 13px;
                    border: 1px #08212D solid;
                    padding: 3px 20px;
                    font-size: 13px;
                }

            .our__other__products .projects .project__block:hover .head .button {
                background: #E6D2B2;
                border-color: #E6D2B2;
                color: var(--maim-text-color);
            }

            .our__other__products .projects .project__block .box {
                display: grid;
                grid-template-rows: 1fr 1fr 0.7fr;
            }

            .our__other__products .projects .project__block .name {
                display: grid;
                grid-template-rows: 1fr 1fr;
                margin-bottom: 20px;
            }

                .our__other__products .projects .project__block .name h3 {
                    font-size: 30px;
                    font-weight: 900;
                    margin: 0;
                    display: flex;
                    color: #08212D;
                }

            .our__other__products .projects .project__block:hover .name h3 {
                color: #fff;
            }

            .our__other__products .projects .project__block .name h3 i {
                font-size: 24px;
            }

            .our__other__products .projects .project__block .name .description {
                margin: 0;
                line-height: 16px;
                font-weight: 300;
                padding: 0;
                color: #08212D;
                font-size: 16px;
            }

            .our__other__products .projects .project__block:hover .name .description {
                font-weight: 200;
                color: #fff;
            }

            .our__other__products .projects .project__block .text p,
            .our__other__products .projects .project__block .text {
                font-weight: 700;
                line-height: 18px;
                color: #08212D;
            }

            .our__other__products .projects .project__block:hover .text p,
            .our__other__products .projects .project__block:hover .text {
                color: #fff;
            }

            .our__other__products .projects .project__block .after__text {
                font-size: 13px;
                font-weight: 300;
                line-height: 13px;
                color: rgba(8, 33, 45, 0.5);
            }

            .our__other__products .projects .project__block:hover .after__text {
                color: rgba(255, 255, 255, 0.5);
            }


.webinar__registrationfull__template {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    padding-top: 50px;
    padding-bottom: 50px;
}

    .webinar__registrationfull__template .text__block {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

        .webinar__registrationfull__template .text__block h3 {
            font-size: 24px;
            font-weight: 700;
            line-height: 28px;
        }

        .webinar__registrationfull__template .text__block h2 {
            font-size: 42px;
            font-weight: 800;
        }

        .webinar__registrationfull__template .text__block h4 {
            font-weight: 600;
            font-size: 20px;
        }

    .webinar__registrationfull__template .registration__form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .webinar__registrationfull__template .registration__form .header__container {
            display: grid;
            grid-template-columns: minmax(80px, 200px) 1fr;
            align-items: start;
            gap: 10px;
        }

            .webinar__registrationfull__template .registration__form .header__container .image__container {
                max-width: 200px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .webinar__registrationfull__template .registration__form .header__container .image__container img {
                    max-width: 100%;
                    object-fit: contain;
                }

            .webinar__registrationfull__template .registration__form .header__container .timer__container {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: center;
            }

                .webinar__registrationfull__template .registration__form .header__container .timer__container .registration__title {
                    color: var(--main-color);
                    font-size: 36px;
                    text-align: right;
                    margin-bottom: 24px;
                }

        .webinar__registrationfull__template .registration__form .form__box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 15px;
        }

            .webinar__registration__template .registration__form .form__box .email__validation__failed,
            .webinar__registrationfull__template .registration__form .form__box .email__validation__failed {
                width: 100%;
                text-align: start;
                font-size: 12px;
                color: red;
                margin-left: 5px;
            }

            .webinar__registration__template .registration__form .form__box .registration__input,
            .webinar__registrationfull__template .registration__form .form__box .registration__input {
                background: #EAF0F7;
                min-height: 90px;
                font-size: 24px;
                line-height: 33px;
                position: inherit;
                padding-top: 20px;
                border: none;
                border-radius: 24px;
                margin: 0;
                padding-left: 40px;
                outline: none;
                margin-bottom: 15px;
            }

            .webinar__registration__template .registration__form .form__box .registration__button,
            .webinar__registrationfull__template .registration__form .form__box .registration__button {
                width: 100%;
                cursor: pointer;
            }

        .webinar__registration__template .registration__form .success__registration,
        .webinar__registration__template .registration__form .failed__registration,
        .webinar__registrationfull__template .registration__form .success__registration,
        .webinar__registrationfull__template .registration__form .failed__registration {
            color: var(--main-color);
            text-align: center;
            margin-top: 10px;
        }

.round__img__withtext__template {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 50px;
    padding-bottom: 50px;
}

    .round__img__withtext__template .blocks__contsiner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px;
    }

        .round__img__withtext__template .blocks__contsiner .block__box {
            display: grid;
            grid-template-columns: 150px minmax(0, 1fr);
            gap: 40px;
        }

            .round__img__withtext__template .blocks__contsiner .block__box .img__box {
                width: 150px;
                height: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                overflow: hidden;
            }

                .round__img__withtext__template .blocks__contsiner .block__box .img__box img {
                    object-fit: cover;
                    width: 150px;
                    height: 150px;
                }

            .round__img__withtext__template .blocks__contsiner .block__box .texts__box {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

                .round__img__withtext__template .blocks__contsiner .block__box .texts__box h5 {
                    font-weight: 600;
                    font-size: 18px;
                }

.webinar__registration__template {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

    .webinar__registration__template .registration__form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 600px;
        width: 100%;
    }

        .webinar__registration__template .registration__form .form__box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

            .webinar__registration__template .registration__form .form__box .timer__container {
                display: grid;
                gap: 20px;
                grid-template-columns: 1fr minmax(0, 250px);
                width: 100%;
            }

            .webinar__registration__template .registration__form .form__box .registration__button {
                font-size: 30px;
            }

        .webinar__registration__template .registration__form .success__registration,
        .webinar__registration__template .registration__form .failed__registration {
            font-size: 32px;
        }

.tip__overlay__back {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background: transparent;
    z-index: 10;
}

.tips__overlay {
    display: none;
    position: fixed;
    border: 1px solid #0FB800;
    border-radius: 20px;
    background: transparent;
    z-index: 201;
}

.tip__content__block {
    position: absolute;
    background: #FFF;
    border-radius: 20px;
    padding: 20px 20px 15px 20px;
    color: #08212D;
    width: max-content;
    max-width: 327px;
    max-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .tip__content__block.top::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 20%;
        transform: translateX(-20%);
        border: 15px solid transparent;
        border-top-color: #FFF;
    }

    .tip__content__block.bottom::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 20%;
        transform: translateX(-20%);
        border: 15px solid transparent;
        border-bottom-color: #FFF;
    }

    .tip__content__block.top.right__align::after,
    .tip__content__block.bottom.right__align::after {
        left: 80%;
    }

    .tip__content__block.left::after {
        content: "";
        position: absolute;
        left: 100%;
        top: 20%;
        transform: translateY(-20%);
        border: 15px solid transparent;
        border-left-color: #FFF;
    }

    .tip__content__block.right::after {
        content: "";
        position: absolute;
        right: 100%;
        top: 20%;
        transform: translateY(-20%);
        border: 15px solid transparent;
        border-right-color: #FFF;
    }


.tip__info__block {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

    .tip__info__block .tip__calc__block {
        font-size: 24px;
        font-weight: 900;
    }

.tip__title__block {
    font-size: 20px;
    font-weight: 700;
}

.tip__text__block {
    font-size: 15px;
    max-height: 77px;
    overflow-y: auto;
}

.tip__button__box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .tip__button__box button {
        color: #fff;
        border: none;
        border-radius: 11px;
        padding: 16px 40px;
        font-size: 15px;
        font-weight: 900;
        text-align: center;
        cursor: pointer;
    }

.next__tip__button {
    background: #0FB800;
}

.close__tip__button {
    background: #DA5742;
}

.video__with__text__template {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}

    .video__with__text__template .template__container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 20px;
        align-items: center;
    }

        .video__with__text__template .template__container .top__text {
            grid-column: 2;
            grid-row: 1;
            background: #DCE3F0;
            font-size: 40px;
            font-weight: 800;
            border-radius: 30px;
            padding: 20px 50px;
            height: fit-content;
        }

        .video__with__text__template .template__container .video__container {
            grid-column: 1;
            grid-row: 1 / span 2;
            max-height: 480px;
            overflow: hidden;
            border-radius: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .video__with__text__template .template__container .main__text {
            grid-column: 2;
            grid-row: 2;
            background: #FFFFFF;
            padding: 40px 30px;
            border-radius: 30px;
            font-size: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

.text__block__with__groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}

    .text__block__with__groups .block__container {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 20px;
    }

        .text__block__with__groups .block__container .main__block {
            background: #fff;
            border-radius: 30px;
            padding: 30px;
            font-size: 16px;
        }

            .text__block__with__groups .block__container .main__block .text-big {
                font-size: 24px;
                font-weight: 800;
            }

            .text__block__with__groups .block__container .main__block ul {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .text__block__with__groups .block__container .main__block li {
                margin-left: 20px;
            }

        .text__block__with__groups .block__container .groups {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

            .text__block__with__groups .block__container .groups .group__block {
                background: #DCE3F0;
                padding: 15px;
                border-radius: 30px;
                display: grid;
                grid-template-columns: 1fr 160px;
            }

                .text__block__with__groups .block__container .groups .group__block .left {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    color: #08212D;
                    padding: 25px 0;
                }

                    .text__block__with__groups .block__container .groups .group__block .left h4 {
                        font-size: 30px;
                        font-weight: 900;
                        margin: 0 0 15px 0;
                    }

                    .text__block__with__groups .block__container .groups .group__block .left .text {
                        font-size: 16px;
                        font-weight: 600;
                    }

                    .text__block__with__groups .block__container .groups .group__block .left .small__text {
                        font-size: 12px;
                    }

                .text__block__with__groups .block__container .groups .group__block .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: flex-end;
                    gap: 20px;
                }

                    .text__block__with__groups .block__container .groups .group__block .right .label__text {
                        border: 1px #08212D solid;
                        border-radius: 13px;
                        padding: 5px 10px;
                        font-size: 12px;
                    }

                    .text__block__with__groups .block__container .groups .group__block .right a {
                        width: 100%;
                    }

                    .text__block__with__groups .block__container .groups .group__block .right .button {
                        background: var(--main-color);
                        color: #fff;
                        border-radius: 24px;
                        padding: 10px 20px;
                        width: calc(100% - 40px);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 20px;
                        font-weight: 700;
                        cursor: pointer;
                    }

.with__variable__button__block {
    padding-top: 40px;
    padding-bottom: 40px;
}

    .with__variable__button__block .layout {
        display: grid;
        width: 100%;
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: 1fr minmax(60px, 80px);
        gap: 20px;
        box-sizing: border-box;
    }

        .with__variable__button__block .layout .main__block {
            grid-column: 1 / 3;
            grid-row: 1 / 2;
            background-color: #DCE3F0;
            border-radius: 30px;
            padding: 50px 45px 15px 45px;
            box-sizing: border-box;
            z-index: 1;
        }

        .with__variable__button__block .layout .main__bottom__extension {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
            background-color: #DCE3F0;
            border-radius: 30px 0px 30px 30px;
            z-index: 0;
            position: relative;
        }

            .with__variable__button__block .layout .main__bottom__extension::before {
                content: '';
                position: absolute;
                width: 30px;
                height: 30px;
                bottom: 70px;
                right: -30px;
                background-color: #DCE3F0;
                z-index: 2;
                clip-path: path("M -1 0 L 30 0 Q 2 2 -1 30 Z");
            }

        .with__variable__button__block .layout .main__block h3 {
            font-size: 48px;
            font-weight: 900;
            padding-bottom: 20px;
            background-image: url(/img/landing/mess.png);
            background-repeat: no-repeat;
            background-position: 25% 0%;
            max-width: 1140px;
            background-size: auto;
        }

        .with__variable__button__block .layout .main__block .main__text {
            font-size: 24px;
            background-image: url(/img/landing/curved_lines.png);
            background-repeat: no-repeat;
            background-position: 25% 25px;
            max-width: 1140px;
            padding: 10px 0;
            background-size: inherit;
        }

        .with__variable__button__block .layout .button__block {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
            background-color: var(--main-color);
            color: #F5F5F5;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 24px;
            white-space: nowrap;
            font-size: 24px;
            cursor: pointer;
        }

.streak__container {
    background: #fff;
    border-radius: 11px;
    padding: 19px;
}

    .streak__container .header {
        display: flex;
        gap: 5px;
        align-items: center;
    }

        .streak__container .header .fire {
            width: 22px;
            height: 30px;
            margin-top: -3px;
        }

        .streak__container .header i {
            color: #999999;
            font-size: 18px;
        }

    .streak__container h3 {
        color: #14213D;
        font-size: 22px;
        font-weight: 900;
    }

        .streak__container h3 i {
            color: #0FB800;
        }

    .streak__container p {
        font-size: 10px;
        color: #08212D;
        font-weight: 500;
    }

    .streak__container .current__week {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
    }

        .streak__container .current__week .streak__day {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

            .streak__container .current__week .streak__day .circle {
                width: 27px;
                height: 27px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #D1D1D6;
                color: #A3A3A3;
            }

            .streak__container .current__week .streak__day .label {
                font-size: 12px;
                color: #A3A3A3;
                font-weight: 500;
            }

            .streak__container .current__week .streak__day.completed .circle {
                background: #D5F7D2;
                color: #0FB800;
            }

            .streak__container .current__week .streak__day.missed .circle {
                background: #FCDDD8;
                color: #DA5742;
            }

            .streak__container .current__week .streak__day.completed .label,
            .streak__container .current__week .streak__day.missed .label {
                color: #08212D;
            }

            .streak__container .current__week .streak__day.today .circle {
                color: #00415F;
                border: 1.66px solid #00415F;
                margin-top: -1px;
            }

            .streak__container .current__week .streak__day.today .label {
                color: #00415F;
                font-weight: 900;
                margin-top: -1px;
            }

.decktop-theory .media__container {
    position: relative;
}

    .decktop-theory .media__container .redirect {
        position: absolute;
        width: 100%;
        height: 100%;
    }

.flip__card__box {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

    .flip__card__box.active {
        display: flex;
    }

    .flip__card__box .card-template {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 1000px;
        max-width: 100%;
        height: 400px;
        perspective: 1000px;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

        .flip__card__box .card-template .inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.6s;
            cursor: pointer;
        }

            .flip__card__box .card-template .inner.flipped {
                transform: rotateX(180deg);
            }

            .flip__card__box .card-template .inner i {
                position: absolute;
                right: 10px;
                bottom: 5px;
                color: #a3a3a3;
                padding: 0;
                font-size: 22px;
            }

            .flip__card__box .card-template .term {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 22px;
                font-weight: 700;
                position: absolute;
                width: calc(100% - 60px);
                height: calc(100% - 60px);
                backface-visibility: hidden;
                border: 1px solid #ccc;
                border-radius: 8px;
                background: white;
                padding: 30px;
            }

        .flip__card__box .card-template .text {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: 500;
            position: absolute;
            width: calc(100% - 60px);
            height: calc(100% - 60px);
            backface-visibility: hidden;
            border: 1px solid #ccc;
            border-radius: 8px;
            transform: rotateX(180deg);
            background: #f9f9f9;
            padding: 30px;
        }

            .flip__card__box .card-template .term .text__wrap,
            .flip__card__box .card-template .text .text__wrap {
                max-height: 100%;
                padding: 0;
                overflow-x: auto;
            }

    .flip__card__box .submit__buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

        .flip__card__box .submit__buttons .dontknow__button {
            background: #ffaeae;
            padding: 10px 16px;
            font-size: 22px;
            border-radius: 11px;
            color: #ff0000;
            cursor: pointer;
        }

        .flip__card__box .submit__buttons .know__button {
            background: #96ff96;
            padding: 10px 16px;
            font-size: 22px;
            border-radius: 11px;
            color: green;
            cursor: pointer;
        }

.repeat__warning__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .repeat__warning__box .img {
        max-width: 700px;
        max-height: 500px;
    }

        .repeat__warning__box .img img {
            max-width: inherit;
            max-height: inherit;
            object-fit: contain;
        }

    .repeat__warning__box h3 {
        font-size: 48px;
        font-weight: 900;
        line-height: 50px;
        text-wrap: pretty;
        max-width: 900px;
        color: #FFD700;
    }

    .repeat__warning__box .text {
        font-size: 32px;
        font-weight: 800;
        color: #a3a3a3;
        max-width: 900px;
    }

    .repeat__warning__box .buttons__box {
        grid-template-columns: minmax(0, 360px) !important;
        justify-items: center;
    }

        .repeat__warning__box .buttons__box .continue__button {
            font-weight: 300;
            border-radius: var(--content-border-radius);
            cursor: pointer;
            border: none;
            font-size: 16px;
            font-family: "Nunito";
            max-width: 360px;
            width: 100%;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: 0.3s;
            background-color: #FBBC04;
            color: #08212D;
        }

.subjects__list__box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #14213D;
}

    .subjects__list__box .subjects__header__box {
        display: flex;
        flex-direction: column;
    }

        .subjects__list__box .subjects__header__box h3 {
            font-size: 24px;
            font-weight: 700;
            line-height: 27px;
        }

        .subjects__list__box .subjects__header__box .access__box {
            font-size: 19px;
            font-weight: 300;
            line-height: 27px;
        }

    .subjects__list__box .subject__box {
        background: #fff;
        border-radius: 11px;
        margin-bottom: 20px;
    }

        .subjects__list__box .subject__box .progress__bar {
            height: 19px;
            background: #DCE3F0;
            border-radius: 11px 11px 0 0;
            position: relative;
        }

            .subjects__list__box .subject__box .progress__bar .progress__line {
                background: #4AD991;
                height: 19px;
                border-radius: 11px 11px 11px 0;
            }

                .subjects__list__box .subject__box .progress__bar .progress__line.full {
                    border-radius: 11px 11px 0 0;
                }

            .subjects__list__box .subject__box .progress__bar .progress__percent {
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                top: 50%;
                font-size: 15px;
                letter-spacing: 0.4px;
            }

            .subjects__list__box .subject__box .progress__bar .progress__categories {
                position: absolute;
                right: 0;
                transform: translate(-20px, -50%);
                top: 50%;
                font-size: 15px;
                letter-spacing: 0.4px;
            }

        .subjects__list__box .subject__box .subject__info__box {
            display: flex;
            flex-direction: column;
            padding: 23px;
            gap: 15px;
        }

            .subjects__list__box .subject__box .subject__info__box .subject__info {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

                .subjects__list__box .subject__box .subject__info__box .subject__info h2 {
                    font-size: 32px;
                    line-height: 20px;
                    letter-spacing: 0.4px;
                    font-weight: 900;
                }

                .subjects__list__box .subject__box .subject__info__box .subject__info h4 {
                    font-size: 15px;
                    line-height: 20px;
                    letter-spacing: 0.4px;
                    font-weight: 700;
                }

                .subjects__list__box .subject__box .subject__info__box .subject__info .last__theme {
                    font-size: 13px;
                    line-height: 15px;
                    letter-spacing: 0.4px;
                    font-weight: 500;
                }

            .subjects__list__box .subject__box .subject__info__box .subject__categories__box {
                background: #F5F5F5;
                border-radius: 11px;
            }

            .subjects__list__box .subject__box .subject__info__box .catrgories {
                display: flex;
                flex-direction: row;
                padding: 20px 15px;
            }

                .subjects__list__box .subject__box .subject__info__box .catrgories .swipercat {
                    overflow: hidden;
                    position: relative;
                    max-width: 100%;
                }

            .subjects__list__box .subject__box .subject__info__box .swiper-slide {
                width: 160px;
                display: flex;
                padding-bottom: 15px;
            }

                .subjects__list__box .subject__box .subject__info__box .swiper-slide.last {
                    width: 131px;
                }

            .subjects__list__box .subject__box .subject__info__box .swiper-scrollbar-drag {
                background: #4AD991;
            }

            .subjects__list__box .subject__box .subject__info__box .catrgories .locked {
                pointer-events: none;
            }

            .subjects__list__box .subject__box .subject__info__box .catrgories .category__block {
                width: 131px;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                position: relative;
                z-index: 1;
                gap: 10px;
            }

                .subjects__list__box .subject__box .subject__info__box .catrgories .category__block.last__unlocked {
                    width: 135px;
                }

                .subjects__list__box .subject__box .subject__info__box .catrgories .category__block .category__img__box {
                    background: #DCE3F0;
                    width: 131px;
                    height: 131px;
                    border-radius: 11px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                    .subjects__list__box .subject__box .subject__info__box .catrgories .category__block .category__img__box img {
                        width: 80%;
                        height: 80%;
                        object-fit: contain;
                        filter: grayscale(100%);
                    }

                .subjects__list__box .subject__box .subject__info__box .catrgories .category__block .category__name {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 17px;
                    letter-spacing: 0.4px;
                    color: #A3A3A3;
                }

            .subjects__list__box .subject__box .subject__info__box .catrgories .category__separator {
                background: #BFD3E8;
                width: 30px;
                min-width: 30px;
                height: 2px;
                margin-top: 65px;
                z-index: 0;
            }

            .subjects__list__box .subject__box .subject__info__box .catrgories .category__block.unlocked .category__img__box {
                background: #D5F7D2;
            }

                .subjects__list__box .subject__box .subject__info__box .catrgories .category__block.unlocked .category__img__box img {
                    filter: grayscale(0%);
                }

            .subjects__list__box .subject__box .subject__info__box .catrgories .category__block.unlocked .category__name {
                color: #14213D;
            }

            .subjects__list__box .subject__box .subject__info__box .catrgories .category__separator.unlocked {
                background: #4AD991;
            }

            .subjects__list__box .subject__box .subject__info__box .catrgories .category__block.last__unlocked .category__img__box {
                border: 2px solid #14213D;
                background-image: url(img/package/backcategory.png);
            }

            .subjects__list__box .subject__box .subject__info__box .catrgories .category__block.last__unlocked .category__name {
                font-weight: 800;
                color: #14213D;
            }

.mobile-logo {
    display: flex;
    align-items: center;
}

.profile__link {
    margin: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
}

    .profile__link a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .profile__link .img {
        width: 18px;
    }

    .profile__link .img__tr {
        width: 24px;
        max-height: none;
        margin-bottom: -2px;
    }

    .profile__link.active {
        font-weight: 700;
        position: relative;
        margin-bottom: -16px;
    }

    .profile__link .underline {
        width: 100%;
        height: 3px;
        background: #0FB800;
        position: absolute;
        bottom: -10px;
    }

.prevnext__block {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .prevnext__block .hr {
        width: 100%;
        height: 1px;
        position: absolute;
        background: #D1D1D6;
    }

    .prevnext__block .link {
        color: #9F9F9F;
        background: var(--light-grey);
        z-index: 1;
        padding: 0 20px;
        font-size: 20px;
    }

.question__raw ul {
    padding-left: 20px;
}

.left-right-container .variants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 10px 0;
}

.canvas__animation__box {
    max-width: 700px;
    max-height: 500px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .canvas__animation__box.endbox {
        align-items: flex-end;
    }

    .canvas__animation__box.end svg {
        margin-top: -110px;
    }

.subject__exams {
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px 20px;
    gap: 10px;
}

    .subject__exams .exams__box {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

.ck-content span[lang] {
    font-style: normal !important;
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    z-index: 9 !important;
}

.side__boxes__profile.is-hidden {
    opacity: 1;
    display: flex;
    pointer-events: all;
}

.main__container .header.transparent__mode + div {
    padding: 0;
}

.main__container .header.transparent__mode {
    position: absolute;
    top: 0;
    background: transparent;
    z-index: 1;
}

    .main__container .header.transparent__mode .nav {
        color: #fff;
    }

        .main__container .header.transparent__mode .nav li:hover {
            border-bottom: 2px solid #fff;
        }

    .main__container .header.transparent__mode .button {
        background: transparent;
        border: 1px solid #fff;
        border-radius: 7px;
    }

.main__container .menu__button.mobile i {
    font-size: 40px;
    color: #fff;
}

.black__full__banner {
    background: radial-gradient(circle, rgba(1, 3, 4, 1) 0%, rgba(9, 34, 46, 1) 89%);
    position: relative;
    overflow: hidden;
}

    .black__full__banner .black__full__banner__section {
        padding: 10px 5%;
        display: grid;
        grid-template-columns: 1fr minmax(400px, 1fr) 1fr;
        color: #FFCC00;
        z-index: 1;
        position: relative;
        align-items: center;
        justify-items: center;
        gap: 5px;
    }

        .black__full__banner .black__full__banner__section .img__box {
            max-width: 100%;
            width: 100%;
            height: 100%;
            max-height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

            .black__full__banner .black__full__banner__section .img__box img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

        .black__full__banner .black__full__banner__section .central {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

            .black__full__banner .black__full__banner__section .central h2 {
                font-size: 72px;
                font-weight: 300;
                line-height: 65px;
            }

                .black__full__banner .black__full__banner__section .central h2 strong {
                    font-weight: 900;
                }

            .black__full__banner .black__full__banner__section .central .bottom__text {
                font-size: 24px;
                font-weight: 900;
                text-align: center;
            }

        .black__full__banner .black__full__banner__section .button__box {
            display: flex;
            width: 100%;
            justify-content: flex-end;
            align-items: center;
        }

        .black__full__banner .black__full__banner__section .button {
            color: #131313;
            font-size: 24px;
            font-weight: 900;
            background: #FFCC00;
            padding: 18px 20px;
            border-radius: 21px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            line-height: 18px;
        }

    .black__full__banner .cover .line__leftbottom__to__lefttop {
        position: absolute;
        background: radial-gradient(circle, rgba(47, 40, 14, 1) 21%, rgba(126, 101, 0, 1) 63%);
        transform: rotate(-25deg) translateY(0px) translateX(140px);
        transform-origin: right center;
        height: 30px;
        font-size: 18px;
        font-weight: 900;
        display: flex;
        align-items: center;
        right: 70%;
        top: 0;
        width: fit-content;
        text-wrap-mode: nowrap;
    }

    .black__full__banner .cover .line__righttop__to__rightbottom {
        position: absolute;
        background: radial-gradient(circle, rgba(47, 40, 14, 1) 21%, rgba(126, 101, 0, 1) 63%);
        transform: rotate(22deg) translateY(0px) translateX(-130px);
        transform-origin: left center;
        height: 30px;
        font-size: 18px;
        font-weight: 900;
        display: flex;
        align-items: center;
        top: 0;
        left: 70%;
        width: fit-content;
        text-wrap-mode: nowrap;
    }

    .black__full__banner .cover .line__rightbottom__to__righttop {
        position: absolute;
        background: radial-gradient(circle, rgba(47, 40, 14, 1) 21%, rgba(126, 101, 0, 1) 63%);
        transform: rotate(-20deg) translateY(0px) translateX(0px);
        transform-origin: left center;
        height: 30px;
        font-size: 18px;
        font-weight: 900;
        display: flex;
        align-items: center;
        left: 75%;
        top: 100%;
        width: fit-content;
        text-wrap-mode: nowrap;
    }

    .black__full__banner .cover .line__lefttop__to__leftbottom {
        position: absolute;
        background: radial-gradient(circle, rgba(47, 40, 14, 1) 21%, rgba(126, 101, 0, 1) 63%);
        transform: rotate(15deg) translateY(0px) translateX(134px);
        transform-origin: right center;
        height: 30px;
        font-size: 18px;
        font-weight: 900;
        display: flex;
        align-items: center;
        right: 77%;
        bottom: 0;
        width: fit-content;
        text-wrap-mode: nowrap;
    }