.header{
	background:var(--white);
	box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
.top-navbar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	height:70px;
	position:sticky;
	top:0;
	z-index:1000;
}

.nav-logo img{
	height:45px;
}

/* NAV LINKS */

.nav-links{
	display:flex;
	gap:30px;
	list-style:none;
	align-items:center;
	padding-top:17px;
	font-size: 0.875rem;
}

.nav-links a{
	text-decoration:none;
	color:var(--grey-dark);
	font-weight:500;
	position:relative;
	padding:5px 0;
}
.nav-links a:hover{
	color:var(--orange-dark);
	transition:0.4s;
}

/* underline animation */

.nav-links a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0px;
	width:0%;
	height:2px;
	background:var(--orange);
	transition:0.3s;
}

.nav-links a:hover::after{
	width:100%;
}

/* DROPDOWN */

.nav-dropdown{
	position:relative;
}

.nav-dropdown-menu{
	position:absolute;
	top:45px;
	left:0;
	padding:0;
	background:var(--white);
	box-shadow:0 10px 25px rgba(0,0,0,0.08);
	list-style:none;
	width:200px;
	border-radius:var(--border-radius);
	opacity:0;
	transform:translateY(10px);
	visibility:hidden;
	transition:all 0.3s ease;
	overflow:auto;
}

.nav-dropdown:hover .nav-dropdown-menu{
	opacity:1;
	transform:translateY(0);
	visibility:visible;
	overflow:auto;
}

.nav-dropdown-menu li{
	padding:7px 10px;
	transition:background 0.25s;
	font-size: 0.875rem;
}

.nav-dropdown-menu li:hover{
	background:var(--orange-xx-light);
	border-radius:var(--border-radius);
}

.nav-dropdown-menu a{
	display:block;
	color:var(--grey-dark);
}

.nav-arrow{
	transition:0.3s;
}

.nav-dropdown:hover .nav-arrow{
	display: inline-block;
	transform: rotate(180deg);
}

/* HAMBURGER */

.nav-hamburger{
	display:none;
	flex-direction:column;
	gap:5px;
	cursor:pointer;
}

.nav-hamburger span{
	width:26px;
	height:3px;
	background:var(--grey-dark);
	transition:0.3s;
}

.nav-hamburger.active span:nth-child(1){
	transform:rotate(45deg) translate(5px,5px);
}

.nav-hamburger.active span:nth-child(2){
	opacity:0;
}

.nav-hamburger.active span:nth-child(3){
	transform:rotate(-45deg) translate(6px,-6px);
}

/* OVERLAY */

.nav-overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.45);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:900;
}

.nav-overlay.active{
	opacity:1;
	visibility:visible;
}
.nav-dropdown-menu li{
	border-bottom: 1px solid var(--grey-light);
}
/* MOBILE */

@media(max-width:992px){
	.top-navbar{
		height:60px;
		padding:0px 15px;
		font-size: 0.875rem;
	}
	
	.nav-logo img{
		height:35px;
	}
	
	.nav-links{
		position:fixed;
		top:0;
		left:-250px;
		height:100%;
		width:250px;
		background:var(--white);
		flex-direction:column;
		align-items:start;
		padding:50px 30px;
		gap:10px;
		transition:0.35s;
		box-shadow:5px 0 20px rgba(0,0,0,0.1);
		z-index:1001;
		overflow:auto;
		
	}
	.nav-links li{
		width:100%;
		padding-bottom:20px;
		border-bottom: 1px solid var(--grey-light);
	}

	.nav-links.active{
		left:0;
	}

	.nav-links .btns{
		width:100%;
	}
	
	.nav-hamburger{
		display:flex;
	}

	/* MOBILE DROPDOWN */

	.nav-dropdown-menu{
		position:static;
		box-shadow:none;
		opacity:1;
		visibility:visible;
		transform:none;

		max-height:0;
		overflow:hidden;
		padding:0;
		margin:0;
		
		transition:max-height 0.35s ease;
	}

	.nav-dropdown.open .nav-dropdown-menu{
		max-height:300px;
		transition:0.35s;
		margin-top:10px;
	}

	.nav-dropdown-menu li{
		padding:8px 10px;
	}

	.nav-dropdown.open .nav-arrow{
		display: inline-block;
		transform:rotate(180deg);
	}

}

@media(max-width:768){
	.nav-logo img{
		height:25px;
	}