header {
 position: sticky;
 top: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 80px;
 padding: 0 20px;
 background-color: rgb(240, 241, 243);
 box-shadow: 0rem 0.1rem 1.4rem rgba(182, 178, 178, 0.904);
}

nav {
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: 80px;
 max-width: 1300px;
 font-size: 1.2rem;
}

#navbar_logo {
 font-size: 2rem;
 text-decoration: none;
 color: #000;
 height: 100%;
 display: flex;
 align-items: center;
 z-index: 999;
}

#navbar_logo img {
 width: 200px;
}

/* Toggle bar */
.toggle-menu {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 z-index: 1000;
}

.toggle-menu>.bar {
 background-color: #000;
 height: 3px;
 width: 30px;
 transition: 0.5s;
 border-radius: 50px;
}

.bar:nth-child(2) {
 width: 20px;
 align-self: flex-end;
}

.bar:not(:nth-child(3)) {
 margin-bottom: 5px;
}

.toggle-menu.is_active>.bar:nth-child(1) {
 transform: rotate(-45deg)translate(-7px, 1px);
}

.toggle-menu.is_active>.bar:nth-child(2) {
 opacity: 0;
}

.toggle-menu.is_active>.bar:nth-child(3) {
 transform: rotate(45deg)translate(-10px, -5px);
}


/* Desktop nav-menu */
.nav_menu {
 display: flex;
 align-items: center;
 list-style-type: none;
}

.nav_menu .navbar_links {
 padding: 10px 20px;
}

.navbar_item {
 border-radius: 5px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.navbar_links {
 padding: 10px 20px;
 font-size: 1.5rem;
 text-decoration: none;
 color: #000;
}

.navbar_btn {
 width: 100%;
 padding: 10px 20px;
 text-decoration: none;
 color: #000;
}

/* Mobile nav menu */
@media screen and (max-width: 650px) {
 .nav_menu {
  display: none;
  position: fixed;
  top: 0;
  right: 100%;
  padding: 10rem 2rem;
  height: 100vh;
  z-index: 999;
  width: 100%;
  background-image: linear-gradient(rgb(23, 155, 6), rgb(83, 214, 66));
 }

 .nav_menu .navbar_links {
  display: block;
  width: 100%;
  text-align: center;
 }

 .nav_menu.is_active {
  display: flex;
  flex-direction: column;
  right: 0;
 }

 .nav_menu .navbar_item {
  margin-bottom: 2rem;
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .nav_menu .navbar_item i {
  justify-self: flex-start;
 }

 .navbar_btn {
  text-align: center;
  position: absolute;
  bottom: 10rem;
  width: 60%;
  border-radius: 5px;
 }

 .navbar_btn:hover {
  background-color: lightgreen;
 }
}

.navbar_item:hover {
 background-color: lightgreen;
}


.navbar_item:hover a {
 color: #fff;
}


@media screen and (min-width: 651px) {

 .toggle-menu,
 .fas {
  display: none !important;
 }
}