/* Nav*/
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo span {
  text-transform: capitalize;
  color: #ffffff;
  font-size: 24px;
  font-family: sans-serif;
  gap: 8px;
}

.logo img {
  height: 70px;
  justify-content: center;
  margin-top: 8px;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: #000000;
  height: 100px;
  background-color: transparent;
  margin: 0 2px;
}

nav .links ul {
  display: flex;
}

li {
  list-style: none;
}

a {
  color: #000000;
}

.links ul li a {
  color: #000000;
  padding: 16px;
}

header .links a:hover {
  color: #ffff;
  font-weight: 700;
}

#mobile-menu-btn {
  display: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--main-green-colour);
}

.bar {
  display: block;
  background-color: #000000;
  color: #000000;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  border-radius: 3px;
}

.mobile-menu a {
  display: none;
}

.mobile-menu form {
  display: none;
}

hr {
  border: 1px solid #000000;
  margin: 0 auto;
  max-width: 987px;
}

/*footer*/
footer {
  height: 320px;
  background-color: var(--main-green-colour);
}

footer .container {
  margin: 8px auto;
}

.content-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menu-box,
.icon-box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 8px;
}

.fab::before {
  padding: 4px;
}

.menu-box {
  justify-content: space-around;
}

.copyright-box {
  display: flex;
  align-items: flex-end;
}

footer a,
footer i span {
  padding: 5px;
  cursor: pointer;
  color: #000000;
}

footer p {
  color: #000000;
  margin: 4px;
}

.fab {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.fab:hover,
.fab p:hover {
  color: #ffffff;
}

.fab p {
  font-family: "Mukta Vaani", sans-serif;
}

@media screen and (max-width: 600px) {
  nav {
    background-color: var(--main-green-colour);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #mobile-menu-btn {
    display: block;
  }

  nav .links a {
    display: none;
  }

  hr {
    display: none;
  }

  .mobile-menu {
    display: none;
    position: absolute;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background-color: var(--main-green-colour);
  }

  .mobile-menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 200px;
  }

  .mobile-menu a {
    color: #000000;
    display: inline;
  }

  #mobile-menu-btn {
    color: #000000;
    cursor: pointer;
    padding: 8px;
  }

  footer {
    height: 400px;
  }

  footer p {
    padding: 2px;
  }

  .content-footer {
    flex-direction: column;
  }

  .copyright-box {
    justify-content: flex-end;
  }
}