@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Noto+Sans:wght@300&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
	scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Montserrat", sans-serif;
}

a, p {
	font-family: "Noto Sans", sans-serif;
}

.error {
	color: red;
	width: 100vw;
	text-align: left;
	margin-top: 15px;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.text-center {
	text-align: center;
}

.normal-nav > ul {
	padding: 5%;
}

.normal-nav > ul > li {
	list-style: none;
	margin-right: 1vw;
}

.normal-nav > ul:last-child {
	margin-right: 3vw;
}

.normal-nav > ul > li > a {
	color: white;
	text-decoration: none;
}

.normal-nav > ul > li > a:hover {
	color: #878787;
	cursor: pointer;
}

#navList > li > a {
	color: black;
	text-align: center;
}

.nav-link {
	font-size: 1.25em;
}

.nav-image, .footer-image {
	width: 120px;
	height: 100px;
	margin-top: 1vh;
	margin-left: 1vw;
}

.nav-container {
	background-color: #0f1c03;
	justify-content: space-between;
	align-items: center;
	position: relative;
	top: 0;
	width: 100vw;
	z-index: 2;
}

.page-title {
	position: relative;
	top: 15vw;
	color: white;
	font-size: 3em;
	text-align: center;
	width: 100vw;
}

.page-section {
	width: 30vw;
	margin: auto;
}

.page-section > h1 {
	font-size: 2em;
}

.page-section > p {
	font-size: 1.25em;
}

.page-section-image {
	height: 100px;
	width: 120px;
}

.header-image {
	z-index: -1;
	position: absolute;
	top: 0;
	height: 40vmax;
	width: 100vw;
	-webkit-filter:brightness(30%);
	filter:brightness(40%);
}

.about-container {
	height: 800px;
	width: 100%;
	position: relative;
	top: 800px;
	left: 0px;
	justify-content: center;
	align-items: center;
}

.slideshow-image {
	height: auto;
	width: 500px;
}

.slideshow {
	margin-left: 100px;
	align-items: center;
	justify-content: center;
}

.slideshow-button {
	height: 80px;
	width: 30px;
	opacity: 0.4;
	color: white;
	background-color: black;
	font-size: 1.25em;
}

.slideshow-button:hover {
	background-color: grey;
	border: 0px solid transparent;
	cursor: pointer;
}

.products-container {
	background-color: #f5f5f5;
	position: relative;
	top: 1000px;
	align-items: center;
	justify-content: center;
}

.product-details-container {
	width: 40vw;
	padding: 10px;
}

.products-image {
	width: 500px; 
	height: 400px;
	margin-right: 120px;
}

.product-details-container > h1 {
	font-size: 2em;
}

.product-details-container > h3 {
	font-size: 1.50em;
	margin-top: 15px;
}

.product-details-container > p {
	font-size: 1.25em;
}

div.leaf-texture {
	width: 100%;
}

input {
	padding: 15px;
	margin-top: 20px;
	font-size: 1em;
	background-color: #f7f7f7;
	border: 1px solid grey;
}

.form-container {
	width: 30vw;
	margin: auto;
	align-items: center;
}

.form-pair > input {
	width: 400px;
}

#submit {
	color: white;
	background-color: #1c3307;
	border: 0px solid transparent;
	border-radius: 3px;
	width: 125px;
}

#submit:hover {
	color: #A0612C;
	background-color: #0f1c03;
	cursor: pointer;
}

#firstName {
	margin-right: 25px;
}

#subject, #message, #phoneNumber {
	width: 100%;
}

textarea {
	resize: none;
	margin-top: 20px;
	padding: 15px;
	height: 100px;
	font-size: 1em;
	font-family: sans-serif;
	background-color: #f7f7f7;
}

#map {
	width: 100vw;
}

.contact-container {
	position: relative;
	top: 1100px;
	justify-content: space-evenly;
}

.contact-header {
	font-size: 2em;
}

.contact-details {
	align-items: center;
	justify-content: space-evenly;
	margin-top: 20px;
	width: 30%;
	margin-left: auto;
	margin-right: auto;
}

footer {
	justify-content: space-evenly;
	position: relative;
	top: 1300px;
	background-color: #0f1c03;
	color: white;
	padding: 3px;
	width: 100vw;
}

.footer-contacts > a, .socials-container > a {
	text-decoration: none;
	color: #9C612B;
}

.footer-contacts > a:hover, .socials-container > a:hover {
	color: grey;
	cursor: pointer;
}

.mobile-nav {
	position: relative;
	right: 30px;
}

.mobile-nav-button {
	background-color: #0f1c03;
	border: 0px solid transparent;
}

.line {
	width: 34px;
	height: 5px;
	background-color: white;
	border: 1px solid transparent;
	border-radius: 3px;
}

.toggle-nav {
	display: none;
}

#nav-list > li {
	text-align: center;
}

.toggle-nav > ul > li {
	list-style-type: none;
	margin-bottom: 10px;
}

.toggle-nav > ul > li > a {
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	margin-right: 8px;
}

#line2, #line3 {
	margin-top: 5px;
}

@media screen and (min-width: 530px) {
	.mobile-nav-button {
		display: none;
	}

	.normal-nav {
		display: block;
	}
}

@media screen and (max-width: 912px) {
	#slideshow-image {
		position: relative;
		right: 30px;
		width: 80vw;
		height: 100%;
	}

	.slideshow-button {
		margin-right: 30px;
	}

	.right-button {
		margin-right: 30px;
		position: relative;
		left: -30px;
	}

	.slideshow {
		position: absolute;
		top: 800px;
		height: 800px;
	}

	.about-container {
		flex-direction: column;
		top: 20vmax;
	}

	.page-section {
		margin-top: 30px;
		width: 80vw;
	}

	.products-container {
		flex-direction: column-reverse;
		margin-left: 77px;
		position: absolute;
		top: 2480px;
	}

	.product-details-container {
		width: 80vw;
	}

	.products-image {
		width: 80vw;
		margin: auto;
	}

	.normal-nav {
		position: relative;
		right: 30px;
	}

	.form-pair {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.form-pair > input {
		width: 80vw;
	}

	.form-container {
		display: block;
	}

	#subject, #message, #phoneNumber {
		width: 80vw;
	}

	#firstName {
		margin-right: 0;
	}

	.contact-container {
		position: absolute;
		top: 4200px;
		left: 257px;
	}

	#map > iframe {
		position: relative;
		top: 3950px !important;
	}

	footer {
		top: 3948px;
	}
}

@media screen and (max-width: 530px) {
	.normal-nav {
		display: none;
	}

	.mobile-nav-link {
		color: black;
	}

	.mobile-nav-button {
		display: block;
	}

	.page-title {
		top: 6vh;
	}

	.about-container {
		flex-direction: column;
		position: absolute;
		top: 350px;
		height: 800px;
	}

	.products-container {
		flex-direction: column-reverse;
		position: relative;
		top: 1600px;
		margin-left: 0;
	}

	.product-details-container {
		width: 80vw;
	}

	.products-image {
		width: 80vw;
		margin: auto;
		height: auto;
	}

	.page-section {
		width: 80vw;
	}

	.contact-details {
		width: 80vw;
	}

	.form-pair {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.form-pair > input {
		width: 80vw;
	}

	.form-container {
		display: block;
	}

	#subject, #message, #phoneNumber {
		width: 80vw;
	}

	#firstName {
		margin-right: 0;
	}

	#slideshow-image {
		width: 73vw;
		padding-bottom: 20px;
		position: relative;
		left: 1px;
		height: auto;
	}

	.slideshow-button {
		margin-right: 6px;
		margin-left: 30px;
	}

	.right-button {
		margin-left: 37px;
		left: -28px;
	}

	.slideshow {
		position: absolute;
		top: 800px;
		height: 600px;
		margin-left: 23px;
	}

	.error {
		width: 100vw;
	}

	.contact-container {
		position: relative;
		top: 1800px;
		margin-left: 0;
		left: 0;
	}

	#map > iframe {
		position: relative;
		top: 1900px !important;
	}

	footer {
		top: 1896px;
	}

	.socials-container > h4 {
		font-size: 0.95em;
	}

	.socials-container > a {
		font-size: 0.85em;
	}

	.footer-contacts > p {
		font-size: 0.95em;
	}
}