:root {
  --green:#2f5d3a;
  --dark:#16221c;
  --gold:#c4a15d;
  --light:#f5f6f3;
  --text:#2a2a2a;
}

*{box-sizing:border-box;}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:#fff;color:var(--text);line-height:1.7;}

/* HEADER */
header{position:fixed;top:0;width:100%;z-index:1000;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);padding:12px 50px;display:flex;justify-content:space-between;align-items:center;}
header img{height:50px;}
nav{display:flex;align-items:center;}
nav a{color:#fff;text-decoration:none;margin:0 16px;font-size:15px;transition:0.2s;}
nav a:hover{color:var(--gold);}
.hamburger{display:none;flex-direction:column;justify-content:space-between;width:28px;height:20px;cursor:pointer;}
.hamburger span{display:block;height:3px;background:#fff;border-radius:2px;transition:0.3s;}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);}

/* HERO */
.hero{position:relative;height:70vh;overflow:hidden;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.1);transition:opacity 1.5s ease, transform 8s ease;}
.hero-slide.active{opacity:1;transform:scale(1);}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.35));z-index:1;}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:20px;}
.hero h1{font-size:3.5rem;font-weight:600;margin-bottom:10px;text-shadow:0 15px 40px rgba(0,0,0,0.7);}
.hero p{font-size:1.35rem;max-width:760px;margin-bottom:28px;opacity:0.95;}
.btn{display:inline-block;margin:8px 10px;padding:14px 32px;border-radius:30px;font-weight:600;transition:0.25s;text-decoration:none;}
.btn-main{background:var(--green);color:#fff;}
.btn-main:hover{background:#244a30;}
.btn-outline{border:2px solid #fff;color:#fff;}
.btn-outline:hover{background:#fff;color:#000;}

/* SECTIONS */
.section{max-width:1200px;margin:90px auto;padding:0 30px;}
.section h2{font-size:2.4rem;color:var(--green);margin-bottom:12px;}
.section p{max-width:850px;font-size:1.05rem;}

/* ABOUT SECTION CENTRED */	
.about-section {
  text-align: left;            /* Tekst links uitlijnen */
  max-width: 1000px;           /* Optioneel: breedte van de tekstblok */
  margin:0 auto 50px auto;     /* Blok centreren op pagina zonder de tekst te centreren */
  padding: 40px 20px;          /* Optioneel: ruimte rondom de tekst */
}	

/* GRID / CARDS */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:34px;}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 20px 45px rgba(0,0,0,0.08);transition:0.3s;cursor:pointer;}
.card:hover{transform:translateY(-8px);}
.card img{width:100%;height:240px;object-fit:cover;}
.card div{padding:18px 20px;font-weight:600;font-size:1.1rem;}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:none;justify-content:center;align-items:center;z-index:2000;}
.lightbox img{max-width:90%;max-height:85%;border-radius:12px;}
.lightbox.active{display:flex;}

/* EXPEDITION */
.expedition {
  background: linear-gradient(135deg, var(--dark), var(--green));
  color: #fff;
  padding: 80px 36px;
  border-radius: 26px;
  margin: 60px auto;      /* centreren */
  max-width: 1100px;      /* maximale breedte */
  width: 100%;            /* responsive */
}

.expedition h2 {
  color: #fff;
}

.expedition p {
  max-width: 720px;       /* beperk tekstbreedte voor betere leesbaarheid */
}
	
/* PROMO 1000 */
.promo-1000 {
  background: linear-gradient(135deg, var(--dark), var(--green));
  color: #fff;
  padding: 20px 36px;
  border-radius: 26px;
  margin: 60px auto;      /* centreren */
  max-width: 900px;       /* maximale breedte */
  width: 100%;            /* responsive */
}

.expedition h2 {
  color: #fff;
}

.expedition p {
  max-width: 800px;       /* beperk tekstbreedte voor betere leesbaarheid */
}

/* PROMOTIE / ADVERTENTIE SECTION */
.promo-100 {
  background: linear-gradient(135deg, #f5f6f3, #e2e2e2);
  padding: 60px 30px;
  border-radius: 20px;
  max-width: 1200px;
  margin: 50px auto;
  text-align: center;
}

.promo h2 {
  color: var(--green);
  margin-bottom: 20px;
}

.promo p {
  max-width: 700px;
  margin: 0 auto 30px auto;
  font-size: 1.05rem;
  color: var(--text);
}

.promo .grid .card div a {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  background: var(--green);
  color: #fff;
  transition: 0.25s;
}

.promo .grid .card div a:hover {
  background: #244a30;
}
	

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:30px;}
.blog-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 16px 36px rgba(0,0,0,0.07);transition:0.25s;}
.blog-card:hover{transform:translateY(-6px);}
.blog-card img{width:100%;height:200px;object-fit:cover;}
.blog-card div{padding:16px 18px;font-weight:600;}

/* SOCIAL */
.social{margin-top:20px;}
.social a{color:var(--green);font-size:26px;margin-right:18px;transition:0.2s;}
.social a:hover{color:var(--gold);}

/* FOOTER */
footer {
  background: var(--dark);   /* donker achtergrond */
  color: #fff;               /* tekstkleur */
  text-align: center;
  padding: 45px 20px;        /* ruimte boven/onder */
  margin-top: 100px;
  font-size: 0.9em;
  letter-spacing: 0.4px;
}

footer a {
  color: #007acc;            /* linkkleur */
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

	
/* COOKIE BANNER STYLING */
.cookie-banner {
  position: fixed;
  bottom: 20px;               /* iets boven de onderkant */
  left: 50%;
  transform: translateX(-50%);
  max-width: 1000px;           /* smaller dan 100% */
  width: 90%;                  /* responsive */
  background: var(--dark);
  color: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2000;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.cookie-banner button {
  background: var(--green);
  border: none;
  color: #fff;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.cookie-banner button:hover {
  background: #244a30;
}

.cookie-banner span {
  flex: 1;
  font-size: 0.95rem;
  margin-right: 12px;
}
	

/* SCROLL ANIMATION */
.fade{opacity:0;transform:translateY(30px);transition:1s;}
.fade.show{opacity:1;transform:none;}

/* RESPONSIVE */
@media(max-width:768px){
  .hero h1{font-size:2.2rem;}
  .hero p{font-size:1.1rem;}
  nav{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:rgba(0,0,0,0.95);padding:20px;}
  nav.active{display:flex;}
  nav a{margin:12px 0;font-size:18px;text-align:center;}
  .hamburger{display:flex;}
}

/* ===============================
   PRIJZEN WEDDING + SHOOTING PAGINA
================================ */
.pricing {
  padding: 40px 20px 120px 20px;
  background: var(--light);
  text-align: left; /* alles links uitlijnen */
}

.pricing .container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

.pricing h1,
.pricing-sub,
.pricing-note,
.pricing-info {
  text-align: left;
}

/* PRIJS LIJST */
.price-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* PRIJS RIJ */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #e2e2e2;
}

/* LINKERKANT TEKST */
.price-row > div:first-child {
  max-width: 75%;
}

.price-row h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 500;
}

.price-row p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

/* RECHTERKANT PRIJS */
.price-row .price {
  font-size: 16px;
  font-weight: 600;
  color: var(--green);
  text-align: right;
  min-width: 90px;
}

/* HIGHLIGHT */
.price-row.highlight h3,
.price-row.highlight .price {
  font-weight: 700;
}

/* INFO */
.pricing-note,
.pricing-info {
  margin-top: 40px;
  text-align: left;
  color: #555;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .price-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .price-row .price {
    margin-top: 5px;
    text-align: left;
  }
}