* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}

:root {

	--color: #404C54;

	--color-dark: #1D252B;

	--color-title: #3D3D3D;

	--color-white: #fff;

	--color-primary: #1C6CE4;

	--color-gray: #EFF1F2;

	--color-disabled: #d0d4d7;

	--transition: .25s ease-out;

	--radius: 5px;

	--dark: #202328;

	--border-color: #E4E6E8;

	--footer-bg: #222227;

}

body {

	color: var(--color);

	font: 400 18px/28px "Nunito Sans", Arial, Helvetica, sans-serif;

	overflow-x: hidden;

}

html {

	scroll-behavior: smooth;

}

button {

	border: none;

	display: block;

	font: inherit;

	background-color: transparent;

	cursor: pointer;

}

.container {

	max-width: 1318px;

	width: 100%;

	margin: 0 auto;

	padding: 0 39px;

	position: relative;

}

.container.container-header {

	padding: 0 15px;

	position: relative;

}

.btn {

	background-color: var(--color-primary);

	color: var(--color-white);

	font-weight: 700;

	text-transform: uppercase;

	letter-spacing: 0.52px;

	font-size: 13px;

	text-align: center;

	padding: 6px 18px;

}

.title-section {

	color: var(--color-dark);

	font-size: 42px;

	font-weight: 700;

	line-height: 50px;

	max-width: 604px;

	padding-top: 10px;

	position: relative;

	z-index: 1;

}

.above-title {

	color: var(--color-primary);

	font-size: 14px;

	font-weight: 800;

	line-height: 26px;

	letter-spacing: 1.68px;

	text-transform: uppercase;

	position: relative;

	padding-right: 68px;

	display: inline-block;

}

.above-title::before {

	content: "";

	position: absolute;

	top: 50%;

	right: 0;

	transform: translateY(-50%);

	width: 62px;

	height: 2px;

	background-color: var(--color-primary);

}

.above-title-border {

	background-color: var(--color-primary);

	width: 62px;

	height: 2px;

	margin-bottom: 15px;

}

.desc-section {

	padding-top: 27px;

}

/* Header */

.header,

.nav-main__list,

.nav-main,

.header-action {

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.logo {

	display: flex;

}

.header {

	background-color: var(--color-white);

	padding: 16px 24px;

	position: fixed;

	top: 20px;

	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);

	max-width: 1288px;

	width: 100%;

	left: 50%;

	transform: translateX(-50%);

	z-index: 10;

}

.nav-main {

	gap: 30px;

	position: relative;

}

.nav-main__list {

	list-style-type: none;

	gap: 40px;

}

.nav-main__link {

	color: var(--color-dark);

	font-size: 16px;

	font-weight: 600;

	text-decoration: none;

}

.nav-main__link:hover {

	text-decoration: underline;

}

.header-action {

	gap: 30px;

}

.menu-toggle {

	width: 22px;

	height: 22px;

	background-image: url(../img/menu-dark.svg);

	position: absolute;

	background-size: contain;

	background-repeat: no-repeat;

	background-position: center;

	cursor: pointer;

	top: 3px;

	display: none;

	right: 0;

}

.menu-toggle_active {

	background-image: url(../img/x.svg);

}

.nav-main__list.top-menu_active {

	visibility: visible;

	opacity: 1;

	transition: opacity var(--transition), visibility var(--transition);

}

/* Main banner */

.main-banner {

	padding-top: 20px;

	position: relative;

	height: 100vh;

	min-height: 700px;

	display: flex;

	justify-content: center;

	flex-direction: column;

}

.main-banner__media {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	overflow: hidden;

	background-color: #a4a4a4;

}

.main-banner__media::before {

	content: "";

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	z-index: 5;

	background-color: rgba(0, 0, 0, .5);

}

.main-banner__media-video {

	position: absolute;

	left: 50%;

	top: 50%;

	min-height: 100%;

	min-width: 100%;

	object-fit: cover;

	transform: translate(-50%, -50%);

}

.main-banner__composition {

	color: var(--color-white);

	display: flex;

	justify-content: space-between;

	gap: 40px;

	position: relative;

  z-index: 6;

}

.main-banner__info {

	max-width: 857px;

}

.main-banner__title {

	font-size: 72px;

	font-weight: 800;

	line-height: 80px;

}

.main-banner__desc {

	padding-top: 36px;

	font-size: 24px;

	line-height: 33px;

	opacity: 0.8;

}

.main-banner-video {

	display: flex;

	align-items: center;

	align-self: flex-end;

	gap: 20px;

}

.main-banner-video__text {

	text-align: right;

	font-size: 26px;

	line-height: 29px;

}

.main-banner-video__text span {

	white-space: nowrap;

}

.main-banner-video__btn-wrap {

	width: 84px;

  height: 84px;

}

.main-banner-video__btn {

	border: 1px solid var(--color-white);

	border-radius: 50%;

	width: 84px;

	height: 84px;

	display: flex;

	align-items: center;

	justify-content: center;

}

.main-banner-video__btn-inner {

	background-color: var(--color-primary);

	border-radius: 50%;

	width: 64px;

	height: 64px;

	display: inline-block;

	position: relative;

}

.main-banner-video__btn-inner::before {

	content: "";

	position: absolute;

	border: 11px solid transparent;

	border-left: 18px solid var(--color-white);

	top: 50%;

	left: 50%;

	transform: translate(-17%, -50%);

}



/* Projects */

.projects-wrapper {

	padding-top: 100px;

}

.projects {

	display: flex;

	flex-wrap: wrap;

	margin: 0 -16px 0;

	width: calc(100% + 32px);

	counter-reset: projects__item;

}

.projects__item {

	background-color: var(--color-white);

	box-shadow: 0px 20px 40px rgba(178, 178, 178, 0.25);

	border: 1px solid rgba(178, 178, 178, 0.25);

	padding: 30px 40px 15px;

	width: calc((100% / 3) - 32px);

	margin: 0 16px 0 16px;

}

.projects__header {

	display: flex;

	align-items: center;

	gap: 20px;

}

.projects__icon {

	width: 72px;

	height: 72px;

}

.projects__title {

	color: var(--color-title);

	font-size: 26px;

	line-height: 24px;

	font-weight: 700;

}

.projects__desc {

	line-height: 27px;

	padding-top: 27px;

}

.projects__btn {

	font-size: 14px;

	font-weight: 800;

	letter-spacing: 1.12px;

	text-transform: uppercase;

	line-height: 50px;

	color: inherit;

	text-decoration: none;

	display: flex;

	align-items: center;

	gap: 8px;

}

.projects__btn:hover .projects__btn-arrow {

	transition: .3s;

	transform: translateX(5px);

}

.projects__btn-arrow {

	transition: .3s;

	font-size: 22px;

	color: var(--color-primary);

}

.projects__btn-wrapper {

	display: inline-block;

	padding-top: 10px;

}



/* About company */

.about-company {

	display: flex;

	gap: 114px;

	padding-top: 170px;

}

.about-company__img-wrapper {

	flex-basis: 538px;

}

.about-company__img {

	max-width: 100%;

	height: auto;

	display: block;

}

.about-company__text {

	flex-basis: 604px;

}



/* Carousel */

.owl-carousel .owl-nav {

	display: flex;

	justify-content: flex-end;

	padding-top: 40px;

	gap: 60px;

}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {

	background-color: var(--color-primary);

	width: 45px;

	height: 45px;

	display: flex;

	align-items: center;

	justify-content: center;

}

.owl-carousel .owl-nav button.owl-next.disabled, .owl-carousel .owl-nav button.owl-prev.disabled {

	background-color: var(--color-disabled);

}



/* Production */

.production-section {

	background-color: var(--color-white);

	position: relative;

	z-index: 2;

}

.production-section::before {

	content: "";

	background-color: var(--color-gray);

	position: absolute;

	width: 100%;

	height: 246px;

	left: 0;

	right: 0;

	bottom: 0;

}

.production {

	padding-top: 170px;

	display: flex;

	gap: 133px;

	position: relative;

	z-index: 2;

}

.production__statistic {

	display: flex;

	flex-direction: column;

	gap: 73px;

	padding-top: 46px;

}

.production__text {

	flex-basis: 716px;

}

.production__number {

	color: var(--color-primary);

	font-size: 64px;

	font-weight: 800;

	line-height: 50px;

}

.production__desc {

	padding-top: 18px;

}

.production-carousel {

	padding-top: 37px;

}

.production__arrow {

	color: var(--color-gray);

	font-size: 20px;

}

.number-slides,

.completed-works-number-slides {

	color: var(--color-dark);

	position: absolute;

	bottom: 7px;

  right: 95px;

}

.production-carousel__img {

	max-width: 100%;

	height: auto;

}



/* Company products */

.company-products-wrapper {

	background-color: var(--color-gray);

	/* padding: 35px 0 150px; when will be carousel */

	padding: 170px 0 150px;

}

.company-products {

	display: flex;

	flex-wrap: wrap;

	margin: 0 -16px 0;

	width: calc(100% + 32px);

	counter-reset: company-products__item;

	overflow: hidden;

}

.company-products__item {

	background-color: var(--color-white);

	border: 1px solid var(--border-color);

	border-bottom: 5px solid var(--color-primary);

	padding: 26px 24px;

	width: calc((100% / 3) - 32px);

	margin: 40px 16px 0 16px;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	position: relative;

}

.company-products__item::after {

	position: absolute;

	content: "";

	width: 60px;

	height: 116px;

	background: transparent;

	top: 1px;

	right: 29px;

	transform: rotate(-45deg);

	border-right: 1px solid var(--border-color);

	border-radius: 7px;

}

.company-products__item::before {

	position: absolute;

	content: "";

	width: 150px;

	height: 150px;

	background: var(--color-gray);

	top: -100px;

	right: -80px;

	transform: rotate(-45deg);

}

.company-products__title {

	color: var(--color-dark);

	font-size: 22px;

	font-weight: 700;

	line-height: 28px;

	max-width: 78%;

}

.company-products__desc {

	line-height: 24px;

	font-size: 16px;

	padding-top: 8px;

}

.company-products__img {

	padding-top: 37px;

	text-align: center;

}

.company-products__img img {

	max-width: 100%;

	height: auto;

	display: block;

	margin: 0 auto;

}



/* Completed works */

.completed-works-wrapper {

	padding: 170px 0 140px;

}

.completed-works__head {

	display: flex;

	justify-content: space-between;

	align-items: flex-end;

	padding-bottom: 40px;

}

.completed-works .projects__btn {

	line-height: 32px;

}

.completed-works-carousel__text {

	display: flex;

	justify-content: space-between;

	gap: 30px;

	padding-top: 63px;

}

.completed-works-carousel__title {

	flex-basis: 294px;

	color: var(--color-title);

	font-size: 26px;

	font-weight: 700;

	line-height: 32px;

}

.completed-works-carousel__desc {

	flex-basis: 819px;

}

.completed-works-carousel__img {

	max-width: 100%;

	height: auto;

}



/* Our blog */

.our-blog-wrapper {

	padding: 30px 0 140px;

}

.our-blog {

	display: flex;

	flex-wrap: wrap;

	margin: 0 -16px 0;

	width: calc(100% + 32px);

	counter-reset: our-blog__item;

}

.our-blog__item {

	background-color: var(--color-white);

	box-shadow: 0px 20px 40px rgba(178, 178, 178, 0.25);

	width: calc((100% / 3) - 32px);

	margin: 40px 16px 0 16px;

}

.our-blog__body {

	padding: 15px 24px 18px;

}

.our-blog__title {

	color: var(--color-dark);

	font-size: 22px;

	font-weight: 700;

}

.our-blog__desc {

	padding-top: 10px;

	font-size: 16px;

	line-height: 24px;

}

.our-blog__img {

	max-width: 100%;

	width: 100%;

	height: auto;

}

.our-blog__btn {

	padding-top: 2px;

}



/* Our partners */

.our-partners-wrapper {

	background: url(../img/our-partners.png) 50% 0%/cover no-repeat;

	padding: 62px 0;

	position: relative;

}

.our-partners-wrapper::before {

	content: "";

	background: rgba(0,0,0, .5);

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

}

.our-partners {

	display: flex;

	justify-content: center;

	gap: 30px;

}

.our-partners__text {

	padding-top: 30px;

}

.our-partners__title {

	color: var(--color-white);

}

.our-partners__desc {

	color: var(--color-white);

	padding-top: 25px;

	max-width: 68%;

}

.partners-icons {

	display: flex;

	gap: 100px;

	align-items: center;

	padding-top: 35px;

}

.partners__icon {

	max-width: 100%;

	height: auto;

}

.our-partners-form {

	max-width: 400px;

	width: 100%;

	background-color: var(--color-white);

	padding: 55px 40px 46px;

}

.our-partners-form__title {

	color: var(--color-title);

	font-size: 32px;

	font-weight: 700;

	text-align: center;

	padding-bottom: 50px;

}

.our-partners-form__input {

	width: 100%;

	border: 1px solid var(--border-color);

	padding: 16px;

	outline: none;

	margin-bottom: 20px;

	font-size: 14px;

}

.our-partners-form__btn {

	width: 100%;

	border: none;

	background-color: var(--color-primary);

	color: var(--color-white);

	font-size: 13px;

	text-transform: uppercase;

	font-weight: 400;

	letter-spacing: 0.52px;

	cursor: pointer;

	padding: 16px;

}



/* Footer */

.footer {

	background-color: var(--footer-bg);

	padding: 70px 0 0;

}

.contacts {

	display: flex;

	gap: 100px;

}

.contacts__box {

	flex-basis: 250px;

}

.contacts__title {

	color: var(--color-white);

	font-size: 16px;

	font-weight: 700;

}

.contacts__list {

	padding: 15px 0 0;

	margin: 0;

	list-style-type: none;

}

.contacts__item {

	display: flex;

	padding-bottom: 10px;

}

.contacts__item_flex {

	align-items: center;

}

.contacts__icon {

	color: var(--color-white);

	font-size: 20px;

}

.contacts__text,

.contacts__link {

	color: var(--color-white);

	font-size: 13px;

	opacity: 0.8;

	margin-left: 12px;

	text-decoration: none;

}

.contacts__text {

	line-height: 18px;

}

.social .contacts__list {

	display: flex;

	gap: 16px;

}

.footer__wrapper {

	display: flex;

	justify-content: space-between;

	padding-bottom: 55px;

	border-bottom: 2px solid rgba(255, 255, 255, 0.05);

}

.btn-top {

	color: var(--color-primary);

	border: 1px solid var(--color-primary);

	display: flex;

	padding: 12px;

}

.footer__btn {

	padding-top: 20px;

}

.footer-copy {

	padding: 28px 0;

	display: flex;

	justify-content: space-between;

}

.footer-copy__text {

	color: rgba(255,255,255, 0.5);

	font-size: 13px;

}

.footer-copy__list {

	padding: 0;

	margin: 0;

	list-style-type: none;

	display: flex;

}

.footer-copy__link {

	color: rgba(255,255,255, 0.8);

	font-size: 13px;

	text-decoration: none;

}

.footer-copy__list li {

	position: relative;

	padding: 0 11px;

}

.footer-copy__list li:last-child {

	padding-right: 0;

}

.footer-copy__list li:first-child {

	padding-left: 0;

}

.footer-copy__list li:first-child::before {

	content: "";

	position: absolute;

	width: 4px;

	height: 4px;

	background-color: #919193;

	border-radius: 50%;

	right: -5px;

	top: 50%;

	transform: translateX(-50%);

}

.footer-copy__link:hover {

	text-decoration: underline;

}