nav {
    height: 9rem;  /* give any height you want */
  }
  
  .icon svg {
    width: 100%;
    height: auto;
    max-width: 100%;  /* prevent icons from being wider than the box they are in */
    color: aliceblue;
  }

  .slogan {
  margin-left: 0.5rem;
  margin-top: 0.15rem;
  color: rgb(116, 54, 54);
  font-size: 0.75rem;
  }

 
  .box {
	margin: 1rem;
	background-color: #f5f5f54a;
	color: black;
	padding: 2rem;
}
/* Classic Typographic Scale */

.bold-text {
    font-weight: bold;  /* This makes the text inside the span bold */
    color:rgb(86, 62, 51);
    margin-left: 1rem
}

p { 
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.85rem;
    margin: 1rem 1rem 1rem 1rem;
    text-align: left;
    color:rgb(86, 62, 51)

}  /* step 5 value */

p.copyright {
    margin-left: 5rem
    

}

h1 {
    font-family: "loretta", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.53em; 
    font-weight: 500;
    margin-left: 3rem;
    color:rgb(238, 235, 225)

  }  /* step 6 value */


h2 { 
    font-size: 6rem; 
    margin-left: 7rem;  
    border: 0;
    font-size: 100%;
}


h3 { /* titles */
    font-family: "loretta", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.55rem;
    text-align: center;
    margin-top: -7rem;
    color:rgb(86, 62, 51)

 }


h4 { 
    font-family: "loretta", serif;
    font-size: 1.10rem; 
    margin-bottom: 1rem; 
    margin-left: 2rem;
    color:rgb(86, 62, 51)
}


h5 

{   font-size: 1rem;  
    font-family: 'Poppins Regular', 'sans-serif';  
    color: rgb(247, 240, 240);
    margin-left: 3rem;
    margin-right: 3rem;
} 

h6 {font-size: 1rem; padding: 2rem }


ul li {
    margin-bottom: 20px; /* Adds margin at the bottom of each list item */
    text-align: left;
    margin-left: 2rem;
    margin-right: 2rem;
}


small { font-size: .9312em; }

form {
    padding: 1rem; 
}

fieldset {
        border: 1px solid #444;
        margin: 0 0.5rem 2rem 0.5rem;
        padding: 1rem;


    }

    label, input{
        display:block;
        width: 100%;
        color: rgb(238, 235, 225)
        
    }

    input[type="text"],
    input[type="tel"]{
        margin: 0.125rem 0 1.2rem 0;
    }


textarea {
    width: 100%;
    margin: 0.125rem 0 1.2rem 0; 
}

.align-right{
    display:flex;
    justify-content: end;

}

input[type="submit"]{
margin: 0 0.55rem;
background-color: rgb(113, 55, 97)
}


input[type="reset"]{
    background-color: rgb(82, 133, 100)
}

.button{
    width: 5rem;
    color: white;
    border-radius: 0.5rem;
}

.button:hover{
    filter: opacity(0.5);
}


main {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between images */
    
}

main img {
    
  
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 0rem;
}

.special-image {
    width: 255px;           /* Change the width */
    height: auto;           /* Maintain aspect ratio */
    display: block;         /* Ensure the image is block-level */
    margin: 10px auto;      /* Center the image */
}

.move-right {
    margin-left: 20px;  /* Move this image 30px to the right */
}

/* Pages with background image */
body.bg-image {
    background-image: url('/img/cover-lg.jpg');
    background-size: cover;      /* Ensures the image covers the full viewport */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents image repetition */
    background-color: transparent; /* Remove background color if any */
}

body.Contact 

{   background-image: url('/img/cover-lg.jpg');
    background-size: cover;      /* Ensures the image covers the full viewport */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents image repetition */
    background-color: transparent; /* Remove background color if any */
}

/* text aside image*/

.image-text {
    display: inline-flex; /* Makes the container behave like an inline element but allows flex properties */
    align-items: center; /* Vertically aligns the image and text */
    gap: 0px; /* Adds space between the image and the text */
}

/* .image {
    width: 150px; /* Set the image width 
    height: auto; /* Maintain the aspect ratio 
} */

.text {
    font-size: 10px; /* Set the font size for the text */
}




/* background color is beige */
body.bg-color {
    background-color: rgb(238, 235, 225)
}

html { font-size: 100%; margin: 0; padding: 0; }

footer {
    display: block;
    color: darkslategray;
    background-color: rgb(165, 144, 142);
    padding: 17px;
    margin-top: 12rem;
}
    
    legend {
        font-weight: bold;
        font-family: 'Loretta Bold', 'Bebas Neue';
        color: rgb(238, 235, 225)
    }

    

header {

    background-color:rgb(165, 144, 142);
    display: flex;
    height: 55px;
    color: white;
    font-size: 0.5rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 15px
    }


nav {
padding: 0;
margin: 0;

}


nav ul.navigation {
    list-style-type: none;
    position: relative;  /* absolute positioning calculated from top/left of this box */
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: beige;
      
    }



.icon {
	height: 50px;
	width: calc(100% / 6);
	margin: 0;
	padding: 0;
    color: whitesmoke;

}


    
.icon svg {
    width: auto;
    height: 100%;
    max-width: 100%;  /* prevent icons from being wider than the box they are in */
    color: aliceblue;
  }



header div {
    position: relative;
    top: 2px;
    right: 30px;
}



body{
    margin: 0;
    padding: 0;
    background-size: cover;
    background-color: rgb(238, 235, 225);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: 'Poppins Regular', 'sans-serif';
    line-height: 1.6; /* leading */
    font-weight: normal;
    color: brown;   
}



body.homepage {
 
    background-image: url('../img/room.jpg')
    
}


body.about {
     
    background-image: url('../img/plantshadowbg-sm.jpg')
}


body.Contact
{
    background-image: url('../img/bgforcontact.jpg')}


#logo {
    height: 1.5rem;
    width: auto;
    
}

#illustrations {
    height: 5rem;
    width: auto;
    
}

a span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.55rem;
    position: relative;
    top: -0.3rem;
}









/* =========== LoVeHA Rule for Text Links =========== */

a {
    position: relative;
}

a:link {
    color: #009fff;
    text-decoration: none;
}

a:visited {color: #444;}

a:hover {text-decoration: underline;}

a:active {color: magenta;}


/* =========== LoVeHA Rule for SVG Links =========== */

a:link svg {
    fill: #009fff;
}

a:visited svg {fill: #444;}


@keyframes wiggle {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(4deg); }
    95% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

a:hover svg  {
    animation: wiggle 0.5s infinite;
}

a:active svg {fill: magenta;}


li.currentPage::before {
    position: absolute;
    content: " ";
    top: 2px;
    left: 0px;
    display: block;
    z-index: -1;
    height: 1rem;
    width: 1rem;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg height="800" viewBox="0 0 297 297" width="800" xmlns="http://www.w3.org/2000/svg"><path d="m148.5 0c-62.854 0-113.989 51.136-113.989 113.989 0 25.11 8.008 48.926 23.157 68.873 13.604 17.914 32.512 31.588 53.658 38.904l27.464 68.659c1.589 3.971 5.434 6.574 9.71 6.574s8.121-2.603 9.71-6.574l27.464-68.659c21.146-7.316 40.054-20.99 53.658-38.904 15.149-19.947 23.157-43.763 23.157-68.873-0-62.853-51.135-113.989-113.989-113.989zm26.339 203.279c-3.075.906-5.565 3.172-6.756 6.148l-19.583 48.957-19.583-48.956c-1.19-2.977-3.681-5.242-6.756-6.148-39.293-11.57-66.735-48.288-66.735-89.29 0-51.321 41.753-93.073 93.074-93.073s93.074 41.752 93.074 93.073c0 41.001-27.442 77.719-66.735 89.289z"/><path d="m148.5 51.766c-34.311 0-62.224 27.913-62.224 62.224s27.913 62.224 62.224 62.224 62.224-27.913 62.224-62.224-27.913-62.224-62.224-62.224zm0 103.532c-22.777 0-41.308-18.531-41.308-41.309 0-22.777 18.53-41.308 41.308-41.308 22.777 0 41.308 18.53 41.308 41.308s-18.531 41.309-41.308 41.309z"/></svg>');
}








/* START NAVIGATION  */

button#menu-button {
    height: 2rem;
    width: 2rem;
    display: block;
    border: none;
    background-image: url('../img/hamburger.svg'); 
    background-repeat: no-repeat;
    background-size: cover;
}

#menu {
    display: none;
}

#menu.show-nav {
    display: block;
      position: absolute;  /* position the menu */
        z-index: 100;
        top: 0;
        right: 0.6rem;
        background-color: rgb(237, 227, 227);  /* style the dropdown menu */
        padding: 0.5rem;
        width: 40%;
        margin-right: 0;
        border: 1px solid #444
}  

#menu-button {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    padding: 0;
    background-color: transparent;
    z-index: 10;
}

#menu-button:hover {
    cursor: pointer;
    }

.hide-text {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        padding: 0;
    }

    .icon a img {
        width: 2rem;
        height: auto;
    }

    li.icon {
        width: 100%;
        height: 1.8rem;
        margin: 1.3rem 0;  /* space apart for easier finger tapping */
      }

      li.icon a {
        display: flex;  /* place logo and span side by side */
        justify-content: start; /* align left */
        align-items: center; /* vertically align */
        
        font-family: 'poppins'; /* style span text as desired */
        font-weight: bold;
        text-decoration: none;  /* remove underline */
        font-size: 1.5rem;
        margin: 0; 
        height: 3rem;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: space-around;
        align-items: center;
    }

    @media only screen and (min-width: 64em) {
        button#menu-button {
            display: none;
        }

        #menu {
            display: flex;
        }
    }