:root {
  --font-montserrat: "Montserrat", sans-serif;
  --font-prostoOne: "Prosto One", cursive;
  --cl-black: #222222;
  --cl-white: #ffffff;
  --cl-white2: #fdfdfd;
  --cl-green: #043f31;
  --cl-gradient: linear-gradient(
    191.44deg,
    var(--cl-black) 47.94%,
    var(--cl-green) 197.29%
  );
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

p,
dd,
dl,
figure,
blockquote {
  margin: 0;
}

blockquote,
q {
  quotes: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

audio,
video {
  display: block;
}

iframe {
  border: none;
}

pre,
code,
kbd,
samp {
  font: inherit monospace, monospace;
}

a {
  background: transparent;
  text-decoration: none;
  color: inherit;
}

abbr {
  border: none;
  text-decoration: none;
}

b,
strong {
  font-weight: inherit;
}

i,
em {
  font-style: inherit;
}

dfn {
  font-style: inherit;
}

mark {
  background: transparent;
  color: inherit;
}

small {
  font-size: inherit;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: inherit;
  line-height: 0;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: inherit;
  letter-spacing: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-align: left;
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
}

textarea {
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: none;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

[type=search] {
  outline: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

legend {
  display: block;
  padding: 0;
  white-space: normal;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

svg {
  display: block;
}

body {
  background: url(../img/header__bg.png) repeat;
  font-family: var(--font-montserrat);
  font-style: normal;
  font-weight: 400;
  overflow-x: hidden;
}

body.active {
  overflow: hidden;
}

body.hide {
  overflow: hidden;
}

::-webkit-scrollbar {
  background: var(--cl-white);
  width: 10px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--cl-green);
}

button,
input {
  font-family: var(--font-family);
}

h1 {
  font: calc(
   28px + 44 * ((100vw - 320px) / 1600)
  )/140% var(--font-prostoOne);
  text-transform: uppercase;
  color: var(--cl-white);
  margin-bottom: 20px;
}

h2 {
  font: calc(
   20px + 30 * ((100vw - 320px) / 1600)
  )/140% var(--font-prostoOne);
  color: var(--cl-black);
  margin-bottom: 40px;
}

.container {
  max-width: 1284px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.btn {
  border: 1px solid var(--cl-green);
  max-width: calc(
      160px + 69 * ((100vw - 320px) / 1600)
    );
  width: 100%;
  height: 50px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 10px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 150%;
  color: var(--cl-green);
}

.btn::after {
  background: var(--cl-green);
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.btn:hover {
  color: var(--cl-white);
}

.btn:hover::after {
  left: 0;
  width: 100%;
}

.btn:active {
  top: 2px;
}

.section {
  margin-bottom: 170px;
}

.custom__ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 15px;
}

.custom__ul li {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--cl-black);
  position: relative;
  padding-left: calc(
      27px + 14 * ((100vw - 320px) / 1600)
    );
}

.custom__ul li::after {
  background: url(../img/svg/bullet.svg) no-repeat 0 0/cover;
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: calc(
      20px + 11 * ((100vw - 320px) / 1600)
    );
  height: calc(
      15px + 8 * ((100vw - 320px) / 1600)
    );
}

.scrollup {
  position: fixed;
  right: calc(
      21px + 50 * ((100vw - 320px) / 1600)
    );
  bottom: 0;
  width: calc(
      33px + 20 * ((100vw - 320px) / 1600)
    );
  height: calc(
      33px + 20 * ((100vw - 320px) / 1600)
    );
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid var(--cl-green);
  border-radius: 50%;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 5;
}

.scrollup.show-scroll {
  opacity: 1;
  bottom: calc(
      75px + 50 * ((100vw - 320px) / 1600)
    );
}

.preloder {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: var(--cl-white);
  z-index: 999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.preloder.hid {
  opacity: 0;
  visibility: hidden;
  top: -100%;
}

.preloder .preloder__item {
  position: absolute;
  top: 50%;
  left: 48%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.preloder .box {
  position: relative;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.preloder .loader {
	position: relative;
	height: 80px;
	width: 80px;
	border-radius: 80px;
  border: 3px solid var(--cl-green);
	top: 28%;
	top: -webkit-calc(50% - 43px);
	top: calc(50% - 43px);
	left: 35%;
	left: -webkit-calc(50% - 43px);
	left: calc(50% - 43px);

	-webkit-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
	-webkit-animation: loader 3s linear infinite;
			animation: loader 3s linear infinite;
}

.preloder .loader:after{
	content: "";
	position: absolute;
	top: -5px;
	left: 20px;
	width: 11px;
	height: 11px;
	border-radius: 10px;
	background-color: var(--cl-green);
}

@-webkit-keyframes loader{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes loader{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

.alert {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.4s;
  opacity: 0;
  visibility: hidden;
}

.alert-success {
  opacity: 1;
  visibility: visible;
  transition: all 0.4s;
}

.alert .wrap-popup {
  position: relative;
  background: var(--cl-white);
  max-width: 300px;
  padding: 20px;
  text-align: center;
}

.alert .wrap-popup span {
  font-size: 22px;
  line-height: 112%;
  background: linear-gradient(191.44deg, #043F31 47.94%, #000000 197.29%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  position: relative;
}

.header {
  background: url(../img/header__bg.png) repeat;
  width: 100%;
  padding: 14px 0;
  position: fixed;
  z-index: 10;
}

.header .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
}

.header .logo .icon {
  width: calc(
      103px + 52 * ((100vw - 320px) / 1600)
    );
  height: calc(
      35px + 18 * ((100vw - 320px) / 1600)
    );
}

.header .menu__overlay {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.header .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
}

.header .menu__icon {
  width: 32px;
  height: 22px;
  position: relative;
  cursor: pointer;
  display: none;
  z-index: 21;
}

.header .menu__icon span {
  width: 100%;
  height: 2px;
  background: var(--cl-green);
  display: block;
  position: absolute;
  left: 0;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.header .menu__icon span:nth-child(1) {
  top: 25%;
}

.header .menu__icon span:nth-child(2) {
  top: 75%;
}

.header .menu__icon.active span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
}

.header .menu__icon.active span:nth-child(2) {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  top: 50%;
}

.header .adress {
  font-size: 16px;
  line-height: 143%;
  color: var(--cl-green);
  max-width: 242px;
  margin-right: calc(
      10px + 42 * ((100vw - 320px) / 1600)
    );
}


.header .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
  margin-right: calc(
      10px + 82 * ((100vw - 320px) / 1600)
    );
}

.header .wrap a {
  font-size: 16px;
  line-height: 143%;
  text-align: center;
  color: var(--cl-green);
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.header .wrap a:hover {
  text-decoration: underline;
}

.header .wrap .tel {
  text-transform: uppercase;
}

.header .social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  margin-right: calc(
      10px + 31 * ((100vw - 320px) / 1600)
    );
}

.header .social a {
  width: 48px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid var(--cl-green);
  border-radius: 50%;
  -webkit-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

.header .social a:hover {
  background: var(--cl-green);
}

.header .social a:hover svg path {
  fill: var(--cl-white);
}

.header .social .vk svg {
  position: relative;
  top: 1px;
  left: -1px;
}

.heroimage {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.heroimage__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(37, 35, 35, 0.5);
}

.hero__slider {
  width: 100%;
  height: 100vh;
}

.hero__slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__slider .slick-list {
  width: 100%;
  height: 100vh;
}

.hero__slider .slick-track {
  width: 100%;
  height: 100vh;
}

.video__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}

.video__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heroimage .content {
  position: relative;
}

.heroimage p {
  font-size: calc(
    18px + 4 * ((100vw - 320px) / 1600)
  );
  line-height: 140%;
  color: var(--cl-white);
  margin-bottom: 40px;
  max-width: 725px;
}

.heroimage .calc {
  width: calc(
      155px + 78 * ((100vw - 320px) / 1600)
    );
  height: calc(
      155px + 78 * ((100vw - 320px) / 1600)
    );
  background: -o-linear-gradient(314.32deg, rgba(0, 0, 0, 0.7) 32.55%, rgba(4, 63, 49, 0.7) 89.09%);
  background: linear-gradient(135.68deg, rgba(0, 0, 0, 0.7) 32.55%, rgba(4, 63, 49, 0.7) 89.09%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.heroimage .calc__btn {
  max-width: calc(
      105px + 52 * ((100vw - 320px) / 1600)
    );
  height: calc(
      63px + 32 * ((100vw - 320px) / 1600)
    );
  border: 1px solid var(--cl-green);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 500;
  font-size: calc(
    12px + 4 * ((100vw - 320px) / 1600)
  );
  line-height: 140%;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cl-white);
  position: relative;
}

.heroimage .calc__btn::after {
  background: var(--cl-green);
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.heroimage .calc__btn:hover {
  color: var(--cl-white);
}

.heroimage .calc__btn:hover::after {
  left: 0;
  width: 100%;
}

.heroimage .calc__btn:active {
  top: 2px;
}

.about .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: calc(
      20px + 63 * ((100vw - 320px) / 1600)
    );
}

.about .img__wrapper {
  width: 50%;
  position: relative;
}

.about .img__wrapper .first__img {
  position: absolute;
  width: 90%;
  height: 90%;
  z-index: 2;
  top: 0;
  right: 0;
}

.about .img__wrapper .second__img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90%;
  height: 90%;
}

.about .img__wrapper .second__img-bg {
  position: absolute;
  left: 0;
  top: 0;
  background: -o-linear-gradient(93.03deg, rgba(4, 63, 49, 0.8) 22.9%, rgba(0, 0, 0, 0.8) 106.19%);
  background: linear-gradient(356.97deg, rgba(4, 63, 49, 0.8) 22.9%, rgba(0, 0, 0, 0.8) 106.19%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  width: 100%;
  height: 100%;
}

.about .img__wrapper img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.about .description {
  width: 50%;
}

.about .description h2:nth-child(1)  {
  margin-bottom: 0px;
}

.about .description p {
  font-size: calc(
    14px + 2 * ((100vw - 320px) / 1600)
  );
  line-height: 150%;
  color: var(--cl-black);
  margin-bottom: 20px;
}

.about .description span {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: calc(
    16px + 2 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: var(--cl-green);
  margin-bottom: 20px;
}

.about .description ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 37px;
}

.about .description ul li {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--cl-black);
  position: relative;
  padding-left: calc(
      27px + 14 * ((100vw - 320px) / 1600)
    );
}

.about .description ul li::after {
  background: url(../img/svg/bullet.svg) no-repeat 0 0/cover;
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: calc(
      20px + 11 * ((100vw - 320px) / 1600)
    );
  height: calc(
      15px + 8 * ((100vw - 320px) / 1600)
    );
}

.gallery .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 40px;
}

.gallery h2 b:nth-child(2) {
  background: -o-linear-gradient(258.56deg, #043f31 47.94%, #000000 197.29%);
  background: linear-gradient(191.44deg, #043f31 47.94%, #000000 197.29%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.gallery .item {
  margin: 0 15px;
  position: relative;
  border: 2px solid var(--cl-green);
}

.gallery .item .name {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 264px;
  width: 100%;
  height: calc(
      34px + 30 * ((100vw - 320px) / 1600)
    );
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: url(../img/header__bg.png);
  font-weight: 500;
  font-size: calc(
    16px + 2 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: var(--cl-black);
}

.gallery .btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
}

.gallery .btns .counter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
}

.gallery .btns .line {
  width: 49px;
  height: 1px;
  background: var(--cl-green);
}

.gallery .btns .arrows {
  cursor: pointer;
}

.gallery .btns .arrow__right {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.products h2 b:nth-child(2) {
  background: -o-linear-gradient(258.56deg, #043f31 47.94%, #000000 197.29%);
  background: linear-gradient(191.44deg, #043f31 47.94%, #000000 197.29%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.products .items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: calc(
      20px + 20 * ((100vw - 320px) / 1600)
    );
}

.products .item {
  width: 100%;
  height: 683px;
  padding: 32px;
  position: relative;
}

.products .item .img {
  max-width: 510px;
  display: block;
}

.products .item__bg {
  position: absolute;
  right: 0;
  bottom: 6%;
  width: 93%;
  height: 80%;
  background: var(--cl-green);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.products .item img {
  height: 100%;
  position: relative;
  margin-bottom: 14px;
  object-fit: cover;
}

.products .item .description {
  position: relative;
  padding-left: 46px;
  padding-bottom: 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.products .item .description__top span {
  font: normal 700 calc(
   18px + 4 * ((100vw - 320px) / 1600)
  )/143% "Montserrat";
  color: var(--cl-white);
}

.products .item .description__top p {
  font-weight: 500;
  font-size: calc(
    14px + 2 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: var(--cl-white);
}

.products .item .description__lower {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.products .item .description__lower ul {
  margin-top: 14px;
  font-weight: 500;
  font-size: calc(
    14px + 2 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: #ffffff;
}

.products .item .description__lower ul span {
  font-weight: 600;
}

.callback {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  background: -o-linear-gradient(258.56deg, #043f31 47.94%, #000000 197.29%);
  background: linear-gradient(191.44deg, #043f31 47.94%, #000000 197.29%);
  padding: 40px 0 54px;
  padding-right: 108px;
}

.callback img {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 356px;
}

.callback .form__wrapper {
  position: relative;
  z-index: 2;
  width: auto !important;
}

.callback .form__wrapper h3 {
  font-weight: 700;
  font-size: calc(
    18px + 12 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: var(--cl-white);
  margin-bottom: 10px;
}

.callback .form__wrapper .sub__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 143%;
  color: var(--cl-white);
  display: block;
  margin-bottom: 37px;
}

.callback .form__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.callback .form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.callback .form-group .help-message {
  position: absolute;
  left: 0;
  bottom: -42px;
}

.callback .form-group label {
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 143%;
  color: var(--cl-white);
}

.callback .form-group input {
  width: 213px;
  height: 50px;
  background: var(--cl-white);
  padding-left: 15px;
}

.callback .form__wrapper .btn {
  width: 230px;
  border: 1px solid var(--cl-white);
  color: var(--cl-white);
}

.contacts {
  position: relative;
  padding-bottom: 100px;
}

.contacts h2 {
  background: -o-linear-gradient(258.56deg, #043f31 47.94%, #000000 197.29%);
  background: linear-gradient(191.44deg, #043f31 47.94%, #000000 197.29%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-align: right;
}

.contacts .content {
  position: relative;
  z-index: 2;
}

.contacts .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.contacts .map {
  flex: 1;
  width: 100%;
  height: 100%;
}

.contacts .info {
  margin-top: 58px;
  background: -o-linear-gradient(238.85deg, rgba(4, 63, 49, 0.8) 39.87%, rgba(0, 0, 0, 0.8) 122.78%);
  background: linear-gradient(211.15deg, rgba(4, 63, 49, 0.8) 39.87%, rgba(0, 0, 0, 0.8) 122.78%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  max-width: 408px;
  padding: 40px;
}

.contacts .info a:hover {
  text-decoration: underline;
}

.contacts .info h3 {
  font-weight: 700;
  font-size: calc(
    18px + 12 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: var(--cl-white);
  margin-bottom: 30px;
}

.contacts .info ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.contacts .info li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  font-weight: 400;
  font-size: 16px;
  line-height: 143%;
  color: var(--cl-white);
}

.contacts .info li span {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.contacts .info p:nth-of-type(1) {
  font-style: italic;
  font-weight: 500;
  font-size: calc(
    16px + 2 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: var(--cl-white);
  margin-bottom: 15px;
}

.contacts .info p:nth-of-type(2) {
  font-size: calc(
    14px + 2 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: var(--cl-white);
}

.contacts .info p:nth-of-type(2) a {
  font-weight: 500;
}

.calc .heroimage__calc {
  background: url(../../images/calc.png) no-repeat 0 0/cover;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: calc(
      445px + 100 * ((100vw - 320px) / 1600)
    );
}

.calc .heroimage__calc .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(37, 35, 35, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.calc .heroimage__calc h1 {
  position: relative;
  margin-bottom: 49px;
  font: calc(
   28px + 34 * ((100vw - 320px) / 1600)
  )/140% var(--font-prostoOne);
}

.calc .heroimage__calc ul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 26px;
}

.calc .heroimage__calc ul li {
  position: relative;
  font-size: 16px;
  line-height: 120%;
  text-transform: uppercase;
  color: var(--cl-white);
}

.calc .heroimage__calc ul li:not(:last-of-type)::after {
  background: url(../img/svg/arrow-right.svg) no-repeat 0 0/cover;
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 6px;
  height: 10px;
}

.calc__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  gap: calc(
      30px + 30 * ((100vw - 320px) / 1600)
    );
  padding: 70px 0 150px;
}

.calc__form h5 {
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  color: var(--cl-black);
}

.calc__form input {
  height: 60px;
  border: 1px solid var(--cl-green);
  padding-left: 20px;
}

.calc__form .line {
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, color-stop(1.05%, rgba(4, 63, 49, 0.1)), color-stop(51.64%, #043f31), color-stop(102.04%, rgba(4, 63, 49, 0.1)));
  background: -o-linear-gradient(left, rgba(4, 63, 49, 0.1) 1.05%, #043f31 51.64%, rgba(4, 63, 49, 0.1) 102.04%);
  background: linear-gradient(90deg, rgba(4, 63, 49, 0.1) 1.05%, #043f31 51.64%, rgba(4, 63, 49, 0.1) 102.04%);
  margin-bottom: 30px;
}

.calc__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: calc(
      20px + 10 * ((100vw - 320px) / 1600)
    );
  margin-bottom: 40px;
}

.calc__result {
  background: -o-linear-gradient(258.56deg, #043f31 47.94%, #000000 197.29%);
  background: linear-gradient(191.44deg, #043f31 47.94%, #000000 197.29%);
  -webkit-box-shadow: 116px 199px 92px rgba(0, 0, 0, 0.01), 65px 112px 78px rgba(0, 0, 0, 0.05), 29px 50px 57px rgba(0, 0, 0, 0.09), 7px 12px 32px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 116px 199px 92px rgba(0, 0, 0, 0.01), 65px 112px 78px rgba(0, 0, 0, 0.05), 29px 50px 57px rgba(0, 0, 0, 0.09), 7px 12px 32px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  padding: 63px 55px 32px;
}

.calc__result span {
  font-weight: 500;
  font-size: 16px;
  line-height: 120%;
  color: #ffffff;
}

.calc__result .counts:not(:last-child) {
  margin-bottom: 30px;
}

.calc__result .counts span {
  font-weight: 400;
  font-size: calc(
    18px + 4 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
}

.calc__result .counts .count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  font-weight: 700;
  font-size: calc(
    30px + 20 * ((100vw - 320px) / 1600)
  );
  line-height: 143%;
  color: var(--cl-white);
}

.calc__result .counts__price {
  margin-bottom: 14px;
}

.calc__result .line {
  width: 100%;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, color-stop(1.05%, rgba(255, 255, 255, 0.1)), color-stop(51.64%, #ffffff), color-stop(102.04%, rgba(255, 255, 255, 0.1)));
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0.1) 1.05%, #ffffff 51.64%, rgba(255, 255, 255, 0.1) 102.04%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1.05%, #ffffff 51.64%, rgba(255, 255, 255, 0.1) 102.04%);
  margin-bottom: 30px;
}

.error_404 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 20px;
}

.error_404 .wrap {
  max-width: 936px;
}

.error_404 span {
  font: calc(
   25px + 25 * ((100vw - 320px) / 1600)
  )/120% var(--font-prostoOne);
  text-align: center;
  text-transform: uppercase;
  color: var(--cl-black);
  margin-bottom: calc(
      20px + 40 * ((100vw - 320px) / 1600)
    );
}

.footer {
  background: -o-linear-gradient(258.56deg, #043f31 47.94%, #000000 197.29%);
  background: linear-gradient(191.44deg, #043f31 47.94%, #000000 197.29%);
  padding: 23px 0px;
}

.footer .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.footer .logo {
  width: calc(
      103px + 52 * ((100vw - 320px) / 1600)
    );
  height: calc(
      35px + 18 * ((100vw - 320px) / 1600)
    );
}

.footer .logo svg {
  width: 100%;
  height: auto;
}

.footer .logo svg path {
  fill: var(--cl-white);
}

.footer .social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}

.footer .social a {
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid var(--cl-white);
  border-radius: 50%;
}

.footer .social a:hover {
  background: var(--cl-white);
}

.footer .social a:hover svg path {
  fill: var(--cl-green);
}

.footer .social svg path {
  fill: var(--cl-white);
}

.footer .merf {
  font-size: 16px;
  line-height: 143%;
  color: var(--cl-white);
}

.footer .merf:hover {
  text-decoration: underline;
}

@supports (-webkit-appearance:none) {
  body {
    background-image: url(../img/header__bg.webp);
  }

  .custom__ul li::after {
    background-image: url(../img/svg/bullet.svg);
  }

  .header {
    background-image: url(../img/header__bg.webp);
  }

  .heroimage {
    background-image: url(../../images/heroimage.webp);
  }

  .gallery .item .name {
    background: url(../img/header__bg.webp);
  }

  .calc .heroimage__calc {
    background-image: url(../../images/calc.webp);
  }

  .calc .heroimage__calc ul li:not(:last-of-type)::after {
    background-image: url(../img/svg/arrow-right.svg);
  }
}

@media screen and (min-width: 991px) {
  .products .item {
    padding: 20px;
  }

  .products .item:hover .item__bg {
    width: 100%;
    height: 100%;
    bottom: 0;
  }

  .products .item:hover .description {
    padding-bottom: 60px;
  }

  .products .item:hover .description__lower {
    opacity: 1;
    overflow: visible;
  }

@supports (-webkit-appearance:none) {

}
}

@media screen and (max-width: 991px) {
  .section {
    margin-bottom: 56px;
  }

  .header .menu__overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: var(--cl-white2);
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

  .header .menu__overlay.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .header .menu {
    position: relative;
    z-index: 21;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 20px;
  }

  .header .menu__icon {
    display: block;
  }

  .header .adress {
    margin: 0;
    text-align: center;
  }

  .header .wrap {
    margin: 0;
  }

  .header .social {
    margin: 0;
  }

  .about .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .about .img__wrapper {
    width: 100%;
    height: 340px;
  }

  .about .description {
    width: 100%;
  }

  .products .items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .products .item {
    padding: 20px;
  }

  .products .item__bg {
    width: 100%;
    height: 100%;
  }

  .products .item .description {
    padding-left: 0px;
  }

  .products .item .description__lower {
    position: relative;
    opacity: 1;
    overflow: visible;
  }

  .callback {
    padding: 20px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .callback img {
    display: none;
  }

  .callback .form {
    width: 100% !important;
  }

  .callback .form__wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 50px;
  }

  .callback .form__group {
    width: 100%;
  }

  .callback .form__group input {
    width: 100%;
  }

  .callback .form .btn {
    width: 100%;
    max-width: 100%;
  }

  .contacts {
    padding: 0;
  }

  .contacts .info {
    padding: 20px;
    margin-top: 20px;
    max-width: 100%;
  }

  .contacts .info h3 {
    margin-bottom: 20px;
  }

  .contacts .map {
    position: static;
    height: 400px;
  }

  .calc .heroimage__calc h1 {
    margin-bottom: 20px;
  }

  .calc .heroimage__calc ul {
    gap: 20px;
  }

  .calc__main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 70px 0 75px;
  }

  .calc__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
  }

  .calc__form .line {
    display: none;
  }

  .calc__result {
    padding: calc(
      20px + 40 * ((100vw - 320px) / 1600)
    );
  }

  .calc__group {
    width: 100%;
    margin-bottom: 0px;
  }

@supports (-webkit-appearance:none) {

}
}

@media screen and (max-width: 768px) {
  .gallery .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 10px;
  }

  .gallery .item {
    padding-right: 0px;
  }

  .gallery .item .name {
    max-width: 100%;
  }

  .footer .merf {
    display: none;
  }

@supports (-webkit-appearance:none) {

}
}

@media screen and (max-width: 420px) {
  .calc__form {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

@supports (-webkit-appearance:none) {

}
}