/* Variables */
:root {
    /* fonts */
    --font-poppins: "Poppins", sans-serif;
    --font-dynapuff: "Dynapuff";
    --font-default: "sans-serif";

    /* Colors */
    --primary-100: #3475B2;
    --primary-80: #5F97CB;
    --primary-60: #87B1D8;
    --primary-40: #AFCBE5;
    --primary-20: #D7E5F2;
    --primary-10: #EBF2F8;

    --secondary1-100: #ED7D3A;
    --secondary1-80: #F19761;
    --secondary1-60: #F4B189;
    --secondary1-40: #F8CBB0;
    --secondary1-20: #FBE5D8;
    --secondary1-10: #FDF2EB;

    --secondary2-100: #6DBE45;
    --secondary2-80: #8ACB6A;
    --secondary2-60: #A7D88F;
    --secondary2-40: #C5E5B5;
    --secondary2-20: #E2F2DA;
    --secondary2-10: #F1F9ED;

    --accent-100: #D6246E;
    --accent-80: #DE508B;
    --accent-60: #E67CA8;
    --accent-40: #EFA7C5;
    --accent-20: #F7D3E2;
    --accent-10: #FBE9F1;

    --black: #222222;
    --gray-70: #646464;
    --gray-40: #A7A7A7;
    --gray-10: #E9E9E9;
    --white: #F8F8F8;

    --primary-t-20: rgba(52, 117, 178, 0.2);

    /* Spacing */
    --space-10: 10px;
    --space-15: 15px;
    --space-30: 30px;
    --space-45: 45px;
    --space-60: 60px;
    --space-90: 90px;
    --space-120: 120px;
    --space-150: 150px;
}


html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--white);
    z-index: -2;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}


/* Text Styles */

    /*Mobile*/
h1 {
    font-family: var(--font-poppins); font-weight: 800;, var(--font-default);
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 0;
}

h2 {
    font-family: var(--font-poppins); font-weight: 700;, var(--font-default);
    font-size: 23px;
    line-height: 1.35;
    margin-bottom: 0;
}

h3 {
    font-family: var(--font-poppins); font-weight: 600;, var(--font-default);
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 0;
}

h4 {
    font-family: var(--font-poppins); font-weight: 500;, var(--font-default);
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 0;
}

p {
    font-family: var(--font-poppins); font-weight: 400;, var(--font-default);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
}

.caption {
    font-family: var(--font-poppins); font-weight: 300;, var(--font-default);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

button {
    font-family: var(--font-poppins); font-weight: 600;, var(--font-default);
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 0;
    border-radius: 50px;
    border: 0;
    padding: 8px 16px;
}

.accent {
    font-family: var(--font-dynapuff), var(--font-default);
    font-size: 47px;
    line-height: 1.3;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}


    /*Tablet*/
@media (min-width: 768px){
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 28px;
    }

    .accent {
        font-size: 58px;
    }
}


    /*Desktop*/
@media (min-width: 1200px){
    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 21px;
    }

    h4 {
        font-size: 18px;
    }

    .caption {
        font-size: 14px;
    }

    .accent {
        font-size: 64px;
    }
}



/* Color Styles */

    /* Text */

        /* Primary */
.text-primary-100 {
    color: var(--primary-100)
}

.text-primary-80 {
    color: var(--primary-80)
}

.text-primary-60 {
    color: var(--primary-60)
}

.text-primary-40 {
    color: var(--primary-40)
}

.text-primary-20 {
    color: var(--primary-20)
}

.text-primary-10 {
    color: var(--primary-10)
}


        /* Secondary1 */
.text-secondary1-100 {
    color: var(--secondary1-100)
}

.text-secondary1-80 {
    color: var(--secondary1-80)
}

.text-secondary1-60 {
    color: var(--secondary1-60)
}

.text-secondary1-40 {
    color: var(--secondary1-40)
}

.text-secondary1-20 {
    color: var(--secondary1-20)
}

.text-secondary1-10 {
    color: var(--secondary1-10)
}


        /* Secondary2 */
.text-secondary2-100 {
    color: var(--secondary2-100)
}

.text-secondary2-80 {
    color: var(--secondary2-80)
}

.text-secondary2-60 {
    color: var(--secondary2-60)
}

.text-secondary2-40 {
    color: var(--secondary2-40)
}

.text-secondary2-20 {
    color: var(--secondary2-20)
}

.text-secondary2-10 {
    color: var(--secondary2-10)
}


        /* Accent */
.text-accent-100 {
    color: var(--accent-100)
}

.text-accent-80 {
    color: var(--accent-80)
}

.text-accent-60 {
    color: var(--accent-60)
}

.text-accent-40 {
    color: var(--accent-40)
}

.text-accent-20 {
    color: var(--accent-20)
}

.text-accent-10 {
    color: var(--accent-10)
}


        /* Black and white */
.text-black {
    color: var(--black)
}

.text-gray-70 {
    color: var(--gray-70)
}

.text-gray-40 {
    color: var(--gray-40)
}

.text-gray-10 {
    color: var(--gray-10)
}

.text-white {
    color: var(--white)
}



    /* BackGround */

        /* Primary */
.bg-primary-100 {
    background-color: var(--primary-100)
}

.bg-primary-80 {
    background-color: var(--primary-80)
}

.bg-primary-60 {
    background-color: var(--primary-60)
}

.bg-primary-40 {
    background-color: var(--primary-40)
}

.bg-primary-20 {
    background-color: var(--primary-20)
}

.bg-primary-10 {
    background-color: var(--primary-10)
}

.bg-primary-t-20 {
    background-color: var(--primary-t-20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(52, 117, 178, 0.3);
}


        /* Secondary1 */
.bg-secondary1-100 {
    background-color: var(--secondary1-100)
}

.bg-secondary1-80 {
    background-color: var(--secondary1-80)
}

.bg-secondary1-60 {
    background-color: var(--secondary1-60)
}

.bg-secondary1-40 {
    background-color: var(--secondary1-40)
}

.bg-secondary1-20 {
    background-color: var(--secondary1-20)
}

.bg-secondary1-10 {
    background-color: var(--secondary1-10)
}


        /* Secondary2 */
.bg-secondary2-100 {
    background-color: var(--secondary2-100)
}

.bg-secondary2-80 {
    background-color: var(--secondary2-80)
}

.bg-secondary2-60 {
    background-color: var(--secondary2-60)
}

.bg-secondary2-40 {
    background-color: var(--secondary2-40)
}

.bg-secondary2-20 {
    background-color: var(--secondary2-20)
}

.bg-secondary2-10 {
    background-color: var(--secondary2-10)
}


        /* Accent */
.bg-accent-100 {
    background-color: var(--accent-100)
}

.bg-accent-80 {
    background-color: var(--accent-80)
}

.bg-accent-60 {
    background-color: var(--accent-60)
}

.bg-accent-40 {
    background-color: var(--accent-40)
}

.bg-accent-20 {
    background-color: var(--accent-20)
}

.bg-accent-10 {
    background-color: var(--accent-10)
}


        /* Black and white */
.bg-black {
    background-color: var(--black)
}

.bg-gray-70 {
    background-color: var(--gray-70)
}

.bg-gray-40 {
    background-color: var(--gray-40)
}

.bg-gray-10 {
    background-color: var(--gray-10)
}

.bg-white {
    background-color: var(--white)
}


    /* Specials */




/* Spacing */

    /* Padding */

        /* 4 Sides */
.p-10 {
    padding: var(--space-10);
}

.p-15 {
    padding: var(--space-15);
}

.p-30 {
    padding: var(--space-30);
}

.p-60 {
    padding: var(--space-60);
}

.p-90 {
    padding: var(--space-90);
}

.p-120 {
    padding: var(--space-120);
}

.p-150 {
    padding: var(--space-150);
}


        /* y */
.py-15 {
    padding-top: var(--space-15);
    padding-bottom: var(--space-15);
}

.py-30 {
    padding-top: var(--space-30);
    padding-bottom: var(--space-30);
}

.py-60 {
    padding-top: var(--space-60);
    padding-bottom: var(--space-60);
}

.py-90 {
    padding-top: var(--space-90);
    padding-bottom: var(--space-90);
}

.py-120 {
    padding-top: var(--space-120);
    padding-bottom: var(--space-120);
}

.py-150 {
    padding-top: var(--space-150);
    padding-bottom: var(--space-150);
}


        /* x */
.px-15 {
    padding-right: var(--space-15);
    padding-left: var(--space-15);
}

.px-30 {
    padding-right: var(--space-30);
    padding-left: var(--space-30);
}

.px-60 {
    padding-right: var(--space-60);
    padding-left: var(--space-60);
}

.px-90 {
    padding-right: var(--space-90);
    padding-left: var(--space-90);
}

.px-120 {
    padding-right: var(--space-120);
    padding-left: var(--space-120);
}

.px-150 {
    padding-right: var(--space-150);
    padding-left: var(--space-150);
}


        /* Left */
.ps-10 {
    padding-left: var(--space-10);
}

.ps-15 {
    padding-left: var(--space-15);
}

.ps-30 {
    padding-left: var(--space-30);
}

.ps-60 {
    padding-left: var(--space-60);
}

.ps-90 {
    padding-left: var(--space-90);
}

.ps-120 {
    padding-left: var(--space-120);
}

.ps-150 {
    padding-left: var(--space-150);
}


        /* Right */
.pe-15 {
    padding-right: var(--space-15);
}

.pe-30 {
    padding-right: var(--space-30);
}

.pe-60 {
    padding-right: var(--space-60);
}

.pe-90 {
    padding-right: var(--space-90);
}

.pe-120 {
    padding-right: var(--space-120);
}

.pe-150 {
    padding-right: var(--space-150);
}

    /* Bottom */
.pb-10 {
    padding-bottom: var(--space-10);
}

.pb-15 {
    padding-bottom: var(--space-15);
}

.pb-30 {
    padding-bottom: var(--space-30);
}

.pb-60 {
    padding-bottom: var(--space-60);
}

.pb-90 {
    padding-bottom: var(--space-90);
}

.pb-120 {
    padding-bottom: var(--space-120);
}

.pb-150 {
    padding-bottom: var(--space-150);
}

    /* Top */
.pt-15 {
    padding-top: var(--space-15);
}

.pt-30 {
    padding-top: var(--space-30);
}

.pt-60 {
    padding-top: var(--space-60);
}

.pt-90 {
    padding-top: var(--space-90);
}

.pt-120 {
    padding-top: var(--space-120);
}

.pt-150 {
    padding-top: var(--space-150);
}


    /* Margin */

        /* 4 Sides */
.m-15 {
    margin: var(--space-15);
}

.m-30 {
    margin: var(--space-30);
}

.m-60 {
    margin: var(--space-60);
}

.m-90 {
    margin: var(--space-90);
}

.m-120 {
    margin: var(--space-120);
}

.m-150 {
    margin: var(--space-150);
}


        /* y */
.my-15 {
    margin-top: var(--space-15);
    margin-bottom: var(--space-15);
}

.my-30 {
    margin-top: var(--space-30);
    margin-bottom: var(--space-30);
}

.my-60 {
    margin-top: var(--space-60);
    margin-bottom: var(--space-60);
}

.my-90 {
    margin-top: var(--space-90);
    margin-bottom: var(--space-90);
}

.my-120 {
    margin-top: var(--space-120);
    margin-bottom: var(--space-120);
}

.my-150 {
    margin-top: var(--space-150);
    margin-bottom: var(--space-150);
}


        /* x */
.mx-15 {
    margin-right: var(--space-15);
    margin-left: var(--space-15);
}

.mx-30 {
    margin-right: var(--space-30);
    margin-left: var(--space-30);
}

.mx-60 {
    margin-right: var(--space-60);
    margin-left: var(--space-60);
}

.mx-90 {
    margin-right: var(--space-90);
    margin-left: var(--space-90);
}

.mx-120 {
    margin-right: var(--space-120);
    margin-left: var(--space-120);
}

.mx-150 {
    margin-right: var(--space-150);
    margin-left: var(--space-150);
}


        /* Left */
.ms-15 {
    margin-left: var(--space-15);
}

.ms-30 {
    margin-left: var(--space-30);
}

.ms-60 {
    margin-left: var(--space-60);
}

.ms-90 {
    margin-left: var(--space-90);
}

.ms-120 {
    margin-left: var(--space-120);
}

.ms-150 {
    margin-left: var(--space-150);
}


        /* Right */
.me-15 {
    margin-right: var(--space-15);
}

.me-30 {
    margin-right: var(--space-30);
}

.me-60 {
    margin-right: var(--space-60);
}

.me-90 {
    margin-right: var(--space-90);
}

.me-120 {
    margin-right: var(--space-120);
}

.me-150 {
    margin-right: var(--space-150);
}


        /* Bottom */
.mb-10 {
    margin-bottom: var(--space-10);
}

.mb-15 {
    margin-bottom: var(--space-15);
}

.mb-30 {
    margin-bottom: var(--space-30);
}

.mb-45 {
    margin-bottom: var(--space-45);
}

.mb-60 {
    margin-bottom: var(--space-60);
}

.mb-90 {
    margin-bottom: var(--space-90);
}

.mb-120 {
    margin-bottom: var(--space-120);
}

.mb-150 {
    margin-bottom: var(--space-150);
}

    /* Top */
.mt-5 {
    margin-top: 2px !important;
}

.mt-10 {
    margin-top: var(--space-10);
}

.mt-15 {
    margin-top: var(--space-15);
}

.mt-30 {
    margin-top: var(--space-30);
}

.mt-60 {
    margin-top: var(--space-60);
}

.mt-90 {
    margin-top: var(--space-90);
}

.mt-120 {
    margin-top: var(--space-120);
}

.mt-150 {
    margin-top: var(--space-150);
}


    /* Special padding */
.nav-padding {
    padding-block: clamp(var(--space-15), 2.5vw, var(--space-30));
    padding-inline: clamp(var(--space-15), 4vw, var(--space-30));
}

.nav-padding-bottom {
    padding-block: clamp(var(--space-15), 2.5vw, var(--space-30));
    padding-inline: clamp(var(--space-15), 4vw, var(--space-30));
}


.dinos-padding-left {
    padding-left: 0px;
    margin-bottom: var(--space-30);
}

@media (min-width: 1199.98px) {
    .dinos-padding-left {
        padding-left: 60px;
        margin-bottom: 0 !important;
    }
}

@media (min-width: 575.98px) {
    .dinos-padding-left {
        margin-bottom: var(--space-60);
    }
}

.dinos-padding-right {
    padding-right: 0px;
    margin-bottom: var(--space-30);
}

@media (min-width: 1199.98px) {
    .dinos-padding-right {
        padding-right: 60px;
        margin-bottom: 0 !important;
    }
}

@media (min-width: 575.98px) {
    .dinos-padding-right {
        margin-bottom: var(--space-60);
    }
}


    /*Waarom & Hoe*/
.hidden-flip {
    display: none !important;
}

@media (max-width: 1199px) {
    .hidden-flip {
        display: flex !important;
    }
}




/* ID */

    /* Header */
#header-logo-round-image {
    width: 60px;
    height: 60px;
}

#header-logo-straight-white-image {
    width: 180px;
    height: auto;
}

@media (max-width: 420px) {
    #header-logo-straight-white-image {
        display:none;
    }
}


#header-button {
    width: 128px;
}

#navbar-bar {
    padding-bottom: 7px;
    padding-top:  7px;
    border-radius: 50px;
}

    /* Footer */
#footer {
    flex-shrink: 0;
}

.footer-nocontact #footer-contact {
    display: none;
}

#footer-logo-round-image {
    width: 150px;
    height: 150px;
}

#footer-pe-md-150 {
    padding-right: 0;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    #footer-pe-md-150 {
        padding-right: clamp(30px, 6vw, 150px);
    }
}
@media (min-width: 1200px){
    #footer-pe-md-150 {
        padding-right: 150px;
    }
}

#footer-snelle-navigatie {
    padding-left: 0;
}

@media (min-width: 768px) {
    #footer-snelle-navigatie {
        padding-left: 7px;
    }
}

    /* Background */
#background-paw-top-left{
    left: -45px;
    top: 30px;
    width: 270px;
    height: auto;
    transform: rotate(9deg);         /* use transform, not rotate: */
}

#background-paw-bottom-right{
    right: -75px;
    bottom: 30px;
    width: 250px;
    height: auto;
    transform: rotate(-10deg);
}

@media (min-width: 400px){
    #background-paw-top-left{
        left: -45px;
        top: 30px;
        width: 300px;
        transform: rotate(10deg);
    }
    #background-paw-bottom-right{
        right: -75px;
        bottom: 30px;
        width: 280px;
        transform: rotate(-10deg);
    }
}

@media (min-width: 576px){
    #background-paw-top-left{
        left: -25px;
        top: 30px;
        width: 400px;
        transform: rotate(10deg);
    }
    #background-paw-bottom-right{
        right: -50px;
        bottom: 30px;
        width: 380px;
        transform: rotate(-10deg);
    }
}

@media (min-width: 992px){
    #background-paw-top-left{
        left: 110px;
        top: -200px;
        width: 500px;
        transform: rotate(10deg);
    }
    #background-paw-bottom-right{
        right: 110px;
        bottom: -240px;
        width: 480px;
        transform: rotate(-10deg);
    }
}

    /* Dino's */
        /* Kio */
#kio-border {
    width: 424px;
    height: auto;
    transform: scaleX(-1);
}

@media (max-width: 575.98px) {
    #kio-border {
        width: clamp(250px, 50vw, 424px);
    }
}

        /* Cera */
#cera-border {
    width: 424px;
    height: auto;
}

@media (max-width: 575.98px) {
    #cera-border {
        width: clamp(250px, 50vw, 424px);
    }
}

        /* Stegi */
#stegi-border {
    width: 424px;
    height: auto;
    transform: scaleX(-1);
}

@media (max-width: 575.98px) {
    #stegi-border {
        width: clamp(250px, 50vw, 424px);
    }
}

        /* Tiro */
#tiro-border {
    width: 424px;
    height: auto;
}

@media (max-width: 575.98px) {
    #tiro-border {
        width: clamp(250px, 50vw, 424px);
    }
}


    /* Waarom & Hoe */
#button-border {
    background-color: transparent;
    border: none;
    box-shadow: inset 0 0 0 2px var(--accent-100); /* rand naar binnen */
    color: var(--accent-100);
    border-radius: 50px;
    background-color: transparent;
}

#button-solid {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 16px;
    padding-right: 16px;
}

#yuck-with-veggies {
    width: 350px;
    height: auto;
    border-radius: 50px;
}

@media (min-width: 475px) {
    #yuck-with-veggies {
        width: 410px;
        height: auto;
    }
}

#how-card-parents {
    max-width: 585px;
    margin: 30px;
    border-radius: 50px;
    background-color: var(--primary-100);
    border: none;
}

#padding-card-parents {
    display: flex;
    gap: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-top: 20px;
}

@media (min-width: 768px) {
    #padding-card-parents {
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 0px;
        padding-top: 40px;
    }
}

@media (min-width: 1199.98px) {
    #padding-card-parents {
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 40px;
        padding-top: 40px;
    }
}

#how-image-parents {
    width: 620px;
    height: auto;
}

@media (max-width: 1500px) and (min-width: 1200px) {
    #how-image-parents {
        width: calc(30vw + 60px);
    }
}


#how-card-kids {
    max-width: 585px;
    margin: 30px;
    border-radius: 50px;
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid var(--primary-100);
}

#padding-card-kids {
    display: flex;
    gap: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-top: 20px;
}

@media (min-width: 768px) {
    #padding-card-kids {
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 0px;
        padding-top: 40px;
    }
}

@media (min-width: 1199.98px) {
    #padding-card-kids {
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 40px;
        padding-top: 40px;
    }
}

#how-image-kids {
    width: 620px;
    height: auto;
}
@media (max-width: 1500px) and (min-width: 1200px) {
    #how-image-kids {
        width: calc(30vw + 60px);
    }
}

#vragen-card {
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 290px;
    height: auto;
    border-radius: 50px;
    border: 3px solid var(--primary-100);
    position: relative;
}

@media (min-width: 576px) {
    #vragen-card {
        width: 400px;
        height: auto;
    }
}

@media (min-width: 768px) {
    #vragen-card {
        width: 600px;
        height: auto;
    }
}

@media (min-width: 1000px) {
    #vragen-card {
        width: 800px;
        height: auto;
    }
}



#vragen-badge {
    background-color: var(--primary-100);
    width: 85px;
    height: 85px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

#padding-top-waarom {
    padding-bottom: var(--space-30);
}

@media (min-width: 1200px) {
    #padding-top-waarom{
        padding-bottom: 0;
        padding-right: 150px;
    }
}


#margin-facts-1-waarom {
    margin-bottom: 60px;
    margin-right: 0;
}

@media (min-width: 1200px) {
    #margin-facts-1-waarom {
        margin-bottom: 0;
        margin-right: 30px;
    }
}

#margin-facts-2-waarom {
    margin-bottom: 60px;
    margin-right: 0;
}

@media (min-width: 1200px) {
    #margin-facts-2-waarom {
        margin-bottom: 0;
        margin-right: 30px;
    }
}

#margin-facts-3-waarom {
    margin-right: 0;
    margin-bottom: 60px;
}

@media (min-width: 576px) {
    #margin-facts-3-waarom {
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    #margin-facts-3-waarom {
        margin-right: 30px;
    }
}


#margin-hoe-top-text {
    margin-right: 15px;
    margin-left: 15px;
}

@media (min-width: 1000px) {
    #margin-hoe-top-text {
        margin-right: 60px;
        margin-left: 60px;
    }
}

@media (min-width: 1200px) {
    #margin-hoe-top-text {
        margin-right: 120px;
        margin-left: 120px;
    }
}

@media (min-width: 1500px) {
    #margin-hoe-top-text {
        margin-right: 300px;
        margin-left: 300px;
    }
}


#margin-hoe {
    margin-right: 60px;
    margin-left: 60px;
}

@media (min-width: 1000px) {
    #margin-hoe {
        margin-right: 90px;
        margin-left: 90px;
    }
}

@media (min-width: 1200px) {
    #margin-hoe {
        margin-right: 120px;
        margin-left: 120px;
    }
}

#flip1 {
    width: 26px;
    height: auto;
    margin-bottom: 20px;
    margin-right: 30px;
}

#flip2 {
    width: 26px;
    height: auto;
    margin-bottom: 20px;
    margin-right: 30px;
}


#padding-magie {
    padding-right: 60px;
    padding-left: 60px;
}

@media (min-width: 1000px) {
    #padding-magie {
        padding-right: 60px;
        padding-left: 60px;
    }
}

@media (min-width: 1200px) {
    #padding-magie {
        padding-left: clamp(120px, 10vw, 200px);
        padding-right: clamp(120px, 10vw, 200px);
    }
}

@media (min-width: 1800px) {
    #padding-magie {
        padding-left: clamp(120px, 17vw, 500px);
        padding-right: clamp(120px, 17vw, 500px);
    }
}


    /*Over Ons*/
#me-kio {
    width: 350px;
    height: auto;
    border-radius: 50px;
    transform: scaleX(-1);
    margin-bottom: var(--space-30);
}

@media (min-width: 475px) {
    #me-kio {
        width: 410px;
        height: auto;
    }
}

@media (min-width: 992px) {
    #me-kio {
        margin-bottom: 0;
        margin-right: 60px;
    }
}

@media (min-width: 1200px) {
    #me-kio {
        margin-bottom: 0;
        margin-right: 150px;
    }
}

#over-card1,
#over-card2,
#over-card3 {
    background-color: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 50px;
    width: 350px;
    height: 470px;
}

@media (min-width: 450px){
    #over-card1,
    #over-card2,
    #over-card3 {
        width: 400px;
        height: 440px;
    }
}

#over-card1 {
    --border-color: var(--primary-100);
}

#over-card2 {
    --border-color: var(--secondary1-100);
}

#over-card3 {
    --border-color: var(--secondary2-100);
}

#family {
    width: 150px;
    height: 150px;
}

#leren {
    width: 150px;
    height: 150px;
}

#avontuur {
    width: 150px;
    height: 150px;
}

#padding-top-over {
    padding-left: clamp(30px, 10vw, 240px);
    padding-right: clamp(30px, 10vw, 240px);
}

@media (min-width: 1000px) {
    #padding-top-over {
        padding-right: 0px;
        padding-left: 0px;
    }
}

#padding-missie {
    padding-left: clamp(30px, 10vw, 240px);
    padding-right: clamp(30px, 10vw, 240px);
}

#padding-home-hoe, #padding-home-waarom, #padding-home-dino {
    padding-bottom: var(--space-30);
    padding-left: clamp(30px, 10vw, 240px);
    padding-right: clamp(30px, 10vw, 240px);
}

@media (min-width: 1200px) {
    #padding-home-hoe, #padding-home-waarom{
        padding-bottom: 0;
        padding-right: 30px;
    }
}
@media (min-width: 992px) {
    #padding-home-hoe, #padding-home-waarom, #padding-home-dino {
        padding-right: 0px;
        padding-left: 0px;
    }
}

#button-home-waarom {
    background-color: transparent;
    border: none;
    box-shadow: inset 0 0 0 2px var(--primary-100); /* rand naar binnen */
    color: var(--primary-100);
    border-radius: 50px;
    background-color: transparent;
}


    /*Home*/
#home {
    position: relative;
    margin-top: clamp(-120px, -15vw, -105px);
    overflow: hidden; /* hide sides when cropped */
}
@media (min-width: 1200px) {
    #home {
        margin-top: -145px;
    }
}

#bg-home {
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* keeps center fixed */
    display: block;
    width: 100%;
    min-width: 900px; /* don’t shrink below this */
    height: auto;
    margin-bottom: 400px;
}
@media (min-width: 460px) {
    #bg-home {
        margin-bottom: 300px;
    }
}

@media (min-width: 992px) {
    #bg-home {
        margin-bottom: 240px;
    }
}
@media (min-width: 1400px) {
    #bg-home {
        margin-bottom: 120px;
    }
}

#home-card {
    position: absolute;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    width: min(860px, calc(100% - (2 * clamp(30px, 5vw, 240px))));
    padding: 30px;
    border-radius: 50px;
    background-color: var(--primary-100);
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1400px) {
    #home-card {
        bottom: clamp(12%, 51vw, 50%)
    }
}
@media (min-width: 576px) {
    #home-card {
        bottom: clamp(12%, 5vw, 25%)
    }
}


#button-prototype {
    box-shadow: 0 0 10px rgba(188, 188, 188, 0.5);
    color: #fff;
}

#show-screen-proud {
    width: 350px;
    height: auto;
    border-radius: 50px;
}

@media (min-width: 475px) {
    #show-screen-proud {
        width: 410px;
        height: auto;
    }
}

#throws-food {
    width: 350px;
    height: auto;
    border-radius: 50px;
    transform: scaleX(-1);
}

@media (min-width: 475px) {
    #throws-food {
        width: 410px;
        height: auto;
    }
}


#home-card1,
#home-card2,
#home-card3 {
    background-color: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 50px;
    width: 380px;
    height: 440px;
}

/*@media (min-width: 450px){*/
/*    #home-card1,*/
/*    #home-card2,*/
/*    #home-card3 {*/
/*        width: 400px;*/
/*        height: 440px;*/
/*    }*/
/*}*/

#home-card1 {
    --border-color: var(--secondary2-100);
}

#home-card2 {
    --border-color: var(--primary-100);
}

#home-card3 {
    --border-color: var(--secondary1-100);
}


    /*Popup*/
/* ===========================
   Base / overlay / lock scroll
   =========================== */
body.popup-open { overflow: hidden; }

#popup-overlay {
    position: fixed;
    inset: 0;
    display: none;                 /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#popup-overlay.is-open { display: flex; }

/* ===========================
   Popup card
   =========================== */
#popup-card {
    position: relative;
    display: flex;
    text-align: center;
    padding: 60px 60px;
    border-radius: 50px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}

#popup-card h1,
#popup-card h2,
#popup-card p { margin: 0; }

#popup-card h1 {
    font-family: var(--font-dynapuff), var(--font-default);
    font-size: 45px;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

/* Background paws */
#popup-card::before,
#popup-card::after {
    content: "";
    position: absolute;
    background: url("/images/Paw_Popup.svg") no-repeat center / contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
#popup-card > * { position: relative; z-index: 1; }

#popup-card::before {
    width: 290px; height: 390px;
    transform: rotate(10deg);
    top: -150px; left: -50px;
}
#popup-card::after {
    width: 300px; height: 405px;
    transform: rotate(-10deg);
    bottom: -150px; right: -50px;
}

/* ===========================
   Content lane (email + checkbox)
   =========================== */
#popup-card .popup-content {
    display: flex;                 /* stack vertically */
    flex-direction: column;
    gap: 12px;
    text-align: left;              /* labels/checkbox text align left */
    flex: 1;
    width: fit-content;

}

/* Email block */
#popup-card .email-section {
  /*  width: fit-content !important; */
    display: flex !important;;
}
#popup-card .email-input {
    display: block;
    box-sizing: border-box;
    border: 2px solid var(--primary-100);
    border-radius: 9999px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--font-poppins), var(--font-default);
    font-weight: 500;
    color: var(--gray-70);
    background: var(--white);
    outline: none;
    box-shadow: none;
}
#popup-card .email-input::placeholder { color: var(--gray-40); }
#popup-card .email-input:focus { border-color: var(--primary-100); }

/* Checkbox row */
#popup-card .popup-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding-left: 5px;
    justify-content: center;
    flex: 1;
    flex-wrap: wrap;
}

/* Keep the checkbox itself square and non-shrinking */
#popup-card .popup-check input[type="checkbox"] {
    appearance: none;
    flex-shrink: 0;                /* <-- keeps size on small screens */
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-100);
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
}
#popup-card .popup-check input[type="checkbox"]:checked {
    background-color: var(--primary-100);
    border-color: var(--primary-100);
}
#popup-card .popup-check input[type="checkbox"]:checked::after {
    content: "";
    width: 6px; height: 10px;
    border-right: 2.5px solid var(--white);
    border-bottom: 2.5px solid var(--white);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    transform-origin: center;
}
#popup-card .popup-check input[type="checkbox"]:focus {
    outline: none; box-shadow: none;
}

/* Let the checkbox text wrap beside the box */
#popup-card .popup-check .checkbox-text {
    margin: 0;
    line-height: inherit;
    color: inherit;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* ===========================
   Close (X) icon
   =========================== */
#cross-icon {
    position: absolute;
    top: 30px; right: 30px;
    width: 30px; height: 30px;
    cursor: pointer;
    z-index: 2;
}
#cross-icon::before,
#cross-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 3px;
    background-color: var(--black);
    border-radius: 9999px;
    transform-origin: center;
}
#cross-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
#cross-icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width: 768px) {
    #popup-card {
        width: 90%;
        max-width: 360px;
        padding: 40px 30px;
        border-radius: 35px;
    }
    #popup-card h1 { font-size: 42px; }
    #cross-icon { top: 20px; right: 20px; width: 24px; height: 24px; }
}

@media (max-width: 480px) {
    #popup-card {
        width: 92%;
        max-width: 300px;
        padding: 30px 20px;
        border-radius: 25px;
    }
    #popup-card h1 { font-size: 38px; }
    #popup-card .popup-content { gap: 10px; }
    #popup-card .popup-check   { gap: 8px; }
    #popup-card .email-input   { padding: 8px 14px; }
    #cross-icon { top: 15px; right: 15px; width: 22px; height: 22px; }
}

#popup-card small {
    display: block;
    font-size: 12px;
    color: red;
    margin-top: 4px;
}


    /*Contact*/
/* Overall container */
#overall {
    display: flex;
    align-items: stretch;
    gap: 30px;
    max-width: 1055px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 150px;
    padding: 0 30px;
    box-sizing: border-box;
}

/* On screens smaller than Bootstrap’s lg (992px) */
@media (max-width: 991.98px) {
    #overall {
        flex-direction: column;     /* stack vertically */
        align-items: center;        /* center cards horizontally */
    }

    /* Optional: make both cards full width */
    #overall > * {
        width: 100%;
        max-width: 700px;           /* adjust to your design */
    }
}


/* Left column fills remaining width */
#overall > .card-contact:first-child {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Checkbox row */
#overall .contact-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding-left: 5px;
}

/* Keep the checkbox itself square and non-shrinking */
#overall .contact-check input[type="checkbox"] {
    appearance: none;
    flex-shrink: 0;                /* <-- keeps size on small screens */
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-100);
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
}
#overall .contact-check input[type="checkbox"]:checked {
    background-color: var(--primary-100);
    border-color: var(--primary-100);
}
#overall .contact-check input[type="checkbox"]:checked::after {
    content: "";
    width: 6px; height: 10px;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    transform-origin: center;
}
#overall .contact-check input[type="checkbox"]:focus {
    outline: none; box-shadow: none;
}



    /*Privacy Policy*/
#privacy-padding {
    padding-right: 30px;
    padding-left: 30px;
}

@media (min-width: 768px) {
    #privacy-padding {
        padding-right: 90px;
        padding-left: 90px;
    }
}

@media (min-width: 1200px) {
    #privacy-padding {
        padding-right: 120px;
        padding-left: 120px;
    }
}

ol[type="a"] li::marker {
    font-weight: bold;
}



    /*Cookies*/
#cookies-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    z-index: 998;
}

#cookies-card {
    position: relative;
    display: flex;
    text-align: center;
    border-radius: 50px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}

/* Header part */
#cookies-header {
    background: var(--gray-10);
    padding: 15px;
    width: 100%;
    text-align: center;
}


/* Body part */
#cookies-body {
    background: var(--white);
    padding: 15px 30px;
    max-width: 435px;
    text-align: center;
}


#cookies-card button {
    width: 100%;                 /* full width */
    padding: 12px 16px;
    border-radius: 999px;        /* pill shape */
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* --- 1️⃣ SOLID --- */
#cookies-button-solid {
    background-color: var(--primary-100);
    color: var(--white);
    border: none;
}

#cookies-button-solid:hover {
    transform: scale(1.05) !important;
    transition: all 0.3s ease-in-out !important;
}

/* --- 1️⃣ SOLID --- */
#cookies-button-solid-2 {
    background-color: var(--primary-100);
    color: var(--white);
    border: none;
}

#cookies-button-solid-2:hover {
    transform: scale(1.05) !important;
    transition: all 0.3s ease-in-out !important;
}

/* --- 2️⃣ BORDER --- */
#cookies-button-border {
    background-color: transparent;
    color: var(--primary-100);
    border: 2px solid var(--primary-100);
}

#cookies-button-border:hover {
    transform: scale(1.05) !important;
    transition: all 0.3s ease-in-out !important;
}


/* --- 3️⃣ GHOST --- */
#cookies-button-ghost {
    background-color: var(--gray-10);
    color: var(--primary-100);
    border: none;
}

#cookies-button-ghost:hover {
    transform: scale(1.05) !important;
    transition: all 0.3s ease-in-out !important;
}


#cookies-card h2 {
    color: var(--primary-100);
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

/* spacing on the input */
.cookies-checkbox {
    margin-top: 3px;
    margin-right: 15px;
}

/* style the input itself */
input.cookies-checkbox[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;     /* Safari/iOS */
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-100);
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color .2s, border-color .2s;
    position: relative;
}

input.cookies-checkbox[type="checkbox"]:checked {
    background-color: var(--primary-100);
    border-color: var(--primary-100);
}

input.cookies-checkbox[type="checkbox"]:checked::after {
    content: "";
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
}

input.cookies-checkbox[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
}



/*Popup tester*/
/* ===========================
   Base / overlay / lock scroll
   =========================== */
body.popup-tester-open { overflow: hidden; }

#popup-tester-overlay {
    position: fixed;
    inset: 0;
    display: none;                 /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#popup-tester-overlay.is-open { display: flex; }

/* ===========================
   Popup card
   =========================== */
#popup-tester-card {
    position: relative;
    display: flex;
    text-align: center;
    padding: 60px 60px;
    border-radius: 50px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}

#popup-tester-card h1,
#popup-tester-card h2,
#popup-tester-card p { margin: 0; }

#popup-tester-card h1 {
    font-family: var(--font-dynapuff), var(--font-default);
    font-size: 45px;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

/* Background paws */
#popup-tester-card::before,
#popup-tester-card::after {
    content: "";
    position: absolute;
    background: url("/images/Paw_Popup.svg") no-repeat center / contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
#popup-tester-card > * { position: relative; z-index: 1; }

#popup-tester-card::before {
    width: 290px; height: 390px;
    transform: rotate(10deg);
    top: -150px; left: -50px;
}
#popup-tester-card::after {
    width: 300px; height: 405px;
    transform: rotate(-10deg);
    bottom: -150px; right: -50px;
}

/* ===========================
   Content lane (email + checkbox)
   =========================== */
#popup-tester-card .popup-tester-content {
    display: flex;                 /* stack vertically */
    flex-direction: column;
    gap: 12px;
    text-align: left;              /* labels/checkbox text align left */
    flex: 1;
}

/* Email block */
#popup-tester-card .email-section {
    /*  width: fit-content !important; */
    display: flex !important;;
}
#popup-tester-card .email-input {
    display: block;
    box-sizing: border-box;
    border: 2px solid var(--primary-100);
    border-radius: 9999px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--font-poppins), var(--font-default);
    font-weight: 500;
    color: var(--gray-70);
    background: var(--white);
    outline: none;
    box-shadow: none;
}
#popup-tester-card .email-input::placeholder { color: var(--gray-40); }
#popup-tester-card .email-input:focus { border-color: var(--primary-100); }

/* Checkbox row */
#popup-tester-card .popup-tester-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding-left: 5px;
    justify-content: center;
    flex: 1;
    flex-wrap: wrap;
}

/* Keep the checkbox itself square and non-shrinking */
#popup-tester-card .popup-tester-check input[type="checkbox"] {
    appearance: none;
    flex-shrink: 0;                /* <-- keeps size on small screens */
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-100);
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
}
#popup-tester-card .popup-tester-check input[type="checkbox"]:checked {
    background-color: var(--primary-100);
    border-color: var(--primary-100);
}
#popup-tester-card .popup-tester-check input[type="checkbox"]:checked::after {
    content: "";
    width: 6px; height: 10px;
    border-right: 2.5px solid var(--white);
    border-bottom: 2.5px solid var(--white);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    transform-origin: center;
}
#popup-tester-card .popup-tester-check input[type="checkbox"]:focus {
    outline: none; box-shadow: none;
}

/* Let the checkbox text wrap beside the box */
#popup-tester-card .popup-tester-check .checkbox-text {
    margin: 0;
    line-height: inherit;
    color: inherit;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* ===========================
   Close (X) icon
   =========================== */
#cross-icon {
    position: absolute;
    top: 30px; right: 30px;
    width: 30px; height: 30px;
    cursor: pointer;
    z-index: 2;
}
#cross-icon::before,
#cross-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 3px;
    background-color: var(--black);
    border-radius: 9999px;
    transform-origin: center;
}
#cross-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
#cross-icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width: 768px) {
    #popup-tester-card {
        width: 90%;
        max-width: 360px;
        padding: 40px 30px;
        border-radius: 35px;
    }
    #popup-tester-card h1 { font-size: 42px; }
    #cross-icon { top: 20px; right: 20px; width: 24px; height: 24px; }
}

@media (max-width: 480px) {
    #popup-tester-card {
        width: 92%;
        max-width: 300px;
        padding: 30px 20px;
        border-radius: 25px;
    }
    #popup-tester-card h1 { font-size: 38px; }
    #popup-tester-card .popup-tester-content { gap: 10px; }
    #popup-tester-card .popup-tester-check   { gap: 8px; }
    #popup-tester-card .email-input   { padding: 8px 14px; }
    #cross-icon { top: 15px; right: 15px; width: 22px; height: 22px; }
}

#popup-tester-card small {
    display: block;
    font-size: 12px;
    color: red;
    margin-top: 4px;
}

#width {
    max-width: 425px;
    width: 100%;
}





    /* Specific classes */

    /* Footer */
.social-icon {
    width: 40px;
    height: 40px;
}

hr {
    border: none;
    height: 1px;
    background-color: var(--white);
    border-radius: 50px;
    opacity: 1;
    margin: 0;
}

.footer-me-md-60 {
    margin-right: 0;
}

@media (min-width: 768px) {
    .footer-me-md-60 {
        margin-right: 60px;
    }
}

    /* Background */
.background-paw {
    z-index: -1;
    position: fixed;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

    /* Dino's */
.card {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1055px;
    margin: auto;
    margin-bottom: 60px;
    padding-left: 90px;
    padding-right: 90px;
    border-radius: 50px;
    background-color: var(--primary-t-20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    }

@media (max-width: 1200px) {
    .card {
        margin-left: 120px;
        margin-right: 120px;
    }
}

@media (max-width: 992px) {
    .card {
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (max-width: 768px) {
    .card {
        margin-left: 60px;
        margin-right: 60px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 480px) {
    .card {
        margin-left: 30px;
        margin-right: 30px;
    }
}


    /* Waarom & Hoe */
.info-card {
    background-color: var(--primary-20);
    width: 270px;
    height: 210px;
    border-radius: 50px;
    position: relative;
}

.info-badge {
    background-color: var(--primary-80);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}

.steps li::marker {
    font-family: var(--font-poppins);
    font-weight: 700;
}

ul.sparkle {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

ul.sparkle li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 1rem;
    line-height: 1.4;
}

ul.sparkle li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 20px;
    height: 20px;
    background: url("/images/icons/Sparkle.svg") no-repeat center;
    background-size: contain;
}

.arrow-icon-down {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("../images/icons/ArrowDown.svg") no-repeat center;
    background-size: contain;
    transition: transform .3s ease;
}

.faq-item.open .arrow-icon-down {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;               /* verborgen standaard */
    padding-top: 10px;
}

.faq-item.open .faq-answer {
    display: block;              /* zichtbaar bij open state */
}

.faq-question {
    cursor: default; /* default cursor over gap */
}

.faq-click {
    cursor: pointer; /* pointer on text or arrow */
}


    /*Contact*/
.card-contact {
    display: flex;
    flex-direction: column;
    padding: 45px 60px;
    border-radius: 50px;
    background-color: var(--primary-t-20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-sizing: border-box;
}

.card-contact .email-input {
    display: block;
    box-sizing: border-box;
    border: 2px solid var(--primary-100);
    border-radius: 9999px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--font-poppins), var(--font-default);
    font-weight: 500;
    color: var(--gray-70);
    background: var(--white);
    outline: none;
    box-shadow: none;
}
.card-contact .email-input::placeholder { color: var(--gray-40); }
.card-contact .email-input:focus { border-color: var(--primary-100); }

.card-contact--form { justify-content: flex-start !important; }

.card-contact--form > .form-message {
    flex: 1 1 auto;         /* this form grows to fill leftover vertical space */
    min-height: 0;          /* allow proper flex shrinking */
    height: 200px;
    display: flex;          /* so its child can stretch */
    flex-direction: column;
}

.card-contact .email-input-message {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    resize: none;                /* optional: prevent manual resize */
    box-sizing: border-box;
    border: 2px solid var(--primary-100);
    border-radius: 35px;
    padding: 15px 15px;
    font-size: 14px;
    font-family: var(--font-poppins), var(--font-default);
    font-weight: 500;
    color: var(--gray-70);
    background: var(--white);
    outline: none;
    box-shadow: none;
}

.card-contact .email-input-message::placeholder { color: var(--gray-40); }
.card-contact .email-input-message:focus { border-color: var(--primary-100); }


.card-contact--small {
    padding: 30px 45px;
}

/* Right rail: stacked by default (mobile-first) */
.right-rail {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: max-content;
    max-width: 100%;
}


/* === tablet === */
@media (max-width: 992px) {
    .card-contact {
        padding: 30px 45px;
        border-radius: 40px;
    }

    .right-rail {
        flex-direction: row;            /* image beside cards */
        align-items: flex-start;
        gap: 30px;
    }

    .right-rail > div:first-child {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    .right-rail .card-contact--picture {
        width: 306px;
        height: 356px;
    }
}

/* === phone === */
@media (max-width: 768px) {
    .card-contact {
        padding: 15px 30px;
        border-radius: 35px;
    }

    .right-rail {
        flex-direction: column;            /* side by side */
        align-items: flex-start;
        gap: 30px;
    }

    /* The first child (the two stacked cards) */
    .right-rail > div:first-child {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    /* Image card smaller for tablets */
    .right-rail .card-contact--picture {
        width: 100%;
        height: 356px;
        flex: 0 0 auto;
    }

    .card-contact--small {
        padding: 15px 30px;
        width: 100%;
    }
}


.card-contact--picture {
    display: flex;                 /* easy centering of the image */
    align-items: center;
    justify-content: center;

    width: 346px;                  /* fixed width */
    height: 402px;                 /* fixed height */

    padding: 30px 45px;            /* inner spacing around the image */
    border: 3px solid var(--primary-100);
    background: var(--white);
    border-radius: 50px;
    box-sizing: border-box;
    overflow: hidden;              /* keeps rounded corners clean */
}

.card-contact--picture img {
    display: block;
    width: 100%;                   /* fit within width */
    height: 100%;                  /* fit within height */
    object-fit: contain;           /* image scales, no cropping */
}




/* Special Animations */


    /* Hover */
.hover-big:hover {
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out !important;
}

.hover-underline:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--white) !important;
}

.hover-underline-black:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--black) !important;
}


    /* Hamburger menu */
        /* Mobile overlay panel */
@media (max-width: 1199.98px) {
    #navbar-bar {
        padding-bottom: var(--space-15);
        padding-top: var(--space-15);
    }

    header {
        padding-bottom: 0 !important;
    }

    /* Navbar toggler (hamburger icon) */
    .navbar-toggler {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .navbar-toggler-icon {
        background-image: none;
        position: relative;
        width: 36px;       /* proportional width */
        height: 26px;      /* total height */
        display: inline-block;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after,
    .navbar-toggler-icon span {
        content: "";
        display: block;
        background-color: var(--white);
        height: 4px;                /* line thickness */
        border-radius: 9999px;      /* pill effect */
        position: absolute;
        width: 100%;
        left: 0;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .navbar-toggler-icon::before { top: 0; }
    .navbar-toggler-icon span    { top: 11px; } /* middle bar */
    .navbar-toggler-icon::after  { bottom: 0; }

    /* Animate hamburger into X (syncs via aria-expanded) */
    .expanded .navbar-toggler-icon::before {
        transform: rotate(45deg);
        top: 11px;
    }
    .expanded .navbar-toggler-icon::after {
        transform: rotate(-45deg);
        bottom: 11px;
    }
    .expanded .navbar-toggler-icon span {
        opacity: 0;
    }

    /* Animate container pill corners (no layout jump) */
    header > .container-fluid {
        transition: border-radius 0.1s ease;
        position: relative; /* anchor overlay; prevents layout shifts */
    }
    header > .container-fluid.nav-open {
        border-radius: 42px 42px 0 0 !important; /* rounded top, flat bottom */
    }

    /* Overlay background attached to navbar */
    .mobile-overlay {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: var(--primary-100);
        overflow: clip;                 /* tighter than hidden; avoids scrollbars */
        border-radius: 0 0 42px 42px;               /* bottom corners */
        padding-inline: var(--space-30);/* keep side padding constant */
        transition: height 0.4s ease, padding-block 0.4s ease;
        will-change: height;
    }

    /* Only set height:0 while it's collapsed */
    .mobile-overlay.collapse:not(.show) {
        height: 0;
        padding-block: 0;
    }

    /* When shown, let it be natural height (JS will set inline height during anim) */
    .mobile-overlay.collapse.show {
        height: auto;                 /* important: DON'T force it back to 0 */
    }

    /* Stack nav items vertically */
    .navbar-nav {
        flex-direction: column !important;
        align-items: flex-start;
        gap: var(--space-15);
    }
    .navbar-nav .nav-item {
        padding-right: 0 !important;
    }

    /* Button underneath links, full width */
    .mobile-overlay > div:last-child {
        margin-top: var(--space-30);
        width: 100%;
    }
    .mobile-overlay button {
        width: 100%;
    }
}


/* Desktop: links stay white in colored header */
@media (min-width: 1200px) {
    .navbar .nav-link {
        color: var(--white) !important;
    }
}


/* Underline bar */

/* Tweakable tokens */
:root{
    --underline-color: #5F97CB;   /* or use currentColor 224E77*/
    --underline-height: 4px;      /* thickness of the bar */
    --underline-offset: 0.2em;   /* distance below text */
    --underline-speed: 600ms;     /* animation duration */
}

/* Make the link the positioning context */
.fx-underline {
    position: relative;
    display: inline-block;        /* so the underline matches text width */
    text-decoration: none !important;
}

/* The animated pill underline */
.fx-underline::after {
    content: "";
    position: absolute;
    inset-inline: 0;              /* left: 0; right: 0; (RTL safe) */
    bottom: calc(-1 * var(--underline-offset));
    height: var(--underline-height);
    background: var(--underline-color);
    border-radius: 9999px;        /* rounded “pill” ends */
    transform: scaleX(0);         /* start collapsed at center */
    transform-origin: center;     /* grow from the middle outward */
    transition: transform var(--underline-speed) cubic-bezier(.2,.7,.1,1);
    /* will-change: transform;  // optional */
}

/* Show on hover/focus (keyboard accessible) */
.fx-underline:hover::after,
.fx-underline:focus-visible::after,
.fx-underline.active::after {
    transform: scaleX(1);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fx-underline::after {
        transition: none;
    }
}


/* How flip mobile */
.flip-card {
    /* Below 1200px we use this as the interactive card.
       At ≥1200px we let children flow in a row. */
    width: 100%;
    max-width: 1200px;
}

.flip-card-inner {
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
}

/* ---- Desktop (≥1200px): side-by-side, no flipping ---- */
@media (min-width: 1200px) {
    .how-wrapper { gap: 24px; }

    .flip-card { cursor: default; }
    .flip-card-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        transform: none !important;
    }
    .flip-card-front,
    .flip-card-back {
        position: static;
        transform: none !important;
        width: auto;
        backface-visibility: visible;
    }
    .flip-card-back img { display: block; }
}

/* ---- Mobile/Tablet (<1200px): flip behavior, using your card styles ---- */
@media (max-width: 1199.98px) {
    /* keep 60px gap between sections */
    .how-wrapper { display: block; margin: 0; }
    .how-wrapper:not(:last-child) { margin-bottom: 60px; }

    .flip-card {
        position: relative;
        margin: 0 auto;
        perspective: 1000px;
        cursor: pointer;
        /* choose a height that fits your taller face; tweak if needed */
        min-height: 520px;
    }

    .flip-card-inner {
        transform-origin: top center;
        position: relative;
        height: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }

    /* Faces: no background/border here — your #how-card-* defines the look */
    .flip-card-back {
        position: absolute;
    }

    .flip-card-front,
    .flip-card-back {
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0;                /* let your #how-card-* padding/margins apply */
        background: transparent;   /* avoid blue “pills” */
        border: none;
        border-radius: 0;
        backface-visibility: hidden;
        padding-top: 24px;
    }

    .flip-card-front { transform: rotateY(0deg); }
    .flip-card-back  { transform: rotateY(180deg); }

    /* Flip state */
    .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }

    /* Make your front cards fit nicely on small screens */
    .flip-card-front #how-card-parents,
    .flip-card-front #how-card-kids {
        width: 100%;
        height: auto;
        max-width: 680px;   /* keep your readable width */
        margin: 30px;       /* keep your margin */
    }

    /* Image face: center & scale the images; keep your desktop rules intact */
    .flip-card-back #how-image-parents,
    .flip-card-back #how-image-kids {
        display: block;
        margin: 0 auto;
        max-width: 85vw;    /* fits narrow screens */
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: top;
        border-radius: 24px;
    }

    /* For ≥576px — limit by height instead of width */
    @media (max-width: 575.98px) {
        .flip-card-back #how-image-parents,
        .flip-card-back #how-image-kids {
            display:block;
            margin:0 auto;
            width:100%;
            height:auto;
            max-width:100%;
            object-fit:contain;
            object-position:top;
        }
    }

    /* ≥576px: limit by the card’s height */
    @media (min-width: 576px) and (max-width: 1199.98px) {
        .flip-card-back #how-image-parents,
        .flip-card-back #how-image-kids {
            display:block;
            margin:0 auto;
            width:auto;
            height:600px;       /* <= fills the back face (i.e., card height) */
            max-height:100%;
            object-fit:contain;
            object-position:top;
        }
    }
}





/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .flip-card-inner { transition: none; }
}