.font-written {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}

/* custom.css */
#works .item figure{
  aspect-ratio: 370 / 241;   /* zelfde als je thumb-dimensies */
  overflow: hidden;
}

#works .item figure img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* Alle icoontjes onder "Waar passie bloeit" dezelfde hover-kleur */
#watwedoen .icon-sm:hover{
  background-color: var(--colored) !important;
  color: #fff !important;
  border-color: var(--colored) !important;
}



/* ----------------------------- */
/* AANPASSEN ACHTERGROND HOME */
#home .slide{
  position: relative;
}

#home .slide .parallax::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.4);   /* speel tussen 0.20 en 0.40 */
  pointer-events:none;
}
/* AANPASSEN ACHTERGROND HOME */
/* ----------------------------- */



/* ----------------------------- */
/* AANPASSEN ACHTERGROND BIJ VERHAAL */
#verhaal{
  position: relative;
  overflow: hidden;   /* belangrijk bij parallax */
}
#verhaal .parallax{
  z-index: 0;         /* i.p.v. -1 */
}
#verhaal::before{
   content:"";
  position:absolute;
  inset:0;
  /* background: rgba(0,0,0,0.35);  */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.80) 100%
  );
  z-index:1;
  pointer-events:none;
}
/* alles behalve de parallax komt boven de overlay */
#verhaal > *:not(.parallax){
  position: relative;
  z-index: 2;
}
/* AANPASSEN ACHTERGROND BIJ VERHAAL */
/* ----------------------------- */



/* ----------------------------- */
/* AANPASSEN ACHTERGROND BIJ CONTACT */
#contact{
  position: relative;
  overflow: hidden;
}
#contact .parallax{
  z-index: 0;
   background-size: cover;
  background-position: 50% 20%;  /* X% Y%  -> speel hiermee */
}
#contact::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255, 255, 255, 0); 
  z-index:1;
  pointer-events:none;
}
/* alles behalve de parallax boven de overlay */
#contact > *:not(.parallax){
  position: relative;
  z-index: 2;
}
/* AANPASSEN ACHTERGROND BIJ CONTACT */
/* ----------------------------- */


/* ----------------------------- */
/* GLASS EFFECT CONTACT */
.contact-glass{
  padding: 2vw;
  border-radius: 20px;

  background: rgba(3, 3, 3, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* optioneel: tekst iets lichter voor contrast */
#contact .contact-glass h1,
#contact .contact-glass p,
#contact .contact-glass h5{
  color: #fff;
}

#contact .contact-glass{
  padding-left: 3vw;   /* verhoog indien nodig */
}
/* GLASS EFFECT CONTACT */
/* ----------------------------- */




.hero-logo-glass{
  display:inline-block;
  padding: 28px 46px;
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18); */

  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
}
/* .hero-logo-glass img{
  width: 420px;      
  max-width: 60vw;  
} */
 /* CSS van hierboven aangepast naar onderstaande om probleem op laptop Vera op te lossen!! */
.hero-logo-glass img{
  width: clamp(260px, 32vw, 420px);
  max-width: 100%;
  height: auto;
}



/* Maak de fixed navbar bij load meteen wit + donkere tekst (zelfde als na scroll) */
#navigation.modern-nav.fixed:not(.scrolled){
  background: #fff !important;
  color: #333 !important;
  border-bottom-color: rgba(100,100,100,0.13) !important; /* enkel als je die lijn wil */
}

/* Links meteen donker */
#navigation.modern-nav.fixed:not(.scrolled) .nav-links > li > .nav-link{
  color: inherit !important;
}

/* Active/hover accent (zoals theme, maar zeker ook bij load) */
#navigation.modern-nav.fixed:not(.scrolled) .nav-container li.active > a.nav-link,
#navigation.modern-nav.fixed:not(.scrolled) .nav-container li > a.nav-link.active,
#navigation.modern-nav.fixed:not(.scrolled) .nav-container .nav-links li:not(.extra-links):hover > a.nav-link:not(.lg){
  color: var(--colored) !important;
}

/* Logo: bij witte navbar wil je dark logo */
#navigation.modern-nav.fixed:not(.scrolled) .logo-white{ display:none !important; }
#navigation.modern-nav.fixed:not(.scrolled) .logo-dark{ display:block !important; }

/* Mobile hamburger: niet-wit bij load (zelfde als na scroll) */
#navigation.modern-nav.fixed:not(.scrolled) .hamburger-menu div{
  background: #333 !important;
}



#instagram #newsletter-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;   /* geen space-between meer */
  gap: 18px;                 /* afstand tussen icoon en tekst */
}

/* links + rechts smaller maken */
#instagram #newsletter-wrapper > .lg-column-auto{
  flex: 0 0 70px;            /* was 90px */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* midden blijft gecentreerd */
#instagram #newsletter-wrapper > .lg-column{
  flex: 0 1 auto;            /* geen volledige breedte meer */
  text-align: center !important;
}


/* mobiel: stapelen */
@media (max-width: 640px){
  #instagram #newsletter-wrapper{
    flex-direction: column;
    justify-content: center;
  }
  #instagram #newsletter-wrapper > .lg-column-auto{
    flex: 0 0 auto;
  }
}


/* CSS hieronder toegevoegd om probleem op laptop Vera op te lossen!! */
@media (max-width: 1100px), (max-height: 800px) {
  .hero-logo-glass{
    padding: 16px 22px;
    border-radius: 14px;
  }

  .hero-logo-glass img{
    width: clamp(220px, 34vw, 320px);
    max-width: 100%;
    max-height: 30vh;
    height: auto;
  }
}

/* ----------------------------- */
/* TUINBEURS POPUP */

#tuinbeurs-popup .w-30.h-30 {
  width: 300px !important;
  height: auto !important;
  overflow: hidden;
  margin: 0 auto;
}

#tuinbeurs-popup img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #tuinbeurs-popup {
    padding-top: 70px !important;
    padding-bottom: 35px !important;
  }

  #tuinbeurs-popup .container {
    margin-top: 0 !important;
  }

  #tuinbeurs-popup .flex-row {
    gap: 12px;
  }

  #tuinbeurs-popup h1 {
    margin-bottom: 10px;
  }

  #tuinbeurs-popup p {
    margin-top: 10px !important;
    margin-bottom: 8px;
    line-height: 1.55;
  }

  #tuinbeurs-popup .w-30.h-30 {
    width: 240px !important;
  }
}

/* TUINBEURS POPUP */
/* ----------------------------- */