@media (max-width: 1230px) {
	.nav .nav-list {
		position: absolute;
		top: 0;
		left: -100%;
		height: 100dvh;
		 align-items: center;
    z-index: 100;
    padding: 46px 30px;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    font-size: 28px;
		-webkit-transition: all 0.4s;
    transition: all 0.7s;
	}

	.nav-button {
		display: block;
		fill: #ed6866;
			-webkit-transition: all 0.4s;
    transition: all 0.7s;
	}






	.nav.open .nav-list {
    position: fixed;
    top: 0;
/*    bottom: 0;*/
    left: 0;
 height: 100dvh;
    width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    z-index: 100;
    padding: 46px 30px;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    font-size: 28px;
    /* font-weight: 600; */
}

	.nav-link {
		color: #fff;
	}

	.nav-link.active {
		color: #fb2740;
	}

	.nav-button {
		position: absolute;
		z-index: 100;
		top: 46px;
		right: 30px;

	}

    .nav.open .nav-button {
        position: fixed;
        /*-webkit-transition: all 0.2s;
    transition: all 0.5s;*/
    }
	.header {
		
		padding-bottom: 0px;
	}
	.header-nav {
		margin-bottom: 50px;
	}

	.header-row {
		flex-direction: column;
		align-items: center;
		row-gap: 64px;
	}

	.header-content {
		margin-top: 0;
	}

	.header-img {
		text-align: center;
		max-width: 50%;
    	margin-bottom: 20px;
	}
	.row {
	 justify-content: space-between;
	  gap: 15px;
	}

}

@media (max-width: 700px) {
	
	.header {
/*		height: 100vh;*/
		padding-bottom: 20px;
	}
	.header-img {
		text-align: center;
		max-width: 80%;
    	margin-bottom: 20px;
	}
	.header-heading {
		font-size: 34px;
		line-height: 1.3;
	}

	.header-heading span {
		font-size: 28px;
	}

	.services {
		padding: 60px 0;
	}
	.flexbox {
    position: relative;
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
	}
	.portfolio {
		padding: 60px 0;
	}

	.portfolio-title {
		margin-bottom: 50px;
	}

	.project-img {
		margin-bottom: 30px;
	}

	.project + .project {
		margin-top: 55px;
	}

	.contacts {
		padding: 60px 0;
	}

	.contacts-title {
		margin-bottom: 20px;
	}

	.contacts-content {
		margin-bottom: 20px;
	}

	.contacts-button {
		margin-bottom: 70px;
	}

	.contacts-social {
		column-gap: 50px;
		margin-bottom: 20px;
	}
	.row {
	  flex-wrap: wrap;
	  gap: 20px;
	}
}