@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@500&display=swap');

/*
Colors:

black: #292929
white: #FFF2D3
yellow: #EFC044
green: #527230
*/

* {
	padding:0;
	margin:0;
	box-sizing:border-box;
	font-family:'Markazi Text', sans-serif;
	text-decoration:none;
	list-style:none;
	cursor: default;
	user-select:none;
}

body {
	min-height: 100vh;
	background-color: #292929;
	color: #FFF2D3;
	width:100%;
}

header {
	width: 100%;
	height:150px;
	top:0;
	right: 0;
	z-index:10;
	display:flex;
	align-items:center;
	padding-left: 10%;
	padding-right:10%;
	justify-content:space-between;
	transition: all .25s ease;
	background-color:#527230;
	position:fixed;
}

#header-space {
	height:150px;
}

#services, #contact, #about, #reviews {
	scroll-margin-top:150px;
}

h1 {
	text-align:center;
}
h2 {
	text-align:center;
	font-size: 3em;
}

a {
	color: #FFF2D3;
}

a:hover {
	color:#292929;
	cursor:pointer;
}

.logo {
	height: 100%;
}

.navbar {
	display:flex;
}

.navbar a,#return {
	
	font-weight: 500;
	font-size:1.5em;
	padding:10px;
	margin:0px 30px;
	transition: all .25s ease;
}

.navbar a:hover,#return:hover {
	color: #292929;
	cursor:pointer;
	
}

#menu-icon {
	font-size: 3em;
	color: #FFF2D3;
	cursor:pointer;
	z-index:11;
	display:none;
}

@media (max-width:1280px) {
	header {
		padding:14px 2%;
		transition.2s;
		height:120px;
	}
	#header-space {
		height:120px;
	}
	#services, #contact, #about, #reviews {
	scroll-margin-top:120px;
}
	.navbar a{
		padding: 5px 0;
		margin: 0px 20px;
	}
}

@media (max-width:1090px) {
	header {
		height:90px;
	}
	#header-space {
		height:90px;
	}
	#services, #contact, #about, #reviews {
	scroll-margin-top:90px;
}
	#menu-icon {
		display:block;
		z-index:11;
	}
	.navbar {
		position: absolute;
		top: 100%;
		right: 0%;
		width: 270px;
		background-color: #527230;
		display: flex;
		flex-direction:column;
		justify-content:flex-start;
		transition: all .25s ease;
		display:none;
		z-index:11;
	}
	.navbar a {
		display: block;
		margin:12px 0;
		padding:0 25px;
		transition: all .25s ease;
	}
	.navbar a:hover {
		transform: translateY(5px);
	}
	
	.navbar.open {
		display:block;
	}
}

#hero-image {
	height: 100vh;
	width:100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
	background-image: url("images/homepage.jpg");
	z-index:1;
}

#hero-text {
	text-align: center;
	position: relative;
	font-size:5vw;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding-left:20%;
	padding-right:20%;
	z-index:1;
	letter-spacing: .2vw;
	text-shadow: -.2vw -.2vw .2vw #292929,
	-.2vw .2vw .2vw #292929,
	.2vw -.2vw .2vw #292929,
	.2vw .2vw .2vw #292929;
}

#service-grid {
	display: grid;
	width:100%;
    grid-template-columns: 5% 30% 30% 30% 5%;
}

#center-service {
	height: 40vh;
	z-index:2;
}

#left-service, #center-service, #right-service {
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
	width:100%;
	background-color: #527230;
	color: #FFF2D3;
}
#left-service, #right-service {
	opacity:.5;
	height:30vh;
	position: relative;
	top:12.5%;
	z-index:1;
	transition: all .25s ease;
}

#left-arrow, #right-arrow {
	background-color: #527230;
	color: #FFF2D3;
}

#left-arrow:hover, #right-arrow:hover {
	background-color: #EFC044;
	color: #292929;
}

.service-button {
	width:100%;
	height:15%;
	position:relative;
	top:85%;
	text-align:center;
	font-size:3vh;
	background-color:inherit;
	justify-content:center;
	align-items:center;
	display:flex;
	cursor:pointer;
}

#left-service:hover, #right-service:hover {
	opacity:1;
}

#left-service:hover, #center-service:hover, #right-service:hover {
	background-color: #EFC044;
	color: #292929;
	cursor: pointer;
}

.arrow {
	justify-content:center;
	align-items:center;
	display:flex;
	cursor:pointer;
	position:relative;
	font-size: 3em;
	height:30vh;
	position: relative;
	top:12.5%;
	z-index:1;
	transition: all .25s ease;
}


.arrow:hover {
	color:#292929;
}

@media (max-width:1000px) {
	#service-grid {
		grid-template-columns: 15% 70% 15%;
	}
	#left-service, #right-service {
		display:none;
	}
	.arrow {
		height:85%;
		top:0%;
	}
}

#desc {
	text-align:center;
	font-size:1.5em;
	margin-left:15%;
	margin-right:15%;
}

#form-div {
	width:70%;
	margin-left:auto;
	margin-right:auto;
	background-color:#527230;
	border-radius:50px;
}

@media (max-width:400px) {
	#form-div {
		width:100%;
	}
}

form {
	text-align:center;
}

label {
	cursor: pointer;
	font-size:15pt;
	color:#FFF2D3;
}

span{
	cursor: pointer;
}

input {
	cursor: pointer;
	min-width:30%;
	height:2vh;
	font-size:15pt;
	padding:.75em;
}

input[type=radio] {
	min-width:0%;
	padding:0%;
	height:100%;
	justify-content:center;
	vertical-align:middle;
}
label input[type="radio"]:checked ~ span {
  color: #292929;
}

button {
	background-color: #EFC044;
	font-size:20pt;
	color:#292929;
	padding: 0.25em .75em;
	margin:.25em;
	border:none;
	outline:none;
	border-radius:1em;
	transition: all .25s ease;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
button:hover {
	cursor:pointer;
	color:#FFF2D3;
	background-color:#527230;
}

#ratings {
	width:50%;
	text-align:center;
	left:25%;
	position:relative;
}

#ratings input {
	display:none;
}

.bxs-star {
	cursor:pointer;
	color: #292929;
	font-size:30pt;
	transition: all .25s ease;
	
}

#service_desc {
	width:80%;
	text-align:center;
	margin-lefT:auto;
	margin-right:auto;
	font-size:2em;
}

.service_portfolio {
	width:80%;
	margin-lefT:auto;
	margin-right:auto;
	font-size:2em;
	display:flex;
}

.service_portfolio h2, .service_portfolio img {
	margin-left:auto;
	margin-right:auto;
	font-size:inherit;
	width:45%;
}

.service_portfolio img {
	border-style:solid;
}
@media (max-width:800px) {
	#service_desc {
		font-size:1em;
	}
	.service_portfolio {
		font-size:1em;
		width:100%;
	}
	.service_portfolio h2, .service_portfolio img {
		width:50%;
	}
}

#review_name, #review_desc, #review_rating {
	width:100%;
	display:block;
	text-align:center;
	justify-content:center;
	align-items:center;
	display:flex;
}

#review_name, #review_rating {
	height:30px;
	font-size:30px;
}

#review_desc {
	height:240px;
	font-size:20px;
	padding-left:10%;
	padding-right:10%;
}

#previous_review, #next_review, #review_content, #review_name, #review_desc, #review_rating {
	
}

#previous_review, #review_content, #next_review {
	height:100%;
}
#previous_review, #next_review {
	transition: all .25s ease;
	cursor:pointer;
	font-size:3em;
	background-color:#527230;
	color:#FFF2D3;
	justify-content:center;
	align-items:center;
	display:flex;
}

#previous_review:hover, #next_review:hover {
	background-color:#EFC044;
	color:#292929;
}

#next_review {
}

#previous_review {
}

#review_content {
	
}

#reviews_div {
	grid-template-columns: 10% 80% 10%;
	display:grid;
	width:100%;
	height:300px;
}

#bottom {
	width:100%;
	height:200px;
	background-color:#527230;
}

#bottom-text {
	position:relative;
	top: 45%;
	left:10%;
	height:10%;
	display:inline-block;
}

#bottom-text span {
	font-size:12pt;
	user-select:all;
}

#social-media {
	right:10%;
	position:relative;
	display:inline-block;
	float:right;
	top:85px;
	
}

.bxl-tiktok, .bxl-instagram, .bxl-facebook {
	font-size:30px;
	cursor: pointer;
}

.sm-links {
	color: #FFF2D3;
	display:inline-block;
}

.sm-links:hover {
	color: #292929;
}

#copyright {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	top:120px;
}

@media (max-width:360px) {
	#social-media, #bottom-text {
		text-align:center;
		display:block;
		position:relative;
		float:none;
	}
	#social-media {
		left:0%;
	}
	#bottom-text {
		top:0px;
		left:0%;
	}
}