*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.body{
    background-image: url(b2.png);
    font-family: sans-serif;
    height: 50vh;
    background-size: 100%;
}
.menu-bar{
    background: #5b71b5;
    text-align: center;
}
.menu-bar ul{
    display: inline-flex;
    list-style: none;
}
.menu-bar ul li{
    width: 150px;
    margin: 15px;
    padding: 15px;
}
.menu-bar ul li a{
    text-decoration: none;
    color: white;
}
.active, .menu-bar ul li:hover{
background:#d4c99c;
border-radius: 10px;
}
.menu-bar .fas{
    margin-right: 8px;
}
.sub-menu-1{
    display: none;
}


.menu-bar  ul li:hover .sub-menu-1 {
display: block;
position: absolute;
background: #5b71b5;
margin-top: 15px;
margin-left: -15px;
font-size: 10px;
}
.menu-bar ul li:hover .sub-menu-1 ul{
    display: block;
}
.menu-bar ul li:hover .sub-menu-1 ul li{
width: 150px;
padding: 15px;
border-bottom: 1px dotted #fff;
background: transparent;
text-align: left;
border-radius: 0;
cursor: pointer;
}
.menu-bar ul li:hover ul li a:hover{
    color: gold;
}
.pody{
    background-image: url(web2.png);
  font-family: sans-serif;
  height: 50vh;
  background-size: 100%;
}
.soby{
     background-image: url(iletisim4.png);
    font-family: sans-serif;
    height: 50vh;
    background-size: 100%;
}
.kody{
     background-image: url(uygulama1.png);
    font-family: sans-serif;
    height: 50vh;
    background-size: 100%;
}