nav{
     position: fixed;
     width: 100%;
     display: flex;
     justify-content: space-around;
     align-items: center;
     min-height: 6vh;
     background-color: rgba(33, 35, 35, 0);
     font-family: "Montserrat", sans-serif;
     z-index: 1000;
     transition: background 1s ease, box-shadow 1s ease;
}
.sticky{
  background-color: #212123;
  -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.63);
  -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.63);
  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.63);
}
 .logo {
     background: none;
     color: #dae0ea;
     font-size: 26px;
}
 .logo span {
     background: none;
     color: #e16428;
     font-size: 26px;
}
 .nav-links{
     display: flex;
     justify-content: space-around;
     width: 38%;

     margin: 0;
}
 .nav-links li{
     list-style: none;
}
 .nav-links a{
     color: #dae0ea;
     text-decoration: none;
     font-weight: 500;
     letter-spacing: 3px;
     font-size: 18px;
     display: inline-block;
     position: relative;
}
 .active {
     color: #e16428 !important;
     font-weight: 600 !important;
}
 .nav-links a:after {

     bottom: 0;
     content: "";
     display: inline-block;
     height: 1.2px;
     left: 50%;
     position: absolute;
     background: #e16428;
     width: 0;
     transition: width 0.3s ease 0s, left 0.3s ease 0s;
}
 .nav-links a:hover:after {
     width: 100%;
     left: -1px;
}
 .nav-links a:hover{
     color: #e16428;
}
 .burger{
     display: none;
     background-color: #525e65;
     transition: all 0.5s ease;
}
 .burger div{
     width: 25px;
     height: 5px;
     background-color: rgb(226,226,226);
     margin: 5px;
     transition: all 0.5s ease;
}
.lock-scroll {
    overflow: hidden;
}
 @media (max-width:1024px) {
     .nav-links{
         width: 50%;
    }
}
 @media (max-width:768px) {
     body{
         overflow-x: hidden;
    }
     nav{
         justify-content:flex-end;
         padding-right: 1em;
    }
     .logo {
         margin-right: auto;
         padding: 0 1em 0 1em;
         font-size: 20px;
    }
     .logo span {
         font-size: 20px;
    }
     .nav-links{
         position: absolute;
         right: 0px;
         height: 100vh;
         top: 0;
         z-index: -1;
         background-color: #212123;
         display: flex;
         flex-direction: column;
         align-items: center;
         width:100%;
         transform: translateX(100%);
    }
     .nav-links li{
         opacity: 0;
         background: none;
    }
     .burger{
         display: block;
         cursor: pointer;
         background: none;
    }
}
 .nav-active{
     transform: translateX(0%);
}
 @keyframes navLinkFade {
     from{
         opacity: 0;
         transform: translateX(50px);
    }
     to{
         opacity: 1;
         transform: translateX(0px);
    }
}
 .toggle .line1 {
     transform: rotate(-45deg) translate(-5px, 9px);
}
 .toggle .line2 {
     opacity: 0;
}
 .toggle .line3 {
     transform: rotate(45deg) translate(-5px, -9px);
}
