body{
  font-family: "Jost", sans-serif, Arial;
  color: white;
  margin: 0;
  background-color:rgb(255, 242, 242);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

#myBtn{
  font-family: Arial, Helvetica, sans-serif;
}

.header{
  background-color: rgba(4, 56, 6, 0.684);
  display: flex;
  position: fixed;
  width: 100vw;
  height: 150px;
  align-items: center;
}



.logo-header{
  height: 110px;
  filter: grayscale(100%) brightness(300%);
}

.b-contact{
  font-weight: 500 !important;
}

.b-about, .b-services {
  margin-left: 20px;
}

.fivestar{
  display: inline-flex;
  align-items:center;
  justify-content: end;
  width: 100%;
  padding-right: 20px;
}

.p-fivestar{
  text-align: center;
}


.b-header {
  font-family: "Jost", sans-serif;
  color: white;
  font-size: 35px;
  font-weight: 300;

  background: none;
  border: none;
}

.b-header-buttons{
  margin-left: 20px;
  display: inline-flex;
  justify-content: center;
}

a{
  text-decoration: none;
}

.footer{
  height: 20vh;
  background-color: rgb(51, 66, 46);

  display: grid;
  grid-template-columns: 28vw 32vw 28vw;
  grid-template-areas: "a b c";
  justify-content: center;
  text-align: center;
  align-items: center;
}

.footer-a{
  grid-area: a;
}

.footer-b{
  grid-area: b;
  display:grid;
  text-align: left !important;
}

.logo-footer{
  height: 10vh;
  filter: grayscale(100%) brightness(300%);
}

.footer-href, .bi-footer{
  color: white;
  text-decoration: none;
  font-size: 20px;
  padding-left: 20px;
}

.footer-c{
  grid-area: c;
  display: grid;
  text-align: left !important;
}

.footer-d{
  grid-area: d;
  display: grid;
  font-size: 20px;
  text-align: left !important;
}

.green-border{
  border: 2px solid rgb(51, 66, 46);
  
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: 2px solid rgb(51, 66, 46);
  outline: none; /* Remove outline */
  background-color: white; /* Set a background color */
  color: rgb(51, 66, 46); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 10px; /* Rounded corners */
  font-size: 30px; /* Increase font size */
}

#myBtn:hover {
  background-color: rgb(51, 66, 46); /* Add a dark-grey background on hover */
  color: white;
  cursor: pointer;
  border: 2px solid white;
}

@media (max-width:1024px){

  body{
    width: 100vw;
  }

  .b-about, .b-services{
    margin-left: 0;
    margin: 0 10px;
  }
  
  .header{
    display: grid;
    width: 100vw;
    overflow: clip;
    justify-content: center !important;
    align-items: center !important;
    height: fit-content !important;
  }
  
  .fivestar{
    width: 100%;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-size: small;
  }

  .p-fivestar{
    padding: 0;
    margin: 0;
    padding-bottom: 5px;
  }
  
  .b-header {
    font-size: 100%;
    width: 100%;
    padding: 10px 10px !important;
    text-align: center;
    margin: 0;

    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-areas: "1 2 3";
    text-align: center;
    margin: 0;
  }

  .logo-header{
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
  }

  .b-contact{
    grid-area: 1;
    font-size: x-large;
  }

  .b-about{
    grid-area: 2;
    font-size: x-large;
  }

  .b-services{
    grid-area: 3;
    font-size: x-large;
  }

  .logo-header{
    justify-self: center !important;
    text-align: center !important;
    margin: 5px 0;
    height: 6vh;
  }

  .b-contact, .b-about, .b-services{
    padding: 2px 10px !important;
  }
}

@media (max-width:600px){
  .header{
    height: 12vh !important;
    padding-top: 5px !important;
  }
  
  .footer{
    grid-template-columns: 50vw 50vw;
    grid-template-areas: "a b";
  }

  .bi-footer{
    font-size: 20px;
    padding: 0;
  }

  .footer-b{
    justify-content: baseline;
  }
  
  .footer-d{
    font-size: 10px;
    text-align: center !important;
    align-items: start;
  }

  .logo-footer{
    height: 8vh;
    padding-top: 7px;
  }

  .footer-c{
    display:none;
  }

  .footer-href{
    font-size: 12px;
  }

  .fivestar{
    display: none;
  }
}