@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

/*! minireset.css v0.0.7 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}

ul {
	list-style: none;
}

button,input,select {
	margin: 0;
}

html {
	box-sizing: border-box;
}

*,*::before,*::after {
	box-sizing: inherit;
}

img,video {
	height: auto;
	max-width: 100%;
}

iframe {
	border: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,th {
	padding: 0;
}

@font-face {
  font-family: "Sansation";
  font-weight: 400;
  font-style: normal;
  src: url(/static/fonts/Sansation-Regular.woff2) format("woff2"),
	   url(/static/fonts/Sansation-Bold.woff2) format("woff2"),
	   url(/static/fonts/Sansation-BoldItalic.woff2) format("woff2"),
	   url(/static/fonts/Sansation-Italic.woff2) format("woff2"),
	   url(/static/fonts/Sansation-Light.woff2) format("woff2"),
	   url(/static/fonts/Sansation-LightItalic.woff2) format("woff2");
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Inter";
}

html,body {
	overflow-x: hidden;
	background-color: #191a1d;
	height: 100%;
	color: #fff;
}

body::-webkit-scrollbar {
	width: 5px;
	background: none;
}

body::-webkit-scrollbar-thumb {
	background: #8a60f6;
	border-radius: 2px;
}

a {
	text-decoration: none;
	color: inherit;
}

.container {
	position: relative;
	width: 100%;
	max-width: 1188px;
	padding-left: 24px;
	padding-right: 24px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 1050px) {
	body {
		padding-top: 80px;
	}

	body::-webkit-scrollbar {
		width: 0px;
	}
}

.section {
	position: relative;
}

.section__decor {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 0;
}

.section__glow {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: -1;
	--glow-size: 200px;
	position: absolute;
	height: calc(var(--glow-size)*2);
	width: calc(var(--glow-size)*2);
	background: #8a60f6;
	filter: blur(var(--glow-size));
}

.bg {
	position: relative;
	z-index: 5;
	width: 100%;
	padding-bottom: 64px;
}

.bg--gray {
	background-color: #121315;
}

.button {
	display: block;
	border: none;
	outline: none;
	background: none;
	box-shadow: none;
	text-align: center;
	border-style: solid;
	border-color: rgba(0,0,0,0);
	transition: .2s;
	cursor: pointer;
}

.button_size_m {
	padding: 7px 15px;
	border-radius: 15px;
	font-size: 14px;
	border-width: .5px;
}

.button_size_l {
	padding: 10px 25px;
	border-radius: 15px;
	font-size: 20px;
	border-width: .5px;
}

.button_hover_blue:hover {
	box-shadow: 0 0 13px 0 #4587f7;
}

.button_hover_purple:hover {
	box-shadow: 0 0 13px 0 #8a60f6;
}

.button_hover_gray:hover {
	box-shadow: 0 0 13px 0 #3f3f3f;
}

.button_hover_green:hover {
	box-shadow: 0 0 13px 0 #76c353;
}

.button_hover_dblue:hover {
	box-shadow: 0 0 13px 0 #4858ac;
}

.button_hover_red:hover {
	box-shadow: 0 0 13px 0 #ff7070;
}

.button_hover_cyan:hover {
	box-shadow: 0 0 13px 0 #3fccea;
}

.button_hover_pink:hover {
	box-shadow: 0 0 13px 0 #cf46d1;
}

.button_hover_orange:hover {
	box-shadow: 0 0 13px 0 #d16746;
}

.button_color_blue {
	background-color: #4587f7;
	border-color: rgba(0,0,0,0);
}

.button_color_purple {
	background-color: #8a60f6;
	border-color: rgba(0,0,0,0);
}

.button_color_gray {
	background-color: #8e44ad;
	border-color: rgba(0,0,0,0);
}

.button_color_green {
	background-color: #76c353;
	border-color: rgba(0,0,0,0);
}

.button_color_dblue {
	background-color: #4858ac;
	border-color: rgba(0,0,0,0);
}

.button_color_red {
	background-color: #ff7070;
	border-color: rgba(0,0,0,0);
}

.button_color_cyan {
	background-color: #3fccea;
	border-color: rgba(0,0,0,0);
}

.button_color_pink {
	background-color: #cf46d1;
	border-color: rgba(0,0,0,0);
}

.button_color_orange {
	background-color: #d16746;
	border-color: rgba(0,0,0,0);
}

.header {
	position: relative;
	color: #fff;
	z-index: 10;
}

.header__container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-top: 25px;
	padding-bottom: 25px;
}

.header__logo {
	height: 28px;
}

.header__nav {
	font-size: 14px;
}

.header__ul {
	gap: 20px 30px;
}

.header__li {
	text-decoration: underline;
	text-decoration-color: rgba(0,0,0,0);
	text-underline-offset: 2px;
	transition: .2s;
}

.header__li:hover {
	text-decoration-color: currentColor;
}

.header__buttons {
	display: flex;
	flex-direction: row;
	gap: 15px;
}

.header__login {
	color: #FFF;
}

.header__login:hover {
	border-color: #4e4e4e;
	color: #fff;
}

.header__register:hover {
	box-shadow: 0px 0px 18px #4587f7;
}

.header__mobile {
	display: none;
	position: fixed;
	top: 0px;
	background-color: #121315;
}

.header__mobile-top {
	position: relative;
	z-index: 1;
	background-color: #121315;
}

.header__mobile-bottom {
	padding-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: fixed;
	left: 0px;
	width: 100%;
	height: 100vh;
	background-color: #121315;
	transition: .3s;
	transform: translateX(-100%);
}

.header__mobile-nav {
	font-size: 18px;
}

.header__mobile-buttons {
	margin-top: 30px;
	font-size: 16px;
}

.header__toggler {
	display: flex;
	flex-direction: column;
	gap: 2.5px;
	opacity: .5;
	transition: .2s;
	cursor: pointer;
	transform: scale(1.1, 1.05);
}

.header__toggler:hover {
	opacity: 1;
}

.header__toggle-part {
	width: 25px;
	height: 3.85px;
}

.header__toggle-part svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	display: block;
	height: 100%;
	width: 100%;
}

.header__toggle-part svg *[fill] {
	fill: currentColor;
}

.header__toggle-part svg *[stroke] {
	stroke: currentColor;
}

.header__toggle-part--top {
	transition: .4s;
	transform-origin: 0 0%;
}

.header__toggle-part--center {
	transition: .4s;
}

.header__toggle-part--bottom {
	transition: .4s;
	transform-origin: 0 100%;
}

.header--opened .header__toggle-part--top {
	transform: translate(4.225px, -50%) rotate(45deg);
}

.header--opened .header__toggle-part--center {
	opacity: 0;
}

.header--opened .header__toggle-part--bottom {
	transform: translate(4.225px, 50%) rotate(-45deg);
}

.header--opened .header__mobile-bottom {
	transform: translateY(-0.5px);
}

.header__icons {
	height: 20px;
}

.header__icon {
	transition: .2s;
	opacity: .5;
}

.header__icon:hover {
	opacity: 1;
}

.header__icon svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	height: 100%;
}

.header__icon svg *[fill] {
	fill: currentColor;
}

.header__icon svg *[stroke] {
	stroke: currentColor;
}

@media screen and (max-width: 1050px) {
	.header__desktop {
		display: none;
	}

	.header__mobile {
		display: block;
	}

	.header__login,.header__register {
		font-size: 16px;
	}
}

.logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
}

.logo__full {
	height: 100%;
}

.logo__full svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	height: 100%;
}

.logo__full svg *[fill] {
	fill: currentColor;
}

.logo__full svg *[stroke] {
	stroke: currentColor;
}

.logo__icon {
	height: 100%;
}

.logo__icon svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	height: 100%;
}

.logo__icon svg *[fill] {
	fill: currentColor;
}

.logo__icon svg *[stroke] {
	stroke: currentColor;
}

.logo__label {
	height: 100%;
}

.logo__label svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	height: 75%;
}

.logo__label svg *[fill] {
	fill: currentColor;
}

.logo__label svg *[stroke] {
	stroke: currentColor;
}

.nav__ul {
	list-style: none;
	display: flex;
	align-items: center;
}

.nav__ul--horizontal {
	flex-direction: row;
}

.nav__ul--vertical {
	flex-direction: column;
}

.navigation {
	padding-top: 20px;
}

.navigation__container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.navigation__item {
	color: #fff;
	position: relative;
	padding: 20px;
	background-color: #191a1d;
	z-index: 0;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.navigation__item:before {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	opacity: 0;
	z-index: -1;
	border-radius: inherit;
	transition: .2s;
}

.navigation__item--blue:before {
	background-image: linear-gradient(270deg, #4587F7 0%, #3466B9 100%);
}

.navigation__item--purple:before {
	background-image: linear-gradient(270deg, #8A60F6 0%, #704CCD 100%);
}

.navigation__item--gray:before {
	background-image: linear-gradient(270deg, #656565 0%, #323233 100%);
}

.navigation__item--green:before {
	background-image: linear-gradient(270deg, #4858ac 0%, #4858ac 100%);
}

.navigation__item--dblue:before {
	background-image: linear-gradient(270deg, #484787 0%, #4858AC 100%);
}

.navigation__item--red:before {
	background-image: linear-gradient(270deg, #AB3535 0%, #FF7070 100%);
}

.navigation__item--cyan:before {
	background-image: linear-gradient(270deg, #3F9BAE 0%, #46B9D1 100%);
}

.navigation__item--pink:before {
	background-image: linear-gradient(270deg, #AE3FA3 0%, #CF46D1 100%);
}

.navigation__item--orange:before {
	background-image: linear-gradient(270deg, #AE5A3F 0%, #D16746 100%);
}

.navigation__item:hover:before {
	opacity: 1;
}

.navigation__button {
	color: #fff;
	width: -moz-max-content;
	width: max-content;
}

.navigation__item:hover .navigation__button {
	border-color: #fff;
}

.navigation__item:hover .navigation__button--blue {
	background-color: #4587f7;
}

.navigation__item:hover .navigation__button--purple {
	background-color: #8a60f6;
}

.navigation__item:hover .navigation__button--gray {
	background-color: #3f3f3f;
}

.navigation__item:hover .navigation__button--green {
	background-color: #4858ac;
}

.navigation__item:hover .navigation__button--dblue {
	background-color: #4858ac;
}

.navigation__item:hover .navigation__button--red {
	background-color: #ff7070;
}

.navigation__item:hover .navigation__button--cyan {
	background-color: #3fccea;
}

.navigation__item:hover .navigation__button--pink {
	background-color: #cf46d1;
}

.navigation__item:hover .navigation__button--orange {
	background-color: #d16746;
}

.navigation__top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.navigation__title {
	font-family: 'Roboto', sans-serif;
	font-size: 34px;
	font-weight: 700;
}

.navigation__title:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 6px;
	width: 6px;
	background-color: currentColor;
	border-radius: 4px;
	margin-right: 15px;
	margin-left: 15px;
	transform: translateY(-50%);
}

₽

.navigation__price:before {
	content: "OT‚ ";
	font-size: 12px;
	font-weight: 400;
}

.navigation__price:after {
	content: " ₽";
}

.navigation__center {
	font-size: 16px;
	font-weight: 300;
	flex-grow: 1;
}

@media screen and (max-width: 1050px) {
	.navigation__title {
		font-size: 26px;
	}

	.navigation__title:before {
		margin-left: 10px;
		margin-right: 10px;
	}

	.navigation__center {
		font-size: 16px;
	}
}

@media screen and (max-width: 850px) {
	.navigation__container {
		grid-template-columns: 1fr;
	}
}

.start {
	padding-top: 64px;
	padding-bottom: 64px;
}

.start__container {
	display: flex;
	flex-direction: column;
	gap: 128px;
}

.start__row {
	position: relative;
}

.start__row--default {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 60px;
}

@media screen and (max-width: 850px) {
	.start__row--default {
		flex-direction: column-reverse;
		gap: 30px;
	}
}

.start__row--reversed {
	flex-direction: row-reverse;
}

@media screen and (max-width: 850px) {
	.start__row--reversed {
		flex-direction: column-reverse;
		gap: 30px;
	}
}

.start__column {
	position: relative;
	z-index: 1;
}

.start__column--image {
	position: relative;
	width: 100%;
	max-width: 40%;
}

@media screen and (max-width: 850px) {
	.start__column--image {
		max-width: 400px;
	}
}

.start__image {
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	width: 100%;
}

.start__image--rounded {
	border-radius: 20px;
}

.start__title {
	font-size: 48px;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
}

.start__subtitle {
	margin-top: 25px;
	font-size: 18px;
	font-weight: 500;
}

.start__desc {
	margin-top: 25px;
	font-size: 16px;
	font-weight: 300;
}

.start__points {
	margin-top: 25px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 25px;
}

.start__point {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	height: 30px;
}

.start__point-image {
	height: 100%;
}

.start__point-image>img {
	display: block;
	height: 100%;
}

.start__point-image svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	display: block;
	height: 24px;
}

.start__point-image svg *[fill] {
	fill: currentColor;
}

.start__point-image svg *[stroke] {
	stroke: currentColor;
}

.start__point-image--big>img {
	height: 48px;
}

.start__point-label {
	font-size: 18px;
	font-weight: 300;
}

.start__grid {
	position: relative;
	z-index: 1;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "empty0 title empty1" "left center right" "empty2 bottom empty3";
}

.start__grid-text {
	position: relative;
	white-space: nowrap;
}

.start__grid-text--left {
	grid-area: left;
	text-align: right;
	height: -moz-max-content;
	height: max-content;
	transform: translate(30px, 30px);
}

.start__grid-text--right {
	grid-area: right;
	text-align: left;
	height: -moz-max-content;
	height: max-content;
	transform: translate(-30px, 30px);
}

.start__grid-text--bottom {
	grid-area: bottom;
	margin: 0 auto 0;
	text-align: center;
	width: -moz-max-content;
	width: max-content;
}

.start__grid-text:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -20px;
	left: 0px;
	width: 100%;
	height: 1px;
	background-color: #fff;
}

.start__grid-text-title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 10px;
}

.start__grid-text-desc {
	font-size: 20px;
}

.start__grid-title {
	margin-bottom: 25px;
	text-align: center;
	grid-area: title;
}

.start__grid-panel {
	grid-area: center;
	height: 85%;
	background: radial-gradient(100% 150% at 20% 20%, #95A6FE 0%, rgba(149, 185, 255, 0) 100%);
	border-radius: 20px;
}

.start__grid-panel img {
	width: 100%;
}

.start__glow--1 {
	right: 8%;
	top: 70px;
	--glow-size: 110px;
}

.start__glow--2 {
	left: 50%;
	bottom: 150px;
	--glow-size: 90px;
	transform: translateX(-50%);
}

.start__glow--3 {
	right: 0%;
	top: 50px;
	--glow-size: 110px;
	transform: translateX(-50%);
}

.start__glow--4 {
	left: 0%;
	top: 50px;
	--glow-size: 110px;
	transform: translateX(50%);
}

@media screen and (max-width: 850px) {
	.start__title {
		font-size: 36px;
	}

	.start__point {
		height: 26px;
	}

	.start__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "title" "center" "left" "right" "bottom";
	}

	.start__grid-panel {
		width: 100%;
	}

	.start__grid-text {
		margin-top: 70px;
		transform: none;
		width: -moz-max-content;
		width: max-content;
	}

	.start__grid-text--left {
		margin-top: 30px;
		text-align: right;
		margin-left: auto;
	}

	.start__grid-text--bottom {
		text-align: right;
		margin-left: auto;
		margin-right: 0;
	}

	.start__glow--1 {
		--glow-size: 100px;
		left: 50%;
		transform: translateX(-50%);
	}

	.start__glow--2 {
		--glow-size: 80px;
		bottom: none;
		top: 30%;
	}

	.start__glow--3 {
		right: 50%;
		--glow-size: 100px;
		transform: translateX(50%);
	}

	.start__glow--4 {
		left: 50%;
		--glow-size: 100px;
		transform: translateX(-50%);
	}
}

.footer__desktop {
	position: relative;
	z-index: 1;
	background-color: #191a1d;
	box-shadow: 0 0 30px 30px #191a1d;
	padding-bottom: 30px;
}

.footer__top-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: solid 1px rgba(255,255,255,.4);
	padding-bottom: 15px;
}

.footer__bottom-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 15px;
}

.footer__info {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 35px;
}

.footer__logo {
	height: 29px;
	color: #fff;
	opacity: .7;
	transition: .2s;
}

.footer__logo:hover {
	opacity: 1;
}

.footer__social {
	opacity: .4;
	transition: .2s;
	height: 24px;
}

.footer__social:hover {
	opacity: 1;
}

.footer__nav {
	font-size: 14px;
	font-weight: 300;
}

.footer__ul {
	gap: 25px 35px;
}

.footer__li {
	opacity: .6;
	transition: .2s;
}

.footer__li:hover {
	opacity: 1;
}

.footer__paymethod {
	opacity: .4;
	height: 20px;
}

.footer__copyrights {
	text-align: right;
}

.footer__by {
	color: rgba(255,255,255,.8);
	font-weight: 400;
	transition: .2s;
}

.footer__by:hover {
	color: #fff;
}

.footer__label {
	color: rgba(255,255,255,.6);
	font-size: 12px;
	line-height: 15px;
	font-weight: 200;
}

.footer__mobile {
	position: relative;
	z-index: 1;
	background-color: #121315;
	display: none;
	padding-bottom: 30px;
}

.footer__mobile-container {
	width: 100%;
}

.footer__mobile-block {
	width: 100%;
	padding: 25px 0;
	border-bottom: 1px solid rgba(255,255,255,.18);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer__mobile-block--no-border {
	border: none;
	padding-bottom: 0;
}

@media screen and (max-width: 850px) {
	.footer__desktop {
		display: none;
	}

	.footer__mobile {
		display: block;
	}

	.footer__label {
		font-size: 14px;
	}
}

.paymethods {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.paymethods__item svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	display: block;
	height: 100%;
}

.paymethods__item svg *[fill] {
	fill: currentColor;
}

.paymethods__item svg *[stroke] {
	stroke: currentColor;
}

.socials {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.socials__item {
	cursor: pointer;
}

.socials__item svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	display: block;
	height: 100%;
}

.socials__item svg *[fill] {
	fill: currentColor;
}

.socials__item svg *[stroke] {
	stroke: currentColor;
}

.catalog {
	padding-top: 64px;
	padding-bottom: 120px;
}

.catalog__title {
	position: relative;
	z-index: 1;
	font-family: 'Roboto', sans-serif;
	font-size: 48px;
	font-weight: 700;
}

.catalog__subtitle {
	position: relative;
	z-index: 1;
	margin-top: 10px;
	font-weight: 500;
	font-size: 18px;
}

.catalog__desc {
	position: relative;
	z-index: 1;
	margin-top: 10px;
	font-weight: 300;
	font-size: 18px;
}

.catalog__filters {
	position: relative;
	z-index: 1;
	margin-top: 40px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 25px;
}

.catalog__filter {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	height: 30px;
	font-weight: 300;
	opacity: .8;
	cursor: pointer;
	transition: .2s;
}

.catalog__filter--selected {
	font-weight: 700;
	opacity: 1;
}

.catalog__filter-image {
	height: 100%;
}

.catalog__filter-image img {
	display: block;
	height: 100%;
}

.catalog__filter-image svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	display: block;
	height: 100%;
}

.catalog__filter-image svg *[fill] {
	fill: currentColor;
}

.catalog__filter-image svg *[stroke] {
	stroke: currentColor;
}

.catalog__filter-label {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.catalog__items {
	position: relative;
	z-index: 1;
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.catalog__glow--1 {
	left: 10%;
	top: 30%;
	--glow-size: 175px;
}

.catalog__glow--2 {
	right: 10%;
	bottom: 10%;
	--glow-size: 175px;
}

.catalog__glow--3 {
	display: none;
}

.catalog__container--centered .catalog__title,.catalog__container--centered .catalog__subtitle,.catalog__container--centered .catalog__desc {
	text-align: center;
}

@media screen and (max-width: 1200px) {
	.catalog__items {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 850px) {
	.catalog {
		overflow: hidden;
	}

	.catalog__items {
		grid-template-columns: repeat(2, 1fr);
	}

	.catalog__glow--1 {
		right: 90px;
		top: 300px;
		--glow-size: 100px;
	}

	.catalog__glow--2 {
		left: 20%;
		top: 800px;
		--glow-size: 145px;
		transform: translateX(-50%);
	}

	.catalog__glow--3 {
		display: block;
		right: 90px;
		top: 1400px;
		--glow-size: 145px;
		transform: translateX(50%);
	}
}

@media screen and (max-width: 600px) {
	.catalog__items {
		grid-template-columns: repeat(1, 1fr);
	}
}

#card-placeholder {
	display: none;
}

.card {
	padding: 15px;
	color: #fff;
	position: relative;
	background-color: #212227;
	z-index: 1;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.card__title {
	font-size: 30px;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	margin-bottom: 5px;
}

.card__price {
	font-size: 15px;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
}

.card__price:after {
	content: "/месяц";
	font-size: 13px;
	font-weight: 400;
}

.card__data {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 15px;
}

.card__row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	gap: 15px;
}

.card__value {
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
}

.card__key {
	font-size: 12px;
	line-height: 24px;
	font-weight: 500;
	color: #d5d5d5;
}

.card__region {
	margin-top: 5px;
	justify-content: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	height: 22px;
}

.card__region-image {
	height: 100%;
}

.card__region-image img {
	display: block;
	height: 100%;
}

.card__region-image svg {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: currentColor;
	display: block;
	height: 100%;
}

.card__region-image svg *[fill] {
	fill: currentColor;
}

.card__region-image svg *[stroke] {
	stroke: currentColor;
}

.card__separator {
	flex: 1;
}

.card__button {
	margin-top: 10px;
	text-align: center;
	color: #fff;
}

.card:after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	opacity: 0;
	z-index: -1;
	border-radius: inherit;
	transition: .2s;
	background: #191a1d;
}

.card--blue:after {
	background-image: linear-gradient(270deg, #4587F7 0%, #3466B9 100%);
}

.card--purple:after {
	background-image: linear-gradient(270deg, #8A60F6 0%, #704CCD 100%);
}

.card--gray:after {
	background-image: linear-gradient(270deg, #656565 0%, #323233 100%);
}

.card--green:after {
	background-image: linear-gradient(270deg, #76C453 0%, #69AE49 100%);
}

.card--dblue:after {
	background-image: linear-gradient(270deg, #484787 0%, #4858AC 100%);
}

.card--red:after {
	background-image: linear-gradient(270deg, #AB3535 0%, #FF7070 100%);
}

.card--cyan:after {
	background-image: linear-gradient(270deg, #3F9BAE 0%, #46B9D1 100%);
}

.card--pink:after {
	background-image: linear-gradient(270deg, #AE3FA3 0%, #CF46D1 100%);
}

.card--orange:after {
	background-image: linear-gradient(270deg, #AE5A3F 0%, #D16746 100%);
}

.card:hover:after {
	opacity: 1;
}

.card:hover .card__button {
	border-color: #fff;
}

.card:hover .card__button--blue {
	background-color: #4587f7;
}

.card:hover .card__button--purple {
	background-color: #8a60f6;
}

.card:hover .card__button--gray {
	background-color: #3f3f3f;
}

.card:hover .card__button--green {
	background-color: #76c353;
}

.card:hover .card__button--dblue {
	background-color: #4858ac;
}

.card:hover .card__button--red {
	background-color: #ff7070;
}

.card:hover .card__button--cyan {
	background-color: #3fccea;
}

.card:hover .card__button--pink {
	background-color: #cf46d1;
}

.card:hover .card__button--orange {
	background-color: #d16746;
}

.about__grid {
	position: relative;
	display: grid;
	grid-template-areas: "text1 image1" "image2 text2";
	align-items: center;
	font-size: 18px;
	gap: 36px 12px;
	margin-bottom: 80px;
}

.about__title {
	position: relative;
	font-size: 48px;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	margin-bottom: 36px;
	margin-top: 20px;
	z-index: 1;
}

.about__subtitle {
	position: relative;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 36px;
	z-index: 1;
}

.about__subtitle--center {
	text-align: center;
	margin: auto;
}

.about__paragraph {
	position: relative;
	margin: 1em 0;
	z-index: 1;
}

.about__buttons {
	position: relative;
	margin-top: 25px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	z-index: 1;
}

.about__buttons--right {
	justify-content: right;
}

.about__ul {
	position: relative;
	z-index: 1;
	padding-left: 1em;
}

.about__li {
	list-style-type: initial;
	margin: 1em 0;
}

.about__text--2 {
	align-self: flex-end;
}

.about__image {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: relative;
	z-index: 1;
}

.about__image--1 {
	height: 350px;
	grid-area: image1;
	justify-self: center;
}

.about__image--2 {
	height: 325px;
	grid-area: image2;
}

.about__image img {
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	display: block;
	max-height: 100%;
}

.about__conveyor {
	position: relative;
	margin-bottom: 80px;
	margin-top: 20px;
}

.about__conveyor img {
	position: relative;
	z-index: 1;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
}

.about__cloud {
	z-index: 1;
	white-space: nowrap;
	position: absolute;
	padding: 6px 9px;
	border-radius: 12px;
	font-weight: 300;
}

.about__cloud--1,.about__cloud--3,.about__cloud--5 {
	background-color: #4587f7;
}

.about__cloud--2,.about__cloud--4 {
	background-color: #fff;
	color: #000;
}

.about__cloud--1 {
	top: 9%;
	left: 0px;
}

.about__cloud--2 {
	right: 51%;
	top: 37%;
}

.about__cloud--3 {
	right: 46%;
	top: 54%;
}

.about__cloud--4 {
	right: 15%;
	top: 25%;
}

.about__cloud--5 {
	right: 12%;
	top: 43%;
}

.about__end {
	position: relative;
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 90px;
	display: grid;
	grid-template-areas: "text1 image text2";
	grid-template-columns: 1fr auto 1fr;
	gap: 20px 10px;
}

.about__image--3 {
	margin-top: 1em;
	height: 275px;
	grid-area: image;
}

.about__text--5 {
	text-align: right;
}

.about__glow--1,.about__glow--3 {
	--glow-size: 155px;
	top: 20%;
	left: 0%;
}

.about__glow--2,.about__glow--4 {
	--glow-size: 155px;
	right: 0%;
	bottom: 20%;
}

.about__glow--5 {
	--glow-size: 115px;
	left: 5%;
	bottom: 20%;
}

.about__glow--6 {
	--glow-size: 115px;
	right: 5%;
	bottom: 20%;
}

@media screen and (max-width: 1000px) {
	.about__end {
		grid-template-columns: 1fr;
		grid-template-areas: "text1" "text2";
	}

	.about__image--3 {
		display: none;
	}

	.about__text--4,.about__text--5 {
		max-width: 600px;
	}

	.about__text--5 {
		margin-left: auto;
	}
}

@media screen and (max-width: 850px) {
	.about__subtitle {
		text-align: left;
	}

	.about__subtitle--center {
		text-align: center;
	}

	.about__content {
		font-weight: 300;
	}

	.about__grid {
		grid-template-areas: "image2" "text1" "text2";
		align-items: center;
	}

	.about__end {
		text-align: center;
	}

	.about__end p {
		text-align: center;
	}

	.about__buttons {
		justify-content: center;
	}

	.about__buttons--right {
		justify-content: center;
	}

	.about__image {
		width: 100%;
	}

	.about__image--1 {
		display: none;
	}

	.about__image--2 {
		margin-bottom: -72px;
	}

	.about__image img {
		margin: auto;
	}

	.about__cloud {
		font-size: 12px;
		padding: 3px 6px;
	}

	.about__cloud--1 {
		transform: translate(0px, -5px);
	}

	.about__cloud--2 {
		transform: translate(20%, -15px);
	}

	.about__cloud--3 {
		transform: translate(50%, 0px);
	}

	.about__cloud--4 {
		transform: translate(10%, -15px);
	}

	.about__cloud--5 {
		transform: translate(25%, -5px);
	}

	.about__glow--1,.about__glow--2 {
		--glow-size: 120px;
	}

	.about__glow--3,.about__glow--4,.about__glow--5,.about__glow--6 {
		--glow-size: 100px;
	}
}

.oferta {
	padding: 32px 0;
	font-size: 18px;
	line-height: 22px;
	opacity: .95;
}

.oferta *>p {
	display: block;
	margin: 24px 0;
}

.oferta *>h3 {
	display: block;
	font-weight: 700;
	font-size: 24px;
	margin-bottom: 20px;
	font-family: 'Roboto', sans-serif;
}

.oferta *>h4 {
	display: block;
	margin: 48px 0;
}

.oferta *>ul {
	margin: 12px 0;
	list-style-type: "- ";
}

.oferta *>ul>li {
	list-style-position: inside;
}



nav{
background: transparent; /* Задаем основной фон меню */
padding: 0 3%; /* Задаем внутренние отступы */
}

nav ul {
list-style: none; /* Убираем маркер для элементов списка */
}

nav ul li {
display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */
}

nav ul li a {
display:block; /* Настраиваем оформление пунктов меню */
padding: 15px 20px;
font-size: .9em;
color: #eee;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-top: 1px solid #8e44ad;
}

nav ul li:hover {
background: #8e44ad; /* Меняем фон пункта меню при наведении указателя мыши */
}

nav ul li ul {
display: none; /* Прячем пункты выпадающего блока меню */
position:absolute;
background: #334; /* Задаем фон выпадающего блока меню */
}

nav ul li:hover ul {
display:block; /* Отображаем подменю при наведении мыши */
}

nav ul li ul li {
display:block; /* Выстраиваем по вертикали пункты выпадающего меню */
}