* {
   padding: 0;
   margin: 0;
}

/* center crosshairs
body::before {
   content: "";
   position: fixed;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 1px;
   background: red;
   z-index: 9999;
   pointer-events: none;
}

body::after {
   content: "";
   position: fixed;
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
   background: red;
   z-index: 9999;
   pointer-events: none;
}
*/

body {
   box-sizing: border-box;
   /*background-color: black;*/
   overflow-x: hidden;
   margin: 18vh 0 5vh 0;


}

/* header styling*/
.header {
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   /* space logo, line, menu evenly */
   height: 20vh;
   /* fixed height */
   padding: 0;
   /* remove extra padding */
   /* remove margin-top */
   box-sizing: border-box;
   padding-top: 1vh;
   overflow: visible;
   /* prevent overflow */
   background: 
   linear-gradient(rgba(31, 46, 46, 0.9), rgba(31, 46, 46, 0.9)), 
    url("../images/headerbg.png");
    background-position: center;
    background-repeat: repeat;
    background-size:contain;
   /*background-color: rgba(31, 46, 46, 1);*/
   z-index: 100;
}

.header .logo {
   display: flex;
   justify-content: center;
   align-items: center;
}

.header .logo img {
   height: 10vh;
   
   /* scales with header */
   margin-bottom: 2%;
}

.header-break {
   border: none;
   outline: none;
   background-color:#75BF44;
   width: 70vw;
   height: .2vh;
   margin: 0 auto;
}

.header-menu {
   display: flex;
   gap: 6vw;
   justify-content: center;
   align-items: center;
   list-style-type: none;
   padding: 0;
   padding-bottom: 2vh;
   margin: 1vh 0 1vh 2vh;
   overflow: visible;
   position: relative;
   z-index: 9999;
}

.header-menu li {
   position: relative;
}

.header-menu li a:hover {
   text-shadow: 5px 5px 10px black;

}

.submenu {
   display: none;
   position: absolute;
   top: 100%;
   /* directly below parent li */
   left: 50%;
   /* start from the center of li */
   transform: translate(-50%, 10px);
   /* center horizontally */
    background-color: rgba(31, 46, 46, .95);
   border-radius: 10px;
   padding: 1vh 1vw;
   list-style: none;
   width: 8vw;
   z-index: 2000;
   text-align: center;
}


.submenu li {
   padding: 5px 0 5px 0;
   text-align: center;


}

.header-menu li:hover>.submenu {
   display: block;
   box-shadow: 2px 2px 8px 5px black;


}

.submenu li:hover {
   transform: scale(1.2);
}


/* Footer styling */
.techondemand-footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 100;
   background: none;
   height: 7vh;
   padding: 0;
   display: flex;
   justify-content: space-between;
   background: 
   linear-gradient(rgba(31, 46, 46, 0.8), rgba(31, 46, 46, 0.8)), 
    url("../images/footerbg.png");
    background-position: center;
    background-repeat: repeat;
    background-size:contain;
   box-sizing: border-box;
}

.footer-left {
   display: flex;
   align-items: center;
   gap: 1vw;
   justify-content: space-between;
   margin-left: .5vw;
   max-width: 25%;
}

.footer-center {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   max-width: 20%;
}

.footer-right {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   margin-right: 2vw;
   gap: 1vw;
   max-width: 40%;
}

#footer-logo {
   height: 4vh;
}

#facebook-logo {
   height: 4vh;
}

#x-logo {
   height: 4vh;
}

#insta-logo {
   height: 4vh;
}

/* button formatting */
#request-btn {
   background-color: #75BF44;
   color: white;
   border: none;
   height: 4.5vh;
   /* Button height relative to footer (footer is 7vh) */
   min-width: 10vh;
   /* Width also relative to viewport height */
   font-size: 2vh;
   /* Font scales with footer */
   padding: 0 2vh;
   /* Horizontal padding in vh */
   border-radius: 1vh;
   /* Rounded corners scale with footer */
   box-shadow: 0.5vh 0.5vh 1.5vh 0.3vh rgba(0, 160, 0, 0.7);
   cursor: pointer;
   transition: transform 0.2s ease, background-color 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

#request-btn:hover {
   background-color: rgb(132, 179, 241);
   transform: scale(1.1);
}

#request-btn:active {
   transform: scale(0.95);
}


/* form submission popup */
.response-modal {
   display: none;
   position: fixed;
   z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
}

.response-content {
   background-color: #8bc2a5;
   margin: 15% auto;
   padding: 20px;
   width: 300px;
   max-width: 500px;
   border-radius: 10px;
   text-align: center;
   color: #003333;
   font-weight: bold;
}

.close-btn {
   float: right;
   cursor: pointer;
   color: red;
   font-size: 1.2rem;
}


/*background image - shared between slides */
.body-section {
   background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0.9)),
      url('../images/background.jpg');
   background-attachment: fixed;
   /* Makes it stay in place */
   background-size: cover;
   /* Cover the entire screen */
   background-position: center;
   /* Center it */
   background-repeat: no-repeat;
}

/* shared sitemap styling */
.sitemap{
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   padding-bottom: 3vh;
   padding-top: 2vh;
   width: 100%;
   height: auto;
    background-color: rgba(31, 46, 46, .8);
}

.sitemap h2{
   display: flex;
   justify-content: center;
   text-align: center;
}

.sitegrid {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 1vh;
gap:5%;
}

.sitesection {
   display: flex;
   flex-direction: column;
   text-align: center;
   line-height: 1;
}