*{margin: 0;padding: 0;line-height: 150%;}
  img{display: block;width: 100%;}
  body{background: #fff;font-family: sans-serif;}
  header{/*width: fit-content;margin:20px auto;background: #fff;display: flex;border-radius: 20px;align-items: center;
  justify-content: center;padding: 10px;position: sticky;top: 20px;box-shadow: 0px 2px 3px #a0a0a0;z-index: 2;*/padding:0 5%;padding-top: 30px;}
  header img{width: 34%;}
  nav{
  background-color: #44783F;
  color: #fff;
  margin: 30px 0;
  border-radius: 10px;display: flex;flex-direction: row;justify-content: center;}
  nav a{text-decoration: none;color: #fff;padding:20px;letter-spacing: 2px;transition: 0.5s;flex-basis: -moz-available;
  text-align: center;
  /*max-width: 215px;*/font-size: 29px;font-weight: bold;}
  nav a:hover{background-color: #5b8c5a;}
a{text-decoration: none;}

@font-face {
  font-family: 'Permanent Marker Self Hosted';
  font-weight: 400;
  font-style: normal;
  src: url('./fonts/permanentMarker-Regular.ttf') format('truetype');
  font-display: swap; 
}


#taglines{display: flex;justify-content: center;margin: 20px 0;font-size: 22px;}
#taglines span{border-right:1px solid #215573;padding:0px 20px;font-weight: bold;}
#taglines span:last-child{border-right: none;}


h2{text-decoration: underline;
  text-decoration-color: #f18d49;text-underline-offset: 10px;margin-bottom: 20px;text-decoration-thickness: 2px; }



#menu_but {
  display: none;
  float: right;
 padding: 0 2%;

}

.bar1,.bar2,.bar3 {width: 26px;height: 2px;background-color: #333;margin: 6px 0;transition: 0.4s;}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-4px, 6px);
  transform: rotate(-45deg) translate(-4px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

#nav_but_swift{background: #44783F;color: #fff;border-radius: 14px;padding:18px 20px;}

main{/*position: relative;top: -110px;*/}


#logo{margin: auto;}



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

header{}
header{width: fit-content;margin:20px auto;background: #fff;display: flex;border-radius: 20px;align-items: center;
  justify-content: center;padding: 10px;position: sticky;top: 20px;box-shadow: 0 1px 10px rgba(0,0,0,0.1);z-index: 2;width: 96%;margin:unset;border-radius: 0;top: 0;display: block;overflow: auto;padding: 2%;background-color: none;z-index: 2;}


header img{float: left;padding: 0;height: 60px;width: auto;}
header #menu_but{float: right;margin: 10px;}
nav{display: none;margin-top: 70px;/*height: 0;*/transition: height 2s;justify-content: left;}
nav a{display: block;padding: 20px 30px;opacity: 0;/*transition: opacity 3s;*/max-width: unset;text-align: left;}
nav a{animation: fadeIn 0.5s ease-in-out forwards; /* Apply animation */}

/* Apply delay to each item */
nav a:nth-child(1) {
  animation-delay: 0.1s;
}

nav a:nth-child(2) {
  animation-delay: 0.3s;
}

nav a:nth-child(3) {
  animation-delay: 0.5s;
}

nav a:nth-child(4) {
    animation-delay: 0.7s;
}

nav a:nth-child(5) {
    animation-delay: 0.9s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
  }
}


#nav_but_swift{background: unset;color: unset;border-radius: none;padding:30px;}
#menu_but{display: block;padding: 5px 2%;}


.nav_noshow {
    display: none;
  }

  .room_desc h3{
        font-size: 16px;
      }

  @keyframes appear_nav {
    from {
      opacity: 0;
      height: 0;
    }

    to {
      opacity: 1;
      height: 520px;
    }
  }

  .nav_show {
    display: block;
    /*animation-name: appear_nav;
    animation-duration: 1s;
    animation-direction: forwards;*/
    animation: appear_nav 0.5s ease-in-out forwards;
  }

}

nav a {font-size: 20px;}

#backdrop1{position: fixed;
  top: 0;
  height: 0;
  background-color: white;
  z-index: 0;
  width: 100%;opacity: 0;
  transition: height 1s, opacity 1s;
  z-index: 1;
}




#contact{display: flex;flex-direction: row;padding: 60px 1%;background-color: #f2f2f2;}
#contact #form, #contact #details{flex-basis: 50%;margin: 0 5%;}

#contact #form{background-color: none;padding:0 5%;border-radius: 20px;}
#contact form{display: flex;flex-direction: column;}
#contact form input, #contact form textarea{margin-top: 10px;margin-bottom: 20px;padding: 10px;border-radius: 10px;border: none;outline: none;resize: none;border: 1px solid #ececec;}
#contact #details{}
#contact #details iframe{width: 100%;}
#contact #details h2, #contact #details p{margin-bottom: 30px;}
#contact span{padding: 10px 20px;
  color: #fff;
  border-radius: 20px;
  background-color: #44783F;
  width: 150px;text-align: center;margin-top: 30px;}

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

h1{font-size: 4vh;}


#taglines{display: none;}
#contact{display: flex;flex-direction: column;clear: both;}
#contact #form,#contact #details{flex-basis: 90%;margin: 5%;}
#contact #form{padding: 0;}


.show_backdrop{
  height: 100% !important;
  opacity: 1 !important;
}

#backdrop2{position: fixed;
  top: 0;
  height: 100%;
  background-color: white;
  z-index: 0;
  width: 100%;}



}




#prd_wrap{overflow: auto;padding:0 3%;}
  #prd_imgs, #prd_desc{width: 43%;float: left;margin:30px 3%;}
  #prd_imgs img{float: left;border-radius: 10px;}
  #prd_desc{text-align: left;}
  #prd_desc h1{margin-bottom: 30px;}
  #prd_desc ul{margin: 30px 0;margin-left: 30px;}
  #display_img{width: 100%;border-radius: 10px;}
  .prd_thumbnails{width: 20%;display: inline-block;margin:10px 5px;cursor: pointer;}
.prd_thumbnails:nth-child(2){margin-left: 0;}
  .but_order_now{background: #44783F;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;}

  #prd_qty_input{width: 30%;max-width: 170px;
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: #c7c7c7;}



  #price_tag{margin: 30px 0;font-size: 20px;font-style: italic;}


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

  #prd_imgs, #prd_desc{width: unset;float: none;margin:40px 30px;clear: both;overflow: auto;}

}