/* Algemene stijlen */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: #333;
            background-color: #f9f9f9;
	/* Oorspronkelijke kleur f9f9f9 nu 8A3313
        }

        /* Navigatiebalk */
        header {
            background-color: #fff;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #2e7d32;
        }

        /* Mobiel Advies AI */

	.container {
 	 display: flex;
	  flex-wrap: wrap; /* Zorgt dat elementen naar de volgende regel springen */
 	 gap: 20px;       /* Ruimte tussen de elementen */
	}

	.kolom {
  	flex: 1 1 300px; /* Groeit en krimpt, maar basisbreedte is 300px */
	}

	/* Standaard styling voor desktop */
	nav {
 	 display: flex;
  	justify-content: space-between;
	}
	/* Styling specifiek voor mobiel (schermen tot 768px breed) */
	@media (max-width: 768px) {
 	 nav {
    	flex-direction: column; /* Menu-items onder elkaar in plaats van naast elkaar */
    	align-items: center;
  	}
  
  	.desktop-only {
  	  display: none; /* Verberg zware of onnodige elementen op mobiel */
  	}
	}

        /* Einde Mobiel Advies AI */

        nav a {
            text-decoration: none;
            color: #555;
            margin-left: 20px;
            font-weight: 500;
        }

        nav a:hover {
            color: #2e7d32;
        }

        /* Hero Sectie */
        .hero {
            background-color: #e8f5e9;
            padding: 80px 40px;
            text-align: center;
        }

        .hero h1 {
            font-size: 42px;
            color: #1b5e20;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 18px;
            color: #4b634e;
            max-width: 600px;
            margin: 0 auto 30px auto;
        }

        .btn {
            background-color: #2e7d32;
            color: white;
            padding: 12px 24px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
        }

        .btn:hover {
            background-color: #1b5e20;
        }

        /* Kenmerken Sectie */
        /* Begin AI Advies voor Mobiel */

	/* De container die alle kenmerken vasthoudt */
	.kenmerken-container {
  		display: flex;
  		flex-wrap: wrap;      /* Zorgt dat kaartjes onder elkaar springen als het past */
  		gap: 20px;            /* De ruimte tussen de kaartjes */
 		padding: 20px;
 		justify-content: center;
	 }

	/* De individuele kenmerk-kaartjes */
	.kenmerk-kaart {
	  /* flex-grow: 1, flex-shrink: 1, flex-basis: 300px */
	  flex: 1 1 300px;      
  
	  background-color: #f9f9f9;
	  border: 1px solid #ddd;
	  border-radius: 8px;
	  padding: 20px;
	  text-align: center;
	  box-sizing: border-box; /* Zorgt dat padding de kaart niet breder maakt */
	}

	/* Mobiele optimalisatie voor tekstgrootte */
	@media (max-width: 480px) {
  		.kenmerk-kaart h3 {
		    font-size: 1.2rem;   /* Iets kleinere letters op heel kleine schermen */
	  }
	}

        /* Einde AI advies voor Mobiel */


        .features {
            display: flex;
            justify-content: space-around;
            padding: 60px 40px;
            background-color: #fff;
        }

        .feature-card {
            text-align: center;
            max-width: 300px;
        }

        .feature-card h3 {
            color: #2e7d32;
            margin-bottom: 10px;
        }

        /* Footer */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            font-size: 14px;
        }
/* Specifiek voor mobiele telefoons */
@media (max-width: 768px) {
  .kenmerken-container {
    flex-direction: column; /* Dwingt de kaartjes onder elkaar */
  }

  .kenmerk-kaart {
    flex: 1 1 100%;        /* Laat elk kaartje de volledige breedte vullen */
    width: 100%;           /* Extra zekerheid voor oudere browsers */
  }
}