.main-navbar {
  border-bottom: 5px solid var(--primary-color);
  background-color: #000;
  display: block;
  width: 100%;
}

.link a {
  color: #ffffff;
  text-decoration: none;
}

.link a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* 
 * DESKTOP 
 */
@media all and (min-width: 992px) {

  /*👇 CUSTOM CSS FOR DESKTOP ONLY 👇*/
  .main-navbar .simple-menu-list-item>* {
    color: #fff !important;
  }
}

/*  
 * MOBILE AND TABLETS 
 */
@media screen and (max-width: 768px) {

/* 1. Dwing de FOYS navigatiebalk om flexibel te zijn */
  .main-navbar,
  header {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2. De "Hagelgeweer"-methode voor ELKE afbeelding in de navbar */
  .main-navbar img,
  .main-navbar svg,
  .main-navbar a img,
  [class*="navbar"] img,
  [class*="brand"] img,
  [class*="logo"] img {
    width: 100% !important;
    max-width: 100% !important;
    /* Als het logo te klein wordt, verander 100% naar bijv. 250px */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    /* Centreert het logo netjes op je mobiel */
  }

  /* 3. Mocht de afbeelding een ACHTERGROND-afbeelding zijn in plaats van een losse foto: */
  .main-navbar,
  [class*="navbar"] {
    background-size: contain !important;
    /* Zorgt dat de achtergrondfoto binnen het scherm past */
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}