@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:wght@400;500;700&display=swap');

*{
	padding:0;
	margin:0;
	box-sizing:border-box;
	list-style:none;
	text-decoration:none;
	font-family: "Amiri", serif;
	font-style: normal;
}

header{
	background:#00c3ff;
    color:#000;
	border-bottom:1px solid #ccc;
    
}

header a{
	color:#000;
	font-weight:bold;
	font-size:20px;
	
}

header .navbar{
	background:;
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:70px;
	padding:0 24px;
	width:90%;
	margin:auto;
}

.nav-menu{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
}
.nav-brand{
	font-size:30px;
	font-weight:bold;
}
.nav-link{
	transition:.7s ease;
}
.nav-link:hover{
	color:blue;text-decoration:underline;
}
.hamburger{
	display:none;
	cursor:pointer;
	/*color:#000;*/
}
.hamburger .bar{
	display:block;
	width:24px;
	height:3px;
	margin:5px auto;
	webkit-transaction: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	background:#000;
	/*color:#000;*/
}

@media (max-width:768px){
	
	header a{
	color:#000;
	font-weight:bold;
	font-size:19px;
	
}

	
	.hamburger{
		display:block;
	}
	
	.hamburger.active .bar:nth-child(2){
		opacity:0;
	}
	.hamburger.active .bar:nth-child(1){
		transform:translateY(8px) rotate(45deg);
	}
	.hamburger.active .bar:nth-child(3){
		transform:translateY(-8px) rotate(-45deg);
	}
	
	.nav-menu{
		position:fixed;
		left:-100%;
		top:70px;
		gap:0;
		flex-direction:column;
		background:#00c3ff;
		opacity:95%;
		width:100%;
		text-align:center;
		transition:0.3s;
		z-index: 1;
		font-weight:bold;
		border-top:2px solid #ffffff;
		padding:2px 0px;
	}
	
    .nav-link{
	transition:.7s;background:;padding:2px 95px;width:100%;
}
	
	.nav-item{
		margin:4px 0;
	}
	
	.nav-menu.active{
		left:0;
	}
	
	
	
	
}