:root {
	--font-main: "Hanken Grotesk", sans-serif !important;
	--font-secondary: "Hanken Grotesk", sans-serif !important;
	--font-size-h1: 32px;
	--font-size-h2: 28px;
	--font-size-h3: 26px;
	--font-size-h4: 20px;
	--font-size-h5: 18px;
	--line-height-h1: 42px;
	--line-height-h2: 36px;
	--line-height-h3: 34px;
	--line-height-h4: 30px;
	--line-height-h5: 26px;
}

.h-90 {
	height: 70vh;
}

@media (min-width: 768px) {
	:root {
		--font-size-h1: 36px;
		--font-size-h2: 36px;
		--font-size-h3: 30px;
		--font-size-h4: 22px;
		--font-size-h5: 20px;
		--line-height-h1: 44px;
		--line-height-h2: 46px;
		--line-height-h3: 38px;
		--line-height-h4: 30.6px;
		--line-height-h5: 25px;
	}

	.h-90 {
		height: 55vh;
	}
}

@media (min-width: 992px) {
	:root {
		--font-size-h1: 52px;
		--font-size-h2: 36px;
		--font-size-h3: 28px;
		--font-size-h4: 22px;
		--font-size-h5: 20px;
		--line-height-h1: 62px;
		--line-height-h2: 46px;
		--line-height-h3: 36px;
		--line-height-h4: 32px;
		--line-height-h5: 26px;
	}

	.h-90 {
		height: 96vh;
	}
}

.mt--0-5 { margin-top: -0.5rem; }
.mt-4-5 { margin-top: 2rem; }

/**** heading ***/
h1 {
	font-family: var(--font-main);
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	font-weight: 700;
}

h2 {
	font-family: var(--font-main);
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	font-weight: 700;
}

h3 {
	font-family: var(--font-main);
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	font-weight: 700;
}

h4, .h4 {
	font-family: var(--font-main);
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
	font-weight: 700;
}

h5 {
	font-family: var(--font-main);
	font-size: var(--font-size-h5);
	line-height: var(--line-height-h5);
	font-weight: 700;
}

/**** paragraph ****/
p, li, a {
	font-size: 18px;
	font-family: var(--font-secondary);
	line-height: 27px;
	font-weight: normal;
}

.text-black  { color: #131313 !important; }
.text-blue   { color: #127BCA !important; }
.text-yellow { color: #FFF64D !important; }
.text-grey   { color: #767A85 !important; }
.text-red    { color: #CE4949 !important; }
.text-green  { color: #089A83 !important; }
.text-violet { color: #602D94 !important; }
.text-lblue  { color: #3E6BC8 !important; }
.text-dblue  { color: #4D7DF0 !important; }

.bg-grey {background-color: #F2F2F2;}
.bg-violet {background-color: #845EF7;}
.bg-orange {background-color: #EC696A;}
.bg-blue {background-color: #31A8FE;}
.bg-yellow {background-color: #E6B33D;}
.bg-green {background-color: #1BC6AF;}
.bg-green {background-color: #1BC6AF;}
.bg-orange30 {background-color: #EA7D30;}
.bg-indigo {background-color: #302357; }


.text-whitegrey{color: #F0EFEE;}
.text-purple{color: #845EF7 !important;}
.text-green{color: #1BC6AF !important;}
.text-red{color: #EC696A !important;}
.text-orange{color: #EA7D30;}
.text-blue{color: #31A8FE;}
.text-p-purple{color:#874FFB;}
.text-d-grey{color: #808080;}
.text-dd-orange{color:#FF7D19;}
.menu-box{padding: 8px 8px 12px 8px;height: 100%;}
.dropdown-item{white-space: unset !important;}

.br-r { border-right: 0.5px solid #4d7ef044; }
.br-b { border-bottom: 0.5px solid #4d7ef044; }

.fs-14 { font-size: 14px; }

.sp-100  { padding-top: 100px; padding-bottom: 100px; }
.sp-60   { padding-top: 60px; padding-bottom: 60px; }
.spt-60  { padding-top: 60px; }
.spb-60  { padding-bottom: 60px; }
.spt-200 { padding-top: 150px; }
.h-110   { min-height: 110vh; }

@media screen and (min-width:768px) and (max-width:1080px) {
	.sp-60    { padding-top: 50px; padding-bottom: 50px; }
	.spt-60   { padding-top: 50px; }
	.spb-60   { padding-bottom: 50px; }
	.spt-100  { padding-top: 70px; }
	.spb-100  { padding-bottom: 70px; }
	.sp-100   { padding-top: 70px; padding-bottom: 70px; }
	.fs-60    { font-size: 40px; }
	.lh-84    { line-height: 52px; }
	.spt-200  { padding-top: 140px; }
	.h-110    { min-height: 60vh; }
}

@media screen and (max-width:500px) {
	.sp-60    { padding-top: 40px; padding-bottom: 40px; }
	.spt-100  { padding-top: 60px; }
	.spb-100  { padding-bottom: 60px; }
	.sp-100   { padding-top: 60px; padding-bottom: 60px; }
	.spt-60   { padding-top: 40px; }
	.spb-60   { padding-bottom: 40px; }
	.spt-200  { padding-top: 120px; }
	.h-110    { min-height: 70vh; }
}

html {
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
}

.fs-20  { font-size: 20px; line-height: 30px; }
.fs-22  { font-size: 22px !important; line-height: 30px; }
.fs-16  { font-size: 16px !important; line-height: 24px !important; }
.fs-18  { font-size: 18px !important; line-height: 24px !important; }
.lh-33  { line-height: 33.6px !important; }

.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

@media (min-width: 1200px) {
	.db           { display: block; }
	.container    { max-width: 1280px !important; }
	.col-lg-2-5   { width: 20% !important; }
}

.offcanvas {
	height: 100vh;
}