/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

/* * {
  outline: 1px solid red !important;
}*/

/* 320px portrait - smallest mainstream phone (Legacy) */
html {
  font-size: 100%;
  scroll-padding-top: 80px; /* Adjust this to control spacing */
  scroll-behavior: smooth; 
}
body {
  /*scroll-padding-top: 115px;
  scroll-behavior: smooth;*/
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #f5f5f5;
  font-family: sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.125rem); /*1.125 = 18px */
  line-height: 1.5;
  color: #000000; 
}
.coverimage {
  line-height: 0;
  margin:0px;
  padding: 45px 0px 0px 0px; /* 360+ 60 */
}

/* ########## LOGO ########## */
header.global {
  display: flex;
  z-index: 1000;
  position: fixed;
  top: 0px;
  justify-content: space-between;
  background-color: #000000; 
  width: 100%;
  height: 45px; /* 360+ 60 */
  padding-left: 0px;
  align-items: center;
  color: white; 
}
.logo {
  max-width: 100%;
  width: min(85%, 360px);
  height: auto;
  margin-top: 0px;
  margin-left: 10px; 
}
.tagline {
  position: absolute;
  width: 100%;
  margin: 0px;
  padding: 45px 0px 0px 15px;  /* 360+ 60 0 0 15 */
  font-family: sans-serif;
  font-size: clamp(.75rem, 3.5vw, 1.2rem); /* 360+ 85 4 1.2 */
  font-weight: normal;
}

/*.show-menu {
  /*display: block;*
  visibility: visible;
  opacity: 1; 
}
/*#menu {
  /*display: none;*
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 46px;
  right: 0px;
  background: #000000;
  width: auto;
  padding: 5px 10px 0px 20px;
  font-size: clamp(1.5rem, 1.5vw, 2rem);
  border-radius: 5px;
  text-align: right; 
}
#menu ul {
  list-style: none;
  padding: 0; 
}
#menu ul li {
  margin: 10px 0; 
}
#menu ul li a {
  color: white;
  text-decoration: none; 
}
#menu-toggle {
  position: absolute;
  top: 11px; /* 360+ 20px *
  right: 15px;
  z-index: 1000; /* Keep above the menu *
}*/
/* Navigation */
nav {
  position: relative;
  background: #000;
  padding: 10px;
}
/* Menu button */
#menu-toggle {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 12px;
  margin-top: 7px;
  margin-right:5px;
  background: #000000;
  color: #ffffff;
  font-size: 1.8rem; /* Adjust icon size */
  cursor: pointer;
  user-select: none; /* Prevent accidental text selection */
}
#menu-toggle:focus {
  outline: none;
}
/* Mobile menu styles */
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 40px;
  right: 0px;
  background: black;
  display: none;
  flex-direction: column;
  width: 120px;
  border-radius: 2px;
}
#menu.show-menu {
  display: flex;
}
#menu li {
  padding: 10px 0px 10px 0px;
  text-align: right;
}
#menu li a {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight:bold;
  color: white;
  text-decoration: none;
  padding:10px 10px 10px 0px;
}
/*#menu li a:hover {
  background-color:#58784F;
}
#menu li a:active {
  background-color:#ff0000;
}
#menu li a:visited {
  background-color: transparent;
}*/

/*#menu a {
    color: white;
    text-decoration: none;
}*/

.hero {
  /*border:1px solid green;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: absolute; /* keeps this section on top of the cover image */
  left: 0%;
  top: 0px;
  width: 100vw;
  margin-top: clamp(65px, 20%, 180px);*/ /* 360+ 80 30 350; */ 
  /*height: 100vh;*/
  /*margin-top:45px;
  margin-bottom:0px;*/
 }
 .hero h1 { /* Headline */
  width: 95%;
  margin: auto;
  padding: 0;
  font-family: sans-serif;
  font-weight: bold;
  font-size: min(8.5vw, 3rem); /* scales with viewport width, but won’t exceed 3rem */ /* 360+ 6.5, 3 */
  letter-spacing: -1px;
  line-height: .95; /* 360+ 1 */
  text-align: center; 
}
 .hero h2 { /* Sub-Headline */
  font-size: min(4.5vw, 1.7rem); /* scales with viewport width, but won’t exceed 3rem */
  font-weight: normal;
  width: 100%;
  margin: auto;
  padding: 0;
  line-height: normal; /* 1600 = 2 */
  text-align: center; 
}
/*.tourbutton {
  display: block;
  background-color: #58784F;
  border: 1px solid #000000;
  border-radius: 25px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
  width: clamp(200px, 40%, 350px);
  margin: auto;
  margin-top: 25px;
  padding: 5px 0px 4px 0px;
  font-size: clamp(1.1em, 2.5vw, 1.5rem);
  font-weight: bold;
  color: #ffffff; 
  text-align: center;
  text-decoration: none; 
}*/
.tourbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #58784F;
  border: 1px solid #000000;
  border-radius: 25px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
  width: clamp(200px, 40%, 350px);
  margin: auto;
  margin-top: 25px;
  padding: 8px 0; /* Adjust as needed */
  font-size: clamp(1.1em, 2.5vw, 1.5rem);
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}

.tourbutton:hover {
  border: 1px solid #000000;
  color: #ffff66; 
}
.tourbutton:active {
  color: #000000; 
}

/* Main Content */
main {
  margin-top: 0px;
  padding-top: 0px; 
}
/* ########## PANEL 2 ########## */
.about_wrapper {
  margin: 0px;
  padding:10px 0px 10px 0px;
}
.about {
  position: relative;
  /*padding: 150px 20px;*/ /* Ensure enough space for text */
  z-index: 2; /* Keep it above the Hero section */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: justify;
  /* border: 1px solid #D9E9EE; /* border & shadow for 480+
  border-radius: 15px 15px 15px 15px;
  -webkit-border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);*/
  /*background-color: rgba(255, 255, 255, 0.7);*/ /* 50% transparent white */ /* 480+ */
  width: min(90vw, 832px);
  min-width: 310px;
  margin: auto;
  /*margin-top: 100px; */ /* Adjust this to control the overlap */
  /*margin-top: calc(8vh - 0px);*/ /* Adjust this to control the overlap */
  /*margin-bottom: 20px;*/
  padding: 2%; 
}
.about h3 {
  width: min(80vw, 750px);
  margin: 0px;
  padding: 0px;
  font-size: min(6vw, 1.7rem); /* scales with viewport width, but won’t exceed 3rem */
  text-align: center; 
}
.aboutcontainer {
  width: min(90vw, 750px); /* 360+ = 80vw */
  min-width: 260px;
}
.aboutcontainer p {
  margin-bottom: 10px;
  line-height: 1.3rem;
}
/* ########## CONTACT ########## */
.contactcontainer {
  position: relative;
  z-index: 1; /* Ensures it stays below */
  display: flex;
  height: clamp(50vh, calc(100% + 2rem), 80vh);
  background-color: #000000;
  width: 100%;
}
.contactcover {
  background-image: url(../images/contact.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}
.formcontainer {
  width: clamp(90%, 65%, 750px);
  margin: auto;
  margin-top: 0px;
  padding-top: 10px; 
}
.formheading {
  margin: 0px 0px 0px 0px;
  padding-top: .3em;
  font-size: clamp(1.4rem, 2.5vw, 1.5rem);
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 1px 0px rgba(2,1,0,0.99);
  text-align: center;
  line-height: 1.5rem; 
}
.contactoptions {
  margin: 0px;
  padding: 0px;
  font-size: clamp(.85rem, 2.5vw, 1.5rem);
  font-style: italic;
  font-weight: bold;
  color: #ffffff; 
  text-shadow: 2px 1px 0px rgba(2,1,0,0.99);
  text-align: center; 
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(.5rem, 2vw, 2.5rem);
  margin: auto;
}
input {
  min-height: 40px;
}
input::placeholder {
  font-size: 1rem;
  text-align: right;
  color: #000000;
}
.contact-form input,
.contact-form textarea {
  opacity: 0.65; 
  width: 100%;
  padding:10px;
  font-size: 1.15rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  text-align: left; /* User input remains left-aligned */
  direction: ltr;   /* Ensures normal text flow */
}
/* Focus Effect */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #007BFF;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
  outline: none;
}
/* Error Validation */
.contact-form input:invalid,
.contact-form textarea:invalid {
  border-color: red;
}
.contact-form input:valid,
.contact-form textarea:valid {
  border-color: green;
}
textarea::placeholder {
  text-align: right;
  font-family: sans-serif;
  font-size: 1rem;
  color: #000000;
}
/* Textarea Styling */
.contact-form textarea {
  font-size: 1.15rem;
  resize: vertical;
  min-height: 100px;
}
/* Submit Button */
.contact-form button {
  background-color: #58784F;
  color: white;
  border: none;
  padding: 8px;
  cursor: pointer;
  font-size: clamp(1.3rem, 2.5vw, 1.5rem);
  border-radius: 50px;
  transition: background 0.3s ease;
}
/* Disable button until form is valid */
.contact-form button:disabled {
  background: #58784F /*#ccc*/;
  cursor: not-allowed;
}
/* Enable button when form is valid */
.contact-form:has(input:valid, textarea:valid) button {
  background: #58784F /* #007BFF */;
}
.contact-form button:hover:not(:disabled) {
  background: #58784F /*#0056b3*/;
}
/* Hide anti-spam field */
.contact-form .antispam {
  display: none;
}

.antispam {
  display: none; 
}
.noscript {
  font-size: 70%; 
  color: #111111;
  text-align: center; 
}

/* ########## ALTERNATIVE CONTACT ########## */
.tilde {
  font-weight: normal;
}
.altcontact { /* Grid Layout */
  display: flex;
  flex-direction: column; /* Start as a single column */
  background-color: #000000;
  width: 100%;
  margin: auto;
  padding-bottom: 5.5vh;
  font-size: clamp(.8rem, 2vw, 1rem);
  color: #ffffff; 
}
.column {
  text-align: center;
}
.locationcontainer,
.hourscontainer,
.phonecontainer, 
.socialcontainer {
  padding: 0px;
  text-align:center;
  line-height: 2.7ex;
}
h3.contactlabel {
  margin: 3px;
  padding-top:20px;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: bold;
  color: #ffffff; 
}
.email {
  margin: 0px 0px 8px 0px;
}
.phone {
  line-height: 2ex;
}
.text_voicemail {
  font-size: 1.5ex; 
  line-height: 2ex;
  color: #cdcdcd; 
}
.socialcontainer h3 {
  background-color: #000000;
  margin: 0px;
  padding: 0px;
  font-size: 1.1rem;
  text-align:center;
  color: #ffffff; 
}
.socialcontainer p {
  background-color: #000000;
  margin-top: -1px; /* <==== WHY did I have to do this?? */
  padding:10px 0px 20px 0px;
  text-align:center; 
}
img {
  border: none; 
  max-width: 100%;
  height: auto;
}



/* 
   ###################################################################################################################
   ############################################### PRIVACY PAGE STYLES ############################################### 
   ###################################################################################################################
*/
.page_title {
  margin:auto;
  margin:40px 0px 0px 0px;
}
.privacy {
 width: min(90%, 1000px);
 margin:auto;
 margin-top:75px;
 margin-bottom: 20px;
 font-family: serif;
}
.privacy h4 {
 margin:10px 0px 0px 0px;
	padding:0px 0px 0px 0px 
}
.privacy p {
 margin-top:0px;
 padding:0px 0px 10px 20px; 
}
.privacy ul {
	margin:0px 0px 0px 40px;
	font-size:100%;
}
.privacy ul li {
 margin-bottom:0px;
}
.privacy ul.sub {
 font-size:100%;
}
.contactinfo {
 margin:2px 0px 50px 0px;
 padding-left:75px; 
}
.updated {
  font-family: sans-serif;
  font-size: 80%;
  text-align: center;
}

/* 
   ##################################################################################################################
   ############################################ TERMS OF USE PAGE STYLES ############################################ 
   ##################################################################################################################
*/
.nisterms {
 width: min(90%, 1000px);
 margin:auto;
 margin-top:75px;
 margin-bottom:30px;
 font-family: serif;
}
.termsblurb p {
 margin-bottom: 15px;
 text-align: justify;
}
.terms {
 width: min(87%, 900px);
 margin: auto;
 margin-bottom: 50px;
 padding-top: 15px;
}
.terms h4 {
 width: 50%;
 margin:10px 0px 0px 0px;
	padding:0px 0px 0px 0px 
}
.terms p {
 padding:0px 0px 0px 0px;
 margin-bottom:20px;
 text-align:justify; 
}
.terms ul {
	margin:0px 0px 0px 40px;
	font-size:100%;
}
.terms ul li {
 margin-bottom:0px;
}
.terms ul.sub {
 font-size:100%;
}

/* Footer */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-top:1px dashed #444444;
  text-align: center;
  margin-top: -3px; /* <== And WHY did I have to do this?!? */
  padding: 10px;
  background: #000000;
  color: white; 
}
.privacy_terms {
  font-size: 1rem;
}
.privacy_terms a:link {
  display: inline;
  color: #aaaaaa;
}
.privacy_terms a:visited {
  color: #aaaaaa;
}
.privacy_terms a:hover {
  color: #ffffff;
}
.privacy_terms a:active {
  color: #aaaaaa;
}
.bottomnav li {
  font-size: .8rem;
  list-style: none;
  display: block; 
}

.copyright p {
  width: 100vw;
  padding-top:1vh;
  font-size: .8rem; 
  color: ; 
}
.copyright span {
  display: none; 
}