:root {
	  --nav-width: 260px;
	  --bg-dark: #111;
	  --bg-light: #f4f4f4;
	  --accent: #009688;
	}
	
	html, body {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}
		
html {
	scroll-behavior: smooth;
}
	* {
	  box-sizing: border-box;
	  margin: 0;
	  padding: 0;
	}
.scroll-down {
	  display: inline-block;
	  margin-top: 1rem;
	  font-size: 2rem;
	  color: #000000;
	  animation: bounce 2s infinite;
	  text-decoration: none;
	}
	@keyframes bounce {
	  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	  40% {transform: translateY(10px);}
	  60% {transform: translateY(5px);}
	}
	
	/* Remove any background from body */
	body {
	  margin: 0;
	  padding: 0;
	}
	
body {
	  min-height: 100%;
	  font-family: 'Inter', serif;
	  font-size: 11pt;
	  color: #7d7e7e;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and (min-resolution: 192dpi) {
body {
background: transparent;}
}


	nav {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 260px;
	  height: 100vh;
	  background-color: #03212b;
	  display: flex;
	  flex-direction: column;
	  justify-content: center; /* This centers the nav items vertically */
	  align-items: center;
	  padding: 0 1rem;
	  z-index: 1000;
	  color: #ffffff;
	}
	nav h3 {
	  font-size: 1.2rem;
	  margin-bottom: 2rem;
	  color: #ffffff;
	}
.nav a {
	  display: block;            /* ensures each link takes full width */
	  width: 100%;               /* fills the container horizontally */
	  padding: 1rem;             /* vertical spacing */
	  text-align: left;
	  text-decoration: none;
	  color: white;
	  font-weight: bold;
	}
	.nav a:hover {
	  background-color: #ffffff;
	}
	.nav a:active, .nav a:visited {
		background-color: #03212b;
		color: #ffffff;
	}
	.nav-toggle {
	  display: none;
	  position: fixed;
	  top: 1rem;
	  left: 1rem;
	  font-size: 3rem;
	  background-color: transparent;
	  border: none;
	  color: orange;
	  z-index: 1001;
	}
	header, main, footer {
	  margin-left: var(--nav-width);
	}
	header {
	height: 100vh;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end;
	  margin-top: 40px;

	}
/* TRANSPARENT BACKGOUND */
	.header-strip, section, footer {
		background-color: rgba(255,255,255, 0.8);
	}
	.header-strip {
	  width: 100%;
/*	  height: 30vh; */
	  color: white;
	  padding: 2rem;
	  text-align: center;
	}
	.header-strip img {
		padding-bottom: 40px;
		max-width: 100%;
		height: auto;
	}
	section {
	  padding: 1rem 5%;
	  position: relative;
	}
	section::after {
		content: "";
		  position: absolute;
		  bottom: 0;
		  left: 20%; /* centers the 80% line */
		  width: 60%;
		  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	}
	section:nth-child(even) {
	  background-color: rgba(255, 255, 255, 0.8);
	}
	section h2 {
	  margin-bottom: 1rem;
	}
h2, h3 {
	text-align: center;
	padding-bottom: 20px;
  color: #7d7e7e;
  }
	h1 {
		  font-family: 'Libre Franklin', sans-serif;
		  font-size: 3rem;
		  font-kerning: 30%;
		  letter-spacing: 0.4rem;
		  color: #03212b;
		  padding-bottom: 20px;
		}
	h2 {
		  font-size: 2rem;
		  letter-spacing: 0.3rem;
		  line-height: 2.5rem;
		  margin-top: 30px;
		  margin-bottom: 50px;
		}
		h2.subtitle {
		  font-family: 'Cormorant', serif;
		  font-style: italic;
		  margin-top: 0px;
		}
	p {
	text-align: left;
	margin-bottom: 20px;
	}
	a, a:hover, a:focus, li a:hover {
		color: #03212b;
	}
	ul {
		margin-left: 40px;
		margin-bottom: 20px;
	}
	form {
	  max-width: 600px;
	  margin: 0 auto;
	}
	form p {
		text-align: center !important;
	}
	form input, form textarea, form button {
	  width: 100%;
	  font-family: 'Inter', serif !important;
	  margin-bottom: 1rem;
	  padding: 0.75rem;
	  font-size: 1rem;
	}
	form button {
		background: #03212b;
		color: #ffffff;
	}
	.formsubmit {
		text-align: center;
		padding: 30px;
		color: #03212b;
	}
	footer {
	  color: #03212b;
	  padding: 2rem;
	  text-align: center;
	}
footer p {
	font-size: 0.8rem;
	margin-bottom: 0.1rem;
	text-align: center !important;
	color: rgba(0, 0, 0, 0.4);
}
	/* Mobile styles */
	@media (max-width: 768px) {
	  nav {
		transform: translateX(-100%);
	  }
	  nav.open {
		transform: translateX(0);
	  }
	  .nav-toggle {
		display: block;
	  }
	.menu-heading {
		display: none;
	  }
	  header, main, footer {
		margin-left: 0;
	  }
	}
	.download-wrapper, .booking-wrapper {
		  display: flex;
		  justify-content: center;
		  margin: 40px 0;
		}
		.download-button, .booking-button {
		  background-color: #03212b;
		  color: #fff;
		  padding: 12px 20px;
		  text-decoration: none;
		  border-radius: 5px;
		  font-size: 16px;
		  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
		  display: inline-flex;
		  align-items: center;
		  gap: 8px;
		}
		form button:hover, .download-button:hover, .booking-button:hover {
		  background-color: #03212b;
		  color: #ffffff;
		}
#testimonial {
	  background-color: transparent;
	  padding: 0em 1.5em;
	  text-align: center;
	  font-family: 'Cormorant', serif;
	  font-weight: bold;
	  position: relative;
	}
	#testimonial:after {
		border-bottom: none;
	}
	.testimonial-container {
	  max-width: 700px;
	  margin: 0 auto;
	  position: relative;
	  text-align: left;
	  padding-left: 2.5em;
	}
	.quote-icon {
	  position: absolute;
	  top: -10px;
	  left: 0;
	  font-size: 3rem;
	  color: rgba(200, 200, 200, 0.9);
	  z-index: 0;
	  pointer-events: none;
	}
	.testimonial-text {
	  position: relative;
	  font-size: 1rem;
	  line-height: 1.6;
	  margin: 0 0 1em;
	  z-index: 1;
	}
	.testimonial-author {
	  font-size: 1rem;
	  z-index: 1;
	  position: relative;
	}
.back-to-top {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  font-size: 24px;
	  background: #03212b);
	  color: #fff;
	  padding: 10px 15px;
	  border-radius: 50%;
	  display: none;
	  cursor: pointer;
	  z-index: 999;
	  transition: opacity 0.3s ease;
	}
	.back-to-top.show {
	  display: block;
	}