@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

body{
    background:black !important;
    width: 100% !important;
}
p{
    font-size: 16px !important;
}
html{
    width: 100%;
}
header{
    background-image: url(../images/main-screen__bgc.png) !important;
    background-size: 100% 100% !important;
    height: auto !important;
    width:100% !important;
}
.navbar{
    width: 90%;
    margin: 0 auto;
}
.nav-item{
    padding-left:17px !important;
    font-size: 16px !important;
}

.violet_btn{
    font-family: "Roboto" sans-serif;
    font-weight: 500;
    color: #FFFFFF !important;
    background-color: #7E6CFA;
    background-image:linear-gradient(315deg, #7E6CFA 0%, #C598FC 74%);
    border-radius: 50px !important;
    border:none;
    padding:10px 30px 10px 30px !important;

    font-size: 16px !important;
    transition: 200ms;
    }
.violet_btn:hover{
    opacity: .8;
}

.h1_64{
    color: white !important;
    font-size: 64px !important;
    margin-bottom: 7.5% !important;
}
.count_div{
    width: 41%  !important;
    margin-left: 19%;
    margin-top: 8% !important;
    padding-bottom: 12% !important;
}
.black_count{
    width:102px !important;
    /* height:85px !important; */
    text-align: center !important;
    background: #121212 !important;
   padding: 20px 30px 20px 30px !important;

}
.bl_c{
    margin-left: 6% !important;
}

.row_num{
    color:white !important;
    font-size: 32px;
    font-weight: bold;
}
.row_time{
    color:#6B6B6B !important;
}
.flex_count{
    display: flex !important;
    justify-content: space-between;
}


/*      end of header       */
.zakaz_div{
    width:64% !important;
    margin: auto;
    padding-top: 2% !important;
    padding-bottom:.5% !important;

}
.gray{
    background-color: #141414;
}

.pink_btn{
    width: 169px;
    height: 44px; 
    background-color: #864ba2;
    background-image: linear-gradient(315deg, #864ba2 0%, #bf3a30 74%);
    border-radius: 20px !important;
    border:none;
    padding: 9px 20px !important;
    font-size: 16px !important;
    transition: 200ms;
    font-family: "Roboto" sans-serif;
    font-weight: 500;
    color: #FFFFFF !important;
}
.d_16>p{
    font-size: 16px !important;
    line-height: 24px !important;
}
.text_kurs{
    color:#6B6B6B !important;
    font-size: 16px !important;
}
.num_kurs{
    color: white !important;
    font-size: 16px !important;
    font-weight: bold !important;
}
.pg_bar{
    background-color: #864ba2;
    background-image: linear-gradient(315deg, #864ba2 0%, #bf3a30 74%);
}
.chg{
    margin-left: 10% !important;
}



/* Chem mi zanimayemsya */

.cont_chem{
    width: 74% !important;
    margin: auto;
    margin-top: 10%;
    margin-bottom: 10% !important;
}
.square_violet{
    background-image: url(../images/violet.png) !important;
    background-size: 100% 100% !important;
}
.z_img{
    margin-top: 13% !important;
    margin-left: 5% !important;
}
.h1_48{
    font-size: 48px;
    color: white !important;
}
.cont_66{
    width: 69% !important;
    margin: auto;
}
.chem{
    align-items: center !important;
    margin-top: 8%;
    
}
.h2_36{
    font-size: 36px !important;
    color: white;
    margin-left: 1%;
}
.ty{
    display: flex;
    align-items: center;
    justify-content: left !important;
}





/* Violt flex */
.violet_flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 3%;
}
.violet_flex>h1{
    position: absolute;
    margin-left: 115px !important;
}

/* program obuchenia */

.centerr{
      margin: auto;
      margin-top: 18%;
      text-align: center;
}
.centerr>div{
    width: 80%;
    text-align: center;
    margin: auto;
    color: #6C6C6C;
}
.h1_st{
    margin-top:30%; text-align: center; margin-bottom:10%;
}

 
/* diagram */
.p_18{
    font-size: 18px;
    color: white;
}
.con_center{
    width: 650px;
    margin: auto;
    margin-top: 4%;
    text-align: center;
    margin-bottom: 16% !important;
}
.left_column{
    text-align: right !important;
    border-right: 8px solid #9479FB;
    width: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.left_column>p{
    float: left !important;
    margin-left: 55px !important;
}
.right_column>p{
    float: right !important;
    margin-right: 55px !important;
}

.right_column{
    width: 50% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important; 
}
.line_left{
    width: 35px !important;
    border-bottom: 3px solid #6C6C6C;
    float: right !important;
    height: 3px !important;
}
.line_right{
    width: 35px !important;
    height: 3px !important;
    border-bottom: 3px solid #6C6C6C;
    float: left !important;
    margin-right: 30px !important;
}
.gray_h6{
    color: #6C6C6C;
    font-size: 14px !important;
    margin-bottom: 5% !important;
    padding-top: 15px !important;
}
.left_column>.gray_h6{
    margin-right: 60px !important;
}
.right_column>.gray_h6{
    margin-left: 70px !important;
}

.cont_diagram{
    display: flex;
    justify-content: space-between;
    border:none !important
}






/* Person circle */
.cont_person{
    margin: auto !important;
    width: 75% !important;
    margin-top: 9% !important;
    margin-bottom: 9% !important;
}
.cards{
    text-align: center !important;
}
.h3_24{
    font-size: 24px !important;
    color: white;
    margin-top: 12%;
}
.cards>p{
    color: #6C6C6C;
    margin-bottom: 10%;
}
.cards>img{
    transition: 200ms;
}
.cards>img:hover{
    opacity: 0.8;
    transform: scale(1.1);
}
.bio{
    border-radius: 50px !important;
    padding: 10px 30px !important;
    margin-bottom: 20% !important;
}


/* Статьи каждую неделю */

.centerr_2{
    width: 100%;
    margin: auto;
    text-align: center;
}
.centerr_2>div{
  width: 80%;
  text-align: center;
  margin: auto;
  color: #6C6C6C;
}
#email{
    background:url(../images/email.png) no-repeat right top  !important;
    color: #cccccc !important; 
    padding: 9px 20px !important;
    border-top-left-radius: 50px !important; 
    border-bottom-left-radius: 60px !important;
    text-indent: 15px !important;
     width: 350px !important;
}
.em_flex{
    margin-left: 32% !important;
    margin-top: 4% !important;
    margin-bottom: 3% !important;
}
.pink_btn_1{
    width: 169px;
    height: 46px; 
    background-color: #864ba2;
    background-image: linear-gradient(315deg, #864ba2 0%, #bf3a30 74%);
    border-radius: 20px !important;
    border:none;
    padding: 9px 20px !important;
    font-size: 16px !important;
    transition: 200ms;
    font-family: "Roboto" sans-serif;
    font-weight: 500;
    color: #FFFFFF !important;
    position: absolute !important;
    margin-left: 335px !important;
}

/* icons */
.icon_flex{
    display: flex;
    justify-content: space-around;
    width: 300px !important;
    margin-bottom: 10% !important;
}
.icon_flex>div{
    border-radius: 50px !important;
    background-color: #7E6CFA;
    background-image:linear-gradient(315deg, #7E6CFA 0%, #C598FC 74%);
    color: white !important;
    /* padding: 15px 23px !important; */
    width: 50px !important;
    height: 50px !important;
    padding-top: 8.5px !important;
    font-size: 20px !important;
    transition: 200ms;
    cursor: pointer;
}

.icon_flex>div:hover{
     opacity: 0.8;
}



/* button hover */
.pink_btn:hover{
    opacity: 0.8;
}


/* MEDIA */
@media screen and (max-width:390px) {
    .a{
        font-size: 20px !important;
    }
}
@media screen and (max-width:411px) {
    .progress.mb-3{
        width: 60% !important;
    }
    .nayana{
        width: 60% !important;
    }
    .d_16>p{
        font-size: 11px !important;
    }
}
@media screen and (max-width:510px) {
    .progress.mb-3{
        width: 70% !important;
    }
    .nayana{
        width: 70% !important;
    }
}

@media screen and  (max-width:769px) {
    .loremi{
        display: none;
    }
}

@media screen and (max-width:640px) {
    #email{
        width: 250px !important;
    }
    .pink_btn_1{
        width: 150px !important;
        margin-left: 200px !important;
    }
}
@media screen and (max-width:600px) {
    .con_center{
        width: 300px !important;
    }
    .left_column>p{
        font-size: 13px !important;
    }
    .right_column>p{
        font-size: 13px !important;
    }
    .line_left{
        width: 23px !important;
    }
    .line_right{
        width: 23px !important;
    }
    .gray_h6{
        font-size: 12px !important;
    }
    .left_column>.gray_h6{
        margin-right: 31px !important;
    }
    .right_column>.gray_h6{
        margin-left: 39px !important;
    }
}

@media screen and (max-width:1500px) {
    .em_flex{
        margin-left: 25% !important;
    }
}
@media screen and (max-width:1100px) {
    .em_flex{
        margin-left: 15% !important;
    }
}
@media screen and (max-width:750px) {
    .em_flex{
        margin-left: 3% !important;
        margin-bottom: 8% !important;
    }
}


@media screen and (max-width:1350px) {
    .cards>img{
        width: 70% !important;
    }
}
@media screen and (max-width:800px) {
      .cont_person{
          margin-top: 23% !important;
      }
}



@media screen and (max-width:1367px) {
    .h1_64{
        font-size: 48px !important;
    }
    .black_count{
        padding: 12px 22px 12px 22px !important;

    }
}
@media screen and (max-width:1400px) {
    .h1_64{
        font-size: 48px !important;
    }
}
@media screen and (max-width:1100px) {
    .h1_64{
        font-size: 32px !important;
    }
    .black_count{
        padding: 8px 18px 8px 18px !important;
    }
    .row_num{
        font-size: 25px;
    }
    .row_time{
        font-size: 13px ;
    }
}
@media screen and (max-width:840px) {
    .h1_64{
        font-size: 23px !important;
    }
    .black_count{
        padding: 4px 14px 4px 14px !important;
    }
    .row_num{
        font-size: 21px;
    }
    .row_time{
        font-size: 10px;
    }
    .count_div{
        width: 28% !important;
    }
}
@media screen and (max-width:662px) {

    .black_count{
        padding: 2px 12px 2px 12px !important;
    }
    .count_div{
        width: 18% !important;
    }
}
@media screen and (max-width:1580px) {

     .pink_btn{
        width: 160px;
        font-size: 14px !important;
     }
     .zz_p{
         font-size: 12px !important;
         margin-left: 25% !important;
     }
     .progress.mb-3{
         width: 92% !important;
     }
}
@media screen and (max-width:1260px) {
    .pink_btn{
        width: 145px !important;
        font-size: 13px !important;
    }
 }
@media screen and (max-width:1195px) {
    .pink_btn{
       width: 130px !important;
       font-size: 11px !important;

    }
    .zz_p{
        font-size: 11px !important;
        margin-left: 35% !important;
    }
    .progress.mb-3{
        width: 93% !important;
    }
    .num_kurs>p{
        margin-left: 75% !important;
    }
}
@media screen and (max-width:1020px) {
    .pink_btn{
        width: 120px !important;
        height: 35px !important;
        font-size: 10px !important;
    }
 }
@media screen and (max-width:928px) {
    .pink_btn{
       width: 98px !important;
       height: 28px;
       font-size: 7px !important;
    }
    .num_kurs>p{
        font-size: 14px !important;
    }
    .d_16>p{
        font-size: 13px !important;
    }
}
@media screen and (max-width:789px) {
     .chg{
         margin-left: 22% !important;
     }
}
@media screen and (max-width:768px) {
    .chg{
        margin-left: 0%!important;
    }
    .zz_p{
        margin-left: 0% !important;
    }
    .pink_btn{
        display: flex;
        align-items: center;
        text-align: center;
        width: 120px !important;
        height: 37px !important; 
        font-size: 10px !important;
    }
}

.h5_24{
    color: white;
    font-size: 24px !important;
    margin-bottom: 8%;
}
@media screen and (max-width:1564px) {
   .chem>h1{
       font-size: 35px !important;
   }
   .chem>p{
       font-size: 14px !important;
   }
}
@media screen and (max-width:1168px) {
    .chem>h1{
        font-size: 28px !important;
    }
    .chem>p{
        font-size: 12px !important;
    }
 }
 @media screen and (max-width:1023px) {
    .chem>h1{
        font-size: 20px !important;
    }
    .chem>p{
        font-size: 11px !important;
    }
 }
 @media screen and (max-width:900px) {
    .chem>h1{
        font-size: 16px !important;
    }
    .chem>p{
        font-size: 10px !important;
    }
 }
 @media screen and (max-width:768px) {
    .chem>h1{
        font-size: 48px !important;
    }
    .chem>p{
        font-size: 16px !important;
    }
 }
 @media screen and (max-width:1234px) {
    .h1_st{
        margin-top: 45%;
    }
}
@media screen and (max-width:953px) {
    .h1_st{
        margin-top: 56%;
    }
}
@media screen and (max-width:839px) {
    .h1_st{
        margin-top: 68% !important;
    }
}
@media screen and (max-width:769px) {
    .h1_st{
        margin-top: 10% !important;
    }
}
@media screen and (max-width:600px) {
    .h1_st{
        margin-top: 10% !important;
    }
}


/* logo */
.con_logo{
    margin-top: 6%;
}
.logo_img{
    width: 68%;
}


@media screen and (max-width:917px) {
    .violet_flex>h1{
        font-size: 40px !important;
    }
    .con_logo{
        margin-top: 12% ;
    }
}
@media screen and (max-width:768px) {
    .con_logo{
        margin-top: 16% ;
    }
    .img_div_logo{
        border: none !important;
    }
    .logo_img{
        border-bottom: 1px;
    }
    .btn_col{
        display: flex;
        justify-content: center;
    
    }
    .kursss{
        justify-content: center;
    }
    .d_16{
        text-align: center;
    }
    .progress{
        margin: 0 auto;
    }
    .nayana{
        margin: 0 auto;
        width: 55% !important;
    }
    .progress.mb-3 {
        width: 55% !important;
    }
}

@media screen and (max-width:470px) {
    .violet_flex>h1{
        font-size: 32px !important;
    }

 }
 @media screen and (max-width:438px) {
    .violet_flex>h1{
        font-size: 25px !important;
    }
 }
 @media screen and (max-width:360px) {
    .violet_flex>h1{
        font-size: 17px !important;
    }
 }
 @media screen and (max-width:300px) {
    .violet_flex>h1{
        font-size: 13px !important;
    }
 }
 @media screen and (max-width:1131px) {
    .con_center{
        width: 450px !important;
    }
    .left_column>p{
        margin-right: 43px !important;
        font-size: 14.5px !important;
    }
    .right_column>p{
        margin-left: 43px !important;
        font-size: 14.5px !important;
    }
    .left_column>.gray_h6{
        margin-right: 43px !important;
    }
    .right_column>.gray_h6{
        margin-left: 43px !important;
    }
}
@media screen and (max-width:1008px) {
    .violet_btn{
        font-size: 11px !important;
        padding: 10px 23px !important;
    }
}
@media screen and (max-width:992px) {
    .h1_64{
        display: none;
    }
    .black_count{
        display: none;
    }
    header{
        background-size: cover !important;
        height: 500px !important;
    background-position:bottom right !important; 

    }
}
@media screen and (max-width:395px) {
    .chem>h1{
        font-size: 30px !important;
    }
}
@media screen and (max-width:327px) {
    .h1_48{
        font-size: 25px !important;
    }
}
@media screen and (max-width:400px) {
    .em_flex{
        display: flex;
        justify-content: center;
        width: 50%;
    }
    .icon_flex{
        width: 100% !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .input-group{
        display: flex;
        justify-content: center;
    }
    #email{
        width: 180px !important;
        height: 37px;
    }
    .pink_btn_1{
        width: 104px !important;
        margin-left: 148px !important;
        height: 37px;
        font-size: 11px !important;
    }
}

@media screen and (max-width:535px) {
     .con_center{
         width: 250px !important ;
     }
     .left_column>p{
        margin-right: 33px !important;
        /* margin-right: 0% !important;*/
        margin-left: 0% !important; 

     }
     .left_column>.gray_h6{
        margin-right: 33px !important;
     }
     .right_column>.gray_h6{
        margin-left: 33px !important;
     }
     .right_column>p{
        margin-left: 33px !important;
        margin-right: 0% !important;
     }
}
@media screen and (max-width:355px) {
    .con_center{
        width: 130px !important ;
    }
    .p_18{
        font-size: 12px !important;
    }

}
@media screen and (max-width:365px) {
    .prepod{
        font-size: 17px !important;
    }
}
i {
    font-family: fontawesome !important;
}