@font-face {
	font-family: sf-ui;
	src: url(../fonts/sf-ui/sf-ui-display-light.otf);
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: sf-ui;
	src: url(../fonts/sf-ui/sf-ui-display-medium.otf);
	font-weight: 500;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: sf-ui;
	src: url(../fonts/sf-ui/sf-ui-display-semibold.otf);
	font-weight: 700;
	font-style: normal;
	font-display: fallback;
}
@font-face {
	font-family: sf-ui;
	src: url(../fonts/sf-ui/sf-ui-display-bold.otf);
	font-weight: 900;
	font-style: normal;
	font-display: fallback;
}
/*------------------*/
/*------------------*/
  *,
::after,
::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	outline:none;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
/*---------var---------*/
	--main-color: #fff;
	--decor-color: #0066FF;
	--decor-color-opacity: #f2f7ff;
	--decor-color-border: #0066ff36;
	--decor-circle: #0066ff0a;
	--color-text: #00000099;
	--color-line: #f8f8f8;
	--border-radius: 15px;
}
@media (max-width:991.98px) {
	*,
	::after,
	::before{
		--decor-color-opacity: #d2e3fe;
	}
}
/*------------------*/
::-webkit-scrollbar {
	width: 12px;
	background: transparent;
}
::-webkit-scrollbar-thumb { 
	background: var(--decor-color-opacity);
	border-width: 3px;
	border-style: solid;
	border-color: var(--main-color);
	min-height: 100px;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { 
	background: var(--decor-color);
}
/*------------------*/
img,
svg {
	display: block;
	width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
ul, li, ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
/*------------------*/
html,
body {
	background: var(--back-color);
	font-family: 'sf-ui', sans-serif;
	color: #000;
	font-size: 20px;
	overflow-x: hidden;
}
/*------------------*/
input[type=text],
input[type=submit],
input[type=email],
input[type=tel],
input[type=number] {
	font-size: 20px;
	font-weight: 700;
	font-family: 'sf-ui';
	color: var(--main-color);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input::placeholder{
	font-size: 20px;
	font-weight: normal;
	color: #ffffff63;
	font-family: 'sf-ui';
}
/*------------------*/
/*------------------*/
.wrapper {
	width: 100%;
	min-width: 320px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.main{
	flex: 1 1 auto;
}
.container {
	position: relative;
	max-width: 1270px;
	padding: 0 15px;
	margin: 0 auto;
}
.hidden{
	display: none;
}
/*-------------*/
/*-------------*/
.header__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 40px 0;
}
.header__wrap::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 10%;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px 200px 500px var(--decor-circle);
    z-index: -1;
}
.header__logo {
	flex: 0 0 195px;
	margin-right: 95px;
	position: relative;
    z-index: 11;
}
.header__menu{
	flex: 0 1 520px;
}
.header__menu-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header__menu-link {
	font-size: 18px;
	text-transform: uppercase;
	color:#000000b3;
	transition: .3s;
	letter-spacing: 3px;
	font-weight: 500;
}
.header__menu-link:hover {
	color: var(--decor-color);
}
.header__burger{
	display: none;
}
@media (max-width: 767.98px) {
	.header__burger{
	  display: block;
	  position: relative;
	  flex: 0 0 32px;
	  height: 20px;
	  z-index: 20;
	}
	.header__burger span,
	.header__burger::before,
	.header__burger::after{
	  left: 0;
	  position: absolute;
	  height: 10%;
	  width: 100%;
	  background-color: var(--decor-color);
	  transition: all .3s ease 0s;
	}
	.header__burger::before,
	.header__burger::after{
	  content: '';
	}
	.header__burger::before{
	  top: 0
	}
	.header__burger::after{
	  bottom: 0;
	}
	.header__burger span{
	  top: 50%;
	  transform: scale(1) translate(0, -50%);
	}
	body._burger .header__burger span{
	  transform: scale(0) translate(0, -50%);
	}
	body._burger  .header__burger::before{
	  top: 50%;
	  transform: rotate(-45deg) translate(0, -50%);
	}
	body._burger  .header__burger::after{
	  bottom: 50%;
	  transform: rotate(45deg) translate(0, 50%);
	}
}
/*-----------------*/
@media (max-width:991.98px) {
	.header__logo {
		margin-right: 30px;
	}
	.header__menu{
		flex: 0 1 450px;
	}
}
@media (max-width:767.98px) {
	.header__wrap {
		padding: 20px 0;
	}
	.header__menu{
		flex: 0 0 100%;
		left: -120%;
		top: 0;
		transition: .3s;
		position: absolute;
		background: #fff;
	}
	.header__menu{
		flex: 0 0 100%;
		left: -120%;
		width: 100%;
		padding: 90px 50px 30px;
		z-index: 10;
		top: 0;
		transition: .3s;
		position: absolute;
		background: #fff;
	}
	._burger .header__menu{
		left: 0;
	}
}
@media (max-width:767.98px) {
	.header__wrap {
		padding: 10px 0;
	}
	.header__menu-list {
		display: block;
	}
	.header__menu-item{
		position: relative;
		padding-left: 20px;
		margin: 20px;
	}
	.header__menu-item::before{
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		border-width: 5px 5px 5px 5px;
		border-color: #00000000 #00000000 #00000000 var(--decor-color);
		border-style: solid;
	}
}
/*-------------*/
/*-------------*/
.main__section{
	padding: 80px 0;
}
.main__h1 {
	font-size: 96px;
	font-weight: 900;
	text-align: center;
}
.main__h1 span {
	color: var(--decor-color);
}
.main__btn {
	font-size: 22px;
	padding: 30px 61px;
	display: inline-block;
	color: var(--decor-color);
	border-radius:  var(--border-radius);
	border: 1px solid var(--decor-color-border);
	background: var(--decor-color-opacity);
	transition: .3s;
	cursor: pointer;
}
.main__btn:hover {
	color: var(--main-color);
	background: var(--decor-color);
}
.main__description{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 70px;
}
.main__h2 {
	flex: 1 1 calc(45% - 75px);
	font-size: 64px;
	font-weight: 900;
	margin: 0 15px 0 0;
}
.main__text{
	flex: 0 0 calc(55% - 75px);
	line-height: 36px;
	color: var(--color-text);
}

@media (max-width:991.98px) {
	.main__section {
		padding: 40px 0;
	}
}
@media (max-width:767.98px) {
	.main__section {
		padding: 30px 0;
	}
	.main__h1 {
		font-size: 40px;
	}
	.main__h2 {
		flex: 1 1 calc(45% - 15px);
		font-size: 34px;
	}
	.main__text{
		flex: 0 0 calc(55% - 15px);
		line-height: 25px;
	}
	.main__description{
		margin-bottom: 20px;
	}
}
@media (max-width:479.98px) {
	.main__h2 {
		flex: 1 1 100%;
		margin: 0 0 15px 0;
	}
	.main__text{
		flex: 1 1 100%;
	}
}
/*-------------*/
/*-------------*/
.welcome {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.welcome::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    top: 5%;
    right: -30%;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px 200px 500px var(--decor-circle);
    z-index: -1;
}
.welcome__text{
	text-transform: uppercase;
	color: var(--decor-color);
	text-align: center;
	display: block;
	margin-bottom: 20px;
}
.welcome__background {
	position: relative;
	width: 100%;
	padding-bottom: 28.23%;
	margin: 74px 0 69px 0;
}
.welcome__car {
	transition: .3s;
}
.welcome__car--1 {
	position: absolute;
	width: 45.81%;
    padding-bottom: 18.23%;
	bottom: 14.29%;
	z-index: 10;
	background: 0 0 / contain no-repeat url(../../../img/back/1.png);
	transition: .4s  ease 1s;
	visibility: hidden;
	opacity: 0;
	left: 50%;
}
.welcome__car--1._active{
	visibility: visible;
	opacity: 1;
	left: 0;
}
.welcome__car--2 {
	position: absolute;
	width: 53.34%;
    padding-bottom: 26.29%;
	left: 50%;
	transform: translate(-50%, -100%);
	z-index: 20;
	background: 0 0 / contain no-repeat url(../../../img/back/2.png);
	transition: .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition-delay: .6s;
	visibility: hidden;
	opacity: 0;
	bottom: 0;
}
.welcome__car--2._active{
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
}
.welcome__car--3 {
	position: absolute;
	width: 42.1%;
    padding-bottom: 17.18%;
	bottom: 17.14%;
	z-index: 10;
	background: 0 0 / contain no-repeat url(../../../img/back/3.png);
	transition: .4s  ease 1.5s;
	visibility: hidden;
	opacity: 0;
	right: 50%;
}
.welcome__car--3._active{
	visibility: visible;
	opacity: 1;
	right: 0;
}
@media (max-width:991.98px) {
	.welcome__text {
		margin-bottom: 5px;
    	font-size: 14px;
	}
}
@media (max-width:767.98px) {
	.welcome__text{
		display: none;
	}
	.welcome__background {
		margin: 40px 0 40px 0;
	}
}
/*-------------*/
/*-------------*/
.services{
	position: relative;
}
.services::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    top: 90%;
    left: -10%;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px 200px 500px var(--decor-circle);
    z-index: -1;
}
.services__list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: -20px;
}
.services__item {
	width: calc(33.33% - 10px);
	min-height: 200px;
	padding: 40px;
	border-radius:  var(--border-radius);
	background: var(--decor-color-opacity);
	margin-top: 20px;
	font-size: 24px;
	font-weight: 500;
	transition: .3s;
	cursor: pointer;
}
.services__item:hover{
	color: var(--main-color);
	background: var(--decor-color);
}
.services__item:hover .services__number{
	color: var(--decor-color-opacity);
}

.services__number{
	color: var(--decor-color);
	margin-bottom: 15px;
}
.services__text{
	line-height: 37px;
}
@media (max-width:767.98px) {
	.services__item {
		width: calc(50% - 10px);
		padding: 15px;
	}
	.services__text {
		font-size: 18px;
		line-height: 25px;
	}
}
@media (max-width:479.98px) {
	.services__item {
		width: 100%;
		min-height: auto;
	}
}
/*-------------*/
/*-------------*/
.problem__menu-item {
	display: flex;
    justify-content: space-between;
    align-items: center;
	flex-wrap: wrap;
	padding: 52px 0;
    border-bottom: 1px solid var(--decor-color-opacity);
}
.problem__menu-item:nth-child(2){
	padding: 0 0 52px 0;
}
.problem__menu-item:last-child{
	padding: 52px 0 0 0;
	border-bottom: none;
}
.problem__question {
	display: flex;
	margin-right: 15px;
}
.problem__question-icon{
	width: 35px;
	height: 35px;
	margin-right: 35px;
}
.problem__question-text{
	font-size: 30px;
	font-weight: 500;
	color: var(--decor-color);
}
.problem__answer{
	width: 300px;
	color: var(--color-text);
	line-height: 36px;
	margin: 0 200px 0 0;
}
@media (max-width:991.98px) {
	.problem__menu-item {
		padding: 20px 0;
	}
	.problem__menu-item:nth-child(2){
		padding: 0 0 20px 0;
	}
	.problem__menu-item:last-child{
		padding: 20px 0 0 0;
	}
	.problem__answer {
		margin: 0;
		line-height: 25px;
	}
}
@media (max-width:767.98px) {
	
	.problem__answer {
		margin: 15px 0 0 0;
		width: 100%;
	}
}
/*-------------*/
/*-------------*/
.price {
	position: relative;
}
.price::before {
    content: '';
    position: absolute;
    border-radius: 50%;
	top: 40%;
    right: -20%;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px 200px 500px var(--decor-circle);
    z-index: -1;
}
.price__body {
	display: flex;
	justify-content: space-between;
}
.price__img-decor {
	width: 598px;
	height: 571px;
	background: 0 0 / contain no-repeat url(../../../img/rectangle.jpg);
	margin-right: 20px;
}
.price__calculator {
	width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.price__item {
	display: flex;
    align-items: center;
	margin-bottom: 10px;
	cursor: pointer;
	transition: .3s;
}
.price__check-text{
	display: block;
	margin-left: 42px;
	color: var(--decor-color);
}
.price__check{
	display: block;
	flex: 0 0 61px;
    height: 61px;
    border-radius: var(--border-radius);
    background: var(--decor-color-opacity);
    background: center / 50% no-repeat url(../../../img/icon/check.svg) var(--decor-color-opacity);
}
.price__action {
	display: flex;
    flex-wrap: wrap;
}
.price__value {
	width: 220px;
	color: #000!important;
    font-size: 22px;
    border: 1px solid #f8f8f8;
    border-radius: var(--border-radius);
    margin-right: 22px;
    text-align: center;
	font-weight: 700;
	padding: 30px 61px;
}
@media (max-width:991.98px) {
	.price__img-decor {
		display: none;
	}
}
@media (max-width:767.98px) {
	.price__calculator {
		width: 100%;
	}
	.price__check{
		flex: 0 0 40px;
		height: 40px;
	}
	.price__value {
		margin: 0 15px 0 0;
	}
}
@media (max-width:479.98px) {
	.price__action {
		justify-content: center;
	}
	.price__value {
		padding: 20px;
		margin: 15px;
	}
}
/*-------------*/
/*-------------*/
.feedback {
	display: flex;
	justify-content: space-between;
}
.feedback__request {
	flex: 0 1 500px;
	background: var(--decor-color);
	border-radius: var(--border-radius);
	margin: 0 20px 0 0;
}
.feedback__form {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 67px 83px;
	
}
.feedback__text{
	font-size: 36px;
	color: var(--main-color);
	font-weight: 700;
}
.feedback__input {
	display: inline-block;
	background: var(--decor-color);
	padding: 25px;
	border-bottom: 1px solid #ffffff63;
	margin-top: 20px;
	transition: .3s;
}
.feedback__input:hover,
.feedback__input:focus{
	color: var(--main-color);
	border-bottom: 1px solid var(--main-color);
}
.feedback__input.empty{
	border-bottom: 1px solid #ff0000;
}
.feedback__button {
	background: #ffffff0d;
	color: var(--main-color);
	transition: .3s;
	margin-top: 40px;
	cursor: pointer;
}
.feedback__button:hover{
	background: #ffffff4b;
}
.feedback__geo {
	overflow: hidden;
	flex: 0 1 700px;
	border-radius: var(--border-radius);
}
@media (max-width:991.98px) {
	.feedback__form {
		padding: 20px;
	}
}
@media (max-width:767.98px) {
	.feedback {
		display: block;
	}
	.feedback__request {
		margin: 0 0 20px 0;
	}
}
@media (max-width:479.98px) {
	.feedback__text {
		font-size: 25px;
	}
}


.confirm__input {
    margin: 5px 15px;
    border: 1px solid #9e9e9e;
    padding: 5px 10px;
    width: 100px;
	color: #000!important;
}
.confirm__input::placeholder{
	color: #0000001a!important;
}
.confirm__input.empty {
    border: 1px solid #ff0000;
}
.confirm__btn {
    padding: 10px;
    cursor: pointer;
	background: var(--decor-color-opacity)!important;
    color: var(--color-text)!important;
	transition: .3s;
}
.confirm__btn:hover {
    color: var(--decor-color)!important;
}
.confirm__error {
    color: #f44336;
    font-size: 14px;
}
/*-------------*/
/*-------------*/
.contacts {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 0 80px 0;
}
.contacts__item {
	width: calc(33.33% - 10px);
}
.contacts__item-text {
	font-size: 18px;
    display: block;
    color: var(--decor-color);
    margin-bottom: 10px;
}
.contacts__item-value {
	font-weight: 500;
}
@media (max-width:767.98px) {
	.contacts {
		padding: 0 0 40px 0;
	}
	.contacts__item {
		width: 100%;
		margin-top: 15px;
	}
}
/*-------------*/
/*-------------*/
.footer{
	background: var(--decor-color-opacity);
}
.footer__wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 67px 0;
}
.footer__wrap::before {
    content: '';
    position: absolute;
    border-radius: 50%;
	top: -10%;
    left: -30%;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px 200px 500px var(--decor-circle);
    z-index: -1;
}
.footer__logo {
	flex: 0 0 195px;
}
.footer__menu-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.footer__menu-item{
	margin: 0 0 0 86px;
}
.footer__menu-link {
	font-size: 18px;
	text-transform: uppercase;
	color:#000000b3;
	transition: .3s;
	letter-spacing: 3px;
}
.footer__menu-link:hover {
	color: var(--decor-color);
}
@media (max-width:991.98px) {
	.footer__menu-item{
		margin: 0 0 0 20px;
	}
}
@media (max-width:767.98px) {
	.footer__menu{
		width: 100%;
		padding-bottom: 20px;
	}
	.footer__menu-item{
		margin: 20px 0 0 0;
	}
}
@media (max-width:479.98px) {
	.footer__wrap {
		justify-content: center;
		padding: 40px 0;
	}
	.footer__menu-item{
		width: 100%;
		text-align: center;
	}
}
/*-------------------*/
/*--------up---------*/
.up{
	position: fixed;
	width: 42px;
	height: 42px;
	border-radius: 50px;
	border: 1px solid #fff;
	right: 20px;
	bottom: 20px;
	opacity: 0;
	visibility: hidden;
	transition: all 300ms ease-in-out;
	background: 0px 5px / contain no-repeat url(../../../img/icon/arrow.svg) var(--decor-color-opacity);
	cursor: pointer;
	z-index: 999;
}
.up:hover{
	background-position: 0 0;
}
.up._active{
	opacity: 1;
	visibility: visible;
}
/*-------------------*/
/*------preloader----*/
.preloader {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	z-index: 99999;
	transition: all .6s;
	opacity: 0.6;
	display: flex;
	justify-content: center;
	align-items: center;
}
.preloader__item {
	width: 15px;
	height: 15px;
	background-color: #fff;
	border-radius: 50%;
	margin: 10px;
}
.preloader__item:nth-child(1) {
	animation: point-a 1s infinite ease;
	animation-direction: normal;
}
.preloader__item:nth-child(2) {
	animation: point-b 1s infinite ease;
	animation-direction: normal;
}
.preloader__item:nth-child(3) {
	animation: point-c 1s infinite ease;
	animation-direction: normal;
}
@keyframes point-a {
	0% {
	  background-color: var(--decorate-color);
	  transform: scale(1.3);
	}
}
@keyframes point-b {
	25% {
	  background-color:  var(--decorate-color);
	  transform: scale(1.3);
	}
}
@keyframes point-c {
	50% {
	  background-color:  var(--decorate-color);
	  transform: scale(1.3);
	}
}
/*-------modal------*/
.modal{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #7a7777bd;
  z-index: 9999;
  transition: .5s all;
}
.done{
  opacity: 0;
  visibility: hidden!important;
}
.modal__wrap{
  position: absolute;
  background: #fff;
  padding: 25px 30px;
  -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
  box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
  outline: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  transition: .5s all;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: var(--border-radius);
}
.modal.done > .modal__wrap {
  transform: translate(-50%, -100%);
}
.modal__close{
  position: absolute;
  overflow: hidden;
  width: 20px;
  height: 20px;
  top: 5px;
  right: 5px;
  font-size: 30px;
  cursor: pointer;
  color: var(--color-text);
  transition: color .1s;
}
.modal__close::before{
	content: '+';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateZ(45deg);
}
.modal__close:hover{
  color: var(--decor-color);
}
.modal__info{
  font-size: 16px;
  text-align: center;
  font-weight: 500;
}
.modal__info--active{
  opacity: 1;
  transition: .3s ease;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  visibility: visible;
}
@media (max-width:992px) {
  .modal__wrap {
  width: 97%;
  }
}
@media (max-width:767px) {
  .modal__action-button {
    margin-bottom: 0;
  }
  .modal__button {
    flex: 0 1 auto;
  }
}