/*
==========================================================
DIGITAL NATION INN
BASE DESIGN SYSTEM
Version : 1.0
==========================================================
*/

/* ==========================================================
   GOOGLE FONT
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root{

	--dni-primary:#0B5FFF;
	--dni-secondary:#6C63FF;
	--dni-success:#12B76A;
	--dni-warning:#F59E0B;
	--dni-danger:#EF4444;

	--dni-dark:#07152D;
	--dni-dark-2:#0D1B38;
	--dni-light:#F7FAFC;
	--dni-white:#FFFFFF;

	--dni-text:#D9E2F2;
	--dni-heading:#FFFFFF;

	--dni-border:rgba(255,255,255,.08);

	--dni-radius:18px;

	--dni-shadow:
	0 10px 35px rgba(0,0,0,.18);

}


/* ==========================================================
   RESET
========================================================== */

*{

	margin:0;
	padding:0;
	box-sizing:border-box;

}

html{

	scroll-behavior:smooth;

}

body{

	font-family:'Inter',sans-serif;

	background:var(--dni-dark);

	color:var(--dni-text);

	line-height:1.7;

	font-size:16px;

}


/* ==========================================================
   HEADINGS
========================================================== */

h1,h2,h3,h4,h5,h6{

	color:var(--dni-heading);

	font-weight:700;

	line-height:1.2;

}


/* ==========================================================
   LINKS
========================================================== */

a{

	color:var(--dni-primary);

	text-decoration:none;

	transition:.25s;

}

a:hover{

	color:#6FA8FF;

}


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

section{

	position:relative;

	padding:90px 0;

}


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

.container{

	max-width:1280px;

}


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

.card{

	background:#102345;

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

	border-radius:var(--dni-radius);

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

	transition:.30s;

}

.card:hover{

	transform:translateY(-8px);

}


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

.btn{

	border-radius:12px;

	padding:12px 26px;

	font-weight:600;

}


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

img{

	max-width:100%;

	height:auto;

	display:block;

}