@import url(https://fonts.bunny.net/css?family=inter:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i);

:root {
	--bs-color-main: #ccff00;
	--bs-color-second: #000;

	--bs-font-family: 'Inter', Helvetica, Arial, sans-serif;
	--bs-font-main-color: lab(66.128% -.0000298023 .0000119209);
	--bs-font-text-headers-main-color: var(--bs-color-main);
	--bs-swiper-basic-color: hsl(220, 10%, 35%);;

	--bs-border-radius: 38px;

	--bs-header-background: var(--bs-color-second);
	--bs-page-background: var(--bs-color-second);
	--bs-section-background: var(--bs-page-background);

	--bs-hero-image-filter: brightness(65%) grayscale(1);

	--bs-button-hover-background: #fff;
	--bs-button-color: var(--bs-color-second);
	--bs-button-hover-color: var(--bs-button-color);
	--bs-button-border-width: 2px;
	--bs-button-border-color: lab(93.9363% -35.8091 88.7913/.4);
	--bs-swiper-button-color: var(--bs-color-second);
	--bs-swiper-button-active: var(--bs-swiper-button-color);

	--bs-link-color: color-mix(in oklab,#fff 80%,transparent);
	--bs-link-hover-color: var(--bs-color-main);
	--bs-link-text-decoration: none;

	--bs-criteria-background: linear-gradient(to top, #000 0%, #000 15%, lab(54.1736% 13.3369 -74.6839) 100%);
	--bs-benefits-background: linear-gradient(to top, #000 0%, #000 15%, lab(75.3197% -46.6547 86.1778) 100%);
	--bs-box-shadow: 0 0 0 1px lab(35% 0 -.0000119209); /*90.952%*/

	--logo-width: 12em;
	--logo-width-mobile: 10em;
}

.button {
	font-weight: 600;
}

.boxes {
	.criteria {
		figure svg path {
			fill: lab(54.1736% 13.3369 -74.6839);
			color: lab(54.1736% 13.3369 -74.6839);
		}
	}
	.benefits {
		figure svg path {
			fill: lab(75.3197% -46.6547 86.1778);
			color: lab(75.3197% -46.6547 86.1778);
		}
	}
}