/* Reset */
    body, ul {
		margin: 0;
		padding: 0;
	}
	ul {
		list-style: none;
	}
	body {
		font-family: Arial, sans-serif;
	}		
/* Hamburger Icon */
	.menu-toggle {
		position: fixed;
		top: 1rem;
		left: 1rem;
		cursor: pointer;
		z-index: 1001;
	}
	.menu-toggle span {
		display: block;
		width: 30px;
		height: 4px;
		margin: 4px 0;
		background: #35E149;
		border-radius: 2px;
		transition: 0.4s;
		margin-left: 5px;
	}
	.menu-toggle::after {
		content: "Menu";
		font-size: 16px;
		font-weight: bold;
		color: #35E149;
		margin-left: 0px;
	}
/* Side Nav */
	.side-nav {
		position: fixed;
		top: 0;
		left: -250px; /* hidden by default */
		width: 250px;
		height: 100%;
		background: rgba(17,17,17,0.6);
		backdrop-filter: blur(8px);
		transition: 0.4s;
		padding-top: 60px;
		z-index: 1002; /* above overlay */
	}
	.side-nav ul li a {
		display: block;
		padding: 15px 20px;
		color: white;
		text-decoration: none;
		transition: 0.3s;
	}
	.side-nav ul li a:hover {
		background: #575757;
	}
	.side-nav.active {
		left: 0;
	}
/* Overlay */
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s;
		z-index: 1000;
	}
	.overlay.active {
		opacity: 1;
		pointer-events: all;
	}
/* Animate hamburger into "X" */
	.menu-toggle.active span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 6px);
	}
	.menu-toggle.active span:nth-child(2) {
		opacity: 0;
	}
	.menu-toggle.active span:nth-child(3) {
		transform: rotate(-45deg) translate(6px, -6px);
	}
	main {
		padding: 2rem;
		background-color: black;
	}
	header {
		color: #35E149;
		text-align: center;
		display: flex;
    	align-items: center;
		height: 120px;
    	padding: 10px;
    	gap: 20px;
		overflow: hidden;
		background-color: black;
	}
	p.greeting {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 300%;
		color: black ;
	}
	p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 200%;
		color: white ;
	}
    h1 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 36pt;
		color: #35E149;
		text-align: center;
	}
	h2 {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 24pt;
		color:  #35E149;
		text-align: center;
	}
	.bio {
		overflow: auto;
	}
	p.history {
		font-family: Helvetica, Verdana, sans-serif;
		font-size: 24pt;
		color: white;
		float: right;
		width: calc(100% - 200px);
		margin: 10px 10px 10px 0;
		padding: 10px;
		border: 1px solid black;
		box-shadow: 5px 5px 5px black;
	}
	article.headshot {
  		width: 150px;
  		margin: 10px 0 10px 10px;
  		float: left;
  		text-align: center; /* centers caption under the box */
	}
	article.headshot figure {
  		width: 150px;
  		height: 150px;
  		margin: 0; /* removes default figure margin */
  		border: 1px solid black;
  		box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
  		overflow: hidden; /* clips overflow */
  		border-radius: 8px; /* optional */
	}
	article.headshot img {
  		width: 100%;
  		height: 100%;
  		object-fit: cover; /* fills box without distortion */
  		display: block;
	}
	article.headshot figcaption {
  		margin-top: 5px;
  		font-size: 0.9rem;
	}
	body {
 		 font-family: sans-serif;
	}
	form {
		font-family: Helvetica, Verdana, sans-serif;
		width: 500px;
		margin: 0 auto;
		color: black;
	}
	.scroll_container {
  		width: 100%;
  		position: relative;
  		padding: 40px 0;
  		background: black;
  		display: flex;
  		flex-direction: column;
  		align-items: center;
	}
	.scroll_container h2 {
  		text-align: center;
  		margin-bottom: 20px;
	}
	.scroll_wrapper {
  		width: 100%;
		max-width: 1000px;          /* Visible viewport */
  		overflow: hidden;
		position: relative;
		margin: 0 auto;
	}
	.scroll_content {
  		display: flex;
  		transition: transform 0.6s ease-in-out;
	}
	.service_box {
  		flex: 0 0 100%;
		box-sizing: border-box;
  		padding: 30px;
  		border: 1px solid black;
  		border-radius: 10px;
  		background: black;
  		box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
		text-align: center;
	}
	.service_box h3 {
  		text-align: center;
  		text-decoration: underline;
		margin-bottom: 15px;
		color: white;
	}
/* Arrows */
	.arrow {
  		position: absolute;
  		top: 50%;
  		transform: translateY(-50%);
  		background: rgba(0,0,0,0.4);
  		border: none;
  		color: #35E149;
  		font-size: 2rem;
  		padding: 10px 18px;
  		border-radius: 50%;
  		cursor: pointer;
  		z-index: 10;
	}
	.arrow:hover {
  		background: rgba(0,0,0,0.7);
	}
	.left { left: 2vw; }
	.right { right: 2vw; }
/* Responsive */
	@media (max-width: 768px) {
  	.scroll_wrapper { width: 90vw; }
  	.left { left: 1vw; }
  	.right { right: 1vw; }
	}
/* Text fade */
	.spacer {
  		height: 5vh; /* Creates vertical space for scrolling */
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		font-size: 2rem;
	}
	.fade-in-text {
  		transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  		transform: translateY(20px);
		margin: 100px;
	}
/* Initial state: hidden */
	.hidden {
  		opacity: 0;
	}
/* Final state: visible */
	.visible {
  		opacity: 1;
  		transform: translateY(0);
	}
/* Footer */
	nav ul {
		margin: 0px;
		padding: 5px 0px 5px 30px;
	}
	nav li {
		display: inline;
		margin-right: 40px;
	}
	nav {
		height: 30px;
		text-align: center;
	}
	h2.TandC {
		color: white;
		text-align: left;
	}
	h1.TandC {
		color: white;
	}
	p.TandC {
		font-size: 18pt;
	}
	p.copyright {
		font-size: 12pt;
	}
	li {
		color: white;
	}
	p.T_and_C {
		font-size: 12pt;
		text-align: center;
	}
	p.P_P {
		font-size: 12pt;
		text-align: center;
	}
	footer {
		background-color: black;
	}
	footer a {
		color: #35E149;
		font-family: courier prime, monospace;
	}
	footer a:hover {
		color: rgb(1, 146, 1);
		font-family: courier prime, monospace;
	}
	p.copyright {
		color: white;
	}
	article.logo img {
		max-height: 130px;
    	width: auto;
		object-fit: contain;
		margin-left: 20px;
	}
	.slogan h2 {
		margin: 0;
		font-size: 1.3 rem;
		font-weight: normal;
	}
	p.greeting {
		color: white;
	}
	div.about-us-page {
		background-color: black;
	}
	html {
		background-color: black;
	}
	fieldset {
		color: white;
	}
	article.badge {
		content: "";
		position: fixed;
		top:40%;
		left:49.57%;
		transform: translate(-50%, -50%);
		width: 50vw;
		height: 50vh;
		background-position: center;
		opacity: 0.15;
		pointer-events: none;
	}
	@media (max-width: 768px) {
  	header {
    	flex-direction: column;
    	height: auto;           /* removes clipping */
    	gap: 10px;
  	}
  	article.logo img {
    	max-height: 90px;
    	margin-left: 0;
  	}
  	.slogan h2 {
    	font-size: 1.1rem;
  	}
	}
	@media (max-width: 768px) {
  	p {
    	font-size: 1.2rem; /* overrides 200% */
  	}
  	p.history {
    	font-size: 1.1rem;
  	}
  	h1 {
    	font-size: 2rem;
  	}
  	h2 {
    	font-size: 1.6rem;
  	}
	}
	@media (max-width: 768px) {
  	.bio {
    	display: block;
  	}
  	article.headshot {
    	float: none;
    	margin: 0 auto 15px;
    	text-align: center;
  	}
  	p.history {
    	float: none;
    	width: 100%;
    	margin: 0;
  	}
	}
	@media (max-width: 768px) {
  	form {
    	width: 90%;
  	}
	}
	@media (max-width: 768px) {
  	.service_box {
    	padding: 20px;
  	}
  	.arrow {
    	font-size: 1.5rem;
    	padding: 8px 12px;
  	}
	}
	@media (max-width: 768px) {
  	article.badge {
    	display: none;
  	}
	}
	@media (max-width: 768px) {
  	p {
		font-size: 1rem;
    	font-size: clamp(1rem, 4vw, 1.25rem);
  	}
	}
	@media (max-width: 768px) {
	p.history {
		font-size: 1rem;
    	font-size: clamp(1rem, 3.8vw, 1.2rem);
  	}
	}
	@media (max-width: 768px) {
  	h1 {
		font-size: 1.8rem;
    	font-size: clamp(1.8rem, 5vw, 2.2rem);
  	}
  	h2 {
		font-size: 1.4rem;
    	font-size: clamp(1.4rem, 4vw, 1.8rem);
  	}
	}
	@media (max-width: 768px) {
  	p.greeting {
		font-size: 1.6rem;
    	font-size: clamp(1.6rem, 5vw, 2.2rem);
  	}
	}
	@media (max-width: 768px) {
  	p,
  	p.history {
    	width: 100%;
    	max-width: none;
    	margin-left: 0;
    	margin-right: 0;
  	}
	}
	@media (max-width: 768px) {
  	main,
  	section,
  	.content {
    	padding-left: 1rem;
    	padding-right: 1rem;
  	}
	}
	@media (max-width: 768px) {
  	.fade-in-text {
    	margin: 1.5rem 0;
  	}
	}
	@media (max-width: 768px) {
  	.bio {
    	display: block;
  	}
  	.bio .content {
    	width: 100%;
  	}
  	p.history {
    	float: none;
    	padding: 1rem;
  	}
	}
	@media (max-width: 768px) {
  	body {
    	font-size: 105%;
  	}
	}
	@media (max-width: 768px) and (orientation: portrait) {
		@media (max-width: 768px) and (orientation: portrait) {
 		main,
  		section,
  		.content {
    		padding-left: 0.75rem;
    		padding-right: 0.75rem;
  		}
		}
		@media (max-width: 768px) and (orientation: portrait) {
  		p,
  		p.history {
    		max-width: 100%;
    		margin-left: auto;
    		margin-right: auto;
  		}
		}
		@media (max-width: 768px) and (orientation: portrait) {
  		p {
    		line-height: 1.45;
  		}
		}
		@media (max-width: 768px) and (orientation: portrait) {
  		.fade-in-text {
    		margin: 1rem 0;
  		}
		}
		@media (max-width: 768px) and (orientation: portrait) {
  		.bio {
    		display: block;
  		}
  		article.headshot {
    		margin: 0 auto 1rem;
  		}
  		p.history {
    		padding: 0.75rem;
  		}
		}
		@media (max-width: 768px) and (orientation: portrait) {
  		html {
    		font-size: 98%;
  		}
		}
	}