@media screen and (max-width:1400px) {
	.projects > a p {
		right: 12px;
		bottom: 12px;
		width:calc(100% - 24px);
	}
}
@media screen and (max-width:1200px) {
	nav ul {
		gap:15px;
	}
	.btn, .buttons .btn {
		padding: 10px 15px;
	}
	#banner h1 {
		font-size: 40px;
	}
	#banner .col-left {
		max-width: 645px;
	}
	#banner .buttons {
		gap:20px;
	}
	#banner .desc {
		padding: 20px 20px;
		margin-left: 20px;
	}
	#banner {
		padding-bottom: 90px;
	}
	#banner .img2 {
		bottom: -90px;
	}
	.services > div > div {
		padding: 15px;
	}
	.services svg {
		right: 15px;
		bottom: 15px;
	}
	.services .title {
		font-size: 14px;
		padding-right: 20px;
	}
	.services > div > div, .services > div {
		height: 270px;
	}
	#projects .top {
		flex-wrap: wrap;
		gap:20px;
	}
	.projects {
		display: flex;
		flex-wrap: wrap;
		gap:10px;
	}
	.projects > a {
		max-width: calc(50% - 5px);
		width: 100%;
	}
	.projects > a:first-child {
		max-width: 100%;
	}
	.projects > a img {
		height: 58vw;
	}
	.projects > a:first-child img {
		height: 58vw;
	}
	.projects > a p {
		right: 20px;
		bottom: 20px;
		width: calc(100% - 40px);
		font-size: 18px;
	}
	#projects .more {
		max-width: 100%;
	}
	.garantee {
		flex-wrap: wrap;
		justify-content: center;
	}
	.garantee > div {
		max-width: calc(50% - 10px);
		padding: 30px;
	}
	.garantee .icon, .garantee .title {
		margin:0 0 30px;
	}
	#prices .d-flex {
		flex-wrap: wrap;
		justify-content: center;
	}
	#prices .col-left {
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin-bottom: 40px;
	}
	.form > img {
		max-width: 250px;
	}
	#contacts .name {
		display: none;
	}
	.form > img {
		display: none;
	}
	#form .form > div {
		width: 100%;
	}
	#prices .btn {
		padding: 10px 20px;
	}
}
@media screen and (max-width:767px) {
	header nav {
		position: absolute;
		left: 0;
		top:100%;
		width: 100%;
		z-index: 2;
		background: #272727;
		padding: 20px 15px;
		display: none;
		border-bottom: 1px solid #474747;
	}
	.container {
		padding: 0 15px;
	}
	header nav ul {
		display: block;
	}
	header nav li + li {
		margin-top: 15px;
	}
	header nav a {
		font-size: 18px;
	}
	.open-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		justify-content: flex-end;
	}
	.btn, .buttons .btn {
		font-size: 14px;
	}
	.buttons {
		justify-content: center;
	}
	body {
		font-size: 15px;
	}
	header .btn {
		padding: 7px 12px;
		font-size: 14px;
	}
	header .btn {
		margin-left: auto;
	}
	.home-link {
		max-width: 100px;
	}
	#banner {
		padding: 0;
	}
	#banner .col-left {
		padding: 0 0 30px;
		max-width: 100%;
	}
	#banner .col-right {
		max-width: 100%;
		padding-bottom: 40px;
	}
	#banner .d-flex {
		flex-wrap: wrap;
		margin:0;
	}
	#banner .img1 {
		display: none;
	}
	#banner h1 {
		font-size: 26px;
		margin:0 0 25px;
		text-align: center;
	}
	#banner .buttons {
		gap:15px;
		margin:0 0 30px;
	}
	#banner .desc {
		padding: 20px 15px;
		text-align: center;
		margin:0;
		max-width: 100%;
	}
	#banner > div {
		padding-top: 150px;
	}
	.lang {
		bottom: 20px;
		right: 20px;
	}
	.lang p {
		width: 60px;
		height: 45px;
	}
	header {
		padding: 15px 0;
	}
	#banner .img2 {
		position: static;
		margin:0;
		max-width: 100%;
		transform:none;
		margin:0 auto;
	}
	#about {
		padding: 50px 0 40px;
	}
	#about .d-flex {
		gap:30px;
		flex-wrap: wrap;
	}
	#about .desc {
		max-width: 100%;
	}
	#about .col-left {
		max-width: 100%;
		padding: 0;
		width: 100%;
		order:2;
	}
	#about .col-left img {
		width: 100%;
	}
	#about .col-right {
		padding: 0;
		max-width: 100%;
		width: 100%;
	}
	.section-title, #about .section-title, #services .section-title, #garantee .section-title,
	#prices .section-title, #form .section-title, #reviews h2 {
		margin:0 0 25px;
		font-size: 28px;
	}
	#about .col-left:before {
		display: none;
	}
	#services {
		padding: 40px 0 50px;
	}
	#services .sub {
		margin:0 0 30px;
	}
	.services > div {
		max-width: 100%;
	}
	.services > div .more, .services > div:hover .more {
	    margin-top: 15px;
	    height: 50px;
	}
	.services .icon, .services > div:hover .icon {
		margin:0 0 15px;
		height: 60px;
	}
	#projects {
		padding: 50px 0;
	}
	.tabs {
		flex-wrap: wrap;
		gap:6px;
	}
	.tabs a {
		padding: 4px 7px;
		font-size: 14px;
	}
	#projects .top {
		margin:0 0 35px;
	}
	.projects > a:first-child img {
		height: 120vw;
	}
	.projects > a p {
		right: 15px;
		bottom: 15px;
		width: calc(100% - 30px);
		font-size: 12px;
	}
	#projects .more {
		padding: 15px;
	}
	#garantee {
		padding: 50px 0 20px;
	}
	.garantee > div {
		max-width: 100%;
		padding: 20px 15px;
	}
	.garantee .icon, .garantee .title {
		margin:0 0 20px;
	}
	.garantee .icon {
		height: 90px;
	}
	.garantee .title {
		font-size: 20px;
	}
	.garantee .title br {
		display: none;
	}
	#prices {
		padding: 50px 0;
	}
	#prices .desc {
		margin:0 0 20px;
	}
	#prices .link1 {
		margin: 0 0 20px;
		font-size: 15px;
	}
	#prices .btn {
		padding: 7px 10px;
		gap:10px;
	}
	#prices .btn img {
		max-width: 30px;
	}
	#prices .img:before, #prices .img:after {
		display: none;
	}
	#prices .col-right {
		max-width: 100%;
		padding: 0;
	}
	#prices .col-left {
		margin-bottom: 30px;
	}
	#prices .img img {
		width: 100%;
	}
	#form {
		padding: 50px 0;
	}
	form .d-flex > * {
		gap:15px;
	}
	.form input, .form select, .form textarea {
		margin:0 0 20px;
	}
	.form textarea {
		padding: 12px;
	}
	form .btn {
		width: 100%;
		justify-content: center;
	}
	#reviews {
		padding: 50px 0;
	}
	.rev {
		padding: 20px 15px;
	}
	.rev .stars {
		margin:0 0 15px;
	}
	#reviews .progress {
		display: none;
	}
	#contacts {
		padding: 20px 0;
	}
	#contacts .d-flex {
		flex-wrap: wrap;
		justify-content: center;
		gap:15px;
	}
	footer .home-link {
		display: none;
	}
	footer .copy {
		margin-top: 20px;
		padding: 15px 0;
	}
	.copy .d-flex {
		flex-wrap: wrap;
		justify-content: center;
		gap:15px;
		width:100%;
	}
	.copy p {
		width: 100%;
		text-align: center;
	}
	.footer-menu {
		gap:10px;
	}
	.social {
		margin-left: 15px;
	}
	footer nav {
		width: 100%;
	}
	footer nav ul {
		justify-content: space-between;
	}
}