@font-face {
    font-family: 'Nunito Regular';
    src: url(/public/fonts/Nunito-Regular.ttf);
}
@font-face {
    font-family: 'Nunito Bold';
    src: url(/public/fonts/Nunito-Bold.ttf);
}

:root{
    --violet:#8B8AC0;
    --violet_dark:#464792;
    --green:#449A46;
    --yellow:#EDC444;

    --mt_24: 24px;
    --section_pt: 60px;

    --regular:'Nunito Regular';
    --bold:'Nunito Bold';
}
*{
    box-sizing: border-box;
}
body{
    font-family: var(--regular);
}
/*Общее*/
.wrap{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.wrap_nav{
}
.contentmain {
    flex-grow: 1;
}
.mt_24{
    margin-top: 24px;
}
.pt_24{
    padding-top: 24px;
}
.pt_60{
    padding-top:60px ;
}
.pb_24{
    padding-bottom: 24px;
}
.violet_bc{
    background-color: var(--violet);

}
.p_12{
    padding: 12px;
}
a{
    text-decoration: none;
}
.mb_section{
    margin-bottom: 60px;
}
.white, .white input::placeholder{
    color: white;
}
.violet{
    color: var(--violet);
}
.green{
    color: var(--green);
}
.white h3, .white span{
    color: white;
}
.violet p, .violet span, .violet h3{
    color: var(--violet);
}
.green p, .green span{
    color: var(--green);
}
.card_text_zIndex{
    position: relative;
    z-index: 1;
    padding: 24px;
    border-radius: 15px;
    margin-left: -100px;
    margin-top: 76px;
}
.mt_content{
    margin-top: 20px;
}
.heading{
    font-family: var(--bold);
}
.description{
    font-size: 18px;
}
.img_features{
    height: 200px;
}
.img_features img{
    z-index: 0;
    position: relative;
    border-radius: 15px;
    object-fit: cover;
    height: 200px;
    width: 100%;

}


/*Navbar*/
.nav_bar{
    padding-bottom: 10px;
    padding-top: 10px;
}
.nav_link > a, .footer > p{
    font-family: var(--regular);
    color: white;
}
.nav_link > a:hover, .nav_link a:active{
    color: var(--yellow);
}


/*Footer*/
.footer{
    padding-bottom: 24px;
    padding-top: 24px;
}


/*Welcome*/
.bi_welcome{
    background-color: var(--violet);
    background-image: url("/public/img/Section_Welcom.png");
    background-position: bottom right;
    background-size: contain;
    height: 100%;
    background-repeat: no-repeat;


}
.slogan > h1{
    font-family: var(--bold);
    color:white;
    padding-bottom: 100px;
    padding-top: 152px;

}
.welcome_button{
    background-color: var(--yellow);
    font-family: var(--bold);
    font-size: 20px;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 120px;
}
.welcome_button:hover{
    color: var(--violet);
}
.welcome_button > a{
    color: white;
}


/*AboutUs*/
.violet_border{
    border: 3px solid var(--violet);
}
.description_aboutUs{
    background-color: white;
    width: 420px;
    height: 180px;
}
.green_border{
    border: 3px solid var(--green);
}

.description_aboutUs p{
    font-size: 18px;
    font-family: var(--bold);
}
.description_aboutUs span{
    font-size: 16px;
    font-family: var(--regular);
}

/*OurStuding*/
.description_lesson{
    background-color: white;
    width: 416px;
    height: 230px;
    padding: 24px;
}

.button_lesson_detail button{
    background-color: var(--green);
    font-family: var(--bold);
    color: white;
    width: 368px;
    font-size: 16px;
    border-radius: 10px;
}
.BG_button{
    background-color: var(--green);
    font-family: var(--bold);
    color: white;
    border-radius: 10px;
}
.button_lesson_detail button:hover{
    color: var(--yellow);
}
.BG_button:hover{
    color: var(--yellow);
}
.title_lesson, .title_fio{
    color: var(--green);
    font-size: 18px;
    font-family: var(--bold);
}
.age, .post{
    color: var(--green) !important;
    font-size: 16px;
    font-family: var(--bold);
    margin-bottom: 10px;
}
.detail_lesson h2, .detail_teacher h2{
    color: var(--green);
    font-family: var(--bold);
}
.detail_lesson p, .detail_teacher p{
    color: var(--violet_dark);
    font-size: 12pt;
    font-family: var(--regular);
}
.detail_lesson span,  .landing_span{
    color: var(--green);
    font-family: var(--regular);
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.detail_teacher span {
    color: var(--green);
    font-family: var(--bold);
}

    /*AboutTeacher*/
.teacher_card{
    border-radius: 10px;
}
.img_teacher{
    position: relative;
    border-radius: 10px;
    object-fit: cover;
    height: 424px;
    z-index: 0;
    width: 100%;
}

.info_teacher{
    position: relative;
    border-radius: 10px;
    padding: 24px;
    z-index: 1;
    background-color: var(--violet);
    margin-top: -150px;
    height: 200px;
}
.btn_row{
    position: absolute;
    button:24px;
}
.text_teacher p{
    font-size: 18px;
    font-family: var(--bold);
    color:white;
}
.text_teacher span{
    font-size: 16px;
    font-family: var(--regular);
    color:white;
}
.detail_teacher_button{
    bottom: 24px;
    width: 100%;
}
.button_teacher{
    background-color: var(--green);
    font-family: var(--bold);
    color: white;
    font-size: 16px;
    border-radius: 10px;
}
.button_teacher:hover{
    color: var(--yellow);
}



/*Photogallery*/
.photo_col img{
    object-fit: cover;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

/*Feedback*/
.img_feedback img{
    border-radius: 10px;
    object-fit: cover;
    z-index: 1;
    position: relative;
    height: 200px;
    width: 100%;
}

.text_feedback{
    border-radius: 10px;
    background-color: var(--violet);
    padding: 24px 24px 24px 65px;
    z-index: 0;
    position: relative;
    margin-left: -65px;
    margin-top: 37px;
    height: 200px;
}
.text_feedback p{
    color: white;
    font-family: var(--bold);
    font-size: 18px;
}
.text_feedback span{
    color: white;
    font-size: 16px;
    font-family: var(--regular);

    display: -webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*Map*/
.map{
    border-radius: 10px;
}
.text_map p{
    color: white;
    font-family: var(--regular);

}


/*News*/
.news_card img{
    border-radius: 10px;
    width: auto;
}
.title_news{
    color: var(--violet);
    font-family: var(--bold);
    margin-bottom: 5px;
    font-size: 20px;
}
.link_news{
    color: var(--violet);
    font-family: var(--bold);
}
.link_news:hover{
    color: var(--yellow);
}
/*Order_form*/
.label_edit{
    font-family: var(--regular);
    color: var(--violet);
}
.input_edit{
    border-radius: 10px;
    border: 2px solid var(--violet);
}
.btn_order{
    background-color: var(--violet);
    color: white;
    padding: 12px 24px;
    font-family: var(--bold);
    border-radius: 10px;
}
.btn_order:hover{
    color: var(--yellow);
}


/*LessonsPage*/
.border_card{
    border-radius: 10px;
}
.border_card img{
    border-radius: 10px;
    object-fit: cover;
    z-index: 0;
    position: relative;
}
.text-info {
    background-color: white;
    position: relative;
    z-index: 1;
    margin-top: -70px;
    border-radius: 10px;
    padding: 24px;
    height: 220px;
}
.img_lessonPage{
    height: 250px;
}
.text-info_lesson{
    background-color: white;
    position: relative;
    z-index: 1;
    margin-top: 20px;
    border-radius: 10px;
    padding: 24px;
    height: 250px;
}
.yellow_button{
    background-color: var(--yellow);
    border-radius: 10px;
    font-family: var(--bold);
    color: white;
}
.yellow_button:hover{
    color: var(--green);
}
.green_button{
    background-color: var(--green);
    border-radius: 10px;
    font-family: var(--bold);
    color: white;
}
.green_button:hover{
    color: var(--yellow);
}
.filter .col-4 select, .filter .col-6 select, .filter .col-6 input{
    border: 3px solid white;
    border-radius: 10px;
    background-color: var(--violet);
    color: white;
}


/*single_page*/
.detail_teacher h2{
    color: var(--green);
    font-family: var(--bold);
}
.specialization{
    font-family: var(--regular) !important;
}
.description_lesson span{
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}