/* =========================================================
   VONA HEADER
========================================================= */

.vona-header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:76px;
	z-index:1000;

	background:rgba(8,8,8,.72);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);

	border-bottom:1px solid rgba(255,255,255,.08);

	transition:
		transform .35s ease,
		background .35s ease;
}

.vona-header-inner {
	width:calc(100% - 80px);
	height:100%;
	margin:0 auto;

	display:flex;
	align-items:center;
	justify-content:space-between;
}


/* =========================================================
   LOGO
========================================================= */

.vona-logo {
	display:inline-flex;
	align-items:center;

	color:#fff;
	text-decoration:none;

	font-size:28px;
	font-weight:800;
	line-height:1;
	letter-spacing:-.08em;
}

.vona-logo-v {
	color:#fff;
}

.vona-logo-text {
	color:#fff;
}

.vona-logo:after {
	content:"";
	display:block;

	width:9px;
	height:9px;

	margin-left:3px;
	margin-top:-20px;

	background:#f5c400;

	transform:rotate(45deg);
}


/* =========================================================
   NAV
========================================================= */

.vona-header-nav {
	display:flex;
	align-items:center;
	gap:38px;

	margin-left:auto;
	margin-right:45px;
}

.vona-header-nav a {
	position:relative;

	display:flex;
	align-items:center;

	height:76px;

	color:rgba(255,255,255,.9);
	text-decoration:none;

	font-size:11px;
	font-weight:600;
	letter-spacing:.14em;

	transition:.25s ease;
}

.vona-header-nav a:hover,
.vona-header-nav a.is-active {
	color:#fff;
}

.vona-header-nav a.is-active:after {
	content:"";

	position:absolute;
	left:0;
	bottom:0;

	width:100%;
	height:2px;

	background:#f5c400;
}


/* SIGN UP */

.vona-nav-signup {
	padding:0 18px;
	background:#f5c400;
	color:#fff;
	border:1px solid rgba(245,196,0,.6);
}

.vona-nav-signup:hover {
	background:#f5c400;
	color:#080808 !important;
}


/* =========================================================
   RIGHT
========================================================= */

.vona-header-right {
	display:flex;
	align-items:center;
	gap:25px;
}


/* LANGUAGE */

.vona-language {
	display:flex;
	align-items:center;
	gap:9px;

	padding:0;

	border:0;
	background:none;

	color:rgba(255,255,255,.35);

	font-size:10px;
	font-weight:700;
	letter-spacing:.08em;

	cursor:pointer;
}

.vona-language span {
	transition:.2s ease;
}

.vona-language span.is-active {
	color:#f5c400;
}

.vona-language i {
	width:1px;
	height:10px;
	background:rgba(255,255,255,.2);
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.vona-menu-button {
	display:none;

	width:32px;
	height:32px;

	padding:0;
	border:0;
	background:none;

	cursor:pointer;
}

.vona-menu-button span {
	display:block;

	width:22px;
	height:1px;

	margin:6px auto;

	background:#fff;

	transition:.25s ease;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.vona-mobile-menu {
	display:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px) {

	.vona-header {
		height:64px;
	}

	.vona-header-inner {
		width:calc(100% - 40px);
	}

	.vona-logo {
		font-size:24px;
	}

	.vona-header-nav {
		display:none;
	}

	.vona-menu-button {
		display:block;
	}

	.vona-mobile-menu {
		position:absolute;
		top:64px;
		left:0;

		width:100%;

		display:block;

		background:#080808;

		border-bottom:1px solid rgba(255,255,255,.1);

		opacity:0;
		visibility:hidden;
		transform:translateY(-10px);

		transition:.3s ease;
	}

	.vona-mobile-menu.is-open {
		opacity:1;
		visibility:visible;
		transform:translateY(0);
	}

	.vona-mobile-menu-inner {
		padding:25px 20px 35px;
	}

	.vona-mobile-menu a {
		display:block;

		padding:18px 0;

		color:#fff;
		text-decoration:none;

		font-size:18px;
		font-weight:600;
		letter-spacing:-.02em;

		border-bottom:1px solid rgba(255,255,255,.08);
	}

	.vona-mobile-menu a:last-child {
		border-bottom:0;
	}

	.vona-header-right {
		gap:18px;
	}

}

/* =========================================================
   VONA FOOTER
========================================================= */

.vona-footer {
	background:#050505;
	border-top:1px solid rgba(255,255,255,.08);
}

.vona-footer-inner {
	width:calc(100% - 160px);
	max-width:1600px;
	margin:0 auto;

	padding:100px 0;

	display:flex;
	justify-content:space-between;
	gap:100px;
}

.vona-footer-brand p {
	margin:18px 0 0;

	font-size:9px;
	letter-spacing:.18em;

	color:rgba(255,255,255,.35);
}


.vona-footer-links {
	display:flex;
	gap:120px;
}

.vona-footer-links > div {
	display:flex;
	flex-direction:column;
	gap:15px;
}

.vona-footer-links span {
	margin-bottom:10px;

	font-size:9px;
	font-weight:700;
	letter-spacing:.15em;

	color:#f5c400;
}

.vona-footer-links a {
	color:rgba(255,255,255,.55);
	text-decoration:none;

	font-size:11px;
	letter-spacing:.08em;

	transition:.2s ease;
}

.vona-footer-links a:hover {
	color:#fff;
}


.vona-footer-bottom {
	width:calc(100% - 160px);
	max-width:1600px;

	margin:0 auto;
	padding:25px 0;

	display:flex;
	justify-content:space-between;

	border-top:1px solid rgba(255,255,255,.08);

	font-size:9px;
	letter-spacing:.12em;

	color:rgba(255,255,255,.3);
}


@media (max-width:768px) {

	.vona-footer-inner {
		width:calc(100% - 40px);

		padding:70px 0;

		display:block;
	}

	.vona-footer-links {
		margin-top:60px;
		gap:60px;
	}

	.vona-footer-bottom {
		width:calc(100% - 40px);

		display:block;
		line-height:2;
	}

	.vona-footer-bottom span {
		display:block;
	}




html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
}

body {
	overflow-x: hidden;
}

main {
	margin: 0;
	padding: 0;
}