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

/* ===================== */
/* ALGEMENE STIJLING */
/* ===================== */

html {
  font-family: 'Figtree', sans-serif;
}

body {
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Figtree', sans-serif;
}

/* ===================== */
/* HERO */
/* ===================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* Hero moet het volledige scherm vullen */
  background-image: url("images/rotterdam2-1694.jpg");
  background-size: cover; /* Zorg ervoor dat de afbeelding niet groter wordt dan de container */
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-x: hidden; /* Voorkom horizontale scrollen door achtergrondafbeelding */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.hero-content {
  position: relative;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem;
  transform: translateY(10vh);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

.hero-logo {
  width: clamp(150px, 20vw, 360px);
  height: auto;
}

.hero-content h1 {
  font-size: clamp(1.6rem, 2vw, 2.3rem);
  font-weight: 1000;
  letter-spacing: 0.03em;
}

.hero-intro {
  font-size: clamp(0.8rem, 1vw, 1.1rem);
  max-width: 650px;
  opacity: 0.95;
}

/* ===================== */
/* DIVIDERS */
/* ===================== */

.section-divider,
.section-divider2,
.section-divider3,
.section-divider4,
.section-divider5 {
  width: 100vw;
  height: clamp(80px, 8vw, 140px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.section-divider {
  background-image: url("images/Achtergrond.png");
  margin-top: -60px;
  z-index: 3;
}

.section-divider2 {
  background-image: url("images/Achtergrond2.png");
  margin-bottom: 60px;
  z-index: 3;
}

.section-divider3 {
  background-image: url("images/Achtergrond 3.png");
  margin-top: 60px;
  z-index: 3;
}

.section-divider4 {
  background-image: url("images/Achtergrond 4.png");
  margin-top: -200px;
  z-index: 0;
}

.section-divider5 {
  background-image: url("images/Achtergrond 5.png");
  margin-top: -200px;
  z-index: 0;
}



/* ===================== */
/* Navigatiebalk Styling */
/* ===================== */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  background-color: #29614D; /* Achtergrondkleur van de navigatiebalk */
  color: white;
  position: fixed;
  top: -100px; /* Begin buiten het zicht (boven het scherm) */
  left: 0;
  right: 0;
  z-index: 10; /* Zorg ervoor dat de navigatie altijd boven andere secties komt */
  transition: top 0.3s ease; /* Zorg voor een soepele overgang wanneer de navigatie zichtbaar wordt */
}

/* Zorg ervoor dat het logo een constante hoogte heeft */
.navbar-logo .logo {
  height: 50px;
}

.navbar-links {
  display: flex;
  gap: 30px;
  list-style-type: none;
}

.navbar-links li {
  font-size: 1rem;
}

.navbar-links a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s ease;
}

.navbar-links a:hover {
  color: #95D4BA;
}

/* Zorg ervoor dat de navigatie goed reageert op mobiele schermen */
@media (max-width: 768px) {
  .navbar {
    padding: 20px 10px;
  }

  .navbar-links {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .navbar-logo .logo {
    height: 40px;
  }
}



/* ===================== */
/* MAIN CONTENT */
/* ===================== */

main {
  background: white;
  position: relative;
  z-index: 2;
}

/* ===================== */
/* ONTWERPVRAAG */
/* ===================== */

.ontwerpvraag {
  position: relative;
  z-index: 5;

  /* FULL WIDTH */
  width: 100vw;
  margin-left: calc(-50vw + 50%);

  /* ACHTERGROND */
  background: #95D4BA;

  /* OVERLAP MET DIVIDERS */
  margin-top: -120px;
  margin-bottom: -120px;

  /* SPACING */
  padding: clamp(3rem, 6vw, 6rem) 1.5rem;

  /* TEKST */
  color: #fff;
}

.ontwerpvraag-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.ontwerpvraag-inner h1 {
  margin-bottom: 1rem;
}

.ontwerpvraag-inner p {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.6;
}

/* ===================== */
/* ONTWERPOPGAVE */
/* ===================== */

.design-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}

.design-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 20px;
}

.design-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.2;
  font-size: small;
}

.design-text h3 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.design-text h2 {
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  color: #000;
  opacity: 1;
  margin-bottom: 0.5rem;
}

.design-text ul {
  margin-left: 1rem;
  margin-top: 0.5rem;
}

.design-text li {
  margin-bottom: 4px;
  line-height: 1.4;
  font-size: small;
}

/* ===================== */
/* BUTTON STYLING */
/* ===================== */

.persona-button {
  display: inline-block;
  width: fit-content;
  background-color: #95D4BA;
  color: #ffffff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 999px;
}

.persona-button:hover {
  background-color: #3F594E;
}

.sprint-button {
  display: inline-block;
  width: fit-content;
  background-color: #95D4BA;
  color: #ffffff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 999px;
}

.sprint-button:hover {
  background-color: #3F594E;
}

.sprint-html-button {
  display: inline-block;
  width: fit-content;
  background-color: #29614D;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 999px;
}

.sprint-html-button:hover {
  background-color: #18382D;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media (max-width: 800px) {
  .design-grid {
    grid-template-columns: 1fr;
  }

  .criteria-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .task-container {
    flex-direction: column;
    gap: 40px;
  }

  .task-left,
  .task-right {
    width: 100%;
  }

  .task-header p:nth-child(2) {
    font-size: 32px;
  }
}

/* ===================== */
/* HERO */
/* ===================== */

.hero{
position:relative;
width:100%;
height:100vh;

background-image:url("images/rotterdam2-1694.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.35);
}

.hero-content{
position:relative;
color:white;

display:flex;
flex-direction:column;
align-items:center;

gap:0.8rem;
padding:2rem;

transform:translateY(10vh);
text-shadow:0 4px 18px rgba(0,0,0,0.6);
}

.hero-logo{
width:clamp(150px,20vw,360px);
height:auto;
}

.hero-content h1{
font-size:clamp(1.6rem,2vw,2.3rem);
font-weight:1000;
letter-spacing:0.03em;
}

.hero-intro{
font-size:clamp(0.8rem,1vw,1.1rem);
max-width:650px;
opacity:0.95;
}

/* ===================== */
/* DIVIDERS */
/* ===================== */

.section-divider,
.section-divider2,
.section-divider3,
.section-divider4,
.section-divider5
{
width:100vw;
height:clamp(80px,8vw,140px);

background-size:cover;
background-position:center;
background-repeat:no-repeat;

position:relative;
}

.section-divider{
background-image:url("images/Achtergrond.png");
margin-top:-60px;
z-index:3;
}

.section-divider2{
background-image:url("images/Achtergrond2.png");
margin-bottom: 60px;
z-index:3;
}

.section-divider3{
background-image:url("images/Achtergrond 3.png");
margin-top: 60px;
z-index:3;
}

.section-divider4{
background-image:url("images/Achtergrond 4.png");
margin-top: -200px;
z-index:0;
}

.section-divider5{
background-image:url("images/Achtergrond 5.png");
margin-top: 5px;
z-index:0;
}

/* ===================== */
/* MAIN */
/* ===================== */

main{
background:white;
position:relative;
z-index:2;
}

/* ===================== */
/* SECTION BASIS */
/* ===================== */

section{
padding:clamp(2rem,6vw,6rem) 1.5rem;
max-width:1200px;
margin:0 auto;
}

/* ===================== */
/* ONTWERPOPGAVE */
/* ===================== */

.design-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.5rem 2rem;
}

.design-grid img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
border-radius:20px;
}

.design-text{
display:flex;
flex-direction:column;
gap:0.2rem;
font-size:clamp(0.9rem,1vw,1rem);
line-height:1.2;
font-size: small;
}

.design-text h3{
font-size:0.85rem;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
opacity:0.6;
}

.design-text h2{
font-size:clamp(1.2rem,1.6vw,1.6rem);
color: #000;
opacity: 1;
margin-bottom:0.5rem;
}

.design-text ul{
margin-left:1rem;
margin-top:0.5rem;
}

.design-text li {
  margin-bottom: 4px;   /* minder ruimte tussen bullets */
  line-height: 1.4;     /* iets compacter */
  font-size: small;
}

/* ===================== */
/* ONTWERPVRAAG (FIX) */
/* ===================== */

.ontwerpvraag{
position:relative;
z-index:5;

/* FULL WIDTH */
width:100vw;
margin-left:calc(-50vw + 50%);

/* BELANGRIJK: override section beperking */
max-width:none;
margin-right:0;

/* ACHTERGROND */
background:#95D4BA;

/* OVERLAP MET DIVIDERS */
margin-top:-120px;
margin-bottom:-120px;

/* SPACING */
padding:clamp(3rem,6vw,6rem) 1.5rem;

/* TEKST */
color:#fff;
}

.ontwerpvraag-inner{
max-width:900px;
margin:0 auto;
text-align:center;
}

.ontwerpvraag-inner h1{
margin-bottom:1rem;
}

.ontwerpvraag-inner p{
font-size:clamp(1rem,1.2vw,1.2rem);
line-height:1.6;
}

/* ===================== */
/* CRITERIA */
/* ===================== */

.section-label{
font-size:0.8rem;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
opacity:0.6;
margin-bottom:0.3rem;
}

.section-title{
font-size:clamp(1.4rem,2vw,2rem);
margin-bottom:2rem;
}

.criteria-section h2 {
  color: #000;
  opacity: 1; /* belangrijk als er eerder opacity is gezet */
}

.criteria-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:2rem;
}

.criteria-item{
display:flex;
flex-direction:column;
gap:0.5rem;
border-bottom:1px solid rgba(0,0,0,0.06);
padding-bottom:0.8rem;
}

.criteria-item h4{
font-style:italic;
}

.criteria-item ul{
margin-left:1rem;
}

.criteria-item li{
font-size:clamp(0.85rem,0.95vw,0.95rem);
line-height:1.5;
font-size: small;
}

.persona-button {
  display: inline-block;
  width: fit-content;
  background-color: #95D4BA; /* knopkleur */
  color: #ffffff;            /* tekstkleur */
  padding: 10px 20px;
  text-decoration: none;     /* underline weg */
  border-radius: 999px
}

.persona-button:hover {
  background-color: #3F594E; /* andere kleur bij hover */
}

.sprint-button {
  display: inline-block;
  width: fit-content;
  background-color: #95D4BA; /* knopkleur */
  color: #ffffff;            /* tekstkleur */
  padding: 10px 20px;
  text-decoration: none;     /* underline weg */
  border-radius: 999px
}

.sprint-button:hover {
  background-color: #3F594E; /* andere kleur bij hover */
}


/* Algemene layout */
.scope-section {
  background-color: #fff;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Titels */
h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

h2 {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

h3 {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 10px;
}

/* Intro tekst */
.intro {
  max-width: 700px;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Kolommen */
.columns {
  display: flex;
  gap: 60px;
}

.column {
  flex: 1;
}

/* Lijsten */
ul {
  padding-left: 18px;
}

li {
  margin-bottom: 8px;
  line-height: 1.5;
}
/* ===================== */
/* Scope  */
/* ===================== */

.scope {
  display: flex;
  gap: 3rem;             /* ruimte tussen kolommen */
}

.scope-column {
  flex: 1;
}

.scope ol {
  padding-left: 1.2rem;  /* inspringen voor nummers */
}

.scope ul {
  padding-left: 1rem;    /* inspringen voor sublijsten */
  margin-top: 0.3rem;
  list-style-type: disc;   /* bolletjes */
  list-style-position: inside; /* bolletje binnen de tekstruimte */
  color: black; 
}

.scope li {
  margin-bottom: 0.6rem;
  line-height: 1.4;
  font-size: small;
}

/* Responsive onder elkaar op kleinere schermen */
@media (max-width: 600px) {
  .scope {
    flex-direction: column;
  }
}


/* ===== KEY INSIGHTS SECTION ===== */
.key-insights-section {
  position: relative;
  padding: 60px 20px;
  font-family: 'Figtree', sans-serif;
  padding-top: 100px;


  /* Achtergrondafbeelding */
  background-image: url('images/Key-insights.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1; 

  border-radius: 30px;   /* ronde hoeken */
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;  /* verticaal centreren */
  align-items: center;      /* horizontaal centreren */
  text-align: center;       /* tekst gecentreerd */
}

/* Content boven de achtergrond */
.key-insights-content {
  position: relative;
  z-index: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;   /* kaarten horizontaal centreren */
}

/* Titel */
.key-insights-content h2 {
  font-size: 2rem;
  margin-bottom: 50px;
  color: #fff;
}

/* Kaarten container */
.cards-container {
  display: flex;
  justify-content: center; /* horizontaal centreren */
  gap: 2rem;
  flex-wrap: wrap;
}

/* Kaarten basis */
.card {
  width: 80%; /* vult 80% van de container */
  max-width: 280px;
  padding: 30px; 
  background-color: #fff;
  width: 250px;
  padding: 20px;
  border-radius: 20px;
  color: black;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-align: left;      /* tekst links uitlijnen binnen kaart */
  cursor: default;
}

/* Hover effect: kleur verandert en lichte lift */
.card:hover {
  background-color: #29614D;
  transform: translateY(-5px);
  color: #fff;
}

/* Kaart tekst */
.card h3 {
  margin: 0 0 10px 0;
  font-family: 'Figtree', sans-serif;
  font-size: x-large;
}

.card p {
  margin: 0 0 10px 0;
  font-family: 'Figtree', sans-serif;
  font-size: x-small;
}

/* Responsive: kaarten onder elkaar op mobiel */
@media (max-width: 768px) {
  .cards-container {
    flex-direction: column;
    align-items: center;
  }
}

/* ===================== */
/* TEAM CALLING CARDS - 1 RIJ, ALLES ZICHTBAAR */
/* ===================== */

/* Container */
.team-section {
  width: 100%;
  max-width: 100vw;
  padding: 60px 0;
  box-sizing: border-box;
  text-align: center;
  font-family:'Figtree',sans-serif;
}

.team-section h2{
  font-size: x-large;
}

/* SLIDER - geen wrap, alles op één rij */
.team-slider {
  display: flex;
  justify-content: center;   /* horizontaal centreren */
  align-items: flex-start;
  gap: 15px;                 /* kleine ruimte tussen kaarten */
  overflow: visible;          /* geen scroll */
  padding: 0;
  margin: 0 auto;
  flex-wrap: nowrap;          /* alles op één regel houden */
}

/* CALLING CARD */
.calling-card {
  flex: 0 0 auto;
  width: 200px;               /* iets kleiner zodat 5 naast elkaar passen */
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.calling-card p, h2{
  color: black;
}

.calling-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  z-index: 10;
}

/* CALLING CARD CONTENT */
.calling-card-content {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;
}

/* NAAM */
.calling-card-content .name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
  text-align: center;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.2em;
  min-height: 40px;
}

/* STUDIE EN STUDENTNUMMER */
.calling-card-content .study,
.calling-card-content .student-id {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 2px;
  text-align: center;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.2em;
}

.calling-card-content .student-id {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 15px;
}

/* FOTO */
.calling-card-content .image-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 200px;
  overflow: visible;
  width: 100%;
}

.calling-card-content .image-wrapper img {
  height: 100%;
  width: auto;
  object-fit: contain;
}








/* ===================== */
/* ROADMAP STYLING */
/* ===================== */

.roadmap {
  background-color: #D6CDA1; /* Achtergrondkleur */
  padding: 40px 20px;
  width: 100%; /* Zorg ervoor dat de roadmap altijd binnen de breedte van de container blijft */
  box-sizing: border-box; /* Zorg ervoor dat padding en margin geen overflow veroorzaken */
  overflow-x: hidden; /* Voorkom horizontale scrollen */
}

.roadmap-header h2 {
  text-align: left;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20px;
}

/* Roadmap container */
.roadmap-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  align-items: flex-start;
  margin-top: 30px;
  padding-left: 20px;
}

/* Roadmap item styling (bolletjes en tekst) */
.roadmap-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

/* Left section - bolletjes en lijn */
.roadmap-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-right: 15px;
}

/* Nieuwe container voor de bolletjes en lijn */
.roadmap-bullet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Bolletjes - vaste grootte, altijd rond */
.roadmap-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%; /* zorgt voor een perfecte ronde bol */
  background-color: #ffffff;
  color: #111;
  margin-bottom: 0; /* Geen extra marge onder de bolletjes */
  border: 2px solid #ffffff;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Bolletje ingevuld voor voltooide sprints */
.completed {
  background-color: #fff; /* groen voor voltooid */
  border: none; /* geen rand */
}

/* Bolletje open voor toekomstige sprints */
.upcoming {
  background-color: transparent;
  border: 2px solid #ffffff; /* wit randje */
}

/* Lijn tussen bolletjes */
.roadmap-item:not(:last-child) .roadmap-bullet .roadmap-line {
  content: "";
  position: absolute;
  top: 50%; /* Lijn komt precies in het midden van de bolletjes */
  left: 14px;
  width: 2px;
  height: 100%; /* Zorgt ervoor dat de lijn tussen de bolletjes door gaat */
  background-color: #ffffff;
  z-index: 0;
  transform: translateY(-50%); /* Corrigeert de lijn zodat hij door de bolletjes gaat */
}

/* Nummer naast bolletjes */
.sprint-number {
  font-size: 20px;
  color: #ffffff;
  z-index: 2;
  margin-top: 0px; /* Zorgt ervoor dat het nummer naast de bol staat */
  display: inline-block;
}

/* Roadmap tekst styling */
.roadmap-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px; /* Ruimte om de tekst iets lager te plaatsen */
}

.roadmap-text h1 {
  margin-top: -5px;
  color: #ffffff;
  font-size: 16px;
}

.roadmap-text h2 {
  margin-top: 5px;
  color: #ffffff;
  font-size: 16px;
}

.roadmap-text h3 {
  margin: 0;
  color: #ffffff;
  font-size: x-large;
  font-weight: bold;
}

.roadmap-text li {
  margin: 0;
  color: #ffffff;
  font-size: small;
}

.roadmap-text p {
  margin: 5px 0;
  color: #ffffff;
  font-size: 16px;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media (max-width: 800px) {
  .roadmap-container {
    padding-left: 40px;
    flex-direction: column;
    gap: 30px;
  }

  .roadmap-item .roadmap-text p {
    font-size: 14px;
  }

  .roadmap-text h3 {
    font-size: 16px;
  }

  .roadmap-item .roadmap-circle {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }

  .roadmap-item .sprint-number {
    font-size: 14px;
  }
}







/* ===================== */
/* PROGRESS SECTION */
/* ===================== */

.progress-section {
  position: relative;
  z-index: 0;

  /* FULL WIDTH */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  max-width: none;

  /* ACHTERGROND */
  background: #D6CDA1;

  /* SPACING */
  padding: clamp(5rem, 8vw, 8rem) 1.5rem;

  color: #fff;
}

/* ===================== */
/* TOP DIVIDER */
/* ===================== */
.progress-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  height: clamp(80px, 8vw, 140px);

  background-image: url("images/Achtergrond 4.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translateY(-100%); /* boven de sectie */
}

/* ===================== */
/* BOTTOM DIVIDER */
/* ===================== */
.progress-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  height: clamp(80px, 8vw, 140px);

  background-image: url("images/Achtergrond 4.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translateY(100%) rotate(180deg); /* onder + gespiegeld */
}

/* CONTENT VEILIG BOVEN DIVIDERS */
.progress-section > * {
  position: relative;
  z-index: 0;
}


/* ===================== */
/* TAKEN EN BACKLOG SECTIE */
/* ===================== */

.task-section {
  width: 100%;
  padding: 80px 20px;
}

/* Header (Taken, Backlog, One-Pager) */
.task-header {
  display: flex;
  flex-direction: column;  /* Zorgt ervoor dat de kopjes onder elkaar staan */
  align-items: left;
  margin-bottom: 40px;
}

.task-header p {
  font-weight: bold;
}

.task-header h1 {
  font-size: 40px;
  font-weight: bold;
  margin-top: -15px;
  margin-bottom: -20px;
}

/* ===================== */
/* TASKS LEFT & RIGHT SECTIONS */
/* ===================== */

.task-container {
  display: flex;
  gap: 30px;
}

/* LEFT: Alinea's met kopjes */
.task-left {
  flex: 1;
}

.task-left-item {
  margin-bottom: 20px; /* kleinere ruimte tussen kopjes en tekst */
}

.task-left-item p {
  margin: 0 0 5px 0;  /* Verklein de ruimte tussen kopje en tekst */
  line-height: 1.0;
  font-size: small;
  color: #fff;
}

.task-left-item p b {
  font-weight: bold; /* zorg ervoor dat de kopjes bold zijn */
}

/* RIGHT: Bullet points */
.task-right {
  flex: 1;
  padding-left: 100px;
}

.task-right p {
  font-weight: bold;
  margin-bottom: 3px;
}

.task-right ul {
  list-style-type: disc;
  margin: 0;
  padding-left: 20px;
}

.task-right li {
  font-size: small;
  margin-bottom: 3px;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media (max-width: 800px) {
  .task-container {
    flex-direction: column;
    gap: 40px;
  }

  .task-left,
  .task-right {
    width: 100%;
  }

  .task-header p:nth-child(2) {
    font-size: 32px; /* verklein de Backlog header op kleinere schermen */
  }
}

@media (max-width: 600px) {
  .task-header p {
    font-size: 18px; /* Verklein de header op mobiel */
  }

  .task-left-item p {
    font-size: 14px;
  }

  .task-right p {
    font-size: 20px;
  }
}



/* ===================== */
/* TEAM NORMEN & WAARDEN */
/* ===================== */

.team-values {
  width: 100%;
  padding: 80px 20px;
  background: #fff;
}

.team-values-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* LINKERKANT */
.team-values-left {
  flex: 1;
}

.team-values-left h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.team-values-left p {
  margin-bottom: 16px; /* nette witregel */
  line-height: 1.6;
  color: black;
}

/* RECHTERKANT */
.team-values-right {
  flex: 1;
  text-align: left;
  max-width: 500px; /* optioneel: betere leesbaarheid */
  font-size: 13px;
}

/* TITELS (Onze waarden / Onze normen) */
.team-values-right h3 {
  font-size: 22px;
  margin-bottom: 10px;
  margin-top: 30px;
}

.team-values-right h3:first-of-type {
  margin-top: 0;
}

/* ALINEA'S */
.team-values-right p {
  margin-bottom: 16px; /* ~1 witregel */
  line-height: 1.6;
  color: black;
}

/* LIJST (zwarte bullets i.p.v. cards) */
.team-values-right ul {
  margin: 16px 0 30px 20px; /* ruimte boven/onder + indent */
  padding: 0;
  list-style-type: disc; /* zwarte stip */
}

.team-values-right li {
  margin-bottom: 8px;
  color: #111;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media (max-width: 800px) {
  .team-values-container {
    flex-direction: column;
    gap: 30px;
  }

  .team-values-left,
  .team-values-right {
    width: 100%;
    max-width: 100%;
  }
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .team-slider {
    flex-wrap: wrap;  /* breek op smalle schermen */
  }
}

@media (max-width: 600px) {
  .calling-card {
    width: 160px;
  }
  .calling-card-content .name {
    font-size: 16px;
    min-height: 32px;
    line-height: 1.2em;
  }
  .calling-card-content .study {
    font-size: 13px;
  }
  .calling-card-content .student-id {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .calling-card-content .image-wrapper {
    height: 140px;
  }
}


/* ===================== */
/* FOOTER DIV */
/* ===================== */
.footer-div {
  background-color: #29614D;
  color: white;
  padding: 20px 0;
  text-align: center;
  width: 100%;
  z-index: 10; /* Zorg ervoor dat de footer boven andere inhoud blijft */
}

.footer-logo {
  max-width: 120px;  /* Pas de grootte van het logo aan */
  height: auto;
  margin-bottom: 10px;
}

.footer-content p {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0;
}

/* ===================== */
/* MOBILE */
/* ===================== */

@media (max-width:800px){

.design-grid{
grid-template-columns:1fr;
}

.criteria-grid{
grid-template-columns:1fr;
}

}



/* ================= */
/* Communicatie */
/* ================= */

/* Communicatieplanning sectie */
.communicatieplanning {
  padding: 40px 20px;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}

.communicatieplanning-title {
  font-size: 2.5rem;  /* Grootste tekst voor de titel */ 
  margin-bottom: 20px;
  text-align: left;
}

.communicatieplanning-content {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.left-column, .right-column {
  flex: 1;
}

.planning-list {
  margin-bottom: 20px; /* Ruimte tussen lijstblokken */
}

.planning-list .list-title {
  font-size: 1.2rem; /* Kleinere tekst voor de kop van de ul/ol */
  color: black;
  margin-bottom: 5px; /* Verminder de marge tussen titel en lijstitems */
  font-weight: bold;
}

.planning-list ul, .planning-list ol {
  padding-left: 20px; /* Ruimte voor de bullets of nummers aan de linkerzijde */
}

.planning-list ul {
  list-style-type: disc; /* Bullet points voor de unordered list */
}

.planning-list ol {
  list-style-type: decimal; /* Nummers voor de ordered list */
}

.planning-list li {
  font-size: .8rem;
  line-height: 1.4; /* Minder ruimte tussen items */
  color: black;
  margin-bottom: 4px; /* Verklein de ruimte tussen lijstitems */
}

/* Zorg ervoor dat de inhoud netjes onder elkaar staat op kleinere schermen */
@media (max-width: 768px) {
  .communicatieplanning-content {
    flex-direction: column;
  }

  .left-column, .right-column {
    flex: none;
    width: 100%;
  }
}






/* Algemene fix voor horizontale overflow */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%; /* Zorg ervoor dat het hele document de hoogte van de viewport gebruikt */
  overflow-x: hidden; /* Voorkom horizontale scrollen */
}

body {
  background-color: #fff; /* Dit zorgt voor een consistente achtergrondkleur voor de pagina */
}


/* ===================== */
/* Stakeholders */
/* ===================== */

.stakeholders {
  position: relative;
  z-index: 5;

  /* FULL WIDTH FIX */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  max-width: none;

  background-color: #D6CDA1;

  padding: clamp(3rem, 6vw, 6rem) 1.5rem;

  margin-bottom: -10px;
}


/* Titel */
.stakeholders-title {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: white;
  margin-left: 40px;
}

/* Cards container */
.stakeholder-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
  gap: 30px;
  justify-content: center;
}

/* Card */
.stakeholder-card {
  background-color: #ffffff;
  padding: 25px;
  width: 250px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: relative;
  flex: 0 1 250px;

  display: flex;
  flex-direction: column;

  min-height: 340px; /* 🔥 KEY: niet height maar MIN-height */
}

/* Titel (naam) blijft groot */
.stakeholder-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 25px;
}

/* Lijst container */
.stakeholder-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: small;
}

/* List items */
.stakeholder-card li {
  font-size: x-small;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Label rechtsboven */
.stakeholder-type {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.75rem;
  color: #888;
}

/* ===================== */
/* 🔥 PRIMAIRE KAART FIX */
/* ===================== */

.stakeholder-card.primary {
  background-color: #29614D; /* jouw gewenste kleur */
  color: #ffffff;
}

/* Alle tekst wit binnen primaire kaart */
.stakeholder-card.primary .stakeholder-name,
.stakeholder-card.primary li {
  color: #ffffff;
}

/* Label 'Primaire' grijs */
.stakeholder-card.primary .stakeholder-type {
  color: #cccccc;
}

/* Secundair */
.stakeholder-card.secondary {
  background-color: #ffffff;
}

/* Tertiair */
.stakeholder-card.tertiary {
  background-color: #f7f7f7;
}

/* Responsive */
@media (max-width: 768px) {
  .stakeholder-cards {
    flex-direction: column;
    align-items: center;
  }
}