.footer-top {
  background-color: var(--color-primary);
  padding: 80px 0;
}

.footer-navigation {
  h2 {
    font-size: var(--font-size-small);
    color: var(--color-secondary);
    margin: 0 0 30px 0;
    font-weight: var(--font-weight-regular);
  }

  @media (max-width: 1200px) {
    text-align: center;
  }
}

.footer-navigation-primary, .footer-navigation-secondary, .footer-navigation-tertiary {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: var(--color-light-green);
}

.footer-navigation-primary-link, .footer-navigation-secondary-link, .footer-navigation-tertiary-link {
  a {
    font-size: var(--font-size-regular);
    color: #aafaff;
    text-decoration: none;

    &:hover, &:focus {
      color: var(--color-white);
    }
  }
}

.footer-navigation-secondary, .footer-navigation-tertiary {
  margin-left: 70px;

  @media (max-width: 1200px) {
    margin-left: 0;
  }
}

.footer-navigation-nav {
  display: flex;

  @media (max-width: 1200px) {
    flex-direction: column;
    gap: 10px;
  }
}

.footer-logo{
  a {
    display: block;

    &:first-child {
      margin-bottom: 25px
    }
  }
}

.footer-logo-within {
  margin-top: -80px;
}

.footer-logo-icon {
  max-width: 100%;
  width: 140px;
  height: auto;
}

.footer-logo-kalmthout-icon {
  max-width: 100%;
  width: 210px;
  height: auto;
}

.footer-socials-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 10px;

  @media (max-width: 1200px) {
    flex-direction: row;
    justify-content: center;
  }
}

.footer-social {
  text-align: right;

  @media (max-width: 1200px) {
    text-align: center;
  }

  svg {
    width: 30px;
    height: 30px;
  }

  a {
    &:hover {
      svg {
        path {
          fill: var(--color-light-green);
        }
      }
    }
  }

}