:root {
  --purple: #a35f8f;
  --accent: #e8d9e4;
  --gold: #f2de9b;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 12px 28px rgba(163, 95, 143, 0.3);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
}

/* ===================== RESET ===================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===================== BODY & STRUCTUUR ===================== */
body {
  display: flex;                     /* Gebruik flexbox voor het hele body-element */
  flex-direction: column;            /* Plaats child-elementen (header, main, footer) onder elkaar */
  min-height: 100vh;                 /* Zorg dat body altijd minimaal de hoogte van het scherm heeft */
  background: #fefafc;               /* Basisachtergrondkleur */
  color: #333;                        /* Tekstkleur */
  line-height: 1.6;                   /* Regelafstand voor betere leesbaarheid */
  transition: background 0.3s, color 0.3s; /* Animatie bij kleurenwissel (bijv. darkmode) */

  /* Achtergrondafbeelding */
  background-image: url('/bloem.jpg'); /* Achtergrondafbeelding toevoegen */
  background-size: cover;             /* Zorg dat de afbeelding de hele achtergrond bedekt */
  background-position: center;        /* Afbeelding centreren */
  background-repeat: no-repeat;       /* Afbeelding niet herhalen */
  background-attachment: fixed;       /* Achtergrond blijft vast bij scrollen */
}

body::before {
  content: "";                        /* Pseudo-element maken */
  position: fixed;                     /* Vast positioneren op scherm */
  top: 0;                              /* Start bovenaan */
  left: 0;                             /* Start links */
  width: 100%;                         /* Volledige breedte van scherm */
  height: 100%;                        /* Volledige hoogte van scherm */
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparante witte overlay */
  z-index: -1;                         /* Achter alle andere elementen plaatsen */
}

main {
  flex: 1;                             /* Main neemt alle beschikbare ruimte tussen header en footer */
}

footer {
  text-align: center;                  /* Tekst in footer centreren */
  background-color: #d3a6c9;          /* Paarse achtergrondkleur voor footer */
}

/* ===================== TOPBAR & NAVIGATION ===================== */

.topbar {
  position: sticky;                         /* Blijft “plakken” bovenaan bij scrollen */
  top: 0;                                   /* Plaats bovenaan het scherm */
  z-index: 100;                             /* Zorg dat het boven andere elementen blijft */
  display: flex;                            /* Flexbox gebruiken om items naast elkaar te plaatsen */
  align-items: center;                      /* Verticale uitlijning van items in de topbar */
  gap: 30px;                                /* Ruimte tussen items */
  padding: 16px 32px;                       /* Binnenruimte rond de inhoud */
  background: rgba(255, 255, 255, 0.25);   /* Semi-transparante achtergrond */
  backdrop-filter: blur(12px) saturate(180%); /* Blur en verzadiging effect op achtergrond */
  border-bottom: 2px solid rgba(163, 95, 143, 0.2); /* Lichte rand onder de bar */
  box-shadow: 0 8px 32px rgba(163, 95, 143, 0.12); /* Schaduw voor diepte */
  transition: all 0.3s ease;               /* Soepele overgang bij hover of veranderingen */
}

.topbar:hover {
  box-shadow: 0 12px 40px rgba(163, 95, 143, 0.25); /* Schaduw wordt sterker bij hover */
}

.brand {
  font-weight: 800;                         /* Dikke tekst */
  font-size: 1.5rem;                        /* Lettergrootte */
  color: var(--purple);                      /* Paarse kleur (variabele) */
  text-decoration: none;                     /* Geen onderstreping */
  padding: 10px 20px;                        /* Binnenruimte van de merknaam */
  border-radius: 16px;                        /* Ronde hoeken */
  background: linear-gradient(135deg, #f9e4f5, #d3a6c9); /* Gradient achtergrond */
  box-shadow: 0 8px 20px rgba(163, 95, 143, 0.25);        /* Schaduw voor 3D-effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease;   /* Animatie bij hover */
}

.brand:hover {
  transform: scale(1.08);                    /* Iets groter bij hover */
  box-shadow: 0 12px 28px rgba(163, 95, 143, 0.4); /* Schaduw intensiveren bij hover */
}

.topnav {
  display: flex;                             /* Links naast elkaar plaatsen */
  gap: 24px;                                 /* Ruimte tussen links */
  margin-left: 40px;                         /* Afstand van linkerkant */
}

.topnav a {
  text-decoration: none;                     /* Geen onderstreping */
  color: var(--purple);                      /* Paarse kleur */
  font-weight: 600;                           /* Iets dikkere tekst */
  padding: 8px 12px;                          /* Binnenruimte rond de link */
  border-radius: 12px;                        /* Ronde hoeken */
  position: relative;                          /* Nodig voor pseudo-element ::after */
  transition: all 0.3s ease;                 /* Animatie bij hover */
}

.topnav a::after {
  content: '';                                /* Pseudo-element voor hover-underline */
  position: absolute;                         /* Positionering tov link */
  width: 0%;                                  /* Startbreedte 0% */
  height: 2px;                                /* Hoogte van onderlijn */
  background: var(--gold);                    /* Kleur van de onderlijn */
  left: 0;                                    /* Start aan linkerkant */
  bottom: 0;                                  /* Onder de link */
  transition: width 0.3s ease;                /* Animatie van breedte bij hover */
}

.topnav a:hover::after {
  width: 100%;                                /* Onderlijn breidt uit over hele link */
}

.topnav a:hover {
  color: #fff;                                /* Tekst wordt wit */
  background: linear-gradient(135deg, var(--purple), #c174b0); /* Gradient achtergrond */
  transform: translateY(-2px) scale(1.05);    /* Lichte omhoogbeweging en schaling */
  box-shadow: 0 6px 18px rgba(163, 95, 143, 0.35); /* Schaduw effect bij hover */
}

/* ===================== CONTAINER ===================== */
.container {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px;
}

/* ===================== HOME / HERO ===================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

.vlinder-img {
  width: 80%;
  margin: 0 auto;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  border: 6px solid rgba(163, 95, 143, 0.08);
  box-shadow: 0 12px 24px rgba(163, 95, 143, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.vlinder-img:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 36px rgba(206, 70, 213, 0.2);
}

.hero-text h1 {
  font-size: 36px;
  color: var(--purple);
  margin-bottom: 16px;
  text-shadow: 1px 1px 6px rgba(154, 38, 119, 0.2);
  text-align: center;
}

.hero-text h3{
    color: #9d4189;
       
}

.hero-text h3 {
    color: #9d4189;
    transition: text-shadow 0.3s ease, transform 0.3s ease; /* smooth hover voor beide */
}

.hero-text h3:hover {
    text-shadow: 
        0 0 8px rgb(238, 130, 224),
        0 0 16px rgb(255, 255, 255),
        0 0 24px rgb(234, 23, 171);
        transform: scale(1.05); /* maakt het extra dynamisch */
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--purple), #c174b0);
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s;
}

.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(163, 95, 143, 0.3);
}

/* ===================== PROJECTEN / kaarten ===================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 300px); /* 2 kaarten naast elkaar */
  gap: 30px;
  justify-content: center; /* alles mooi in het midden */
  margin-top: 40px;
}
.card {
  width: 300px;
  height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  border: 4px solid var(--purple);
  box-shadow: 0 8px 30px rgba(163, 95, 143, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card img {
  width: 100%;
  height: 250px;
  margin-top: 50px; /* afbeelding lager zetten */
  object-fit: contain;
  border-radius: 12px;
  display: block;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.02); /* groter bij hover */
  box-shadow: 0 18px 50px rgba(234, 241, 102, 0.746);
}

.card:hover img {
  transform: scale(1.05); /* afbeelding groeit mee */
}

.lead {
  text-align: center;
  color: #69055b;
  font-family: sans;
}

/* ===================== INHOUD / kaarten ===================== */


.binnenkaart {
    display: block;
    margin: 0 auto; /* horizontaal centreren */
    max-width: 100%; /* past zich aan aan de breedte van de container */
}

/* ===================== over mij  ===================== */

.container h2{
    color: #8a2374;
    text-align: center;
}

.mij {
    
font-family: sans;
 font-size: 18px; /* tekst groter maken */
  line-height: 1.6; /* meer ruimte tussen regels */
  color: #7c046c; /* tekstkleur */
  max-width: 600px; /* breedte beperken voor nettereleesbaarheid*/
  margin: 20px auto; /* centreren met spacing */
  text-align: center; /* tekst centreren (optioneel) */ 
}




/* ===================== CONTACT ===================== */
/* Container van het contactformulier */
.contact-form {
  display: flex;                  /* Flexbox gebruiken om items te organiseren */
  flex-direction: column;         /* Items onder elkaar plaatsen */
  align-items: center;            /* Horizontaal centreren van items */
  gap: 12px;                      /* Ruimte tussen de form elementen */
  max-width: 540px;               /* Maximale breedte van het formulier */
  margin: 40px auto;              /* Horizontaal centreren op de pagina en verticale marge */
  padding: 20px;                  /* Binnenruimte rond de inhoud */
  background: rgba(255, 255, 255, 0.25);  /* Semi-transparante achtergrond */
  backdrop-filter: blur(12px);    /* Blur effect op achtergrond */
  border-radius: 16px;            /* Ronde hoeken van het formulier */
  box-shadow: 0 12px 28px rgba(163, 95, 143, 0.1); /* Schaduw voor diepte */
}

/* Labels in het formulier */
.contact-form label {
  font-size: 14px;                /* Lettergrootte van label */
  font-weight: 500;               /* Medium gewicht voor label tekst */
  color: var(--purple);           /* Paarse kleur voor label tekst */
  align-self: flex-start;         /* Labels aan de linkerkant van het formulier uitlijnen */
}

/* Input velden en textarea */
.contact-form input,
.contact-form textarea {
  width: 100%;                    /* Veld vult de breedte van container */
  padding: 12px;                  /* Binnenruimte in velden */
  border-radius: 12px;            /* Ronde hoeken */
  border: 1px solid #ddd;         /* Lichtgrijze rand */
  transition: all 0.3s ease;      /* Soepele overgang bij focus */
  font-size: 14px;                /* Lettergrootte van tekst */
}

/* Focus effect voor input velden en textarea */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--purple);    /* Paarse rand bij focus */
  box-shadow: 0 0 16px rgba(209, 108, 179, 0.699); /* Schaduw voor focus effect */
  outline: none;                  /* Standaard focus outline verwijderen */
}

/* Button stijl */
.contact-form button {
  padding: 12px 20px;             /* Binnenruimte van knop */
  border-radius: 14px;            /* Ronde hoeken */
  background: linear-gradient(135deg, var(--purple), #c174b0); /* Gradient achtergrond */
  color: #fff;                    /* Witte tekst */
  border: none;                   /* Geen rand */
  cursor: pointer;                /* Cursor verandert in pointer bij hover */
  transition: transform 0.3s ease, box-shadow 0.3s; /* Animatie bij hover */
  align-self: center;             /* Knop centreren */
}

/* Hover effect voor knop */
.contact-form button:hover {
  transform: scale(1.05);         /* Knop iets groter bij hover */
  box-shadow: 0 10px 28px rgba(196, 95, 166, 0.753); /* Schaduw bij hover */
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-detail {
    flex-direction: column;
  }
  .topbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .topnav {
    margin-left: 0;
    gap: 16px;
  }
  .search {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
  }
  .search input {
    min-width: 120px;
  }
  .topnav {
    flex-direction: column;
    gap: 12px;
  }
}