/* Header */
.header{display:flex;align-items:center;gap:28px;padding:14px 0px;border-bottom:1px solid var(--line);overflow-x:visible;}
.logo{font-weight:800;font-size:20px;white-space:nowrap;letter-spacing:-.3px}
.logo b{color:var(--purple);font-weight:800}
.nav{display:flex;gap:22px;font-size:14.5px;color:var(--muted);white-space:nowrap}
.nav a:hover{color:var(--text)}
.nav-btn{margin-left:auto;border:1px solid var(--line);border-radius:8px;padding:6px 14px;font-size:12.5px;color:var(--text)}

a.logo{
	transition: transform 0.2s ease;
}

a.logo:hover{
	transform: scale(1.03);
}

.nav a{
	margin-left:auto;border:1px solid var(--line);border-radius:8px;padding:6px 14px;font-size:14px;
	transition: transform 0.2s ease;
}

.nav a:hover{
	transform: scale(1.03);
	border:1px solid var(--purple);
}

.header.mobile-header{
	display: none;
}

@media (max-width: 768px) {

	.logo {
		font-size: 30px;
	}

	.header{
		display: none;
	}

	.header.mobile-header{
		display: flex;
		flex-direction: column;
	}

	.nav {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.header-column {
	    display: flex;
	    width: 100%;
	    justify-content: space-around;
	    gap: 20px;
	}

	.nav a{
		margin-left:0;border:1px solid var(--purple);border-radius:8px;padding:6px 14px;font-size:16px;
		transition: transform 0.2s ease;
		display: inline-block;
	}


}