/*
==========================================================
DIGITAL NATION INN
FLAGSHIP HERO
Version : 5.0
==========================================================
*/

/* ==========================================================
   HERO ROOT
========================================================== */

.dni-hero {

	position:relative;
	width:100%;
	padding:0 0 32px;

	background:
		linear-gradient(
			180deg,
			#06152d 0%,
			#061a35 55%,
			#06152b 100%
		);

	overflow:hidden;

	color:#ffffff;

}


/* ==========================================================
   HERO CONTAINER
========================================================== */

.dni-hero > .container {

	position:relative;
	z-index:2;

}


/* ==========================================================
   HERO WRAPPER
========================================================== */

.hero-wrapper {

	display:flex;

	width:100%;

	min-height:780px;

	border-radius:0 0 28px 28px;

	overflow:hidden;

	background:#06152d;

	box-shadow:
		0 20px 70px rgba(0,0,0,.30);

}


/* ==========================================================
   LEFT HERO
========================================================== */

.hero-left {

	position:relative;

	width:68%;

	min-height:780px;

	display:flex;

	align-items:center;

	overflow:hidden;

	background:#06152d;

}


/* ==========================================================
   HERO BACKGROUND IMAGE
========================================================== */

.hero-bg {

	position:absolute;

	inset:0;

	width:100%;
	height:100%;

	z-index:0;

	overflow:hidden;

}


.hero-bg img {

	display:block;

	width:100%;
	height:100%;

	object-fit:cover;

	object-position:center center;

	transform:none;

}


/* ==========================================================
   IMAGE DARK / CONTENT OVERLAY
========================================================== */

.hero-dark {

	position:absolute;

	inset:0;

	z-index:1;

	background:

	linear-gradient(
		90deg,
		rgba(3,12,28,.78) 0%,
		rgba(3,14,32,.48) 42%,
		rgba(3,14,32,.18) 75%,
		rgba(3,14,32,.08) 100%
	);

	pointer-events:none;

}


/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-content {

	position:relative;

	z-index:5;

	width:100%;

	max-width:900px;

	padding:70px 70px 60px;

}


.hero-badge {

	display:inline-flex;

	align-items:center;

	padding:8px 18px;

	margin-bottom:20px;

	border-radius:50px;

	background:rgba(0,170,255,.12);

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

	color:#ffad28;

	font-size:16px;

	font-weight:700;

	backdrop-filter:blur(12px);

}


.hero-subtitle {

	margin:0 0 14px;

	color:#ffffff;

	font-size:24px;

	font-weight:500;

	line-height:1.4;

}


.hero-title {

	margin:0 0 22px;

	color:#ffffff;

	font-size:58px;

	font-weight:900;

	line-height:1.05;

	letter-spacing:-1.5px;

}


.hero-title span {

	display:block;

	margin-top:8px;

	color:#00d9ff;

	text-shadow:
		0 0 20px rgba(0,210,255,.35);

}


.hero-description {

	max-width:760px;

	margin:0 0 30px;

	color:#e3efff;

	font-size:19px;

	line-height:1.65;

}


.hero-description span {

	margin:0 8px;

	color:#00d9ff;

}


/* ==========================================================
   SEARCH
========================================================== */

.hero-search {

	position:relative;

	display:flex;

	align-items:center;

	width:100%;

	max-width:760px;

	padding:7px;

	border-radius:60px;

	background:#ffffff;

	box-shadow:
		0 15px 45px rgba(0,0,0,.28);

	overflow:hidden;

}


.hero-search input {

	flex:1;

	min-width:0;

	height:54px;

	padding:0 22px;

	border:0 !important;

	outline:0 !important;

	background:transparent !important;

	color:#18253a;

	font-size:16px;

	box-shadow:none !important;

}


.hero-search input::placeholder {

	color:#7d8998;

}


.hero-search button {

	flex-shrink:0;

	height:54px;

	padding:0 30px;

	border:0;

	border-radius:50px;

	background:
		linear-gradient(
			135deg,
			#087cff,
			#1462e8
		);

	color:#ffffff;

	font-size:16px;

	font-weight:700;

	cursor:pointer;

	box-shadow:none;

}


/* ==========================================================
   CTA BUTTONS
========================================================== */

.hero-buttons {

	display:flex;

	align-items:center;

	gap:16px;

	margin-top:25px;

}


.hero-buttons .btn {

	min-height:48px;

	padding:12px 25px;

	border-radius:50px;

	font-weight:700;

	text-decoration:none;

}


.hero-buttons .btn-primary {

	background:#0b78ff;

	border-color:#0b78ff;

	color:#ffffff;

}


.hero-buttons .btn-outline-light {

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

	color:#ffffff;

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

}


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

.hero-right {

	width:32%;

	min-height:780px;

	display:flex;

	flex-direction:column;

	background:

	linear-gradient(
		180deg,
		#061a36 0%,
		#061b38 55%,
		#06152c 100%
	);

	border-left:1px solid rgba(0,180,255,.18);

}


.login-card {

	padding:38px 32px 30px;

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

}


.login-card h3 {

	margin:0 0 8px;

	color:#ffffff;

	font-size:30px;

	font-weight:800;

}


.login-card p {

	margin:0 0 22px;

	color:#bfd3ed;

	font-size:15px;

}


.login-card input[type="text"],
.login-card input[type="password"] {

	display:block;

	width:100%;

	height:50px;

	margin-bottom:14px;

	padding:0 16px;

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

	border-radius:12px;

	background:#102542;

	color:#ffffff;

	outline:none;

}


.login-card input::placeholder {

	color:#9fb3cc;

}


.login-options {

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:10px;

	margin-bottom:18px;

	color:#d8e7fa;

	font-size:13px;

}


.login-options label {

	display:flex;

	align-items:center;

	gap:6px;

	margin:0;

}


.login-options input[type="checkbox"] {

	width:auto;

	margin:0;

}


.login-options a {

	color:#18bfff;

	text-decoration:none;

}


.login-card > .btn {

	width:100%;

	height:50px;

	border:0;

	border-radius:12px;

	background:
		linear-gradient(
			135deg,
			#176cff,
			#087fe9
		);

	color:#ffffff;

	font-weight:700;

}


/* ==========================================================
   DIVIDER
========================================================== */

.divider {

	display:flex;

	align-items:center;

	gap:12px;

	margin:22px 0;

	color:#9fb4cf;

}


.divider::before,
.divider::after {

	content:"";

	flex:1;

	height:1px;

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

}


.divider span {

	font-size:13px;

}


/* ==========================================================
   REGISTER
========================================================== */

.register-link {

	display:block;

	text-align:center;

	color:#dceaff;

	text-decoration:none;

	font-size:14px;

}


.register-link strong {

	color:#18bfff;

}


.social-login {

	display:flex;

	align-items:center;

	justify-content:center;

	gap:18px;

	margin-top:22px;

}


.social-login img {

	width:48px;

	height:48px;

	padding:8px;

	object-fit:contain;

	border-radius:50%;

	background:#ffffff;

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

	transition:.3s ease;

}


.social-login img:hover {

	transform:translateY(-4px);

}


/* ==========================================================
   AI CARD
========================================================== */

.ai-card {

	flex:1;

	padding:30px 32px;

}


.ai-status {

	display:flex;

	align-items:center;

	gap:8px;

	margin-bottom:15px;

	color:#72ffb2;

	font-size:14px;

}


.online-dot {

	width:10px;
	height:10px;

	flex-shrink:0;

	border-radius:50%;

	background:#00ff73;

	box-shadow:
		0 0 12px #00ff73;

}


.ai-card h4 {

	margin:0 0 12px;

	color:#ffffff;

	font-size:26px;

	font-weight:800;

}


.ai-card p {

	margin:0 0 20px;

	color:#c8dbf3;

	font-size:15px;

	line-height:1.65;

}


.ai-card input {

	display:block;

	width:100%;

	height:50px;

	padding:0 16px;

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

	border-radius:12px;

	background:#0d223e;

	color:#ffffff;

	outline:none;

}


.ai-card input::placeholder {

	color:#91a7c0;

}


/* ==========================================================
   STATS
========================================================== */

.hero-stats {

	display:grid;

	grid-template-columns:repeat(5,1fr);

	width:100%;

	margin-top:18px;

	border:1px solid rgba(0,180,255,.24);

	border-radius:24px;

	overflow:hidden;

	background:
		linear-gradient(
			180deg,
			rgba(7,28,56,.96),
			rgba(5,21,43,.98)
		);

	box-shadow:
		0 15px 50px rgba(0,0,0,.28);

}


.stat-item {

	min-height:105px;

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	padding:18px 12px;

	text-align:center;

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

}


.stat-item:last-child {

	border-right:0;

}


.stat-item h2 {

	margin:0 0 6px;

	color:#24c7ff;

	font-size:34px;

	font-weight:900;

	line-height:1;

}


.stat-item span {

	display:block;

	color:#dceaff;

	font-size:14px;

	line-height:1.4;

}


/* ==========================================================
   HERO BACKGROUND GLOW
========================================================== */

.dni-hero::before {

	content:"";

	position:absolute;

	width:700px;
	height:700px;

	top:-300px;
	left:-250px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(0,160,255,.18),
			transparent 70%
		);

	filter:blur(70px);

	pointer-events:none;

}


.dni-hero::after {

	content:"";

	position:absolute;

	width:600px;
	height:600px;

	right:-260px;
	bottom:-260px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(0,255,220,.10),
			transparent 70%
		);

	filter:blur(70px);

	pointer-events:none;

}


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

@media (max-width:1199px) {

	.hero-left {

		width:65%;

	}

	.hero-right {

		width:35%;

	}

	.hero-content {

		padding:55px 45px;

	}

	.hero-title {

		font-size:48px;

	}

	.hero-subtitle {

		font-size:21px;

	}

	.login-card,
	.ai-card {

		padding-left:25px;

		padding-right:25px;

	}

}


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

@media (max-width:991px) {

	.hero-wrapper {

		display:block;

		min-height:0;

		border-radius:0 0 22px 22px;

	}

	.hero-left {

		width:100%;

		min-height:680px;

	}

	.hero-right {

		width:100%;

		min-height:auto;

		border-left:0;

		border-top:1px solid rgba(0,180,255,.18);

	}

	.hero-content {

		padding:55px 35px;

	}

	.hero-title {

		font-size:44px;

	}

	.hero-description {

		font-size:17px;

	}

	.hero-stats {

		grid-template-columns:repeat(2,1fr);

	}

	.stat-item {

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

	}

	.stat-item:nth-child(2n) {

		border-right:0;

	}

}


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

@media (max-width:767px) {

	.dni-hero {

		padding-bottom:20px;

	}

	.hero-left {

		min-height:620px;

		align-items:flex-end;

	}

	.hero-bg img {

		object-position:center center;

	}

	.hero-dark {

		background:
			linear-gradient(
				180deg,
				rgba(3,12,28,.12) 0%,
				rgba(3,12,28,.20) 35%,
				rgba(3,12,28,.78) 72%,
				rgba(3,12,28,.96) 100%
			);

	}

	.hero-content {

		padding:40px 22px 35px;

	}

	.hero-badge {

		font-size:13px;

		margin-bottom:14px;

	}

	.hero-subtitle {

		font-size:18px;

	}

	.hero-title {

		font-size:36px;

		line-height:1.08;

	}

	.hero-description {

		font-size:15px;

		line-height:1.55;

	}

	.hero-search {

		flex-direction:row;

		padding:5px;

		border-radius:18px;

	}

	.hero-search input {

		height:48px;

		padding:0 12px;

		font-size:13px;

	}

	.hero-search button {

		height:48px;

		padding:0 18px;

	}

	.hero-buttons {

		flex-direction:column;

		align-items:stretch;

	}

	.hero-buttons .btn {

		width:100%;

		text-align:center;

	}

	.login-card {

		padding:30px 22px;

	}

	.ai-card {

		padding:28px 22px;

	}

	.hero-stats {

		grid-template-columns:1fr;

		border-radius:18px;

	}

	.stat-item {

		border-right:0;

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

	}

	.stat-item:last-child {

		border-bottom:0;

	}

}


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

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

	.dni-hero *,
	.dni-hero::before,
	.dni-hero::after {

		animation:none !important;

		transition:none !important;

	}

}