:root {
	/* color variables */
	--link-link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary);
	--link-link-primary: var(--colors-primary-sa-flag-600-primary);
	--background-background-neutral-100: var(--colors-neutral-100);
	--icon-icon-neutral: var(--colors-neutral-700);
	--border-border-neutral-primary: var(--colors-neutral-300);
	--background-background-menu: var(--colors-base-white);
	--icon-icon-default: var(--colors-base-black);
	--text-text-default: var(--colors-base-black);
	--colors-neutral-300: #d2d6db;
	--background-background-primary-50: var(--colors-primary-sa-flag-50);
	--global-text-default-disabled: var(--colors-neutral-400);
	--icon-icon-default-400: var(--colors-neutral-400);
	--link-link-neutral: var(--colors-neutral-700);
	--colors-primary-sa-flag-600-primary: #1b8354;
	--text-text-primary: var(--colors-primary-sa-flag-600-primary);
	--background-background-card: var(--colors-base-white);
	--colors-primary-sa-flag-50: #f3fcf6;
	--icon-background-brand-light: var(--colors-primary-sa-flag-50);
	--colors-green-700: #067647;
	--icon-icon-success: var(--colors-green-700);
	--colors-primary-sa-flag-800: #14573a;
	--text-text-primary-sa-flag: var(--colors-primary-sa-flag-800);
	--colors-neutral-800: #1f2a37;
	--text-text-display: var(--colors-neutral-800);
	--colors-neutral-100: #f3f4f6;
	--table-table-background-header: var(--colors-neutral-100);
	--table-table-text-head: var(--colors-neutral-700);
	--colors-neutral-50: #f9fafb;
	--table-table-background-row: var(--colors-neutral-50);
	--table-table-text-body: var(--text-text-default);
	--table-table-cell-border: var(--colors-neutral-300);
	--border-border-background-neutral: var(--colors-neutral-300);
	--background-background-primary: var(--colors-primary-sa-flag-600-primary);
	--colors-primary-sa-flag-400: #54c08a;
	--background-background-primary-400: var(--colors-primary-sa-flag-400);
	--colors-primary-sa-flag-200: #b8eacb;
	--charts-charts-green-primary-200: var(--colors-primary-sa-flag-200);
	--colors-green-600: #079455;
	--background-background-success: var(--colors-green-600);
	--colors-neutral-700: #384250;
	--text-text-primary-paragraph: var(--colors-neutral-700);
	--background-background-white: var(--colors-base-white);
	--border-border-primary: var(--colors-primary-sa-flag-600-primary);
	--button-button-background-primary-default: var(--colors-primary-sa-flag-600-primary);
	--colors-base-black: #161616;
	--colors-green-900: #074d31;
	--background-background-sa-flag: var(--colors-green-900);
	--icon-icon-oncolor: var(--colors-base-white);
	--colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3);
	--border-border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
	--colors-neutral-500: #6c737f;
	--text-text-secondary-paragraph: var(--colors-neutral-500);
	--colors-neutral-400: #9da4ae;
	--background-background-neutral-400: var(--colors-neutral-400);
	--link-link-oncolor: var(--colors-base-white);
	--text-text-oncolor-primary: var(--colors-base-white);
	--colors-base-white: #fff;

	/* number variables */
	--section-section-padding: var(--spacing-8-32px);
	--spacing-1-5-6px: 6px;
	--global-spacing-sm: var(--spacing-1-5-6px);
	--global-spacing-xs: var(--spacing-1-4px);
	--radius-sm: 4px;
	--spacing-1-4px: 4px;
	--spacing-xs: var(--spacing-1-4px);
	--global-spacing-md: var(--spacing-2-8px);
	--spacing-20-80px: 80px;
	--global-spacing-8xl: var(--spacing-20-80px);
	--spacing-10-40px: 40px;
	--global-spacing-5xl: var(--spacing-10-40px);
	--radius-lg: 16px;
	--radius-full: 9999px;
	--card-card-lg-gap: var(--spacing-6-24px);
	--spacing-8-32px: 32px;
	--global-spacing-4xl: var(--spacing-8-32px);
	--size-8: 8px;
	--radius-radius-8: 8px;
	--radius-radius-md: var(--radius-radius-8);
	--table-table-cell-gap: var(--spacing-2-8px);
	--table-table-cell-h-padding: var(--spacing-4-16px);
	--spacing-2-8px: 8px;
	--table-table-cell-v-padding: var(--spacing-2-8px);
	--radius-radius-16: 16px;
	--radius-radius-lg: var(--radius-radius-16);
	--global-spacing-xl: var(--spacing-4-16px);
	--spacing-6-24px: 24px;
	--global-spacing-3xl: var(--spacing-6-24px);
	--global-spacing-lg: var(--spacing-3-12px);
	--spacing-md: var(--spacing-2-8px);
	--button-buttons-lg-gap: var(--spacing-1-4px);
	--spacing-4-16px: 16px;
	--button-buttons-lg-padding: var(--spacing-4-16px);
	--spacing-5xl: var(--spacing-10-40px);
	--spacing-4xl: var(--spacing-8-32px);
	--radius-radius-4: 4px;
	--radius-radius-sm: var(--radius-radius-4);
	--button-buttons-md-gap: var(--spacing-1-4px);
	--spacing-3-12px: 12px;
	--button-buttons-md-padding: var(--spacing-3-12px);
	--spacing-3xl: var(--spacing-6-24px);
	--spacing-xl: var(--spacing-4-16px);
	--link-link-sm-gap: var(--spacing-1-4px);
	--spacing-0-0px: 0px;
	--global-spacing-none: var(--spacing-0-0px);

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

* {
	--min-screen-size: 430;
	--max-screen-size: 1441;
	--interpolate-diff: calc(var(--max-font-size) - var(--min-font-size));
	--interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px));
}

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



/* text utility classes */

.text-sm-regular-underlined {
	color: var(--link-link-oncolor);
	font-size: 14px;
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	text-decoration: underline;
	line-height: 1.429;
	letter-spacing: 0px;
}

.text-sm-medium {
	font-size: 14px;
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 500;
	line-height: 1.429;
	letter-spacing: 0px;
}

.text-xs-medium {
	color: var(--text-text-secondary-paragraph);
	font-size: 12px;
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0px;
}

.text-sm-semibold {
	color: var(--text-text-oncolor-primary);
	font-size: 14px;
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 600;
	line-height: 1.429;
	letter-spacing: 0px;
}

.text-md-regular1 {
	color: var(--text-text-default);
	--min-font-size: 15; --max-font-size: 16; font-size: var(--interpolate);
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.text-sm-regular {
	font-size: 14px;
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0px;
}

.text-md-regular2 {
	color: var(--text-text-default);
	font-size: 16px;
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.text-lg-regular {
	color: var(--text-text-default);
	--min-font-size: 16; --max-font-size: 18; font-size: var(--interpolate);
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	line-height: 1.556;
	letter-spacing: 0px;
}

.text-xl-medium {
	color: var(--text-text-default);
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0px;
}

.text-md-medium {
	color: var(--text-text-default);
	font-size: 16px;
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0px;
}

.text-xl-regular {
	color: var(--text-text-default);
	font-size: 20px;
	font-family: 'IBM Plex Sans Arabic';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.sub-text-text-text-primary-paragraph {
	color: var(--text-text-primary-paragraph);
	font-size: 14px;
}



/* section utility classes */

.section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--global-spacing-5xl) var(--global-spacing-8xl);
}



/* ui objects utility classes */

.card1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--background-background-card);
	padding: var(--global-spacing-xl);
	border-radius: var(--radius-lg);
}

.circle {
	width: 8px; height: 8px;
	border-radius: 50%;
}

.card3 {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--table-table-cell-border);
	border-radius: var(--radius-radius-md);
	overflow: hidden;
}

.card2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--global-spacing-xl);
	border: 1px solid var(--border-border-background-neutral);
	border-radius: var(--radius-radius-lg);
}



/* button hover utility classes */

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