/*styling open close button*/
.button {
	position:fixed;
	right:30px;
	top:30px;
	z-index:999;
	padding: 5px;

	a {
		text-decoration:none;
		display: block;
	}
}

.menu-open{
	span{
		display: block;
		width: 50px;
	  height: 5px;
	  background-color: #000;
	  margin: 10px 0;
	  transition: 0.4s;
	  border-radius: 3px;
	}

	&:hover span{
		background-color: var(--color-text-secondary);	
	}
}

.menu-close {
	border-radius: 30px;
	padding: 0px 0px;

	span{
		display: block;
		width: 50px;
	  height: 5px;
	  background-color: #000;
	  margin: 6px 0;
	  transition: 0.4s;
	  border-radius: 3px;

	  &:first-child{
			transform: translate(0, 11px) rotate(-45deg);
		}
		&:nth-child(2){
			opacity: 0;
		}
		&:last-child{
			transform: translate(0, -11px) rotate(45deg);
		}
	}

	&:hover span{
		background-color: var(--color-text-secondary); 
	}
}

/*overlay*/
.overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, .9);
	overflow: auto;
	z-index: 99;
	transition: all 2s ease;
}
.wrap{
	height: 100%;
	padding: 5.5vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;

  ul{
  	width: 1110px;
		font-family: var(--big-font);
		padding: 0;
    margin: auto;

		li {
			font-family: 'Reem Kufi', sans-serif;
			font-size: clamp(50px, 8vw, 135px);
      letter-spacing: -.03em;
      display: block;

			a {
				color: #000;
				display: block;
				text-decoration: none;
				text-transform: uppercase;
				font-weight: 700;
				line-height: 1;
				transition: all .3s linear;

				&:hover {
				  color: var(--color-text-secondary);
				}
			}
		}
	}
}


@media screen and (max-width:48em) {
	.wrap {
		flex-direction: column;
		align-items: flex-start;

		ul{
	  	width: 100%;
	  }
	}

}