body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f5f5f5;
    }

    * {
	  box-sizing: border-box;
	}
	
	.header {
      background-image: url('images/header.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center 55%;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2em;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }

    nav {
	  background-color: #333;
	  display: flex;
	  justify-content: center;
	  padding: 10px 0;
	  position: sticky;
	  top: 0;
	  z-index: 1000;
	}

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      font-weight: bold;
    }
	
	nav .logo {
	  display: none;
	  color: #fff;
	  font-size: 1.5em;
	  font-weight: bold;
	  text-decoration: none;
	}

	/* Logo op mobiel toonbaar */
	@media (max-width: 767px) {
	  nav .logo {
		display: block;
		margin-bottom: 15px;
	  }
	}

    .menu-toggle {
      display: none;
      position: absolute;
      right: 20px;
      top: 10px;
      font-size: 24px;
      color: white;
      cursor: pointer;
    }

    .info-sectie {
      text-align: center;
      padding: 40px 20px 10px;
    }

    .info-sectie h2 {
      font-size: 2em;
      margin-bottom: 10px;
    }

    .info-sectie p {
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.6;
    }
	
	.over-sectie {
	  padding: 50px 20px 30px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  background-color: #f9f9f9;
	}

	.over-sectie h1,
	.over-sectie h2 {
	  font-size: 2em;
	  margin-bottom: 20px;
	  color: #222;
	  text-align: center;
	}

	.over-sectie p {
	  max-width: 850px;
	  margin: 0 auto 20px;
	  line-height: 1.8;
	  font-size: 1.05em;
	  text-align: left;
	  color: #444;
	}

	.over-sectie img {
    width: 100%;
    max-width: 850px;
    height: 550px;
    display: block;
    margin: 20px auto;
    border-radius: 10px;
	}
	
	@media (max-width: 600px) {
    .over-sectie img {
        height: auto;
        max-width: 100%;
        margin: 15px auto;
    }
	}

    .bedrijven {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 30px 10px;
      gap: 20px;
    }

    .bedrijf {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      width: 300px;
      padding: 20px;
      text-align: center;
    }

    .bedrijf img {
      width: 100%;
      border-radius: 5px;
      height: 200px;
      object-fit: absolute;
    }

    .bedrijf h3 {
      margin-top: 15px;
    }
	
	.contact-container {
	  max-width: 800px;
	  margin: 40px auto;
	  padding: 20px;
	  background: white;
	  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	  border-radius: 8px;
	  text-align: center;
	}

	.contact-container h1 {
	  font-size: 2em;
	  margin-bottom: 10px;
	}

	.contact-container p {
	  margin-bottom: 30px;
	}

	.contact-form input,
	.contact-form textarea {
	  width: 100%;
	  padding: 12px;
	  margin: 10px 0;
	  border-radius: 5px;
	  border: 1px solid #ccc;
	  font-familie: inherit;
	}

	.contact-form button {
	  padding: 12px 25px;
	  background-color: #333;
	  color: white;
	  border: none;
	  border-radius: 6px;
	  cursor: pointer;
	  font-weight: bold;
	}

	.contact-form button:hover {
	  background-color: #555;
	}
	
	.melding {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 5px;
    font-familie: Arial, sans-serif;
    height: 50px;
	}

	.melding.success {
		color: green;
		background-color: #e8f5e9;
		border: 1px solid #4caf50;
	}

	.melding.error {
		color: red;
		background-color: #f8d7da;
		border: 1px solid #f44336;
	}

    @media (max-width: 768px) {
	  nav {
		flex-direction: column;
		align-items: flex-start;
		padding: 15px 20px 10px;
		min-height: 60px;
	  }

	  nav a {
		display: none;
		margin: 10px 0;
	  }

	  nav.active a {
		display: block;
	  }

	  .menu-toggle {
		display: block;
		position: absolute;
		right: 20px;
		top: 15px;
	  }

	  .bedrijf {
		width: 90%;
	  }
	}
	
	.button-container {
	  margin-top: 20px;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 15px;
	}

	.custom-button {
	  padding: 12px 20px;
	  border: none;
	  border-radius: 5px;
	  font-weight: bold;
	  text-decoration: none;
	  color: white;
	  transition: background 0.3s ease;
	}

	.custom-button.discord {
	  background-color: #5865F2;
	}

	.custom-button.discord:hover {
	  background-color: #4752c4;
	}

	.custom-button.fivem {
	  background-color: #43b581;
	}
	
	.custom-button.fivemrpmotoren {
	  background-color: #D82227;
	}

	.custom-button.fivem:hover {
	  background-color: #359d6c;
	}
	
	.custom-button.small {
	  padding: 8px 14px;
	  font-size: 0.9em;
	  border-radius: 4px;
	}

	.type-buttons {
	  width: 100%;
	  justify-content: center;
	  gap: 10px;
	  flex-wrap: wrap;
	  margin-top: 10px;
	}

	.custom-button.active {
	  box-shadow: inset 0 0 0 2px #fff;
	  outline: 2px solid #000;
	}

	footer {
	  background-color: #333;
	  color: white;
	  text-align: center;
	  padding: 20px 10px;
	  margin-top: 40px;
	  font-size: 0.9em;
	}
	
	.filter-form {
	  margin: 30px auto 20px;
	  padding: 15px 20px;
	  background-color: #f8f8f8;
	  border: 1px solid #ddd;
	  border-radius: 10px;
	  display: flex;
	  align-items: center;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 10px;
	  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	  max-width: 950px;
	}

	.filter-form label {
	  font-weight: 600;
	  color: #333;
	  font-size: 1rem;
	}

	.filter-form select {
	  padding: 10px 14px;
	  border: 1px solid #ccc;
	  border-radius: 8px;
	  background-color: #fff;
	  font-size: 1rem;
	  color: #444;
	  transition: border-color 0.3s, box-shadow 0.3s;
	  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	  cursor: pointer;
	}

	.filter-form select:focus,
	.filter-form select:hover {
	  border-color: #ff69b4;
	  box-shadow: 0 0 5px rgba(255, 105, 180, 0.3);
	  outline: none;
	}

	.custom-button.active {
	  box-shadow: inset 0 0 0 2px #fff;
	  outline: 2px solid #000;
	}

	.disabled-link {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
	}
	
	.familie-tree {
	  text-align: center;
	  padding: 40px 0;
	}

	.familie-tree ul {
	  padding-top: 20px;
	  position: relative;
	  display: table;
	  margin: 0 auto;
	}

	.familie-tree li {
	  display: inline-block;
	  vertical-align: top;
	  text-align: center;
	  list-style-type: none;
	  position: relative;
	  padding: 20px 5px 0 5px;
	}

	.familie-tree li::before, .familie-tree li::after {
	  content: '';
	  position: absolute;
	  top: 0;
	  border-top: 1px solid #ccc;
	  width: 50%;
	  height: 20px;
	}

	.familie-tree li::before {
	  right: 50%;
	  border-right: 1px solid #ccc;
	}

	.familie-tree li::after {
	  left: 50%;
	  border-left: 1px solid #ccc;
	}

	.familie-tree li:only-child::before, 
	.familie-tree li:only-child::after {
	  display: none;
	}

	.familie-tree li:only-child {
	  padding-top: 0;
	}

	.familie-tree li > ul::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 50%;
	  border-left: 1px solid #ccc;
	  width: 0;
	  height: 20px;
	}

	.familie-box {
	  display: inline-block;
	  border: 1px solid #ccc;
	  padding: 10px 15px;
	  border-radius: 10px;
	  background-color: #f9f9f9;
	  min-width: 100px;
	}