:root {
    --primary-color: rgba(201, 184, 153, 0.75);
    --overlay-color: rgb(201,134,10, 0.85);
    --menu-speed: 0.75s;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container {
    background-color: #FEECCB;
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "header header header header header"
        "content1 content1 content1  content1 content1"
        "content2 content2 content2  content2 content2"
        "content3 content3 content4  content4 content4"
        "content5 content5 content5  content5 content5"
        "content6 content6 content6  content6 content6"
        "footer footer footer footer footer"
        "copyright copyright copyright copyright copyright";
    grid-row-gap: 0.4rem;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1em;
}

body{background-color: #FEECCB;}

.header{
    background-color: #C9860A; /* Caramel background*/
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}
.responsive {
    width: 100%;
    height: auto;
}

.logo {
    background-color: #C9860A; /* Caramel background*/;
    grid-area: logo;
    height: 80%;
    padding-left: 20px;
}


.social {
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    flex: 1 1 0;
    max-width: 170px;
}
.buttonBookNow {
    background-color: #C9860A; /* Caramel background*/
    border: 2px solid white; /* White border */
    border-radius: 8px;
    color: white; /*text color White*/
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    
}

.buttonBookNow:hover {
    background-color: #fab942; /* Lighter Caramel */
    color: black;
  }

/*hamburber button start*/
.hamburgercontainer {
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: #C9860A;
}

.hamburgercontainer .toggler{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;
}

.hamburgercontainer .hamburger {
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    background: var(--overlay-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/*hamburger lines*/
.hamburgercontainer .hamburger > div {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburgercontainer .hamburger > div:before,
.hamburgercontainer .hamburger > div:after{
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100%;
    height: 2px;
    background: inherit;

}
.hamburgercontainer .hamburger > div:after {
    top: 10px;
}

/*animate hamburger*/
.hamburgercontainer .toggler:checked + .hamburger > div {
    transform: rotate(135deg);

}

/* Turn lines into X */
.hamburgercontainer .toggler:checked + .hamburger > div:before,
.hamburgercontainer .toggler:checked + .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
}

.hamburgercontainer .toggler:checked ~ .nav { 
    visibility: visible;
}
   

.hamburgercontainer .toggler:checked ~ .nav > div  {
        transform: scale(1);   
        transition: var(--menu-speed);
        
}

/*MENU START*/
.nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.menu {
    background-color: var(--overlay-color);
    border-radius: 50%;
    width: 200vw;
    height: 200vw;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 0.4s ease;

}

/*format links*/
.menu > ul > li{ 
    list-style: none;
    color: white;
    font-size: 1rem;
    padding: 1rem;

}
.menu ul > li > a {
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
}

.hero {
    grid-area: hero;
}

h1 {color:#C9860A;
    font-family: 'Kalam', cursive;
    font-size: 3em;
    padding: 5px;
    text-align: center;}

h2 {
    color:#C9860A;
    font-family: 'Kalam', cursive;
    font-size: 1.5em;
    padding: 5px;
    text-align: center;
}



p { color:#C9860A;
    font-family:'Source Sans 3', sans-serif;
    padding: 20px;
    text-align: justify;
}

.buttonReadMore {
    background-color: #C9860A; /* Caramel background*/
    border: 2px solid white; /* White border */
    border-radius: 8px;
    color: white; /*text color White*/
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    
}

a:-webkit-any-link {
    color: white;
    cursor: pointer;
    text-decoration: none;
}



.content1 {
    grid-area: content1;
    display: grid;
    justify-items: center;  
    }

.content2 {
   grid-area: content2;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   padding: 20px;
   
}

.content2 p{
    font-size: 1.5em;
}

.content3 {
    grid-area: content3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    padding-left: 30px;
}


.content4 {
    grid-area: content4;
}
.content5 {
    grid-area: content5;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.content5 ul, .content6 ul{
    line-height: 1.5;
    color:#C9860A;
    padding: 40px;
    font-family: 'Source Sans 3', sans-serif;
}



.footer{
    grid-area: footer;
    background-color: #C9860A;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family:'Source Sans 3', sans-serif;
}

.logobox{
    flex-grow: 1;
    flex-basis: 100%;
 
    }
.footer h3{
    color: white;
    font: size 2.5em;
}
.quicklinks{
    flex-grow: 1;
    flex-basis: 100%;
    padding: 1em;
    }
.quicklinks ul{
    list-style-type: disc;
    line-height: 2;
    color:white;
}
.quicklinks a{
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}

.quicklinks a:hover {
    color: #FEECCB ;
    text-decoration: underline;
}


.contact{
    flex-grow: 1;
    flex-basis: 100%;
    padding: 1em;
    
}

.contact li{
    list-style-type: none;
    line-height: 2;
}
.contact a{
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}

.contact a:hover {
    color: #FEECCB ;
    text-decoration: underline;
}
.copyright {
    grid-area: copyright;
    text-align: center;
    color: white;
    background-color: #C9860A;
    padding: 1em;
    
}


/* Whatsapp button start */
.whatsapp-btn-container{
    position: fixed;
    right: 30px;
    bottom: -50x;
    padding: 24px;
    animation: fade-up 1000ms forwards;
    animation-delay: 1000ms;

}
@keyframes fade-up {
    100% {
    bottom: 24px;
    opacity: 1;
     }
    
}
.whatsapp-btn-container .whatsapp-btn {
    font-size: 48px;
    color: green;
    display: inline-block;
    transition: all 400ms;
}
.whatsapp-btn-container .whatsapp-btn:hover {
    transform: scale(1.2);
    
}

.whatsapp-btn-container span{
    position: absolute;
    top: 0;
    left: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: green;
    transform: rotate(20deg)translateX(10px);
    opacity: 0;
    transition: all 400ms;
}

.whatsapp-btn-container .whatsapp-btn:hover +span {
    transform: rotate(0deg) translate(0px);
    opacity: 1;
}

.formcontainer{
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    display: grid;
    margin-top: 30px;
    width: 100%;
}
form {
    display: flex;
    flex-direction: column;
    
    
}

label{
    padding: 12px 12px 12px 0;
    display: inline-block;
    color: #C9860A;
    font-size: 1.2em;
}

input{
    color: black;
    font-size: 1.3em;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

select{
    color: black;
    font-size: 1.3em;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.add{
    text-decoration: none;
    display: inline-block;
    width: 150px;
    height: 30px;
    background: #C9860A;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: right;
    margin-bottom: 5px;

}

/* Dynamic Class Creation */

.flex{
    display: flex;
    gap:1.5em;
    flex-direction: row;
    margin-bottom: 10px;
    justify-content: space-between;

}

.delete {
    
    width: 150px;
    height: 30px;
    background: red;
    font-size: 2rem;
    font-weight: bold;
    color:white;   
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}



.col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
      }


button {
    background-color: #C9860A; /* Caramel background*/
    border: 2px solid white; /* White border */
    border-radius: 8px;
    color: white; /*text color White*/
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    width: 50%;
    align-self: center;
    margin-top: 20px;
   }

.contactus {
    display: grid;
    grid-column: 1/6;
    grid-row: 3;
    font-size: 1em;
    justify-content: center;
}

.contactus li {
    list-style-type: none;
    line-height: 1.5;
}

.contactus a{
    text-decoration: none;
    color:#C9860A;
    font-size: 1.5em;
}
.maparea{
    display: grid;
    margin: 0 auto;
    padding:40px 20px;
    grid-column:1/6;
    border-radius: 20px;
}

textarea {
    font-family:'Source Sans 3', sans-serif;
    border-color: rgb(197, 195, 195);
    width: 100%;
    border-radius: 5px;
    color: black;
    font-size: 1em;
}
.officehours {
    display: grid;
    grid-column: 1/6;
    grid-row:5;
    content: start;
    padding: auto;
    font-size: 1.2em;
   
}


/* responsive display for tablet screens*/

@media screen and (max-width: 768px){
    .container{
        font-size: 1.2em;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "header header"
        "content1 content1 "
        "content2 content2"
        "content3 content3"
        "content4 content4"
        "content5 content5"
        "content6 content6"
        "footer footer"
        "copyright copyright";
    }
    
   .flex {
    flex-direction: column;
   }
        
    .social {
        display:none;}
    
    .contactus {
        grid-column:1/2;
        grid-row:3;
        font-size: 1em;
    }    

    .footer {
        display:grid;
        place-items: center;
        padding:20px;

        
     }   
     .footer :nth-child(1){
        grid-column-start: span 2; 
}
    
}
/* responsive display for cellpone screens*/
@media only screen and (max-width:480px){
    .container{
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
        
       
    }
    h2 {
        font-size: 2em;
    }
   
    .social {
        display:none;
    }
    .contactus {
        grid-column:1;
        grid-row:3;
        font-size: 1;
        padding-top: 20px;
    }   
   
   .footer {
    display: grid;
    flex-wrap: wrap;
    padding-left: 20px;
  
  
    }
}   
@media only screen and (max-width:451px){

    .footer {
        display: grid;
        padding-left: 20px;
    }
    .logo{
        width:100px;
        height:auto;
    }
    .quicklinks {
        display:none;
    }
    h1 {
        font-size: 2.2em
    }
    h2 {
        font-size:2em;
    }

}