/*
==========================================================
DIGITAL NATION INN
COMPONENT DESIGN SYSTEM
Version : 1.0.0
==========================================================
*/


/* ==========================================================
   GLASS CARD
========================================================== */

.dni-glass{

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

	backdrop-filter:blur(18px);

	-webkit-backdrop-filter:blur(18px);

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

	border-radius:22px;

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

	transition:.35s ease;

}

.dni-glass:hover{

	transform:translateY(-8px);

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

}


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

.section-badge{

	display:inline-flex;

	align-items:center;

	gap:10px;

	padding:10px 20px;

	border-radius:999px;

	font-size:13px;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:.08em;

}


/* ==========================================================
   ICON BOX
========================================================== */

.dni-icon{

	width:74px;

	height:74px;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:34px;

	border-radius:20px;

	background:linear-gradient(
	135deg,
	#0B5FFF,
	#6C63FF
	);

	color:#fff;

	margin-bottom:22px;

}


/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.btn-primary{

	background:linear-gradient(
	135deg,
	#0B5FFF,
	#355CFF
	);

	border:none;

	border-radius:14px;

	font-weight:600;

	box-shadow:0 10px 30px rgba(11,95,255,.25);

}

.btn-primary:hover{

	transform:translateY(-3px);

	box-shadow:0 18px 40px rgba(11,95,255,.35);

}


/* ==========================================================
   OUTLINE BUTTON
========================================================== */

.btn-outline-light{

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

	color:#fff;

	background:transparent;

}

.btn-outline-light:hover{

	background:#fff;

	color:#07152D;

}


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

.dni-search{

	position:relative;

}

.dni-search input{

	height:62px;

	border-radius:16px;

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

	background:#13284D;

	color:#fff;

	padding-left:22px;

}

.dni-search input:focus{

	outline:none;

	box-shadow:0 0 0 4px rgba(11,95,255,.15);

	border-color:#0B5FFF;

}


/* ==========================================================
   CARD HOVER
========================================================== */

.dni-hover{

	transition:.35s;

}

.dni-hover:hover{

	transform:translateY(-10px);

}


/* ==========================================================
   TAG
========================================================== */

.dni-tag{

	display:inline-block;

	padding:6px 14px;

	border-radius:50px;

	font-size:12px;

	font-weight:600;

	background:#16325C;

	color:#8BC4FF;

}


/* ==========================================================
   STATUS
========================================================== */

.dni-status{

	display:inline-flex;

	align-items:center;

	gap:8px;

	font-size:14px;

}

.dni-status::before{

	content:"";

	width:10px;

	height:10px;

	border-radius:50%;

	background:#12B76A;

}


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

.dni-divider{

	width:100%;

	height:1px;

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

	margin:50px 0;

}


/* ==========================================================
   FLOAT ANIMATION
========================================================== */

@keyframes dniFloat{

	0%{

		transform:translateY(0);

	}

	50%{

		transform:translateY(-8px);

	}

	100%{

		transform:translateY(0);

	}

}

.dni-float{

	animation:dniFloat 4s ease-in-out infinite;

}


/* ==========================================================
   FADE UP
========================================================== */

@keyframes dniFadeUp{

	from{

		opacity:0;

		transform:translateY(40px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

.dni-fade-up{

	animation:dniFadeUp .8s ease both;

}


/* ==========================================================
   SCALE HOVER
========================================================== */

.dni-scale{

	transition:.35s;

}

.dni-scale:hover{

	transform:scale(1.03);

}


/* ==========================================================
   SHADOW
========================================================== */

.dni-shadow{

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

}


/* ==========================================================
   RADIUS
========================================================== */

.dni-radius{

	border-radius:22px;

}