.mini-menu{
	display: none;
}
@media only screen and (max-width:830px){
	.mini-menu{
		display: block;
		position: fixed;
  		left: 0;
  		top: 0;
  		z-index: 6;
		height: 0;
	}
	.nav-links{
		background:#1e1f26;
		overflow: hidden;
		width: 200px;
		transition: all 0.5s ease;
		box-shadow: 2px 0 5px rgb(0 0 0 / 20%);
		padding: 20px 0;
		border-radius:0  6px 6px 6px;
		transform: translateY(-120%);
		margin-top: 50px;
		
	}
	.mini-bar{
        background: #1e1f26;
        border-radius:0 0  5px 0;
		position: absolute;
	  	top: 0;
	  	left: 0;
	  	display: flex;
        gap:8px;
	  	justify-content: center;
	  	align-items: center; 
	  	padding: 5px 8px; 
	  	z-index: 5;
	}
	
	.navLogo{
		display: block;
    	width: 40px;
    	height: 40px;
    	
	}
	.burger{
	  	display: block;
	  	cursor: pointer;
	  	transition: all 0.5s ease;
	    width: 40px;
	    height: 40px;
    	padding: 4px; 
    	cursor: pointer;
    	border-radius: 4px;
    	background: #444857;
    	transition: background-color .2s ease;
    	position: relative;
	}
	.burger div{
		background: #fff;
	 	margin: 6px 0;
	  	transition:all 0.5s ease;
	}
	.line1{
	  	width: 10px;
      	height: 2px;
	}
	.line2{
	  	width: 16px;
      	height: 2px;
	}
	.line3{
	  	width: 32px;
      	height: 2px;
	}
	.menuArrow{
    	position: absolute;
    	top: 6px;
    	right: 4px;
    	color: #fff;
    	font-size: 18px;
    	transition:all 0.5s ease;
    	transform: scaleY(-1);
	}
	.toggle .line1{
	  	width: 16px;
      	height: 2px;
	}
	.toggle .line2{
	    width: 10px;
      	height: 2px;
	}
	.toggle .menuArrow{
    	position: absolute;
    	top: 6px;
    	right: 4px;
    	color: #fff;
    	font-size: 18px;
    	transition: transform .2s ease;
    	transform: scaleY(1);
	}
	.nav-active{
	  transform: translateY(0%);
	}
}