/*Browser Padding Reset*/
 * {padding: 0; margin: 0;}

/*Body Height*/
 body {height: 160vh;}

/*Loader Container*/
 .loader-wrapper {width: 100% ;height: 100%; position: fixed;
                z-index: 100000; top: 0; left: 0;
                background-color:#00ace6; opacity: 1; overflow: hidden;}


/*Loading Screen Css*/

 body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
 }
 .center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
 }
 .wave {
  width: 5px;
  height: 100px;
  background: linear-gradient(45deg, gold, #fff);
  margin: 10px;
  animation: wave 1s linear infinite;
  border-radius: 20px;
 }
 .wave:nth-child(2) {
  animation-delay: 0.05s;
 }
 .wave:nth-child(3) {
  animation-delay: 0.10s;
 }
 .wave:nth-child(4) {
  animation-delay: 0.15s;
 }
 .wave:nth-child(5) {
  animation-delay: 0.2s;
 }
.wave:nth-child(6) {
  animation-delay: 0.25s;
 }
 .wave:nth-child(7) {
  animation-delay: 0.30s;
 }
 .wave:nth-child(8) {
  animation-delay: 0.35s;
 }
 .wave:nth-child(9) {
  animation-delay: 0.40s;
 }
 .wave:nth-child(10) {
  animation-delay: 0.45s;
 }

 @keyframes wave {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
 }


/*Header Design/Position*/
 .header {position: absolute; background-color: #222; height: 16vh;
         width: 100%; top: 0; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
         z-index: 4;}

/*Logo Design/Position*/
 .logo {padding-top: 200-vh; padding-left: 100-vw; float: left; opacity: 0;}

 /*Title Card*/
 .titlecard {
  width: 5vw;
  height: 5vh;
  display: flex;
  flex-direction: column;
  justify-content: cnter;
  align-items: center;
  z-index: 1040;
  position:absolute; 0; 
  margin-top: -10vh;
  margin-left: 11vw;
  padding-right:13vh ;
  padding-left:0vw ;
}

.titlesub{
  font-size: 45px;
  text-transform: uppercase;
  font-family: 'Gambetta', serif;
  letter-spacing: -3px;
  transition: 700ms ease;
  font-variation-settings: "wght" 31;
  margin-bottom: 0.8rem;
  color: PaleGoldenRod;
  outline: none;
  text-align: center;
}

.titlesub:hover {
  font-variation-settings: "wght" 58; 
  letter-spacing: 1px;
}

.titlesub2{
  font-size: 1.6em;
  line-height: 50%;
  text-align: center;
  color: MintCream;
  letter-spacing: .5px;
  font-family: 'Bebas Neue', cursive;
}

/*Scroll-Bar Customization*/
 html::-webkit-scrollbar {width: 1vw;}

 html::-webkit-scrollbar-thumb 
               {background-color: silver; border-radius: 100vw;}

 html::-webkit-scrollbar-thumb:hover {background-color: gold;}

 html::-webkit-scrollbar-track {background-color: #4E4E4E;}

/*Active*/
.active {color: lightyellow !important;}

/*Nav Bar Design/Position*/
 .linav {float: right; display: inline-block; padding-top: 5vh;
         font-size: 2.2vw; font-family: 'Work Sans', sans-serif;
         text-transform: uppercase; padding-left: 2.2vw;
         color: silver; position: relative;}

/*Moves Everything In Nav Over A Bit*/
 nav .headnav {padding-right: 24vw;}        




 .headnav {display: flex; justify-content: center;}


/*Hover Effects*/
 a:link { text-decoration: none; }
 a:visited { text-decoration: none; }
 a:hover { text-decoration: none; }
 a:active { text-decoration: none; }

 .linav:hover {color: lightyellow;} 

 nav li::before {content:''; display: block; height:5px; width:100%;
                background-color:lightyellow; position:absolute; top:0;
                width:0%; border-radius: 100px;

 transition: all ease-in-out 250ms;}

 nav li:hover::before {width:80%;}
 
/*Sliding Header*/
 .headspace {height: 100.6vh; width: 100%; position: absolute; top: 0;
             boder: 2px solid pink;}

 .header {position: sticky;}

/*Contact Header*/
 .cohead {float: left; font-size: 5.8vw; font-family: 'Bebas Neue', cursive; padding-top: 17vh;
          color: white; padding-left: 1vw;}

 .copara {float: left; margin-top: 5vh; color: white;font-family: 'Josefin Sans', sans-serif;
          padding-left: 1vw; font-size: 2.5vw;}

 .cofoot {margin-top: 65vh; position: absolute; color: white; letter-spacing: 1px;}                  

/*Contact Inputs Style*/
 .inputstyle {position: absolute; top: 21%;  left: 50%;}

 .allinputs {min-width: 40vw; border: none; border-radius: 5px; bordr-bottom: 10px solid white;
             font-family: 'Josefin Sans', sans-serif; font-size: 2.3vw; color: white; background-color: #111;
             padding-left: 1px; opacity: 95%;}

 .fullname {padding-bottom: 12.5px; padding-top: 12.5px; margin-top: 3vh;}

 .emailer {margin-top: 8.5vh; padding-bottom: 12.5px; padding-top: 12.5px;}

 .messagearea {margin-top: 10.5vh; padding-top: 3vh;}

 .formlabel {position: absolute;}

 .send-btn {border: none; min-width: 7vw; height: 6vh; border-radius: 25px;
            font-family: 'Josefin Sans', sans-serif; font-size:1.3vw; background-color: white;
            position: absolute; left: 67%; margin-top: 40vh; transition: 0.4s; color: black;}

 .label1 {font-size: 2.3vw; color: white; font-family: 'Josefin Sans', sans-serif;
          top: -2vh; position: absolute;}
 .label2 {font-size: 2.3vw; color: white; font-family: 'Josefin Sans', sans-serif;
          left: 0%; position: absolute; margin-top:16vh;}
 .label3 {font-size: 2.3vw; color: white; font-family: 'Josefin Sans', sans-serif;
         left: 0%; position: absolute; margin-top:22vh;}

 .liner {height: 100vh; width: 0.2vw; background-color: #222; position: absolute; top: 0%; right: 63%;
         opacity: 100%; box-shadow: rgba(0, 0, 0, 0.35) 0px 50px 15px; z-index: 2;}


 .send-btn:hover {background-color:black; color: white;}       

/*Email Us Hover*/
 .footer__btn:hover {background-color: gold; !important;}
 footer a span { z-index: 100;}

/*End Section*/
 .end {position: absolute; width: 100%; height: 42vh;
       background-color: white; margin-top: 130vh; z-index: -1;}

 .end-text {font-size: 5vw; font-family: 'Bebas Neue', cursive;
            top: 140vh; margin-left: 23vw; color: #222; white-space: nowrap;
            position: absolute;} 

 .endlink {font-size: 5vw; font-family: 'Bebas Neue', cursive;
           margin-left: 41vw; color:gold; z-index: 1; position: absolute;
           top: 155%; text-decoration: underline;} 

.mail .text-box {position: absolute; top: 210vh; z-index: 100; border: none;
                 height: 5vh; width: 40vw; left: 30vw; border-radius: 5px;
                 font-family: 'Josefin Sans', sans-serif; font-size: 1.5vw;}

 .label {position: absolute; top: 210vh; font-family: 'Josefin Sans', sans-serif;
         color:gold; z-index: 100; font-size: 2vw; left: 2vw;} 

 .left-change {height: 160vh; width: 36.7vw; background-color: dimgrey; top: 0; position: absolute; z-index: -1;}                                    

/*Footer Section*/

/*Footer Link Hover*/
 .footer__nav li a:hover {color:gold ;}

 .footer__nav li {z-index: 10;}

 /*Footer Link Hover(End)*/

 *, *:before, *:after {
  box-sizing: border-box;
 }

 html {font-size: 100%;}

 body {margin: 0; display: grid; grid-template-rows: auto 1fr auto;
       font-size: 14px; background-color: lightblue;
       align-items: start;
       min-height: 100vh;}



 .footer {bottom: -134vh; position: absolute; font-family: acumin-pro, system-ui, sans-serif;
         display: flex; flex-flow: row wrap; padding: 30px 30px 20px 30px;
         color: #222; background-color: #222; border-top: 1px solid #e5e5e5;
         width: 100%; height: 64vh;}

 .footer > * {flex:  1 100%;}

 .footer__addr {margin-right: 1.25em; margin-bottom: 2em;}

 .footer__logo {font-family: 'Pacifico', cursive; font-weight: 400;
                font-size: 1.5rem; color: white;}

 .footer__addr h2 {margin-top: 1.3em; font-size: 15px; font-weight: 400;}

 .nav__title {font-weight: 400; font-size: 15px; color: white;}

 .footer address {font-style: normal; color: #999;}

 .footer__btn {display: flex; align-items: center; justify-content: center;
  height: 36px; max-width: max-content;
  background-color: white; border-radius: 100px;
  color: grey; line-height: 0; margin: 0.6em 0;
  font-size: 1rem; padding: 0 1.3em; transition: all ease-in-out 0.14s;}

 .footer ul {list-style: none; padding-left: 0;}

 .footer li {line-height: 2em;}

 .footer a {text-decoration: none;}

 .footer__nav {display: flex; flex-flow: row wrap;}

 .footer__nav > * {flex: 1 50%; margin-right: 1.25em;}

 .nav__ul a {color: #999;}

 .nav__ul--extra {column-count: 2; column-gap: 1.25em;}

 .legal {display: flex; flex-wrap: wrap; color: #999;
        position: absolute; padding-top: 50vh;}
  
 .legal__links {display: flex; align-items: right; padding-left: 53vw;}

 .heart {color: turquoise;}

 @media screen and (min-width: 24.375em) {
   .legal .legal__links {
     margin-left: auto;}}

 @media screen and (min-width: 40.375em) {
  .footer__nav > * {flex: 1;}
  
  .nav__item--extra {flex-grow: 2;}
  
  .footer__addr {flex: 1 0px;}
  
  .footer__nav {flex: 2 0px;}}