/*
==========================================================
DIGITAL NATION INN
ENTERPRISE LAYOUT SYSTEM
Version : 1.0.0
Author  : Digital Nation Inn
==========================================================
*/


/* ==========================================================
   APP WRAPPER
========================================================== */

#dni-app{

	position:relative;

	width:100%;

	min-height:100vh;

	overflow:hidden;

}


/* ==========================================================
   MAIN CONTAINER
========================================================== */

.container{

	width:100%;

	max-width:1560px;

	margin:0 auto;

	padding-left:32px;

	padding-right:32px;

}


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

section{

	position:relative;

	padding:90px 0;

	overflow:hidden;

}

section:nth-child(even){

	background:#091a35;

}


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

.section-badge{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:10px;

	padding:10px 20px;

	margin-bottom:18px;

	border-radius:50px;

	background:rgba(11,95,255,.12);

	border:1px solid rgba(11,95,255,.18);

	color:#6FA8FF;

	font-size:14px;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:.6px;

}


.section-title{

	font-size:48px;

	font-weight:800;

	line-height:1.2;

	margin-bottom:20px;

	color:var(--dni-heading);

}


.section-description{

	max-width:760px;

	margin:0 auto;

	font-size:18px;

	line-height:1.8;

	color:#B9C7D9;

}


/* ==========================================================
   ROW
========================================================== */

.row{

	--bs-gutter-x:2rem;

	--bs-gutter-y:2rem;

}


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

.card{

	height:100%;

	background:#102345;

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

	border-radius:20px;

	box-shadow:0 18px 45px rgba(0,0,0,.20);

	overflow:hidden;

	transition:all .35s ease;

}

.card:hover{

	transform:translateY(-10px);

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

}


.card-body{

	padding:32px;

}


.card h2,
.card h3,
.card h4{

	margin:18px 0 16px;

	color:#fff;

	font-weight:700;

}


.card p{

	margin-bottom:20px;

	color:#B8C7DD;

	line-height:1.8;

}


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

.btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:10px;

	min-width:180px;

	min-height:52px;

	padding:12px 28px;

	border-radius:14px;

	font-weight:600;

	transition:.30s;

}


.btn-primary{

	background:var(--dni-primary);

	border:none;

}


.btn-primary:hover{

	background:#2D78FF;

	transform:translateY(-2px);

}


.btn-dark{

	border:none;

}


/* ==========================================================
   ICONS
========================================================== */

.display-4{

	font-size:3rem;

	line-height:1;

}

.display-5{

	font-size:2.5rem;

	line-height:1;

}


/* ==========================================================
   ALERT
========================================================== */

.alert{

	border:none;

	border-radius:20px;

	padding:30px;

}


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

img{

	max-width:100%;

	height:auto;

	display:block;

}


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

.text-center{

	text-align:center;

}

.mx-auto{

	margin-left:auto;

	margin-right:auto;

}


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

.mb-5{

	margin-bottom:3rem;

}

.mt-5{

	margin-top:3rem;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1400px){

	.container{

		max-width:1320px;

	}

}


@media (max-width:1200px){

	.container{

		max-width:1140px;

		padding-left:28px;

		padding-right:28px;

	}

	.section-title{

		font-size:42px;

	}

}


@media (max-width:992px){

	.container{

		max-width:960px;

		padding-left:24px;

		padding-right:24px;

	}

	section{

		padding:70px 0;

	}

	.section-title{

		font-size:36px;

	}

	.card-body{

		padding:28px;

	}

}


@media (max-width:768px){

	.container{

		max-width:100%;

		padding-left:18px;

		padding-right:18px;

	}

	section{

		padding:60px 0;

	}

	.section-title{

		font-size:30px;

	}

	.section-description{

		font-size:16px;

	}

	.card-body{

		padding:24px;

	}

	.btn{

		width:100%;

	}

}


@media (max-width:576px){

	.section-title{

		font-size:26px;

	}

	.section-badge{

		font-size:12px;

		padding:8px 16px;

	}

	.card{

		border-radius:18px;

	}

}