@font-face {
  font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url('https://cdn.kapper.kz/fonts/Inter_300.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('https://cdn.kapper.kz/fonts/Inter_400.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('https://cdn.kapper.kz/fonts/Inter_500.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('https://cdn.kapper.kz/fonts/Inter_600.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('https://cdn.kapper.kz/fonts/Inter_700.woff2') format('woff2');
	font-display: swap;

}

:root {
	--white-color: #ffffff;
	--black-color: #000000;
	--text-color: #1c1c1c;
	--secondary-text: #666666;

	--primary-color: #0066ff;
	--secondary-color: #f5f5f5;

	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 20px;
	--font-size-xxl: 24px;

	--line-height: 1.5;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-size: var(--font-size-base);
	font-weight: 400;
	line-height: var(--line-height);
	background-color: var(--white-color);
	color: var(--text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 600;
}
h1 { font-size: var(--font-size-xxl) }
h2 { font-size: var(--font-size-xl) }
h3 { font-size: var(--font-size-lg) }
h4 { font-size: var(--font-size-base) }
h5 { font-size: var(--font-size-sm) }
h6 {
	font-size: var(--font-size-sm);
	font-weight: 500;
}
p { margin-bottom: 1em }
a {
	color: var(--primary-color);
	transition: color .2s ease;
}

a:hover { }
button {
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	border: none;
	background-color: transparent;
}
button,
input {
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
}
.btn {
	display: flex;
	gap: 5px;
	cursor: pointer;
	text-decoration: none;
	transition: .35s;
}
.icon {
	display: block;
	background: center / contain no-repeat;
}

.app {
	display: grid;
	align-content: start;
	grid-template-rows: auto 1fr;
	gap: 0;
	height: 100%;
}
header {
	display: grid;
	grid-template-columns: 3fr  5fr 4fr;
	gap: 15px;
	padding: 15px;
}
.app_logo a {
	display: grid;
	max-width: 200px;
}
.app_logo img { max-width: 100% }
.layout {
	display: grid;
	grid-template-columns: 3fr  5fr 4fr;
	gap: 15px;

}

@media only screen and (max-width: 768px) {
	
}
@media (min-width: 576px) { }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width: 1200px) { }
@media (min-width: 1300px) { }