#navigation-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	
	.logo {
		color: white;
	}
	
	&.change {
		.logo {
			color: #f29336;
		}
		#menu-list {
			a {
				&:hover {
					color: #f29336;
				}
			}
		}
		.nav-icon {
			color: white;
		}
		
	}
	
	.nav-icon {
		display: none;
	}
	
	#menu-list {
		.contact-padding {
			padding-right: 2ch;
		}
		ul {
			list-style-position: inside;
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: row;
			gap: 0;
			
			li {
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				a {
					color: white;
					text-transform: uppercase;
					text-align: center;

					font-weight: 700;
					font-size: .8rem;
					transition: color 0.25s;
					
					
					&:hover {
						color: #00202e;
					}
				}
			}
		}
	} 
	
	@media screen and (max-width: 999px) {
		#menu-list {
	    	display: none; 
  		} 
		.nav-icon {
			display: block;
		}
  	}
}

#single_property_wrapper {
	color: black;
	text-align: left;

	p {
		color: black;
	}

	h2 {
		text-transform: uppercase;
		font-family: 'Montserrat', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif, Arial;
		font-weight: 800 !important;
		letter-spacing: 0.05em;
		color: black;
	}

	.emoji {
		content: ', ';
	}

	.post-header-wrapper {
		padding-top: 7.5rem;
		padding-bottom: 2.5rem;

		.post-address {
			h1 {
				text-transform: uppercase;
				text-align: center;
			}
		}


	}

	.office-post {
		padding: 3rem 1.5rem;

		.fifty-fifty {
			display: flex;
			flex-direction: row;
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			padding-bottom: 2.5rem;


			>* {
				width: 50%;
			}
			

			&.reverse {
				flex-direction: row-reverse;
			}
			
			@media screen and (max-width: 800px) {
				flex-direction: column;
				
				gap: 2.5rem;
				
				&.header {
					flex-direction: column-reverse;
				}
				
				&.reverse {
					flex-direction: column;
				}
				
				>* {
					width: 100%;
				}
			}

			.left,
			.right {
				display: flex;
				flex-direction: column;
				gap: 2.5rem;

				.description,
				.specification {
					display: flex;
					flex-direction: column;
					gap: 1.75rem;
					
					ul {
						list-style-position: inside;
					}
				}
			}

			.right {
				@media screen and (min-width: 801px) {
					padding-left: 2.5rem;
					border-left: #f29336 1px solid;
				}
			}

			.left {
				@media screen and (min-width: 801px) {
					padding-right: 2.5rem;
				}
			}

			.office-info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
				gap: 1.5rem;
				padding-bottom: 1.5rem;

				h2 {
					text-transform: uppercase;
					font-family: 'Montserrat', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif, Arial;
					font-weight: 800 !important;
					letter-spacing: 0.05em;
					color: black;

					&.status {
						color: #f29336;
					}
				}

				.meta-grid {
					display: grid;
					grid-template-columns: 1fr 1fr;
					grid-template-rows: 1fr;
					&:has(> *:nth-child(3)) {
					  grid-template-rows: 1fr 1fr;
					}
					
					gap: 1.5rem;
					width: 100%;
					max-width: 480px;

					.meta-item {
						display: flex;
						flex-direction: column;
						gap: 0.75rem;

						.title {
							text-transform: uppercase;
							font-family: 'Montserrat', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif, Arial;
							font-weight: 800 !important;
							letter-spacing: 0.05em;
							color: #f29336;
						}
					}
				}
			}

			.office-slideshow {
				img {
					object-fit: cover;
					object-position: center;
					aspect-ratio: 4/3;
					border-radius: 5px;
				}
				
				.controls {
					
					display: flex;
					flex-direction: row;
					gap: 0.25em;
					float: right;
					
					.control {
						height: 25px;
						width: 25px;
						transition: color 1s;
						&:hover {
							cursor: pointer;
						}
					}

					.prev {
						color: #f29336;
						&:hover {
							color: #00202e;
						}
					}
					
					.next {
						color: #f29336;
						&:hover {
							color: #00202e;
						}
					}
				}
			}
		}
	}
	
	.downloads {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 2ch;
		padding-top: 2.5rem;
		
		@media screen and (max-width: 800px) {
			flex-direction: column;
			align-items: center;
		}
	}

	.second-wave,
	.bottom-wave {
		overflow: hidden;

		img {
			transform: scale(1.1);
		}
	}
	
	#map {
		aspect-ratio: 4/3;
	}
	
	.border-bottom {
		padding-bottom: 2.5rem;
		border-bottom: 1px solid #f29336;
	}

}

#properties_page {
	.nav-wrapper {
		padding-top: 5rem;
	}


}
.second-wave,
.bottom-wave {
	overflow: hidden;
	img {
		transform: scale(1.1);
	}
}

.bottom-wave {
	padding-top: 0.5rem;
	margin-bottom: -5px;
}

.second-wave {
	img {
		margin-top: 0;
		margin-bottom: -5px;
	}
}


	
.contact-unit,
.download-unit,
#menu-list .all-properties,
.action-make-enquiry {
	padding: 1ch 4ch;
	background-color: #f29336;
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	font-size: .8rem;
	transition: background-color 0.25s;
	text-align: center;
	border-radius: 5px;
	
	&:hover {
		background-color: #00202e;
	}
}

.enquiry-list {
	list-style-type: none;
}

.download-unit,
#menu-list .all-properties {
	background-color: #00202e;
	
	&:hover {
		background-color: #f29336;
	}
}

#navigation-bar.change {
	#menu-list .all-properties {
		background-color: #f29336;
		
		&:hover {
			background-color: #00202e;
		}
	}
}



.overlay-content {
	ul.menu {
		li {
			a {
				color: white;
				text-transform: uppercase;
				font-weight: 700;
				font-size: .8rem;
				transition: color 0.25s;
				text-align: center;
				
				&:hover {
					color: #f29336;
				}
			}
		}
	}
}

.fancybox-content {
	border-radius: 5px;
	width: 100%;
	min-width: 340px;
	max-width: 480px;
	
	h2 {
		color: #f29336;
		text-transform: uppercase;
		font-family: 'Montserrat', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif, Arial;
		font-weight: 800 !important;
		letter-spacing: 0.05em;
	}
	p {
		color: black;
		display: none;
	}
	
	.property-enquiry-form {
		margin-top: 1.25rem;
		.control {
			label {
				text-transform: uppercase;
				font-size: .8rem;
				padding-top: 1em;
				font-weight: 800;
				letter-spacing: 0.05em;
			}
			
			
		}
		
		input[type='text'],
		input[type='email'],
		textarea#message {
			font-size: 1rem;
			min-height: 1.5rem;
		}
		
		#enquirySuccess {
			color: green;
			padding-bottom: 1.25rem;
		}
		
		#enquiryError,
		#enquiryValidation {
			color: red;
			padding-bottom: 1.25rem;
		}
		
		input[type='submit'] {
			padding: 1ch 4ch;
			background-color: #f29336;
			color: white;
			text-transform: uppercase;
			font-weight: 700;
			font-size: .8rem;
			transition: background-color 0.25s;
			text-align: center;
			border-radius: 5px;
			
			&:hover {
				background-color: #00202e;
				cursor: pointer;
			}
		}
	}
}