@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --font-family: "Montserrat", sans-serif;
  --second-family: "Montserrat Subrayada", sans-serif;
  --third-family: "Monoton", sans-serif;
	--dark-0: #1e2524;
	--prime3: #edf5e1;
	--prime2: #8ee4af;
	--prime1: #5cdb95;
	--prime: #379683;
	--dark1: #283633;
	--black: #000;
	--white: #fff;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}
main, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
* {
	outline: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:before, :after {
	box-sizing: border-box;
}
html {
  font-size: clamp(14px, 2vw, 24px);
  scroll-behavior: smooth;
}
body {
	position: relative;
	background: var(--dark-0);
	font-family: var(--font-family);
	color: var(--prime3);
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
.container {
	margin: 0 auto;
	width: 100%;
	min-width: 300px;
	max-width: 1920px;
  padding-left: clamp(15px, 4vw, 70px);
  padding-right: clamp(15px, 4vw, 70px);
}
H2 {
	font-weight: 800;
	font-size: clamp(30px, 3.125vw, 60px);
	line-height: 110%;
	color: var(--prime2);
}
H3 {
  font-weight: 800;
  font-size: clamp(24px, 2.08vw, 40px);
  line-height: 110%;
}
H4 {
  font-weight: 800;
  font-size: clamp(18px, 1.56vw, 30px);
  line-height: 110%;
}
ul, ul li {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
	transition: all 100ms ease;
}
p {
	margin-top: 25px;
}
.bt {
	position: relative;
	cursor: pointer;
	transition: all 100ms ease;
	height: clamp(32px, 3.333vw, 64px);
	border-radius: clamp(12px, 1.46vw, 24px);
  padding-left: clamp(15px, 1.46vw, 28px);
  padding-right: clamp(15px, 1.46vw, 28px);
	font-size: clamp(13px, 1vw, 19px);
	background: var(--prime1);
	font-weight: 700;
	color: var(--dark-0);
  text-align: center;
}
a.bt {
	display: inline-flex;
	justify-content: center;
	-ms-align-items: center;
	align-items: center;
}
img {
	border: none;
	vertical-align: top;
	max-width: 100%;
}
.mobile-header,
.bt-menu,
.mobile-bar {
  display: none;
}


.viewport-wrapper {
	position: relative;
	min-width: 300px;
	overflow: hidden;
}
.viewport-wrapper.overflow {
  width: 100%;
  height: 100vh;
  -webkit-overflow-scrolling: touch;
}



.header {
  position: fixed;
  left: 0;
  top: clamp(10px, 1.04vw, 20px);
  width: 100%;
  z-index: 100;
  color: var(--prime3);
}
.header-wrapper {
  backdrop-filter: blur(15px);
  background: rgba(40, 54, 51, 0.9);
  border-radius: clamp(20px, 2.08vw, 40px);
  height: clamp(60px, 6.25vw, 120px);
  padding-left: clamp(20px, 2.08vw, 50px);
  padding-right: clamp(20px, 2.08vw, 50px);
}
.header-logo img {
  width: clamp(140px, 6.93vw, 190px);
}
.header-nav {
  padding-left: clamp(30px, 2.6vw, 60px);
  margin-right: auto;
}
.header-nav li {
  display: flex;
  align-items: center;
}
.header-nav li + li {
  margin-left: clamp(
    12px,
    calc(12px + (23 * ((100vw - 906px) / 534))),
    50px
  );
}
.header-nav li a {
  color: inherit;
  font-size: clamp(15px, 1vw, 21px);
  font-weight: 500;
}
.header-tel {
  margin-right: clamp(20px, 1.6vw, 40px);
  color: inherit;
  font-size: clamp(16px, 1.3vw, 25px);
}

.section-head {
	display: flex;
	align-items: center;
}
.section-subtitle {
	margin-left: 60px;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-left: 2px solid var(--prime2);
	font-size: clamp(18px, 1.46vw, 28px);
	line-height: 140%;
}


.preview {
	position: relative;
	z-index: 2;
	overflow: hidden;
	padding-top: clamp(162px, 16.92vw, 325px);
	background: url(../i/bg-cover.png) no-repeat;
	background-size: 100% auto;
}
.preview:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: -1;
	height: 150px;
	background: linear-gradient(
    to bottom,
    rgba(30, 37, 36, 0) 0%,
    rgba(30, 37, 36, 0.6) 60%,
    #1e2524 100%
  );
}
.preview-title {
	font-size: clamp(30px, 4.16vw, 80px);
	font-weight: 800;
	color: var(--white);
}
.preview-subtitle {
	width: 49%;
	margin-top: clamp(20px, 2.08vw, 40px);
	font-size: clamp(18px, 2.08vw, 40px);
	line-height: 130%;
}
.preview .bt {
	width: clamp(230px, 24.08vw, 462px);
	margin-top: clamp(20px, 2.08vw, 40px);
}
.preview-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
  pointer-events: none;
	z-index: -1;
}
.preview__video.loaded {
  opacity: 1;
}


.about {
  position: relative;
  z-index: 1;
	padding-top: clamp(90px, 7.81vw, 150px);
}
.about::before {
	content: '';
	display: block;
	background: url(../i/divider-2.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: clamp(300px, 41.2vw, 791px);
	height: clamp(60px, 9.38vw, 180px);
	position: absolute;
	left: 0;
  top: clamp(222px, 19.27vw, 330px);
  z-index: -1;
}
.about p {
	width: 52%;
  line-height: 140%;
	margin-top: clamp(20px, 000vw, 40px);
	font-size: clamp(18px, 1.46vw, 28px);
}


.service {
  padding-top: clamp(74px, 10.8vw, 207px);
}
.service-list {
  margin-left: clamp(-12px, -1vw, -20px);
  margin-right: clamp(-12px, -1vw, -20px);
}
.service-list__item {
  width: 33.333%;
  margin-top: clamp(24px, 3vw, 40px);
  padding-left: clamp(12px, 1vw, 20px);
  padding-right: clamp(12px, 1vw, 20px);
  display: flex;
}
.service-card {
  width: 100%;
  padding: clamp(30px, 2.6vw, 50px);
  border-radius: clamp(20px, 2.1vw, 40px);
  background: var(--dark1);
  display: flex;
  flex-direction: column;
}
.service-card__title {
  padding-bottom: clamp(36px, 3.1vw, 60px);
  margin-bottom: auto;
  font-size: clamp(16px, 1.56vw, 30px);
  line-height: 130%;
  font-weight: 800;
  color: var(--prime2);
}
.service-list__item:nth-child(2n) .service-card {
	background: var(--prime3);
}
.service-list__item:nth-child(2n) .service-card__title {
	color: var(--dark-0);
}
.service-list__item:nth-child(odd) .bt {
	background: transparent;
	border: 2px solid var(--prime1);
	color: var(--prime1);
}
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--prime2);
  border-radius: clamp(12px, 1.04vw, 20px);
  width: clamp(38px, 3.33vw, 64px);
  height: clamp(38px, 3.33vw, 64px);
}
.service-card__icon img {
  width: clamp(26px, 2.29vw, 44px);
}


.team {
	position: relative;
	z-index: 2;
  padding-top: clamp(90px, 9.1vw, 175px);
  padding-bottom: clamp(180px, 16.1vw, 310px);
  background: url(../i/divider.svg) 50% 100% no-repeat;
  background-size: 100% 200px;
}
.team-list {
  margin: 0 clamp(-22px, -1.98vw, -38px);
}
.team-list__item {
  width: 50%;
  padding: 0 clamp(22px, 1.98vw, 38px);
  margin-top: clamp(48px, 3.9vw, 75px);
}
.team-card {
  margin-top: 10px; /*  */
  position: relative;
  padding-left: clamp(70px, 6.25vw, 120px);
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 140%;
  color: var(--white);
  display: flex;
  align-items: flex-start;
}

.team-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  transform: none; /*   */
  border-radius: clamp(12px, 1.04vw, 20px);
  background: var(--prime1) url('data:image/svg+xml,<svg width="57" height="59" viewBox="0 0 57 59" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 25.5C2.29086 25.5 0.5 27.2909 0.5 29.5C0.5 31.7091 2.29086 33.5 4.5 33.5V25.5ZM55.3284 32.3284C56.8905 30.7663 56.8905 28.2337 55.3284 26.6716L29.8726 1.21573C28.3105 -0.346369 25.7778 -0.346369 24.2157 1.21573C22.6536 2.77783 22.6536 5.31049 24.2157 6.87258L46.8431 29.5L24.2157 52.1274C22.6536 53.6895 22.6536 56.2222 24.2157 57.7843C25.7778 59.3464 28.3105 59.3464 29.8726 57.7843L55.3284 32.3284ZM4.5 29.5V33.5H52.5V29.5V25.5H4.5V29.5Z" fill="%231E2524" /></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: clamp(30px, 2.97vw, 57px) auto;
  width: clamp(50px, 4.43vw, 85px);
  height: clamp(50px, 4.43vw, 85px);
}



.partner {
  padding-top: clamp(90px, 7.81vw, 150px);
  text-align: center;
}
.logo-list {
  margin: 0 clamp(-20px, -1.56vw, -30px);
}
.logo-item {
  padding: 0 clamp(20px, 1.56vw, 30px);
  margin-top: clamp(24px, 2.34vw, 45px);
  max-width: 25%;
  position: relative;
  z-index: 1;
}
.logo-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    #5CDB95 0%,                   /* 100% непрозрачность в центре */
    rgba(92, 219, 149, 0.4) 30%,  /* полупрозрачный переход */
    rgba(92, 219, 149, 0) 100%    /* исчезает на краях */
  );
  filter: blur(60px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  pointer-events: none;
}


.contacts {
  padding-top: clamp(100px, 9.9vw, 190px);
}
.contacts-wrapper {
  position: relative;
  height: clamp(480px, 44.6vw, 856px);
  border-radius: clamp(20px, 2.1vw, 40px) clamp(20px, 2.1vw, 40px) 0 0;
  padding-left: clamp(30px, 2.6vw, 50px);
  background: var(--prime3);
  overflow: hidden;
}
.contacts-content {
  position: relative;
  z-index: 99;
  background: var(--prime1);
  border-radius: clamp(20px, 2.1vw, 40px);
  width: 43.6%;
  padding: clamp(30px, 2.6vw, 50px);
  color: var(--dark-0);
}
.contact-item {
  margin-top: clamp(12px, 1.04vw, 20px);
}
.contact-item__label {
  font-weight: 700;
  font-size: clamp(12px, 0.83vw, 16px);
  line-height: 140%;
}
.contact-item__val {
  margin-top: clamp(3px, 0.26vw, 5px);
  font-weight: 500;
  font-size: clamp(24px, 1.98vw, 38px);
}
.contact-item__info {
  margin-top: clamp(3px, 0.26vw, 5px);
  font-weight: 500;
  font-size: clamp(14px, 1.15vw, 22px);
  line-height: 140%;
}
.contacts-content .bt {
  margin-top: clamp(12px, 1.04vw, 20px);
  background: var(--prime3);
  color: var(--dark-0);
}
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.ymaps3x0--map-copyrights_bottom {
  bottom: 40px;
}


.feedback {
	position: relative;
	z-index: 1;
}
.feedback-wrapper {
  margin-top: clamp(-42px, -3.95vw, -76px);
  background: var(--white);
  border-radius: clamp(20px, 2.1vw, 40px);
  padding: clamp(30px, 2.6vw, 50px);
  color: var(--dark-0);
}
.feedback-text {
  width: 52%;
  max-width: 580px;
}
.feedback-form {
  width: 47.3%;
}
.feedback-text p {
  margin-top: clamp(24px, 2.08vw, 40px);
  font-size: clamp(16px, 1.25vw, 24px);
}
.feedback-form .bt {
  margin-top: clamp(6px, 0.52vw, 10px);
  width: 100%;
}



.footer {
  margin-top: clamp(-30px, -2.08vw, -53px);
}
.footer-wrapper {
  padding: clamp(48px, 2.5vw, 80px) clamp(30px, 1.56vw, 50px) clamp(16px, 0.83vw, 27px);
  background: var(--dark1);
  border-radius: 0 0 clamp(20px, 1.04vw, 40px) clamp(20px, 1.04vw, 40px);
}
.footer a {
  text-decoration: underline;
  color: inherit;
}
.footer-dev {
  width: 25%;
  font-weight: 600;
  font-size: clamp(12px, 0.63vw, 16px);
}
.footer-info {
  width: 50%;
  text-align: center;
  font-size: clamp(11px, 0.52vw, 14px);
}
.footer-info__item {
  margin: 0 clamp(8px, 0.63vw, 15px);
}
.footer-policy {
  width: 25%;
  text-align: right;
  font-size: clamp(11px, 0.52vw, 14px);
}





input, textarea, select {
	border: 0;
	background: #fff;
	resize: none;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	text-overflow: ellipsis;
	font-family: var(--font-family);
}
button {
	cursor: pointer;
	border: none;
	font-family: var(--font-family);
}
::-moz-placeholder {
	opacity: 0.3;
}
::-webkit-input-placeholder {
	opacity: 0.3;
}
::-ms-placeholder {
	opacity: 0.3;
}
::placeholder {
	opacity: 0.3;
}
input:focus::-moz-placeholder {
	opacity: 0;
}
input:focus::-webkit-input-placeholder {
  opacity: 0;
}
input:focus::-ms-placeholder {
  opacity: 0;
}
input:focus::placeholder {
  opacity: 0;
}
.form-group {
	margin: 0 -5px;
}
.form-group .form-item {
	padding: 0 5px;
	width: 50%;
}
.form-item {
	margin-bottom: 10px;
}
.form-item input {
  width: 100%;
  background: #f4f4f4;
  border-radius: clamp(14px, 1.25vw, 24px);
  padding: 0 clamp(14px, 1.25vw, 24px);
  height: clamp(40px, 3.33vw, 64px);
  font-weight: 500;
  font-size: clamp(14px, 0.89vw, 17px);
  line-height: 110%;
  color: var(--dark-0);
}
.form-item textarea {
  width: 100%;
  background: #f4f4f4;
  border-radius: clamp(14px, 1.25vw, 24px);
  padding: clamp(14px, 1.25vw, 24px);
  font-weight: 500;
  font-size: clamp(14px, 0.89vw, 17px);
  line-height: 110%;
  color: var(--dark-0);
}


.checkbox-item {
  position: relative;
  font-size: clamp(13px, 0.89vw, 17px);
  line-height: 110%;
  color: var(--dark-0);
}
.checkbox-item label {
  position: relative;
  display: inline-block;
  padding: clamp(1px, 0.26vw, 2px) 0 clamp(1px, 0.26vw, 2px) clamp(20px, 1.77vw, 34px);
}
.checkbox-item input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
}
.checkbox-custom {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(4px, 0.42vw, 8px);
  border: clamp(2px, 0.16vw, 3px) solid var(--prime1);
  width: clamp(16px, 1.25vw, 24px);
  height: clamp(16px, 1.25vw, 24px);
}
.checkbox-custom:before {
	content: '';
	display: block;
	transition: all 100ms ease;
	opacity: 0;
  background: url('data:image/svg+xml,<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5333 0.968744C12.0842 0.357458 13.0094 0.341273 13.5792 0.936518C14.1288 1.51099 14.1412 2.44115 13.6095 3.03124L6.39953 11.0312C6.13262 11.3274 5.75605 11.502 5.35461 11.5C4.95328 11.498 4.57871 11.32 4.31457 11.0215L0.381955 6.57714C-0.144333 5.98238 -0.125217 5.05201 0.429806 4.48242C1.00525 3.89191 1.93053 3.91807 2.4757 4.53417L5.37121 7.80566L11.5333 0.968744Z" fill="%235CDB95" /></svg>');
  width: clamp(8px, 0.73vw, 14px);
  height: clamp(7px, 0.63vw, 12px);
  background-size: 100% auto;
}
input:checked + .checkbox-custom:before {
	opacity: 1;
}


.modal {
  position: relative;
  margin: 0 auto;
  max-width: clamp(300px, 38.54vw, 740px);
  background: var(--white);
  border-radius: clamp(20px, 2.1vw, 40px);
  width: 100%;
  padding: clamp(30px, 2.6vw, 50px);
}
.modal-title {
  margin-bottom: clamp(21px, 1.82vw, 35px);
  font-weight: 800;
  font-size: clamp(24px, 2.08vw, 40px);
  color: var(--dark-0);
}
.modal-subtitle {
  margin-top: clamp(24px, 2.08vw, 40px);
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 140%;
}
.bt-close-modal {
  margin-top: clamp(24px, 2.08vw, 40px);
  border-radius: clamp(14px, 1.25vw, 24px);
  width: 100%;
  height: clamp(38px, 3.33vw, 64px);
  font-size: clamp(12px, 1vw, 19px);
}
.modal .checkbox-item {
  margin-top: clamp(21px, 1.82vw, 40px);
}
.modal .bt {
  width: 100%;
  margin-top: clamp(10px, 1.04vw, 18px);
}


.d-flex {
	display: flex; flex-wrap: wrap;
}
.j-between {
	justify-content: space-between;
}
.j-center {
	justify-content: center;
}
.j-end {
	justify-content: flex-end;
}
.a-start {
	align-items: flex-start;
}
.a-center {
	align-items: center;
}
.a-end {
	align-items: flex-end;
}

/* hover style */

@media (hover) , (min-width:0\0) , (min--moz-device-pixel-ratio:0) {

.logo-item:hover::before {
  opacity: 1;
}
.bt:hover {
  background: var(--prime2);
}
.service-list__item:nth-child(odd) .bt:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--prime2);
}
.contacts-content .bt:hover {
  background: var(--white);
}

}


