@charset "utf-8";
html { background: linear-gradient(rgba(222, 222, 222, 0.8), rgba(244, 244, 244, 0.92)), url(images/background.jpg); background-repeat: no-repeat; background-size:cover; background-attachment:fixed;}
body {overflow-x: hidden; margin: 0 0 0 0; width:100%; scroll-behavior:smooth; font-family: "Google Sans", sans-serif; font-optical-sizing: auto; 
font-style: normal; font-variation-settings:"GRAD" 0;}

#lure h1 {text-align:left; color:#fff; font-size:3.8vw; width:100%; margin-bottom:0.40%; text-shadow: 0 0px 7px rgba(0, 0, 0, 1), 0 2px 3px rgba(0, 0, 0, 0.8);
 border-bottom:3.5px solid #fff; }
#lure p {text-align:left; color:#fff; font-size:1.8vw; width:100%; text-shadow:#000 0 0.50px 6px;}
.blur { background: linear-gradient(to right, rgba(100, 220, 100, 0.25), 50%, rgba(100, 240, 100, 0)); backdrop-filter: blur(7px); border-radius: 9px; width:32%;
margin:0; padding:1vh 4vh 5vh 2vh; -webkit-mask-image: linear-gradient(to right, black 93%, transparent 100%);}

nav {width: 100%; top: 0; height:0 auto; padding-top:0; background-color:#64a70c; z-index: 1000; overflow:hidden; box-shadow:#555 0 0 9px;}
#navcontact {display:inline-block; background-image: linear-gradient( rgba(8, 23, 0, 0.60), 75%, rgba(76, 118, 2, 1)), url(images/hex-backgroun.jpg); background-size:cover; width:100%; color:#fff; padding:1.1%; margin:0; position:relative;}
.menu-icon {display: none;}
#menu-toggle{display:none;}

.logo {display: inline-block; position: relative; width: 20%;}
.logo .normal {position: relative; z-index: 1;}
.logo img {width: 100%; display: block;}
.logo .glow {position: absolute;top: 0;left: 0; opacity: 0; transition: opacity 0.28s ease; z-index:2;}
.logo:hover .glow {opacity: 1;}

#bussinfo {display:inline-block; width:22%; height:auto; float:right; margin-top:1%; margin-right:1.2%; padding:0;}
#bussinfo p { font-size: clamp(1.2vw, 1.33vw, 1.5vw); margin:0%; text-align:right; color:#fff; padding-right:5%;}

.header-menu { display:flex; justify-content:flex-start; gap:3.5%; width:100%; font-size:1.25vw; list-style-type: none; padding: 0.5%; padding-bottom:0.75%; margin:0;}
.header-menu li { width:16%; margin:auto; display:flex; align-items:center; justify-content:space-between;}
.header-menu li a { padding:3.3% 0 3.3% 0; position: relative; white-space:nowrap; text-align: center; text-decoration:none; color:#fff; width:100%; z-index:1;}
.header-menu li a::before {content: ''; padding:1%; position: absolute; top: 0; left: -20%; width: 80%; background: rgba(177, 240, 10, 0.50); height: 100%; transform: scaleY(1); transition: all 0.32s ease; opacity: 0; }
.header-menu li a:hover::before { opacity: 1; transform: scaleY(2) translate(34%); z-index:-1; border-bottom:3px solid #fff;}
.header-menu li a:hover{ text-shadow: #000 0 3px 3px; }

.tagline { width:100%; padding:1%; margin:auto; margin-bottom:1.2%; color:#fff; text-align:center; background-color: rgba(50, 100, 69, 0.55); backdrop-filter: blur(4.3px);}
.tagline h2 {font-size: 2.5vw; margin:0;  text-shadow:#000 0 1px 3px;}
.tagline p {font-size: 1.11vw; margin:0; text-shadow:#000 0 0 3px;}

.ending {background-color:rgba(255,255,255,0.64); margin:auto; width:100%; padding:1%; margin-bottom:3%; display:inline-block;}
.ending h3, h4 {text-align:center; font-size:2vw;}
.ending p {color:#000; text-align:center; font-size:1.4vw; width:57%; margin:auto;}
.page-link { font-weight:600; text-decoration:none; transition:all .3s ease; color:#000;}
.page-link:hover {transition:transform .5s ease-in-out; color:#00FF1D;}

#openFormBtn { display:block; padding:0; margin:auto; width:18%; background: none; border: none; outline: none; border-radius:100px; transition: all 0.3s ease; cursor: pointer;}
#openFormBtn:hover {transition: transform 0.3s ease-in-out; transform: scale(1.07); box-shadow:#222 0 5px 9px;}
#openFormBtn img { display:block; width:100%;}
#popupForm {display: none; position: fixed; inset: 0;}

/*Overlay for Popup */
.modal {  display: none;  position: fixed;  z-index: 9999;  left: 0;  top: 0;  width: 100%;  height: 100%;  overflow: auto;  background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);}
.modal-content {  display: flex;  flex-direction: column;  background-color: rgba(31, 46, 46, 0);  margin: 0 auto;  padding: 0;  border-radius: 10px;  width: 400px;  height: 700px;}
.close-btn { position: absolute; top: 12px; right: 18px; font-size: 3rem; font-weight: bold; color: #fff; cursor: pointer; transition: .2s ease;z-index: 5;}
.close-btn:hover { color: #d22;transform: scale(1.15);}


.sitemap{ border-top: 7px solid transparent; border-image: linear-gradient(270deg, #fff, #222); border-image-slice: 1;  padding: 0.60%; width: 100%; background-image: linear-gradient(270deg, #444, #111); overflow:hidden;}
.sitemap #links {text-align:left; padding-top:0; margin-top:0; display:inline-block; width:50%; white-space:nowrap; }
.sitemap #links a {color:#fff;  border-left:2px solid #fff; padding-left:1%; padding-right:1%; text-decoration:none;}
.sitemap #sm {float:right; overflow:hidden; display:flex; align-items: center; margin-right:1%; }
.sitemap #compinfo {float:right; text-align:right; color:#fff; text-shadow:#222 0px 3px 3px; padding-right:1%; margin:0 auto; display:block; }
.sitemap #compinfo p { padding:0; margin:0; font-size:1.25rem;}
#facebook-logo, #x-logo, #insta-logo {height: 6vh;}
#legal {margin:0; padding:0; float:left; color:#fff; font-size:.60vw;}
#legal img {width:15%; margin:0; padding:0; padding-top:2.2%;}

@media (max-width: 760px) {
	
html, body {width:100%; overflow-x:hidden;}
nav {flex:wrap; overflow:hidden; text-align:center;}
#navcontact {display:none;}
.menu-icon {display: block; font-size: 50px; color:#fff; cursor: pointer; outline:none; padding:1%; text-shadow:#000 0 1px 5px;}
#menu-toggle:checked + .menu-icon + .header-menu {display: flex; max-height: 900px; opacity: 1;}
.logo {display:none;}
.header-menu {display: flex; flex-direction: column; width: 100%; max-height: 0; overflow: hidden; opacity: 0; background-color:#22301F; transition: max-height .50s ease, opacity .35s ease;}
.header-menu li {width:100%; text-align:center; padding: 5% 0 13% 0; margin:auto; box-sizing:border-box;}
.header-menu li a { display:block; color: white; width:100%; margin: 1.6% auto; padding:0; box-sizing:border-box; text-align:center; font-size:2.0rem; letter-spacing:3px; min-width:none; max-width:none; }
.header-menu li a::before { display:none;}
.header-menu li a:hover::before { display:none;}
.header-menu li a:hover{ text-shadow:#000 0 3px 6px; color:#000; background: #333; }
.header-menu.open {max-height: 500px; opacity: 1;}
	
.blur { background:none; backdrop-filter: blur(3px); border-radius: 9px; margin:0; padding:1%; -webkit-mask-image: linear-gradient(to right, black 93%, transparent 100%); width:100%;}

.tagline { width:96%; padding:3%; margin:auto; margin-bottom:1.2%; color:#fff; text-align:center; background-color: rgba(50, 100, 69, 0.55); backdrop-filter: blur(4.3px);}
.tagline h2 {font-size: 2.3rem; padding-bottom:3%;  }
.tagline p {font-size: 1.5rem; text-align:justify; text-justify: inter-character;}

.sitemap{ margin:auto; padding:0; width: 100%;}
.sitemap #links {text-align:center; padding-top:inherit; margin-top:5%; margin-bottom:20%; display:inline-block; width:100%;}
.sitemap #links a {padding-left:1%; padding-right:1%; font-size:1.1rem;}
.sitemap #sm {float:none; overflow:hidden; display:flex; flex-direction:row; justify-content:space-around; align-items: center; gap: 6%; margin:auto; margin-bottom:13%; padding:0;}
.sitemap #compinfo {float:none; text-align:center; color:#fff; text-shadow:#222 0px 3px 3px; padding-right:0; margin: auto; display:block; margin-bottom:5%; }
.sitemap #compinfo p { padding:inherit; font-size:1.8rem; text-align:center;}
#facebook-logo, #x-logo, #insta-logo {height: 8vh;}
#legal {display:none;}
#legal img {display:none;}
	
.ending h3 {font-size:2rem;}
.ending p {font-size:1.4rem; text-align:justify; text-justify:inter-word; padding: 0 3% 0 3%; margin:auto; width:90%;}
.page-link { font-weight:600; text-decoration:underline; transition:none; color:#000;}
.page-link:hover {transition:none; color:#000;}

.phonenumber img {display:block; width:32%; margin:auto; margin-bottom:10%; transition:none; flex:2;}
.phonenumber img:hover {transform:none;}
.phonenumber img:active {transform:none;}

.modal {  backdrop-filter: blur(6px); }
.modal-content {  display: flex;  flex-direction: column;  background-color: rgba(31, 46, 46, 0);  margin: 0 auto; margin-top:25%;  padding: 0;  border-radius: 10px;  width: 400px;  height: 700px;}
.close-btn { position: absolute; top: 3.4%; right: 44%; font-size: 4rem; font-weight: bold; color: #000; cursor: pointer; transition: none; z-index: 5;}
.close-btn:hover { color:#000;transform: none;}

}