nav {
     display: flex;
     align-items: center;
}

nav ul, nav ul li{
	margin:0;
	padding:0;
	list-style:none;
}
nav ul {
	 display: flex;
	 flex-wrap: wrap;	 
	 align-items: center; 
	 }
nav ul li {
	margin:0 10px;
}
nav ul li a {
     color: var(--white);
     text-decoration: none;      
     transition: var(--transition);
	 font-size:12px;
	 font-family:var(--medium);
	 text-transform:uppercase;
	 letter-spacing:4px;
	 
}
nav ul li a:hover {
     color: rgba(255, 255, 255, 0.5);
}
/* Mobile Menu Toggle */
 .menu-toggle {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     position:relative;
     z-index:9999;
}
 .menu-toggle span {
     width: 25px;
     height: 3px;
     background-color:var(--white);
     color: var(--black);
     transition: var(--transition);
}


/* --- Responsive Styles --- */
 @media (max-width: 1024px) {
     nav {
         position: fixed;
        /*top: 70px;
        */
         top:0;
         right: -100%;
         width: 70%;
         height:100%;
        /*height: calc(100vh - 70px);
        */
         background: var(--white);
         flex-direction: column;
         padding: 40px 0;
         transition: 0.4s ease;
         box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    }
     nav.active {
         right: 0;
		  background: var(--primary-color);
    }
     nav ul{
	  flex-direction:column;
	  width:100%;
	  
	 }	
	
	
 
	 nav ul li{
	  flex-direction:column;
	  display:block;
	  padding:10px 0;
	  border-bottom:1px solid rgba(255, 255, 255, 0.2);
	  margin:0;
	  text-align:left;
	  width:100%;
	  padding:10px 20px;
	 }
	 
 
	 nav ul li:last-child{
		border-bottom:0!important;
		}
     .menu-toggle {
         display: flex;
    }
    /* Burger animation */
     .menu-toggle.open span:nth-child(1) {
         transform: rotate(45deg) translate(5px, 7px);
    }
     .menu-toggle.open span:nth-child(2) {
         opacity: 0;
    }
     .menu-toggle.open span:nth-child(3) {
         transform: rotate(-45deg) translate(5px, -7px);
    }
}