nav{background-color: white; position: fixed; top: 0; width: 100%; z-index: 2; border-bottom: 1px solid white; box-shadow: 0 0 6px rgb(199, 199, 199);}
.navigation{padding-left: 100px; padding-right: 100px;}
.logo img{width: inherit;}
.links ul{padding: 0; margin: 0; display: flex; gap: 20px; list-style: none; justify-content: center; align-items: center;}
.links ul li{width: calc(max-content + 20px); position: relative; border-right: 1px solid black;}
.links ul li:last-child{border:none;}
.links ul li a{text-decoration: none; color: inherit; padding: 5px;}

.top-links ul{margin: 0; list-style: none;}
.top-links ul li{display: inline; margin-left: 20px;}

.hanging-btn{position: absolute; right: 50px; margin-top: 10px;}



.side-bar{position: fixed; top: 0; left: 50%;  transition: 0.2s; background-color: white;
padding: 20px; z-index: 10; width: calc(100% - 20px); height: 100%; border-radius: 20px; transform: translate(-50%,0); display: none;}
.side-bar .logo{width: 150px; height: auto; margin: 10px;}
.side-bar .mobile-links{padding: 0; list-style: none; margin-top:50px;}
.mobile-links li{margin-top: 20px; font-weight: bold; width: 100%; border-bottom: 1px solid rgb(217, 217, 217);
padding: 5px; display: flex; justify-content: space-between;}
.mobile-links li a{text-decoration: none; color: black; font-weight: bold;}


@media  screen and (max-width:700px) {
    .navigation{padding: 0;}
}