:root {
	--text-color-black: #000;
	--text-color-white: #fdfdfd;
	--akcent-green-color: #073c33;
	--akcent-green-color-dark: #00221c;
	--text-color-green: #24333a;
	--brown-main-color: #a18265;
	--brown-white-color: #e1be9e;
	--brown-bg-color: #fff3e8;
	--brown-bg-color-opacity: #cfcdcc;
	--white-color: #ffffff;

	/* font size  */

	--fz-h1: 64px;
	--fz-30: 30px;
	--fz-26: 26px;
	--fz-20: 20px;
	--fz-18: 18px;

	/* margin end padding */
	--size-60px: 60px;
	--size-30px: 30px;
	--size-40px: 40px;
	--size-25px: 25px;
	--size-20px: 20px;

	--s-60-px: 60px;
}

.bw {
	background: var(--brown-bg-color);
}
p.colors span {
	color: var(--brown-main-color);
}
h2.colors span,
h3.colors span {
	color: var(--brown-main-color);
}
h2.big {
	font-size: 48px;
}
.s-60-px {
	padding: var(--s-60-px) 0;
}

@media (max-width: 991px) {
	:root {
		/* font size  */

		--fz-h1: 40px;
		--fz-30: 25px;
		--fz-26: 20px;
		--fz-20: 20px;
		--fz-18: 18px;
	}
}
@media (max-width: 576px) {
	:root {
		/* font size  */

		--fz-h1: 28px;
		--fz-30: 20px;
		--fz-26: 18px;
		--fz-20: 16px;
		--fz-18: 14px;

		--s-60-px: 30px;
	}
}