* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, sans-serif;
    scroll-behavior: smooth;
}

/* ===================================================== */
/* =============== ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ =============== */

:root {
    --primary: #0A0720;
    --secondary: #1a1533;
    --accent: #4169E1;
    --purple: #9400D3;
    --gray_text_color: rgb(255 255 255 / 0.7);
    --gray_line_color: gray;
}

/* ===================================================== */
/* =============== ГЛОБАЛЬНАЯ СТИЛИЗАЦИЯ =============== */

body {
    background-color: var(--primary);
    color: white;
    line-height: 1.6;
    overflow-x: hidden;
}

/* =============== ШАПКА САЙТА =============== */

header {
    background: rgba(10, 7, 32, 0.95);
    backdrop-filter: blur(10px);
    /* padding: 1rem 0; */
    position: fixed;
    width: 100%;
    height: 12vh;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--gray_line_color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 2000;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    /* height: 100vh; */
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: #FFD700;
    font-size: 1.25rem;
    padding-left: 2vw;
}

.logo img {
    height: 80px;
    animation: float 3s ease-in-out infinite;
}

.nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: 300ms all;
}

.nav-links a:hover {
    background: var(--gray_line_color);
    transform: translateY(-2px);
    color: var(--accent);
}


/* === блок поиска === */

.search_box_cl {
    width: 20vw;
    height: 8vh;
    border: 2px solid var(--gray_line_color);
    border-radius: 2vh;
    padding-left: 0.75vw;
    padding-right: 0.75vw;
    margin-right: 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1vw;
}

.search_box_cl>div {
    width: 5vh;
    height: 5vh;
    background-image: url(../static/img/search_logo.svg);
    background-size: cover;
}

.search_box_cl>div:hover {
    cursor: pointer;
}

.search_box_cl>input {
    width: 75%;
    height: 5vh;
    font-size: 3vh;
    color: var(--accent);
    background: none;
    border: none;
    padding-left: 0.5vw;
}

.mobile_nav_catalog_cl {
    display: none;
    width: 8vh;
    height: 8vh;
    background-image: url(../static/img/mobile_nav_catalog.svg);
    background-size: cover;
    z-index: 3000;
}

.mobile_nav_catalog_cl:hover {
    cursor: pointer;
}

#nav_catalog_output_id {
    position: fixed;
    top: 100%;
    transform: translateX(-15vw);
    padding: 1vh;
    width: 20vh;
    display: flex;
    opacity: 0;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.5vh;
    background-color: var(--primary);
    transition: 300ms all;
}

#nav_catalog_output_id>a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: none;
    opacity: 0;
    transition: 300ms all;
}

#nav_catalog_output_id>a:hover {
    background: var(--gray_line_color);
    transform: translateY(-2px);
    color: var(--accent);
}

.search_head_mobile_cl {
    position: fixed;
    top: 11vh;
    width: 100vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
    display: none;
    backdrop-filter: blur(12px);
    z-index: 1000;
}

.search_head_mobile_cl>div {
    width: 80vw;
    height: 8vh;
    border: 2px solid var(--gray_line_color);
    border-radius: 2vh;
    padding-left: 0.75vw;
    padding-right: 0.75vw;
    margin-right: 5vw;
    margin-left: 2vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1vw;
}

.search_head_mobile_cl>div>div {
    width: 5vh;
    height: 5vh;
    background-image: url(../static/img/search_logo.svg);
    background-size: cover;
}

.search_head_mobile_cl>div>div:hover {
    cursor: pointer;
}

.search_head_mobile_cl>div>input {
    width: 75%;
    height: 5vh;
    font-size: 3vh;
    color: var(--accent);
    background: none;
    border: none;
    padding-left: 0.5vw;
}

/* === заглавный текст === */
.catalog_names_main_cl {
    font-size: 6vh;
    font-weight: bold;
    /* background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: white;
    line-height: 1.2;
    animation: titleReveal 1s ease-out;
    /* margin-top: 5vh; */
    margin-bottom: 3vh;
}

.b_cl {
    font-size: 2.5vh;
    font-weight: normal;
    color: gray;
    margin-top: 20px;
    margin-bottom: 20px;
    text-indent: 4vh;
    text-align: justify;
}

@media (max-width: 1000px) {

    nav {
        display: none;
    }

    .search_box_cl {
        width: 40vw;
    }

    .mobile_nav_catalog_cl {
        display: flex;
    }

}

@media (max-width: 800px) {

    .search_head_mobile_cl {
        display: flex;
    }

    .search_box_cl {
        display: none;
    }

    header {
        justify-content: start;
    }

    .container {
        width: 100vw;
        height: auto;
    }

    .catalog_names_main_cl {
        margin-top: 0;
        margin-bottom: 2vh;
        font-size: 3.5vh;
    }

}

@media (max-width: 500px) {
    .mobile_nav_catalog_cl {
        position: fixed;
        top: 5vw;
        right: 5vw;
    }

    .logo img {
        width: 80%;
        height: 80%;
    }
}

/* =============== ТЕЛО САЙТА =============== */



/* =============== ПОДВАЛ САЙТА =============== */

footer {
    max-width: 5000px;
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

footer>section:nth-child(1) {
    width: 100%;
    height: calc(100% - 5vh);
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: 2vw;
}

footer>section:nth-child(1)>div {
    height: auto;
    padding-top: 3vh;
    padding-bottom: 1vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2vh;
}

.info_fot_block_1_cl {
    width: 20%;
    padding-right: 2%;
}

.info_fot_block_1_cl>span {
    font-size: 2.5vh;
    color: #ffcc00c6;
    font-weight: bold;
}

.info_fot_block_1_cl>div {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 2vh;
}

.info_fot_block_1_cl>div>span {
    font-size: 2.25vh;
    color: var(--gray_text_color);
}

.info_fot_block_1_cl>div>section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 1vw;
}

.info_fot_block_1_cl>div>section>div {
    width: 6vh;
    height: 6vh;
    background-color: rgb(255 255 255 / 0.1);
    border-radius: 50%;
    transition: 300ms all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info_fot_block_1_cl>div>section>div:hover {
    cursor: pointer;
    background-color: var(--accent);
}

.info_fot_block_2_cl {
    width: 15%;
    padding-right: 2%;
}

.info_fot_block_2_cl>span {
    font-size: 2.5vh;
    color: white;
    font-weight: bold;
}

.info_fot_block_2_cl>div {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1vh;
}

.info_fot_block_2_cl>div>span {
    font-size: 2.5vh;
    font-weight: bold;
    color: var(--gray_text_color);
    ;
    transition: 300ms all;
}

.info_fot_block_2_cl>div>span:hover {
    cursor: pointer;
    color: #4169e1;
}

.info_fot_block_3_cl {
    width: 20%;
    padding-right: 2%;
}

.info_fot_block_3_cl>span {
    font-size: 2.5vh;
    color: white;
    font-weight: bold;
}

.info_fot_block_3_cl>div {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1vh;
}

.sect_cont_site_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1vw;
}

.sect_cont_site_cl>div {
    color: #4169e1;
}

.sect_cont_site_cl>span {
    font-size: 2.5vh;
    color: var(--gray_text_color);
}

.info_fot_block_4_cl {
    width: 20%;
    padding-right: 2%;
}

.info_fot_block_4_cl>span {
    font-size: 2.5vh;
    color: white;
    font-weight: bold;
}

.info_fot_block_4_cl>div {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 2vh;
}

.info_fot_block_4_cl>div>input {
    width: 15vw;
    height: 5vh;
    border: none;
    border-radius: 0.5vw;
    padding-left: 1vw;
    padding-right: 1vw;
    background-color: rgb(255 255 255 / 0.1);
    font-size: 2.5vh;
    color: var(--gray_text_color);
    border: 2px solid var(--gray_line_color);
    /* background-color: linear-gradient(90deg, #120e2907, #120e2903, #120e297e, #120e29);
    background-color: linear-gradient(90deg, #e6ebf20a, #e6ebf208, #e6ebf285, #e6ebf2); */
}

.info_fot_block_4_cl>div>div {
    width: 15vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5vw;
    color: white;
    background-color: #4169E1;
    transition: 300ms all;
}

.info_fot_block_4_cl>div>div:hover {
    cursor: pointer;
    filter: brightness(150%);
}

footer>section:nth-child(2) {
    width: 100%;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .info_fot_block_1_cl {
        width: 25%;
    }

    .info_fot_block_2_cl {
        width: 20%;
    }

    .info_fot_block_3_cl {
        width: 25%;
    }

    .info_fot_block_4_cl {
        width: 15%;
    }
}

@media (max-width: 700px) {

    footer>section:nth-child(1) {
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    .info_fot_block_1_cl {
        width: 80%;
    }

    .info_fot_block_2_cl {
        width: 80%;
    }

    .info_fot_block_3_cl {
        width: 80%;
    }

    .info_fot_block_4_cl {
        margin-top: 5vh;
        margin-bottom: 10vh;
        width: 80%;
    }

    .info_fot_block_4_cl>div>input {
        width: 60vw;
    }

    .info_fot_block_4_cl>div>div {
        width: 60vw;
    }

}

/* === навигационная полоcа "назад" === */

.navigation_bar_back_cl {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5vw;
}

.navigation_bar_back_cl>div {
    width: 2vh;
    height: 2vh;
    background-image: url(../static/img/arrow_left.svg);
    background-size: cover;
}

.navigation_bar_back_cl>span {
    font-size: 2vh;
    color: var(--gray_text_color);
}

.navigation_bar_back_cl:hover {
    cursor: pointer;
}

.navigation_bar_back_cl:hover>div {
    transition: 300ms all;
    color: white;
}

.navigation_bar_back_cl:hover>span {
    transition: 300ms all;
    color: white;
}

/* =============== ПОДРОБНОЕ ОПИСАНИЕ =============== */

#detailed_course_description_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 15vh;
    padding-bottom: 5vh;
    padding-left: 12.5vw;
    padding-right: 12.5vw;
    height: 100vh;
    background-color: var(--primary);
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: scroll;
    display: none;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: 500ms all;
}

.up_arrow_cl {
    position: fixed;
    right: 10vw;
    bottom: 10vh;
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    border: 3px solid var(--accent);
    background-image: url(./img/up_arrow.png);
    background-size: cover;
    background-color: rgba(128, 128, 128, 0.25);
    transition: 300ms all;
}

.up_arrow_cl:hover {
    cursor: pointer;
    box-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent);
    background-color: white;
}

/* === информационная зона === */

.block_course_desc_block_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
}

/* === инф.блок №1 === */

.block_course_desc_block_cl>div:nth-child(1) {
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 4vh;
}

.what_do_you_think_course_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2vh;
}

.what_do_you_think_course_cl>span {
    font-size: 3.25vh;
    font-weight: bold;
    color: white;
}

.what_do_you_think_course_cl>ul>li {
    margin-left: 1vw;
    font-size: 2.5vh;
    /* color: var(--gray_text_color); */
    color: gray;
}

.program_course_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2vh;
}

.program_course_cl>span {
    font-size: 3.25vh;
    font-weight: bold;
    color: white;
}

.program_course_cl>div {
    width: 100%;
}

.program_course_cl>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: var(--accent);
}

.program_course_cl>div>ul>li {
    margin-left: 1vw;
    font-size: 2.5vh;
    color: var(--gray_text_color);
}

/* === инф.блок №2 === */

.block_course_desc_block_cl>div:nth-child(2) {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 4vh;
}

.block_course_desc_block_cl>div:nth-child(2)>section {
    width: 100%;
    height: auto;
    border-radius: 1vw;
    padding: 2vw;
    background-color: var(--secondary);
}

/* === Стоимость === */

.sub_course_desc_value_cl {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.75vh;
}

.sub_course_desc_value_cl>span:nth-child(1) {
    font-size: 3vh;
    font-weight: bold;
    color: white;
}

.sub_course_desc_value_cl>span:nth-child(2) {
    font-size: 3vh;
    font-weight: bold;
    color: var(--accent);
}

.sub_course_desc_value_cl>span:nth-child(3) {
    margin-top: 1vh;
    font-size: 3vh;
    font-weight: bold;
    color: white;
}

.sub_course_desc_value_cl>span:nth-child(4) {
    font-size: 2.5vh;
    color: white;
}

.sub_course_desc_value_cl>div:nth-child(5) {
    margin-top: 2vh;
    width: 100%;
    height: 6vh;
    border-radius: 0.5vw;
    background-color: var(--accent);
    font-size: 2.5vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

.sub_course_desc_value_cl>div:nth-child(5):hover {
    width: 105%;
    height: 6.5vh;
    cursor: pointer;
    transform: translateX(-2.5%);
}

/* === кому подходит? === */

.sub_course_whom_suits_cl {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.75vh;
}

.sub_course_whom_suits_cl>span {
    font-size: 3vh;
    color: white;
}

.sub_course_whom_suits_cl>ul>li {
    margin-left: 1vw;
    font-size: 2.25vh;
    color: var(--gray_text_color);
    margin-bottom: 1.5vh;
}

/* === инструктор === */

.sub_course_instructor_cl {
    display: flex;
    align-items: start;
    gap: 1vw;
}

.sub_course_instructor_cl>div {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    border: 2px solid blueviolet;
    background-image: url(../static/specialists/specialist_1.png);
    background-size: cover;
}

.sub_course_instructor_cl>section {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.sub_course_instructor_cl>section>span:nth-child(1) {
    font-size: 2.5vh;
    color: var(--accent);
}

.sub_course_instructor_cl>section>span:nth-child(2) {
    color: var(--accent);
    font-size: 2vh;
    color: white;
}

@media (max-width: 1000px) {
    #detailed_course_description_id {
        padding-left: 2.5vw;
        padding-right: 2.5vw;
    }
}

@media (max-width: 800px) {
    .block_course_desc_block_cl {
        flex-direction: column;
        align-items: center;
        gap: 4vh;
    }

    .block_course_desc_block_cl>div:nth-child(1) {
        width: 90%;
    }

    .block_course_desc_block_cl>div:nth-child(2) {
        width: 95%;
    }

    .block_course_desc_block_cl>div:nth-child(2)>section {
        border-radius: 2vw;
        padding: 5vw;
    }
}

.course_title_text_cl {
    width: calc(100vw - 20vw);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15vh;
}

.course_title_text_cl>span {
    font-size: 6vh;
    font-weight: 700;
    color: white;
    text-align: center;
    text-shadow: 0 0 2px white, 0 0 4px white;
}

@media (max-width: 700px) {
    .course_title_text_cl>span {
        font-size: 4.5vh;
    }

    .course_title_text_cl {
        width: 95vw;
    }
}

/* --- публикация фото --- */

.photo_rendering_cl {
    width: 100%;
}

.photo_rendering_cl>img {
    width: 100%;
}

/* --- публикация текст --- */

.text_rendering_cl {
    width: 100%;
}

.text_rendering_cl>span {
    font-size: 2.5vh;
    color: white;
    text-align: justify;
}

/* --- публикация заглавья --- */

.title_rendering_cl {
    font-size: 3.5vh;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 2.5px white, 0 0 5px white;
    text-align: center;
}

/* --- возклицательный знак заглавья --- */

.exclamation_point_rendering_cl {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
    padding: 2.5%;
    border: 3px solid blueviolet;
    border-radius: 1vh;
    box-shadow: 0 0 2.5px blueviolet, 0 0 5px blueviolet;
}

.exclamation_point_rendering_cl>div {
    width: 8vh;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
    font-weight: bold;
    color: blueviolet;
    border: 3px solid blueviolet;
    box-shadow: 0 0 2.5px blueviolet, 0 0 5px blueviolet;
    border-radius: 1vh;
}

.exclamation_point_rendering_cl>span {
    width: calc(100% - 8vh - 2vw);
    font-size: 3vh;
    color: blueviolet;
    text-align: justify;
}

@media (max-width: 700px) {
    .exclamation_point_rendering_cl>div {
        width: 5vh;
        height: 5vh;
    }
    .exclamation_point_rendering_cl>span {
        font-size: 2vh;
    }
}

/* --- публикация галочки --- */

.tick_rendering_cl {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
    padding: 2.5%;
    border: 3px solid var(--accent);
    border-radius: 1vh;
    box-shadow: 0 0 2.5px var(--accent), 0 0 5px var(--accent);
}

.tick_rendering_cl>div {
    width: 8vh;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
    font-weight: bold;
    color: var(--accent);
    border: 3px solid var(--accent);
    box-shadow: 0 0 2.5px var(--accent), 0 0 5px var(--accent);
    border-radius: 1vh;
    background-image: url(../../static/img/tick.png);
    background-size: 75%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.tick_rendering_cl>span {
    width: calc(100% - 8vh - 2vw);
    font-size: 3vh;
    color: var(--accent);
    text-align: justify;
}

@media (max-width: 700px) {
    .tick_rendering_cl>div {
        width: 5vh;
        height: 5vh;
    }
    .tick_rendering_cl>span {
        font-size: 2vh;
    }
}

@media (max-width: 700px) {

    .exclamation_point_rendering_cl {
        gap: 5vw;
    }

    .exclamation_point_rendering_cl>span {
        width: calc(100% - 8vh - 5vw);
    }

    .tick_rendering_cl>span {
        width: calc(100% - 8vh - 5vw);
    }

}

/* =============== МОДАЛЬНОЕ ОКНО ПРОСМОТРА ОПИСАНИЯ =============== */

#description_view_id {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 5vw;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 500ms all;
    padding-top: 15vh;
}

#description_view_id>b {
    font-size: 2.5vh;
    font-weight: bold;
    color: var(--accent);
    text-shadow: 0 0 2.5px var(--accent), 0 0 5px var(--accent);
    text-align: center;
}

#description_view_id>span {
    font-size: 2.5vh;
    color: white;
    text-align: justify;
    text-indent: 10vw;
}

#description_view_id>div {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

#description_view_id>div>span {
    font-size: 3vh;
    color: gray;
    margin-top: 5vh;
}

/* =============== ФИКЦИРОВАННАЯ КНОПКА WHATSAPP =============== */

#whatsapp_logo_id {
    width: 12vh;
    height: 12vh;
    position: fixed;
    right: 10vw;
    bottom: 5vw;
}

#whatsapp_logo_id:hover {
    cursor: pointer;
}

#whatsapp_logo_id>div:nth-child(1) {
    width: 12vh;
    height: 12vh;
    border-radius: 50%;
    backdrop-filter: blur(12px);
    background-image: url(./img/whatsapp_logo.png);
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#whatsapp_logo_id>div:nth-child(2) {
    position: absolute;
    width: 12vh;
    height: 12vh;
    border-radius: 50%;
    border: 0px solid rgba(26, 229, 26, 0);
    transform: translateY(-12vh) translateX(0vh);
    animation: wave_animation 3s ease infinite;
}

@keyframes wave_animation {
    0% {
        border: 0px solid rgba(26, 229, 26, 0);
        width: 12vh;
        height: 12vh;
        transform: translateY(-12vh) translateX(0vh);
    }

    50% {
        border: 25px solid rgba(26, 229, 26, 0.5);
        width: 18vh;
        height: 18vh;
        transform: translateY(-15vh) translateX(-3vh);
    }

    100% {
        border: 250px solid rgba(26, 229, 26, 0);
        width: 18vh;
        height: 18vh;
        transform: translateY(-15vh) translateX(-3vh);
    }
}

/* ========== ОТЗЫВЫ ========== */

.feedback_box_cl {
    width: 90vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 5vh;
    padding-bottom: 5vh;
    gap: 4vh;
}

.feedback_box_cl>section {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1vw;
}

.feedback_box_cl>section>div {
    width: 15vw;
    height: 30vh;
    background-size: cover;
    border: 4px solid var(--accent);
    border-radius: 1vh;
    transition: 500ms all;
    display: flex;
    align-items: end;
    justify-content: end;
}

.feedback_box_cl>section>div>div {
    width: 15vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #10108a;
    border-radius: 1vh;
    margin: 2vh;
    transition: 300ms all;
    font-size: 1.8vh;
}

.feedback_box_cl>section>div>div:hover {
    cursor: pointer;
    background-color: #1a1533;
}

/* .feedback_box_cl>section>div:hover {
    cursor: pointer;
    width: 18vw;
    height: 35vh;
} */

@media (max-width: 1000px) {

    .feedback_box_cl {
        width: 100vw;
    }

    .feedback_box_cl>section {
        flex-wrap: wrap;
    }

    .feedback_box_cl>section>div {
        width: 25vw;
        height: 30vh;
    }

    .feedback_box_cl>section>div:hover {
        cursor: pointer;
        width: 28vw;
        height: 35vh;
    }
}

@media (max-width: 700px) {

    .feedback_box_cl>section {
        gap: 5vw;
    }

    .feedback_box_cl>section>div {
        width: 42.5vw;
        height: 30vh;
        border-radius: 2vh;
    }

    .feedback_box_cl>section>div:hover {
        cursor: pointer;
        width: 42.5vw;
        height: 30vh;
    }

}

/* === модальное окно отзыва === */

#thank_you_box_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 300ms all;
}

#thank_you_box_id>div {
    width: 35%;
    height: 80%;
    border-radius: 2vh;
    background-color: var(--secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2vw;
    transform: translateY(4vh);
}

#thank_you_box_id>div>img {
    width: 100%;
    height: 80%;
}

#thank_you_box_id>div>span:nth-child(2) {
    width: 90%;
    font-size: 3vh;
    color: white;
    text-align: center;
}

#thank_you_box_id>div>span:nth-child(3) {
    width: 90%;
    font-size: 3vh;
    font-weight: bold;
    color: var(--accent);
    text-align: center;
}

#thank_you_box_close_id {
    position: absolute;
    top: -1vh;
    right: -1vw;
    width: 8vh;
    height: 8vh;
    background-color: black;
    border-radius: 50%;
    /* border: 4px solid blue; */
    font-size: 5vh;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

#thank_you_box_close_id:hover {
    cursor: pointer;
}

@media (max-width: 1000px) {
    #thank_you_box_id>div {
        width: 55%;
    }
}

@media (max-width: 700px) {
    #thank_you_box_id>div {
        width: 90%;
        height: 55%;
        padding: 5vw;
        transform: translateY(8vh);
    }

    #thank_you_box_id>div>span:nth-child(2) {
        font-size: 2vh;
    }

    #thank_you_box_id>div>span:nth-child(3) {
        font-size: 2vh;
    }

    #thank_you_box_close_id {
        top: -25px;
        right: 0;
    }

}

/* === отзыв (текст) === */

.text_feedback_cl {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: 4vw;
}

.text_feedback_cl>section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
}

.text_feedback_cl>section>div:nth-child(1) {
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    background-color: var(--secondary);
    overflow: hidden;
    background-image: url(./img/men_icon.svg);
    background-size: 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    box-shadow: 2px 2px 4px black;
}

.text_feedback_cl>section>div:nth-child(2) {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.text_feedback_cl>section>div:nth-child(2)>span:nth-child(1) {
    font-size: 3vh;
    font-weight: bold;
    color: var(--accent);
}

.text_feedback_cl>section>div:nth-child(2)>span:nth-child(2) {
    font-size: 2.5vh;
    color: white;
    text-align: justify;
}

@media (max-width: 1000px) {

    /* .text_feedback_cl>section {
        height: 60vh;
    } */

    .text_feedback_cl>section>div:nth-child(1) {
        width: 18vw;
        height: 18vw;
    }

    .text_feedback_cl>section>div:nth-child(2) {
        width: 70%;
    }
}

@media (max-width: 700px) {

    /* .text_feedback_cl>section {
        height: 50vh;
    } */

    .text_feedback_cl>section>div:nth-child(1) {
        display: none;
    }

    .text_feedback_cl>section>div:nth-child(2) {
        width: 100%;
    }

    .text_feedback_cl>section>div:nth-child(2)>span:nth-child(1) {
        font-size: 2vh;
    }

    .text_feedback_cl>section>div:nth-child(2)>span:nth-child(2) {
        font-size: 2vh;
    }
}

/* === отзыв (видео) === */

.video_feedback_cl {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4vw;
}

.video_feedback_cl>section {
    width: 47.5%;
    height: auto;
    background-color: var(--primary);
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    padding-top: 1.25%;
    padding-bottom: 1.25%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    transition: 500ms all;
    box-shadow: 2px 2px 4px black;
}

.video_feedback_cl>section>span:nth-child(1) {
    font-size: 3vh;
    font-weight: bold;
    color: var(--accent);
}

.video_feedback_cl>section>video {
    width: 100%;
    height: 70%;
}

.video_feedback_cl>section>span:nth-child(3) {
    font-size: 2vh;
    color: white;
}

@media (max-width: 1000px) {
    .video_feedback_cl {
        width: 90%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 2vw;
    }

    .video_feedback_cl>section {
        width: 100%;
    }

    .video_feedback_cl>section>span:nth-child(1) {
        font-size: 2.5vh;
    }

    .video_feedback_cl>section>span:nth-child(3) {
        font-size: 1.8vh;
    }

    .video_feedback_cl>section>video {
        width: 100%;
        height: 50%;
    }

}

@media (max-width: 700px) {

    .video_feedback_cl {
        width: 100%;
    }

    .video_feedback_cl>section {
        width: 100%;
        border-radius: 0;
        padding-bottom: 5%;
    }

}

/* === отзыв (аудио) === */

.audio_feedback_cl {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4vw;
}

.audio_feedback_cl>section {
    width: 47.5%;
    height: auto;
    background-color: var(--primary);
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    padding-top: 1.25%;
    padding-bottom: 1.25%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    transition: 500ms all;
}

.audio_feedback_cl>section>span:nth-child(1) {
    font-size: 3vh;
    font-weight: bold;
    color: var(--accent);
}

.audio_feedback_cl>section>audio {
    width: 100%;
    height: 5vh;
}

.audio_feedback_cl>section>span:nth-child(3) {
    font-size: 2vh;
    color: white;
}

@media (max-width: 1000px) {
    .audio_feedback_cl {
        width: 90%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 2vw;
    }

    .audio_feedback_cl>section {
        width: 100%;
    }

    .audio_feedback_cl>section>span:nth-child(1) {
        font-size: 2.5vh;
    }

    .audio_feedback_cl>section>span:nth-child(3) {
        font-size: 1.8vh;
    }

    .audio_feedback_cl>section>audio {
        width: 100%;
    }

}

@media (max-width: 700px) {

    .audio_feedback_cl {
        width: 100%;
    }

    .audio_feedback_cl>section {
        width: 100%;
        border-radius: 0;
        padding-bottom: 5%;
    }

}

/* =============== МОДАЛЬНОЕ ОКНО ЗАГРУЗКИ =============== */

#download_modal_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

#download_modal_window_id>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vh;
}

#download_modal_window_id>div>div {
    width: 8vh;
    height: 8vh;
    background-image: url(../static/img/loading.gif);
    background-size: cover;
}

#download_modal_window_id>div>span {
    font-size: 5vh;
    font-weight: bold;
    color: white;
}

/* =============== НАШИ УСЛУГИ =============== */

.our_courses_cl {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 5vh;
    padding-bottom: 5vh;
    gap: 4vh;
}

.course_catalog_cl {
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3vw;
    padding-left: 2rem;
    padding-right: 2rem;
}

.course_unit_cl {
    width: 24%;
    height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    box-shadow: 3px 3px 6px black;

    padding-left: 1%;
    padding-right: 1%;
    padding-top: 1%;
    padding-bottom: 1%;

    border-radius: 1vw;
    transition: 300ms all;
}

.course_unit_cl>section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    background-image: url(./img/1.webp);
    background-size: cover;
    border-radius: 1vh;
    overflow: hidden;
}

.course_unit_cl>section>section {
    width: 100%;
    height: 100%;

    padding-left: 4%;
    padding-right: 4%;
    padding-top: 2%;
    padding-bottom: 4%;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    background: linear-gradient(15deg, #21183e, #21183e, #21183e7c, #21183e00);
    transition: 300ms all;
}

/* .course_unit_cl:hover > section > section {
    background-color: rgba(0, 0, 0, 0);
} */

.course_unit_cl:hover {
    background-color: #0b0b20;
}

.course_unit_cl>section>section>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.course_unit_cl>section>section>div:nth-child(1)>span:nth-child(1) {
    font-size: 3vh;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px black;
}

.course_unit_cl>section>section>div:nth-child(1)>span:nth-child(2) {
    font-size: 2.5vh;
    font-weight: bold;
    color: var(--accent);
    position: relative;
}

.course_unit_cl>section>section>div:nth-child(1)>span:nth-child(2)::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 2px;
    background: linear-gradient(to right, rgba(65, 105, 225, 0), var(--accent), rgba(65, 105, 225, 0));
}

.course_unit_cl>section>section>div:nth-child(2) {
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    margin-top: 30%;
}

.course_unit_cl>section>section>div:nth-child(2)>span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: normal;
    color: var(--gray_text_color);
}

.course_unit_cl>section>section>div:nth-child(2)>div:nth-child(2) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.course_unit_cl>section>section>div:nth-child(2)>div:nth-child(2)>span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: normal;
    color: var(--gray_text_color);
    text-shadow: 2px 2px 4px black;
}

.course_unit_cl>section>section>div:nth-child(2)>div:nth-child(2)>span:nth-child(2) {
    font-size: 2.5vh;
    font-weight: bold;
    color: var(--accent);
    text-shadow: 1px 1px 2px black;
}

.course_unit_cl>section>section>div:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 5vh;
    border-radius: 0.5vw;
    font-size: 2.5vh;
    color: white;
    background-color: var(--accent);
    transition: 300ms all;
}

.course_unit_cl>section>section>div:nth-child(3):hover {
    cursor: pointer;
    transform: translateY(-5px);
}

@media (max-width: 1000px) {
    .course_unit_cl {
        width: 30%;
    }
}

@media (max-width: 700px) {
    .course_unit_cl {
        width: 90%;
    }
}

/* =============== КАТАЛОГ =============== */

.catalog_course_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.catalog_sem_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.course_renderer_id {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vh;
}

#seminars_renderer_rest_id,
#seminars_renderer_id,
#seminars_renderer_rest_search_id {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 2vh;
}

.seminar_block_cl {
    background-image: url(./seminars/1.png);
    background-size: cover;
    background-position: 100% 35%;
    width: 37.5vw;
    height: 35vh;
    border-radius: 2vh;
    margin-bottom: 6vh;
    overflow: hidden;
    box-shadow: 5px 5px 10px black;
}

@media (max-width: 700px) {

    #seminars_renderer_rest_id,
    #seminars_renderer_id,
    #seminars_renderer_rest_search_id {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
}

.seminar_block_cl>div {
    width: 100%;
    height: 100%;
    background-color: var(--gray_line_color);
    padding: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background: linear-gradient(25deg, #0A0720, #0A0720, #0a072098, #0a07203a, #0a07203a);
}

.seminar_block_cl>div>span:nth-child(1) {
    font-size: 4vh;
    font-weight: bold;
    color: white;
}

@media (max-width: 700px) {
    .seminar_block_cl>div>span:nth-child(1) {
        font-size: 3vh;
    }
}

.seminar_block_cl>div>span:nth-child(2) {
    font-size: 3vh;
    color: white;
}

.seminar_block_cl>div>div:nth-child(3) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1vw;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.seminar_block_cl>div>div:nth-child(3)>div:nth-child(1) {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    background-image: url(./specialists/specialist_1.png);
    background-size: cover;
}

.seminar_block_cl>div>div:nth-child(3)>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
}

.seminar_block_cl>div>div:nth-child(3)>div:nth-child(2)>span:nth-child(1) {
    font-size: 3vh;
    font-weight: bold;
}

.seminar_block_cl>div>div:nth-child(3)>div:nth-child(2)>span:nth-child(2) {
    font-size: 2.5vh;
    color: var(--gray_text_color);
}

.seminar_block_cl>div>div:nth-child(4) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.seminar_block_cl>div>div:nth-child(4)>span {
    font-size: 2.5vh;
    color: var(--accent);
}

.seminar_block_cl>div>div:nth-child(4)>div {
    padding: 1vh;
    padding-left: 3vh;
    padding-right: 3vh;
    border-radius: 3vh;
    font-size: 2.5vh;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    opacity: 0;
    transition: 300ms all;
}

.seminar_block_cl>div:hover>div:nth-child(4)>div {
    cursor: pointer;
    opacity: 1;
}

@media (max-width: 700px) {

    .seminar_block_cl {
        width: 90%;
        height: 35vh;
        box-shadow: 2px 2px 5px black;
    }

    .seminar_block_cl>div>div:nth-child(4)>div {
        opacity: 1;
    }

}

.arti_block_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* --- публикация вопроса --- */

.issue_rendering_cl {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
    padding: 2.5%;
    border: 3px solid green;
    border-radius: 1vh;
    box-shadow: 0 0 2.5px green, 0 0 5px green;
}

.issue_rendering_cl>div {
    width: 8vh;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
    font-weight: bold;
    color: green;
    border: 3px solid green;
    box-shadow: 0 0 2.5px green, 0 0 5px green;
    border-radius: 1vh;
}

.issue_rendering_cl>span {
    width: calc(100% - 8vh - 2vw);
    font-size: 3vh;
    color: green;
    text-align: justify;
}

@media (max-width: 700px) {
    .issue_rendering_cl>div {
        width: 5vh;
        height: 5vh;
    }

    .issue_rendering_cl>span {
        font-size: 2vh;
    }
}

/* --- публикация ссылки --- */

.link_rendering_cl {
    width: '100%';
    font-size: 3vh;
    font-weight: bold;
    color: blue;
    text-align: start;
}

@media (max-width: 700px) {
    .footer_company_text_cl {
        font-size: 2vh;
        color: gray;
        text-align: center;
    }
}

.video_feedback_descp_cl {
    margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    /* Кол-во видимых строк */
    max-width: 100%;
}

.audio_feedback_descp_cl {
    margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    /* Кол-во видимых строк */
    max-width: 100%;
}

.more_button_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.more_button_cl>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}

.more_button_cl>div>span {
    font-size: 2vh;
    color: white;
    transition: 300ms all;
}

.more_button_cl>div>div {
    width: 2vh;
    height: 2vh;
    background-image: url(./img/arrow_button.png);
    background-size: cover;
    transition: 300ms all;
}

.more_button_cl>div:hover {
    cursor: pointer;
}

.more_button_cl>div:hover>span {
    color: var(--accent);
}

.more_button_cl>div:hover>div {
    background-image: url(./img/arrow_button_blue.png);
    transform: rotateZ(180deg);
}

/* --- публикация листа --- */

.list_rendering_cl {
    width: 90%;
    max-height: 8vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px dashed gray;
    border-radius: 5px;
    overflow: hidden;
    transition: 1000ms all;
}

.list_rendering_cl:hover {
    cursor: pointer;
    max-height: 500vh;
}

.list_rendering_cl>div {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.list_rendering_cl>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

.list_rendering_cl>div>div {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 0.5vh;
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    border: 2px solid gray;
    border-radius: 5px;
}

.list_rendering_cl>span {
    font-size: 3vh;
    color: gray;
}

/* =============== МОДАЛЬНОЕ ОКНО ПОКУПКИ =============== */

#purchase_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    opacity: 0;
    transition: 500ms all;
}

#purchase_window_id>div {
    width: 50vw;
    padding: 20px;
    background-color: var(--primary);
    border-radius: 6vh;
}

#back_x_from_the_tape_id {
    /* transform: translateY(-2vh) translateX(2vw); */
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5vh;
    font-weight: bold;
    color: white;
}

#back_x_from_the_tape_id:hover {
    cursor: pointer;
}

@media (max-width: 700px) {
    #back_x_from_the_tape_id {
        width: 6vh;
        height: 6vh;
        font-size: 3.5vh;
    }
}

.letters_to_you_two_cl {
    width: 100%;
    height: auto;
    padding: 2.5%;
    background: var(--gray_line_color);
    backdrop-filter: opacity(0.5);
    border-radius: 2vw;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 2vh;
}

/* письма вам */

.style_name_block_cl {
    width: 100%;
    font-size: 4vh;
    font-weight: bold;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.letters_to_you_two_cl>input {
    width: 100%;
    height: 5vh;
    border: 1px solid gray;
    border-radius: 1vh;
    background-color: var(--gray_line_color);
    font-size: 3vh;
    padding-left: 1vw;
    color: white;
}

.letters_to_you_two_cl>textarea {
    width: 100%;
    height: 20vh;
    border-radius: 1vh;
    background-color: var(--gray_line_color);
    font-size: 3vh;
    resize: none;
    padding-left: 1vw;
    color: white;
}

.letters_to_you_two_cl>section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#back_from_the_tape_id {
    padding: 1vh;
    padding-left: 4vh;
    padding-right: 4vh;
    border: 3px solid gray;
    border-radius: 1vh;
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#back_from_the_tape_id:hover {
    cursor: pointer;
}

@media (max-width: 700px) {
    #purchase_window_id>div {
        width: 90vw;
    }
}

.send_a_message_cl {
    padding: 1vh;
    padding-left: 4vh;
    padding-right: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1vh;
    background: linear-gradient(90deg, var(--accent), var(--accent), var(--accent), blueviolet);
    font-size: 2.5vh;
    font-weight: bold;
    transition: 300ms all;
}

.send_a_message_cl:hover {
    cursor: pointer;
    box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 40px blue;
}

/* =============== МОДАЛЬНОЕ ОКНО ОТВЕТА НА ЗАПИСЬ =============== */

#response_to_entry_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

#response_to_entry_id>div {
    width: 50vw;
    padding: 40px;
    background-color: var(--primary);
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#response_to_entry_id>div>div:nth-child(1) {
    width: 100px;
    height: 100px;
    background-image: url(./img/bot_icon.png);
    background-size: cover;
}

#response_to_entry_id>div>span:nth-child(2) {
    font-size: 4vh;
    font-weight: bold;
    color: var(--accent);
    text-align: center;
}

#response_to_entry_id>div>span:nth-child(3) {
    font-size: 3vh;
    color: white;
    text-align: center;
}

#response_to_entry_id>div>div:nth-child(4) {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 4px solid gray;
    border-radius: 10px;
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    margin-top: 25px;
}

#response_to_entry_id>div>div:nth-child(4):hover {
    cursor: pointer;
}

@media (max-width: 700px) {

    #response_to_entry_id>div {
        width: 90vw;
    }

    #response_to_entry_id>div>span:nth-child(2) {
        font-size: 3vh;
    }

    #response_to_entry_id>div>span:nth-child(3) {
        font-size: 2.25vh;
    }

    #response_to_entry_id>div>div:nth-child(4) {
        font-size: 2.25vh;
    }

}

/* ========== РЕЗУЛЬТАТ ПОИСКА ========== */

.our_courses_search_cl {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 15vh;
    padding-bottom: 5vh;
    gap: 4vh;
    background-color: var(--primary);
}

@media (max-width: 700px) {
    .our_courses_search_cl {
        gap: 1vh;
    }
}

.our_courses_search_cl>section {
    width: 100%;
    height: 70vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.our_courses_search_cl>section>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.catalog_names_cl {
    font-size: 6vh;
    font-weight: bold;
    /* background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    line-height: 1.2;
    animation: titleReveal 1s ease-out;
    text-align: center;
}

@media (max-width: 700px) {
    .catalog_names_cl {
        font-size: 4vh;
        margin-top: 3vh;
        margin-bottom: 3vh;
    }

    .our_courses_search_cl>section {
        width: 90%;
    }
}

/* =============== тублер темного и светлого режима =============== */

#subject_toggle_switch_id {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
}

#subject_toggle_switch_id:hover {
    cursor: pointer;
}

#subject_toggle_switch_id>div {
    width: 100px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    border-radius: 20px;
    border: 2px solid gray;
    padding-left: 5px;
    padding-right: 5px;
}

#subject_toggle_switch_id>div>div {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: var(--accent);
    background-image: url(./img/moon.png);
    background-size: cover;
    transform: translateX(0px);
    transition: 500ms all;
}

#subject_toggle_switch_id>span {
    font-size: 1.8vh;
    font-weight: bold;
    color: white;
}

@media (max-width: 700px) {

    #subject_toggle_switch_id {
        transform: translateX(-65px);
    }

    #subject_toggle_switch_id>div {
        width: 80px;
        height: 30px;
        border-radius: 15x;
        padding-left: 2.5px;
        padding-right: 2.5px;
    }

    #subject_toggle_switch_id>div>div {
        width: 25px;
        height: 25px;
        border-radius: 12.5px;
    }

    #subject_toggle_switch_id>span {
        font-size: 1.5vh;
    }
}
/* =============== МОДАЛЬНОЕ ОКНО РЕГИСТРАЦИИ =============== */

#regis_button_id,
#regis_button_mob_id {
    padding: 2.5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 2px solid gray;
    border-radius: 10px;
    font-size: 2vh;
    font-weight: bold;
    color: var(--accent);
    transform: translateY(-5px);
    transition: 300ms all;
}

#regis_button_id:hover,
#regis_button_mob_id:hover {
    filter: brightness(150%);
    border-color: var(--accent);
    cursor: pointer;
}

#registration_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 2000;
    transition: 500ms all;
}

#registration_window_id>div {
    background-color: var(--secondary);
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    margin-top: 80px;
}

#registration_window_id>div>div:nth-child(1) {
    width: 12vh;
    height: 12vh;
    background-image: url(./img/bot_icon.png);
    background-size: cover;
}

#registration_window_id>div>span:nth-child(2) {
    font-size: 3vh;
    font-weight: bold;
    color: white;
}

#registration_window_id>div>span:nth-child(3),
#registration_window_id>div>span:nth-child(5) {
    font-size: 2.5vh;
    color: white;
}

#registration_window_id>div>span:nth-child(8) {
    font-size: 2.5vh;
    color: gray;
    text-align: center;
}

#registration_window_id>div>span:nth-child(9) {
    font-size: 2.5vh;
    color: var(--accent);
    text-align: center;
}

.data_entry_unit {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 5px;
    padding-left: 5px;
    padding-right: 10px;
    width: 80%;
    height: 6vh;
    border: 2px solid gray;
    border-radius: 3vh;
    margin-top: 10px;
    margin-bottom: 20px;
}

.data_entry_unit>div {
    margin-left: 1vh;
    margin-right: 15px;
    width: 4vh;
    height: 4vh;
    background-image: url(./img/mail_icon.png);
    background-size: cover;
}

.data_entry_unit>input {
    border: none;
    width: 75%;
    font-size: 3.5vh;
    color: orange;
    background: none;
}

@media (max-width: 700px) {
    .data_entry_unit>input {
        font-size: 2.5vh;
    }
}

#registration_window_id>div>section {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

#registration_window_id>div>section>div:nth-child(1) {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
    border: 2px solid gray;
    transition: 300ms all;
}

#registration_window_id>div>section>div:nth-child(1):hover {
    border-color: var(--accent);
    color: var(--accent);
    cursor: pointer;
}

#registration_window_id>div>section>div:nth-child(2) {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 15px;
    border: 2px solid gray;
    transition: 300ms all;
}

#registration_window_id>div>section>div:nth-child(2):hover {
    border-color: var(--accent);
    color: var(--accent);
    cursor: pointer;
}

@media (max-width: 700px) {

    #registration_window_id>div {
        padding: 20px;
        margin-top: 100px;
    }

    #registration_window_id>div>section {
        width: 100%;
    }

    #registration_window_id>div>section>div:nth-child(1) {
        font-size: 1.8vh;
        padding-left: 10px;
        padding-right: 10px;
    }

    #registration_window_id>div>section>div:nth-child(2) {
        font-size: 1.8vh;
    }

    #registration_window_id>div>span:nth-child(2) {
        font-size: 3vh;
        font-weight: bold;
        color: white;
    }

    #registration_window_id>div>span:nth-child(3),
    #registration_window_id>div>span:nth-child(5) {
        line-height: normal;
    }

    #registration_window_id>div>span:nth-child(8) {
        line-height: normal;
    }

    #registration_window_id>div>span:nth-child(9) {
        line-height: normal;
    }

    .data_entry_unit {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #registration_window_id>div>section {
        margin-top: 10px;
    }

}

/* =============== МОДАЛЬНОЕ ОКНО ПОТВЕРЖДЕНИЯ ВХОДА/РЕГИСТРАЦИИ =============== */

#login_confirmation_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 500ms all;
}

#login_confirmation_id>div {
    background-color: var(--secondary);
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    margin-top: 80px;
}

#login_confirmation_id>div>div:nth-child(1) {
    width: 12vh;
    height: 12vh;
    background-image: url(./img/bot_icon.png);
    background-size: cover;
}

#login_confirmation_id>div>span:nth-child(2) {
    font-size: 3vh;
    color: var(--accent);
    text-align: center;
}

#login_confirmation_id>div>span:nth-child(3) {
    font-size: 2.5vh;
    color: gray;
    text-align: center;
}

#login_confirmation_id>div>div:nth-child(4) {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
    border: 2px solid gray;
    margin-top: 25px;
    transition: 300ms all;
}

#login_confirmation_id>div>div:nth-child(4):hover {
    border-color: var(--accent);
    color: var(--accent);
    cursor: pointer;
}

/* =============== МОДАЛЬНОЕ ОКНО ОЖИДАНИЯ РЕНДЕРА СТРАНИЦЫ =============== */

#page_rendering_waiting_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    transition: 500ms all;
}

#page_rendering_waiting_id>div {
    width: 20vh;
    height: 20vh;
    background-image: url(./img/bot_icon.png);
    background-size: cover;
    animation: pulseBrightness 1.5s infinite ease-in-out;
}

@keyframes pulseBrightness {
    0% {
        filter: brightness(50%);
    }

    50% {
        filter: brightness(150%);
    }

    100% {
        filter: brightness(50%);
    }
}

/* =============== МОДАЛЬНОЕ ОКНО ОЩИБКИ =============== */

#error_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2001;
}

#error_window_id>div {
    padding: 40px;
    border-radius: 2vh;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}


#error_window_id>div>span {
    font-size: 2vh;
    font-weight: bold;
    color: white;
    text-align: center;
}

#error_window_id>div>div {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 2vh;
    font-weight: bold;
    color: gray;
    border: 2px solid gray;
    border-radius: 15px;
}

#error_window_id>div>div:hover {
    cursor: pointer;
}

/* =============== МОДАЛЬНОЕ ОКНО ВВОДА ПАРОЛИ =============== */

#password_entry_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9000;
}

#password_entry_id > div {
    padding: 40px;
    background-color: var(--primary);
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#password_entry_id > div > span:nth-child(1) {
    font-size: 3vh;
    color: white;
    text-align: center;
}

#password_entry_id > div > section:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

#password_entry_id > div > section:nth-child(2) > input {
    width: 8vh;
    height: 8vh;
    background: none;
    border: 2px solid gray;
    border-radius: 1vh;
    color: orange;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
    font-weight: bold;
    text-align: center;
}

#password_entry_id > div > span:nth-child(3) {
    font-size: 2.5vh;
    color: red;
    text-align: center;
}

#password_entry_id > div > span:nth-child(4) {
    font-size: 2.5vh;
    color: gray;
    text-align: center;
}

#code_retry_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid gray;
    border-radius: 15px;
    font-size: 3vh;
    color: gray;
}

@media (max-width: 700px) {
    #code_retry_id {
        font-size: 2vh;
    }
}

#code_retry_id:hover {
    cursor: pointer;
}

#password_entry_back_id {
    position: absolute;
    transform: translateX(15vw) translateY(-8vh);
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
    font-weight: bold;
    color: white;
}

@media (max-width: 700px) {
    #password_entry_back_id {
        transform: translateX(45vw) translateY(-8vh);
    }
}

#password_entry_back_id:hover {
    cursor: pointer;
}

/* =============== МОДАЛЬНОЕ ОКНО ВЫХОДА ИЗ ПРОФИЛЯ =============== */

#profile_exit_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

#profile_exit_window_id>div {
    padding: 40px;
    border-radius: 2vh;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#profile_exit_window_id>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: white;
    margin-bottom: 5vh;
    text-align: center;
}

#profile_exit_window_id>div>section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

#profile_exit_window_back_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid gray;
    border-radius: 15px;
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#profile_exit_window_back_id:hover {
    cursor: pointer;
}

#profile_exit_window_yes_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid red;
    border-radius: 15px;
    font-size: 3vh;
    font-weight: bold;
    color: red;
}

#profile_exit_window_yes_id:hover {
    cursor: pointer;
}

/* =============== ОСТАВИТЬ ОТЗЫВ =============== */ 

#leave_feedback_id {
    width: 100%;
    display: none;
    padding: 1rem 1rem;
    background: linear-gradient(45deg, var(--accent), var(--purple));
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 5vh;
    text-align: center;
}

#leave_feedback_id::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

#leave_feedback_id:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(65, 105, 225, 0.4);
}

#leave_feedback_id:hover::before {
    left: 100%;
}

#feedback_area_id {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 15px;
}

.recall_unit_cl {
    width: 100%;
    border: 1px dashed gray;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
}

.recall_unit_cl > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.recall_unit_cl > div > span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: bold;
    color: var(--accent);
}

.recall_unit_cl > div > span:nth-child(2) {
    font-size: 1.8vh;
    font-weight: bold;
    color: gray;
}

.recall_unit_cl > span:nth-child(2) {
    font-size: 2vh;
    font-weight: bold;
    color: gray;
    text-align: justify;
}

/* =============== МОДАЛЬНОЕ ОКНО УСТАНОВКИ ОТЗЫВА =============== */

#feedback_input_box_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

#feedback_input_box_id>div{
    padding: 40px;
    border-radius: 2vh;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#feedback_input_box_id>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: white;
    margin-bottom: 2.5vh;
    text-align: center;
}

#feedback_input_box_id>div>textarea {
    width: 40vw;
    height: 20vh;
    background: none;
    font-size: 2.5vh;
    color: orange;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 2.5vh;
}

#feedback_input_box_id>div>section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

#feedback_input_box_back_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid gray;
    border-radius: 15px;
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#feedback_input_box_back_id:hover {
    cursor: pointer;
}

#feedback_input_box_go_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid green;
    border-radius: 15px;
    font-size: 3vh;
    font-weight: bold;
    color: green;
}

#feedback_input_box_go_id:hover {
    cursor: pointer;
}

/* =============== МОДАЛЬНОЕ ОКНО ПОЗДРАВЛЕНИЯ С ОТЗЫВОМ =============== */

#review_greeting_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

#review_greeting_id>div{
    padding: 40px;
    border-radius: 2vh;
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#review_greeting_id>div>div {
    width: 10vh;
    height: 10vh;
    background-image: url(./img/bot_icon.png);
    background-size: cover;
}

#review_greeting_id>div>span {
    font-size: 3.5vh;
    color: green;
    text-align: center;
}

#review_greeting_id>div>section {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid gray;
    border-radius: 15px;
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    margin-top: 5vh;
}

#review_greeting_id>div>section:hover {
    cursor: pointer;
}

/* =============== РЕКЛАМА =============== */

.advertising_area_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    /* border-radius: 2vh; */
    background-color: var(--secondary);
}

.advertising_area_cl>div:nth-child(1) {
    width: 100%;
    height: 20vh;
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
}

.advertising_area_cl>div:nth-child(1)>div{
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: var(--accent);
    font-size: 2vh;
    font-weight: bolder;
    color: white;
    transition: 300ms all;
    margin-right: 5px;
    margin-bottom: 5px;
    opacity: 0.25;
}

.advertising_area_cl>div:nth-child(1):hover>div{
    opacity: 1;
}

.advertising_area_cl>div:nth-child(1)>div:hover {
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
}

.advertising_area_cl>span:nth-child(2) {
    width: 100%;
    font-size: 3vh;
    font-weight: bold;
    color: var(--accent);
}

.advertising_area_cl>span:nth-child(3) {
    width: 100%;
    font-size: 2.5vh;
    color: gray;
}

@media (max-width: 700px) {

    .advertising_area_cl>div:nth-child(1) {
        height: 30vh;
    }

    .advertising_area_cl>span:nth-child(2) {
        font-size: 2.5vh;
    }

    .advertising_area_cl>span:nth-child(3) {
        font-size: 2vh;
    }

    .advertising_area_cl>div:nth-child(1)>div {
        opacity: 1;
    }

}

/* SEO БЛОКИ */

#seo_zone_id {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* --- смотреть далее (услуги, семинары, курсы) --- */

#further_cours_id, #further_servis_id, #further_semin_id {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
}

#further_cours_id > div, #further_servis_id > div, #further_semin_id > div {
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border: 2px dashed gray;
    border-radius: 10px;
    font-size: 3vh;
    color: gray;
    transition: 300ms all;
}

#further_cours_id > div:hover, #further_servis_id > div:hover, #further_semin_id > div:hover {
    cursor: pointer;
    border-color: var(--accent);
    color: var(--accent);
}

/* =============== ТЕГИ =============== */

#tag_block_id {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

#tag_block_id>div{
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    background: gray;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    transition: 300ms all;
}

#tag_block_id>div:hover{
    background: var(--accent);
    cursor: pointer;
}

/* --- согласие на обработку персональных данных --- */

.consent_to_processing_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.consent_to_processing_cl>div{
    width: 3vh;
    height: 3vh;
    border: 2px solid gray;
    border-radius: 5px;
    background-size: 80%;
    background-position: 50% 50%;
}

.consent_to_processing_cl>div {
    cursor: pointer;
}

.consent_to_processing_cl>span:nth-child(2){
    width: 80%;
    font-size: 1.75vh;
    color: gray;
}

.consent_to_processing_cl>span:nth-child(3){
    font-size: 1.75vh;
    color: var(--accent);
    text-decoration: underline;
}

.consent_to_processing_cl>span:nth-child(3):hover{
    cursor: pointer;
}

/* =============== СМОТРЕТЬ СОГЛАШЕНИЕ =============== */

#view_agreement_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2002;
}

#view_agreement_id>div {
    width: 50%;
    background-color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 2vh;
    margin: 10px;
}

#view_agreement_id>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
}

#view_agreement_id>div>section {
    display: flex;
    height: 60vh;
    overflow-y: scroll;
}

#view_agreement_id>div>section>span{
    font-size: 2.5vh;
    color: black;
    text-align: justify;
}

#view_agreement_id>div>div{
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 2vh;
    font-weight: bold;
    color: gray;
    border: 2px solid gray;
    border-radius: 10px;
}

#view_agreement_id>div>div:hover {
    cursor: pointer;
    color: black;
    border-color: gray;
}

@media (max-width: 700px) {

    #view_agreement_id>div {
        width: 90%;
        padding: 20px;
    }

    #view_agreement_id>div>span {
        font-size: 2.25vh;
    }

    #view_agreement_id>div>section>span {
        font-size: 1.8vh;
        color: black;
        text-align: justify;
    }

}

@media (max-width: 700px) {

    #text_red_main_one_id {
        font-size: 1vh;
        font-weight: normal;
        width: 100%;
        padding: 0.5vh;
        padding-left: 1vh;
        padding-right: 1vh;
    }

}

/* --- Бегущая строка --- */

.moving_inscription_cl {
    position: fixed;
    top: 12vh;
    left: 0;
    width: 100vw;
    overflow: hidden;
    white-space: nowrap;
    z-index: 100;
}

.moving_text_cl {
    display: inline-block;
    padding-left: 100%;
    animation: moveText 25s linear infinite;
}

.moving_text_cl>span{
    font-size: 4vh;
    font-weight: bold;
    color: gray;
}

.moving_text_cl>a{
    font-size: 4vh;
}

@keyframes moveText {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media (max-width: 700px) {
    .moving_inscription_cl {
        top: 22vh;
        font-size: 3vh;
    }
}

/* =============== ПЕРЕСЫЛКИ =============== */

.forwarding_cl {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.forwarding_cl>b {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

.forwarding_cl>span{
    font-size: 2.5vh;
    color: gray;
    text-indent: 20px;
    transition: 300ms all;
}

.forwarding_cl>span:hover {
    cursor: pointer;
    color: blue;
}

/* =============== РЕКОМЕНДАЦИИ =============== */

.recommendations_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.recommendations_cl>span{
    font-size: 4vh;
    font-weight: bold;
    color: gray;
}

.recommendations_cl>article {
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* #services_renderer_restr_id>section, #course_renderer_rest_id>section{
    width: 35%;
} */