/* Basis instellingen Basis instellingen  Basis instellingen Basis instellingen Basis instellingen Basis instellingen*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Signika:wght@400;600;700&display=swap');

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
  line-height: 1.5em;
  background-color: #13242F; /* donkere achtergrond */
}

.section-wrapper {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

p {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
    word-spacing: 0.16em;
    line-height: 1.5em; 
    letter-spacing: 0.12em;
    font-size: 16px;
    font-weight: lighter;
    color: #D4E3ED;
  }
  

/* Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie */


nav {
  position: sticky;
  top: 0;
  background-color: #13242E;
  color: white;
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 20px;
  padding: 0 1em;
  z-index:  50;
}

.highlight {
  color: #CA7A44; 
  font-weight: 500;
  font-size: 16px;
}

#title {
  flex: 1; 
  color: #CA7A44;
  font-family: 'Signika', sans-serif;
  word-spacing: 0.16em;
  line-height: 1.5em; 
  letter-spacing: 0.12em;
  font-weight: 400;
  font-size: 1.2em;
  font-weight: bold;
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2em;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: white;
  padding: 0.5em 1em;
  transition: background-color 0.3s, color 0.3s;
}

.nav-link:hover,
.nav-link.active {
  background-color: #CA7A44;
  color: black;
  border-radius: 5px;
}

@media (max-width: 768px) {
  nav {
    flex-direction: column; /* Flex richting naar kolom voor mobiel */
    align-items: flex-start; /* Zorg ervoor dat de titel en nav-links aan de linkerkant uitgelijnd zijn */
    padding: 15px 10px;
    margin-bottom: 10px; /* Ruimte onder de nav */
  }

  #title {
    font-size: 1.5rem; /* Verklein de titelgrootte voor mobiele apparaten */
    margin-bottom: 15px; /* Voeg marge toe aan de onderkant van de titel voor meer ruimte */
  }

  .nav-links {
    width: 90%; /* Zorg ervoor dat de nav-links de volle breedte innemen */
    display: flex;
    justify-content:center;/* Zorg ervoor dat de links goed verdeeld zijn */
    padding-top: 20px; /* Voeg wat ruimte boven de nav-links toe */
    padding-bottom: 5px;
  }
  

  .nav-link {
    font-size: 1rem; /* Verklein de tekstgrootte van de navigatielinks voor mobiele apparaten */
  }
}

/* Hero sectie Hero sectie Hero sectie Hero sectie Hero sectie Hero sectie Hero sectie Hero sectie Hero sectie */
#hero {
  background: url("images/heropage-achtergrond.svg") no-repeat center top;
  color: #D5E3EE;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  padding: 0 5vw;
}


.hero-content {
  display: flex;
  justify-content:center;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  gap: 4rem;
  flex-wrap: wrap;
}

.hero-text h1 {
  flex: 1 1 60%;
  max-width: 700px; 
  color: #13242E;
  font-size: 36px;
  font-family: 'Signika', sans-serif;
  word-spacing: 0.16em;
  line-height: 1.5em; 
  letter-spacing: 0.12em;
  font-weight: 700;

}

.hero-text b {
  font-weight: 700;
  color: #D4E3ED;
}

.hero-image {
  flex: 1 1 35%;
  display: flex;
  justify-content: flex-end;
}

.hero-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 2rem;
  box-shadow: 10px 10px 0px #13242E;
}

@media (min-width: 1440px) {
  #hero {
    padding: 0 10vw;
  }

  .hero-content {
    gap: 4rem;
  }

  .hero-image img {
    max-width: 450px;
  }
}

@media (max-width: 768px) {

#hero {
  background-color: #AE5B8D;
  background-image: none;
}

.hero-content {
  flex-direction: column; /* Stack the content vertically */
  text-align: center;  /* Center align the text */
}

  .hero-image {
    flex: 1 1 100%;  /* Hero image takes full width on smaller screens */
    justify-content: center;
  }

}

/* Intro sectie Intro sectie Intro sectie Intro sectie Intro sectie Intro sectie Intro sectie Intro sectie Intro sectie Intro sectie */

#intro {
  background-color: #13242E;
  background: url("images/intro-achtergrond.svg") no-repeat center top;
  color: #D5E3EE;
  padding: 60px 20px;
}

  .custom-bullet::marker {
    color: #AE5B8D;
  }

  .kwaliteiten {
    word-spacing: 0.16em;
    line-height: 1.5em; 
    letter-spacing: 0.12em;
    font-size: 16px;
    font-weight: 400;
    color: #13242F;
  }

.intro-text {
  flex: 1 1 40%;
}


.intro-video {
  flex: 1 1 55%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-video video {
  width: 100%;
  max-width: 880px;
  border-radius: 10px;
  margin-top: 25px;
}

h2 {
  color: #D5E3EE;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
  padding-top: 10px;
  font-size: 30px;
  font-weight: 600;
  font-family: 'Signika', sans-serif;
  word-spacing: 0.16em;
  letter-spacing: 0.12em;
  line-height: 1.5em; 
}

#intro ul {
  padding-left: 1.5em;
}


.motto {
  font-size: 24px;
  color: #D5E3EE;
  text-align: center;
}



/* Cases sectie Cases sectie Cases sectie Cases sectie Cases sectie Cases sectie Cases sectie Cases sectie Cases sectie */
#cases {
  background-color: #13242E;
  color: #D5E3EE;
  padding: 60px 20px;
  background: url("images/cases-achtergrond.svg") no-repeat center top;
}

.cases-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; 
}

.cases-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding-top: 20px;
}

.case-box {
  display: block;
  text-decoration: none;
  background-color: #D4E3ED;
  border-radius: 12px;
  padding: 20px;
  max-width: 320px;
  text-align: center;
  transition: transform 0.3s ease, font-weight 0.3s ease;
  color: inherit;
  
}

.case-box:hover {
  transform: scale(1.03);
  box-shadow: 10px 10px 0px #AE5B8D;
}

.case-box:hover p {
  font-weight: bold;
}

.case-box img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.case-box p {
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0;
  color: #13242F;
  word-spacing: 0.16em;
  line-height: 1.5em; 
  letter-spacing: 0.12em;
  font-weight: 400;
}


/* About me About me About me About me About me About me About me About me About me About me About me About me About me About me  */
#about-me {
  background-color: #13242F;
  background: url("images/aboutme-achtergrond.svg") no-repeat center top;
  color: #D4E3ED;
  padding: 60px 20px;
}

.text-column {
  flex: 1 1 400px;
  max-width: 600px;
}

.extra-photos {
  display: grid;
  gap: 20px;
  flex: 1 1 400px;
  max-width: 880px;
  justify-content: center;
  grid-template-columns: repeat(2, auto);
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.extra-photos img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  margin-top: 25px;
}



/* Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact */
#contact {
  background-size: cover;
  background-color: #D4E3ED;
  padding-top: 20px;
  padding-bottom: 60px;
}

#contact h2 {
  font-size: 36px; 
  color: #13242E; 
  font-weight: bold;
  margin-bottom: 20px;
  word-spacing: 0.16em;
  letter-spacing: 0.12em;
}

#contact h3 {
  font-size: 24px; 
  color: #13242E; 
  font-weight: bold;
  margin-bottom: 20px;
  word-spacing: 0.16em;
  letter-spacing: 0.12em;
  line-height: 1.5em; 
}

.contact-section {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px; /* voor veilige ruimte op mobiel */
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 70px;
  margin-top: 50px;
  align-items: center; 
}

.contact-buttons a img {
 height:100px; 
width: auto;
  transition: transform 0.3s ease;
}

.contact-buttons a img:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  #contact h2,
  #contact h3 {
    font-size: 24px;
    word-spacing: normal;
    letter-spacing: normal;
  }

  .contact-buttons {
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
  }

  .contact-buttons a img {
    height: 60px;
    width: auto;
  }

  #contact {
    padding-top: 15px;
    padding-bottom: 40px;
  }
}


/* Kibblcare Case Styling Kibblcare Case Styling Kibblcare Case Styling Kibblcare Case Styling Kibblcare Case Styling Kibblcare Case Styling*/

/* Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case  */

.kibblecare-header {
  text-align: center;
  font-family: 'Signika', sans-serif;
  background: url("images/kibblecaretitel-achtergrond.svg") no-repeat center top;
  background-size: cover;
  background-color: #13242F;
  padding: 60px 20px;
}

.kibblecare-header h1 {
  color: #13242E;
  font-size: 34px;
  line-height: 1.8em; 
  font-family: 'Signika', sans-serif;
  word-spacing: 0.16em;
  letter-spacing: 0.12em;
  font-weight: 700;
  width: 800px;
  margin: 0 auto;
  max-width: 100%; /* Voorkomt dat de h1 te groot wordt voor kleinere schermen */

}

@media screen and (max-width: 768px) {
  .kibblecare-header, .oogstmaatje-header, .artinfocus-header h1 {
    font-size: 24px;  /* Kleinere font-grootte voor mobiel */
    width: 90%;  /* Zorg ervoor dat de tekst binnen het scherm past */
  }
}

/* Case Info */
.case-container {
  width: 90%;
  max-width: 900px;
  margin: 60px auto;
  font-family: 'Poppins', sans-serif;
}

.case-info-bar {
  background-color: #BF8CC5;
  color: #13242F;
  padding: 15px 25px;
  border-radius: 10px;
  font-size: 20px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: left;
  margin-bottom: 40px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
}

.case-info-bar li {
  margin: 0 10px;
}

.intro-section {
  margin-bottom: 20px; 
}


/* Eindresultaat sectie Eindresultaat sectie Eindresultaat sectie Eindresultaat sectie Eindresultaat sectie Eindresultaat sectie Eindresultaat sectie */
.projects-section {
  background-color: #13242E;
  padding: 40px 40px 10px 40px;
  text-align: center;
  background: url("images/kibblecare-achtergrond.svg") no-repeat center top;
}

.project-group {
  flex: 1;
  min-width: 300px;
  max-width: 1000px;
}

.center-group {
  margin: 0 auto;
  max-width: 700px;
}

.image-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.image-box {
  overflow: visible;
  position: relative;
  transition: transform 1s ease;
}

.image-box img {
  width: 250px;
  height: auto;
  transition: transform 0.5s ease;
  display: block;
}

.image-box img:hover {
  transform: scale(1.5);
  z-index: 10;
  position: relative;
}

.group-description {
  font-size: 0.95em;
  color: #333;
  margin-bottom: 24px;
}

h3 {
  font-weight: 500;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 12px;
  text-align: center;
  word-spacing: 0.16em;
  line-height: 1.5em; 
  letter-spacing: 0.12em;
  color:#CA7A44;
}

.end-product-section,
.iteration-section,
.conclusion-section {
  margin-bottom: 50px;
}

/* Iteraties Iteraties Iteraties Iteraties Iteraties Iteraties Iteraties Iteraties Iteraties Iteraties Iteraties Iteraties */

.iteration-section:first-of-type h2 {
  margin-top: 20px; /* was 60px */
}

.iteration-text {
  font-weight: lighter;
  font-size: 16px;
  color: #D4E3ED !important;
}


.image-gallery,
.iteration-gallery {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.image-gallery img,
.iteration-gallery img {
  margin-top: 15px;
  width: 750px;
  border-radius: 8px;
}

.iteration-gallery figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 750px;
  margin: 0;
  text-align: center;
}

.iteration-gallery figcaption {
  font-size: 14px; 
  font-weight:300;
  margin-top: 8px;
  color: #D4E3ED;
  line-height: 1.4;
  word-spacing: 0.16em;
  line-height: 1.5em; 
  letter-spacing: 0.12em;
}


.iteration-gallery {
  display: block;
}

.iteration-gallery figure {
  width: 100%;
  max-width: 750px; /* Match your original max-width */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.iteration-gallery figcaption {
  margin-bottom: 20px; /* Add space after the caption */
}

/* Conclusie */
.conclusion-section {
  background-color: #BF8CC5;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 20px;
  box-sizing: border-box;
  max-width: 100%;
}

.conclusion-section h2 {
  color: #13242E;
  margin-bottom: 10px;
}

.conclusion-section p {
  color: #13242E;
  font-size: 1em;
  margin: 0;
  word-spacing: 0.16em;
  line-height: 1.5em; 
  letter-spacing: 0.12em;
  font-weight: 400;
  text-align: center;
}
.conclusion-container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

/* Responsiveness */
@media (max-width: 768px) {
  .image-gallery img,
  .iteration-gallery img {
    width: 90%;
  }
  .case-info-bar {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 768px) {
  nav {
    flex-direction: column;
    height: auto;
    gap: 0.5em;
    padding: 1em;
  }

  .hero-text {
    font-size: 1.5rem;
  }

  .intro-video video {
    width: 100%;
  }
}

/* Oogstmaatje styling Oogstmaatje styling Oogstmaatje styling Oogstmaatje styling Oogstmaatje styling Oogstmaatje styling Oogstmaatje styling */

/* Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case  */

.oogstmaatje-header {
  text-align: center;
  font-family: 'Signika', sans-serif;
  background: url("images/oogstmaatjetitel-achtergrond.svg") no-repeat center top;
  background-size: cover;
  background-color: #13242F;
  padding: 60px 20px;
}

.oogstmaatje-header h1 {
  color: #13242E;
  font-size: 34px;
  line-height: 1.8em; 
  font-family: 'Signika', sans-serif;
  word-spacing: 0.16em;
  letter-spacing: 0.12em;
  font-weight: 700;
  width: 800px;
  margin: 0 auto; /* ⬅️ Center it horizontally */
  max-width: 100%;
}

/* artinfocus styling  artinfocus styling  artinfocus styling  artinfocus styling  artinfocus styling  artinfocus styling  artinfocus styling */

/* Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case Kop van de case  */


.artinfocus-header {
  text-align: center;
  font-family: 'Signika', sans-serif;
  background: url("images/artinfocus-achtergrond.svg") no-repeat center top;
  background-size: cover;
  background-color: #13242F;
  padding: 60px 20px;
}

.artinfocus-header h1 {
  color: #13242E;
  font-size: 34px;
  line-height: 1.8em; 
  font-family: 'Signika', sans-serif;
  word-spacing: 0.16em;
  letter-spacing: 0.12em;
  font-weight: 700;
  width: 800px;
  margin: 0 auto; 
  max-width: 100%;
}

/* Color Theme Swatches in Hex */
.My-Color-Blind-Safe-Theme-1-hex { color: #BF8CC5; }
.My-Color-Blind-Safe-Theme-2-hex { color: #AE5B8D; }
.My-Color-Blind-Safe-Theme-3-hex { color: #CA7A44; }
.My-Color-Blind-Safe-Theme-4-hex { color: #D4E3ED; }
.My-Color-Blind-Safe-Theme-5-hex { color: #13242F; }