:root {
	--font-outfit: "Outfit", sans-serif;
	--font-rethink: "Rethink Sans", sans-serif;
	--font-rubik: "Rubik", sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-outfit);
}

html {
	scroll-behavior: smooth;
}

body {
	background: #000c4e;
}

.mobile-menu {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	left: -100%;
	transition: left 0.3s ease;
	z-index: 2;
}

.mobile-menu .overlay {
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #001cb4 0%, #000c4e 100%);
	padding: 26px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 37px;
}

.mobile-menu .overlay .close-icon {
	margin-left: auto;
	cursor: pointer;
	width: 20px;
	height: 20px;
}

.mobile-menu .overlay ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 49px 0;
}

.mobile-menu .overlay ul li {
	list-style: none;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-menu .overlay ul li a {
	text-decoration: none;
	color: #fafafa;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	padding: 10px 20px;
	transition: all 400ms ease;
}

.mobile-menu .overlay ul li .active {
	border-radius: 100px;
	border: 1px solid #fff;
	background: #000;
}

.mobile-menu .overlay ul li a:hover {
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.6);
}

.mobile-menu.active {
	left: 0;
}

header {
	padding: 0 16px;
}

header nav {
	max-width: 1096px;
	width: 100%;
	margin: 0 auto;
	height: 92px;
	display: flex;
	align-items: center;
	gap: 89px;
}

header nav a {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

header nav a img {
	width: 149px;
	height: 42px;
}

header nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

header nav ul li {
	list-style: none;
}

header nav ul li a {
	text-decoration: none;
	color: #fafafa;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	padding: 10px 20px;
	transition: all 400ms ease;
}

header nav ul li .active {
	border-radius: 100px;
	border: 1px solid #fff;
	background: #000;
}

header nav ul li a:not(.active):hover {
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.6);
}

header nav .menu-icon {
	display: none;
	cursor: pointer;
	width: 30px;
	height: 30px;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

main .hero {
	width: 100%;
	height: 443px;
	background: linear-gradient(90deg, #000c4e 0%, #001cb4 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
}

main .hero .container {
	max-width: 1096px;
	width: 100%;
	height: 347px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

main .hero .container .hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 629px;
	width: 100%;
	gap: 12px;
}

main .hero .container .hero__content h1 {
	color: #fff;
	font-family: var(--font-rethink);
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: 44px;
}

main .hero .container .hero__content p {
	color: #fff;
	font-family: var(--font-rethink);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

main .hero .container img {
	width: 369px;
	height: 350px;
	position: absolute;
	right: 0;
}

main .cards {
	max-width: 980px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
	gap: 26px;
}

main .cards .card__container {
	position: relative;
	width: 916px;
	height: 167px;
}

main .cards .card__container .able {
	position: absolute;
	left: 0px;
	top: -40px;
	min-width: 269px;
	width: fit-content;
	height: 53px;
	display: flex;
	justify-content: center;
	white-space: nowrap;
	color: #fff;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	padding: 9px 9px 0;
	border-radius: 12px 12px 0px 0px;
	z-index: 0;
}

main .cards .card__container .card {
	width: 100%;
	height: 100%;
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: #fff;
	padding: 16px;
	z-index: 1;
	position: relative;
	transition: all 0.4s ease-in-out;
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	padding: 4px;
	background: linear-gradient(0deg, #F9BBFF 0%, #9becff 50%, #fff8c0 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	z-index: 0;
	pointer-events: none;
}

main .cards .card__container .card .number {
	position: absolute;
	left: 16px;
	top: 18px;
	border-radius: 4px;
	background: #000c4e;
	display: flex;
	width: 30px;
	height: 30px;
	padding: 4px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-align: center;
	font-family: var(--font-rubik);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

main .cards .card__container .card .card__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 259px;
	z-index: 1;
}

main .cards .card__container .card .card__header img {
	height: 61px;
}

main .cards .card__container .card .card__header h2 {
	color: #000;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

main .cards .card__container .card .card__header .rtar {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

main .cards .card__container .card .card__header .rtar h3 {
	color: #000;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

main .cards .card__container .card .card__header .rtar .rsar {
	width: 140px;
	height: 28px;
	background-image: url("../images/grays.webp");
	background-size: 28px 28px;
	background-repeat: repeat-x;
	position: relative;
	display: inline-block;
	margin-bottom: 2px;
}

main .cards .card__container .card .card__header .rtar .rsar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 28px;
	background-image: url("../images/yellows.webp");
	background-size: 28px 28px;
	background-repeat: repeat-x;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="1"]::before {
	width: 28px;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="1.5"]::before {
	width: 42px;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="2"]::before {
	width: 56px;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="2.5"]::before {
	width: 70px;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="3"]::before {
	width: 84px;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="3.5"]::before {
	width: 98px;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="4"]::before {
	width: 112px;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="4.5"]::before {
	width: 126px;
}

main .cards .card__container .card .card__header .rtar .rsar[pics="5"]::before {
	width: 140px;
}

main .cards .card__container .card ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 341px;
}

main .cards .card__container .card ul li {
	display: flex;
	align-items: center;
	gap: 6px;
}

main .cards .card__container .card ul li img {
	display: flex;
	width: 20px;
	height: 20px;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1/1;
}

main .cards .card__container .card ul li p {
	color: #000;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

main .cards .card__container .card .card__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 27px;
	width: 244px;
}

main .cards .card__container .card .card__footer .rtar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

main .cards .card__container .card .card__footer .rtar h3 {
	color: #000;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

main .cards .card__container .card .card__footer .rtar .rsar {
	width: 140px;
	height: 28px;
	background-image: url("../images/grays.webp");
	background-size: 28px 28px;
	background-repeat: repeat-x;
	position: relative;
	display: inline-block;
	margin-bottom: 2px;
}

main .cards .card__container .card .card__footer .rtar .rsar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 28px;
	background-image: url("../images/yellows.webp");
	background-size: 28px 28px;
	background-repeat: repeat-x;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="1"]::before {
	width: 28px;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="1.5"]::before {
	width: 42px;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="2"]::before {
	width: 56px;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="2.5"]::before {
	width: 70px;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="3"]::before {
	width: 84px;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="3.5"]::before {
	width: 98px;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="4"]::before {
	width: 112px;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="4.5"]::before {
	width: 126px;
}

main .cards .card__container .card .card__footer .rtar .rsar[pics="5"]::before {
	width: 140px;
}

main .cards .card__container .card .card__footer .button {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 12px;
	background: radial-gradient(187.3% 70.71% at 50% 50%,
			#a858e4 21.15%,
			#590a96 100%);
	width: 244px;
	height: 56px;
	transition: all 0.4s ease-in-out;
	text-decoration: none;
}

main .cards .card__container .card .card__footer .button p {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

main .cards .card__container .card .card__footer .button img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

main .cards .card__container .card .card__footer .button:hover,
main .cards .card__container .card .card__footer .button:active {
	border-radius: 12px;
	background: radial-gradient(187.3% 70.71% at 50% 50%,
			#590a96 0%,
			#a858e4 78.85%);
	transition: all 0.4s ease-in-out;
}

main .cards .card__container .card:hover {
	border-radius: 16px;
	background: #fff;
	box-shadow: 0px 9px 20px 0px rgba(249, 187, 255, 0.8);
}

main .cards .card__container:has(.able) {
	margin-top: 37px;
}

main .qr-generator {
	max-width: 1096px;
	width: calc(100% - 32px);
	min-height: 602px;
	height: auto;
	padding: 24px 40px;
	border-radius: 24px;
	background: rgba(1, 28, 180, 0.2);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	margin: 48px 0;
}

main .qr-generator .qr-generator--top {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

main .qr-generator .qr-generator--top h2 {
	color: #fff;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: 42px;
}

main .qr-generator .qr-generator--top p {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

main .qr-generator .qr-generator--bottom {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

main .qr-generator .qr-generator--bottom>p {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 26px;
}

main .qr-generator .qr-generator--bottom .qr-generator__content {
	display: flex;
	flex-direction: column;
}

main .qr-generator .qr-generator--bottom .qr-generator__content p {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

main .qr-generator .qr-generator--bottom .qr-generator__content ul {
	margin-left: 25px;
}

main .qr-generator .qr-generator--bottom .qr-generator__content ul li {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

main .qr-generator .qr-generator--bottom .qr-generator__content h3 {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 26px;
}

main .qr-generator .qr-generator--bottom .qr-generator__content .text--spaced {
	margin-top: 26px;
}

main .about-us {
	max-width: 1096px;
	width: calc(100% - 32px);
	min-height: 938px;
	height: auto;
	display: flex;
	flex-direction: column;
	padding: 24px 40px;
	border-radius: 24px;
	background: rgba(1, 28, 180, 0.2);
	margin: 48px 0;
}

main .about-us .about-us__content__container {
	margin: 24px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

main .about-us .about-us__content {
	display: flex;
	flex-direction: column;
}

main .about-us .about-us__content h2 {
	color: #fff;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: 42px;
	margin-bottom: 12px;
}

main .about-us .about-us__content p {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

main .about-us .about-us__content .text--spaced {
	margin-top: 28px;
}

main .about-us .about-us__content h3 {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 26px;
	margin-bottom: 4px;
}

main .about-us .about-us__content ul {
	margin-left: 25px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

main .about-us .about-us__content ul li {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

main .contact-us {
	max-width: 1096px;
	width: calc(100% - 32px);
	min-height: 673px;
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	border-radius: 24px;
	background: rgba(1, 28, 180, 0.2);
	margin: 48px 0;
}

main .contact-us h2 {
	color: #fff;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: 42px;
}

main .contact-us form {
	max-width: 946px;
	width: 100%;
	min-height: 559px;
	height: auto;
	border-radius: 32px;
	background: #fff;
	box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
	padding: 32px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

main .contact-us form .input__group {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

main .contact-us form .input__group .able {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 24px;
}

main .contact-us form .input__group .able p {
	color: #131415;
	font-family: var(--font-outfit);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

main .contact-us form .input__group .able p span {
	color: #f01717;
	font-family: var(--font-outfit);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

main .contact-us form .input__group input {
	width: 100%;
	height: 56px;
	outline: none;
	border-radius: 8px;
	border: 1px solid #bcbcbc;
	background: #fff;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	color: #131415;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	padding: 12px 14px;
}

main .contact-us form .input__group input::placeholder {
	color: #bcbcbc;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

main .contact-us form .input__group>p {
	color: #f01717;
	font-family: var(--font-outfit);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	display: none;
}

main .contact-us form .input__row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 53px;
	width: 100%;
}

main .contact-us form textarea {
	width: 100%;
	height: 155px;
	padding: 18px 14px 12px;
	color: #131415;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	border-radius: 8px;
	border: 1px solid #bcbcbc;
	background: #fff;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	outline: none;
	margin-top: 6px;
	resize: none;
}

main .contact-us form textarea::placeholder {
	color: #bcbcbc;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

main .contact-us form .form-submit__btn {
	width: 183px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	border-radius: 12px;
	border: 1px solid #bcbcbc;
	background: #fff;
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	color: #bcbcbc;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
}

main .contact-us form .form-submitted__btn {
	width: 183px;
	height: 48px;
	display: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	border-radius: 12px;
	background: linear-gradient(180deg, #181567 -16.67%, #1812b6 100%);
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
}

footer {
	width: 100%;
	background: #000;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
}

footer .container {
	max-width: 1096px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer .container ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
}

footer .container ul li {
	list-style: none;
}

footer .container ul li a {
	color: #fff;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	padding: 0 10px;
}

footer .container p {
	color: #bababa;
	font-family: var(--font-outfit);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	padding: 0 10px;
}

.cookies__box {
	position: fixed;
	max-width: 359px;
	width: 100%;
	min-height: 108px;
	height: auto;
	bottom: 31px;
	right: 143px;
	display: none;
	gap: 8px;
	flex-direction: column;
	padding: 12px 16px;
	justify-content: center;
	z-index: 5;
	border-radius: 16px;
	outline: 1px solid #00f665;
	background: #fff;
	box-shadow: -14px 14px 41.9px 0px rgba(0, 0, 0, 0.15);
}

.cookies__box .cookies__content {
	display: flex;
	align-items: center;
	width: 100%;
}

.cookies__box .cookies__content p {
	color: #4b5666;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}

.cookies__box .buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cookies__box .buttons button {
	width: 100%;
	display: flex;
	padding: 10px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 12px;
	border: none;
	height: 40px;
}

.cookies__box .buttons .refuser {
	border: 1px solid #bcbcbc;
	color: #131415;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	background: none;

	&:hover,
	&:active {
		border: 1px solid #bcbcbc;
		background: #bcbcbc;
	}
}

.cookies__box .buttons .accepter {
	border: 1px solid #00f665;
	background: linear-gradient(90deg, #0ebe57 0%, #02b14a 100%);
	color: #fff;
	text-align: center;
	font-family: var(--font-outfit);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;

	&:hover,
	&:active {
		border-radius: 12px;
		border: 1px solid #00f665;
		background: linear-gradient(90deg, #008738 0%, #0d8b41 100%);
	}
}

.up {
	position: fixed;
	z-index: 2;
	right: 49px;
	bottom: 8px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 2px solid #fff;
	background: linear-gradient(90deg, #1f1b7f 0%, #302acd 100%);
	box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
	cursor: pointer;
}

.up img {
	width: 24px;
	height: 24px;
}

@media screen and (max-width: 1005px) {
	main .hero .container img {
		opacity: 0.2;
	}
}

@media screen and (max-width: 979px) {
	main .cards {
		gap: 32px;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
	}

	main .cards .card__container {
		width: 343px;
		height: 395px;
	}

	main .cards .card__container .able {
		left: 50%;
		transform: translateX(-50%);
	}

	main .cards .card__container .card {
		flex-direction: column;
		padding: 8px 12px 16px;
		gap: 0px;
	}

	main .cards .card__container .card .number {
		left: 12px;
		top: 12px;
	}

	main .cards .card__container .card .card__header {
		width: 100%;
		gap: 13px;
	}

	main .cards .card__container .card .card__header img {
		margin-bottom: 3px;
		margin-top: 13px;
	}

	main .cards .card__container .card .card__header h2 {
		margin-bottom: 1px;
	}

	main .cards .card__container .card .card__header .rtar {
		display: flex;
		margin-bottom: 3px;
	}

	main .cards .card__container .card ul {
		width: 100%;
		margin: 16px 0 8px;
	}

	main .cards .card__container .card .card__footer {
		width: 100%;
		padding: 16px 0 0 0;
	}

	main .cards .card__container .card .card__footer .rtar {
		display: none;
	}

	main .cards .card__container .card .card__footer .button {
		width: 100%;
	}
}

@media screen and (max-width: 850px) {
	header nav {
		height: 69px;
		justify-content: space-between;
	}

	header nav a img {
		width: 117px;
		height: 33px;
	}

	header nav ul {
		display: none;
	}

	header nav .menu-icon {
		display: block;
	}
}

@media screen and (max-width: 615px) {
	main .hero {
		padding: 16px;
		min-height: 183px;
		height: auto;
	}

	main .hero .container {
		width: 100%;
		height: 100%;
	}

	main .hero .container img {
		width: 179.414px;
		height: 170px;
	}

	main .hero .container .hero__content {
		gap: 8px;
	}

	main .hero .container .hero__content h1 {
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 28px;
	}

	main .hero .container .hero__content p {
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 28px;
	}

	main .cards {
		padding: 16px 16px 32px;
	}

	main .cards .card__container {
		max-width: 343px;
		width: 100%;
		min-height: 395px;
		height: auto;
	}

	main .qr-generator {
		gap: 40px;
		margin: 16px 0;
		padding: 32px 40px 40px;
	}

	main .qr-generator .qr-generator--top h2 {
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 28px;
	}

	main .qr-generator .qr-generator--top p {
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
	}

	main .qr-generator .qr-generator--bottom>p {
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 22px;
	}

	main .qr-generator .qr-generator--bottom .qr-generator__content h3 {
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: 22px;
	}

	main .qr-generator .qr-generator--bottom .qr-generator__content p {
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
	}

	main .qr-generator .qr-generator--bottom .qr-generator__content ul li {
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
	}

	main .about-us {
		margin: 16px 0;
		padding: 16px 24px;
	}

	main .about-us .about-us__content__container {
		margin: 24px 0 0 0;
	}

	main .about-us .about-us__content h2 {
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 28px;
	}

	main .about-us .about-us__content h3 {
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 22px;
	}

	main .about-us .about-us__content p {
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
	}

	main .about-us .about-us__content ul li {
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
	}

	main .contact-us {
		margin: 16px 0;
		padding: 16px 24px;
	}

	main .contact-us form {
		gap: 38px;
	}

	main .contact-us h2 {
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 28px;
	}

	main .contact-us form .input__row {
		flex-direction: column;
		gap: 38px;
	}

	main .contact-us form .input__group:has(textarea) {
		margin-top: -16px;
	}

	main .contact-us form .form-submit__btn,
	main .contact-us form .form-submitted__btn {
		width: 100%;
		margin-top: -8px;
	}

	footer {
		height: 76px;
	}

	footer .container {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	footer .container ul li a {
		padding: 0;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 22px;
		letter-spacing: -0.28px;
	}

	footer .container p {
		font-size: 10px;
		font-style: normal;
		font-weight: 400;
		line-height: 18px;
		padding: 0;
	}

	.up {
		right: 16px;
		bottom: 10px;
	}

	.cookies__box {
		right: 0;
		left: 50%;
		transform: translateX(-50%);
		bottom: 3px;
		width: calc(100% - 16px);
	}
}

/*privacy-terms page*/
main .privacy {
	border-radius: 24px;
	background: rgba(1, 28, 180, 0.2);
	padding: 24px 40px 48px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1096px;
	width: calc(100% - 32px);
	margin: 48px 0;
}

main .privacy__header {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

main .privacy__header h2 {
	color: #fff;
	text-align: center;
	font-family: var(--font-rethink);
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: 42px;
}

main .privacy__header p {
	color: #fff;
	font-family: var(--font-rethink);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

main .privacy__footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

main .privacy__footer .privacy__content {
	display: flex;
	flex-direction: column;
}

main .privacy__footer .privacy__content h2 {
	color: #fff;
	font-family: var(--font-rubik);
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 26px;
	margin-bottom: 4px;
}

main .privacy__footer .privacy__content .text--spaced {
	margin-top: 4px;
}

main .privacy__footer .privacy__content p {
	color: #fff;
	font-family: var(--font-rubik);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

main .privacy__footer .privacy__content .text--margined {
	margin-bottom: 26px;
}

main .privacy__footer .privacy__content ul {
	display: flex;
	flex-direction: column;
	margin-left: 25px;
}

main .privacy__footer .privacy__content ul li {
	color: #fff;
	font-family: var(--font-rubik);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

@media screen and (max-width: 600px) {
	main .privacy {
		margin: 16px 0;
		gap: 40px;
		padding: 32px 40px 40px;
	}

	main .privacy .privacy__header h2 {
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 28px;
	}

	main .privacy .privacy__header p {
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
	}

	main .privacy .privacy__footer .privacy__content h2 {
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 22px;
	}

	main .privacy .privacy__footer .privacy__content .text--spaced {
		margin-top: 12px;
	}

	main .privacy .privacy__footer .privacy__content p {
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
	}

	main .privacy .privacy__footer .privacy__content ul li {
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
	}

	main .privacy-terms {
		padding: 16px 24px 24px;
	}

	main .privacy-terms .privacy__footer {
		gap: 24px;
	}

	main .privacy-terms .privacy__footer .privacy__content h2 {
		margin-bottom: 8px;
	}
}