@import url("font/stylesheet.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baskervville&family=Kanit:wght@300&display=swap');

/* font-family: 'Baskervville', serif;
font-family: 'Kanit', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Baskervville&family=Dela+Gothic+One&family=Kanit:wght@300&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Baskervville&display=swap');
/* font-family: 'Baskervville', serif;
font-family: 'Dela Gothic One', sans-serif;
font-family: 'Kanit', sans-serif; */




*{/* Style vir die hele padege, verander gewoonlik nie die indien nodig */
    box-sizing: border-box; /* padding included in width length */
    font-family: Roboto ,sans-serif;
   /*  font-family: 'Bakerie Smooth Wide';
    font-weight: normal;
    font-style: normal; */
    /* color: rgb(5, 5, 5); */
    /* background-image: url("../Images/mountain.png"); */
}

html, body{
    margin: 0%;
    padding: 0%;
    background-color:  rgba(189, 148, 195, 0.544);
    /* rgba(0, 0, 0, 0.178); */
    
    
    
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.nav ul{
    margin: 0%;
}
.nav li{
    display: inline;
}
.nav a{
    padding: 0.001em;/* space out */
    color: rgb(254, 254, 254);
    text-decoration: none;/* remove underline */
    display: inline-block;/* padding top and bottom */
}
.nav a:hover{
    background-color: rgba(255, 255, 255, 0.315);
}

.main-nav{
    text-align: center;
    font-size: 2rem;
    font-weight: lighter;
    border-bottom: 0.05em solid rgba(244, 242, 245, 0.973);
    
}

.main-nav li{
    padding: 0% 3%/* 0top&bottem 5 left and right */
}


.main-header{
    background-image: url("../Photos/960x0.webp");
    background-size: cover; /* grow and shrink as musch as possible */
    background-color: rgba(207, 103, 221, 0.67);/* a is transparency */
    background-blend-mode: multiply;/* mix verskillende backgrounds */
    /* padding-bottom: 1em; */
    background-repeat:no-repeat;
    background-position: 50% 50%;
}

.comp-name{
    text-align: center;
    margin: 0;
    font-size: 2em;
    /* font-family: 'Bakerie Smooth Wide'; */
    font-family: 'Baskervville', serif;
    /* font-family: 'Monoton', cursive; */
    color: rgb(245, 240, 240);
    font-weight: normal;

}

.comp-name-large{
    font-size: 5rem;
}
.content-section{
    margin: 1em;
    font-size: 2em;
    /* background-color: #f2f2f2a2; */
    padding-bottom: 80rem;
}

.container{
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    /* background-color: #f2f2f2a2; */

}
.section-header{
    font-family: 'Cormorant', serif;
    font-weight: normal;
    text-align: center;
    font-size: 4em;/* 3 times */
    
}

.main-footer{
    background-color: rgba(165, 92, 199, 0.77); 
    padding: 0.25em;
    /* color: rgba(0, 0, 0, 0.211); */
    

}
.main-footer-container ul{
    flex-grow: 1;
    text-align: end;
}
.main-footer-container{
    display: flex;
    align-items: center;
    font-size: small;
}
.footer-nav li{
    padding: 0 0.5rem;
}
.footer-nav img{
    width: 3rem;
    height: 3rem;
}

#complogo{
font-weight: 19rem;
font-size: 2rem;
font-family: Roboto ,sans-serif;
}

.logo{
  display: block;
  margin-right: auto;
  margin-left: auto;
 
}
.ADGlogo{
  display: block;
  margin-right: auto;
  margin-left: auto;
  float: left;
}
.Homestl{
  /* background-image: url("../Photos/Garden.jpg"); */
  /* background-color: rgba(206, 135, 234, 0.796); */
  background-image: url("../Photos/LPGRoom.jpg");
  /* height: fit-content; */
  background-blend-mode: multiply;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  position: relative;

  
}

.Homestl .content-section{
  background-color: #f2f2f2a2;
}

h3{
/* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
font-size: larger;
font-family: 'Baskervville', serif;
font-family: 'Dela Gothic One', sans-serif;
font-family: 'Kanit', sans-serif;

padding-bottom: 0%;
margin-bottom: 0%;
}
h4{
  /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
  font-family: 'Baskervville', serif;
font-family: 'Dela Gothic One', sans-serif;
font-family: 'Kanit', sans-serif;
/* font-size: large; */

  padding-bottom: 0%;
  margin-top: 0%;
  

  }
P{
  /* background-color: #f2f2f27b; */
  display: block;
  /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
  font-family: 'Baskervville', serif;
font-family: 'Dela Gothic One', sans-serif;
font-family: 'Kanit', sans-serif;
}

.Contact{
 align-self: center;
 text-align: center;
}

.BTN{
    border: 0.09rem solid rgba(0, 0, 0, 0.973);
    /* margin: 0.5em;  */
    border-radius: 0.5rem;
   padding: 1em;
  /* text-decoration: none; */
 
 background-color: rgba(238, 0, 255, 0.874);
 border-radius: 1.5rem;
 align-self: center;
 background-color: rgba(249, 249, 249, 0.319);/* a is transparency */
background-blend-mode: multiply;/* mix verskillende backgrounds */

}

.BTN:hover{
  background-color: #2f32324f;
}
.Maps{
align-content: center;
align-self: center;
display: block;
text-align: center;
}

.Book-Now{
  /* background-color: aqua; */
  background-image: linear-gradient( to right, rgba(255, 0, 0, 0.537),rgba(238, 0, 255, 0.46));
  /* background-color: rgb(17, 255, 0); */
  background-color: rgba(249, 249, 249, 0.355);/* a is transparency */
    background-blend-mode: multiply;/* mix verskillende backgrounds */
    font-weight: bolder;
    font-size: large;
    border-radius: 2rem;
   padding: 1rem;
   margin-left: 45%;
   align-self: center;
   margin-bottom: 2rem;
}

.Brochure {
  /* width: auto; */
  display: block;
  /* background-repeat: no-repeat; */
  /* background-size:cover; */
  /* position:relative; */
/* display: list-item; */
max-width: 80%;
height: auto;
margin: auto;
text-align: center;

    
    /* padding: 0 1.5rem; */


}

/************************************************************************************* Gallery style begins */
*{
    box-sizing: border-box;
  }
  
  /* Position the image container (needed to position the left and right arrows) */
  .containerimg {
    position: relative;
  }
  
  /* Hide the images by default */
  .mySlides {
    display: none;
    max-height: 50%;
  }
  
  /* Add a pointer when hovering over the thumbnail images */
  .cursor {
    cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* Container for image text */
  .caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Six columns side by side */
  .column {
    float: left;
    width: 16.66%;
  }
  
  /* Add a transparency effect for thumnbail images */
  .demo {
    opacity: 0.6;
  }
  
  .active,
  .demo:hover {
    opacity: 1;
  }

  /************************************************************************** End of gallery style */