footer {
  width: var(--max-width);
  max-width: 100%;
  padding: 2rem;
  background-color: #eee;
  border-radius: 0.5rem;
  animation: var(--fade-in-left);
}
footer .footer-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
footer .footer-nav nav .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
footer .footer-nav nav .menu > li > a {
  font: var(--font-bold);
  color: var(--font-primary);
  cursor: pointer;
  transition: opacity 0.3s ease;
}
footer .footer-nav nav .menu > li > a:hover {
  opacity: 0.75;
}
footer .footer-nav nav .menu > li > .sub-menu {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
footer .footer-nav nav .menu > li > .sub-menu a {
  font-size: 0.875rem;
  color: var(--font-primary);
  cursor: pointer;
  transition: opacity 0.3s ease;
}
footer .footer-nav nav .menu > li > .sub-menu a:hover {
  opacity: 0.75;
}
footer .footer-nav nav .menu > li > .sub-menu > li .sub-menu {
  display: none;
}
footer .footer-nav .illustration {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
footer .footer-nav .illustration svg {
  width: 24rem;
  max-width: 100%;
  height: auto;
}
footer .credentials {
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
}
footer .credentials a {
  color: var(--font-primary);
  cursor: pointer;
  transition: opacity 0.3s ease;
}
footer .credentials a:hover {
  opacity: 0.75;
}

@media only screen and (max-width: 900px) {
  footer .footer-nav nav .menu {
    gap: 2rem;
  }
  footer .credentials {
    flex-direction: column;
  }
}/*# sourceMappingURL=style.footer.css.map */