*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}
body{
    /* font-family: sans-serif; */
}
.menu-bar{
    /* border: 2px solid rgb(236, 38, 12); */
    background: rgb(69, 69, 196);
    text-align: center;
    position: sticky;
    top: 0px;
    z-index: 1;


}
.menu-bar ul{
    display: inline-flex;
    list-style: none;
    color: white;
}
.menu-bar ul li{
    /* border: 2px solid green; */
    width: 118px;
    margin-right: 2px;
    padding: 14px;
    /* text-align: left; */
}
.menu-bar ul li a{
    text-decoration: none;
    color: rgb(254, 254, 254);
    /* border: 2px solid black; */
    
    
}
.menu-bar ul li a:hover{
    color: black;
  
}


.menu-bar ul li:hover{
    background: rgb(130, 130, 251);
    /* background-color:rgb(173, 165, 245); */
    transition-property: background-color;
    transition-duration: 1s;

}
/* .active, .menu-bar ul li:hover{
    background-color:rgb(173, 165, 245);
    transition-property: background-color;
    transition-duration: 1s;

} */


.menu-bar .fa{
    margin-right: 5px;
}
.sub-menu-1{
    display: none;
}

.menu-bar ul li:hover .sub-menu-1{
    display: block;
    position: absolute;
    background: rgb(69, 69, 196);
    margin-top: 14px;
    margin-left: -14px; 
    /* border: 2px solid red;  */
}
.menu-bar ul li:hover .sub-menu-1 ul{
    display: block;
    /* margin: 10px; */
    /* border: 2px solid green; */
}
.menu-bar ul li:hover .sub-menu-1 ul li{
    padding: 9px;
    border-bottom: 1px dotted white;
    /* background: red; */
    border-radius: 0;
    text-align: left;
    /* margin-left: 08px; */
    width: 220px;
    font-size: .8rem;
    /* border: 2px solid black; */
}
.menu-bar ul li:hover .sub-menu-1 ul li:last-child{
    border-bottom: none;
}

.fa-angle-right{
    float: right;
}
.sub-menu-2{
    display: none;
}
.hover-me:hover .sub-menu-2{
    position: absolute;
    display: block;
    margin-top: -26px;
    margin-left: 211px;
    background: rgb(69, 69, 196);
    /* border: 2px solid green; */
}
.sub-menu-1 ul li:hover{
    background: rgb(130, 130, 251);
    /* background-color:rgb(173, 165, 245); */
    transition-property: background-color;
    transition-duration: 1s;
}




