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

body,html{
  height:100vh;
  width:100%;
  color: black;
  font-weight: 300;
  font-size:1em;
  line-height:1.6;
  font-family: 'Serif', sans-serif;
  text-rendering: auto;
  }
img {
width: 100%;
height: auto;
}
li{
padding:10px 5px 5px 15px;
list-style-type: square;
}
ul{
padding-left: 30px;
}

/* MOBILE SCREEN */
.master-grid{
display:grid;	grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
grid-template-areas:
"header"
"hero"
"lodge-1-pic"
"lodge-1"
"lodge-1-overview"
"lodge-2-pic"
"lodge-2"
"lodge-2-overview"
"review1"
"info"
"myform"
"sub-1"
"sub-4"

}


/* color codes
#839DA5 background
#364A50 CTA BUTTONS
#BA9F84 NAV BAR     */

/* DESKTOP SCREEN */
@media only screen and (min-width:1280px){
.master-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(100px,1fr));
grid-template-areas:
"header  header  header  header "
" hero    hero        hero         hero"
" lodge-1-pic   lodge-1-pic    lodge-1 lodge-1  "
" . lodge-1-overview  lodge-1-overview   . "  
" lodge-2-pic   lodge-2-pic    lodge-2  lodge-2  "
" . lodge-2-overview  lodge-2-overview   . "  
".     review1   review1    .   "
" .      info   info   ."
"  .  myform    myform   .   "
"sub-1  sub-1  sub-4  sub-4"
}
}

.whatsapp{
width: 180px;
height: auto;
position: absolute;
top:1.7%;
right: 30%;
position: fixed;
z-index: 9999;
}  
.hero{
grid-area: hero;
min-height:900px;
background-image: url(mafura-lodge-18.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
margin-bottom: 100px;
}

.hero h1{
text-align: center;
padding: 20px;
color:white;
font-weight: 700;
font-size: 4vw;
margin-top: 40px;
}

.hero h2 {
text-align: center;
padding: 20px;
padding: 20px;
color: white;
font-size: 2vw;
font-weight: 300;

}
.hero a{
  font-size: 1em !important;
}


/* MAFURA LODGE */
.lodge-1-pic{
grid-area: lodge-1-pic;
background-image: url("mafura-lodge-19.webp");
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin-left: 10px;
}
.lodge-1{
grid-area: lodge-1;
min-height: 250px;
padding: 20px 50px;
}
.lodge-1 h2 {
  font-size: 1.8em;
  font-weight: 300;
}
.lodge-1-overview{
grid-area:lodge-1-overview ;
padding: 5px 30px;
margin-bottom: 150px;
margin-top: 30px;
vertical-align:top;
display:inline-block; 
}
.lodge-1-overview h4{
  font-size: 1.1em;
  font-weight: 300;
}
.lodge-1-overview li{
  list-style: none;
}
/* ENDS */


/* ALL LIST ICONS */
.icon{
  max-width: 20px;
}
/* END */



/* LODGE 2 */
.lodge-2-pic{
grid-area: lodge-2-pic;
background-image: url("duna/duna-lodge-17.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 600px;
margin-left: 10px;
}

.lodge-2{
grid-area: lodge-2;
min-height: 600px;
padding: 5px 30px;
color: black;
}
.lodge-2 h2 {
  font-size: 1.8em;
  font-weight: 300;
}
.lodge-2-overview h4{
  font-size: 1.1em;
  font-weight: 300;
}
.lodge-2-overview{
grid-area:lodge-2-overview ;
padding: 5px 30px;
margin-top: 30px;
margin-bottom: 60px;
}
.lodge-2-overview li{
  list-style: none;
}




.review1{
grid-area:review1;
min-height: 300px;
color: black;
text-align: center;
padding: 20px;
margin-top: 150px;
}
.review-card{
padding: 20px;
border-radius: 8px;
border: 1px solid rgb(105, 104, 104);
margin-bottom: 60px;
}

.star {
width: 16px;
height: 16px;
}

.info{
grid-area: info;
padding: 30px;
margin: 20px 5px;
margin-bottom: 100px;

}
.info h4{
font-size: 1.1em;
}
.info a{
  color: blue;
  font-weight: 700;
}


/* UNIT #2 */

.lodge-2{
 grid-area: lodge-2;
 padding: 30px;
 }
 .lodge-2 h3, h4 {
  font-size: 1.4em !important;
 }
.what2{
  grid-area: what2;
  padding: 30px;
}
.what2 h3, h4 {
  font-size: 1.4em !important;
 }

/* MAFURA GALLERY */
.gallery-1{
  grid-area: gallery-1;
  
}

.container {
  margin: auto;
  border: #fff solid 5px;
  background: #fff;
}

/* mak images fill their container*/
img {
  max-width: 100%;
}
/* img:hover {
cursor: pointer;
} */

/* CSS Grid*/
.img-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 5px;
}

@media only screen and (min-width: 750px) {
  .img-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 970px) {
  .img-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* MAIN BUTTON */
.btn-m{
 background-color:#364A50;
 color: white !important; 
 cursor: pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius: 8px ;
 border: 2px solid black;
 text-decoration:none;
 font-size: 1em;
 font-weight:bold;
 width:15em;
 padding:7px 5px;
 margin:auto;
 }
 .btn-m:hover{
  background-color:  #16292b;
  color:white; 
  cursor: pointer;
  text-decoration: underline;

 }

.my-img{
  width: 200px;
}


/* ENDS */

#sub-1{
grid-area: sub-1;
padding:20px;align-content:center;
text-align:center;
align-items:center;
margin:5px 0;
scroll-behavior: smooth;
background-color: #839DA5;
color:black;
min-height: 400px;
margin-bottom: 0;
font-size: 1.1em;
}


#sub-1 a{
color: white!important;
text-decoration: none;
font-weight: 700;
}
#sub-1 a:hover{
color: black;
text-decoration: underline;
font-weight: 700;
}

 
.sub-4{
grid-area: sub-4;
padding:20px;align-content:center;text-align:center;align-items:center;margin:5px 0;
/* background-color: rgb(17, 110, 217); */
color:black;
margin-bottom: 0;
background-color: #839DA5;
}
/* FORM SECTION */


input[type=text], select {
width: 60%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border-style: solid  ;
border: white solid 1px;
box-sizing: border-box;
color: white;
font-size: 0.9em;
background-color: transparent;
}

input[type=submit] {
text-decoration: none;
cursor: pointer;
color: black;
font-size: 0.9em;
}
/* text area styles */
textarea {
height:150px !important;
padding: 10px 10px;
color: black;
font-size: 0.9em;
}

label,
textarea {

color: black;
font-size: 0.9em;
}

.no-outline:focus {
outline: none;
}  
/* adds space on top for label */
.contact-form {
margin-top: 30px;
}

/* positioning .form-field relative, so .lable can be positioned on-top (absolute) */
.form-field {
position: relative;
}

/* label styles */
.label {
position: absolute;
left: 0;
top: -25px;
line-height: 26px;
font-weight: 400;
text-transform: capitalize;
color: black;
cursor: text;
font-size: 0.9em;
}
.mess{
color: black;
font-size: 0.9em;
}
/* input styles */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],

textarea, select {
border: 2px solid rgb(8, 150, 206);
height: 40px;
padding: 5px 10px;
width: 100%;
background-color: rgb(247,247,247);
color: black;
font-size: 0.9em;
}  
/* END */



/*NAVIGATION*/
header{
grid-area: header;
}

.nav {
height: 70px;
width: 100%;
background-color:#364A50 ;
position: fixed;
z-index: 555;
}

.nav > .nav-header {
display: inline;
margin-right: 20px;
}

.nav > .nav-header > .nav-title {
display: inline-block;
font-size: 20px;
color: #eeeae2;
padding: 10px 10px 10px 10px;
}

.nav > .nav-btn {
display: none;
}

.nav > .nav-links {
display: inline;
float: right;
font-size: 17px;
}

.nav > .nav-links > a {
display: inline-block;
padding: 1px 60px 5px 5px;
text-decoration: none;
color: white;
}

.nav > .nav-links > a:hover {
background-color: #36454F;
color: white ;
z-index: 1;
}
.nav > #nav-check {
display: none;
}

@media (max-width:1280px) {
.nav > .nav-btn {
display: inline-block;
position: absolute;
right: 40px;
top: 10px;
z-index: 1;
}





.nav > .nav-btn > label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
background-color: rgba(0, 0, 0, 0.3);
}
.nav > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #9EA791;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
z-index: 1;
color: white;
}
.nav > .nav-links > a {
display: block;
width: 100%;
}
.nav > #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
.nav > #nav-check:checked ~ .nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}
/* BACK TO THE TOP */


.flex {
display: flex;
flex-direction: column;
align-items: center;
}
.scrollToTopBtn {
background-color: #5e5c5c;
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
font-size: 30px;
line-height: 48px;
width: 48px;
/* place it at the bottom right corner */
position: fixed;
bottom: 30px;
right: 30px;
/* keep it on top of everything else */
z-index: 100;
/* hide with opacity */
opacity: 0;
/* also add a translate effect */
transform: translateY(100px);
/* and a transition */
transition: all .5s ease
}

.showBtn {
opacity: 1;
transform: translateY(0)
}


/* ENDS */


/* MEDIA - HAND HELDS */

@media screen and (max-width: 480px){ 

.whatsapp{
width: 180px;
height: auto;
position: absolute;
top:1.7%;
right: 40%;
position: fixed;
z-index: 9999;
} 



.hero{
grid-area: hero;
min-height:980px;

background-repeat: no-repeat;
background-size: cover;
background-position: center center;
margin: 30px 0;
}

.hero h1{
text-align: center;
padding: 5px;
color: white;
font-weight:bold;
font-size: 12vw;

}

.hero h2 {
text-align: center;
padding: 10px;
font-size: 5vw;
font-weight: bold;
color: white;
margin-top: 20px;
}
.hero a{
font-size: 1em !important;
}


/* MAFURA LODGE */
.lodge-1-pic{
grid-area: lodge-1-pic;
background-image: url("mafura-house-1.webp");
background-repeat: no-repeat;
background-size: cover;
min-height: 250px;
margin: 30px 10px 30px 10px;
}
.lodge-1{
grid-area: lodge-1;
min-height: 250px;
padding: 5px 10px;
}
.lodge-1 h2 {
font-size: 1.8em;
font-weight: 300;
}
.lodge-1-overview{
grid-area:lodge-1-overview ;
padding: 5px 15px;
margin-bottom: 150px;
margin-top: 30px;
vertical-align:top;
display:inline-block; 
}
.lodge-1-overview h4{
font-size: 1.1em;
font-weight: 300;
}
/* ENDS */


/* ALL LIST ICONS */
.icon{
max-width: 20px;
}
/* END */



/* LODGE 2 */
.lodge-2-pic{
grid-area: lodge-2-pic;
background-image: url("duna/duna-lodge-11.webp");
background-repeat: no-repeat;
background-size: cover;
min-height: 450px;
margin: 30px 10px 30px 10px;
}

.lodge-2{
grid-area: lodge-2;
min-height: 250px;
padding: 5px 15px;
color: black;
}
.lodge-2 h2 {
font-size: 1.8em;
font-weight: 300;
}
.lodge-2-overview h4{
font-size: 1.1em;
font-weight: 300;
}
.lodge-2-overview{
grid-area:lodge-2-overview ;
padding: 5px 15px;
margin-top: 10px;

}
		
.review1{
  grid-area:review1;
min-height: 300px;
color: black;
padding: 30px;
display: block;

}
.review-card{
	padding: 20px;
	border-radius: 8px;
	border: 1PX solid rgb(105, 104, 104);
  margin-bottom: 60px;
}

.sub-1{
  display: block;
}
.sub-2{
  display: block;
}
.sub-4{
  display: block;
}
hr{
  width: 60%;
}
.info{
  padding: 5px 15px;
}
}

/* MEDIA SCREEN - TABLETS PORTRIAT --------------------------------------------------*/
@media screen and (min-width: 481px) and (max-width: 810px){


  
  .hero{
  grid-area: hero;
  min-height:950px;
  background-image: url(beach.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin-bottom: 100px;
  }
  
  .hero h1{
  position: absolute;
  top: 12%;
  left: 2%;
  padding: 20px;
  color: white;
  font-weight:bold;
  font-size: 6vw;
  
  }
  
  .hero h2 {
  position: absolute;
  top: 45%;
  left: 35%;
  padding: 20px;
  color: black;
  font-size: 4vw;
  font-weight: bold;

  }
  .hero a{
  font-size: 1em !important;
  }
  .lodge-1-pic{
    grid-area: lodge-1-pic;
    background-image: url("mafura-house-1.webp");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 450px;
    }
  



}



/* MEDIA SCREEN - TABLETS --------------------------------------------------*/

@media screen and  (min-width: 811px) and (max-width: 1279px){
.hero{
grid-area: hero;
min-height:950px;
background-image: url(beach.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
margin-bottom: 100px;
}
	
.btn-cta-top{
position: absolute;
top: 2%;
right: 65%;
position: fixed;
transition: transform .2s;
}

.hero h1{
position: absolute;
font-size: 6vw;
left: 5%;
top: 10%;
font-weight: 700;
color:white;
}
.hero h2 {
position: absolute;
left:40%;
top:55%;
font-size: 4vw;
color: black;
}
.lodge-1 h2{
margin-top: 60px;
font-size: 3vw;
}
.lodge-1 h3, h4 {
margin-top: 60px;
font-size: 2.5vw !important;
}
.lodge-1-pic{
  grid-area: lodge-1-pic;
  background-image: url("mafura-house-1.webp");
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 650px;
  }


}