:root {
	--text-color: #181819;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
	font-family: 'Century Gothic';
	font-size: 14px;
	height: 100%;
}
.container, .section {
	width: 1170px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
}
.header-wrapper {
	border-bottom: 1px solid #E8EAEF;
}
.header-content {
    display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	padding: 30px 30px;
}
.header-icon_link {
	margin-right: 20px;
	color: #393c49;
}
.header-icon_link:hover {
	color: #9094A6;
}
.header-languages {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.language-link {
	margin-right: 20px;
	text-decoration: none;
	color: #9999A0;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
}
.active-language {
	position: relative;
	color: var(--text-color);
}
.language-link:hover {
	color: var(--text-color);
}
.active-language::before {
	content: '';
    display: block;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    width: 3px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 50%;
    background-color: #181819;
}
.headermob-nav {
	display: none;
}
.nav-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 30px;
	margin-bottom: 10px;
}
.nav-list_link {
	text-decoration: none;
	color: var(--text-color);
}
.nav-list_link:hover {
	color: #9094A6;
}
.dot {
	position: relative;
}
.nav-list_item {
	list-style: none;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.dot::after {
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: -63px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #181819;
    transform: translateY(-50%);
}
.main-banner {
    position: relative;
    overflow: hidden;
	height: calc(100vh - 160px);
}
.main-banner video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    transform: translate(-50%,-50%);
}
.main-banner::after {
	content: url(../images/pause.svg);
    position: absolute;
    right: 60px;
    bottom: 60px;
    z-index: 2;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.main-banner:hover:after {
	content: url(../images/play-video.svg);
    position: absolute;
    right: 60px;
    bottom: 60px;
    z-index: 2;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.new-projects_title {
	font-weight: 400;
	display: table;
	text-align: center;
	font-size: 36px;
	position: relative;
	margin: 60px auto;
}
.new-projects_title::before {
	content: '';
    display: block;
    position: absolute;
    top: 50%;
	left: calc(100% + 30px);
    width: 5px;
    height: 5px;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #181819;
}
.new-projects_title::after {
	content: '';
    display: block;
    position: absolute;
    top: 50%;
	right: calc(100% + 30px);
    width: 5px;
    height: 5px;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #181819;
}
.new-projects-catalog {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}
.new-projects-card {
	margin-bottom: 60px;
	cursor: pointer;
	max-width: 350px;
}
.new-projects-name {
	margin-top: 20px;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	color: var(--text-color);
}
.projects-image {
	transition: 0.3s;
	width: 100%;
}
.projects-image:hover {
	filter: brightness(80%);
}
.order-wrapper {
	text-align: center;
	padding: 60px 300px;
	background-color: #FBFBFB;
}
.order-title {
	font-size: 36px;
	font-weight: 400;
	margin-bottom: 40px;
	color: var(--text-color);
}
.order-text {
	text-align: left;
	margin-bottom: 25px;
	font-size: 15px;
	color: var(--text-color);
}
#hide-content {
	overflow: hidden;
	height: 0;
}
.order-button {
	text-transform: uppercase;
	border: none;
	border-bottom: 1px solid #181819;
	color: var(--text-color);
	font-size: 14px;
	background-color: transparent;
	cursor: pointer;
	letter-spacing: 1px;
	font-weight: 300;
}
.order-button:hover {
	border-bottom: 1px solid transparent;
}
.footer-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #24262D;
	padding: 20px;
}
.footer-icon_link {
	margin-right: 20px;
	color: #949597;
}
.footer-icon_link:hover {
	color: #9094A6;
}
.footer-rights {
	color: #C9CBD0;
	font-size: 13px;
	position: relative;
	margin-right: 30px;
}
.footer-rights::before {
	content: "";
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #C9CBD0;
	top: 50%;
	left: -30px;
}
.footer-rights::after {
	content: "";
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #C9CBD0;
	top: 50%;
	right: -30px;
}
.footer-wrapper-mobile {
	display: none;
}

@media (max-width: 992px) {
	.header-icon_wrapper {
		display: none;
	}
	.nav-wrapper {
		display: none;
	}
	.main-banner {
		height: calc(100vh - 200px)
	}
	.headermob-nav {
		display: block;
	}
	.menu-btn{
		display: flex;
		align-items: center;
		position: absolute;
		top: 30px;
		left: 30px;
		width: 26px;
		height: 26px;
		cursor: pointer;
		z-index: 110;
	}
	   
	.menu-btn > span,
	.menu-btn > span::before,
	.menu-btn > span::after {
		display: block;
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #616161;
		transition-duration: .25s;
	}
	.menu-btn > span::before {
		content: '';
		top: -8px;
	}
	.menu-btn > span::after {
		content: '';
		top: 8px;
	}
	.menu-box{
		display: block;
		position: fixed;
		visibility: hidden;
		top: 0;
		z-index: 100;
		left: -100%;
		width: 300px;
		height: 100%;
		margin: 0;
		padding: 80px 0;
		list-style: none;
		background-color: #ECEFF1;
		box-shadow: 0 0 15px 0 rgb(0 0 0 / 20%);
		transition-duration: .25s;
	}
	.headermob-item {
		display: block;
		padding: 12px 24px;
		font-size: 20px;
	}
	.headermob-link {
		color: var(--text-color);
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	.headermob__social {
		padding: 12px 24px;
	}
	.headermob-social_link {
		margin-right: 20px;
		color: #393c49;
	}
	.headermob-social_link:hover {
		color: #9094A6;
	}
	.header-languages {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.headermob-languages {
		padding: 36px 24px;
		display: none;
	}
	
	#menu-toggle{
		opacity: 0;
	}
	#menu-toggle:checked ~ .menu-btn > span{
		transform: rotate(45deg);
	}
	#menu-toggle:checked ~ .menu-btn > span::before{
		top: 0;
		transform: rotate(0);
	}
	#menu-toggle:checked ~ .menu-btn > span::after{
		top: 0;
		transform: rotate(90deg);
	}
	#menu-toggle:checked ~ .menu-box{
		visibility: visible;
		left: 0;
	}
	.new-projects_title {
		margin: 30px auto;
	}
	.new-projects-card {
		margin-bottom: 30px;
		max-width: 350px;
	}
	.new-projects-card .projects-image {
		max-width: 100%;
	}
	.order-wrapper {
		text-align: center;
		padding: 30px 150px;
		background-color: #FBFBFB;
	}
}
@media (max-width: 768px) {
	.footer-wrapper {
		display: none;
	}
	.footer-wrapper-mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #24262D;
		padding: 20px;
		flex-direction: column;
	}
	.footer-mobile_icons {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 10px;
	}
	.new-projects_title {
		margin: 15px auto 30px;
	}
	.main-banner {
		height: calc(100vh - 300px)
	}
	.main-banner::after {
		content: url(../images/pause.svg);
		position: absolute;
		right: 30px;
		bottom: 30px;
		z-index: 2;
		width: 32px;
		height: 32px;
		cursor: pointer;
	}
	.main-banner:hover:after {
		content: url(../images/play-video.svg);
		position: absolute;
		right: 30px;
		bottom: 30px;
		z-index: 2;
		width: 32px;
		height: 32px;
		cursor: pointer;
	}
	.section {
		padding: 0 0;
	}
	.new-projects-card {
		margin-bottom: 30px;
		cursor: pointer;
		max-width: 270px;
	}
	.new-projects-name {
		font-size: 15px;
	}
	.new-projects-card .projects-image {
		max-width: 100%;
	}
	.order-wrapper {
		text-align: center;
		padding: 15px 75px;
		background-color: #FBFBFB;
	}
	.order-title {
		font-size: 28px;
	}
	.footer-rights {
		margin-right: 0;
		font-size: 14px;
	}
}
@media (max-width: 576px) {
	.header-languages {
		display: none;
	}
	.headermob-languages {
		display: flex;
		align-items: center;
		justify-content: start;
	}
	.header-logo_image {
		max-width: 100px;
	}
	.headermob-item {
		font-size: 12px;
	}
	.nav-list {
		padding: 20px 50px;
	}
	.main-banner {
		height: calc(100vh - 360px)
	}
	.new-projects_title {
		margin: 15px auto;
		font-size: 28px;
	}
	.new-projects-card {
		margin-bottom: 30px;
		cursor: pointer;
		max-width: 200px;
	}
	.new-projects-card .projects-image {
		max-width: 100%;
	}
	.new-projects-name {
		font-size: 14px;
	}
	.order-wrapper {
		text-align: center;
		padding: 15px 15px;
		background-color: #FBFBFB;
	}
	.order-title {
		font-size: 30px;
	}
	.order-text {
		margin-bottom: 20px;
		font-size: 14px;
	}
	.order-button {
		font-size: 14px;
	}
}
@media (max-width: 480px) {
	.new-projects_title {
		margin: 0px 0px 10px 0;
		font-size: 20px;
	}
	.main-banner {
		height: calc(100vh - 380px)
	}
	.menu-box {
		width: 200px;
	}
	.new-projects_title {
		margin: 15px auto;
	}
	.new-projects-card {
		margin-bottom: 15px;
		max-width: 170px;
	}
	.new-projects-card .projects-image {
		max-width: 100%;
	}
	.new-projects-name {
		font-size: 14px;
		margin-top: 10px;
	}
	.order-wrapper {
		text-align: center;
		padding: 15px 0;
		background-color: #FBFBFB;
	}
	.container {
		padding: 0 10px;
	}
	.order-title {
		margin-bottom: 20px;
	}
	.order-text {
		margin-bottom: 10px;
	}
	.footer-wrapper {
		justify-content: space-between;
	}
	.footer-icon_link {
		margin-right: 10px;
	}
	.footer-rights::before {
		left: -15px;
	}
	.footer-rights::after {
		right: -15px;
	}
}
@media (max-width: 420px) {
	.new-projects_title {
		line-height: normal;
		margin: 10px auto;
	}
	.main-banner {
		height: calc(100vh - 430px)
	}
	.new-projects-card {
		margin-bottom: 15px;
		max-width: 150px;
	}
	.new-projects-name {
		font-size: 14px;
		margin-top: 10px;
	}
	.footer-rights {
		font-size: 12px;
	}
}
@media (max-width: 300px) {
	.header-wrapper {
		padding: 10px;
	}
	.header-icon_link {
		margin-right: 5px;
	}
	.header-logo {
		margin-right: 15px;
	}
	.nav-list {
		padding: 0px 25px;
		flex-wrap: wrap;
	}
	.nav-list_link {
		padding: 10px;
	}
	.nav-list_item {
		font-size: 9px;
	}
	.new-projects_title {
		margin: 10px auto;
		font-size: 14px;
	}
	.new-projects-card {
		max-width: 130px;
	}
	.new-projects-card .projects-image {
		max-width: 100%;
	}
	.new-projects-name {
		font-size: 14px;
		margin-top: 10px;
	}
	.order-title {
		font-size: 25px;
		margin-bottom: 10px;
	}
	.order-button {
		font-size: 12px;
	}
	.footer-wrapper {
		justify-content: space-between;
	}
	.footer-icon_link {
		margin-right: 5px;
	}
	.footer-rights {
		font-size: 7px;
		margin-right: 0;
	}
	.footer-rights::before {
		left: -7px;
	}
	.footer-rights::after {
		right: -7px;
	}
}