*{
	transition: .4s ease;
	font-family: "Unbounded", sans-serif;
	color: #1A1A1E;
}
body{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
#root{
	display: flex;
	flex-direction: column;
	position: relative;
	margin-bottom: 3.5vw;
}

#root .show-modal{
	visibility: visible !important;
	opacity: 1 !important;
}
#root .modal-window-container{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	visibility: hidden;
	opacity: 0;
}
#root .modal-window-container .modal-cover{
	position: absolute;
	width: 100vw;
	height: 100vh;
	background: black;
	opacity: .5;
}
#root .modal-window-container form{
	display: flex;
	flex-direction: column;
	padding: 1.25vw;
	width: 18.3vw;
	position: relative;
	background: white;
	border-radius: 1vw;
}
#root .modal-window-container form .xmark-button{
	position: absolute;
	right: 0.8vw;
	font-size: 0.9vw;
	background: transparent;
	border: none;
	cursor: pointer;
}
#root .modal-window-container form .xmark-button i{
	color: #98A2B3;
	font-weight: 600;
}
#root .modal-window-container form .status-indicator{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2vw;
	height: 2vw;
	font-size: 1vw;
	color: #079455;
	background: #dbfae6;
	border-radius: 100px;
	margin-bottom: 0.8vw;
}
#root .modal-window-container form .status-indicator.failed{
	color: #D92D20;
	background: #FFA598;
}
#root .modal-window-container form span{
	font-size: 0.9vw;
	color: #1A1A1E;
	line-height: 1.45vw;
}
#root .modal-window-container form small{
	font-size: 0.7vw;
	line-height: 1vw;
	color: #6C737F;
}
#root .modal-window-container form .primary-button{
	margin-top: 1.6vw;
	padding: 0.5vw 0.8vw;
	background: #4BA9EF;
	color: white;
	border: none;
	border-radius: 0.8vw;
	font-size: 0.8vw;
	font-weight: 600;
	width: fit-content;
	align-self: end;
	cursor: pointer;
}

#root nav{
	display: flex;
	align-items: center;
	margin: 1.5vw 4.1vw;
}
#root nav img{
	height: 2.6vw;
}
#root nav a{
	font-size: 0.8vw;
	text-decoration: none;
	margin-left: auto;
}
#root nav a i{
	color: #4BA9EF;
}
#root nav .navbar-trailing{
	margin-left: 5.5vw;
	display: flex;
	align-items: center;
	gap: 0.8vw;
}
#root nav .navbar-trailing button{
	display: flex;
	align-items: center;
	padding: 0.7vw 1vw;
	gap: 0.5vw;
	font-size: 0.72vw;
	background: transparent;
	border: 1px solid #21D69A;
	border-radius: 0.8vw;
	cursor: pointer;
}
#root nav .navbar-trailing button img{
	width: 1.25vw;
	height: 1.25vw;
	aspect-ratio: 1/1;
}

#root .home-container{
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	margin: 0 4.1vw;
	margin-top: 1.5vw;
	background: #EEF2F6;
	border-radius: 2vw;
}
#root .home-container .home-container-section{
	display: flex;
	flex-direction: column;
	padding: 4.4vw 2.6vw;
}
#root .home-container .home-container-section h1{
	font-size: 3.1vw;
	font-weight: medium;
	margin: 0;
	margin-top: auto;
	margin-bottom: 1.6vw;
}
#root .home-container .home-container-section span{
	font-size: 0.9vw;
	line-height: 170%;
	margin-bottom: 2.6vw;
}
#root .home-container .home-container-section button{
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 1vw;
	font-size: 0.9vw;
	color: white;
	background: #4BA9EF;
	padding: 1vw 0.8vw;
	width: fit-content;
	border: none;
	border-radius: 0.8vw;
	cursor: pointer;
}
#root .home-container .home-container-section button i{
	color: white;
}
#root .home-container .home-illustration-container{
	padding: 0;
}
#root .home-container .home-illustration-container .home-mobile-illustration{
	display: none;
}
#root .home-container .home-illustration-container img{
	height: 35vw;
	width: fit-content;
	object-fit: cover;
}

#root .about-container{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 4.1vw;
	margin-top: 6.25vw;
	background: #D8ECFB;
	border-radius: 2vw;
}
#root .about-container .about-container-side{
	display: flex;
	flex-direction: column;
	padding: 4.3vw 3.1vw;
}
#root .about-container .about-container-side img{
	height: 25vw;
}
#root .about-container .about-container-side h1{
	font-size: 2.3vw;
	margin: 0;
	margin-bottom: 1.6vw;
}
#root .about-container .about-container-side span{
	font-size: 1.1vw;
	line-height: 170%;
	margin-bottom: 1vw;
}
#root .about-container .about-container-side .remark{
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.8vw;
}
#root .about-container .about-container-side .remark i{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6vw;
	height: 2.6vw;
	aspect-ratio: 1/1;
	font-size: 1.8vw;
	background: #21D69A;
	color: white;
	border-radius: 100px;
}
#root .about-container .about-container-side .remark small{
	font-size: 1.25vw;
	line-height: 170%;
	font-weight: 600;
}
#root .roadmap-wrapper{
	display: flex;
	flex-direction: column;
	margin: 0 4.1vw;
	margin-top: 6.25vw;
	gap: 3.1vw;
}
#root .roadmap-wrapper h1{
	font-size: 2.3vw;
	margin: 0;
	text-align: center;
}
#root .roadmap-wrapper .roadmap{
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: relative;
}
#root .roadmap-wrapper .roadmap progress{
	position: absolute;
	bottom: 4.2vw;
	width: 80%;
	height: 2px;
	border: none;
	border-radius: 0;
	background: #EAECF0;
}
#root .roadmap-wrapper .roadmap progress::-moz-progress-bar,
#root .roadmap-wrapper .roadmap progress::-webkit-progress-value{
	background: #21D69A;
}
#root .roadmap-wrapper .roadmap .roadmap-card{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 12.5vw;
	position: relative;
}
#root .roadmap-wrapper .roadmap .roadmap-card i{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1vw;
	width: 2vw;
	height: 2vw;
	background: #EEF2F6;
	color: #6C737F;
	border-radius: 100px;
	margin-bottom: 0.8vw;
}
#root .roadmap-wrapper .roadmap .roadmap-card i.completed{
	background: #21D69A;
	color: white;
}
#root .roadmap-wrapper .roadmap .roadmap-card div{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#root .roadmap-wrapper .roadmap .roadmap-card span{
	font-size: 0.8vw;
	line-height: 1.25vw;
	font-weight: 600;
}
#root .roadmap-wrapper .roadmap .roadmap-card small{
	font-size: .6vw;
	line-height: 1.25vw;
	color: #9DA4AE;
}

#root .contacts-container{
	display: flex;
	flex-direction: column;
	margin-top: 6.25vw;
	background: #EEF2F6;
	padding: 2.6vw 0;
}
#root .contacts-container form{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 36vw;
	margin: 0 auto;
}
#root .contacts-container h1{
	font-size: 1.87vw;
	margin: 0;
	margin-bottom: 0.8vw;
}
#root .contacts-container span{
	font-size: 0.9vw;
	line-height: 150%;
}
#root .contacts-container .form-container{
	display: flex;
	flex-direction: column;
	margin-top: 1.6vw;
	gap: 1.25vw;
}
#root .contacts-container .form-container .form-group{
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 0.4vw;
}
#root .contacts-container .form-container .form-group label{
	font-size: 0.8vw;
	color: #6C737F;
}
#root .contacts-container .form-container .form-group input{
	width: 24vw;
	padding: 0.8vw 0.62vw;
	font-size: 0.62vw;
	background: white;
	border: none;
	border-radius: 0.8vw;
}
#root .contacts-container .form-container .form-group input:focus{
	outline-color: #4BA9EF;
}
#root .contacts-container .form-container .form-group button{
	margin-top: 0.62vw;
	background: #4BA9EF;
	border: none;
	border-radius: 0.8vw;
	padding: 1vw 3.4vw;
	align-self: center;
	cursor: pointer;
}
#root .contacts-container .form-container .form-group button span{
	color: white;
	font-size: 0.8vw;
	font-weight: 600;
}

#root .downloads-container{
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	margin: 0 4.1vw;
	margin-top: 6.25vw;
	background: #D8ECFB;
	border-radius: 2vw;
}
#root .downloads-container .downloads-container-side{
	display: flex;
	flex-direction: column;
	padding: 0 2.6vw;
}
#root .downloads-container .downloads-container-side img{
	height: 30vw;
}
#root .downloads-container .downloads-container-side img.logo-on-phone-mobile{
	display: none;
}
#root .downloads-container .downloads-container-side h1{
	font-size: 2.3vw;
	margin: 0;
	margin-top: 4.3vw;
	margin-bottom: 0.5vw;
}
#root .downloads-container .downloads-container-side span{
	font-size: 1.25vw;
	line-height: 160%;
}
#root .downloads-container .downloads-container-side .download-links{
	margin-top: 2.3vw;
	display: flex;
	align-items: center;
	gap: 1.1vw;
}
#root .downloads-container .downloads-container-side .download-links img{
	width: 7.8vw;
	height: 7.8vw;
}
#root .downloads-container .downloads-container-side .download-links .download-links-stores{
	display: flex;
	flex-direction: column;
	gap: 0.8vw;
}
#root .downloads-container .downloads-container-side .download-links .download-links-stores a{
	display: flex;
	align-items: center;
	gap: 0.5vw;
	text-decoration: none;
	padding: 0.62vw 1vw;
	border: 1px solid #21D69A;
	border-radius: 0.8vw;
	background: #e0f0fc;
}
#root .downloads-container .downloads-container-side .download-links .download-links-stores a img{
	width: 1.25vw;
	height: 1.25vw;
}

#root .footer-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0 4.1vw;
	margin-top: 6.25vw;
	background: #EEF2F6;
	border-radius: 2vw;
	padding: 2.6vw 0;
	gap: 1.6vw;
}
#root .footer-wrapper img{
	height: 2.6vw;
}
#root .footer-wrapper .footer-menu{
	display: flex;
	align-items: center;
	gap: 1.6vw;
}
#root .footer-wrapper .footer-menu a{
	font-size: 0.8vw;
	font-weight: 500;
	line-height: 1.25vw;
	text-decoration: none;
}
#root .footer-wrapper .footer-meta{
	display: flex;
	align-items: center;
	gap: 1.6vw;
}
#root .footer-wrapper .footer-meta a{
	font-size: 0.8vw;
	line-height: 1.25vw;
	font-weight: 500;
	text-decoration: none;
}
#root .footer-wrapper .footer-meta a i{
	color: #4BA9EF;
}
#root .footer-wrapper .footer-meta .footer-meta-socials{
	display: flex;
	align-items: center;
	gap: 0.8vw;
}
#root .footer-wrapper .footer-meta .footer-meta-socials .fab{
	font-size: 1.25vw;
}