@import url('https://fonts.googleapis.com/css2?family=Anton&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
body{
	background-color: #ffffff;
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
body::-webkit-scrollbar {
  width: 13px;
}
body::-webkit-scrollbar-track {
  background: #29281D;
}
body::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 1.04vw;
  border: 4px solid #29281D;
}
table{
  width: 100%;
  background-color: white;
}
thead td{
  font-weight: 700;
}
.open{
	visibility: visible!important;
	opacity: 1!important;
}
.admin-modal-content div{
	display: flex;
	justify-content: center;
	width: 100%;
}
.admin-modal-content p{
	text-align: center;
	width: 100%;
	font-size: 16px;
	color: black;
	margin-bottom: 10px;
	font-weight: 500;
}
.admin-modal-content{
	padding: 10px;
	border-radius: 10px;
	background-color: white;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.admin-modal{
	visibility: hidden;
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.mainhaed p{
	margin-right: 10px;
	margin-left: 10px;
	height: 40px;
	display: flex;
	align-items: center;
	margin-bottom: 0px;
	font-size: 14px;
	font-weight: 300;
}
.mainhaed{
	padding: 0px 10px;
	width: 100%;
	background-color: #FF8000;
	color: white;
}
thead{
  background-color: #dfdfdf;
}
td button{
	background-color: black;
	color: white;
	font-size: 14px;
	font-weight: 700;
	outline: none;
	border: none;
	border-radius: 10px;
}
td input{
  font-size: 14px;
  padding: 5px 10px;
  border: none;
  outline: none;
}
td{
  font-size: 14px;
  border: 1px solid #ccc;
  font-weight: 400;
  color: black;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.terms-box{
	padding: 20px;
	box-shadow: 0px 0px 20px #00000020;
	border-radius: 20px;
	max-width: 800px;
	margin: 50px 0px;
}
.terms{
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
}
.admin-service table{
	width: 100%;
}
.payment-block a{
	width: 100%;
	margin-bottom: 30px;
	height: 50px;
	border-radius: 15px;
	background-color: #FF8000;
	font-weight: 900;
	color: white;
	text-decoration: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.payment-block{
	width: 350px;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.payment-final p{
	line-height: 20px;
	font-weight: 700;
	color: black;
	font-size: 20px;
	margin: 0px;
	width: 50%;
}
.payment-final{
	width: 100%;
	height: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.payment-qr img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.payment-qr{
	padding: 10px;
	width: 100%;
	height: 350px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px #00000020;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: white;
}
.payment-label{
	width: 100%;
	line-height: 24px;
	font-size: 24px;
	text-align: center;
	margin-bottom: 10px;
	color: black;
	font-weight: 900;
}
.payment-comment{
	width: 100%;
	line-height: 16px;
	font-size: 16px;
	text-align: center;
	margin-bottom: 0px;
	color: #FF453A;
	font-weight: 900;
}
.payment-info{
	width: 100%;
	line-height: 16px;
	font-size: 16px;
	text-align: center;
	margin-bottom: 20px;
	color: black;
	font-weight: 400;
}
.payment{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
.admin-service .admin-service-info .adlab{
	width: 100%;
	font-size: 14px;
	text-align: left;
	margin-bottom: 5px;
}
.admin-service .admin-service-info textarea{
	padding: 0px 10px;
	outline: none;
	border: none;
	background-color: #e8e8e8;
	border-radius: 10px;
	width: 100%;
	margin-bottom: 5px;
}
.admin-service .admin-service-info select{
	padding: 0px 10px;
	outline: none;
	border: none;
	background-color: #e8e8e8;
	border-radius: 10px;
	width: 100%;
	margin-bottom: 5px;
}
.admin-service .admin-service-info input{
	padding: 0px 10px;
	outline: none;
	border: none;
	background-color: #e8e8e8;
	border-radius: 10px;
	width: 100%;
	margin-bottom: 5px;
}
.admin-service .admin-service-info div{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.admin-service .admin-service-info{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	align-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 10px;
}
.admin-service .admin-service-info button{
	margin-top: 10px;
	font-weight: 700;
	background-color: black;
	color: white;
	outline: none;
	border: none;
	border-radius: 10px;
	width: 100%;
	height: 2.08vw;
}
.admin-services .admin-service .admin-service-photos{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	height: 8vw;
}
.admin-service img{
	border-radius: 2px;
	height: 100%;
	width: calc(20% - 5px);
	object-fit: cover;
}
.admin-services .admin-line-info a{
	font-size: 0.73vw;
	font-weight: 700;
	width: 100%;
	text-align: left;
}
.admin-services .admin-line-info p{
	font-size: 1.04vw;
	font-weight: 700;
	margin: 0px;
	width: 100%;
	text-align: left;
}
.admin-services .admin-line-info{
	margin-bottom: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 100%;
	height: 40px;
}
.admin-services .admin-service{
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 10px;
	width: 100%;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #e8e8e8;
}
.admin-page .admin-services{
	width: 36.46vw;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
}
.admin-page .nav a{
	color: black;
	font-weight: 500;
	height: 40px;
	border-radius: 40px;
	padding: 0px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	text-align: center;
	width: 100%;
	text-decoration: none;
	font-size: 16px;
}
.admin-page .nav a:hover{
	background-color: #e8e8e8;
}
.admin-page .nav{
	padding-right: 10px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.admin-page{
	padding-top: 100px;
	align-items: flex-start;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.adm{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.done {
  opacity: 0!important;
  visibility: hidden!important;
}
.preloader .loader{
	width: 13.02vw;
	height: 13.02vw;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.preloader{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 1002;
  transition: 1s all;
  opacity: 1;
  visibility: visible;
}
.error div p{
	font-weight: 700;
	font-size: 0.83vw;
	text-align: center;
	margin: 0px;
}
.error div{
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0px 0px 1.04vw #00000050;
	padding: 0.52vw 1.04vw;
	border-radius: 1.04vw;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.error{
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	padding-top: 1.04vw;
}
.general .body .right button{
	text-decoration: none;
	width: 100%;
	height: 3.65vw;
	border-radius: 1.04vw;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	color: white;
	outline: none;
	border: none;
	font-weight: 900;
	font-size: 1.04vw;
	background-color: #FF8000;
	cursor: pointer;
}
.general .body .right .calculator-final p{
	font-size: 1.04vw;
	font-weight: 700;
	color: black;
	margin: 0px;
}
.general .body .right .calculator-final{
	width: 100%;
	height: 3.65vw;
	border-radius: 1.04vw;
	background-color: unset;
	border: 2px solid #dddddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	padding: 0px 1.04vw;
	margin-bottom: 0.52vw;
}
.pay-terms{
	font-size: 0.83vw;
	font-weight: 300;
	color: black;
	margin: 0px;
	text-align: left;
	width: 100%;
	margin-top: 10px;
	padding: 0px 10px;
}
.general .body .right .calculator p{
	font-size: 0.83vw;
	font-weight: 500;
	color: black;
	margin: 0px;
}
.general .body .right .calculator{
	width: 100%;
	height: 3.65vw;
	border-radius: 1.04vw;
	background-color: unset;
	border: 2px solid #dddddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	padding: 0px 1.04vw;
	margin-bottom: 1.04vw;
}
.general .body .right{
	padding-right: 1.04vw;
	width: 38%;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
}
.general .body .left .move .delete{
	width: 30%;
	height: 100%;
	border-radius: 1.04vw;
	border: 2px solid #FF8000;
	background-color: unset;
	color: #FF8000;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-decoration: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.83vw;
}
.general .body .left .move .add{
	width: 68%;
	height: 100%;
	border-radius: 1.04vw;
	background-color: #FFC68C;
	color: #FF8000;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-decoration: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.83vw;
}
.general .body .left .move{
	margin-bottom: 1.04vw;
	width: 100%;
	height: 2.6vw;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.general .body .left .man{
	margin-bottom: 0.52vw;
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
}
.general .body .left p{
	padding: 0px 1.04vw;
	font-size: 0.83vw;
	margin-bottom: 0.22vw;
	font-weight: 500;
	width: 100%;
	color: #888888;
	text-align: left;
}
.general .body .left input{
	width: 100%;
	height: 3.13vw;
	border-radius: 1.04vw;
	background-color: #dddddd;
	padding: 0px 1.04vw;
	text-align: left;
	outline: none;
	border: none;
	font-size: 0.83vw;
	font-weight: 500;
	color: black;
	margin-bottom: 0.52vw;
}
.general .body .left{
	padding-bottom: 5.21vw;
	padding-left: 1.04vw;
	width: 60%;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
}
.general .body{
	width: 100%;
	margin-top: 2.6vw;
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	flex-wrap: wrap;
}
.general .head div a{
	text-align: right;
	font-size: 0.83vw;
	height: 2.08vw;
	padding: 0px 2.6vw;
	color: black;
	border-radius: 0.52vw;
	border: 1px solid black;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-decoration: none;
	cursor: pointer;
}
.general .head div .info{
	width: 100%;
	text-align: left;
	font-size: 0.83vw;
	font-weight: 400;
	color: black;
	margin: 0px;
}
.general .head div .label{
	width: 100%;
	text-align: left;
	font-size: 1.04vw;
	font-weight: 700;
	color: black;
	margin: 0px;
}
.general .head div{
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.general .head{
	padding: 0px 1.04vw;
	width: 100%;
	height: 3.65vw;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px solid #dddddd;
}
.general .content{
	padding-top: 5.21vw;
	width: 62.5vw;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
}
.general{
	width: 100%;
	height: 56.25vw;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
}
.show{
	visibility: visible!important;
	opacity: 1!important;
}
.active{
	outline: 2px solid white!important;
	padding: 2px!important;
}
.modal-box-body .left .photos .main-photo img{
	width: 100%;
	height: 100%;
	border-radius: 1.04vw;
	object-fit: cover;
}
.modal-box-body .left .photos .secondary-photos img {
	cursor: pointer;
  width: calc(20% - 0.52vw);
  height: 100%;
  border-radius: 0.52vw;
  object-fit: cover;
  padding: 0px;
  outline: none;
  transition: all .2s ease-in-out;
}
.modal-box-body .left .photos .secondary-photos img:hover{
	outline: 2px solid white;
	padding: 2px;
}
.modal-box-body .left .photos .secondary-photos{
	height: 20%;
	width: 100%;
	display: flex; /* Используем Flexbox */
	justify-content: space-between;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.modal-box-body .left .photos .main-photo{
	height: 78%;
	width: 100%;
	border-radius: 1.04vw;
}
.modal-box-body .left .photos{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: space-between;
	flex-wrap: wrap;
}
.modal-box-body .left{
	width: 40%;
	height: 100%;
}
.disabled{
	pointer-events: none!important;
	opacity: 0.6!important;
	cursor: none!important;
}
.modal-box-body .right a{
	margin-top: 3.13vw;
	width: 30vw;
	height: 3.65vw;
	border-radius: 3.65vw;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	color: white;
	font-weight: 900;
	font-size: 1.25vw;
	background-color: #FF8000;
	cursor: pointer;
}
.modal-box-body .right a:hover{
	color: white;
}
.modal-box-body .right .info{
	width: 100%;
	text-align: left;
	font-weight: 300;
	margin: 1.56vw 0px 0px 0px;
	font-size: 0.83vw;
	color: white;
	white-space: pre-wrap;
}
.modal-box-body .right .label{
	font-weight: 900;
	width: 100%;
	text-align: left;
	margin: 0px;
	font-size: 1.67vw;
	color: white;
}
.modal-box-body .right{
	display: flex;
	justify-content: flex-start;
	align-content: space-between;
	flex-wrap: wrap;
	width: 55%;
	height: 100%;
	overflow-y: scroll;
}
.modal-box-body .right::-webkit-scrollbar {
  width: 13px;
}
.modal-box-body .right::-webkit-scrollbar-track {
  background: none;
}
.modal-box-body .right::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 1.04vw;
  border: 4px solid rgba(0, 0, 0, 0);
}
.modal-box-body{
	width: 100%;
	height: calc(100vh - 5.63vw);
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	flex-wrap: wrap;
	padding: 0.52vw 10.42vw 5.21vw 10.42vw;
}
.modal-box-header a{
	cursor: pointer;
	font-size: 1.04vw;
	color: white!important;
	font-weight: 300;
	text-align: left;
	margin: 0px;
}
.modal-box-header{
	width: 100%;
	height: 5.63vw;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	padding: 0px 2.08vw;
}
.modal-box{
	visibility: hidden;
	opacity: 0;
	z-index: 10001;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	position: fixed;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
	background-color: rgba(0, 0, 0, 0.7);
  transition: 0.5s all;
}
.main .content .left a{
	text-decoration: none;
	margin-top: 3.13vw;
	width: 20.83vw;
	height: 3.65vw;
	border-radius: 3.65vw;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	color: white;
	font-weight: 900;
	font-size: 1.25vw;
	background-color: #FF8000;
	cursor: pointer;
}
.main .content .left .info{
	text-shadow: 0px 0px 1.04vw #000000;
	width: 100%;
	text-align: left;
	margin: 1.56vw 0px 0px 0px;
	color: white;
	font-weight: 400;
	font-size: 1.67vw;
	line-height: 1.67vw;
}
.main .content .left .label{
	text-shadow: 0px 0px 1.04vw #000000;
	font-size: 7.26vw;
	color: white;
	font-weight: 900;
	width: 100%;
	line-height: 7.26vw;
	text-align: left;
	margin: 0px;
}
.main .content .right .carousel{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
}
.main .content .right .carousel .cards img{
	flex-shrink: 0;
	border-radius: 0.52vw;
	object-fit: cover;
	width: 35%;
	margin-right: 1.04vw;
}
.main .content .right .carousel .cards::-webkit-scrollbar {
  display: none;
}
.main .content .right .carousel .cards{
	padding-bottom: 1.04vw;
	display: flex;
	width: 100%;
	height: 15.63vw;
  transition: all .2s ease-in-out;
}
.carousel .navigation div{
	width: 25vw;
	height: 0.1vw;
	border-radius: 0.1vw;
	background-color: white;
}
.carousel .navigation a{
	cursor: pointer;
	width: 3.65vw;
	height: 3.65vw;
	border: 0.1vw solid white;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	border-radius: 100%;
	color: white;
  transition: all .2s ease-in-out;
}
.carousel .navigation a:hover{
	opacity: .6;
}
.main .content .right .carousel .navigation{
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 100%;
}
.main .content .right{
	width: 40%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-content: flex-end;
	align-items: flex-end;
	flex-wrap: wrap;
}
.main .content .left{
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-content: flex-end;
	align-items: flex-end;
	flex-wrap: wrap;
}
.main .content{
	padding: 0px 5.21vw 6.77vw 5.21vw;
	display: flex;
	justify-content: space-between;
	align-content: center;
	flex-wrap: wrap;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
}
.main .back{
	top: 0;
	left: 0;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}
.services .content .right{
	width: 100%;
	height: 20%;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.services .content .right .info{
	text-shadow: 0px 0px 1.04vw #00000050;
	width: 100%;
	text-align: center;
	margin: 1.56vw 0px 0px 0px;
	color: white;
	font-weight: 400;
	font-size: 1.67vw;
	line-height: 1.67vw;
}
.services .content .right .label{
	text-shadow: 0px 0px 1.04vw #00000050;
	font-size: 3.33vw;
	color: white;
	font-weight: 900;
	width: 100%;
	line-height: 3.33vw;
	text-align: center;
	margin: 0px;
}
.services .content .left .cards .card p{
	width: 100%;
	margin: 0px;
	text-align: left;
	font-weight: 500;
	color: white;
	line-height: 1.04vw;
	font-size: 1.04vw;
}
.services .content .left .cards .card img{
	width: 100%;
	height: calc(100% - (1.04vw + 5px));
	border-radius: 0.52vw;
	object-fit: cover;
}
.services .content .left .cards .card{
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	margin-right: 10px;
	cursor: pointer;
	width: 20%;
	height: 100%;
}
.services .content .left .cards::-webkit-scrollbar {
  display: none;
}
.services .content .left .carousel{
	overflow: hidden;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: space-between;
	flex-wrap: wrap;
}
.services .content .left .navigation div{
	width: calc(100% - 11vw);
	height: 0.1vw;
	border-radius: 0.1vw;
	background-color: white;
}
.services .content .left .navigation a{
	cursor: pointer;
	width: 3.65vw;
	height: 3.65vw;
	border: 2px solid white;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	border-radius: 100%;
	color: white;
  transition: all .2s ease-in-out;
}
.services .content .left .navigation a:hover{
	opacity: .6;
}
.services .content .left .navigation{
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 100%;
}
.services .content .left .cards{
	display: flex;
	height: 80%;
	padding: 0px 0.52vw 0px 0.52vw;
	width: 100%;
  /* Для CSS Grid:
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 1.04vw; */
  transition: all .2s ease-in-out;
}
.services .content .left{
	width: 100%;
	height: 70%;
	display: flex;
	justify-content: flex-start;
	align-content: flex-end;
	align-items: flex-end;
	flex-wrap: wrap;
}
.services .content{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
	padding: 8.34vw 5.21vw 3.65vw 5.21vw;
	display: flex;
	justify-content: center;
	align-content: space-between;
	flex-wrap: wrap;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
}
.services .back{
	top: 0;
	left: 0;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}
.services::before{
	content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/back2.webp?ver=1'); /* Замените на свой URL */
  background-size: cover;
  background-repeat: no-repeat;
}
.services{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 56.25vw;
}
.modal-box-body .right .info{
	width: 100%;
	text-align: left;
	font-weight: 300;
	margin: 1.56vw 0px 0px 0px;
	font-size: 0.83vw;
	color: white;
	white-space: pre-wrap;
}
.about .content .block .info{
	text-shadow: 0px 0px 1.04vw #000000;
	width: 100%;
	text-align: center;
	margin: 1.56vw 0px 0px 0px;
	color: white;
	font-weight: 400;
	font-size: 1.67vw;
	line-height: 1.67vw;
	white-space: pre-wrap;
}
.about .content .block .label{
	text-shadow: 0px 0px 1.04vw #000000;
	font-size: 6.67vw;
	color: white;
	font-weight: 900;
	width: 100%;
	line-height: 6.67vw;
	text-align: center;
	margin: 0px;
}
.about .content .block{
	width: 70%;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
}
.about .content{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
	padding: 0px 5.21vw 0px 5.21vw;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
}
.about .back{
	top: 0;
	left: 0;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}
.about::before{
	content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/back3.webp?ver=1'); /* Замените на свой URL */
  background-size: cover;
  background-repeat: no-repeat;
  transform: scaleX(-1); /* Отражение по горизонтали */
}
.about{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 56.25vw;
}
.main{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 56.25vw;
	background-image: url(img/back.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.header .content .right .vk{
	text-decoration: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	height: 2.6vw;
	line-height: 2.6vw;
	border-radius: 2.6vw;
	background-color: #0077FF;
	align-items: center;
	font-size: 1.04vw;
	font-weight: 700;
	color: white;
	width: 100%;
	margin: 0px 0px 0px 1.04vw;
}
.header .content .left .phone{
	display: none;
}
.header .content .left a{
	text-decoration: none;
	cursor: pointer;
	display: flex;
	height: 100%;
	line-height: 100%;
	align-items: center;
	font-size: 1.04vw;
	font-weight: 700;
	color: white;
	margin: 0px 1.04vw 0px 0px;
}
.header .content .left .navs-box .navs{
	display: flex;
}
.header .content .left .navs-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	width: 100%;
}
.header .content .left{
	padding-left: 2.08vw;
	width: 85%;
	height: 5.21vw;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.header .content .right{
	padding-right: 2.08vw;
	width: 15%;
	height: 5.21vw;
	display: flex;
	justify-content: flex-end;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.header .content{
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	border-radius: 0.52vw;
	background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	padding: 1.56vw 3.13vw 0px 3.13vw;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.hide{
	display: none!important;
}
@media only screen and (max-width: 600px){
	.header{
		padding: 0px;
	}
	.header .content{
		height: 60px;
		border-radius: 0px;
	}
	.header .content .right{
		width: 50%;
		height: 60px;
		padding-right: 10px;
	}
	.header .content .left{
		width: 50%;
		height: 60px;
		padding-left: 0px;
	}
	.header .content .right .vk{
		z-index: 5;
		width: 70%;
		height: 40px;
		border-radius: 40px;
		font-size: 14px;
	}
	.header .content .left a{
		justify-content: center;
		text-align: center;
		font-size: 20px;
		width: 100%;
		margin: 0px 0px 15px 0px;
	}
	.header .content .left .navs-box .navs{
		width: 100%;
		justify-content: center;
		display: flex;
		flex-wrap: wrap;
	}
	.navs-box.opnav {
        display: flex!important; /* Показываем navs-box при наличии класса opnav */
    }
	.header .content .left .navs-box {
		display: none;
		z-index: 1;
		justify-content: center;
        align-content: flex-start;
	    width: 100%;
	    height: 100vh;
	    padding-top: 80px;
	    position: fixed;
	    top: 0;
	    left: 0;
	    background-color: rgba(0, 0, 0, 0.7);
	  	-webkit-backdrop-filter: blur(10px);
	}
	.header .content .left .phone{
		z-index: 5;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 60px;
		height: 60px;
	}
	.header .content .left .phone i{
		font-size: 26px;
		height: 26px;
		width: 26px;
		color: white;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.main .content{
		align-content: flex-start;
		padding: 60px 5px 5px 5px;
	}
	.main .content .left .info{
		width: 80%;
		line-height: 16px;
		font-size: 16px;
		text-align: center;
		margin: 15px 0px 0px 0px;
	}
	.main .content .left .label{
		text-align: center;
		font-size: 48px;
		line-height: 48px;
	}
	.main .content .left a{
		height: 50px;
		width: 300px;
		border-radius: 50px;
		font-size: 16px;
	}
	.main .content .left{
		height: 60%;
		justify-content: center;
		align-content: center;
		width: 100%;
	}
	.main .content .right{
		padding: 10px;
		align-content: center;
		height: 40%;
		justify-content: center;
		width: 100%;
	}
	.main .content .right .carousel{
		height: 100%;
	}
	.main .content .right .carousel .cards{
		height: 100%;
		overflow-x: scroll;
	}
	.main .content .right .carousel .cards img{
		width: 60%;
		margin-right: 10px;
	}
	.services .content{
		align-content: space-between;
		padding: 30px 5px 5px 5px;
	}
	.services .content .left{
		padding-top: 20px;
		padding-bottom: 20px;
		justify-content: center;
		align-content: flex-start;
		width: 100%;
		height: 60%;
	}
	.services .content .right{
		align-content: center;
		justify-content: center;
		width: 100%;
		height: 40%;
	}
	.services .content .left .cards{
		width: 100%;
		overflow-y: scroll;
	}
	.services .content .left .carousel{
		height: unset!important;
		justify-content: center;
	}
	.services .content .left .navigation{
		display: none;
	}
	.services .content .right .label{
		text-align: center;
		font-size: 36px;
		line-height: 36px;
	}
	.services .content .right .info{
		width: 80%;
		line-height: 16px;
		font-size: 16px;
		text-align: center;
		margin: 15px 0px 0px 0px;
	}
	.services .content .left .cards .card p{
		line-height: 16px;
    	font-size: 16px;
	}
	.about .content{
		align-content: flex-start;
		padding: 90px 5px 5px 5px;
	}
	.about .content .block{
		width: 100%;
	}
	.about .content .block .label{
		text-align: center;
		font-size: 36px;
		line-height: 36px;
	}
	.about .content .block .info{
		width: 80%;
		line-height: 16px;
		font-size: 16px;
		text-align: center;
		margin: 15px 0px 0px 0px;
	}
	.preloader .loader{
		    width: 13.02vh;
    height: 13.02vh;
	}
	.modal-box-body{
		height: calc(100vh - 5.63vh);
		overflow-y: scroll;
		justify-content: center;
		padding: 10px;
	}
	.modal-box-body .left{
		width: 100%;
		height: 70%;
	}
	.modal-box-header{
		height: 5.63vh;
		padding: 0px 20px;
	}
	.modal-box-header a{
		font-size: 16px;
	}
	.modal-box-body .right{
		padding-top: 20px;
		width: 100%;
		height: unset;
	}
	.modal-box-body .right .label{
		font-size: 20px;
	}
	.modal-box-body .right .info{
		font-size: 14px;
		margin: 15px 0px 0px 0px;
	}
	.modal-box-body .right a{
		width: 100%;
		height: 50px;
		border-radius: 50px;
		font-size: 16px;
		margin-top: 40px;
		margin-bottom: 100px;
	}
	.main{
		height: 100vh;
	}
	.services{
		height: 100vh;
	}
	.about{
		height: 100vh;
	}
	.services .content .left .cards .card{
		width: 60%;
	}
	.main .content .right .carousel .cards img{
		border-radius: 10px;
	}
	.services .content .left .cards .card img{
		border-radius: 10px;
		height: 35vh;
	}
	.general{
		height: unset;
	}
	.general .content{
		width: 90%;
		padding-top: 20px;
	}
	.general .head div{
		align-content: flex-start;
		align-items: flex-start;
	}
	.general .head{
		height: unset;
		padding: 0px;
	}
	.general .head div .label{
		font-size: 16px;
	}
	.general .head div .info{
		font-size: 14px;
	}
	.general .head div a{
		font-size: 14px;
		height: 30px;
		border-radius: 10px;
		padding: 0px 20px;
	}
	.general .body{
		margin-top: 20px;
	}
	.general .body .left{
		width: 100%;
		padding: 0px;
	}
	.general .body .right{
		width: 100%;
		padding: 0px;
	}
	.general .body .left p{
		font-size: 14px;
		padding: 0px 15px;
		margin-bottom: 5px;
	}
	.general .body .left input{
		height: 50px;
		width: 90vw;
		border-radius: 10px;
		padding: 0px 15px;
		font-size: 14px;
	}
	.general .body .left .move{
		height: 40px;
		margin-bottom: 20px;
	}
	.general .body .left .move .add{
		font-size: 14px;
		border-radius: 10px;
	}
	.general .body .left .move .delete{
		font-size: 14px;
		border-radius: 10px;
	}
	.general .body .right .calculator{
		height: 50px;
		border-radius: 10px;
		padding: 0px 15px;
		margin-bottom: 20px;
	}
	.general .body .right .calculator p{
		font-size: 14px;
	}
	.general .body .right .calculator-final{
		height: 50px;
		border-radius: 10px;
		padding: 0px 15px;
		margin-bottom: 10px;
	}
	.general .body .right .calculator-final p{
		font-size: 16px;
	}
	.general .body .right button{
		height: 50px;
		border-radius: 10px;
		font-size: 16px;
	}
	.general .body .left .man{
		margin-bottom: 10px;
	}
	.error div{
		padding: 10px 15px;
		box-shadow: 0px 0px 10px #00000050;
		border-radius: 10px;
	}
	.error div p{
		font-size: 14px;
	}
	.admin-page .admin-services{
		width: 90vw;
	}
	.admin-services .admin-line-info p{
		font-size: 16px;
	}
	.admin-service .admin-service-info button{
		height: 40px;
	}
	.admin-services .admin-line-info a{
		font-size: 14px;
	}
	.pay-terms{
		font-size: 14px;
		margin-bottom: 50px;
	}
}