@charset "UTF-8";
@font-face {
  font-family: "Amazing Grotesk Demi";
  src: url("../fonts/Amazing-Grotesk-Demi.eot");
  src: local("☺"), url("../fonts/Amazing-Grotesk-Demi.woff") format("woff"), url("../fonts/Amazing-Grotesk-Demi.ttf") format("truetype"), url("../fonts/Amazing-Grotesk-Demi.svg") format("svg");
  font-weight: 500;
  font-style: normal;
}
/*================null=======================*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

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

body {
  height: 100%;
  width: 100%;
  line-height: 1;
  font-size: 14px;
  font-weight: 400;
  font-family: "PT Sans", sans-serif;
  min-width: 320px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

nav, footer, header, aside {
  display: block;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

input, button, textarea {
  font-family: "Bebas Neue", cursive;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Amazing Grotesk Demi";
}

ul li {
  list-style: none;
}

a {
  text-decoration: none;
}

/*=======================================*/
.wrapper {
  padding-left: 15px;
  padding-right: 15px;
}

.container {
  position: relative;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/*=============header=====================*/
.nav-header__block, .nav-header__list, .header__lang, .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header {
  padding: 30px 0;
}

.header {
  width: 100%;
}

.header--top {
  margin-bottom: 30px;
}

.header__lang > li:not(:last-child) {
  margin-right: 11px;
}
.header__lang > li {
  align-items: center;
}

.lang-header__item {
  display: block;
  width: 19px;
  font-family: "Bebas Neue", cursive;
  font-size: 0.857em;
  font-weight: 400;
  text-align: center;
  line-height: 1.583;
  letter-spacing: 0.083em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #000000;
}
.lang-header__item.active {
  text-decoration: none;
  color: #ffffff;
  background-color: #000000;
}

.header__order {
  font-family: "Amazing Grotesk Demi";
  font-size: 1.071em;
  font-weight: 500;
  line-height: 1.267;
  text-transform: uppercase;
  text-decoration: underline;
  color: #000000;
}

.header__nav {
  width: 100%;
}

.nav-header__block > li:not(:last-child) {
  margin-right: 47px;
}
@media (max-width: 860px) {
  .nav-header__block {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-header__block li:not(:last-child) {
    margin-bottom: 15px;
    margin-right: 0;
  }
}

.nav-header__link {
  font-family: "Amazing Grotesk Demi";
  font-size: 1.071em;
  line-height: 1.267;
  text-transform: uppercase;
  color: #000000;
}

.nav-header__logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 860px) {
  .nav-header__logo img {
    width: 150px;
  }
  .nav-header__logo {
    top: 18px;
  }
}

.logo-header__text {
  font-size: 0.714em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: #000000;
}

.logo-header__img {
  margin-bottom: 10px;
}

/*=============content====================*/
.hero {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-left: auto;
  margin-right: auto;
  max-width: 1366px;
}
.hero > :nth-child(2n) {
  background-color: #000000;
  padding: 82px 62px 77px;
}
@media (max-width: 860px) {
  .hero {
    flex-direction: column;
  }
  .hero .hero__col {
    width: 100%;
  }
  .hero > :nth-child(2n) {
    padding: 40px 20px 20px;
  }
}

.hero__col {
  max-width: 683px;
  width: 50%;
}

.hero__img {
  height: 100%;
}
.hero__img img {
  height: 100%;
  width: 100%;
}

.hero__title {
  margin-bottom: 30px;
  font-size: 3.571em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #ffffff;
}

.hero__text {
  margin-bottom: 30px;
  font-size: 1.071em;
  line-height: 1.667;
  letter-spacing: 0.15em;
  color: #ffffff;
}

.hero__btn {
  display: flex;
  font-size: 1.071em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.btn-primary {
  display: inline-block;
  width: 155px;
  height: 50px;
  margin-right: 15px;
  padding-left: 33px;
  padding-right: 33px;
  font-family: "Bebas Neue", cursive;
  line-height: 50px;
  text-align: center;
  color: #000000;
  background-color: #ffffff;
}

.link-primary {
  font-family: "Bebas Neue", cursive;
  line-height: 50px;
  text-decoration: underline;
  color: #ffffff;
}

.products {
  padding-top: 75px;
  padding-bottom: 75px;
}

.products__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
@media (max-width: 860px) {
  .products__list {
    flex-wrap: wrap;
  }
  .products__list > .products__item {
    max-width: 225px;
  }
}

.item-products__img {
  display: block;
  max-width: 220px;
  margin-bottom: 30px;
}

.item-products__title {
  margin-bottom: 30px;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000000;
}

.item-products__text {
  margin-bottom: 30px;
  padding-right: 35px;
  font-size: 1.071em;
}

.btn-secondary {
  display: block;
  font-size: 1.071em;
  letter-spacing: 0.1em;
  background-color: #000000;
  color: #ffffff;
}

.link-secondary {
  font-size: 1.071em;
  color: #000000;
}

.why {
  display: flex;
  flex-wrap: wrap;
}

.why__col {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
}
.why__col:first-child {
  background-color: #000000;
}
.why__col:last-child {
  background-color: #ebebeb;
}

.col-top__title {
  width: 50%;
  font-size: 3.571em;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
}
@media (max-width: 860px) {
  .col-top__title {
    font-size: 2.5em;
  }
}

.col-top__img {
  display: block;
  height: 100%;
  width: 50%;
}

.col-bottom__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 50px 200px;
}

.col-bottom__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: calc(50% - 20px);
  margin-bottom: 50px;
}

.col-bottom__title {
  margin-bottom: 30px;
  font-size: 25px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.col-bottom__text {
  font-size: 1.071em;
  letter-spacing: 0.1em;
}

.svg__icon {
  width: 100px;
  height: 100px;
}
.svg__icon > use {
  display: inline-block;
}
@media (max-width: 860px) {
  .svg__icon {
    width: 170px;
    height: 170px;
  }
}

.contacts__top {
  padding-top: 80px;
  padding-bottom: 25px;
}

.contacts__top-title {
  font-size: 50px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}

.contacts__top-list {
  display: flex;
  flex-wrap: wrap;
}

.contacts__top-item {
  flex: 0 0 50%;
  font-size: 1.071em;
  line-height: 1.8em;
  margin-bottom: 30px;
}

.contacts__top-svg {
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
}

.contacts__top-link {
  display: inline-block;
  color: #000000;
  margin-left: 10px;
}

.contacts__content {
  display: flex;
}
@media (max-width: 860px) {
  .contacts__content {
    flex-direction: column;
  }
}

.contacts__content-col {
  flex: 0 0 50%;
}
.contacts__content-col img {
  display: inline-block;
  width: 100%;
  max-height: 495px;
  object-fit: cover;
}
.contacts__content-col:last-child {
  background-color: #000000;
}

.contacts__content-form {
  padding: 50px 60px;
}

.form-contacts__title {
  font-size: 1.785em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 30px;
}

.form-contacts__body {
  max-width: 375px;
}
.form-contacts__body textarea {
  resize: none;
  height: 100px;
  padding: 10px 18px;
}

.form-contacts__input {
  display: block;
  width: 100%;
  height: 50px;
  font-size: 1.071em;
  color: #959595;
  background-color: #252525;
  border: 2px solid #959595;
  border-radius: 0;
  padding: 0 20px;
  margin-bottom: 30px;
}

.form-contacts__btn {
  font-size: 1.071em;
}

/*=============footer====================*/
.footer__body {
  display: flex;
  height: 125px;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 860px) {
  .footer__body {
    flex-direction: column;
  }
}

@media (max-width: 860px) {
  .footer__col:last-child {
    margin-top: 30px;
    order: -1;
  }
}

.footer__text {
  font-size: 1.071em;
  line-height: 1.667;
  color: #4d4d4d;
}
.footer__text a {
  text-decoration: underline;
  color: inherit;
}
.footer__text a:hover {
  text-decoration: none;
}