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

.container{
	width:100%;
	max-width:1320px;
	margin:0 auto;
	padding:0 24px;
}

.container-sm{
	max-width:980px;
}

.container-lg{
	max-width:1440px;
}

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

.section-padding{
	padding:120px 0;
}

.section-small{
	padding:80px 0;
}

.section-large{
	padding:160px 0;
}

/* ===================================================
   DISPLAY HELPERS
=================================================== */

.d-flex{
	display:flex !important;
}

.d-grid{
	display:grid !important;
}

.d-block{
	display:block !important;
}

.d-inline-flex{
	display:inline-flex !important;
}

.d-none{
	display:none !important;
}

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

.align-center{
	align-items:center !important;
}

.align-start{
	align-items:flex-start !important;
}

.align-end{
	align-items:flex-end !important;
}

.justify-center{
	justify-content:center !important;
}

.justify-between{
	justify-content:space-between !important;
}

.justify-around{
	justify-content:space-around !important;
}

.flex-column{
	flex-direction:column !important;
}

.flex-wrap{
	flex-wrap:wrap !important;
}

.flex-grow{
	flex-grow:1 !important;
}

.gap-10{
	gap:10px !important;
}

.gap-20{
	gap:20px !important;
}

.gap-30{
	gap:30px !important;
}

.gap-40{
	gap:40px !important;
}

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

.text-center{
	text-align:center !important;
}

.text-left{
	text-align:left !important;
}

.text-right{
	text-align:right !important;
}

.text-white{
	color:#fff !important;
}

.text-primary{
	color:
	var(--ulg-primary) !important;
}

.text-secondary{
	color:
	var(--ulg-secondary) !important;
}

.text-muted{
	color:
	rgba(
		255,
		255,
		255,
		.65
	) !important;
}

/* ===================================================
   WIDTH HELPERS
=================================================== */

.w-100{
	width:100% !important;
}

.h-100{
	height:100% !important;
}

.max-600{
	max-width:600px !important;
}

.max-700{
	max-width:700px !important;
}

.max-800{
	max-width:800px !important;
}

.max-1000{
	max-width:1000px !important;
}

.mx-auto{
	margin-left:auto !important;
	margin-right:auto !important;
}

/* ===================================================
   MARGIN HELPERS
=================================================== */

.mt-0{
	margin-top:0 !important;
}

.mt-10{
	margin-top:10px !important;
}

.mt-20{
	margin-top:20px !important;
}

.mt-30{
	margin-top:30px !important;
}

.mt-40{
	margin-top:40px !important;
}

.mt-60{
	margin-top:60px !important;
}

.mt-80{
	margin-top:80px !important;
}

.mb-0{
	margin-bottom:0 !important;
}

.mb-10{
	margin-bottom:10px !important;
}

.mb-20{
	margin-bottom:20px !important;
}

.mb-30{
	margin-bottom:30px !important;
}

.mb-40{
	margin-bottom:40px !important;
}

.mb-60{
	margin-bottom:60px !important;
}

.mb-80{
	margin-bottom:80px !important;
}

/* ===================================================
   PADDING HELPERS
=================================================== */

.p-10{
	padding:10px !important;
}

.p-20{
	padding:20px !important;
}

.p-30{
	padding:30px !important;
}

.p-40{
	padding:40px !important;
}

.p-60{
	padding:60px !important;
}

.px-20{
	padding-left:20px !important;
	padding-right:20px !important;
}

.py-20{
	padding-top:20px !important;
	padding-bottom:20px !important;
}

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

.radius-20{
	border-radius:20px !important;
}

.radius-30{
	border-radius:30px !important;
}

.radius-40{
	border-radius:40px !important;
}

.radius-round{
	border-radius:999px !important;
}

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

.shadow-sm{
	box-shadow:
	0 10px 30px
	rgba(
		0,
		0,
		0,
		.12
	) !important;
}

.shadow-md{
	box-shadow:
	0 20px 50px
	rgba(
		0,
		0,
		0,
		.18
	) !important;
}

.shadow-lg{
	box-shadow:
	0 35px 80px
	rgba(
		0,
		0,
		0,
		.25
	) !important;
}

/* ===================================================
   GLASS EFFECT
=================================================== */

.glass{
	background:
	rgba(
		255,
		255,
		255,
		.05
	) !important;

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

	backdrop-filter:
	blur(20px);

	-webkit-backdrop-filter:
	blur(20px);
}

/* ===================================================
   POSITION HELPERS
=================================================== */

.relative{
	position:relative !important;
}

.absolute{
	position:absolute !important;
}

.fixed{
	position:fixed !important;
}

.overflow-hidden{
	overflow:hidden !important;
}

/* ===================================================
   Z INDEX
=================================================== */

.z-1{
	z-index:1 !important;
}

.z-2{
	z-index:2 !important;
}

.z-5{
	z-index:5 !important;
}

.z-10{
	z-index:10 !important;
}

.z-50{
	z-index:50 !important;
}

.z-100{
	z-index:100 !important;
}

/* ===================================================
   HOVER UTILITIES
=================================================== */

.hover-up{
	transition:
	transform .3s ease;
}

.hover-up:hover{
	transform:
	translateY(-6px);
}

.hover-scale{
	transition:
	transform .3s ease;
}

.hover-scale:hover{
	transform:
	scale(1.03);
}

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

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

	.hover-up,
	.hover-scale{
		transition:none !important;
		transform:none !important;
	}
}

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

@media(max-width:768px){

	.container{
		padding:0 18px;
	}

	.section-padding{
		padding:70px 0;
	}

	.section-large{
		padding:100px 0;
	}

	.gap-30{
		gap:20px !important;
	}

	.p-40{
		padding:24px !important;
	}

	.text-mobile-center{
		text-align:center !important;
	}

	.w-mobile-100{
		width:100% !important;
	}
}