/*
==========================================================
DIGITAL NATION INN
CORE LAYOUT SYSTEM
Version : 2.0.0
Architecture : SaaS / Modular
==========================================================
*/

/* ==========================================================
   DNI GLOBAL FOUNDATION
   ========================================================== */

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

body {
	background:var(--dni-bg, #061223);
	color:var(--dni-text, #d8e7ff);
}

#dni-app {
	position:relative;
	width:100%;
	min-height:100vh;
	background:var(--dni-bg, #061223);
	color:var(--dni-text, #d8e7ff);
	overflow:hidden;
}

#dni-app *,
#dni-app *::before,
#dni-app *::after {
	box-sizing:border-box;
}

/* ==========================================================
   ROOT APP
========================================================== */

#dni-app{

	position:relative;

	width:100%;

	min-height:100vh;

	overflow:hidden;

	background:var(--dni-bg);

}


/* ==========================================================
   GLOBAL CONTAINER
========================================================== */

.container {
	width:100%;
	max-width:1440px;
	margin-left:auto;
	margin-right:auto;
	padding-left:32px;
	padding-right:32px;
	box-sizing:border-box;
}


/* ==========================================================
   MAIN CONTENT
========================================================== */

.dni-main{

	position:relative;

	display:block;

	width:100%;

	min-width:0;

	overflow:hidden;

}


/* ==========================================================
   SECTIONS
========================================================== */

.dni-section{

	position:relative;

	display:block;

	width:100%;

	padding:96px 0;

	overflow:hidden;

}


.dni-section-dark{

	background:var(--dni-bg);

}


.dni-section-light{

	background:var(--dni-surface);

}


/* ==========================================================
   SECTION INNER
========================================================== */

.dni-section-inner{

	position:relative;

	width:100%;

	z-index:2;

}


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

.dni-section-header{

	max-width:820px;

	margin:0 auto 55px;

	text-align:center;

}


.dni-section-badge{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:8px;

	margin-bottom:18px;

	padding:8px 18px;

	border-radius:999px;

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

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

	color:#55d9ff;

	font-size:13px;

	font-weight:700;

	letter-spacing:.7px;

	text-transform:uppercase;

}


.dni-section-title{

	margin:0 0 18px;

	font-size:48px;

	font-weight:800;

	line-height:1.15;

	letter-spacing:-.8px;

	color:var(--dni-heading);

}


.dni-section-description{

	max-width:760px;

	margin:0 auto;

	font-size:17px;

	line-height:1.8;

	color:var(--dni-muted);

}

/* ==========================================================
   GRID SYSTEM
========================================================== */

.dni-grid{

	display:grid;

	width:100%;

	gap:28px;

	align-items:stretch;

}


.dni-grid-2{

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

}


.dni-grid-3{

	grid-template-columns:
		repeat(3,minmax(0,1fr));

}


.dni-grid-4{

	grid-template-columns:
		repeat(4,minmax(0,1fr));

}

/* ==========================================================
   FLEX HELPERS
========================================================== */

.dni-flex{

	display:flex;

}


.dni-flex-center{

	display:flex;

	align-items:center;

	justify-content:center;

}


.dni-flex-between{

	display:flex;

	align-items:center;

	justify-content:space-between;

}


.dni-align-center{

	align-items:center;

}


.dni-justify-center{

	justify-content:center;

}


/* ==========================================================
   CARD SYSTEM
========================================================== */

.dni-card{

	position:relative;

	height:100%;

	padding:32px;

	background:var(--dni-card);

	border:1px solid var(--dni-border);

	border-radius:22px;

	box-shadow:var(--dni-shadow);

	overflow:hidden;

	transition:

		transform .35s ease,

		border-color .35s ease,

		box-shadow .35s ease;

}


.dni-card:hover{

	transform:translateY(-8px);

	border-color:rgba(0,191,255,.28);

	box-shadow:

		0 25px 60px rgba(0,0,0,.30),

		0 0 30px rgba(0,191,255,.06);

}


/* ==========================================================
   CARD GLOW
========================================================== */

.dni-card::before{

	content:"";

	position:absolute;

	top:-80px;

	right:-80px;

	width:180px;

	height:180px;

	border-radius:50%;

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

	filter:blur(45px);

	pointer-events:none;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

.dni-heading{

	margin:0;

	color:var(--dni-heading);

	font-weight:800;

}


.dni-text{

	color:var(--dni-text);

	line-height:1.8;

}


.dni-muted{

	color:var(--dni-muted);

}


.dni-small{

	font-size:13px;

}


/* ==========================================================
   BUTTON SYSTEM
========================================================== */

.dni-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:9px;

	min-height:50px;

	padding:12px 25px;

	border-radius:14px;

	border:1px solid transparent;

	font-size:15px;

	font-weight:700;

	text-decoration:none;

	cursor:pointer;

	transition:

		transform .3s ease,

		background .3s ease,

		border-color .3s ease,

		box-shadow .3s ease;

}


.dni-btn:hover{

	transform:translateY(-3px);

}


/* PRIMARY */

.dni-btn-primary{

	background:

		linear-gradient(

			135deg,

			#0b5fff,

			#00bfff

		);

	color:#fff;

	box-shadow:

		0 10px 30px rgba(0,150,255,.22);

}


.dni-btn-primary:hover{

	color:#fff;

	box-shadow:

		0 15px 40px rgba(0,170,255,.38);

}


/* SECONDARY */

.dni-btn-secondary{

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

	border-color:rgba(255,255,255,.14);

	color:#fff;

}


.dni-btn-secondary:hover{

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

	border-color:rgba(0,191,255,.35);

}


/* ==========================================================
   IMAGE SYSTEM
========================================================== */

.dni-image{

	display:block;

	max-width:100%;

	height:auto;

}


.dni-image-cover{

	width:100%;

	height:100%;

	object-fit:cover;

}


.dni-image-contain{

	width:100%;

	height:100%;

	object-fit:contain;

}


/* ==========================================================
   BADGE
========================================================== */

.dni-badge{

	display:inline-flex;

	align-items:center;

	gap:7px;

	padding:7px 14px;

	border-radius:999px;

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

	border:1px solid rgba(0,191,255,.18);

	color:#61ddff;

	font-size:12px;

	font-weight:700;

}


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

.dni-divider{

	width:100%;

	height:1px;

	background:

	linear-gradient(

		90deg,

		transparent,

		rgba(255,255,255,.12),

		transparent

	);

}


/* ==========================================================
   VISIBILITY
========================================================== */

.dni-hidden{

	display:none !important;

}


.dni-visible{

	display:block !important;

}


/* ==========================================================
   TEXT ALIGNMENT
========================================================== */

.text-center{

	text-align:center;

}


.text-left{

	text-align:left;

}


.text-right{

	text-align:right;

}


/* ==========================================================
   SPACING
========================================================== */

.mt-0{margin-top:0!important;}
.mt-1{margin-top:.5rem!important;}
.mt-2{margin-top:1rem!important;}
.mt-3{margin-top:1.5rem!important;}
.mt-4{margin-top:2rem!important;}
.mt-5{margin-top:3rem!important;}


.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:.5rem!important;}
.mb-2{margin-bottom:1rem!important;}
.mb-3{margin-bottom:1.5rem!important;}
.mb-4{margin-bottom:2rem!important;}
.mb-5{margin-bottom:3rem!important;}


/* ==========================================================
   LEGACY BOOTSTRAP COMPATIBILITY
========================================================== */

.row{

	--bs-gutter-x:1.5rem;

	--bs-gutter-y:1.5rem;

}


/* ==========================================================
   RESPONSIVE — LARGE DESKTOP
========================================================== */

@media (max-width:1399px){

	.container{

		max-width:1320px;

	}

	.dni-section{

		padding:88px 0;

	}

	.dni-section-title{

		font-size:44px;

	}

}


/* ==========================================================
   RESPONSIVE — DESKTOP / LAPTOP
========================================================== */

@media (max-width:1199px){

	.container{

		max-width:1140px;

		padding-left:28px;

		padding-right:28px;

	}

	.dni-section{

		padding:80px 0;

	}

	.dni-section-title{

		font-size:40px;

	}

	.dni-grid-4{

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

	}

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width:991px){

	.container{

		max-width:960px;

		padding-left:24px;

		padding-right:24px;

	}

	.dni-section{

		padding:72px 0;

	}

	.dni-section-header{

		margin-bottom:42px;

	}

	.dni-section-title{

		font-size:36px;

	}

	.dni-grid-3{

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

	}

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width:767px){

	.container{

		max-width:100%;

		padding-left:18px;

		padding-right:18px;

	}

	.dni-section{

		padding:60px 0;

	}

	.dni-section-header{

		margin-bottom:35px;

	}

	.dni-section-title{

		font-size:30px;

		letter-spacing:-.4px;

	}

	.dni-section-description{

		font-size:15px;

		line-height:1.7;

	}

	.dni-grid-2,
	.dni-grid-3,
	.dni-grid-4{

		grid-template-columns:1fr;

	}

	.dni-card{

		padding:24px;

		border-radius:18px;

	}

	.dni-btn{

		width:100%;

	}

}


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

@media (max-width:480px){

	.container{

		padding-left:15px;

		padding-right:15px;

	}

	.dni-section{

		padding:50px 0;

	}

	.dni-section-title{

		font-size:27px;

	}

	.dni-section-description{

		font-size:14px;

	}

	.dni-card{

		padding:20px;

	}

}


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

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

	*,
	*::before,
	*::after{

		animation-duration:.01ms !important;

		animation-iteration-count:1 !important;

		transition-duration:.01ms !important;

		scroll-behavior:auto !important;

	}

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

	.dni-header,
	.dni-topbar,
	.dni-footer{

		display:none !important;

	}

	body{

		background:#fff !important;

		color:#000 !important;

	}

}