:root {
	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
}



html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.text2 {
	font-size: 20px;
	font-family: 'Lato';
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0px;
}

.text-blue {
	color: #64748b;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.subtitle {
	font-size: 22px;
	font-family: 'Montserrat';
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0px;
}

.text1 {
	font-size: 16px;
	font-family: 'Lato';
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}



/* ui objects utility classes */

.card3 {
	width: 13px; height: 13px;
	border: 1px solid #64748b;
	border-radius: 1px;
}

.card1 {
	display: flex;
	flex-direction: column;
	background-position: center, top left;
	background-size: cover, auto auto;
	background-repeat: no-repeat, no-repeat;
	padding: 0 32px;
}



/* button hover utility classes */

.hover-bright:hover {
	filter: brightness(1.2);
}

.hover-dark:hover {
	filter: brightness(0.85);
}