*,p,div,ul,li,ol,span,h1,h2,h3,h4,img{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #FFF;
    font-family: SF Pro Display;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    color: #061310;
    font-feature-settings: 'clig' off, 'liga' off;
}
.wrapper{
    overflow: hidden;
}
.container{
    max-width: 1440px;
    padding: 0 48px;
}

.modal-backdrop.show{
    opacity: .06;
}
.modal-content{
    border: none;
}
/* HEADER */

.py-6{
    padding: 32px 0 !important;
}
header{
    padding: 20px 0;
}
header.with_shadow{
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 2;
}
.navbar{
    padding: 0;
}
.navbar-brand{
    margin: 0 64px 0 0;
    padding: 0;
}
.navbar-nav .nav-link{
    font-size: 0.875rem;    
    line-height: 130%;
    color: #061310;
    text-decoration: none;
    display: block;
    padding: 15px 16px !important;
}
header .header_right{
    gap: 16px;
}
header .header_right .link_messenger{
    width: 48px;
    height: 48px;
    padding: 12px;
}
header .header_right .link_profile{
    border: none;
    outline: none;
    background: transparent;
}
header .header_right .link_profile img{
    border-radius: 50%;
    width: 46px;
    height: 46px;
    object-fit: cover;
    object-position: center;
}
.btn_{
    padding: 14px 28px;
    border-radius: 100px;
    font-size: 0.875rem;
    line-height: 130%;
    text-decoration: none;
    background-color: transparent;
    display: inline-block;
}
.header_right .to_login{
    background-color: #329A80;
    color: #FFF;
}
.header_right .to_reg{
    border: 1px solid #666;
    color: #061310;
}
.hero_title{
    font-size: 4rem;
    font-weight: 500;
    line-height: 100%;
    color: #061310;
    margin: 0 0 24px 0;
}
.hero_title.with_chatgpt{
    position: relative;
    display: inline-block;
}
.hero_title.with_chatgpt::before{
    position: absolute;
    top: 0;
    right: -8px;
    content: 'ChatGPT';
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #FFF;
    padding: 4px 10px;
    border-radius: 100px;
    background: #65CD76;
    transform: translate(100%,0);
}
.hero_title span,
.section_title span{
    background: linear-gradient(91deg, #8F31E3 -7.65%, #4447E3 110.69%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section_title{
    color: #202020;
    font-size: 2.875rem;
    font-weight: 400;
    line-height: 90%;
    margin: 0 0 24px 0;
}
.section_desc{
    margin: 0 0 32px 0;
}
.hero{
    position: relative;
    padding: 0 0 112px 0;
}
.hero::after{
    position: absolute;
    content: "";
    width: 625.879px;
    height: 607.717px;
    flex-shrink: 0;
    border-radius: 0px 0px 0px 120px;
    background: #F3B438;
    top: 0;
    right: 0;
    transform: translate(51%,155px) rotate(45deg);
    z-index: -1;
}
.hero .hero_title.with_chatgpt{
    margin-top: 33px;
}
.hero .ai{
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 130%;
    margin: 0 0 24px 0;
}
.hero .hero_image{
    width: 282px;
    height: 339px;
}
.btn_join{
    padding: 14px 28px;
    border-radius: 8px;
    background: linear-gradient(91deg, #8F31E3 -7.65%, #4447E3 110.69%);
    line-height: 120%;
    font-size: 1rem;
    color: #FFF;
}
.btn_join:hover{
    color: #FFF;
}
.intl-tel-input .selected-flag .iti-arrow{
    border: none;
    background: url(../img/iti_arrow.png);
    width: 12px;
    height: 12px;
    top: 33%;
    margin-top: 0px;
    right: 0px;
}
.hero .story_row{
    margin: 64px 0 0 0;
    gap: 12px;
}
.index1 .hero .story_row{
    padding-left: 72px;
}
.story_row .story_item{
    position: relative;
}
.story_row .story_item img{
    width: 216px;
    height: 216px;
    padding: 4px;
    border-radius: 16px;
    border: 2px solid #65CD76;
    object-fit: cover;
    object-position: center;
}
.story_row .story_item .story_text{
    position: absolute;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    text-decoration: none;
    color: #FFF;
    bottom: 22px;
    left: 22px;
    right: 22px;
}
.story_row .story_item::before{
    position: absolute;    
    height: 49px;
    bottom: 6px;
    left: 6px;
    right: 6px;     
    content: "";
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.00) 0%, rgba(0, 0, 0, 0.64) 100%);
    border-radius: 0 0 8px 8px;
}

.advantage{
    padding: 120px 0 80px 0;
    position: relative;
}
.advantage::before{
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    width: 510px;
    height: 510px;
    transform: translate(-50%,-50%) rotate(45deg);
    flex-shrink: 0;
    border-radius: 0px 120px 0px 0px;
    background: #F3387B;
    z-index: -1;
}
.advantage .container,
.for_sutents .container,
.for_teachers .container{
    padding: 0 120px;
}
.advantage .section_title{
    margin: 0 0 24px 0;
}
.advantage .section_desc{
    margin: 0 0 48px 0;
}
.adv_row{
    gap: 48px;
}
.advantage .adv_item{
    width: 265px;
    padding: 24px;
    border-radius: 16px;
    background:#FFF;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.40);    
    gap: 16px;
    text-align: center;
}
.advantage .adv_item .adv_item_title{
    font-size: 1.5rem;    
    font-weight: 500;
    line-height: 110%;
}
.advantage .adv_item .adv_item_desc{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.for_sutents{
    padding: 120px 0;
    position: relative;
}
.for_sutents::after{
    position: absolute;
    right: 0;
    top: 50%;
    content: "";
    width: 510px;
    height: 510px;
    transform: translate(50%,-50%) rotate(45deg);
    border-radius: 0px 0px 0px 120px;
    background: #3878F3;
    z-index: -1;
}
.for_sutents .student_block{
    gap: 48px;    
}
.adv_image{
    height: 344px;
    width: 426px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}
.for_teachers{
    padding: 120px 0;
    position: relative;
}
.for_teachers::before{
    position: absolute;
    left: 0;
    top: 50%;
    content: "";
    width: 510px;
    height: 510px;
    transform: translate(-50%,-50%) rotate(45deg);
    border-radius: 0px 120px 0px 0px;
    background: #F3B438;
    z-index: -1;
}
.for_teachers .teacher_block{
    gap: 48px;    
    justify-content: flex-end;
}
.for_teachers .teacher_block .adv_image{
    object-position: 52% 0%;
}
.teachers_slide{
    padding: 120px 0 85px 0;
}
.teachers_slide .section_title{
    text-align: center;
}
.swiper7{
    padding: 44px 0 64px 228px;
    width: 100%;
    height: 100%;
    position: relative;
}
.swiper7 .swiper-slide {
    width: auto;
}
.swiper7 .swiper-slide img{
    width: 322px;
    height: 423px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
}
.swiper7 .swiper-slide .teacher_name{
    gap: 8px;
    color: #061310;
    text-decoration: none;
    margin: 32px 0 12px 0;
}
.swiper7 .swiper-slide .teacher_name img{
    width: 16px;
    height: 16px;
    border-radius: 0;
}
.swiper7 .swiper-slide .teacher_job{
    font-size: 1rem;
    line-height: 120%;
    color: #666;
}
.swiper7 .swiper_prev,
.swiper7 .swiper_next{
    position: absolute;
    top: 38%;
    cursor: pointer;
    opacity: 1;
    z-index: 2;
    transition: .3s all ease;
}
.swiper7 .swiper_prev.swiper-button-disabled,
.swiper7 .swiper_next.swiper-button-disabled{
    opacity: 0;
    cursor: auto;
}
.swiper7 .swiper_prev{
    left: 0%;
    rotate: 180deg;
}
.swiper7 .swiper_next{
    right: 0%;
}
.teachers_slide .btn_join{
    background: #329A80;
    padding: 15.5px 69px;
}
.feedback{
    padding: 88px 0 72px 0;
    position: relative;
}
.block_bg + main .feedback,
.modal .feedback{
    padding: 0;
}
.block_bg + main .feedback::before,
.modal .feedback::before{
    display: none;
}
.feedback::before{
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    width: 510px;
    height: 510px;
    transform: translate(-50%,-50%) rotate(45deg);
    flex-shrink: 0;
    border-radius: 0px 120px 0px 0px;
    background: #3878F3;
    z-index: -1;
}
.feedback .section_title{
    margin: 0 0 32px 372px;
}
.swiper_navigation{
    gap: 40px;
}
.feedback .swiper_navigation a{
    color: #7C7C7C;
    font-size: 0.875rem;    
    font-weight: 600;
    line-height: 130%;
    text-decoration: none;
}
.feedback .swiper_navigation img{
    cursor: pointer;
}
.section_title .swiper_navigation img{
    opacity: 1;
    transition: .3s all ease;
}
.section_title .swiper_navigation img.swiper-button-disabled{
    opacity: 0.3;
}
.d-flex:has(.swiper8){
    margin: 0 0 0 364px;
}
.container:has(.swiper8){
    padding-right: 148px;
}
.swiper8{    
    overflow-x: visible;
}
.feedback .swiper-slide:has(.feedback_item){
    width: auto;
}
.feedback .feedback_item{
    padding: 32px 24px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.11);
    max-width: 434px;
}
.feedback .feedback_item .f_main_text{
    font-size: 1rem;    
    line-height: 120%;
    color: #666;
    margin: 0 0 40px 0;
}
.feedback .feedback_item .person{
    gap: 12px;
}
.feedback .feedback_item img{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    flex: 0 0 auto;
}
.feedback .feedback_item .person .flex-column{
    gap: 4px;
}
.feedback .feedback_item .person_name{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #061310;
}
.feedback .feedback_item .person_job{
    color: #747474;
    font-size: 0.875rem;
    line-height: 130%;
}
.status{
    padding: 88px 0 85px 0;
    position: relative;
}
.status .section_desc{
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    color: #666;
}
.status .status_main{
    font-size: 7.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    background: linear-gradient(91deg, #8F31E3 -7.65%, #4447E3 110.69%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 24px 0;
}
.status .btn_join{
    margin: 66px 0 0 0;
    background: #329A80;
    padding: 15.5px 90.3px;
}
.status .fragment{
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    max-width: 121px;
    max-height: 121px;
    width: 100%;
    height: 100%;
    position: absolute;
}
.status .fragment1{
    left: 20%;
    top: 32%;
    max-width: 45px;
    max-height: 45px;
}
.status .fragment2{
    left: 13%;
    top: 53%;
    max-width: 95px;
    max-height: 95px;
}
.status .fragment3{
    left: 21%;
    top: 63%;
    object-position: center;
}
.status .fragment4{
    right: 20%;
    top: 9%;
}
.status .fragment5{
    right: 14%;
    top: 30%;
    max-width: 95px;
    max-height: 95px;
}
.status .fragment6{
    right: 15%;
    top: 75%;
    max-width: 45px;
    max-height: 45px;
    object-position: center;
}
footer{
    padding: 64px 0 32px 0;
    background: #111;
}
footer .footer_top{
    margin: 0 0 64px 0;
}
footer ul{
    list-style: none;
}
footer .footer_links{
    gap: 120px;
}
.footer_links ul{
    gap: 24px;
}
.footer_links ul li:first-child{
    margin: 0 0 8px 0;
    color: #FFF;
}
.footer_links ul a{
    font-size: 1rem;
    line-height: 120%;
    color: #666;
    text-decoration: none;
}
footer .social{
    gap: 55px;
}
footer .media{
    gap: 21px;
}
footer .media a{
    display: flex;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    border-radius: 54.366px;
    border: 0.544px solid #DADADA;
}
footer .media img{
    width: 22px;
    height: 22px;
}
footer .download_on{
    gap: 24px;
}
footer .main_links{
    gap: 64px;
    align-items: flex-end;
}
footer .main_links a{
    font-size: 0.875rem;
    line-height: 130%;
    color: #FFF;
    text-decoration: none;
}

.hero{
    padding: 118px 0 88px 0;    
}
.index1 .hero{
    padding-top: 77px;
}
.index1 .hero .hero_row{
    padding: 0 185px 0 72px;
}
.index2 .hero{
    position: relative;
}
.index2 .advantage1 .container{
    padding: 0 168px;
}
.index2 .advantage1 .adv_row{
    justify-content: flex-end;
}
.index2 .advantage1 .adv_row .adv_left{
    width: 36%;
}
.index2 .advantage1 .adv_image{
    height: 344px;
}
.index2 .hero::before,
.index3 .hero::before{
    position: absolute;
    content: "";
    background-image: url(../img/hero_before.png);
    left: 0%;
    top: 36%;
    width: 502.833px;
    height: 431px;
    z-index: -1;
}
.index3 .hero::before{
    background-image: url(../img/hero_before2.png);
    width: 419px;
    left: 0;
    top: 45%;
}
.index2 .hero::after,
.index3 .hero::after{
    position: absolute;
    content: "";
    background-image: url(../img/hero_after.png);
    right: 0%;
    top: 36%;
    width: 502.833px;
    height: 431px;
    z-index: -1;
    transform: none;
    border-radius: 0;
    background-color: transparent;
}
.index3 .hero::after{
    background-image: url(../img/hero_after2.png);
    width: 420px;
    right: 0;
    top: 45%;
}
.sub_title{
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 130%;
    background: linear-gradient(91deg, #8F31E3 -7.65%, #4447E3 110.69%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 8px 0;
}
.section_desc.small_desc{
    font-size: 0.875rem;    
    line-height: 130%;
    margin: 0 0 32px 0;
}
.hero .hero_image2{
    width: 868px;
    height: 418px;
    border-radius: 24px 24px 0px 0px;
    border: 16px solid #E9EFED;
    border-bottom: none;
    margin: 101px 0 0 0;
    object-fit: cover;
    object-position: 0 10%;
}
.index2 .adv_image{
    width: 402px;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.index2 .advantage{
    padding: 120px 0 27px 0;
}
.index2 .advantage::before{
    background: #F3B438;
}
.index2 .advantage .section_title,
.index3 .advantage .section_title{
    margin-left: 0;
}
.index2 .advantage .section_desc,
.index3 .advantage .section_desc{
    margin-left: 0;
}
.advantage ul li,
.advantage2 ul li{
    font-size: 1rem;
    line-height: 120%;
    margin: 0 0 12px;
    position: relative;
    list-style: none;
    padding: 0 0 0 56px;
}
.advantage ul li:last-child,
.advantage2 ul li:last-child{
    margin: 0;
}
.advantage ul li::before,
.advantage2 ul li::before{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #061310;
    left: 16px;
    top: 50%;
    transform: translate(0, -50%);
}
.section_desc.small_desc2{
    color: #666;
    font-size: 1rem;
    line-height: 120%;
}
.advantage .adv_row .adv_left{
    width: 41%;
}
.advantage2{
    padding: 120px 0 72px 0;
    position: relative;
}
.index2 .advantage2 .container{
    padding: 0 120px;
}
.advantage2::after{
    position: absolute;
    right: 0;
    top: 50%;
    content: "";
    width: 510px;
    height: 510px;
    transform: translate(50%,-50%) rotate(45deg);
    border-radius: 0px 0px 0px 120px;
    background: #F3387B;
    z-index: -1;
}
.advantage2 .adv_row{
    gap: 48px;    
}
.advantage2 .adv_row .adv_left{
    width: 33.5%;
}
.index2 .advantage2 .adv_row .adv_left {
    width: 37%;
}
.advantage2 .adv_row .adv_image{
    height: 418px;
}
.index2 .advantage3 .container{
    padding: 0 168px;
}
.index2 .advantage3::before{
    background-color:#3878F3;
}
.index2 .advantage3 .adv_row{
    justify-content: flex-end;
}
.index2 .advantage3 .adv_row .adv_left {
    width: 37%;
}
.advantage3 .adv_row .adv_left {
    width: 42%;
}
.advantage4 .adv_row .adv_left{
    width: 36%;
}
.advantage4 .adv_row .adv_image{
    padding: 0 58.5px;
}
.advantage4::after{
    background-color:#F3B438;
}
.index2 .feedback::before{
    display: none;
}
.hero .hero_main{
    margin: 122px 0 64px 0;
}
.preference{
    gap: 16px;
    justify-content: center;
}
.preference .prefer_item{
    padding: 24px;
    border-radius: 24px;
    background:#FFF;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.40);
    gap: 24px;
    align-items: center;
    width: calc(20% - 12.8px);
    max-width: 220px;
}
.preference .prefer_item p{
    width: 172px;
}
.index3 .advantage .adv_row{
    margin-left: 0;
    justify-content: flex-start;
}
.index3 .advantage::before{
    display: none;
}
.index3 .advantage::after{
    position: absolute;
    right: 0;
    top: 50%;
    content: "";
    width: 510px;
    height: 510px;
    transform: translate(50%,-50%) rotate(45deg);
    border-radius: 0px 0px 0px 120px;
    background: #F3B438;
    z-index: -1;    
}
.index3 .advantage{
    padding: 120px 0 44px 0;
}
.index3 .advantage .adv_row .adv_left {
    width: 30%;
}
.index3 .advantage1 .adv_row .adv_left{
    width: 34%;
}
.index3 .advantage2::before{
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    width: 510px;
    height: 510px;
    transform: translate(-50%,-50%) rotate(45deg);
    flex-shrink: 0;
    border-radius: 0px 120px 0px 0px;
    background: #F3387B;
    z-index: -1;
}
.index3 .advantage2{
    padding: 120px 0 89px 0;
}
.index3 .advantage2 .container{
    padding: 0 270px;
}
.index3 .advantage2::after{
    display: none;
}
.index3 .advantage2 .adv_row{
    justify-content: flex-end;
}
.index3 .advantage2 .adv_row .adv_left{
    width: 67%;
}
.index3 .advantage3 .adv_image{
    width: 300px;
    height: 276px;        
}
.index3 .advantage3{
    padding: 120px 0 65px 0;    
}
.index3 .advantage3::after{
    position: absolute;
    right: 0;
    top: 50%;
    content: "";
    width: 510px;
    height: 510px;
    transform: translate(50%,-50%) rotate(45deg);
    border-radius: 0px 0px 0px 120px;
    background: #3878F3;
    z-index: -1;
}
.index3 .advantage3 .adv_row .adv_left{
    width: 42%;
}
.index3 .advantage4{
    padding: 120px 0 58px 0;
}
.index3 .advantage4::before{
    background: #F3B438;
}
.index3 .advantage5{
    padding: 120px 0 68px 0;
}
.index3 .advantage5::after{
    background: #F3387B;
}


.interaction{
    padding: 120px 0 173px 0;
    position: relative;
}
.interaction::before{
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    width: 510px;
    height: 510px;
    transform: translate(-50%,-50%) rotate(45deg);
    flex-shrink: 0;
    border-radius: 0px 120px 0px 0px;
    background: #3878F3;
    z-index: -1;
}
.interaction .container{
    padding: 0 120px;
}
.interaction .inter_row{
    gap: 64px;
    justify-content: flex-end;
}
.interaction .inter_right{
    gap: 48px;
    width: 38%;
    max-width: 876px;
}
.interaction .inter_item{
    width: calc(50% - 24px);    
}
.interaction .inter_item .inter_title{
    font-weight: 600;
    line-height: 130%;
    margin: 0 0 16px 0;
}
.interaction .inter_item p{
    font-size: 1rem;    
    line-height: 120%
}

.price{
    padding: 88px 0;
}
.price .section_desc{
    font-size: 1rem;
    line-height: 120%;
}
.index3 .feedback{
    padding: 88px 0;
}
.index3 .feedback::before{
    display: none;
}
.index3 .feedback .section_title{
    margin-left: 0;
}

.index3 .container:has(.swiper8){
    padding: 0 120px
}


@import 'img/checkbox_checked.svg';
.gap-2{
    gap: 2px;
}

main.with_menus{
    margin: 0 0 64px 0;
}
.authentication form{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100svh - 84px);
    gap: 38px;
}
.authentication .login_title{
    font-size: 1.75rem;
    line-height: 130%;
}
.authentication .login_desc{
    color: #666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    margin: 0 0 32px 0;
}
.authentication .form_group{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 32px 0;
    position: relative;
}
.authentication .form_group p{
    font-size: 0.875rem;
    line-height: 130%;
}
.authentication .form_group input{
    font-family: 'SF Pro Display', sans-serif;
    font-feature-settings: 'clig' off, 'liga' off;
    padding: 8px 16px;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border-bottom: 1px solid #E6E6E6;
    border-radius: 0;
}
.authentication .form_group input::placeholder{
    color: #666;
}
.authentication .form_group span:has(.password){
    position: relative;
    border-bottom: 1px solid #E6E6E6;
}
.authentication .form_group span:has(.password) input{
    border: none;
    width: calc(100% - 34px);
}
.authentication .form_group span:has(.password) img{
    position: absolute;
    top: 50%;
    right: 16px;
    cursor: pointer;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transition: .3s all ease;
    transform: translate(0%, -50%);
}
.authentication .form_group span:has(.password) img.active{
    visibility: visible;
    opacity: 1;
}
.authentication .form_group label{
    display: block;
    color: #D72D31;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    position: absolute;
    bottom: -23px;
}
.authentication .form_group input.error+label{
    display: block;
}
.form_group.phone .d-flex,
.form_group .phone .d-flex{    
    border-bottom: 1px solid #E6E6E6;
    padding: 6px 16px;
}
.form_group.phone img,
.form_group .phone img{
    position: static;
    width: 24px;
    height: 15px;
    opacity: 1;
    visibility: visible;
}
.form_group.phone input,
.form_group .phone input{
    border: none;
    padding: 0 0 0 16px;
    max-width: 180px;
}
.form_group.phone select,
.form_group .phone select{
    border: none;
    outline: none;
    cursor: pointer;
    margin: 0 0 0 14px;
    padding: 0 17px 0 0;
    width: 38px;
    background-image: url(../img/select_arrow.png);
    background-repeat: no-repeat;
    background-position: 24px center;
    color: #666;
    appearance: none;
    background-color: transparent;
}
.authentication .remember_me{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.authentication .remember_me label{
    position: relative;
    display: block;
    cursor: pointer;
    user-select: none;    
    padding: 0 0 0 32px;
}
.authentication .remember_me input{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    cursor: pointer;
}
.authentication .remember_me .checkmark{
    position: absolute;
    background-image: url(../img/checkbox.svg);
    width: 24px;
    height: 24px;
    left: 0;
    top: -2px;
}
.authentication .remember_me label input:checked ~ .checkmark{
    background-image: url(../img/checkbox_checked.svg);
}
.authentication .remember_me p{
    display: flex;
    align-items: center;
    gap: 10px;
}
.authentication .remember_me p,
.authentication .remember_me a{
    color: #061310;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.authentication .login_footer{        
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 0 16px 0;
}
.authentication .login_footer button{
    height: 54px;
    padding: 8px 24px;
    width: 343px;
    border-radius: 100px;
    background: #329A80;
    color: #FFF;
    font-family: SF Pro Display;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    cursor: pointer;
    border: none;
    outline: none;
}
.authentication .footer_text{
    color: #B8B8B8;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    text-decoration: none;
}
.authentication .footer_text a{
    color: #329A80;
    text-decoration: none;
}

section{
    padding: 0 0 32px 0;    
}
/* section:last-child{
    padding-bottom: 0;
} */
.menus{
    position: fixed;
    bottom: 0;
    left: 0;
    background: #FFF;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 3;
}
.menus li{
    list-style: none;
}
.menus a{
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 130%;
    color: #999;
    padding: 10px 25px;
    text-decoration: none;
    transition: .3s all ease;
}
.menus a.active{
    color: #061310;
}
.menus a img{
    opacity: .3;
    transition: .3s all ease;
}
.menus a.active img{
    opacity: 1;
}
/* INDEX */
.header_row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header_right{
    margin: 0 -4px 0 0;
}
.search_wrap{
    position: relative;
    overflow: hidden;
}
.search_wrap.no_reg input{
    max-width: 299px;
    width: 299px;
}
.search_wrap input{
    border-radius: 100px;
    border: 1.5px solid #E6E6E6;
    padding: 12px 48px 12px 48px;
    outline: none;
    background-image: url(../img/search.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    font-family: SF Pro Display;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    max-width: 248px;
    width: 100%;
    height: 48px;
    font-feature-settings: 'clig' off, 'liga' off;
    transition: .2s all ease;
}
.search_wrap input:focus-visible{
    border-color: #257460;
}
.search_wrap img{
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translate(0%, -50%);
    transition: .3s all ease;
    cursor: pointer;
}
.search_wrap:has(.typing) img{
    right: 15px;
}

header.auth_header{
    margin: 0 0 24px 0;
    padding: 17px 0;
}
.block_title{
    color: #061310;
    line-height: 130%;
    margin: 0 0 16px 0;
    font-size: 1.125rem;
    font-weight: 600;
}
.block_title .products_count{
    margin: 4px 0 0 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #061310;
}
.stories .block_title{
    margin-top: 20px;
    padding: 0 0 0 16px;
}

.categories_row{
    display: flex;
    align-items: center;
    width: 100%;
    overflow: auto;
    gap: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0 0 32px 0;
}
.categories_row::-webkit-scrollbar {
    display: none;
}
.categories_row a{
    padding: 12px 16px;
    border-radius: 100px;
    border: 1.5px solid #DADADA;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #000;
    text-decoration: none;
    transition: .3s all ease;
    gap: 3px;
}
.categories_row a.active{
    background: rgba(50, 154, 128, 0.16);
    color: #329A80;
    border-color: transparent;
}
.categories_row a span{
    color: #329A80;
}
.block_title.d-flex{
    justify-content: space-between;
    align-items: center;
}
.block_title.d-flex a{
    color: #7C7C7C;
    font-size: 0.875rem;
    line-height: 130%;
    text-decoration: none;
}
.yandex_ad .container{
    position: relative;
}
.yandex_ad .ad-text{
    position: absolute;
    padding: 4px 3px 4px 10px;
    gap: 4px;
    border-radius: 8px;
    background: rgba(188, 188, 188, 0.32);
    backdrop-filter: blur(1px);
    bottom: 16px;
    right: 16px;
    text-decoration: none;
    color: #676767;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
}
.yandex_ad img{
    width: 100%;
}
.product_row{
    overflow: visible;
    position: relative;
}
.product_row .swiper_prev,
.authors_row .swiper_prev{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%) rotate(180deg);
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: .3s all ease;
    cursor: pointer;
}
.product_row .swiper_next,
.authors_row .swiper_next{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: .3s all ease;
    cursor: pointer;
}
.product_row .swiper_next.swiper-button-disabled,
.product_row .swiper_prev.swiper-button-disabled,
.authors_row .swiper_next.swiper-button-disabled,
.authors_row .swiper_prev.swiper-button-disabled{
    opacity: 0;
    visibility: hidden;
}
.product_item{
    display: flex;
    min-width: 324px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 8px;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.40);
    position: relative;
}
.swiper .product_item{
    width: 287px;
}
.product_item .teacher::after{
    display: none;
}
.product_item .p_types{
    gap: 8px;
    align-items: center;
    margin: 0 0 41px 0;
    padding: 12px 12px 0 12px;
    z-index: 2;
}
.p_types .type{
    display: flex;
    padding: 2px 10px;
    align-items: center;
    gap: 4px;
    border-radius: 16px;
    box-shadow: 0px 1px 3px -1px rgba(19, 19, 19, 0.23);
    backdrop-filter: blur(4px);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #FFF;
}
.product_item .view{
    padding: 2px 10px;
    border-radius: 16px;
    background: #10A37F;
    box-shadow: 0px 1px 3px -1px rgba(19, 19, 19, 0.23);
    backdrop-filter: blur(4px);
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
}
.product_item .p_background{
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 8.5px;
}
.product_item .p_bottom{
    background: rgba(256, 256, 256, 0.8);
    width: 100%;
    padding: 18px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 8px 8px;
    z-index: 2;
}
.p_bottom .teacher{
    align-items: center;
    gap: 8px;
    color: #464646;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 130%;
    text-decoration: none;
    margin: 0 0 8px 0;
}
.p_bottom .teacher img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.p_bottom .p_title{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 130%;
    text-decoration: none;
}
.p_bottom .p_desc{
    color: #464646;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    margin: 0 0 12px 0;
}
.p_bottom .info{
    justify-content: space-between;
    align-items: center;
}
.p_bottom .info .p_price{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    color: #000;
}
.p_bottom .info .info_right{
    gap: 12px;
    align-items: center;
}
.p_bottom .info .info_right .info_item{
    gap: 4px;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 130%;
    color: #747474;
}
.authors_row{
    overflow: visible;
    width: 100%;
    position: relative;
}
.author_item{
    width: 480px;
    padding: 12px;
    gap: 12px;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.40);
    min-width: 324px;
}
.author_item .author_name{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: inline-flex;
    overflow: hidden;
    color: #061310;
    text-overflow: ellipsis;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 110%;
    text-decoration: none;
}
.author_item .author_info{
    gap: 12px;
}
.author_item .author_info .info_item{
    gap: 4px;
    color: #888;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 130%;
}
.author_item .author_image{
    width: 211px;
    height: 173px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
}
.search_history{
    width: -webkit-fill-available;
    top: 100%;
    background: #fff;
    height: 0;
    overflow: hidden;
}
.search_active .search_history{
    padding: 24px 16px 0 16px;
    position: fixed;
    top: 72px;
    height: 100%;
    z-index: 2;
}
.search_history p{
    color: #7E8794;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
}
.search_history .search_item{
    padding: 12px 0px 12px 36px;
    background-image: url(../img/history_bac.svg);
    background-repeat: no-repeat;
    background-position: left center;
    display: flex;
}
.search_history .search_item .search_name{
    color: #0D0D0D;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-decoration: none;
}
.search_history .search_item .remove_item{
    cursor: pointer;
}
.search_active{
    overflow: hidden;
}
.search_active header{
    position: fixed;
    top: 0;
    width: -webkit-fill-available;
    background: #fff;
    z-index: 2;
}
.result_top{
    padding: 0;
}
.chat_gpt{
    gap: 12px;
    padding: 20px 0;
}
.chat_gpt img{
    width: 24px;
    height: 24px;
}
.chat_gpt .flex-column{
    gap: 4px;
}
.chat_gpt .flex-column a{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #061310;
    text-decoration: none;
}
.chat_gpt .flex-column p{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #666;
}
.result_sett{
    padding: 20px 0;
    gap: 24px;
}
.result_sett h2{
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
    color: #061310;
}
.result_sett .d-flex{
    gap: 8px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #000;
    text-decoration: none;
}
.filter{
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 100%;
    left: 0;
    position: fixed;
    background: #f3f3f3;
    transition: .3s all ease;
    z-index: 2;
}
#modal11 .filter{
    z-index: unset;
    transition: none;
    position: relative;
    overflow: auto;
    top: unset;
    left: unset;
}
#modal11 .modal-dialog{
    width: 100%;
    height: 100%;
    margin: 0;
}
.filter_open{
    overflow: hidden;
    background: #f3f3f3;
}
.filter_open .filter{
    top: 0;
}
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 31px;
}
.switch input {
    opacity: 0;
    width: 0 !important;
    height: 0 !important;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 25px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: #329A80;
}
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}
.slider.round {
    border-radius: 20px;
}

.slider.round:before {
    border-radius: 50%;
}
.filter .filter_top{
    padding: 10px 16px;
    background: #fff;
}
.filter .filter_top .filter_close{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #061310;
    gap: 12px;
    cursor: pointer;
}
.filter .filter_title{
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
    color: #000;
    padding: 20px 0 0 16px;
}
.filter .flex-column{
    gap: 24px;
}
.filter .filter_item{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #061310;
    text-decoration: none;
}
.filter .flex-column:has(.filter_item){
    padding: 32px 16px 20px 16px;
}
.filter .flex-column ~ .filter_title{
    padding-bottom: 26px;
}
.filter .flex-column ~ .filter_title ~ .d-flex{
    padding-right: 16px;
    padding-left: 16px;
}
.link_auth{
    padding: 32px 0 0 0;
}
.link_auth a{
    text-decoration: none;
    border-radius: 12px;
    background: #329A80;
    padding: 21px;
}
.link_auth a div{
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
    color: #FFF;
    padding: 0 0 2px 0;
}
.link_auth a p{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #FFF;
    padding: 0 0 0 20px;
}
.block_bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    z-index: 1;
}

.block_top{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #061310;
    padding: 10px 0;
    width: 100%;
    max-width: -webkit-fill-available;
}
.block_top .d-flex{
    gap: 12px;
    text-decoration: none;
    color: #061310;
}
body.f3{
    background: #F3F3F3;
}
body.ddd{
    background: #DDD;
}
section.teacher{
    position: relative;
    margin: 0 0 123px 0;
}
.teacher::after{
    position: absolute;
    content: "";
    background-image: url(../img/banner_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100px;
    top: -23px;
    z-index: -1;
}
.teacher .teacher_card{
    padding: 16px 12px;
    gap: 12px;
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.11);
    margin: 68px 0 32px 0;
}
.teacher .teacher_card img{
    padding: 2px;
    border-radius: 50%;
    border: 2px solid #65CD76;
    width: 88px;
    height: 88px;
}
.teacher .teacher_card .full_name{
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
    color: #000;
}
.teacher .teacher_card .job{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #888;
    padding: 4px 0 16px 0;
}
.teacher .teacher_card .teacher_info{
    gap: 16px;
}
.teacher .teacher_card .info_item{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #000;
    gap: 2px;
}
.teacher .teacher_card .info_item p{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #888;
}
.videos_row{
    gap: 8px;
    width: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0 0 40px 0;
    padding: 0 0 0 16px;
}
.videos_row::-webkit-scrollbar {
    display: none;
}
.videos_row .video_item{
    border-radius: 8px;
    min-width: 123px;
    width: auto;
    overflow: hidden;
    position: relative;
    display: flex;
}
.videos_row .video_item::before{
    position: absolute;    
    height: 43px;
    bottom: 6px;
    left: 6px;
    right: 6px;
    content: '';
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.00) 0%, rgba(0, 0, 0, 0.48) 100%);
    border-radius: 0 0px 8px 8px;
}
.teacher .videos_row .video_item img{
    width: 123px;
    height: 164px;
    object-fit: cover;
    object-position: center;
}
.videos_row .video_item .video_title{
    width: 107px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    bottom: 8px;
    left: 8px;
    position: absolute;
}
.send_message{
    border-radius: 100px;
    width: 100%;
    padding: 15px 24px 16px 24px;
    border-radius: 100px;
    background: rgba(50, 154, 128, 0.15);
    color: #329A80;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-decoration: none;
    display: block;
    text-align: center;
}
.send_message:hover{
    color: #329A80;
}
.teacher .videos_row ~ .send_message{
    margin: 0 0 20px 0;
}
.cpecial{
    padding: 0 16px 20px 16px;
    border-bottom: 0.5px solid #E6E6E6;
}
.text_body{
    padding: 20px 0;
    color: #666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    position: relative;
}
.text_body::after{
    position: absolute;
    content: "";
    bottom: 0;
    height: .5px;
    width: 375px;
    left: -15px;
    background: #E6E6E6;
}
.text_body:last-child{
    margin: 0 0 27px 0;
}
.text_body ul,
.text_body ol{
    margin: 0 0 0 27px;
}
.text_body p{
    margin: 0 0 12px 0;
}
.text_body p:last-child{
    margin: 0;
}
.fixed_bottom{
    width: 100%;
    padding: 16px 16px 8px 16px;
    position: fixed;
    bottom: -4px;
    z-index: 2;
    background: #FFF;
    right: 50%;
    transform: translate(50%, 0);
    display: flex;
    justify-content: center;
}
.buy_btn{
    padding: 15px 24px 16px 24px;
    border-radius: 100px;
    background: #329A80;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #FFF;
    text-decoration: none;
    display: block;
    width: 343px;
    cursor: pointer;
    border: none;
    outline: none;
}
.buy_btn:hover{
    color: #fff;
}
.tab_items{
    background: #fff;
}
.tab_items *{
    color: #666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    width: 33.33%;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    border-bottom: 3px solid #E6E6E6;
    transition: .3s all ease;
    text-decoration: none;
}
.tab_items div.active{
    color: #061310;
    border-color: #3FC1A1;
}
.modul{
    padding: 20px 0 0 0;
}

.section_title p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #888;
    text-overflow: ellipsis;
    padding: 4px 0 0 0;
}
.video_player{
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    height: 181px;
    width: 100%;
    margin: 0 0 32px 0;
}
.video_player img{
    object-fit: cover;
    object-position: center;
    width: 100%;
    z-index: 1;
}
.video_player .play_btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
}
.video_player .type{
    padding: 2px 10px 2px 6px;
    border-radius: 16px;
    box-shadow: 0px 1px 3px -1px rgba(19, 19, 19, 0.23);
    backdrop-filter: blur(4px);
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #FFF;
    z-index: 2;
}
.video_player::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.video_player video{
    position: absolute;
    z-index: 0;
    object-fit: cover;
}
.video_player.active video{
    z-index: 3;
}
.video_player .frame{
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
}
.mocul_desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #061310;
    text-overflow: ellipsis;
    whitespace: nowrap;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    transition: .3s all ease;
}
.modul{
    padding-bottom: 108px !important;
}
.mocul_desc.hidde{
    -webkit-line-clamp: 4;
}
.show_more{
    gap: 4px;
    color: #329A80;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    cursor: pointer;
    padding: 12px 0 32px 0;
}
.show_more img{
    transition: .3s all ease;
}
.show_more.rotate img{
    transform: rotateX(180deg);
}
.modul ol{
    list-style-type: decimal;
    padding: 0 0 32px 23px;
}
.modul ol li{
    color: #000;
    text-overflow: ellipsis;
    whitespace: nowrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    padding: 0 0 16px 0;
}
.modul ol li:last-child{
    padding: 0;
}
.modul .modul_info{
    gap: 16px;

}
.modul .modul_info .d-flex{
    gap: 12px;
    color: #000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.modul .modul_info p{
    color: #777;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.rating{
    gap: 18px;
    padding: 0 0 20px 0;
}
.rating .rating_number{
    gap: 6px;
    align-items: center;
}
.rating .rating_number div{
    color: #000;
    font-size: 2.875rem;
    font-weight: 400;
    line-height: 90%;
}
.rating p{
    color: #888;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 130%;
}
.rating .scale{
    gap: 4px;
}
.rating .scale .scale_item{
    align-items: center;
    gap: 8px;
}
.note{
    border-bottom: 0.5px solid#E6E6E6;
    border-top: 0.5px solid#E6E6E6;
    background: rgba(50, 154, 128, 0.15);
    margin: 0 0 20px 0;
}
.note .note_text{
    padding: 26px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #329A80;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.write_feed{
    padding: 20px 0;
    border-bottom: 0.5px solid#E6E6E6;
}
.write_feed a{
    border-radius: 100px;
    background: #329A80;
    color: #FFF;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-decoration: none;
    width: 100%;
    display: block;
    text-align: center;
    padding: 15px 24px 16px 24px;
}
.comments{
    padding: 20px 0 0 0;
    gap: 32px;
}
.comments .comment_item{
    gap: 12px;
}
.comments .comment_item .comment_body p{
    text-overflow: ellipsis;
    whitespace: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: #000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    transition: .3s all ease;
}
.comments .comment_item .comment_body p.hidde{
    -webkit-line-clamp: 2;
}
.comments .comment_item .show_more{
    padding: 4px 0 0 0;
}
.comments .comment_item .user_name{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
}
.comments .comment_item .date{
    color: #888;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
}
.feed_top{
    gap: 12px;
    margin: 65px 0 32px 0;
}
.feed_top img{
    width: 32px;
    height: 32px;
    overflow: hidden;
    object-fit: cover;
    border-radius: 50%;
}
.feed_top .name{
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    margin: 0 0 8px 0;
    text-decoration: none;
}
.feed_top p{
    color: #000;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
}
.input_stars{
    justify-content: center;
    gap: 24px;
    margin: 0 0 32px 0;
}
.input_stars div{
    position: relative;
    display: flex;
    cursor: pointer;
}
.input_stars div svg path{
    transition: .3s all ease;
}
.input_stars div.checked svg path{
    fill: #329A80;
    stroke: transparent;
}
.input_stars input{
    width: 100%;
    height: 100%;
    visibility: hidden;
    position: absolute;
    opacity: 0;
}
.wrap_textarea{
    position: relative;
    margin: 0 0 32px 0;
}
.wrap_textarea span{
    position: absolute;
    right: 8px;
    bottom: 8px;
}
.wrap_textarea textarea{
    width: 100%;
    height: 76px;
    background: transparent;
    padding: 16px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #061310;
    resize: none;
    border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #E6E6E6;
    outline: none;
    font-style: normal;
    font-family: inherit;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.wrap_textarea textarea::-webkit-scrollbar {
    display: none;
}
.wrap_textarea textarea::placeholder{
    color: #666;
}
.wrap_textarea span{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #666;
}
.feedback button{
    width: 100%;
    padding: 15px 24px 16px 24px;
    border-radius: 100px;
    background: #329A80;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    font-family: inherit;
    color: #FFF;
    border: none;
    outline: none;
    cursor: pointer;
}
.shadow{
    overflow: hidden;
}
.shadow .fixed_bottom{
    z-index: 4;
}
.shadow::after{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    background: rgba(0, 0, 0, 0.36);
    z-index: 2;
}
.buy_modal{
    border-radius: 24px 24px 0px 0px;
    background:#FFF;
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.40) inset, 0px -1px 0px 0px rgba(25, 36, 34, 0.32) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transition: .3s all ease;
    left: 50%;
}
.buy_modal .modal_header{
    border-bottom: 1px solid #F2F2F2;
    padding: 16px 0;
    position: relative;
}
.buy_modal .modal_header h2{
    color: #061310;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
    text-align: center;
}
.buy_modal .modal_header svg{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
}
.buy_modal .modal_body{
    gap: 32px;
    padding: 32px 0 8px 0;
}
.buy_modal .justify-content-center{
    padding: 8px 0 0 0;
}
.buy_modal .modal_body img{
    width: 115px;
    height: 92px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}
.buy_modal .modal_body .d-flex:has(img){
    gap: 16px;
}
.buy_modal .modal_body .course_title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #061310;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 110%;
    margin: 0 0 4px 0;
}
.buy_modal .modal_body .course_desc{
    color: #888;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
}
.buy_modal .modal_body .course_price{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
}
.buy_modal .modal_body p{
    color: #666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.buy_modal .modal_body p a{
    color: #329A80;
    text-decoration: none;
}
.success{
    padding: 20px 0 0 0;
}
.success h2{
    color: #061310;
    font-size: 2rem;
    font-weight: 600;
    line-height: 120%;
    text-align: center;
    margin: 0 0 16px 0;
}
.success p{
    color: #666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
}
.success a{
    padding: 15px 24px 16px 24px;
    max-width: 343px;
    width: 100%;
    border-radius: 100px;
    background:#329A80;
    color: #FFF;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    text-decoration: none;
    display: block;
    position: absolute;
    bottom: 0;
    margin: 0 0 16px 0;
}
.profile_data{
    gap: 12px;
    margin: 20px 0 32px 0;
}
.profile_data img{
    width: 82px;
    height: 82px;
    border-radius: 100px;
}
.profile_data .name{
    gap: 4px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 110%;
    padding: 0 0 4px 0;
}
.profile_data .email{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #061310;
    text-decoration: none;
}
.search_course.search_wrap input{
    max-width: 100%;
    width: 100%;
}
.search_course.search_wrap{
    padding: 12px 0;
    margin: 0 0 20px 0;
}
.course_block{
    gap: 16px;
    margin: 0 0 32px 0;
}
.course_item{
    position: relative;
    border-radius: 8px;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.40);
    width: 343px;
    height: 228px;
    align-items: flex-start;
}
.course_item .type{
    border-radius: 16px;
    background: #D4422E;
    box-shadow: 0px 1px 3px -1px rgba(19, 19, 19, 0.23);
    backdrop-filter: blur(4px);
    padding: 2px 10px 2px 6px;
    align-items: center;
    gap: 4px;
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    display: inline-flex;
    margin: 12px 0 0 12px;
}
.course_item .course_info{
    background-color: rgba(256, 256, 256, 0.8);
    padding:4px 12px 12px 12px;
    height: 69%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    border-radius: 0 0 8px 8px;
    width: 100%;
}
.progress{
    height: 5px;
    background: #E0EAE8;
    border-radius: 0;
}
.progress .progress-bar{
    background: #329A80;
    border-radius: 0px 100px 100px 0px;
}
.modul .progress{
    border-radius: 100px;
    background: #DBDBDB;
}
.course_item .back-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 8px;
}
.course_item .course_title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 130%;
    color: #000;
    text-decoration: none;
    display: block;
}
.course_item .course_desc{
    color: #464646;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    margin: 0 0 8px 0;
}
.course_item .finished{
    color: #464646;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    margin: 8px 0 0 0;
    gap: 4px;
}
.course_item .finished span{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
}
.course_item .course_action{
    margin: 16px 0 0 0;
}
.course_item .course_action a{
    padding: 7px 16px;
    border-radius: 8px;
    background:#329A80;
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    text-decoration: none;
}
.course_item .course_action p{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 130%;
    color: #000;
}
.certificat_row{
    margin: 0 0 32px 0;
    gap: 10px;
    width: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 5px;
}
.certificat_row::-webkit-scrollbar {
    display: none;
}
.certificat_item{
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.40);
    min-width: 163px;
}
.certificat_item .type{
    position: absolute;
    left: 7px;
    top: 0;
}
.certificat_item .main{
    width: 163px;
    height: 108px;
    object-fit: cover;
    object-position: 0% 79%;
}
.certificat_item .title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: #061310;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    padding: 12px;
    background-color: rgba(256, 256, 256, 0.8);
    text-decoration: none;
}

.search_results .search_info{
    border-top: 0.5px solid#E6E6E6;
    padding: 20px 0 0 0;
}
.search_results .search_info h2{
    font-family: SF Pro Display;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin: 0 0 32px 0;
}
.course_results{
    gap: 10px;
}
.course_results .result_item{
    display: flex;
    padding: 12px;
    gap: 16px;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.40);
}
.result_item img{
    width: 95px;
    height: 92px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}
.course_results .result_item .d-flex{
    justify-content: space-between;
}
.result_item .title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    color: #061310;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
    text-decoration: none;
}
.result_item .desc{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.result_item .desc span{
    background-color: #747474;
}
#modal9 .modal-dialog{
    max-width: 100%;
    margin: 0;
}
.settings{
    background-color: #FFF;
    max-width: 100%;
    width: 100%;
    height: 100%;
}
.settings_top{
    text-align: center;
    padding: 16px 0;
    margin: 0 16px;
    border-bottom: 0.5px solid #E6E6E6;
}
.settings_top h2{
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    color: #061310;
}
.settings .block{
    gap: 32px;
    padding: 20px 16px;
    border-bottom: 0.5px solid #E6E6E6;
}
.settings .block:last-child{
    border: none;
}
.settings .block h2{
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
}
.settings .block a{
    color: #061310;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-decoration: none;
}
.settings .block a.red{
    color: #D72D31;
}
#modal10 .modal-dialog{
    justify-content: center;
}
.language{
    border-radius: 24px;
    width: 327px;
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0px 8px 32px 2px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
    transition: .3s all ease;
}
.language h2{
    padding: 24px 0 16px 0;
    color: #061310;
    font-family: SF Pro Display;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
    text-align: center;
    border-bottom: 1px solid #F2F2F2;
}
.language label{
    margin: 0 24px;
    padding: 12px 0 24px 40px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    position: relative;
    cursor: pointer;
}
.language label input{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
}

.language label span{
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1.5px solid #030303;
    border-radius: 50%;
    left: 0;
    cursor: pointer;
}
.language label:has(input:checked) span{
    border-color: #329A80;
    transition: .3s all ease;
}
.language label:has(input:checked) span::after{
    position: absolute;
    content: "";
    border-radius: 50%;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #329A80;
}
.user_form{
    margin: 24px 0 0 0;
    min-height: calc(100svh - 68px);
    gap: 20px;
}
.user_form .user_image{
    justify-content: center;
    margin: 0 0 32px 0;
}
.user_form .user_image label{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #329A80;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
}
.user_image label img{
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    margin: 0 0 16px 0;
}
.user_image label input{
    visibility: hidden;
    opacity: 0;
}
.user_form .form_group{
    gap: 24px;
}
.user_form .form_group label{
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    color: #061310;
}
.user_form .form_group input{
    padding: 8px 16px;
    font-family: SF Pro Display;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: #000;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    border-bottom: 1px solid  #E6E6E6;
}
.user_form .form_group input::placeholder{
    color: #666;
}
.user_form .form_group .phone input{
    border: none;
}
.user_form button{
    width: 100%;
    padding: 17.5px 24px;
    border-radius: 100px;
    background: #329A80;
    font-family: SF Pro Display;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: #FFF;
    border: none;
    margin: 0 0 16px 0;
    cursor: pointer;
}
.lessons{
    padding: 20px 0 32px 0;
    margin: 0 0 74px 0;
}
.lessons .block_title{
    padding: 12px 16px 12px 16px;
    cursor: pointer;
    margin: 0;
}
.lessons .block_title img{
    transition: .3s all ease;
}
.lessons .block_title.rotate img{
    transform: rotateX(180deg);
}
.lessons_block{
    display: flex;
}
.lessons .lessons_block{
    display: flex;
    margin: 0 0 16px 0;
}
.lesson{
    padding: 20px 16px;
    gap: 24px;
    border-bottom: 0.5px solid #E6E6E6;
}
.lesson .d-flex:has(.lesson_main){
    gap: 16px;
}
.lesson .lesson_main{
    width: 59px;
    height: 59px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
}
.lesson .title{
    color: #061310;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.lesson .title ~ span{
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(50, 154, 128, 0.15);
    color: #329A80;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.lesson .duration{
    gap: 4px;
    color: #7C7C7C;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    margin: 9px 0 9px 0;
}

.lesson .lesson_actions{
    gap: 16px;
}
.action .action_left{
    gap: 8px;
}
.action .action_left a{
    padding: 4px 8px;
    border-radius: 4px;
    background: #329A80;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.action .action_text{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.action .action_text span{
    color: #888;
    font-size: 0.875rem;
    line-height: 130%;
    padding: 0 0 0 4px;
}
.tab_block{
    display: flex;
    align-items: flex-start;
}
.single .player{
    position: fixed;
    height: 250px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.horizantal_left .tab_items{
    position: fixed;
    width: 100%;
    top: 250px;
    left: 0;
    z-index: 3;
}
.horizantal_left .tab_items + .tab_block{
    margin: 42px 0 0 0;
}
.single .player + .wrapper{
    margin: 250px 0 0 0;
}
.player::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 100%);
    z-index: 1;
}

.player .play_top a{
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    text-decoration: none;
    position: absolute;
    top: -100%;
    transition: .3s all ease;
}
.player .play_top a.note{
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(94, 94, 94, 0.48);
    backdrop-filter: blur(4px);
    margin: 0;
    border: none;
    font-size: 1rem;
}
.single .player .play_center{
    position: absolute;
    gap: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.single .player .play_center svg{
    cursor: pointer;
}
.single .player img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}
.single .player video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
    z-index: -1;
}
.single .player.active video{
    z-index: 3;
}
.single .player.active:hover .play_top a{
    top: 16px;
    z-index: 4;
}
.single .player.active:hover .play_top a:first-child{
    left: 16px;
    top: 23px;
}
.single .player.active:hover .play_top a:last-child{
    right: 16px;
}
.single .profile_data{
    margin: 24px 0 20px 0;
}
.single .profile_data .profile_left{
    gap: 12px;
}
.single .profile_data .profile_left img{
    width: 48px;
    height: 48px;
}
.single .profile_data .profile_left .name{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
}
.single .profile_data .profile_left .name svg{
    width: 22px;
    height: 22px;
}
.single .profile_data .profile_left .email{
    gap: 4px;
    align-items: center;
    color: #888;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 130%;
}
.single .profile_data .profile_btn{
    border-radius: 100px;
    background: #329A80;
    padding: 6.5px 13.5px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #fff;
    text-decoration: none;
}
.link_group{
    position: fixed;
    color: #FFF;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-decoration: none;
    padding: 14px 12px 15px 12px;
    border-radius: 12px 12px 0px 0px;
    background: #000;
    bottom: 49px;
    left: 50%;
    display: block;
    transform: translate(-50%, 0);
    width: max-content;
}
.link_group:hover{
    color: #FFF;
}
.tab_block .description .main_desc{
    color: #000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    margin: 0 0 32px 0;
}
.tab_block .description .action{
    margin: 0 0 16px 0;
}
.messenger{
    padding: 20px 0 0 0;
    margin: 48px 0 0 0;
}
.messenger .stories{
    padding: 0 0 20px 0;
    border-bottom: 0.5px solid #E6E6E6;
}
.stories .container{
    padding: 0;
}
.messenger .stories .stories_row{
    gap: 12px;
}
.messenger .story_item img{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px solid #65CD76;
    padding: 2px;
}
.messenger .chats{
    padding: 20px 0 0 0;
}
.chats_block{
    gap: 16px;
}
.messenger .story_row{
    display: flex;
    gap: 12px;
    width: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 0 0 16px;
}
.messenger .story_row::-webkit-scrollbar {
    display: none;
}
.chat_item{
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    justify-content: space-between;
}
.modal7 ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.modal7 .modal-dialog{
    margin: 0 0 0 auto;
    height: 100%;
    max-width: 420px;
}
.modal7 .modal-dialog .modal-content{
    border: none;
    height: 100%;
    padding: 48px 24px;
    width: 420px;
}
.modal7 .modal_header {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 130%;
    color: #061310;
    padding: 0 0 48px 0;
}
.modal7 .modal_header img{
    cursor: pointer;
}
.modal7 a{
    gap: 16px;
    align-items: center;
    color: #061310;
    text-decoration: none;
}
.modal7 a h2{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
}
.modal7 a p{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    padding: 4px 0 0 0;
}
#modal8 .modal_header .d-flex{
    gap: 8px;
}
#modal8 .container{
    padding: 0;
}
#modal8 .new_chat{
    padding: 0;
}
#modal8 .new_chat .block_title{
    font-size: 1.125rem;
    margin-bottom: 16px;
}
#modal8 button{
    font-family: SF Pro Display;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #FFF;
    width: 100%;
    margin: 48px 0 0 0;
    border-radius: 100px;
    background: #329A80;
    border: none;
    outline: none;
    padding: 8px 0;
}
.chat_item .chat_avatar img{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.chat_item .chat_avatar:has(span){
    position: relative;
}
.chat_item .chat_avatar:has(span) span{
    position: absolute;
    padding: 2px 8px;
    border-radius: 24px;
    background: #329A80;
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    bottom: 0;
    left: 0;
}
.chat_item .chat_texts{
    gap: 6px;
    width: 100%;
}
.chat_item .chat_texts .chat_title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #000;
}
.chat_item .chat_texts p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #000;
}
.chat_item .chat_texts p span{
    color: #888;
}
.chat_item .date{
    gap: 6px;
    align-items: flex-end;
}
.chat_item .date p{
    color: #888;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
}
.chat_item .chat_texts p.seen{
    color: #535353;
    position: relative;
    padding: 0 0 0 24px;
}
.chat_item .chat_texts p.seen::before{
    position: absolute;
    width: 24px;
    height: 24px;
    left: 0;
    top: 0;
    content: "";
    background: url(../img/seen_status.svg);
    background-repeat: no-repeat;
}
.chat_item .date span{
    padding: 2px 8px 0px 7px;
    color: #FFF;
    background: #329A80;
    border-radius: 50%;
    font-size: 0.875rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat_modal{
    gap: 24px;
    position: fixed;
    width: 375px;
    padding: 0 16px;
    bottom: -100%;
    transition: .3s all ease;
    margin: 0 0 16px 0;
    z-index: 3;
}
.chat_modal.active{
    bottom: 0%;
}
.chat_modal ul,
.chat_modal .cancel_btn{
    background-color: #FFF;
}
.chat_modal ul{
    list-style: none;
    border-radius: 24px;
    max-width: 343px;
    width: 100%;
}
.chat_modal ul a{
    padding: 16px;
    gap: 16px;
    align-items: center;
    color: #000;
    text-decoration: none;
}
.chat_modal ul a h2{
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin: 0 0 4px 0;
}
.chat_modal ul a p{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
}
.chat_modal .cancel_btn{
    padding: 14px 24px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    max-width: 235px;
    width: 100%;
    text-align: center;
    cursor: pointer;
}
.new_chat{
    padding: 20px 0 0 0;
}
.new_chat .search_wrap{
    width: 100%;
    margin: 0 0 40px 0;
}
.new_chat .search_wrap input{
    max-width: 100%;
    width: 100%;
    background-color: transparent;
}
.select_chats{
    gap: 16px;
}
.select_chat{
    position: relative;
    display: flex;
    cursor: pointer;
}
.select_chat span{
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #000;
    position: relative;
    transition: .3s all ease;
}
.select_chat input{
    visibility: hidden;
    opacity: 0;
    width: 32px;
    height: 32px;
    position: absolute;
}
.select_chat:has(input:checked) span{
    border-color: #329A80;
    background-color: #329A80;
}
.select_chat:has(input:checked) span::after{
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    background: url(../img/icons8-check.svg);
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}
.chat_main .input_wrap input[type='text']{
    max-width: calc(100% - 144px);
}
.chat_main .messenger{
    position: fixed;
    left: 0;
    top: 88px;
    width: 375px;
    background: #FFF;
    margin: 0;
    height: 100%;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
    padding: 0;
}
.wrapper:has(.chat_main) .file_wrap{
    position: relative;
    flex: 0 0 auto;
    width: 32px;
}

.chat_main .search_wrap{
    margin: 0 24px;
}
.chat_main .search_wrap input{
    max-width: 100%;
}
.chat_main .messenger .block_title{
    font-size: 1.125rem;
}
.wrapper:has(.chat_main) .story_row .story_item .story_text{
    text-decoration: none;
    color: #000;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    white-space: wrap;
}
.wrapper:has(.chat_main) .story_row .story_item::before{
    display: none;
}
.wrapper:has(.chat_main) .story_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: min-content;
}
.wrapper:has(.chat_main) .story_row .story_item img{
    padding: 2px;
    border-radius: 50%;
    border: 2px solid #65CD76;
}
main.with_menus.end{
    margin: 20px 0 73px 0;
    padding: 0 44px;

}
.end h2{
    font-size: 2rem;
    font-weight: 600;
    line-height: 120%;
    text-align: center;
    margin: 0 0 24px 0;
}
.end p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    margin: 0 0 16px 0;
}
.end p:last-child{
    margin: 0
}
.end + .buy_btn{    
    margin: 0 auto;
}
.block_top .top_left{
    gap: 12px;
}
.block_top .top_left .chat_info{
    gap: 10px;
    align-items: center;
}
.block_top .top_left .chat_info .d-flex{
    gap: 4px;
}
.chat_info img{
    width: 48px;
    height: 48px;
    border-radius: 100px;
    object-fit: cover;
    object-position: center;
}
.chat_info .chat_title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    text-decoration: none;
}
.chat_info span{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    color: #329A80;
}
.chat_info p{
    color: #888;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
}
.messages{
    margin: 10px 0 65px 0;
    padding: 0 8px;
}
.messages .date{
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 16px;
    background: rgba(94, 94, 94, 0.48);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #FFF;
    z-index: 2;
}
.message{
    padding: 8px 16px;
    gap: 8px;
    max-width: 319px;
    width: max-content;
    position: relative;
}
.message .text_body{
    color: #000;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    padding: 0;
    margin: 0;
}
.message .text_body:last-child{
    margin: 0;
}
.message .text_body::after{
    display: none;
}
.message .message_action{
    gap: 4px;
    align-items: flex-end;
    justify-content: space-between;
}
.message .message_action img{
    cursor: pointer;
}
.message .time{
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 130%;
}
.message .time:has(img){
    display: flex;
    align-items: center;
    gap: 8px;
}
.message:has(.text_body img){
    padding: 0;
    overflow: hidden;
}
.message .text_body img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.msg_left + .msg_right{
    margin-top: 12px;
}
.msg_right + .msg_left{
    margin-top: 12px;
}
.msg_right + .msg_right{
    margin-top: 4px;
}
.msg_left + .msg_left{
    margin-top: 4px;
}


.msg_left .message{
    border-radius: 8px 16px 16px 0px;
    background: #F2F2F7;
}
.msg_left .message .time{
    color: #888;
}
.msg_right .message{
    border-radius: 16px 8px 0px 16px;
    background: #D4EBE5;
}
.msg_right .message .time{
    color: #000;
}
.msg_right{
    display: flex;
    justify-content: right;

}
.msg_left{
    display: flex;
    justify-content: left;
    align-items: flex-end;
    gap: 8px;
    width: 90%;
}
.msg_left .user_avatar,
.msg_right .user_avatar{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.next_same .user_avatar{
    opacity: 0;
    visibility: hidden;
}
.message .user_name{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    margin: 0 0 8px 0;
}
.message.edit ul{
    z-index: 3;
    opacity: 1;
    visibility: visible;
}
.message ul{
    position: absolute;
    width: 220px;
    padding: 8px 0px;
    border-radius: 8px 8px 0px 8px;
    background: #FFF;
    box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.11);
    list-style: none;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    transition: .3s all ease;
}
.message ul a{
    padding: 12px;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #000;
    text-decoration: none;
}
.reply{
    padding: 0 0 0 12px;
    margin: 0 0 8px 0;
    position: relative;
}
.reply::before{
    position: absolute;
    content: "";
    width: 4px;
    height: 100%;
    border-radius: 4px;
    background: #A9762A;
    left: 0;
    top: 0;
}
.reply .text_body{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.input_wrap{
    gap: 16px;
    align-items: center;
    padding: 10px 16px;
    background-color: #FFF;
    position: fixed;
    bottom: -3px;
    left: 0;
    width: 100%;
}
.input_wrap input{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #000;
    border: none;
    box-shadow: none;
    outline: none;
    max-width: 200px;
    width: 100%;
    flex: 0 0 auto;
}
.input_wrap input::placeholder{
    color: #888;
}
.input_wrap img{
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}
.input_wrap button{
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    flex: 0 0 auto;
    width: 32px;
}
.room_actions.show{
    top: 15px;
    opacity: 1;
    right: 15px;
}
.room_actions{
    display: flex;
    width: 220px;
    padding: 8px 0px;
    flex-direction: column;
    list-style: none;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.11);
    position: fixed;
    z-index: 2;
    top: -100%;
    right: 0;    
    opacity: 0;
    transition: .3s all ease;
}
.room_actions a{
    gap: 10px;
    align-items: center;
    padding: 12px;
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
}
.for_click{
    width: 0;
    height: 0;
    position: relative;
    z-index: -1;
}
.for_click.active{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.reply.active{
    background-color: #FFF;
    position: fixed;
    bottom: 49px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 10px 16px 10px 28px;
}
.reply.active .user_name{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    margin: 0 0 8px 0;
}
.reply.active .text_body{
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #000;
    margin: 0;
}
.reply.active::before{
    height: 45px;
    top: 11px;
    left: 16px;
}
#modal6 .modal-dialog{
    max-width: 100%;
    margin: 44px 108px;
}
.story_main{
    padding: 64px 0;
}
.story_main .container{
    padding: 0 120px;
}
.story_parent{
    border-radius: 8px;
    overflow: hidden;
    flex-direction: row;
}
.story_parent + .story_article{
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: #061310;
    border-radius: 8px;
    background:#FFF;
    padding: 24px;
    margin: 40px 0 0 0;
}
.story_right{
    width: 386px;
    padding: 24px 24px 0 24px;
    background: #FFF;
    position: relative;
}
.story_right .close_story{
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}
.story_right .story_top{
    padding: 0 0 24px 0;
    border-bottom: 1px solid #E7E7E7;
}
.story_play{
    width: calc(100% - 386px);
    height: 936px;
    position: relative;
}
.story_play .story_top{
    padding: 24px 24px 0 24px;
    gap: 16px;
    position: absolute;
    z-index: 1;
}
.story_play .story_top .progress{
    width: -webkit-fill-available;
    height: 4px;
    background: rgba(217, 217, 217, 0.56);
    backdrop-filter: blur(4px);
    border-radius: 1px;
    cursor: pointer;

}
.story_play .story_top .progress *{
    background: #DDD;
}
.story_play .story_top .d-flex:first-child{
    gap: 4px;
}
.story_play .story_top .d-flex:has(.go_to){
    gap: 8px;
}
.story_play .story_top .user_img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.story_play .story_top .go_to{
    padding: 12px 16px;
    border-radius: 100px;
    background: #FFF;
    color: #000;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 130%;
    text-decoration: none;
}
.story_play .main_video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.story_play .to_course{
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 50%;
    width: 311px;
    padding: 15px 24px 16px 24px;
    border-radius: 100px;
    background: #187DCC;
    box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.11);
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    color: #fff;
    text-decoration: none;
    transform: translateX(-50%);
}
.story_actions{
    margin: 0 0 0 -10px;
    border-top: 1px solid #E7E7E7;
}
.story_actions img,
.story_actions svg{
    width: 48px;
    height: 48px;
    padding: 10px;
    cursor: pointer;
}
.story_actions svg path{
    transition: .3s all ease;
}
.story_actions svg.active path{
    fill: #329A80;
    stroke: #329A80;
}
.story_bottom .likes_count{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    color: #000;
    margin: 0 0 20px 0;
}
.story_bottom .story_desc.hide{
    -webkit-line-clamp: 3;
}
.story_bottom .story_desc{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.story_bottom .story_desc p{
    padding: 0 0 19px 0;
}
.story_bottom .story_desc p:last-child{
    padding: 0;
}
.story_bottom .story_desc + .show_all_desc{
    margin: 20px 0 0 0;
}
.story_bottom .hide + .show_all_desc{
    margin: 0;
}
.story_bottom .show_all_desc{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    color: #000;
    cursor: pointer;
}
.form_wrap{
    bottom: 0;
    background-color: #FFF;
    z-index: 4;
    width: 100%;
    left: 50%;
    padding: 8px 0;
    border-top: 1px solid #E7E7E7;
}
.add_comment{
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.add_comment input,
.add_comment button{
    border: none;
    outline: none;
    background: transparent;
}
.add_comment input{
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #000;
}
.add_comment input::placeholder{
    color: #888;
}
.add_comment button{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #329A80;
    cursor: pointer;
}
.story_comments{
    padding: 24px 0 0 0;
    width: 100%;
    bottom: -100%;
    z-index: 3;
    transition: .3s all ease;
}
.story_comments.show{
    bottom: 75px;
}
.story_comments .comments_header{
    border-bottom: 1px solid #F2F2F2;
    display: flex;
    align-items: center;
    padding: 16px;
}
.story_comments .comments_header h2{
    width: 100%;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 130%;
    color: #061310;
}
.story_comments .comments_header img{
    cursor: pointer;
    width: 24px;
    height: 24px;    
}
.story_comments .comments_wrap{
    gap: 16px;
    display: flex;
    flex-direction: column;
}
.story_comment{
    gap: 16px;
}
.story_comment img{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.story_comment .d-flex{
    gap: 16px;
    width: calc(100% - 64px);
}
.story_comment .user_name{
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #000;
}
.story_comment p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 120%;
    color: #000;
}
.story_comment span{
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 130%;
    color: #888;
}
.bread_crumbs+.teacher_card{
    margin-top: 24px;
}
.story_rec{
    flex-wrap: wrap;
    gap: 12px;
}
.story_rec .rec_item{
    height: 216px;
    width: calc(25% - 9px);
    position: relative;
    overflow: hidden;
    padding: 6px;
    max-width: 216px;
}
.story_rec .rec_item::after{
    position: absolute;
    content: "";    
    height: 49px;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.00) 0%, rgba(0, 0, 0, 0.64) 100%);
    bottom: 6px;
    left: 6px;
    right: 6px;
    border-radius: 0 0 12px 12px;
}
.story_rec .rec_item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}
.story_rec .rec_item div{
    position: absolute;
    bottom: 16px;
    left: 22px;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    text-decoration: none;
    z-index: 1;
}
.swiper {
    width: 100%;
    height: 100%;
}
.fixed{
    position: fixed;
}

.file_wrap{
    position: absolute;
    cursor: pointer;
    display: flex;
}
.file_wrap input{
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

@media screen {
    /* and (orientation: landscape) and (max-width: 500px) */
    body:has(.single){
        background: #000;
    }
    .single .wrapper{
        height: 100svh;
        max-width: 100%;
    }
    .single{
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0;
    }
    .single .player{
        width: calc(100% - 270px);
        height: 330px;
        position: relative;
    }
    .single .player + .wrapper{
        margin: 0 auto;
    }
    .single .horizantal_left{
        width: 270px;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        background: #fff;
    }
    .single .messages{
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 270px;
    }
    
    .single .msg_left,
    .single .msg_right{
        gap: 12px;
        align-items: flex-start;
    }
    .single .message .message_action{
        display: none;
    }
    .single .tab_items{
        position: fixed;
        width: 270px;
        background: #fff;
        top: 0;
        z-index: 1;
        right: 0;
        left: auto;
    }
    .single .horizantal_left .input_wrap{
        right: 0;
        left: auto;
        width: auto;
    }
    .single .tab_block{
        margin: 42px 0 0 0;
    }
    .single .input_wrap .input_file{
        display: none;
    }
    .single .input_wrap input{
        max-width: 142px;
        flex: auto
    }
}


.swiper9 .swiper-slide{
    width: auto;
}
@media screen and (min-width: 1200px){
    .link_auth a p{
        padding: 0;
        text-align: center;
    }
    .wrapper:has(.chat_main) .block_bg{
        margin: 0 0 0 375px;
        top: 88px;
        width: calc(100% - 375px);
        background: #F8F8F8;
    }
    .wrapper:has(.chat_main) .block_bg .block_top{
        max-width: 100%;
    }
    .wrapper:has(.chat_main) .block_bg .container{
        margin: 0;
        max-width: 100%;
        padding: 0 24px;
    }
    .chat_main .messages{
        margin: 168px 0 0px 375px;
        padding: 0 120px 0 24px;
    }
    .chat_main .input_wrap,
    .chat_main .reply.active{
        margin: 0px 0 0px 375px;
        width: calc(100% - 375px);
    }
    .chat_main .reply.active{
        bottom: 49px;
    }
    
    .wrapper:has(.chat_main) .messenger .chats {
        padding: 40px 24px 24px 24px;
    }
    .wrapper:has(.chat_main) .messenger .stories{
        padding: 24px 0 40px 0;
        border: none;
    }
    .wrapper:has(.chat_main) .messenger .story_row{
        padding: 40px 24px 0 24px;
    }
    .wrapper:has(.chat_main) .messenger .chats{
        padding: 0px 24px 24px 24px;
    }
    .wrapper:has(.chat_main) .messenger .chats .container{
        padding: 0;
    }
    .wrapper:has(.chat_main) .messages .date{
        top: 170px;
    }
    .wrapper:has(.chat_main) .room_actions.show{
        top: 110px;
    }
    .wrapper:has(.chat_main) .room_actions{
        transform: none;
        right: 24px;
    }
    .chat_main .msg_right{
        justify-content: left;
        gap: 8px;
        align-items: flex-end;
    }
    .chat_main .msg_right .message{
        border-radius: 8px 16px 16px 0px;
    }
    .msg_left + .msg_left{
        margin-top: 24px;
    }
    .msg_left.next_same + .msg_left{
        margin-top: 2px;
    }
    .container{
        max-width: 100%;
    }
    .single .player .play_center{
        gap: 44px;
    }
    .single .player .play_center svg {
        width: 44px;
        height: 44px;
    }
    .single .player .play_center .play_btn{
        width: 120px;
        height: 120px;
    }
    .horizantal_left .tab_items + .tab_block{
        margin: 0;
    }
    .single .tab_items{
        top: 201px;
    }
    .single .change.lessons_block,
    .single .change.chat {
        margin: 249px 0 0 0;
    }
    .single .change.description{
        position: absolute;
        top: 0;
        z-index: 10;
        background: #FFF;
        display: block !important;
    }
    .single .change.description .container{
        padding: 0 24px;
    }
    .single .link_group{        
        display: block;
        left: auto;
        right: 0%;
        margin: 0 110px;
        transform: none;
    }
    .file_wrap{
        position: relative;
    }
    .single .player{
        height: calc(100svh - 200px);
        width: calc(100% - 420px);
    }

    .single .horizantal_left,
    .single .tab_items,
    .single .horizantal_left .input_wrap,
    .single .messages{
        width: 420px;
    }
    .single .tab_items *{
        width: 50%;
    }
    .single .input_wrap .input_file{
        display: block;
    }
    .single .input_wrap input{
        max-width: 242px;
    }
    .player .full{
        position: absolute;
        top: -21px;
        right: 0;
        transform: translate(0%, -100%);
        border-radius: 8px 0px 0px 8px;
        background: rgba(255, 255, 255, 0.64);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .player .full svg{
        transition: .3s all ease;
    }
    .player .full.rotate svg{
        transform: rotate(180deg);
    }
    .single.full_screen .player{
        width: 100%;
    }
    .single.full_screen .tab_items,
    .single.full_screen .input_wrap{
        right: -100%;
    }
    .single.full_screen .horizantal_left{
        width: 0;
        transition: .3s all ease;
    }
    .single.full_screen .change.description{
        position: relative;
    }
    main,
    main.with_menus{
        margin-bottom: 0;
    }
    section {
        padding: 0 0 64px 0;
    }
    .authors{
        padding-bottom: 120px;
    }
    .desc_none{
        display: none !important;
    }
    .story_item img{
        height: 204px;
        width: 204px;
        border-radius: 12px;
    }
    .menus,
    .search_history{
        display: none !important;
    }
    .mobile_header{
        padding: 64px 0 48px 0;
    }
    .mobile_header .d-flex:has(a){
        display: none !important;
    }
    .mobile_header .search{
        width: 450px;
        max-width: 100%;
    }
    .mobile_header .search_wrap{
        margin: 0 0 0 372px;
    }
    .catalog_row{
        position: relative;
        gap: 48px;
    }
    .catalog_row .catalog_right{
        width: calc( 100% - 372px );
    }
    .catalog_row .catalog_right .container{
        padding: 0;
        max-width: 100%;
        overflow: visible;
    }
    .catalog_row .filter{
        width: 324px;
        position: static;
        padding: 0;
        background: transparent;
        margin: -96px 0 0 0;
    }
    .catalog_row .filter .filter_top a,
    .catalog_row .filter .filter_top img{
        display: none !important;
    }
    .filter .filter_top{
        padding: 0;
    }
    .filter .filter_top .filter_close{
        font-size: 1.75rem;
        font-weight: 600;
        line-height: 130%;
    }
    .filter .filter_title{
        padding: 48px 0 0 0;
    }
    .filter .flex-column:has(.filter_item){
        padding: 24px 0 0 0;
    }
    .filter .flex-column ~ .filter_title{
        padding-bottom: 24px;
    }
    .filter .flex-column ~ .filter_title ~ .d-flex {
        padding: 0 0 42px 0;
    }
    .filter .filter_item{
        gap: 8px;
        display: flex;
        align-items: center;
    }
    .filter .filter_item label{
        position: relative;
        width: 24px;
        height: 24px;
        border: 1.5px solid #292D32;
        border-radius: 8px;
        cursor: pointer;
    }
    .filter .filter_item label input{
        opacity: 0;
        visibility: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .filter .filter_item label:has(input:checked){
        background-image: url(../img/input_check.svg);
        background-repeat: no-repeat;
        background-size: 27px;
        background-position: center;
    }
    .filter .filter_actions{
        gap: 16px;
        padding: 0;
    }
    .filter .filter_actions button{
        border-radius: 100px;
        border: 1.5px solid #DAD9D9;
        outline: none;
        width: 100%;    
        color: #111;
        font-family: SF Pro Display;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        background: transparent;
        padding: 13px 28px;
    }
    .stories .sorting{
        gap: 8px;
        font-size: 1rem;
        line-height: 120%;
        padding: 0 0 48px 0;
        text-decoration: none;
        color: #000;
    }
    .block_title{
        font-size: 1.75rem;
        font-weight: 600;
        margin-bottom: 24px;
    }
    .swiper9-navigation .swiper_prev,
    .swiper9-navigation .swiper_next
    .swiper10-navigation .swiper_prev,
    .swiper10-navigation .swiper_next,
    .swiper11-navigation .swiper_prev,
    .swiper11-navigation .swiper_next{
        cursor: pointer;
        opacity: 1;
        transition: .3s all ease;
    }
    .swiper9-navigation .swiper_prev.swiper-button-disabled,
    .swiper9-navigation .swiper_next.swiper-button-disabled,
    .swiper10-navigation .swiper_prev.swiper-button-disabled,
    .swiper10-navigation .swiper_next.swiper-button-disabled,
    .swiper11-navigation .swiper_prev.swiper-button-disabled,
    .swiper11-navigation .swiper_next.swiper-button-disabled{
        opacity: .3;
        cursor: auto;
    }
    .stories .block_title{
        padding: 0;
    }
    .stories .stories_row{
        padding: 0;
        overflow: hidden;
        display: block;
    }
    .stories{
        padding: 0 0 48px 0;
    }
    .product_item{
        min-width: auto;
    }
    .authentication form{
        min-height: calc(100svh - 223px);
        justify-content: flex-start;
        gap: 32px;
    }
    .authentication .container{
        max-width: 477px;
        padding: 0;
    }
    header.auth_header{
        padding: 64px 0;
        margin: 0;
    }
    header.auth_header .header_row{
        justify-content: end;
    }
    header.auth_header svg{
        width: 194px;
        height: 31px;
    }
    .auth_footer{
        max-width: 1200px;
        width: 100%;
        position: fixed;
        bottom: 64px;
        left: 50%;
        transform: translate(-50%,0);
    }
    .authentication .login_title{
        margin: 0 0 32px 0;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 110%;
    }
    .authentication .form_group p{
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
    }
    .authentication .form_group input{
        line-height: 120%;
    }
    .authentication .login_footer button    {
        width: 100%;
        border-radius: 8px;
    }
    .authentication{
        position: relative;
    }
    .authentication::before{
        left: -50px;
        top: 0;
        position: absolute;
        content: "";
        width: 502px;
        height: 431px;
        background-image: url("../img/hero_before.png");
        background-repeat: no-repeat;
    }
    .authentication::after{
        right: -134px;
        top: 0;
        position: absolute;
        content: "";
        width: 502px;
        height: 431px;
        background-image: url("../img/hero_after.png");
        background-repeat: no-repeat;
    }
    .group_parent{
        display: flex;
        gap: 16px;
    }
    .group_parent .form_group{
        width: calc(50% - 8px);
    }
    .group_parent .form_group:has(input[type=tel]){
        order: 1;
    }
    .authentication .register_form .login_title{
        margin: 0 0 16px 0;
    }
    .authentication .register_form .login_desc{
        font-size: 1.125rem;
        line-height: 110%;
        color: #061310;
    }
    .product.result_products{
        padding: 0 0 120px 0;
    }
    .result_products .product_item .p_background{
        width: 200px;
        height: 120px;
    }
    .result_products .product_item .p_types{
        margin: 0;
        padding: 0;
    }
    .result_products .product_item .p_types:first-child{
        margin-left: 216px;
    }
    .result_products .product_item .p_types:last-child{
        margin-right: 80px;
    }
    .result_products .product_item .p_bottom{
        background: transparent;
        padding: 0 0 16px 0;
        border-radius: 0;
        margin-left: 216px;
        border-bottom: 1px solid #E7E7E7;
    }
    .result_products .p_bottom .info .p_price{
        position: absolute;
        right: 0;
        top: 0;
    }
    .result_products .p_bottom .teacher{
        display: none !important;
    }
    .result_products .product_row {
        overflow: visible;
        gap: 24px;
    }
    .result_products .product_item{
        box-shadow: none;
        border-radius: 0;
        gap: 8px;
        overflow: hidden;
    }
    .result_products .p_bottom .p_desc{
        margin: 8px 0 26px 0;
    }
    .result_products .p_bottom .p_title{
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
    }
    .special.chat_gpt{
        padding: 0 0 28px 0;
        margin: -24px 0 0 0;
    }
    .special.chat_gpt + .result_sett{
        padding: 20px 0 24px 0;
    }
    .special.chat_gpt + .result_sett h2{
        font-size: 1.75rem;
    }
    .special.chat_gpt ~ .categories_row{
        margin: 0 0 48px 0;
    }
    #modal1 .modal-dialog{
        margin: 78px auto 0 auto;
        text-align: right;
        display: flex;
        justify-content: end;
        padding-right: 29px;
    }
    #modal1 .modal-content{
        border-radius: 4px;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
        position: relative;
        width: 220px;
        text-align: left;
    }
    #modal1 .modal-content::before{
        position: absolute;
        content: "";
        right: 25px;
        top: -6px;
        width: 24px;
        height: 6px;
        background-image: url(../img/modal_content_before.svg);
        background-size: 100%;
    }
    .profile_part{
        padding: 24px;
        border-bottom: 1px solid #E7E7E7;
    }
    .profile_part:last-child{
        border: none;
    }
    .profile_part .user_avatar{
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
    }
    .profile_part .user_name{
        gap: 4px;
        align-items: center;
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
        color: #061310;
        margin: 8px 0 4px 0;
    }
    .profile_part .email{
        font-size: 0.75rem;
        line-height: 130%;
    }
    .profile_part ul{
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .profile_part ul a{
        font-size: 0.875rem;
        line-height: 130%;
        color: #061310;
        text-decoration: none;
    }
    body.desc_f8{
        background: #f8f9f8;
    }
    .modul{
        padding: 64px 0 120px 0 !important;
    }
    .modul .container{
        padding-left: calc(100% - 546px);
        position: relative;
    }
    .modul .video_wrap{
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        padding: 0 24px 0 48px;
        width: calc(100% - 546px);
    }
    .modul .video_wrap .video_player{
        position: sticky;
        left: 0;
        top: 64px;
        width: 100%;
        height: auto;
        margin: 0;
        border-radius: 0;
    }
    .wrapper:has(.modul){
        overflow: clip;        
    }
    .bread_crumbs{
        display: flex;
        align-items: center;
        list-style: none;
        gap: 17px;
        color: #646464;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 130%;
    }
    .bread_crumbs a{
        color: #646464;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 130%;
        text-decoration: none;
        position: relative;
    }
    .bread_crumbs a::after{
        position: absolute;
        content: ">";
        right: -13px;
        top: 50%;
        transform: translate(0,-50%);
    }
    .modul .bread_crumbs{
        margin: 0 0 48px 0;
    }    
    .section_title p{
        color: #061310;
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 130%;
    }
    .buy_btn{
        border-radius: 8px;
        width: 100%;
        color: #FFF;
    }
    .buy_btn:hover{
        color: #FFF;
    }
    .modul1{
        display: flex;
        flex-direction: column;
    }
    .modul1 .buy_btn{
        margin: 0 0 48px 0  ;
    }
    .modul1 .block_title,
    .modul2 .block_title{
        margin: 0 0 24px 0;
        font-size: 1.125rem;
    }
    .modul1 .order6{
        order: 6;
    }
    .modul1 .order7{
        order: 7;
        padding: 0 0 48px 23px;
    }
    .modul1 .mocul_desc{
        margin: 0 0 48px 0;
    }
    .modul1 .modul_info{
        padding: 79px 32px 32px 32px;
        border-radius: 8px;
        background: rgba(50, 154, 128, 0.15);
        margin: 0 0 48px 0;
    }
    .modul1 .order7 + .block_title{
        margin: 28px 0 -52px 32px;
    }
    .modul ol li{
        font-weight: 400;
    }
    .rating{
        padding: 0 0 16px 0;
    }
    .note .container{
        padding: 26px 139px 26px 16px;
    }
    .modul2 .container{
        padding: 0;
    }
    .note .container .note_text{
        padding: 26px 16px;
    }
    .note{
        margin: 0 0 24px 0;
    }
    .note + .comments{
        padding: 0;
    }
    .teacher .container{
        padding: 0 270px;
        display: flex;
        flex-direction: column;
    }
    .teacher::after{
        display: none;
    }
    .teacher .teacher_card{
        background: transparent;
        box-shadow: none;
        margin-bottom: 48px;
        padding: 0;
        align-items: center;
        gap: 24px;
    }
    .teacher .teacher_card img{
        padding: 0;
        width: 208px;
        height: 208px;
        border: none;
    }
    .teacher .teacher_card .full_name{
        font-size: 1.5rem;
    }
    .teacher .teacher_card .job{
        font-size: 1rem;
        line-height: 120%;
        padding: 4px 0 48px 0;
    }
    .teacher .teacher_card .info_item{
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 130%;
    }
    .teacher .text_body{
        padding: 0;
    }
    .teacher .text_body::after{
        display: none;
    }
    .teacher .text_body p:last-child{
        margin: 0 0 48px;
    }
    .teacher .text_body:last-child p{
        margin: 0;
    }
    .teacher .text_body:last-child{
        margin: 0 0 48px 0;
    }
    .teacher .text_body ul, .text_body ol {
        margin: 0 0 24px 27px;
    }
    .teacher .teacher_card + .block_title{
        order: 1;
    }
    .teacher.spec2 .teacher_card + .block_title{
        order: unset;
    }
    .teacher .teacher_card ~ .videos_row{
        order: 2;
        padding: 0;
        margin: 0 0 48px 0;
        overflow: hidden;
    }
    .teacher .videos_row ~ .block_title{
        order: 3;
    }
    .teacher .product_wrap {
        order: 4;
    }
    .teacher .videos_row .video_item img{
        width: 216px;
        height: 216px;
        padding: 4px;
        border-radius: 16px;
        border: 2px solid #65CD76;
        object-fit: cover;
        object-position: center;
    }
    .videos_row .video_item .video_title{
        position: absolute;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
        text-decoration: none;
        color: #FFF;
        bottom: 22px;
        left: 22px;
        right: 22px;
        width: auto;
    }
    section.teacher{
        margin: 0;
        padding: 0;
    }
    section.teacher.spec{
        padding: 64px 0 120px 0;
    }
    .open_modal2{
        padding: 8px 24px;
        border-radius: 8px;
        background: #329A80;
        font-size: 1rem;
        line-height: 120%;
        font-weight: 400;
        color: #FFF;
        cursor: pointer;
    }
    .modal-header{
        padding: 24px;
    }
    .modal-header img{
        width: 48px;
        height: 48px;
        border-radius: 4px;
        object-fit: cover;
        object-position: center;
    }
    .modal-header h1{
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 110%;
        color: #061310;
    }
    .modal-header p{
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 130%;
    }
    .modal-header .d-flex{
        gap: 12px;
    }
    .modal-header .flex-column{
        gap: 4px;
    }
    #modal2 .feedback .container{
        padding: 0 24px 40px 24px;
    }
    #modal2 .feed_top{
        margin: 0 0 40px 0;
    }
    #modal2 .feed_top img{
        width: 48px;
        height: 48px;
    }
    #modal2 .wrap_textarea{
        margin: 0;
    }
    #modal2 .modal-footer{
        padding: 0 24px 24px 24px;
    }
    #modal2 .modal-content{
        border-radius: 12px;
    }
    #modal2 .modal-footer button{
        padding: 15px 24px 16px 24px;
        border-radius: 8px;
        background:#329A80;
        border: none;
        outline: none;
        box-shadow: none;
        font-family: SF Pro Display;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }
    .buy_modal .modal_header h2{
        text-align: left;
        font-size: 1.75rem;
    }
    .buy_modal .modal_body{
        gap: 24px;
        padding: 24px 0 0 0;
    }
    .buy_modal .order_number{
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 130%;
    }
    .buy_modal .container{
        padding: 0 24px;
    }
    .buy_modal .modal_header{
        padding: 24px 0 0 0;
        border: none;
    }
    .buy_modal .modal_header svg{
        position: relative;
        transform: none;
    }
    .buy_modal .course_card{
        border-radius: 10px;
        border: 1px solid #E7E7E7;
        padding: 8px;
    }
    .buy_modal .modal_body img{
        width: 92px;
    }
    .buy_modal .modal_body .course_price{
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 130%;
    }
    .buy_modal .justify-content-center{
        padding: 24px;
    }
    #modal3 .modal-content{
        border-radius: 12px;
        background :#FFF;
    }
    #modal4 .success{
        display: flex;
        flex-direction: column;
        padding: 24px;
        position: relative;
    }
    #modal4 .success img{
        width: 343px;
        height: 343px;
        object-fit: cover;
        object-position: center;
    }
    #modal4 .success a{
        position: relative;
        max-width: 100%;
    }
    #modal4 .modal-content{
        max-width: 420px;
    }
    #modal4 .success h2{
        font-size: 1.5rem;
        line-height: 130%;
        margin: 0 0 12px 0;
    }
    #modal4 .success p{
        margin: 0 0 48px 0;
    }
    #modal4 #modal4 .success a{
        margin: 0;
    }
    #modal4 .success svg{
        width: 24px;
        height: 24px;
        padding: 4px;
        position: absolute;
        right: 24px;
        top: 24px;
        cursor: pointer;
    }
    .hero_bg{
        position: relative;
        padding: 0 0 52px 0;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 0 30.3%;
    }
    .hero_bg::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(0deg, rgba(9, 20, 40, 0.72) 0%, rgba(9, 20, 40, 0.72) 100%);
        z-index: 0;
    }
    .hero_bg header{
        z-index: 1;
        position: relative;
    }
    .hero_bg .text-center{
        position: relative;
        z-index: 1;
    }
    .hero_bg .text-center h1{
        font-size: 2.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 90%;
        color: #FFF;
        padding: 64px 0 0 0;
    }
    .hero_bg .text-center p{
        font-size: 1rem;
        font-weight: 400;
        line-height: 120%;
        color: #FFF;
        padding: 12px 0 0 0;
    }
    .hero_bg .navbar-nav .nav-link{
        color: #FFF;
    }
    .course{
        padding: 64px 0 120px 0;
    }
    .course .container,
    .setting .container{
        padding-left: 468px;
        position: relative;
        min-height: calc(100vh - 367px);
    }
    .course .profile_data{
        position: absolute;
        left: 48px;
        top: 0;
        flex-direction: column;
        gap: 8px;
        padding: 24px 48px 32px 48px;
        margin: -147px 0 0 0;
        width: 372px;
        height: calc(100% + 147px);
        border-radius: 8px;
        background: #FFF;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
    }
    .course .profile_data .flex-column{
        align-items: center;
        margin: 0 0 24px 0;
    }
    .course .profile_data img{
        width: 88px;
        height: 88px;
    }
    .course .profile_data h2{
        gap: 8px;
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
        padding: 16px 0;
        cursor: pointer;
    }
    .course .profile_data h2 svg{
        transition: .3s all ease;
    }
    .course .profile_data h2.rotate svg{
        transform: rotateX(180deg);
    }
    .course .profile_data ul{
        list-style: none;
        padding: 8px 0 16px 16px;
    }
    .course .profile_data ul li{
        margin: 0 0 16px 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 120%;
    }
    .course .profile_data ul li:last-child{
        margin: 0;
    }
    .course .profile_data .profile_bottom a{
        padding: 16px 0;
        display: block;
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
        color: #646464;
        text-decoration: none;
    }
    .course .search_course.search_wrap{
        max-width: 450px;
        padding: 0;
        margin: 0 0 40px 0;
    }
    .course .search_course.search_wrap input{
        background-color: transparent;
    }
    .course .course_item{
        width: 286px;
    }
    .course .course_item .course_info svg{
        width: 262px;
    }
    .course .certificat_item .title{
        background: #f3f3f3;
    }
    .course .certificat_item .type {
        margin: 0 0 50px 4px;
    }
    .course .certificat_row{
        overflow: visible;
        padding: 0;
        margin: 0;
    }
    .course .block_title{
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 110%;
    }
    .course .course_block{
        gap: 20px;
        margin: 0 0 40px 0;
    }
    .course .search_results .chat_gpt{
        padding: 0;
        margin: -16px 0 0 0;
        align-items: center;
    }
    .course .search_results .chat_gpt img{
        width: 32px;
        height: 32px;
    }
    .course .search_results .search_info{
        border: none;
        padding: 40px 0 0 0;
    }
    .course .search_results .search_info h2{
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 110%;
        margin: 0 0 24px 0;
    }
    .course .course_results .result_item{
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
    }
    .course .result_item img{
        width: 200px;
        height: 120px;
    }
    .course .result_item .d-flex{
        gap: 16px;
        justify-content: flex-start;
    }
    .course .result_item .title{
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
    }
    .course .result_item .desc{
        font-size: 0.875rem;
        line-height: 130%
    }
    .course .course_results{
        gap: 20px;
    }
    .setting{
        padding: 64px 0 120px 0;
    }
    .wrapper:has(.navigation_wrap){
        overflow: clip;        
    }
    .navigation_wrap{
        position: absolute;
        left: 48px;
        height: 100%;
        margin: -153px 0 0 0;
    }
    .setting .navigation{
        position: sticky;
        left: 0;
        top: 153px;
        width: 372px;
        border-radius: 8px;
        background:#FFF;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
        list-style: none;
        overflow: hidden;
    }
    .setting .navigation h2{
        padding: 32px 24px;
        color: #646464;
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 130%;
    }
    .setting .navigation li{
        transition: .3s all ease;
    }
    .setting .navigation a{
        display: block;
        padding: 24px;        
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
        color: #061310;
        text-decoration: none;
        position: relative;
        transition: .3s all ease;
    }
    .setting .navigation a::after{
        position: absolute;
        content: "";
        width: 100%;
        height: 1px;
        left: 0;
        bottom: 8px;
        background-color: #E7E7E7;
    }
    .setting .navigation li:last-child a::after{
        display: none;
    }
    .setting .navigation li.active{
        background: #061310;
    }
    .setting .navigation li.active a{
        color: #FFF;
        border: none;
    }
    .setting .navigation li.active a::after{
        display: none;
    }
    .setting .block_title{
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 110%;
    }
    .edit_photo{
        margin: 0 0 24px 0;
    }
    .edit_photo img{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
    }
    .edit_photo .photo_actions{
        gap: 24px;
    }
    .edit_photo p{
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 130%;
        color: #646464;
    }
    .edit_photo .action_buttons{
        gap: 12px;
    }
    .edit_photo .action_buttons label,
    .edit_photo .action_buttons a{
        border-radius: 8px;
        padding: 7px 23px;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 130%;
    }
    .edit_photo .action_buttons label{
        background: #329A80;
        color: #FFF;
        cursor: pointer;
        border: 1px solid #329A80;
    }
    .edit_photo .action_buttons input{
        visibility: hidden;
        opacity: 0;
        position: absolute;
    }
    .edit_photo .action_buttons a{
        border: 1px solid #646464;
        color: #061310;
        text-decoration: none;
        text-align: center;
    }
    .form_block{
        gap: 24px;
        margin: 0 0 40px 0;
    }
    .form_block .form_group{
        gap: 24px;
    }
    .form_block label{
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
        cursor: pointer;
        color: #061310;
    }
    .form_block label.no_input{
        font-weight: 400;
    }
    .form_block label input,
    .form_block label select{
        font-family: SF Pro Display;
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        color: #061310;
        padding: 8px 16px;
        width: 400px;
        border: none;
        outline: none;
        border-bottom: 1px solid#E6E6E6;
        appearance: none;
        -webkit-appearance: none;
        background-color: transparent;
    }
    .form_block label input::placeholder{
        color: #666;
    }
    .setting .form_group.phone input,
    .setting .form_group .phone input{
        max-width: 292px;
    }
    .form_block label select{
        background-image: url(../img/arrow-down.png);
        background-repeat: no-repeat;
        background-position: calc(100% - 16px);
        cursor: pointer;
        color: #666;
    }
    .form_block label select option{
        color: #061310;
    }
    .form_block + .block_title{
        margin: 0 0 32px 0;
    }
    .form_block label:has(.password){
        position: relative;
    }
    .form_block label:has(.password) img{
        position: absolute;
        right: 16px;
        bottom: 8px;
        opacity: 0;
        visibility: hidden;
        transition: .3s all ease;
    }
    .form_block label:has(.password) img.active{
        opacity: 1;
        visibility: visible;
    }
    .setting form .red{
        font-size: 1rem;
        font-weight: 400;
        line-height: 120%;
        color: #D72D31;
        text-decoration: none;
    }
    .course .lesson .lesson_main{
        width: 136px;
        height: 136px;
    }
    .lessons{
        padding: 0;
        margin: 0;
    }
    .lessons .block_title{
        font-size: 1.125rem;
        font-weight: 400;
        padding: 0;
        margin: 0 0 24px 0;
    }
    .lessons .lesson{
        padding: 20px 0;
    }
    .lessons .lesson .d-flex:has(.title){
        width: 100%;
    }

    .lessons .lessons_block{
        margin: 0 0 40px 0;
    }
    .lessons .d-flex:has(.lessons_block):last-child .lessons_block{
        margin: 0;
    }
    #modal5 .modal-dialog{
        width: 390px;
    }   
    #modal5 .modal-content{
        padding: 24px;
        border-radius: 12px;
        background:#FFF;
    }
    #modal5 .modal_top{
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 110%;
        margin: 0 0 40px 0;
    }
    #modal5 .modal_top svg{
        cursor: pointer;
        padding: 5px;
        width: 24px;
        height: 24px;
    }
    #modal5 img{
        width: 100%;
        height: 185px;
        border-radius: 16px;
        object-fit: cover;
        margin: 0 0 24px 0;
    }
    #modal5 ul{
        list-style: none;
        margin: 0 0 40px 0;
    }
    #modal5 ul li{
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
        margin: 0 0 16px;
    }
    #modal5 ul li span{
        font-weight: 400;
    }
    #modal5 ul li:last-child{
        margin: 0;
    }
    #modal5 input{
        padding: 8px 16px;
        margin: 0 0 40px 0;
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid#E6E6E6;
        font-size: 1rem;
        font-weight: 500;
        line-height: 120%;
        color: #061310;
    }
    #modal5 input::placeholder{
        color: #666;
    }
    #modal5 button{
        padding: 15px 24px 16px 24px;
        width: 100%;
        border-radius: 8px;
        background:#329A80;
        border: none;
        font-family: SF Pro Display;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        color: #FFF;
    }
    .chat_main .input_wrap{
        padding: 10px 24px;
    }
    .msg_right .message .time{
        color: #329A80;
    }
    .message .text_body:has(img){
        padding: 8px 16px;
    }
    .message .text_body img{
        border-radius: 8px 16px 16px 16px;
        border: 2px solid #F2F2F7;
    }
    .product_wrap{
        margin: -10px;
        padding: 10px;
        overflow: hidden;
    }
    .player .play_top a{
        font-size: 1.5rem;
    }
    .single .player.active:hover .play_top a{
        top: 24px;        
    }
    .single .player.active:hover .play_top a:first-child{
        left: 24px;
    }
    .single .player.active:hover .play_top a:last-child{
        right: 24px;
    }
}

@media screen and (max-width: 1200px){
    header .header_right{
        gap: 0;
    }
    .story_right {        
        padding: 0px 16px 0 16px;
    }
    .note .note_text{
        padding: 26px 16px;
    }
    .story_play .story_top {
        padding: 20px 16px 0 16px;
    }
    .story_row .story_item::before{
        display: none;
    }
    .course{
        margin-top: 44px
    }
    .modul .video_wrap ~ .block_title{
        font-weight: 600;
    }
    .modul .mocul_desc{
        color: #666;
    }
    .modul section{
        padding: 0;
    }
    .yandex_ad .ad-text{
        right: 12px;
        bottom: 12px;
    }
    .container{
        max-width: 480px;
    }
    .container .container{
        padding: 0;
    }
    .author_item .author_image{
        width: 95px;
        height: 92px;
    }
    .section_title{
        font-size: 1.24rem;
    }
    .catalog_right{
        width: -webkit-fill-available;
    }
    .wrapper{
        max-width: 100%;
        margin: 0 auto;
    }
    .header_row .d-flex a{
        padding: 12px;
        display: flex;
    }
    .mobile_none{
        display: none !important;
    }
    .container{
        padding: 0 16px;
        max-width: 100%;
    }
    .stories .block_title{
        padding: 0;
        margin-top: 0;
    }
    .story_item{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        width: min-content;
    }
    .story_row .story_item img{
        width: 88px;
        height: 88px;
        padding: 2px;
        border-radius: 50%;
        border: 2px solid #65CD76;
    }
    .teacher .videos_row{
        padding: 0;
    }
    section.teacher{
        padding: 0;
        margin: 0 0 106px 0;
    }
    .teacher .videos_row .video_item img {
        width: 123px;
        height: 164px;
        border-radius: 8px;
        border: none;
    }
    .teacher .block_title{
        font-weight: 600;
    }
    .teacher .cpecial{
        padding: 0 0 20px 0;
    }
    .story_row .story_item .story_text{
        text-decoration: none;
        color: #000;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 130%;
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        white-space: wrap;
    }
    .videos_row .video_item::before{
        bottom: 2px;
        left: 2px;
        right: 2px;
    }    
    .product_row,
    .authors_row{
        overflow: visible;
        gap: 16px;
    }
    .authentication{
        padding-bottom: 0;
    }
    .result_header .header_row .search{
        max-width: 251px;
    }
    .story_rec{
        gap: 1px;
        margin: -4px 2px 20px 2px;
    }
    .story_rec .rec_item{
        width: calc(33.3% - 0.66px);
        height: 164px;
        padding: 0;
    }
    .story_rec .rec_item::after{
        left: 0;
        bottom: 0;
        width: 100%;
        height: 43px;
    }
    .story_rec .rec_item div{
        bottom: 8px;
        left: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 130%;
    }
    .teacher:has(.story_rec){
        padding: 0;
        margin: 0;
    }
    .teacher:has(.story_rec)::after{
        display: none;
    }
    .teacher .container:has(.story_rec){
        padding: 0;
    }
    .story_main{
        padding: 0;
    }
    .story_main .container{
        padding: 0;
    }
    .story_parent{
        flex-direction: column;
        border-radius: 0;
    }
    .story_play{
        width: 100%;
        height: 400px;
        border-radius: 0;
    }
    .story_right{
        width: 100%;
    }
    .story_bottom{
        order: -1;
    }
    .form_wrap{
        position: fixed;
        left: 0;
        padding: 16px;
        border: none;
    }
    .form_wrap .add_comment{
        border-radius: 100px;
        border: 1.5px solid #E6E6E6;
        padding: 12px 16px;
        height: 48px;
    }
    .story_comments{
        position: fixed;
        background: #FFF;
        left: 0;
        border-radius: 24px 24px 0px 0px;
        padding: 0;
    }
    .story_comments .comments_wrap{
        padding: 32px 16px;
    }
    .story_right .story_top{
        padding: 0;
        border: none;
    }
    .story_actions{
        border: none;
    }
    .story_right .close_story{
        display: none;
    }
    body:has(.single){
        background: #FFF;
    }
    .single .tab_items{
        top: 330px;
        width: 100%;
    }
    .single{
        flex-direction: column;
    }
    .single .player {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
    .single .horizantal_left{
        width: 100%;
        margin: 330px 0 0 0;
    }
    .single .player + .wrapper {
        margin: 0;
        width: 100%;
    }
    .single .horizantal_left .input_wrap{
        width: 100%;
    }
    .single .lesson{
        border: none;
    }
    .single .lessons_block,
    .single .tab_block,
    .single .tab_block,
    .single .change.chat,
    .single .messages{
        width: 100%;
    }
    .single .wrapper{
        min-height: 100svh;
        height: 100%;
    }
    .single .input_wrap input{
        max-width: 100%;
    }
    #modal3 .modal-dialog{
        margin: 0;
        align-items: end;
        height: 100svh;
    }
    #modal3 .modal-content{
        border-radius: 24px 24px 0 0;
    }
    main:has(.teacher .teacher_card):not(.modul){
        margin: 68px 0 0 0;
    }
    .open_header{
        padding: 12px;
        cursor: pointer;
    }
    .navbar .container .navbar-nav,
    .header_right a{
        display: none;
    }
    .collapse.navbar-collapse{
        justify-content: flex-end;
        display: flex;
    }
    .navbar-brand{
        margin: 0;
    }
    .navbar-brand img{
        width: 130px;
        height: 20.773px;
    }
    .navbar>.container{
        flex-wrap: nowrap;
    }
    .index1 header,
    .index2 header,
    .index3 header{
        padding: 4px 0;
    }
    .index1 .hero {
        padding: 40px 0 32px 0;
    }
    .index1 .hero .hero_row{
        padding: 0;
        flex-direction: column-reverse;
        gap: 149px;
    }
    .index1 .hero .hero_image{
        margin: 0 auto;
        width: 105px;
        height: 127px;
    }
    .index1 .hero .story_row{
        padding-left: 0;
        margin: 32px 0 0 0;
        width: 100%;
        overflow-x: auto;
        gap: 8px;
    }
    .index1 .hero .story_row::-webkit-scrollbar {
        display: none;
    }
    section::after,
    section::before{
        display: none;
    }
    .teacher::after{
        display: block;
    }
    .hero::after{
        width: 234px;
        height: 227px;
        border-radius: 0px 0px 0px 45px;
        transform: translate(51%,50px) rotate(45deg);
        display: block;
    }
    .hero_title{
        font-size: 32px;
        font-weight: 600;
        line-height: 120%;
    }
    .hero .hero_title.with_chatgpt{
        margin: 0 0 16px 0;
    }
    .hero_title.with_chatgpt::before{
        top: -30px;
        right: 100%;
    }
    .hero .ai{
        font-size: 18px;
        margin: 0 0 16px 0;
    }
    .section_desc{
        margin: 0 0 20px 0;
        font-size: 16px;
        line-height: 120%;
    }
    .section_desc br{
        display: none;
    }
    .index1 .story_row .story_item{
        text-align: left;
    }
    .index1 .story_row .story_item img{
        width: 123px;
        height: 164px;
        border: none;
        border-radius: 8px;
    }
    .index1 .story_row .story_item .story_text{
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 8px;
        white-space: nowrap;
        color: #FFF;
        font-weight: 600;
    }
    .index1 .story_row .story_item::before{
        display: block;
        left: 2px;
        right: 2px;
        bottom: 2px;
        height: 43px;
    }
    .advantage,
    .for_sutents,
    .for_teachers,
    .teachers_slide,
    .feedback,
    .index2 .advantage,
    .advantage2,
    .index3 .advantage,
    .index3 .advantage2,
    .interaction,
    .price,
    .index3 .feedback{
        padding: 32px 0;
    }
    .advantage .container,
    .for_sutents .container,
    .for_teachers .container,
    .container:has(.swiper8),
    .index3 .advantage2 .container,
    .interaction .container,
    .index3 .container:has(.swiper8){
        padding: 0 16px;
    }
    .adv_row{
        flex-direction: column;
        gap: 16px;
    }
    .advantage .adv_item{
        width: 100%;
        padding: 24px 12px;
    }
    .index1 .section_title,
    .index2 .section_title,
    .index3 .section_title{
        font-size: 24px;
        font-weight: 500;
        line-height: 110%;
    }
    .advantage .section_desc,
    .for_teachers .section_desc{
        margin: 0 0 32px 0;
    }
    .advantage .adv_item .adv_item_title{
        font: 18px;
        line-height: 130%;
        font-weight: 600;
    }
    .for_sutents .student_block,
    .for_teachers .teacher_block{
        flex-direction: column-reverse;
        gap: 32px;
    }
    .for_sutents .section_desc{
        margin: 0 0 32px 0;
    }
    .adv_image,
    .index2 .adv_image{
        height: 344px;
        width: 100%;
    }
    .teachers_slide .section_title,
    .teachers_slide .section_desc{
        text-align: left !important;
    }
    .swiper7{
        padding: 32px 0;
    }
    .swiper7 .swiper-slide img{
        width: 290px;
        height: 380px;
    }
    .swiper7 .swiper_prev, .swiper7 .swiper_next{
        display: none;
    }
    .swiper7 .swiper-slide .teacher_name{
        margin: 32px 0 8px 0;
    }
    .teachers_slide .btn_join{
        width: 100%;
    }
    .d-flex:has(.swiper8){
        margin: 0;
        justify-content: flex-start !important;
    }
    .swiper8 .swiper-wrapper{
        flex-direction: column;
        gap: 16px;
    }
    .swiper8 .swiper-wrapper .swiper-slide{
        height: auto;
    }
    .swiper8 .swiper-wrapper .swiper-slide:nth-child(n+3){
        display: none;
    }
    .feedback .section_title{
        margin: 0 0 16px 0;
    }
    .feedback .feedback_item{
        padding: 16px;
    }
    .status .section_title{
        margin: 0 0 4px 0;
    }
    .status{
        padding: 75px 0 64px 0;
    }
    .status .status_main{
        font-size: 64px;
        font-weight: 500;
        line-height: 90%;
    }
    .status .section_desc{
        margin: 0 0 24px 0;
    }
    .status .btn_join{
        margin: 0;
        width: 100%;
    }
    .status .fragment{
        max-width: 47px;
        max-height: 47px;
    }
    .status .fragment1{
        width: 17.596px;
        height: 17.596px;
        left: 7%;
        top: 15%;    
    }
    .status .fragment2{
        width: 37.147px;
        height: 37.147px;
        left: -7%;
        top: 32%;
    }
    .status .fragment3{
        left: 10%;
        top: 34%;    
    }
    .status .fragment4{
        right: 19%;
        top: 8%;
    }
    .status .fragment5{
        width: 36.84px;
        height: 36.84px;
        right: 8%;
        top: 23%;
    }
    .status .fragment6{
        width: 17.45px;
        height: 17.45px;
        right: 10%;
        top: 42%;
    }
    footer .footer_links{
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 64px 0;
    }
    .footer_links ul {
        gap: 24px;
        width: calc( 50% - 22px);
    }
    footer .footer_top{
        flex-direction: column;
    }
    .footer_bottom{
        flex-direction: column;
        gap: 32px;
    }
    footer .main_links{
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    footer .media {
        gap: 16px;
    }
    #modal12{
        background: #FFF;
        display: block;
        left: 100%;
        transition: .3s all ease;
    }
    #modal12.show{
        left: 0;
    }
    #modal12 .modal-dialog{
        margin: 0;
    }
    #modal12 .modal-content{
        height: 100svh;
        border-radius: 0;
    }
    #modal12 .modal-header{
        padding: 15.5px 16px;
        border: none;
    }
    #modal12 .modal-body{
        padding: 20px 16px 47px 16px;
        gap: 32px;
        display: flex;
        flex-direction: column;
    }
    #modal12 ul{
        list-style: none;
    }
    #modal12 .header_links a{
        padding: 16px 0;
        font-size: 24px;
        font-weight: 600;
        line-height: 130%;
        display: inline-block;
        color: #061310;
        text-decoration: none;
    }
    #modal12 .header_links a:hover{
        color: #061310;
    }
    #modal12 .header_links li:first-child a{
        padding-top: 0;
    }
    #modal12 .header_links li:last-child a{
        padding-bottom: 0;
    }
    #modal12 .download_on{
        gap: 16px;
    }
    #modal12 .main_links a{
        font-size: 14px;
        font-weight: 400;
        line-height: 130%;
        color: #000;
        text-decoration: none;
        padding: 8px 0;
        display: inline-block;
    }
    #modal12 .main_links a:hover{
        color: #000;
    }
    #modal12 .main_links li:first-child a{
        padding-top: 0;
    }
    #modal12 .main_links li:last-child a{
        padding-bottom: 0;
    }
    #modal12 .media{
        gap: 16px;
    }
    #modal12 .media a{
        display: flex;
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        border: 0.544px solid #DADADA;
        border-radius: 50%;
    }
    .index2 .hero::after, .index3 .hero::after{
        top: 0%;
        width: 205px;
        height: 175px;
        background-size: 100%;
    }
    .hero{
        padding: 175px 0 32px 0;
    }
    .hero .hero_image2,
    .index3 .hero .hero_main{
        display: none;
    }
    .index2 .hero .text-center,
    .index3 .hero .text-center{
        text-align: left !important;
    }
    .index2 .container{
        padding: 0 16px !important;
    }
    .sub_title{
        font-size: 18px;
    }
    .index2 .hero  .hero_title{
        margin: 0 0 16px 0;
    }
    .section_desc.small_desc{
        font-size: 1rem;
        line-height: 120%;
        margin: 0 0 20px 0;
    }
    .index2 .advantage1 .adv_row{
        flex-direction: column-reverse;
        gap: 32px;
    }
    .index2 .advantage1 .adv_row .adv_left,
    .index2 .advantage2 .adv_row .adv_left,
    .index2 .advantage3 .adv_row .adv_left,
    .index3 .advantage1 .adv_row .adv_left,
    .index3 .advantage3 .adv_row .adv_left,
    .index3 .advantage2 .adv_row .adv_left,
    .interaction .inter_right{
        width: 100%;
    }
    .advantage ul li, .advantage2 ul li{
        font-size: 14px;
        line-height: 130%;
        padding: 0 0 0 45px;
    }
    .advantage ul li::before, .advantage2 ul li::before{
        transform: none;
        top: 16px;
    }
    .section_desc.small_desc2{
        font-size: 14px;
        line-height: 130%
    }
    .advantage2 .adv_row{
        gap: 32px;
    }
    .index2 .advantage2 .section_title{
        margin: 0 0 16px 0;
    }
    .index2 .advantage2 .section_desc{
        margin: 0 0 32px 0;
    }
    .index2 .advantage3 .adv_row{
        flex-direction: column-reverse;
        gap: 32px;
    }
    .index2 .advantage3 .adv_image{
        height: 294px;
    }
    .index2 .advantage3 .section_title{
        margin: 0 0 16px 0;
    }
    .advantage4 .adv_row .adv_image{
        padding: 0;
        height: 507px;
    }
    .status .section_desc{
        font-size: 14px;
        line-height: 130%;
    }
    .preference{
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        margin: 32px 0 0 0;
    }
    .preference .prefer_item{
        width: calc(50% - 6px);
        padding: 24px 16px;
        gap: 16px;
    }
    .preference .prefer_item img{
        width: 44px;
        height: 44px;
    }
    .preference .prefer_item p{
        font-size: 14px;
        line-height: 130%;
        width: 100%;
        text-align: center;
    }
    .index3 .advantage .adv_row{
        flex-direction: column-reverse;
        gap: 32px;
    }
    .index3 .advantage1 .section_title{
        margin: 0 0 16px 0;
    }
    .index3{
        display: flex;
        flex-direction: column;
    }
    .index3 .advantage3 .adv_image{
        height: 190px;
        width: 207px;
        margin: 0 auto;
    }
    .index3 .advantage3 .adv_row .section_title{
        margin: 0 0 16px 0;
    }
    .interaction .inter_row{
        gap: 32px;
        flex-direction: column;
    }
    .interaction .inter_right {
        gap: 32px;
    }
    .interaction .inter_item {
        width: calc(50% - 16px);
    }
    .interaction .section_title{
        margin: 0 0 16px 0;
    }
    .interaction .section_desc{
        margin: 0;
    }
    .price .text-center{
        text-align: left !important;
    }
    .msg_right .user_avatar{
        display: none;
    }
    .next_same .message{
        border-radius: 16px 16px 16px 8px;
    }
}