/*
==========================================================
DIGITAL NATION INN
FLAGSHIP HEADER
Version : 3.0.0
Architecture : Modular / SaaS
==========================================================
*/


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

.dni-header {

	position:relative;

	width:100%;

	z-index:1000;

	background:

		linear-gradient(
			180deg,
			rgba(3,13,31,.96),
			rgba(3,15,34,.90)
		);

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

	box-shadow:

		0 10px 35px rgba(0,0,0,.20);

}


/* ==========================================================
   TOP NEON LINE
========================================================== */

.dni-header::before {

	content:"";

	position:absolute;

	top:0;
	left:0;

	width:100%;
	height:2px;

	background:

		linear-gradient(
			90deg,
			transparent,
			#00c8ff,
			#536dff,
			#00c8ff,
			transparent
		);

	opacity:.85;

	pointer-events:none;

}


/* ==========================================================
   NAVBAR
========================================================== */

.dni-navbar {

	min-height:82px;

	padding:9px 22px;

	display:flex;

	align-items:center;

}


/* ==========================================================
   BRAND
========================================================== */

.dni-brand {

	display:flex;

	align-items:center;

	gap:12px;

	flex-shrink:0;

	text-decoration:none;

}


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

.dni-logo {

	width:52px;
	height:52px;

	object-fit:contain;

	display:block;

	border-radius:50%;

	background:#ffffff;

	padding:4px;

	border:2px solid rgba(0,200,255,.45);

	box-shadow:

		0 0 16px rgba(0,190,255,.28);

	transition:

		transform .3s ease,
		box-shadow .3s ease;

}


.dni-brand:hover .dni-logo {

	transform:scale(1.05);

	box-shadow:

		0 0 24px rgba(0,210,255,.48);

}


/* ==========================================================
   BRAND TEXT
========================================================== */

.dni-brand-text {

	display:flex;

	flex-direction:column;

	line-height:1;

}


.dni-brand-text h2 {

	margin:0;

	color:#ffffff;

	font-family:

		Arial,
		Helvetica,
		sans-serif;

	font-size:20px;

	font-weight:700;

	line-height:1.2;

	letter-spacing:-.2px;

}


.dni-brand-text span {

	display:block;

	margin-top:5px;

	color:#9ec9ef;

	font-size:10px;

	font-weight:500;

	letter-spacing:.5px;

}


/* ==========================================================
   NAVIGATION
========================================================== */

.dni-navbar .navbar-nav {

	display:flex;

	align-items:center;

	justify-content:center;

	gap:6px;

	margin-left:auto;

	margin-right:auto;

}


.dni-navbar .nav-link {

	position:relative;

	display:flex;

	align-items:center;

	padding:10px 15px !important;

	color:#e4efff !important;

	font-size:15px;

	font-weight:600;

	text-decoration:none;

	border-radius:10px;

	transition:

		color .25s ease,
		background .25s ease,
		transform .25s ease;

}


.dni-navbar .nav-link:hover {

	color:#ffffff !important;

	background:rgba(0,180,255,.08);

	transform:translateY(-1px);

}


.dni-navbar .nav-link::after {

	content:"";

	position:absolute;

	left:15px;
	right:15px;

	bottom:3px;

	height:2px;

	border-radius:4px;

	background:#00d4ff;

	transform:scaleX(0);

	transition:transform .25s ease;

}


.dni-navbar .nav-link:hover::after {

	transform:scaleX(1);

}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.dni-header-actions {

	display:flex;

	align-items:center;

	gap:10px;

	margin-left:18px;

	flex-shrink:0;

}


/* ==========================================================
   GURUBHAI AI BUTTON
========================================================== */

.dni-ai-link {

	display:flex;

	align-items:center;

	gap:8px;

	padding:6px 15px 6px 7px;

	border-radius:50px;

	background:

		linear-gradient(
			135deg,
			#087dff,
			#5548e8
		);

	border:1px solid rgba(0,220,255,.55);

	color:#ffffff;

	text-decoration:none;

	font-size:14px;

	font-weight:700;

	box-shadow:

		0 0 20px rgba(0,130,255,.20);

	transition:

		transform .3s ease,
		box-shadow .3s ease;

}


.dni-ai-link:hover {

	color:#ffffff;

	text-decoration:none;

	transform:translateY(-2px);

	box-shadow:

		0 0 28px rgba(0,190,255,.40);

}


/* ==========================================================
   GURUBHAI ICON
========================================================== */

.gurubhai-icon {

	width:34px;
	height:34px;

	display:block;

	object-fit:contain;

	border-radius:50%;

	background:#ffffff;

	padding:2px;

}


/* ==========================================================
   LOGIN
========================================================== */

.dni-login-btn {

	display:inline-flex;

	align-items:center;

	justify-content:center;

	min-height:40px;

	padding:8px 16px;

	border-radius:50px;

	border:1px solid rgba(0,200,255,.35);

	background:rgba(255,255,255,.05);

	color:#ffffff !important;

	font-size:13px;

	font-weight:600;

	text-decoration:none;

	white-space:nowrap;

	transition:

		background .25s ease,
		border-color .25s ease,
		transform .25s ease;

}


.dni-login-btn:hover {

	background:#087dff;

	border-color:#087dff;

	color:#ffffff !important;

	transform:translateY(-2px);

}


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

.dni-navbar .navbar-toggler {

	width:44px;
	height:40px;

	display:flex;

	align-items:center;

	justify-content:center;

	padding:0;

	margin-left:auto;

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

	border-radius:10px;

	background:rgba(255,255,255,.05);

}


.dni-navbar .navbar-toggler:focus {

	box-shadow:

		0 0 0 3px rgba(0,190,255,.15);

}


.dni-navbar .navbar-toggler-icon {

	filter:invert(1);

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1199px) {

	.dni-navbar {

		min-height:76px;

		padding:8px 16px;

		flex-wrap:wrap;

	}

	.dni-navbar .navbar-collapse {

		width:100%;

		flex-basis:100%;

	}

	.dni-navbar .navbar-nav {

		margin:14px 0 0;

		padding:10px;

		display:flex;

		flex-direction:column;

		align-items:stretch;

		background:rgba(3,15,34,.97);

		border:1px solid rgba(0,190,255,.12);

		border-radius:16px;

	}

	.dni-navbar .nav-link {

		padding:12px 15px !important;

	}

	.dni-header-actions {

		margin:14px 0 8px;

		justify-content:center;

	}

}


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

@media (max-width:768px) {

	.dni-navbar {

		padding:8px 10px;

	}

	.dni-logo {

		width:46px;
		height:46px;

	}

	.dni-brand {

		gap:9px;

	}

	.dni-brand-text h2 {

		font-size:17px;

	}

	.dni-brand-text span {

		font-size:9px;

	}

	.dni-ai-link {

		padding:6px 10px 6px 6px;

		font-size:12px;

	}

	.gurubhai-icon {

		width:30px;
		height:30px;

	}

}


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

@media (max-width:480px) {

	.dni-brand-text span {

		display:none;

	}

	.dni-brand-text h2 {

		font-size:16px;

	}

	.dni-logo {

		width:42px;
		height:42px;

	}

	.dni-header-actions {

		gap:6px;

	}

	.dni-ai-link {

		padding:5px;

	}

	.dni-ai-link span {

		display:none;

	}

	.dni-login-btn {

		padding:7px 10px;

		font-size:11px;

	}

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.dni-header a:focus-visible,
.dni-header button:focus-visible {

	outline:2px solid #00c8ff;

	outline-offset:3px;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

	.dni-header,
	.dni-header *,
	.dni-header a,
	.dni-header button {

		transition:none !important;

		animation:none !important;

	}

}
/* ==========================================================
   DNI MOBILE MENU ICON
========================================================== */

.dni-header .navbar-toggler {

	width:46px;
	height:42px;

	display:flex;
	align-items:center;
	justify-content:center;

	padding:0;

	border:1px solid rgba(255,255,255,.16);
	border-radius:12px;

	background:rgba(255,255,255,.06);

	box-shadow:none !important;

}


.dni-header .navbar-toggler-icon {

	width:22px;
	height:18px;

	display:block;

	background-image:none !important;

	position:relative;

	border-top:2px solid #ffffff;
	border-bottom:2px solid #ffffff;

}


.dni-header .navbar-toggler-icon::after {

	content:"";

	position:absolute;

	left:0;
	top:6px;

	width:22px;
	height:2px;

	background:#ffffff;

	border-radius:2px;

}