* {

    box-sizing: border-box;



 }

.stickyHeader{

    position:sticky;

    width:100%;

    top:0px;

}

.stickyHeader .nav-container .nav-item{

    color: whitesmoke;

}



.headerNav{

   

}

#headerID{

    overflow:visible;

}

.grid {

    display: grid;

    grid-template-columns: repeat(8, minmax(15px, 1fr));

    grid-template-rows:repeat(6,1fr);

    grid-gap: 1em;

    justify-content: stretch;

    justify-items: center;

    align-items: stretch;

}

.top{

    grid-area:1/1/span 2/-1;

}

body {

    width: 100%;

    height:auto;

    margin: 0;

    display:flex;

    flex-direction:column;

    flex-wrap:nowrap;

    justify-content: center;

    overflow:visible;

}

main {

    /*width: 80%;*/    

    margin: 0;

    grid-area:6/1/span 13/-1;

    overflow:hidden;

    z-index:1;

}

a[name="Button"] {

  

    padding:0.5em;

    text-decoration: none;

    

    color:Black !important;

    background-color:whitesmoke;

    border-radius:0.7em;

    transition: all 500ms linear;

}



a[name="Button"]:hover{

     background-color:rgba(97, 155, 240, 1);

    opacity: 0.5;

}





#bookingA,#contactA{

    text-align: center;

    

}

.nav-item:hover #bookingA{

     background-color:rgba(97, 155, 240, 1);

}

.navitem:hover #contactA{

     background-color:rgba(97, 155, 240, 1);

}



.nav-item a:active {

    color:inherit;

}



.nav-item a:visited {

    color:inherit;

}



.button {}



.background {

    /*

  background-image: url();

  background-repeat:no-repeat;

  background-position:top;

  background-size:100vw, 100vh;

*/

    height: 100vw;

    width: 80vw;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;

}

.sub-waveform{
    translate: 0px 10%;
 
    }
.wave{
    position:relative;
    width:100%;
    z-index: 2;
}

.rotated-wave{
       
        transform:rotate(180deg);
        translate: 0px 70%;
        /*transition:top 0.4s linear 0s;*/
        
    }

.grid-wave{
    grid-column-start:-9;
    grid-column-end:-1;
    grid-row:6 / 7;

}    

header {

    overflow:visible;

    background-image:url("..\\assets\\CabbinPhotos\\scenery\\PXL_20230816_154823689.jpg");

    background-size:100vw auto;

    background-repeat:no-repeat;

    background-position:top;

    min-height:30vw;

    width:100%;

    

    /*display: grid;*/

    background-color: #7A917900;

    /*grid-area:1 / 1 / span 5/ -1;*/

    z-index:1;

}



header > h1 {

    margin: 0 auto;

    width: inherit;

}

nav {



    margin: 0 auto;

    overflow:hidden;

    width: 100%;

    

}



ul {

    list-style-type: none;

   

    padding: 0px;

}





.nav-item:hover #bookingA{

     background-color:rgba(97, 155, 240, 1);

}

.navitem:hover #contactA{

     background-color:rgba(97, 155, 240, 1);

}



.nav-item a:active {

    color:inherit

}



.nav-item a:visited {

    color:inherit;

}



.foot-cont{

    /*display:grid;

    grid-template-rows:20% 20% 20% 20% 20%;

    grid-template-columns:1fr 1fr 1fr 2fr ;*/

   

    overflow:hidden;

    /*max-height: 10vw ;*/

    /*display: grid;*/

    padding:1em;

    margin:0 auto;

    display:flex;

    flex-direction:row;

    justify-content: space-evenly;

    flex-wrap:wrap;

    background-color:#133751;

    z-index:1;

   

}



footer {

    overflow:hidden;

    width:100%;

    height:fit-content;

}

.footerBackgroundMask{

    width:100vw;

    height:15vw;

   background-image:url("../assets/Media/background-image/Footer-background.png");

   background-repeat: no-repeat;

   background-size:cover;

   background-color: #f2e9d7;



}





.foot-cont a[href="#Home"] > div {

    

}

.foot-cont a[name="BookNow"]{

   justify-self: center;

    align-self: center;

    

}

.foot{

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    align-items: flex-start;

    text-decoration: none;

    overflow:hidden;

    flex-basis: 15%;

     

}

.foot .navLogoText h2{

    color:whitesmoke;

    font-size:clamp(12px, 1.2vw, 2em);

}

.foot .navLogoText{

    flex-basis:30%;

  

}



.navlogoFoot{ 

   translate:10% 0%; 

    scale:calc(1.4);

    margin:0 auto;

    overflow:hidden;

    flex-basis:60%;

    

    

}





.foot-nav{

    display:flex;

    align-items: stretch;

    justify-content:space-evenly;

  



    height:calc(14vw + 13vh);

    flex-direction: column;

    width:calc(4vw + 4vh);

    flex-wrap:nowrap;

    flex-basis:20%;

    

     

        

    

}

.foot-nav-cont{

    display:flex;

    justify-content: space-around;

    flex-direction: column;

   

  

  

    flex-wrap:nowrap;

    align-items: center;

    height:calc(10vw + 11vh);

}

.foot-nav h2{

    width:100%;

    

    margin:0;

}



.foot-nav > *{

    color:whitesmoke;

}

.foot-nav-item{

    overflow:hidden;

}

.foot-nav-item > a{

    text-decoration:none;

    color:inherit;

    height:inherit;

    width:inherit;

    font-size:calc(1vw + 0.4vh)

}

.active::after{

    content:'';

    display:block;

    width:0%;

    border-bottom: 2px solid whitesmoke;

    transition: all 500ms linear;

}



.active:hover::after,.active:focus::after,.active:active::after{

   /* position:absolute;*/

    content:'';

    display:block;

    width:100%;

    border-bottom: 2px solid whitesmoke;

    

}



.footButt{

    align-self: center;

    justify-self: center ;

    height:2.5em;

    width:9em !important;

    border-radius:1.5em !important;

    text-align: center;

    line-height:1.5em ;

    font-size:calc(1vw + 1.2vh);

    flex-basis:20%;

}



#navlogo{

    

    max-width: 12vw;

    min-width:8vw;

    margin:0 auto;

    position:relative;

    top:-1vw;

    left:3vw;

    

}



.nav-container {

    max-height: 20vw;

    min-height: 15vw;

    max-width: 100%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    background-color:rgba(99, 99, 208, 0);

    margin: 0;

}



.nav-item {

    flex-grow: 1.5;

    flex-shrink:1;

    color:#0f1011;

   

    border-radius: 0;

    display: flex;

    flex-direction: column;

    max-width:100%;

    align-items: center;

    justify-content: space-around;

   

    padding:0px;

    transition:all 500ms ease-in;



}





/**.nav-item + .nav-item::before {

    content: '|';

    line-height: :0.5rem;

    font-family: "NotoSerif";

    font-weight: lighter;

    padding-bottom: 0.1rem;

    font-size: 4.5vw;

   





}

**/





.navLink{

  



}



.nav-item a {

    text-decoration: none;

    font-size:1.7vw;

    color: #0f1011;;

    margin: 0 auto;

    display:flex;

    flex-direction: column;

    

}

.nav-item.img a{

    flex-direction:row;

}

.nav-item a h2{



  font-weight:400;

  font-style: normal;

  font-size:1.5vw;

  margin:0;

  text-align: left;

  

}

.navLogoText{

    display:flex;

    flex-direction:column;

    flex-wrap:nowrap;

    justify-content: flex-start;

    align-content: flex-start;    

      

    max-width: 12vw;

    min-width:8vw;

    margin:0 auto;

}

.navLogoText h2{

  

font-weight:400;

  font-style: normal;

  font-size:1.5vw;

  margin:0;

  text-align: left;

}







.activeNav::after{

    opacity: 0;

    

    content:'';

    display:block;

    visibility: hidden;

    border-bottom: 2px solid #0f1011;

    

    transition: all 500ms linear;

}



.nav-item:hover .activeNav::after,.activeNav:focus::after,.activeNav:active::after{

    opacity:0.8;

    visibility: visible;

  /*  position:absolute;

    top:20vh;*/

    content:'';

    display:block;

    border-bottom: 2px solid #0f1011;

    

}

/*

.setActive::after{

    opacity: 0;

    position:absolute;

    top:19vh;

    content:'';

    display:block;

    width:8vw;

    visibility: hidden;

    border-bottom: 2px solid whitesmoke;

    transition: all 500ms linear;

}

*/

.setActive::after{

    opacity:0.8 !important;

    visibility: visible;

    /*position:absolute;

    top:19vh;*/

    content:'';

    display:block;

    border-bottom-color:#0f1011 !important;

    border-bottom: 3px solid #0f1011;

    

}

.homeA::after{

    width:5.5vw !important;



}

.areaA::after{

    width:4vw !important;

}

.cabinA::after{

    width:9vw !important;

}

.galleryA::after{

    width:6.5vw !important;

}





#Contact{

        

    max-height: 100%;

    /*height:10vw;*/

    border:none;



    overflow: hidden;

    display:flex;

    flex-wrap: wrap;

    justify-content: space-evenly;

   

    flex-direction:column;

    

    

}

#Contact div{

display:flex;

flex-direction: row;

width:100%;

align-items:center;

justify-content:left;

}

#Contact div h2{

margin-left:2em;

color:whitesmoke;

font-family: "NotoSerif";

text-align: justify;

}



#Contact div img{

width:calc(3vw + 1vh);



}

#Contact h3 {

font-size:calc(1.5vw + 1vh);

  color: white;

  justify-self: flex-start;

  text-align: left;

  

}

#Contact p {

font-size:0.5em;

  color: white;

}

/*Settig up flex statemnets for use in quick structureing*/

.titleSubText{
   margin-left:6rem;
}