/*menu*/

.home_menu {
    background-color: #2E3191;
    color: #8C94A3;
}

.home_menu_right {
    position: relative;
    /* border:1px solid red;  */
    width:100%;
    height: auto;
}

.home_menu_right p {
    display:inline;
}



#div-logo img {
    max-width: 200px;
    height: auto;
    float: left;
}

#div-logo #txtsearch{
    border: 1px solid #E9EAF0;
    max-width: 424px;
    height: 35px;
    padding: 12px 177px 12px 18px;
    gap: 0px;
    border: 1px 0px 0px 0px;
    opacity: 0px;
    margin-left:15px;
}

#div-logo #btncreateaccount {
    float : right;
    border: 1px solid #2E3191;
    color: #2E3191;
    background-color: #fff;
}

#div-logo #cart {
    float: right;
    margin-right: 15px;

}

#div-ceo{
    position: relative ;

}

#div-ceo .carousel-caption {
    position:absolute;
    top:100px;
    left:155px;
}

#div-ceo #ceo {
    max-width: 800px;
    height: 500px;
    position: absolute;
    top:20px;
    right:100px;
}

#div-ceo #bg-ceo-bottom{
    position:absolute;
    right: 0px;
    top:220px;
}
#div-browse-top-category {
    display: flex;
    flex-direction: column; 
}
#div-browse-top-category h2{
    color:#34CEFF;
    font-weight:bold;
}

#div-browse-top-category #div-top-course {
    display:  flex ;
    flex-direction: row;
    column-gap: 1rem;
    justify-content: space-around;
    flex-basis: auto;
    flex-wrap: wrap;
}

#div-browse-top-category #div-top-course .top-course-detail {
    display:  flex ;
    flex-direction: row;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#div-browse-top-category #div-top-course .top-course-detail .top-course-subdetail {
    display:  flex ;
    flex-direction: row;
}
#div-browse-top-category #div-top-course .top-course-subdetail-1  {
    background: #FFA078;
}

#div-browse-top-category #div-top-course .top-course-subdetail-2  {
    background: #FFE6A2;
}

#div-browse-top-category #div-top-course .top-course-subdetail-3  {
    background: #7BD4F0;
}
#div-browse-top-category #div-top-course .top-course-subdetail-4  {
    background: #83DEA5;

}

#div-browse-top-category #div-top-course .top-course-detail #bg-cpu {
    background-color: #fff;
    padding:20px;
}

#div-browse-top-category #div-top-course .top-course-detail img {
    max-width: 30px;
    max-height: 30px;
}

#div-browse-top-category #div-top-course .top-course-detail .top-course-detail-right {
    display:  flex ;
    flex-direction: column;
    padding-left: 10px;
}

#div-browse-top-category #div-top-course .top-course-detail .top-course-detail-right h4 {
    color : #1D2026;
}

#div-browse-top-category #div-top-course .top-course-detail .top-course-detail-right h6 {
    color : #6E7485;
}



/* best seller course */

#div-best-seller-course {
    display: flex;
    flex-direction: column;
}

#div-best-seller-course h2 {
    color: #0E2885;
    font-weight:bold;
}


#div-best-seller-course #div-best-seller {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}


#div-best-seller-course #div-best-seller .best_seller_course_detail {
    display: flex;
    flex-direction: column;
}

#div-best-seller-course #div-best-seller .best_seller_course_detail .best_seller_course_profile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#div-best-seller-course #div-best-seller .best_seller_course_detail .best_seller_course_profile .coursetype {
    font-weight: bold;
    font-size: 14px;
    background: #EBEBFF;
    color: #342F98;
    align-content:center;
    margin-top:10px;
}

#div-best-seller-course #div-best-seller .best_seller_course_detail .best_seller_course_profile .courseprice {
    font-weight: bold;
    font-size: 19px;

    color: #FF6636;
    align-content:center;
    margin-top:10px;
}
#div-best-seller-course #div-best-seller .best_seller_course_detail .coursename {
    font-weight: 500;
    font-size: 16px;
    color:  #1D2026;
    align-content:center;
    margin-top:10px;
}

#div-best-seller-course #div-best-seller .best_seller_course_detail .rating{
    font-weight: 500;
    font-size: 16px;
    color: #FF6636;
    align-content:center;
    margin-top:10px;
}
#div-best-seller-course #div-best-seller .best_seller_course_detail .rating .score{
    color: #4E5566;
}
#div-best-seller-course #div-best-seller .best_seller_course_detail .rating .countcourseview{
    float: right;
    color:  #4E5566;
    font-weight: 500px;
}
#div-best-seller-course #div-best-seller .best_seller_course_detail .rating .uom{
    color:  #8C94A3;
    font-size:14px;
    font-weight: 400px;
    
}

/* become an instructor and your teaching and earning steps */
#div-become-instructor {

    background-color:  #ECF8FF;


 
}
#div-become-instructor #div-become-instructor-inside {
    display: flex;
    flex-direction: row; 
    margin-top: 40px;
    padding-top: 60px;
    padding-bottom: 50px; 
    gap: 20px;
}


#div-become-instructor .become-an-instructors-left {
   
   background-image: url("../images/become.png");
   background-repeat: no-repeat;
   background-size:cover;
   max-width: 580px;
   height: 270px;
   position:relative ;

}
#div-become-instructor .become-an-instructors-left .btn-white {
   
    background-color:#fff;
    color:#FF6636;
    font-weight: 600px;
    font-size:16px;
    position:absolute;
    top: 70%;
    left: 40px;

 }
 #div-become-instructor .become-an-instructors-right {
    background-color: #fff;
    max-width: 620px;

 }
 #div-become-instructor .become-an-instructors-right h5 {
    color: #000;
    font-weight: bolder;
    padding-top: 22px;
 }
 #div-become-instructor .become-an-instructors-right .earning-steps {
    display:flex;
    flex-direction: column;
    gap: 35px;
 }


 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-top {
    display:flex;
    flex-direction: row;
    gap:10px;
    /* justify-content: space-around */
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-top .step1{
    display:flex;
    flex-direction: row;
    gap:15px;
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-top .bullet1{
    width: 50px;
    height: 50px;
    
    background-color: #EBEBFF;


    border-radius: 50%;
    position:relative;
  
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-top .bullet1 p{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color:#564FFD;
    font-weight: 600;
    
    font-size: 20px;

 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-top .step2{
    display:flex;
    flex-direction: row;
    gap:15px;
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-top .bullet2{
    width: 50px;
    height: 50px;
    
    background-color:  #FFF0F0;



    border-radius: 50%;
    position:relative;
  
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-top .bullet2 p{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color: #FF6636;

    font-weight: 600;
    
    font-size: 20px;

 }



 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-down {
    display:flex;
    flex-direction: row;
    gap:10px;
    /* justify-content: space-around */
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-down .step3{
    display:flex;
    flex-direction: row;
    gap:15px;
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-down .bullet3{
    width: 50px;
    height: 50px;
    
    background-color:  #FFF0F0;


    border-radius: 50%;
    position:relative;
  
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-down .bullet3 p{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color: #FF6636;
    font-weight: 600;
    
    font-size: 20px;

 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-down .step4{
    display:flex;
    flex-direction: row;
    gap:15px;
    margin-left:20px;

 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-down .bullet4{
    width: 50px;
    height: 50px;
    
    background-color: #E1F7E3;


    border-radius: 50%;
    position:relative;
  
 }
 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-down .bullet4 p{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color: #23BD33;

    font-weight: 600;
    
    font-size: 20px;

 }

 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-top span{
    align-self: center;
    color: #1D2026;

 }

 #div-become-instructor .become-an-instructors-right .earning-steps .earning-step-down span{
    align-self: center;
    color: #1D2026;

 }

/* 
glow us your skill */

 #div-glowusyourskill {
    display: flex;
    flex-direction: column;
    gap: 40px;
 }

 #div-glowusyourskill #div-glowusyourskill-top {
    display: flex;
    flex-direction: row;
    margin-top: 40px;
    gap:30px;
 }

 #div-glowusyourskill #div-glowusyourskill-top #div-glowusyourskill-left img{
    max-width: 400px;

 }

 #div-glowusyourskill #div-glowusyourskill-top #div-glowusyourskill-right h5{
    color: #000;

 }
 #div-glowusyourskill #div-glowusyourskill-top #div-glowusyourskill-right p:nth-child(1){
    margin-top:20px;
    color:  #555555;
    font-size: 9px;
 }

 #div-glowusyourskill #div-glowusyourskill-top #div-glowusyourskill-right p:nth-child(2){
 
    color:  #000;
    font-size: 10px;
 }


 #div-glowusyourskill #div-glowusyourskill-top #div-glowusyourskill-right span{
    margin-top:20px;
    
    color:  #000;
    font-size: 14px;
    font-weight: 500;


 }

 #div-glowusyourskill #div-glowusyourskill-top #div-glowusyourskill-right .btn-explorer-course{
    background-color:  #FF6636;
    color : white;
    font-size: 14px;


 }


 #div-glowusyourskill #div-glowusyourskill-middle #div-comments {
    display: flex;
    flex-direction: row;
    gap: 20px;
 }

 
 #div-glowusyourskill #div-glowusyourskill-middle #div-comments .comment {
    position: relative;
    width:420px;
    height: 250px;
    background-color: #ECF8FF;    
 }

 #div-glowusyourskill #div-glowusyourskill-middle #div-comments .comment img:first-child{
    position: absolute;
    left: 30px;
    top: 20px;
 }
 #div-glowusyourskill #div-glowusyourskill-middle #div-comments .comment h5{
    position: absolute;
    left: 0px;
    top: 50px;
    padding: 20px;
    font-weight: 400;
    font-size: 18px;
 }
 #div-glowusyourskill #div-glowusyourskill-middle #div-comments .comment img:last-child{
    position: absolute;
    right: 30px;
    bottom: 10px;
 }

 #div-glowusyourskill #div-glowusyourskill-down #div-comments-by {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;

 }

 #div-glowusyourskill #div-glowusyourskill-down #div-comments-by #commentby {
    width:280px;
    height: 250px;

 }


 #footer {
    background-color:#ECF8FF;
    padding-top: 40px;

 }
 #footer #div-footer {
    display: flex;
    flex-direction: row;


 }
 #footer #div-footer #div-left img {
    max-width: 250px;

 }

 #footer #div-footer #div-right h5 {
    font-size: 14px;
    font-weight: 400;
 }
 #footer #div-footer #div-right h5:nth-child(1) {
    font-size: 18px;
    font-weight: 600;
    color: #000
 }


 #div-glowusyourskill #div-glowusyourskill-down #div-comments-by h5:nth-child(1) {

    font-weight: 400;
    font-size: 18px;
    
 }
 #div-glowusyourskill #div-glowusyourskill-down #div-comments-by h5:nth-child(2) {

    font-weight: 400;
    font-size: 14px;
    color:  #6E7485;

 }
 #div-glowusyourskill #div-glowusyourskill-down #div-comments-by h5:nth-child(2) span {

 
    color: #564FFD;


 }
 @media only screen and (max-width:1200px ) {
    #div-become-instructor #div-become-instructor-inside {
        flex-wrap: wrap;

    }
    #div-become-instructor .become-an-instructors-right {
        padding-bottom: 20px;
     }



     #div-glowusyourskill #div-glowusyourskill-top {
        flex-wrap: wrap;
     
     }
     #div-glowusyourskill #div-glowusyourskill-top #div-glowusyourskill-left {
        text-align: center;
    
     }
     #div-glowusyourskill #div-glowusyourskill-top #div-glowusyourskill-right {
        text-align: center;
    
     }


}
@media only screen and (max-width:982px ) {
    #div-browse-top-category #div-top-course {

        row-gap: 2rem;


    }
 
    
}

@media only screen and (max-width:850px ) {
    #div-logo #txtsearch{
        max-width: 150px;
    }
    #div-glowusyourskill #div-glowusyourskill-middle #div-comments {
        flex-wrap: wrap;
        justify-content: center;
     }


}

@media only screen and (max-width:700px ) {
    #div-logo #txtsearch{
        margin-bottom: 15px;
        max-width: 250px;
        font-size:10px;
    }
    #div-logo #cart {
        margin-bottom: 15px;
      
    }

    #div-ceo #ceo {
        max-width: 650px;
        right:45px;
    }
}

@media only screen and (max-width:500px ) {
    #div-logo #txtsearch{
        margin-bottom: 15px;
        margin-top:5px;
        max-width: 60px;
        font-size:10px;
    }
    #div-logo img {
        max-width: 180px;

    }
    #div-ceo #ceo {
        max-width: 650px;
        right:-105px;
    }
    #div-ceo #bg-ceo-bottom{
        max-width: 200px;
    }

    #div-browse-top-category h2{
        font-size: 26px;
    
    } 
}

@media only screen and (max-width:390px ) {
    #div-logo #txtsearch{
        margin-top:7px;
        max-width: 230px;

    }

}