.md-footer {
    background-color: #e6f3fb; /* Light blue background */
    padding: 20px;
    border-top: 10px solid #B2D7EE;
  }

  .md-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.md-footer__links {
    display: flex;
    flex: 2;
    max-width: 600px; /* Beperkt de breedte van de rechtersectie */
    justify-content: flex-start;
}
  /* Column 1: Notice Section */
  .md-footer__notice {
    flex: 1;
    color: #154273; /* Dark blue for readability */
    font-size: 1.3em;
  }

  /* Columns 2, 3 & 4: Link Columns */
  .md-footer__column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 150px;
    margin-left: auto;
  }

  .md-footer__column a {
    color: #154273; /* Darker link color */
    text-decoration: underline;
    font-size: 1.3em;
    position: relative; /* Nodig voor positionering van de chevron */
  }

.md-footer__column a::before {
    content: "›"; /* Unicode-karakter voor een chevron */
    margin-right: 6px; /* Ruimte tussen de tekst en de chevron */
    color: #154273; /* Matcht met de linkkleur */
    display: inline-block;
    transition: transform 0.2s ease; /* Animatie voor hover */
}
.is-external-link-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'%3E%3Cpath fill='none' stroke='%23154273' stroke-linecap='round' d='M13.5 14.5v-5m-3-9h5m0 0v5m0-5-7 6m-3-5h-5m0 0v13m0 0h13'/%3E%3C/svg%3E") !important;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 13px 12px;
  padding-right: 1.25em !important;
  text-decoration: underline !important;
  display: inline !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

  .md-footer__column a:hover, td:hover {
    color: #316fb3;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .md-footer__inner {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .md-footer__links {
      flex-direction: column;
      align-items: center;
    }
  }

/* Additional responsive breakpoint for tablets and smaller screens */
@media (max-width: 1024px) {
  .md-footer__inner {
    gap: 15px;
  }

  .md-footer__column {
    min-width: 120px;
    flex: 1;
  }
}