/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap'); */
html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

* {
	margin: 0;
	padding: 0;
}

:root {
	--bg-color: #282623;
	--white-color: white;
	--gold-color: #F0C54D;
	--gray-color: #d0d0d0;
}

body {
	background-color: var(--bg-color);
}

a {
	text-decoration: none;
	color: var(--white-color);
}

/* --------------- HEADER --------------- */

header {
	width: 100%;
	height: 100lvh;
	display: flex;
	flex-direction: column;
	background-position: center -500px;
	background-attachment: fixed;
	background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/headerBG.jpg');
}

nav {
	max-width: 1440px;
	min-width: 768px;
	/* border: 1px solid red; */
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
}

.nav-logo {
	flex-basis: 120px;
}

.nav-logo img {
	width: 100%;
}

.nav-center {
	width: 30%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.nav-center a {
	transition: .2s;

	&:hover {
		color: var(--gold-color);
	}
}

.nav-phone {
	width: 180px;
	display: flex;
	justify-content: space-around;
}

.fa-phone {
	color: white;
}

.nav-phone>a {
	color: var(--gold-color);
}

.header-section {
	max-width: 1440px;
	min-width: 768px;
	margin: 0 auto;
	height: 80lvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.header-section h1 {
	font-size: 60px;
	color: var(--gold-color);
}

.header-section p {
	font-size: 20px;
	color: var(--gray-color);
	max-width: 55%;
	margin: 10px 0 30px;
}

.header-section a {
	display: block;
	text-align: center;
	width: 180px;
	background-color: transparent;
	border: 1px solid var(--white-color);
	font-size: 18px;
	padding: 10px 0;
	border-radius: 3px;
	color: var(--gold-color);
	transition: .2s;

	&:hover {
		box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.822);
		border-color: var(--gold-color);
	}
}

.burger-menu {
	display: none;
}

/* --------------- Epoxy-Flake-Floor --------------- */

.Epoxy-Flake-Floor {
	max-width: 1440px;
	min-width: 768px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 10vh;
}

.title-img {
	display: flex;
	flex-direction: column;
	width: 40%;
}

.title-img h1 {
	font-size: 30px;
	font-weight: lighter;
	margin-bottom: 60px;
	color: var(--gold-color);
}

.title-img img {
	width: 100%;
	height: 350px;
	object-fit: cover;
}

.description-benefits {
	width: 52%;
}

.description-benefits p {
	color: var(--gray-color);
	font-size: 17px;
}

.description-benefits h2 {
	margin: 70px 0 15px;
	color: white;
	font-size: 21px;
}

.description-benefits ul {
	list-style: none;
}

.description-benefits ul li {
	margin: 0 0 15px;
	font-size: 17px;
	color: var(--gray-color);
}

.description-benefits ul li::before {
	content: "▶";
	color: var(--gold-color);
	margin-right: 10px;
}

/* --------------- About-Our-Work --------------- */

.About-Our-Work {
	max-width: 1440px;
	min-width: 768px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.line {
	align-self: flex-start;
	height: 30px;
	width: 10%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.line hr {
	border-color: var(--gold-color);
}

.about-work {
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.about-work h1 {
	font-size: 30px;
	font-weight: lighter;
	color: var(--white-color);
}

.about-work p {
	color: var(--gray-color);
	width: 80%;
	font-size: 17px;
}

.about-work a {
	display: block;
	text-align: center;
	width: 180px;
	background-color: transparent;
	border: 1px solid var(--white-color);
	font-size: 18px;
	padding: 10px 0;
	border-radius: 3px;
	color: var(--gold-color);
	transition: .2s;

	&:hover {
		transform: translateY(-0.25em);
		box-shadow: 0 0 0.7em 0em black;
		border-color: white;
		color: rgb(49, 197, 49);
	}
}

&:hover {
	color: #fff;

	&::before {
		width: 100%;
		top: 0;
		transform: none;
	}
}

.layers-img {
	width: 45%;
}

.layers-img img {
	width: 100%;
	height: 350px;
}

/* --------------- Why-Choose-Us --------------- */

.Why-Choose-Us {
	max-width: 1440px;
	min-width: 768px;
	margin: 100px auto 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.Why-Choose-Us > h1 {
	font-size: 30px;
	font-weight: lighter;
	color: var(--gold-color);
	text-align: center;
	margin-bottom: 50px;
}

.pros {
	width: 70%;
	display: flex;
	justify-content: space-evenly;
}

.pros-item {
	background-color: rgba(175, 175, 175, 0.1);
	width: 150px;
	height: 150px;
	border-radius: 40px;
	box-shadow: 0.5px 0.5px 4px 8px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

.pros-item i {
	color: var(--white-color);
	font-size: 45px;
}
.pros-item > h1{
	font-size: 50px;
	font-family: "Roboto Serif", serif;
  	font-optical-sizing: auto;
  	font-weight: 800;
	color: white;
}

.pros-item p {
	font-size: 13px;
	text-align: center;
	color: var(--gray-color);
}

/* --------------- Photo-Section-Parallax --------------- */

.Photo-Section-Parallax {
	width: 100%;
	/* border: 1px solid blue; */
	height: 55lvh;
	background-position: 0 0;
	margin-bottom: 15vh;
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/photoSection.jpg');
	background-attachment: fixed;
}

/* --- LIGHTBOX --- */
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	text-align: center;
}

.lightbox img {
	width: 800px;
	height: 700px;
	margin-top: 150px;
	object-fit: cover;
	transition: opacity 0.5s;
}

.close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 40px;
	color: white;
	cursor: pointer;
}

button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: white;
	font-size: 40px;
	cursor: pointer;
}

.prev {
	left: 10px;
}

.next {
	right: 10px;
}

/* --------------- Our-Works --------------- */

.Our-Works {
	max-width: 1440px;
	min-width: 768px;
	margin: 100px auto 150px;
	display: flex;
	flex-direction: column;
}

.our-work-title {
	display: flex;
	width: 28%;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 7vh;
}

.our-work-title>div {
	width: 45%;
}

.our-work-title>div hr {
	border-color: var(--gold-color);
}

.our-work-title h1 {
	font-size: 30px;
	font-weight: lighter;
	color: var(--white-color);
}

.our-work-cont {
	/* border: 1px solid lime; */
	display: flex;
	justify-content: space-between;
}

.work-item {
	/* border: 1px solid blue; */
	width: 33%;
	display: flex;
	flex-direction: column;
	height: 50vh;
	justify-content: space-evenly;
	overflow: hidden;
}

.work-item img {
	width: 100%;
	height: 90%;
	object-fit: cover;
	filter: brightness(70%);
	transition: .2s;
}

.work-item img:hover {
	cursor: pointer;
	filter: brightness(90%);
}

.work-item h2 {
	text-align: center;
	color: var(--gray-color);
	font-size: 20px;
	font-weight: lighter;
}

/* --------------- Color-Options --------------- */

.Color-Options-BG {
	width: 100%;
	margin: 20vh 0;
	padding: 1vh 0 12vh;
	background-size: 100%;
	background-position-y: 30%;
	background-attachment: fixed;
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/colorOptionBG.jpg');
}

.Color-Options {
	max-width: 1440px;
	min-width: 768px;
	margin: 0px auto;
	height: 100%;
}

.color-option-title {
	display: flex;
	width: 36%;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 7vh;
	margin-top: 8vh;
}

.color-option-title h1 {
	font-size: 30px;
	font-weight: lighter;
	color: var(--white-color);
}

.color-option-title>div {
	width: 45%;
}

.color-option-title>div hr {
	border-color: var(--gold-color);
}

.slider {
	width: 95%;
	margin: 0 auto;
}

.slider img {
	margin: 0 20px;
	z-index: 0;
}


/* --------------- Services --------------- */

.Services {
	max-width: 1440px;
	min-width: 768px;
	margin: 0px auto 20vh;
	height: 100%;
}

.service-title {
	display: flex;
	width: 23%;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 7vh;
	margin-top: 8vh;
}

.service-title h1 {
	font-size: 30px;
	font-weight: lighter;
	color: var(--white-color);
}

.service-title>div {
	width: 45%;
}

.service-title>div hr {
	border-color: var(--gold-color);
}

.service-cont {
	display: flex;
	justify-content: space-between;
}

.service-item {
	width: 24%;
}

.service-item>div {
	height: 17vw;
	background-size: 150%;
	background-position: center 32%;
	display: flex;
	flex-direction: column;
	justify-content: end;
}

.service-item>div>p {
	margin: 0 0 20px 10px;
	font-size: 18px;
	width: 80%;
	color: var(--white-color);
}

.service-item:nth-child(1) div {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/service1.jpg');
}

.service-item:nth-child(2) div {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/service2.jpg');
}

.service-item:nth-child(3) div {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/service3.jpg');
}

.service-item:nth-child(4) div {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/service4.jpg');
}

.service-item>a {
	display: block;
	text-align: center;
	width: 120px;
	margin-top: 10px;
	background-color: transparent;
	border: 1px solid var(--white-color);
	font-size: 15px;
	padding: 7px 0;
	border-radius: 3px;
	color: var(--gold-color);
	transition: all 0.3s;

	&:hover {
		box-shadow: inset 5em 0 0 0 var(--gold-color),
			inset -5em 0 0 0 var(--gold-color);
		border-color: black;
		color: black;
	}
}

/* --------------- About-Us --------------- */

.About-Us {
	max-width: 1440px;
	min-width: 768px;
	margin: 0px auto 10vh;
	height: 100%;
}

.about-us-title {
	display: flex;
	width: 20%;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 7vh;
}

.about-us-title>div {
	width: 35%;
}

.about-us-title>div hr {
	border-color: var(--gold-color);
}

.about-us-title h1 {
	font-size: 30px;
	font-weight: lighter;
	color: var(--white-color);
}

.about-cont {
	width: 82%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.about-text {
	width: 50%;
	padding: 100px 0;
}

.about-text h1 {
	font-size: 23px;
	color: var(--white-color);
}

.about-text p {
	font-size: 18px;
	color: var(--gray-color);
	width: 80%;
	margin-top: 20px;
}
.about-text:nth-child(1) h1{
	font-size: 23px;
	color: var(--white-color);
	margin: 10px 0  5px;
}

.about-image {
	width: 45%;
	display: flex;
	justify-content: space-evenly;
}

.about-image img {
	width: 200px;
	height: 400px;
	object-fit: cover;
}

.imgUs-1 {
	align-self: flex-end;
	background-image: url('images/aboutUs1.jpg');
}

.imgUs-2 {
	align-self: flex-start;
	background-image: url('images/aboutUs1.jpg');
}

/* --------------- Contacts-Us --------------- */

.Contacts-Us{
	max-width: 1440px;
	min-width: 768px;
	margin: 0px auto 10vh;
	height: 100%;
}

.contacts-title {
	width: 30%;
	margin-bottom: 7vh;
	margin-top: 8vh;
}

.contacts-title h1 {
	font-size: 30px;
	font-weight: lighter;
	color: var(--white-color);
}
.contacts-box{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.contacts-box > span{
	font-size: 20px;
	font-weight: lighter;
	color: var(--gray-color);
	margin-bottom: 20px;
}
.contacts-box > .contactsI, p{
	font-size: 25px;
	font-weight: lighter;
	color: var(--gold-color);
	margin-bottom: 15px;
}
.contactsI>i{
	color: var(--gold-color);
}
.contacts-btn{
	display: block;
	text-align: center;
	margin: 20px 0;
	width: 180px;
	background-color: transparent;
	border: 1px solid var(--white-color);
	font-size: 18px;
	padding: 10px 0;
	border-radius: 3px;
	color: var(--white-color);
	transition: .2s;

	&:hover {
		box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.822);
		border-color: var(--gold-color);
	}
}

footer{
	width: 100%;
	background-color: black;
	padding: 20px 0;
}
footer p{
	color: var(--gray-color);
	font-size: 18px;
	text-align: center;
}

/* --------------- Up-Button --------------- */

.upBtn {
	position: fixed;
	bottom: 5%;
	right: 3%;
	width: 40px;
	height: 40px;
	border: 1px solid var(--gray-color);
	color: var(--gold-color);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	background-color: rgba(0, 0, 0, 0.4);
}


/* ---------------------------------------------------------------------------- NOTEBOOK --------------- */
@media all and (max-width: 1550px) {

	nav,
	.header-section,
	.Epoxy-Flake-Floor,
	.About-Our-Work,
	.Why-Choose-Us,
	.Our-Works,
	.Color-Options,
	.Services,
	.About-Us,
	.Contacts-Us {
		max-width: 1200px;
	}

	header{
		background-size: 100%;
		background-position: center -200px;
	}
	.header-section h1 {
		font-size: 50px;
	}
	
	.header-section p {
		font-size: 18px;
	}
	
	.header-section a {
		font-size: 16px;
	}
	.line {
		width: 6%;
	}

	.our-work-title {
		width: 35%;
	}

	.color-option-title {
		width: 42%;
	}

	.service-title {
		width: 27%;
	}

	.about-us-title {
		width: 24%;
	}
	.lightbox img {
		width: 700px;
		height: 600px;
		margin-top: 80px;
	}
	/* --------------- Photo-Section-Parallax --------------- */

	.Photo-Section-Parallax {
		height: 55lvh;
		background-position: -250px 0;
		background-size: 120%;
	}
}

/* --------------- TABLET --------------- */
@media all and (max-width: 1024px) {
	nav,
	.header-section,
	.Epoxy-Flake-Floor,
	.About-Our-Work,
	.Why-Choose-Us,
	.Our-Works,
	.Color-Options,
	.Services,
	.About-Us,
	.Contacts-Us {
		max-width: 700px;
		min-width: 550px;
	}
	/* --------------- HEADER --------------- */

	nav {
		position: relative;
	}

	.nav-center {
		position: absolute;
		display: flex;
		flex-direction: column;
		border: 1px solid rgb(127, 127, 127);
		border-radius: 10px;
		width: 180px;
		height: 250px;
		bottom: -250px;
		right: 0;
		background-color: rgba(0, 0, 0, 0.95);
		z-index: 1;
	}

	.navHide {
		display: none;
	}

	.burger-menu {
		display: block;
		font-size: 40px;
		color: white;
		padding-bottom: 8px;
	}

	.nav-logo {
		flex-basis: 100px;
	}

	.nav-phone {
		width: 160px;
	}

	.nav-phone>a {
		font-size: 16px;
	}

	.header-section h1 {
		font-size: 30px;
	}

	.header-section p {
		max-width: 80%;
		font-size: 15px;
	}

	.header-section a {
		width: 150px;
		font-size: 15px;
		padding: 8px 0;
	}
	/* --------------- Epoxy-Flake-Floor --------------- */

	.Epoxy-Flake-Floor {
		flex-direction: column;
	}

	.title-img {
		width: 100%;
	}

	.title-img h1 {
		font-size: 25px;
		margin-bottom: 30px;
	}

	.title-img img {
		height: 300px;
	}

	.description-benefits {
		width: 100%;
		margin-top: 10px;
	}

	.description-benefits p {
		font-size: 15px;
	}

	.description-benefits h2 {
		margin: 30px 0 15px;
		font-size: 20px;
	}

	.description-benefits ul li {
		margin: 0 0 10px;
		font-size: 15px;
	}

	.description-benefits ul li::before {
		content: "➤";
		color: var(--gold-color);
		margin-right: 10px;
	}
	/* --------------- About-Our-Work --------------- */

	.About-Our-Work {
		flex-direction: column;
	}

	.line {
		width: 40%;
		order: 2;
	}

	.line hr {
		border-color: var(--gold-color);
	}

	.about-work {
		width: 100%;
		order: 3;
	}

	.about-work h1 {
		margin-bottom: 10px;
	}

	.about-work p {
		width: 100%;
		font-size: 15px;
	}

	.about-work a {
		width: 150px;
		font-size: 16px;
		padding: 10px 0;
		margin-top: 20px;
	}

	.layers-img {
		order: 1;
		width: 100%;
	}

	.layers-img img {
		width: 100%;
		height: 300px;
	}

	/* --------------- Why-Choose-Us --------------- */

	.Why-Choose-Us {
		margin-bottom: 15vh;
	}

	.pros {
		width: 90%;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pros-item {
		margin-bottom: 20px;
	}

	.pros-item i {
		color: var(--white-color);
		font-size: 45px;
	}
	

	.pros-item p {
		font-size: 13px;
		text-align: center;
		color: var(--gray-color);
	}
	/* --------------- Photo-Section-Parallax --------------- */

	.Photo-Section-Parallax {
		height: 40lvh;
		background-position: -150px 0;
		background-size: 160%;
		background-attachment: local;
	}

	/* --------------- Our-Works --------------- */

	.our-work-title {
		width: 45%;
	}

	.our-work-title>div {
		width: 30%;
	}

	.our-work-title h1 {
		font-size: 25px;
	}

	.our-work-cont {
		width: 100%;
		flex-direction: column;
		align-items: center;
	}

	.work-item {
		width: 90%;
	}

	.work-item h2 {
		margin: 1vh 0 5vh;
	}
	.lightbox img {
		width: 80%;
		height: 400px;
		margin-top: 130px;
	}

	/* --------------- Color-Options --------------- */

	.Color-Options-BG {
		margin: 0 0 15vh;
		background-position: -150px 0;
		background-size: 165%;
		background-attachment: local;
	}

	.color-option-title {
		width: 45%;
		margin-top: 5vh;
	}

	.color-option-title h1 {
		font-size: 25px;
	}

	.color-option-title>div {
		width: 20%;
	}

	.slider {
		width: 87%;
		margin: 0 auto;
	}

	.slider img {
		margin: 0 10px;
		height: 150px;
	}


	/* --------------- Services --------------- */

	.service-title {
		width: 40%;
	}

	.service-title h1 {
		font-size: 25px;
	}

	.service-title>div {
		width: 35%;
	}

	.service-cont {
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.service-item {
		width: 100%;
		height: 300px;
		margin-bottom: 10vh;
	}

	.service-item>div {
		height: 100%;
	}

	.service-item>div>p {
		font-size: 17px;
	}

	/* --------------- About-Us --------------- */

	.About-Us {
		margin-bottom: 20px;
	}

	.about-us-title {
		width: 40%;
		margin-bottom: 0;
	}

	.about-us-title>div {
		width: 35%;
	}

	.about-us-title>div hr {
		border-color: var(--gold-color);
	}

	.about-us-title h1 {
		font-size: 25px;
	}

	.about-cont {
		width: 100%;
		flex-direction: column;
	}

	.about-text {
		width: 100%;
		padding: 50px 0 20px;
		/* border: 1px solid red; */
	}

	.about-text h1 {
		font-size: 18px;
	}

	.about-text p {
		font-size: 15px;
		width: 90%;
	}

	.about-image {
		width: 100%;
		height: 320px;
	}

	.about-image img {
		width: 200px;
		height: 270px;
	}

	.imgUs-1 {
		align-self: flex-end;
		background-image: url('images/aboutUs1.jpg');
	}

	.imgUs-2 {
		align-self: flex-start;
		background-image: url('images/aboutUs1.jpg');
	}

	/* --------------- Up-Button --------------- */

	.upBtn {
		bottom: 3%;
		width: 35px;
		height: 35px;
	}
}

/* ------------------------------------------------------------------------------- PHONE --------------- */
@media all and (max-width: 480px) {

	nav,
	.header-section,
	.Epoxy-Flake-Floor,
	.About-Our-Work,
	.Why-Choose-Us,
	.Our-Works,
	.Color-Options,
	.Services,
	.About-Us,
	.Contacts-Us {
		max-width: 360px;
		min-width: 350px;
	}

	/* --------------- HEADER --------------- */

	nav {
		position: relative;
	}
	header{
		background-size: 350%;
		background-position: center -200px;
		background-attachment: local;
	}

	.nav-center {
		position: absolute;
		display: flex;
		flex-direction: column;
		border: 1px solid rgb(127, 127, 127);
		border-radius: 10px;
		width: 180px;
		height: 250px;
		bottom: -250px;
		right: 0;
		background-color: rgba(0, 0, 0, 0.95);
		z-index: 1;
	}

	.navHide {
		display: none;
	}

	.burger-menu {
		display: block;
		font-size: 40px;
		color: white;
		padding-bottom: 8px;
	}

	.nav-logo {
		flex-basis: 100px;
	}

	.nav-phone {
		width: 160px;
	}

	.nav-phone>a {
		font-size: 16px;
	}

	.header-section h1 {
		font-size: 35px;
	}

	.header-section p {
		max-width: 95%;
		font-size: 15px;
	}

	.header-section a {
		width: 150px;
		font-size: 15px;
		padding: 8px 0;
	}

	/* --------------- Epoxy-Flake-Floor --------------- */

	.Epoxy-Flake-Floor {
		flex-direction: column;
	}

	.title-img {
		width: 100%;
	}

	.title-img h1 {
		font-size: 25px;
		margin-bottom: 30px;
	}

	.title-img img {
		height: 300px;
	}

	.description-benefits {
		width: 100%;
		margin-top: 10px;
	}

	.description-benefits p {
		font-size: 15px;
	}

	.description-benefits h2 {
		margin: 30px 0 15px;
		font-size: 20px;
	}

	.description-benefits ul li {
		margin: 0 0 10px;
		font-size: 15px;
	}

	.description-benefits ul li::before {
		content: "➤";
		color: var(--gold-color);
		margin-right: 10px;
	}

	/* --------------- About-Our-Work --------------- */

	.About-Our-Work {
		flex-direction: column;
	}

	.line {
		width: 40%;
		order: 2;
	}

	.line hr {
		border-color: var(--gold-color);
	}

	.about-work {
		width: 100%;
		order: 3;
	}

	.about-work h1 {
		margin-bottom: 10px;
	}

	.about-work p {
		width: 100%;
		font-size: 15px;
	}

	.about-work a {
		width: 150px;
		font-size: 16px;
		padding: 10px 0;
		margin-top: 20px;
	}

	.layers-img {
		order: 1;
		width: 100%;
	}

	.layers-img img {
		width: 100%;
		height: 300px;
	}

	/* --------------- Why-Choose-Us --------------- */

	.Why-Choose-Us {
		margin-bottom: 15vh;
	}

	.pros {
		width: 90%;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pros-item {
		margin-bottom: 20px;
	}

	.pros-item i {
		color: var(--white-color);
		font-size: 45px;
	}
	.pros-item p {
		font-size: 13px;
		text-align: center;
		color: var(--gray-color);
	}

	/* --------------- Photo-Section-Parallax --------------- */

	.Photo-Section-Parallax {
		height: 40vh;
		background-position: -150px 0;
		background-size: 160%;
		background-attachment: local;
	}

	/* --------------- Our-Works --------------- */

	.our-work-title {
		width: 70%;
	}

	.our-work-title>div {
		width: 30%;
	}

	.our-work-title h1 {
		font-size: 25px;
	}

	.our-work-cont {
		width: 100%;
		flex-direction: column;
		align-items: center;
	}

	.work-item {
		width: 90%;
	}

	.work-item h2 {
		margin: 1vh 0 5vh;
	}
	.lightbox img {
		width: 80%;
		height: 400px;
		margin-top: 130px;
	}

	/* --------------- Color-Options --------------- */

	.Color-Options-BG {
		margin: 0 0 15vh;
		background-position: -450px 0;
		background-size: 280%;
		background-attachment: local;
	}

	.color-option-title {
		width: 80%;
		margin-top: 5vh;
	}

	.color-option-title h1 {
		font-size: 25px;
	}

	.color-option-title>div {
		width: 20%;
	}

	.slider {
		width: 87%;
		margin: 0 auto;
	}

	.slider img {
		margin: 0 20px;
		height: 250px;
	}


	/* --------------- Services --------------- */

	.service-title {
		width: 60%;
	}

	.service-title h1 {
		font-size: 25px;
	}

	.service-title>div {
		width: 35%;
	}

	.service-cont {
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.service-item {
		width: 100%;
		height: 300px;
		margin-bottom: 10vh;
	}

	.service-item>div {
		height: 100%;
	}

	.service-item>div>p {
		font-size: 17px;
	}

	/* --------------- About-Us --------------- */

	.About-Us {
		margin-bottom: 20px;
	}

	.about-us-title {
		width: 65%;
		margin-bottom: 0;
	}

	.about-us-title>div {
		width: 35%;
	}

	.about-us-title>div hr {
		border-color: var(--gold-color);
	}

	.about-us-title h1 {
		font-size: 25px;
	}

	.about-cont {
		width: 100%;
		flex-direction: column;
	}

	.about-text {
		width: 100%;
		padding: 50px 0 20px;
		/* border: 1px solid red; */
	}

	.about-text h1 {
		font-size: 18px;
	}

	.about-text p {
		font-size: 15px;
		width: 90%;
	}

	.about-image {
		width: 100%;
		height: 320px;
	}

	.about-image img {
		width: 150px;
		height: 270px;
	}

	.imgUs-1 {
		align-self: flex-end;
		background-image: url('images/aboutUs1.jpg');
	}

	.imgUs-2 {
		align-self: flex-start;
		background-image: url('images/aboutUs1.jpg');
	}

/* --------------- Contacts-Us --------------- */

	.contacts-title {
		width: 80%;
	}
	
	.contacts-title h1 {
		font-size: 25px;
	}

	.contacts-box > span{
		font-size: 18px;
	}
	.contacts-box > .contactsI, p{
		font-size: 20px;
	}
	
	footer p{
		font-size: 12px;
	}

	/* --------------- Up-Button --------------- */

	.upBtn {
		bottom: 3%;
		width: 35px;
		height: 35px;
	}
}