.menuBackground {
    background: brown;
}

.dropDownMenu a {
    color: #FFF;
}

.dropDownMenu,
.dropDownMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Kanit', sans-serif;
}

.dropDownMenu li {
    position: relative;
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Kanit', sans-serif;
}

.dropDownMenu a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Kanit', sans-serif;
}

.dropDownMenu a:hover {
    /* background: rgb(255, 255, 255); */
    color: rgb(14, 13, 13);
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Kanit', sans-serif;
}

.bghover a:hover {
    background: rgb(224, 221, 221);
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Kanit', sans-serif;
}

/* Level 1 Drop Down Menu */
.dropDownMenu>li {
    display: inline-block;
    vertical-align: top;
    margin-left: -4px;
    /* solve the 4 pixels spacing between list-items */
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Kanit', sans-serif;

}

.dropDownMenu>li:first-child {
    margin-left: 0;
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Kanit', sans-serif;
}

/* .dropDownMenu > li > a {}
.dropDownMenu > li > a:hover {} */





/* Level 2 */
.dropDownMenu>li>ul {
    text-align: left;
    width: max-content;
    /* change auto value with 200px if you want a bigger menu */
    display: none;
    background: rgb(66, 66, 66);
    position: absolute;
    top: 100%;
    left: 0;
    /* font-family: 'Prompt', sans-serif; */
    font-family: 'Kanit', sans-serif;
    z-index: 9999999;
    /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
}

.dropDownMenu>li:hover>ul {
    display: block;
}

/* .dropDownMenu ul li a {}
.dropDownMenu ul li a:hover {} */




/* Level 3 */
.dropDownMenu>li>ul>li>ul {
    text-align: left;
    width: max-content;
    display: none;
    background: rgb(4, 118, 194);
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 9999999;
    /* font-family: 'Prompt', sans-serif;
font-family: 'Kanit', sans-serif; */
}

.dropDownMenu>li>ul>li:hover>ul {
    display: block;
}

/* .dropDownMenu ul ul li {}
.dropDownMenu ul ul li a {}
.dropDownMenu ul ul li a:hover {} */
.bgproduct :hover {

    background-color: aquamarine;
}



.box {
    line-height: 14pt;
    height: 42pt;
}

.box p {
    line-height: 14pt;
    height: 42pt;
    overflow: hidden;
}



.img-bg-col1{
    background-image: url("../assets/img/web-pic-academy-b.jpg") !important;
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}

.img-bg-col2{
    background-image: url("../assets/img/web-pic-engineer-b.jpg") !important;
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-bg-col3{
    background-image: url("../assets/img/web-pic-shop-b.jpg") !important;
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


  
 
.img-bg-col1:hover{
    background-image: url("../assets/img/web-pic-academy.jpg") !important;
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: 1s all;
}
.img-bg-col2:hover{
    background-image: url("../assets/img/web-pic-engineer.jpg") !important;
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: 1s all;
}
.img-bg-col3:hover{
    background-image: url("../assets/img/web-pic-shop.jpg") !important;
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: 1s all;
}


#robotics:hover {
 opacity: 0.8;
 cursor: pointer;


}
#intel:hover{
    opacity: 0.8;
 cursor: pointer;
 border-radius: 10px; 
}

#internet:hover{
    opacity: 0.8;
 cursor: pointer;
 border-radius: 10px; 
}
#auto:hover{
    opacity: 0.8;
 cursor: pointer;
 border-radius: 10px; 
}



.text-course-menu{
    color: rgb(255, 255, 255);
}
.text-course-menu:hover{
    color: #8afced;
}