:root {
    /* Core units
     ================================================================= */
    --base-unit: 0.25rem;
    --base-half-unit: calc(var(--base-unit) / 2);
    /* Typography
    ================================================================= */
    /* Fonts */
    --font-family-primary: 'Montserrat', sans-serif;
    --font-family-secondary: 'Judson', serif;
    --font-base-unit: var(--base-unit);
    /* Font sizes - 4x4 grid */
    --font-size-12: calc(var(--font-base-unit) * 3);
    --font-size-16: calc(var(--font-base-unit) * 4);
    --font-size-20: calc(var(--font-base-unit) * 5);
    --font-size-24: calc(var(--font-base-unit) * 6);
    --font-size-32: calc(var(--font-base-unit) * 8);
    --font-size-40: calc(var(--font-base-unit) * 10);
    --font-size-48: calc(var(--font-base-unit) * 12);
    --font-size-56: calc(var(--font-base-unit) * 14);
    --font-size-64: calc(var(--font-base-unit) * 16);
    --font-size-72: calc(var(--font-base-unit) * 18);
    --line-height-base-unit: 1;
    /* Line heights */
    --line-height-small: calc(var(--line-height-base-unit) * 1.2);
    --line-height-medium: calc(var(--line-height-base-unit) * 1.8);
    --line-height-large: calc(var(--line-height-base-unit) * 2.2);
    /* Font weights */
    --font-weight-lighter: 100;
    --font-weight-light: 200;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --font-weight-bolder: 800;
    /* Space
     ================================================================= */
    --space-base-unit: var(--base-unit);
    /* Margin, Padding - 8x8 grid */
    --space-8: calc(var(--space-base-unit) * 2);
    --space-16: calc(var(--space-base-unit) * 4);
    --space-24: calc(var(--space-base-unit) * 6);
    --space-32: calc(var(--space-base-unit) * 8);
    --space-40: calc(var(--space-base-unit) * 10);
    --space-48: calc(var(--space-base-unit) * 12);
    --space-64: calc(var(--space-base-unit) * 16);
    /* Breakpoints
     ================================================================= */
    --breakpoint-small: 544px;
    --breakpoint-medium: 768px;
    --breakpoint-large: 1012px;
    /* Color
     ================================================================= */

    --color-background: #F9F5FF;

    --color-primary-lighter: #ECDCF3;
    --color-primary-light: #E2C8ED;
    --color-primary: #C397D6;
    --color-primary-dark: #B976D6;
    --color-primary-darker: #9953b7;

    --color-secondary-ligher: #DBEED3;
    --color-secondary-light: #B7DCA7;
    --color-secondary: #ABD699;
    --color-secondary-dark: #6EB84E;
    --color-secondary-darker: #4C8334;

    --color-gray-1: #FFFFFF;
    --color-gray-2: #EEEEEE;
    --color-gray-3: #D5D5D5;
    --color-gray-4: #BBBBBB;
    --color-gray-5: #A1A1A1;
    --color-gray-6: #888888;
    --color-gray-7: #6F6F6F;
    --color-gray-8: #555555;
    --color-gray-9: #3C3C3C;
    --color-gray-10: #222222;
    --color-black: #000000;
    /* Border
     ================================================================= */
    /* Border color */
    --border-color-primary-lighter: var(--color-primary-lighter);
    --border-color-primary-light: var(--color-primary-light);
    --border-color-primary: var(var(--color-primary));
    --border-color-primary-dark: var(var(--color-primary-dark));
    --border-color-primary-darker: var(--color-primary-darker);

    --border-color-lighter: var(--gray-2);
    --border-color-light: var(--gray-3);
    --border-color: var(--gray-5);
    --border-color-dark: var(--gray-7);
    --border-color-darker: var(--gray-9);
    /* Border radius */
    --border-radius-small: calc(var(--base-unit) * 1);
    --border-radius-medium: calc(var(--base-unit) * 3);
    --border-radius-large: calc(var(--base-unit) * 4);
    /* Transition
     ================================================================= */
    --transition-faster: 0.1s;
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.4s;
    --transition-slower: 0.5s;
}


* {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-16);
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body, html {
    overflow-x: hidden;
    background-color: var(--color-background);
  }

body {
    line-height: var(--line-height-medium);
}

h1, h2, h3 {
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-16);
}

h2{
    font-size: var(--font-size-32);
}

h3{
    font-size: var(--font-size-24);
}

a {
    color: var(--color-black);
    text-decoration: none;
}

ul {
    list-style-type: none;
}

.error {
    color: red;
    margin-bottom: 20px;
}

.honey {
    display: none;
}

/* Huisregels */
.huisregels h1 {
    font-size: var(--font-size-40);
}

.back-arrow {
    font-size: 14px;
}

@media (min-width: 1000px) {
    main.huisregels {
        border: 2px solid #9953b7;
        margin-right: 200px;
        margin-left: 200px;
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 20px;
    }
}

@media (min-width: 1200px) {
    main.huisregels {
        margin-right: 250px;
        margin-left: 250px;
    }
}




.main-container {
    margin: 0 auto;
    max-width: 80%;
  }
  
  section {
    margin: 0 auto;
    padding: var(--space-32);
    width: 65%;
    max-width: 70ch;
    position: relative;

  }  
  
  p {
    max-width: 65ch;
  }

.logo{
    width: 160px;
    height: auto;
    top: 15px;
    z-index: 90;
    transition: transform 0.4s ease, width 0.4s ease;
}

.logo.shrink {
    width: 110px;
    transform: scale(0.9);
  }



/* Hero */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    padding: 0 5%;
    max-width: none;
    width: 70%;
    }

    .hero .biggerH1 {
        font-size: var(--font-size-72);
        font-family: var(--font-family-secondary);
    }

    .hero-text {
    flex-basis: 70%;
    }

    .hero-text h1 {
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-small);
    overflow: visible;
    }

    .hero-text p {
    font-size: var(--font-size-16);
    margin-top: var(--space-24);
    max-width: 80%;
    }

    .hero-image {
    flex-basis: 30%;
    }

    .hero-image img {
    width: 110%;
    height: auto;
    }

    .image-border {
        display: inline-block;
        position: relative;
        left: 10%;
    }

    .image-border::before {
    position: absolute;
    top: -5%;
    left: 5%;
    width: 110%;
    height: 95%;
    border: 3px solid var(--color-primary);
    content: '';
    z-index: 1;
    }

    .image-border img {
        z-index: 2;
        position: relative;
    }







/* Contact */

.contact-field{
    height: 120vh;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-48);
    margin-bottom: var(--space-48);
    background-color: white;
    }
    .contact-field p, .contact-field a {
        text-align: center;
        display: block;
    }

.frosted-gradient {
    position: absolute;
    left: 0;
    top: 0;
    width: 14%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9); /* Change this line */
    backdrop-filter: blur(10px);
    z-index: 1;
}

.image-contact{
    width: 100%;
}

.image-contact-top{
    position: absolute;
    top: 0;
}

.image-contact-bottom{
    position: absolute;
    bottom: 0;
}


.contact-button-common {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-medium);
    color: white;
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-normal) ease;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    margin-top: var(--space-16);
}

.contact-button-contact-field {
    width: 14rem;
    height: 3.5rem;
    margin-top: 4rem;
    line-height: 3.5rem;
}
.contact-button-hero {
    position: relative;
    left: 50%;
    top: -35px;
    width: 14rem;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-weight-bolder);
    margin-top: -20px;
}

.contact-button-p {
    width: 10rem;
    height: 1.8rem;
    display: flex;
    justify-content: center;
    text-align: center;
}

.contact-button-common:hover {
    background-color: var(--color-gray-1);
    color: var(--color-primary-darker);
}

.contact-button-common a,
.contact-button-p a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

.contact-container{
    margin-top: var(--space-40);
}
    


    

/* Navigation */
.nav-banner {
    margin: 0 auto;
    position: left;
    width: 20%;
}

.mobile-navbar-button{
    display: none;
}

.primary-navigation {
    /* position: fixed;
    left: 0;
    height: 100%;
    width: 14%;
    padding: 1rem;
    overflow-y: auto;
    z-index: 9; */
    position: fixed;
    top: 0;
    left: 0;
    width: 18%;
    padding: 1rem;
    z-index: 9;
  
    /* Adjusted styles */
    height: auto; 
    max-height: 80vh; /* Let’s keep it from overflowing if content is long */
    /* overflow-y: auto; */
  
    /* Smooth transition for the slight upward shift */
    transition: transform 0.3s ease;
}






.nav-list {
    font-style: italic;
    font-weight: var(--font-weight-light);
    /* position: fixed; */
    top: 210px;
    
}
.nav-list a {
    display: block;
    text-decoration: none;
    margin-bottom: var(--space-8);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-16);
    color: var(--color-gray-6);
    transition: font-size 0.3s, color 0.3s; /* Update the transition property to use font-size */
  }
  
  .nav-list a.active {
    font-weight: var(--font-weight-normal);
    color: var(--color-primary-darker);
    font-size: calc(var(--font-size-16) * 1.1); /* Add this line to slightly increase the font size */
  }
  
    .nav-list a:hover{
        color: var(--color-primary-darker);
        transition: ease;
    }
    .nav-list ul{
        top: 2rem;
    }


.lavendel {
    margin-top: 4em;
    z-index: 2;
    color: white;
    font-weight: 600;
    position: relative;
  }




/*If screen bigger then 1600px this needs to change!!*/
  .image-in-section {
    position: absolute;
    right: 0; 
    top: 20px;   
    left: 0%;
    z-index: 0;
    height: 100%;
    border-radius: 25px;
  }


  





/* PriceTable */
.table-container{
    width: 125%;
    display: flex;
    justify-content: space-around;
    position: relative;
    left: -12%;
}
.table-left {
    align-self: flex-start;
}
.table-right {
    align-self: flex-end;
}

table {
  width: 40%;
  border-collapse: collapse;
}
thead th{
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-bold);
    padding-bottom: var(--space-64);
}
tbody{
    font-weight: var(--font-weight-normal);
}
tbody th{
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-normal);
}
tbody td{
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-normal);
}
th, td {
  padding: 8px;
  text-align: left;
}

.lastRow td {
  padding-bottom: var(--space-48);
}

.tableSmallText{
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-lighter);
}

.vertical-line {
    border-left: 2px solid var(--color-primary); /* adjust width and color as needed */
    height: 600px; /* adjust height as needed */
}

.mobile-horizontal-line{
    display: none;
}

.side-note-container{
    width: 125%;
    position: relative;
    left: -6%;
    padding-bottom: 50px;
    }
    .side-note-container p{
        font-weight: var(--font-weight-light);
        font-style: italic;
    }

.pricing-information{
    padding-bottom: 50px;
}
.pricing-information p:first-of-type{
    padding-bottom: 20px;
}



/* Teammembers */
.team-member {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 5rem;
    z-index: 5;
}

.team-member:nth-child(even) {
    flex-direction: row-reverse;
}

.team-member-text {
    display: flex;
    flex-direction: column;
}

.team-member:nth-child(odd) .team-member-text {
    text-align: left;
    margin-left: 100px;
}

.team-member:nth-child(odd) .team-member-text p{
    text-align: left;
}
.team-member img {
    width: 150px;
    height: auto;
    margin: 0 1rem;
}

.team-member p {
    flex-grow: 1;
    max-width: 80%;
}

.image-border-right,
.image-border-left {
    display: inline-block;
    position: relative;
}

.image-border-right img,
.image-border-left img {
    position: relative;
    z-index: 2;
}

.image-border-right::before,
.image-border-left::before{
    position: absolute;
    top: -6%;
    width: 80%;
    height: 95%;
    border: 3px solid var(--color-primary);
    content: '';
    z-index: 1;

}


.image-border-right::before{
    left: 16%;
}

.image-border-left::before{
    right: 16%;
}


/* ContactForm*/
#Contact{
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
}

.container {
    padding-top: 40px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 4px;
}

.textarea-container {
    position: relative;
}

.count {
    position: absolute;
    bottom: 12px;
    right: 10px;
    font-size: 12px;
    background-color: #fff;
    padding: 0 2px;
}

textarea {
    resize: none;
    min-height: 20px;
}

input:focus, textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}


input[type="submit"] {
    width: 50%;
    padding: 10px;
    border: 0;
    cursor: pointer;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    border: 2px solid var(--color-primary);
}
input[type="submit"]:disabled {
    /* background-color: green; */
    /* color: white; */
    cursor: not-allowed;
    /* border: white; */
}

@keyframes buttonSuccessAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

#submit.processing {
    background-color: #8E5DA5; /* Intermediate color */
    border-color: #7A4795;
    transition: background-color 0.5s ease, color 0.5s ease;
  }

#submit.success-animation {
    animation: buttonSuccessAnimation 0.6s cubic-bezier(0.42, 0, 0.58, 1);
    background-color: #4BB543 !important; /* Success Green */
    color: white !important;
    border-color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
  }


.form-information{
    color:grey;
    text-align:center;
    padding-bottom:20px;
}




/* Footer */
footer{
    background-color: var(--color-primary);
    color: white;
}

footer a{
    color: white;
}

.footer-header{
    font-size: var(--font-size-20);
}

.footer-divider {
    width: 95%;
    border-color: white;
    margin: 0 auto;
}

.footer-logo{
    margin-top: 35px;
}


.footer-content {
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.footer-container-left,
.footer-container-right{
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.footer-socialMediaIcons{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 5px;
}



@media (max-width: 1150px) {
    /* Hero */
    .hero-text p {
        font-size: var(--font-size-16);
        max-width: 60%;
        text-align: left;
        margin: auto;
    }

    .hero {
        flex-direction: column-reverse;
        height: 100%;
        width: 90%;
    }

    .hero-text {
        flex-basis: auto;
        text-align: center;
        padding-bottom: 30px;
    }

    .hero-text h1 {
        font-size: var(--font-size-32);
        padding-bottom: 20px;
    }

    .hero-image {
        flex-basis: auto;
        text-align: center;
        margin-top: var(--space-48);
        top: 500px;
    }

    .hero-image img {
        width: auto;
        height: 250px;
    }

    .image-border {
        left: 0;
    }

    .image-border::before {
        width: 100%;
        left: 5%;
    }

    .contact-button{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contact-button-hero{
        position: static;
        margin: auto;
        margin-top: 15px;
    }


    .contact-field p{
        max-width: 60%;
    }

    .frosted-gradient{
        width: 20%;
    }

    #Contact{
        width: 500px;
    }
}

@media (max-width: 1000px) {
    .frosted-gradient{
        display: none;
    }

    .logo {
        display: none;
        width: 120px;
        top: 5px;
    }


    /* Navigation */
    .nav-banner {
        width: 50%;
      }
  
      .nav-list{
          display: none;
          top: 2rem;
          }
          .nav-list.change{
              display: block;
          }
  
      .primary-navigation{
          -webkit-transition: 0.6s ease;
          transition: 0.6s ease;
      }
  
      .primary-navigation.change{
          width: 65%;
          background-color: white;
          border-top-right-radius:1%;
          border-bottom-right-radius: 1%;
          height: 100dvh;
          height: 100vh;
          max-height: 100dvh;
          max-height: 100vh;
      }
    
      .mobile-navbar-button {
            display: block;
            position: fixed;
            left: 1rem;
            top: 5rem;
            height: 60px;
            width: 60px;
            background-color: white;
            border: 2px solid var(--color-primary-darker);
            border-radius: 50%;

            -webkit-transition: 0.6s ease;
            transition: 0.6s ease;
        }
      
      .mobile-navbar-button.change{
          left: 52%;
      }
      
      .mobile-navbar-bar1, .mobile-navbar-bar2, .mobile-navbar-bar3 {
          width: 35px;
          height: 5px;
          background-color: var(--color-black);
          margin: 6px 0;
          transition: 0.4s;
          position: relative;
          top: 0px;
          left: 12px;
          }
          
          .change .mobile-navbar-bar1 {
              transform: translate(0, 11px) rotate(-45deg);
          }
          .change .mobile-navbar-bar2 {
              opacity: 0;
          }
          .change .mobile-navbar-bar3 {
              transform: translate(0, -11px) rotate(45deg);
          }
      
  
      .content-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 100;
  
          -webkit-transition: 0.6s ease;
          transition: 0.6s ease;
          }
          .content-overlay .change {
              display: block;
          }
  
          .footer-content {
            flex-direction: column;
        }
    
        .footer-container-left,
        .footer-container-right{
            flex-direction: row;
            align-items: normal;
            gap: 30px;
            padding-bottom: 10px;
        }

        .footer-contact-info{
            top: 50px;
        }
}










@media (max-width: 760px) {
    /* Typography */
    :root {
      --font-size-12: calc(var(--font-base-unit) * 2.4);
      --font-size-14: calc(var(--font-base-unit) * 3.5);
      --font-size-16: calc(var(--font-base-unit) * 4);
      --font-size-20: calc(var(--font-base-unit) * 4.5);
      --font-size-24: calc(var(--font-base-unit) * 4.8);
      --font-size-32: calc(var(--font-base-unit) * 6.4);
      --font-size-40: calc(var(--font-base-unit) * 8);
      --font-size-48: calc(var(--font-base-unit) * 9.6);
      --font-size-56: calc(var(--font-base-unit) * 11.2);
      --font-size-64: calc(var(--font-base-unit) * 12.8);
    }
  
    .main-container {
      max-width: 100%;
    }
  
    section {
      width: 90%;
      padding: 0;
      padding-top: var(--space-40);
      padding-bottom: var(--space-40);
    }

    h2{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
  
    p {
      max-width: 100%;
    }
  
    .logo {
        display: none;
        width: 120px;
        top: 5px;
    }

    .hero-text p{
        max-width: 85% !important;
    }
  

    /* Contact */
    .contact-button {
        top: 5rem;
        width: 150px;
        height: 35px;
    }

    .contact-field{
        height: 100vh;
        margin-top: var(--space-64);
        margin-bottom: var(--space-64);
    }
    .contact-field p{
        padding: var(--space-16);
    }
  
    /* LavendelText */
    .lavendel {
      margin-top: 2em;
    }
    .image-in-section {
        right: 0; 
        top: 20px;   
        left: -100%;
        padding-bottom: 200px;
      }


    #KinderenEnOuders{
        padding-top: var(--space-64);
    }


  
    /* Teammembers */
    .team-member img{
        margin: 0;
    }

    .team-member-text p{
        font-size: var(--font-size-14);
    }

    .team-member:nth-child(odd) .team-member-text {
        margin-left: 30px;
    }

    .team-member p{
        max-width: 90%;
    }

    .image-border-right::before {
        left: 20%;
    }
    .image-border-left::before {
        right: 20%;
    }

    .image-border-right::before, .image-border-left::before {
        width: 85%;
    }

    /* PriceTable */
    .table-container {
      flex-direction: column;
      width: 100%;
      left: 0;
    }
  
    .table-left,
    .table-right {
      align-self: center;
    }

    .table-right{
        margin-top: var(--space-32);
    }
  
    table {
      width: 100%;
    }

    .vertical-line {
        display: none;
    }

    .mobile-horizontal-line{
        display: block;
        border: 1px solid var(--color-primary); /* adjust width and color as needed */
        width: 85%;
        margin: 0 auto;
    }

    thead th{
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-bold);
        padding-bottom: var(--space-16);
    }

    tbody td{
        font-size: var(--font-size-14);
    }

    .side-note-container{
        left: 0;
        }
        .side-note-container p{
            font-size: 12px;
        }


    #Contact{
        max-width: 90% !important;
        padding: 10px;
    }

    .container{
        max-width: 100%;
        margin: 0;
        margin-bottom: 50px;
    }

    input[type="text"], input[type="email"], input[type="tel"], textarea {
        width: 96%;
    }
}



@media (max-width: 560px) {
    .footer-container-left, .footer-container-right {
        flex-direction: column;
        align-items: normal;
        gap: 25px;
        padding-bottom: 15px;
    }

    .footer-socialMediaIcons {
        justify-content: center;
    }
}






@media (max-width: 380px) {
    .contact-field{
        height: 120vh;
    }
}