/*--GLOBAL SETTINGS--*/

body {
    margin: 0px;
    background-color: #0A0E1A;
font-family: "Inter", sans-serif;
}

h1 {
    color: aliceblue;
    font-size: 72px;
    font-family: "Inter", sans-serif;
}

h2 {
    color: aliceblue;
    font-size: 48px;
    font-family: "Inter", sans-serif;

}

h3{
    font-family: "Inter", sans-serif;
}

.italic{
    font-style: italic;
}
.sigma-svg{
    align-self: flex-start;
}

.display-none{
    display: none !important;
}

.button-wrapper{
    display: flex;
    
}


p {
    color: #99A1AF;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 300;
}

a{
    font-family: "Inter", sans-serif;
    font-size: 14px;
}

.lineheight-32{
    line-height: 32px;
}

.lineheight-29{
    line-height: 29px;
}

.lineheight-24{
    line-height: 24px;
}

.lineheight-20{
    line-height: 20px;
}

.button-text{
    margin: 0px !important;
    color: white;
}

.grayish{
    color: #D1D5DC;
}
p.dark-gray{
    color: #6A7282 !important;
}

.text-small{
    font-size: 14px !important;
}

.text-medium{
    font-size: 16px !important;
}

.no-margin{
    margin:0px;
}


.text-big{
    font-size: 18px !important;
}

.bold{
    font-weight: bold;
}
.align-items-center {
    align-items: center !important;
}

.min-height-300{
    min-height: 300px;
}

.min-width-250{
    min-width: 250px;
}

.max-width-310{
    max-width: 310px;
}

.gap-5{
    gap:5px;
}

.gap-10{
    gap:10px
}

.gap-15{
    gap:15px !important;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}

.gap-35{
    gap:35px;
}

.p-20{
    padding: 20px;
}
.pb-20{
    padding-bottom: 20px;
}

.mt-top-130 {
    margin-top: 130px;
}

.mt-top-15{
    margin-top: 15px;
}

.mt-top-20{
    margin-top: 20px;
}

.mt-top-50{
    margin: 50px;
}



.pt-top-5{
    padding-top: 5px;
}

.mt-top-30{
    margin-top:30px;
}
.ml-7{
    margin-left: 7px;
}

.pr-40px{
    padding-right: 40px;
}

.mb-10 {
    margin-bottom: 10px;
}

.text-nowrap{
    text-wrap: nowrap;
}
.text-padding-7 p {
    padding: 7px 0px;
}

.text-padding-9 p {
    padding: 9px 0px;
}

.note {
    display: flex;
    flex-direction: row;
    background: #155DFC59;
    border: 1px solid #2B7FFF4D;
    padding: 6px 14px;
    border-radius: 50px;
    text-align: center;
    align-items: center;
    gap: 7px;
}

.dot{
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #99A1AF4D;
}

.row{
    display: flex;
    flex-direction: row;
}
.note p {
    font-size: 14px;
    margin: 0;
    color: #51A2FF;

}

.title-span{
    display: block;
}

.flex-item {
    flex: 1 1 0;
}


.color-blue {
    color: #51A2FF;

}

.justify-content-flex-start {
    justify-content: flex-start;
}


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

.justify-content-flex-end {
    justify-content: flex-end;
}

.align-self-cener {
    align-self: center;
}

.rotate-left-disabled {
    display: inline-flex;
    transform: rotate(90deg);
    line-height: 1;
    align-items: center;
    justify-content: center;
}

.inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    justify-self: center;
    height: 85%;
    width: 100%;
    max-width: 1280px;
    margin: auto;
}

button {
    display: flex;
    justify-content: center;
    align-items: center;
   padding: 13px 30px;
    background-color: #155DFC;
    color: white;
    border: 0px;
    border-radius: 10px;
    text-wrap: nowrap;
    min-width: 140px;
}

.button-element{
     display: flex;
    justify-content: center;
    align-items: center;
   padding: 10px 4px;
    background-color: #1951CB;
;
    color: white;
    border: 0px;
    border-radius: 10px;
    text-wrap: nowrap;
    min-width: 140px;

}

.button-element p{
     margin: 0;
    font-size: 14px;
    font-weight: 300;
    color: white;
}

button p{
    margin: 0;
    font-size: 14px;
    color: white;
}

.button p{
    color: white;
    margin: 0px;
    font-size: 16px;
}


.button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #1951CB;
    color: white;
    border: 0px;
    margin-right: 20px;
    white-space: nowrap;
    gap: 10px;
}

.button.arrow{
     padding: 20px 35px;
}

.button-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 26px;
    border-radius: 10px;
    font-size: 15px;
    background-color: #083860;
    color: white;
    border: 1px solid #FFFFFF1A;
    margin-right: 20px;
    white-space: nowrap;
}

.button-2 p{
    margin:0px;
    color: white;
    font-size: 16px;
}

.page-intro-v1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
}

.intro-text {
    color: #51A2FF;
    letter-spacing: 0.55px;
    font-size: 14px;
    font-weight: 300;
}


.left {
    justify-self: flex-start;
}

.align-self-flex-start{
    align-self: flex-start;
}

.center {
    justify-self: center;
}

.right {
    justify-self: flex-end;
}

.title-2 {
    margin: 0px;
    font-size: 48px;
    color: aliceblue;
}

.full-width {
    width: 100%;
}

.justify-content-end {
    justify-content: end !important;
}

/*--GLOBAL SETTINGS--*/



/*--default settings for links--*/
a {
    color: aliceblue;
    text-decoration: none !important;
}

.container {
    display: flex;
    flex-direction: column;
    justify-self: center;
    width: 100%;
}

/*--NAVBAR--*/
.navbar {
    height: 80px;
    width: 100%;
    background: #0A0E1AE5;
    position:fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar a{
    color: #D1D5DC;
}

.navbar .navbar-logo{
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
}

.navbar .navbar-logo p{
    color: #51A2FF;
    font-weight: 300;
    text-align: left;

}

.navbar .btn{
    margin-right: 30px;;
}


.navbar .navbar-content {
    width: 65%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 1248px;
}


.nav-item {
    flex: 1 1 0;
}

.navbar .navbar-content .navbar-title h2 {}


.navbar .navbar-content .navbar-title h3 {}

.title-main {
    display: flex;
    flex-direction: column;
}

.navbar .navbar-content .navbar-title .title-top {
    margin: 0px;
    font-size: 30px;
    font-weight: 10;
    letter-spacing: 4px;
}

.navbar .navbar-content .navbar-title .title-bottom {
    align-self: flex-end;
    margin: 0px;
}

.navbar .navbar-title {
    color: aliceblue;
    padding-right: 10px;
    display: flex;
    flex-direction: row;
}

.navbar-title .title-item {
    display: flex;
    align-items: center;

    padding-left: 15px;
    padding-right: 15px;
}

.navbar-title .title-item.link p {
    color: #51A2FF;
    font-size: 14px;
}


/*--NAVBAR LINKS--*/
.navbar-link p {
    color: rgb(5, 102, 187);
    text-decoration: none !important;
}

/*--NAVBAR LINKS--*/

/*--NAVBAR CATEGORIES--*/
.categories {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left:70px;
}

.categories a {
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
    font-weight: 300;
}

.categories a p{
    margin: 0px;
    font-size: 14px;
    color: #D1D5DC;
}
/*--NAVBAR CATEGORIES--*/

/*--NAVBAR BUTTON--*/
.btn {
    display: flex;
    justify-content: center;
}

.btn button {
   
}

/*--NAVBAR BUTTON--*/

/*--MENU TOGGLE--8*/
.toggle-menu-btn {
    display: none;
    align-items: center;
}

.toggle-menu-btn img {
    max-width: 60px;
    max-height: 60px;

}

.toggle-dropdown {
    display: none;
}

/*--MENU TOGGLE--*/

/*--MERKBARE GROEI --*/
#merkbare-groei {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-end;
    padding-top: 250px;
    width: 100%;
    background-image: url("images/hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*
#merkbare-groei .inner-container.width-fit-content {
   width: fit-content !important;
}
*/

#merkbare-groei .inner-container .title-container {
    display: flex;
    flex-direction: row;
}

#merkbare-groei .inner-container .title-container h1 {
    margin-top:32px;
    margin-bottom: 17px;
}

#merkbare-groei .inner-container .text-container {
    height: fit-content;
    width: 55%;
    margin-bottom: 7px;
}

#merkbare-groei .inner-container .text-container p {
    color: rgb(209, 214, 219);
    font-size: 20px;
    max-width: 700px;
    margin-top:7px;
}


#merkbare-groei .inner-container .button-container {
    display: flex;
    flex-direction: row;
    height: fit-content;

}

#merkbare-groei .inner-container .scroll-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    gap: 3px;
}

#merkbare-groei .inner-container .scroll-container p {
    margin:0px;
    letter-spacing: 0.55px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
}

#merkbare-groei .inner-container .scroll-container .scroll {
    display: flex;
    text-align: center;
    margin-bottom: 100px
}

#merkbare-groei .company-container {
    margin-top: 30px;
    padding-bottom:320px;
}

#merkbare-groei .company-container .company-name-list-row {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

#merkbare-groei .company-container .company-name-list-row .company-name {}

#merkbare-groei .company-container p {
    font-size: 14px;
}

#merkbare-groei .company-container .company-name-list-row .company-name h3 {
    color: aliceblue;
    font-size: 27px;
    font-family: int;
    font-family: "Inter", sans-serif;
    margin: 0px;
}

/*--MERKBARE GROEI --*/

/*--MERKWAARDE--*/

#merkwaarde {
    padding-top: 80px;
    padding-bottom: 130px;
    background: rgba(10, 14, 26, 1);

}

#merkwaarde .wrap {
    display: flex;
    flex-direction: column;
}

#merkwaarde .inner-wrapper {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 70px;
}

#merkwaarde .title-container {
    margin-top: 50px;
}

#merkwaarde .title-container h2 {
    margin-top: 20px;
}

#merkwaarde .wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: center;
}

.half-filler {
    width: 100%;
    height: 50%;
}

#merkwaarde .flex-item {
    flex: 1 1 200px;
}

#merkwaarde .card-holder {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

#merkwaarde .merk-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    justify-self: center;
    background: linear-gradient(135deg, rgba(21, 93, 252, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 10px;
    border-right: 2px solid #585e674d;
    border-left: 2px solid #585e674d;
    border-top: 1px solid #8f97a34d;
    border-bottom: 1px solid #8f97a34d;

}

#merkwaarde .merk-card-nested {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    justify-self: center;
    background: linear-gradient(135deg, rgba(21, 93, 252, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
    padding:20px 15px;
    border-radius: 16px;
    border: 1px solid #585e674d;
    margin-top: 10px;

}


#merkwaarde .inner-merk-card {
    display: flex;
    flex-direction: column;
    align-self: center;
    width: calc(100% - 40px);
    padding: 20px 20px;
}

#merkwaarde .inner-merk-card-nested {
    display: flex;
    flex-direction: column;
    align-self: center;
    width: calc(100% - 40px);
    height: 100%;
    padding: 15px 15px;
    min-height: 140px;

}

#merkwaarde .card-flex-row{
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    align-items: center;
    padding-bottom: 20px;
}
#merkwaarde .merk-card .card-icon {
margin-bottom: 10px;
}

#merkwaarde .merk-card .card-title {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 7px;
    align-items: center;
}

#merkwaarde .nested-card .inner-nested-card p {
    font-size: 12px;
}

#merkwaarde .merk-card .card-title.custom {
  
}

#merkwaarde .merk-card .card-title h3 {
    display: flex;
    flex-direction: column;
    text-align: left;
    color: white;
    margin: 0px;
    font-size: 18px;
}

#merkwaarde .merk-card .card-title h3 .title-first {
    font-size: 30px;
    letter-spacing: 8px;
    font-family: "Inter", sans-serif;
}

#merkwaarde .merk-card .card-title h3 .title-secondary {
   text-align: right;
  font-family: "Montserrat", sans-serif;
  margin-right:8px;
}





#merkwaarde .merk-card .card-text {}

#merkwaarde .merk-card-nested p{
font-size: 14px;
}

#merkwaarde .merk-card .card-text p {
    margin: 0px;
    margin-top: 0px;
    padding-bottom:5;
}

#merkwaarde .flex-item-intro {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding-bottom: 30px;
}

#merkwaarde .flex-item-intro h2 {
    margin: 0px;
    margin-bottom: 10px;
    max-width: 510px;
    line-height: 48px;
}


#merkwaarde .flex-item-intro p {}

#merkwaarde .flex-item.flex {
    display: flex;
}

#merkwaarde .nested-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    padding: 3px 0px;
    align-items: center;
    justify-content: center;
    height: fit-content;
    background: #FFFFFF0D;
    border: 1px solid #FFFFFF1A;
    border-radius: 10px;
    max-height: 95px;
}

#merkwaarde .nested-card .inner-nested-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80%;
    width: 90%;
}

#merkwaarde-part2 {
    background: #0A0E1A;
}

#merkwaarde-part2 .outro-text {
    display: flex;
    margin-top: 50px;
    margin-bottom: 40px;
    width: 100%;
    height: 100%;
    justify-content: center;
    text-align: center;
}

#merkwaarde-part2 .outro-text p {
    font-size: 10px;
}

#merkwaarde-part2 .card-title{
    font-family: "Inter", sans-serif;
}


/*--MERKWAARDE--*/

/*--GRADIENT CARD--*/



.text-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/*--GRADIENT CARD-MEDIUM--*/
.cards-medium {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-self: flex-start;
    margin-bottom: 20px;
}

.gradient-card-medium {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;

    background: linear-gradient(135deg, rgba(21, 93, 252, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 10px;
    border: 1px solid #99A1AF4D;
}

/*--GRADIENT CARD-MEDIUM--*/

.card-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 32px;
    margin-top: 48px;
}

.cards {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-self: center;
}

.gradient-card {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(21, 93, 252, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 10px;
    border: 1px solid #99A1AF4D;
    max-width: 410px;
    min-width: 400px;
}


.card-container {
    display: flex;
    flex-direction: column;
    margin: 20px 0px;
    width: 80%;
}

.card-container .card-title {
    color: aliceblue;
    font-size: 24px;
    margin-top: 13px;
    margin-bottom:11px;
}

.card-container .card-text {
   color: #99A1AF;

    font-size: 15px;
}

.card-container .card-note {
    color: #51A2FF;
    font-size: 15px;
    font-weight: 300px;
    margin: 0px
}

.gradient-card .card-container .card-number {
    color: #155DFC59;
    font-size: 60px;
    font-weight: 700;
    margin: 0px;
}

.card-container .card-icon {
    color: rgb(16, 107, 187);
    font-size: 30px;
    margin: 0px;
}

/*--GRADIENT CARD-LARGE--*/
.cards-large {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-self: flex-start;
    margin-bottom: 20px;
}

.gradient-card-large {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 400px;

    background: linear-gradient(135deg, rgba(21, 93, 252, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 10px;
    border: 1px solid #99A1AF4D;
}



/*--INNER CARD--*/
.inner-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 100%;
    background-color: rgb(20 21 30);
    border-radius: 10px;
}

.inner-card-container {
    display: flex;
    flex-direction: row;
    width: 95%;
    height: 85%;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
}

.inner-class-logo {
    flex: 1 1;
}

.inner-class-logo h2 {
    color: aliceblue;
    margin: 0;
    margin-left: 10px;
}

.inner-card .card-text {
    flex: 2 1;
}

/*--INNER CARD--*/


/*--GRADIENT CARD-LARGE--*/


/*--GRADIENT CARD--*/




/*--VISIES--*/
#visies {
    background: rgba(15, 20, 32, 1);

    padding: 100px 0px;
}

#visies .intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}

#visies .intro h2 {
    font-size: 48px;
    margin: 0px;
    text-align: center;
}

#visies .intro p {
    text-align: center;
}

#visies .flex-row-test {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
}

#visies .flex-test {
    flex: 1 1 400px;
    background: linear-gradient(135deg, rgba(21, 93, 252, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
    overflow: hidden;
    height: auto;
    text-align: left;
    border: 1px solid #525a694d;
    border-radius: 16px;
    min-width: 0;
     padding-bottom: 35px;
}

#visies .flex-test img {
    width: 100%;
max-height: 320px;
    object-fit: cover;
    margin-bottom: 20px;
}

#visies .card-inner {
    width: 90%;
    height: fit-content;
    margin: 0 auto;
    /*centers item */
}

.krachtwerk {
    .custom-header {
        margin-top: 20px;
    }
}

.custom-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;
    gap:40px;
}

.custom-header h2 {
    font-size: 3rem;
    margin: 0px;
    margin-right: 10px;
}



.custom-header p {
    margin: 0px;
    color: #51A2FF;
}

#visies .card-buttons {
    display: flex;
    flex-direction: row;
    justify-self: flex-start;
    width: 50%;
    height: max-content;
    gap: 10px;
    margin:30px 0px;
}

#visies .card-buttons .card-button {
    flex: 1 1 0;
    background-color: #FFFFFF0D;
    border: 1px solid #FFFFFF1A;
    padding: 5px 5px;
    text-align: center;
    text-wrap:nowrap;
    border-radius: 50px;
    font-size: 12px;

    display: flex;
    justify-content: left;
    gap: 9px;
    align-items: center;

}

#visies .card-button svg{
margin-left:3px;
}
#visies .card-inner .page-link {
    display: flex;
    flex-direction: row;
    color: #51A2FF;
    gap: 5px;
}

#visies .card-inner .page-link p{
    color: #51A2FF;
    margin:0px;
}

/*--VISIES--*/




/*--SPEL--*/
#spel {
    padding-bottom: 100px;
    background: #0F1420;

}

#spel .flex-row-test {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 40px;
}

#spel .flex-test {
    flex: 1 1 400px;
    background: linear-gradient(135deg, rgba(21, 93, 252, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    ;
    overflow: hidden;
    height: auto;
    text-align: left;
    border: 1px solid #99A1AF4D;
    border-radius: 16px;
    min-width: 0;
    
}

#spel .flex-test.blue {
    border: 1px solid #2B7FFF4D
}

#spel .flex-test.red {
    border: 1px solid #FB2C364D;
    background: linear-gradient(135deg, rgba(231, 0, 11, 0) 0%, rgba(0, 0, 0, 0) 100%);

}

#spel .card-inner .custom-header h2 {
    margin-top: 20px;
}

#spel .intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom:50px;
}

#spel .intro h2 {
    font-size: 48px;
    margin: 0px;
}

#spel .card-inner {
    width: 90%;
    height: fit-content;
    margin: 0 auto;
    padding: 20px 0px;
    /*centers item */
}

#spel .card-inner h2 {
    font-size: 24px;
}

#spel .checked-item {
    display: flex;
    flex-direction: row;
}

#spel .checked-item p {
    margin: 10px 0px;
    font-weight: 300;
    font-size: 16px;
}

#spel .checked-item-list {
    margin-top: 30px;
}


/*--SPEL--*/


/*--ESSENTIE-*/
#essentie {
        background: linear-gradient(180deg, #0c1631, #0a0f21);


   border-top: 1px solid #99A1AF4D;
   border-right: 1px solid #99A1AF4D;
   border-left: 1px solid #99A1AF4D;
   border-radius: 24px;
   padding-bottom: 30px;
   
}

#essentie .button p{
    font-size: 18px !important;
    font-weight: 500;
}

#essentie .inner-container {
    margin-top: 100px;
    margin-bottom: 100px;
    align-items: center;
}

#essentie .inner-container p {
    margin-top: 25px
}


#essentie .intro {
    display: flex;
    margin-bottom: 60px;
    flex-direction: column;
    justify-content: center;
    justify-self: center;
    align-self: center;
    align-items: center;
    text-align: center;
}

#essentie .button{
     background-color: #1951CB;
}

#essentie .intro h2 {
    font-size: 48px;
    margin: 0px;

}

#essentie .buttons {
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 55px;

}

#essentie p{text-align: center;}

 #essentie .essentie-text{
    width: 50%;
 }

#essentie .button-essentie {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF0D;
    flex: 0.5 1 100px;
    padding: 10px 10px;
    border: 1px solid #FFFFFF1A;
    border-radius: 10px;
    text-wrap:nowrap;
}

#essentie .button-essentie p {
    margin: 0;
    color: white;
    font-size: 14px;
    font-weight: 300;
}

#essentie .shop-button{
    background-color: #1951CB;
    padding: 13px 16px;
    border-radius: 16px;
}

/*--ESSENTIE-*/

/*--FOOTER--*/
#footer {
        background-color: #060810;
        padding-top: 70px;
}

#footer .inner-container {
    align-items: center !important;
}

#footer .inner-footer {
    display: flex;
    flex-direction: column;
    padding-bottom: 70px;
}

#footer .footer-info{
    display: flex;
    flex-direction: row;
    padding-bottom: 40px;
}


#footer .footer-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 100px;
    text-align: left;
}

#footer .outline {
    border-top: 1px solid #ffffff1f;
    width: 100%;
}

#footer .footer-title {
    align-self: flex-start;
}

#footer .footer-title h2 {
    margin: 0;
    font-size: 35px;
}

#footer .footer-title h3 {
    margin: 0;
    color: white;
    font-size: 25px;
}

#footer .footer-text {
    align-self: flex-start;
    width: 65%;
    margin-bottom: 37px;
}

#footer .company-names {
    display: flex;
    align-self: flex-start;
    flex-direction: row;
    gap: 30px
}

#footer .company-names p {
    font-size: 25px;
    margin: 0px;
    color: white;
}

#footer .contact {
    flex: 1 1 100px;
    text-wrap: nowrap;
}

#footer .contact h3 {
    margin: 0px;
    color: white;
    font-size: 18px;
    font-weight:700;
    text-align: left;
    margin-bottom:13px;
}

#footer .footer-item {
    display: flex;
    flex-direction: row;
    justify-content: left;
    text-align: center;
    gap: 5px;
}

#footer .footer-item-wrapper {
    display: flex;
    flex-direction: column;
}

#footer .footer-svg-container{
    display: flex;
    align-self: start;
    flex-direction: row;
    gap: 30px;
}

#footer .footer-item-wrapper p {
    margin: 0px 0px;
}

#footer .navigatie {
    flex: 1 1 100px;
    text-wrap: nowrap;
}

#footer .navigatie h3 {
    margin: 0px;
    margin-bottom: 8px;
    color: white;
    font-size: 18px;
}

.footer-container {
    display: flex;
    justify-content: center;
    text-align: left;
}


#footer .bottom-footer {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
#footer .bottom-footer .bottom-footer-content{
    display: flex;
    flex-direction: row;
    width: 100%;
}

#footer .bottom-footer .rechten {
    display: flex;
    justify-content: flex-start;
}

#footer .bottom-footer .rechten p {
    color: #6A7282;
}


#footer .bottom-footer .voorwaarden {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: flex-end;
}

#footer .bottom-footer .voorwaarden .voorwaarden-item p{
    color: #6A7282;
}


#footer .inner-footer-item{
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#footer .footer-container-inner{
display: flex;
flex-direction: column;
justify-content: left;
}

#footer .wrap-test{
    display: flex;
    flex-direction: row;
    flex: 1 1 100px;
    padding-right: 70px;
    padding-left: 70px;
}



/*--FOOTER--*/


/*--MEDIA QUERIES--8*/


/* sm */
@media (max-width:575px) {
    #merkwaarde .gradient-card-large {
        height: 300px;
        width: 300px;
    }

    #merkwaarde .card-holder {
        flex-wrap: wrap;
        justify-content: center;
    }

    .card-container.res-container {
        width: 95%;
        height: 95%;
    }

    #footer .sigma-svg{
        align-self: flex-start;
    }

    #footer .footer-text{
        text-align: left;
    }

    #footer .contact{
        align-self: flex-start;
    }

    #footer .text-big.bold{
        justify-self: flex-start;
    }

    #footer .navigatie{
        align-self: flex-start;
    }

    #footer .navigatie h3{
        text-align: left;
    }

    #footer .footer-item{
        justify-content: left;
    }

    .title-2{
        font-size: 36px;
    }



}

/* md */
/* xl */

@media (max-width:1599px){
    .categories{
        padding-left:0px;
    }
}

@media (max-width:1499px){
    .inner-container {
       max-width: 900px;
    }

    #visies .card-buttons .card-button{
        justify-content: center;
    }

    #visies .card-button svg {
        margin-left: 0px;
    }

    #merkbare-groei .inner-container .text-container p {
        text-align: center;
    }
}

@media (max-width:1399px) {
    .inner-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
        justify-content: center !important;
        align-self: center !important;
        align-items: center !important;
    }

    .navbar .navbar-logo{
        margin-left:0px;
    }

    .navbar .btn{
        margin-right:0px;
    }

    #merkwaarde .title-container {
        text-align: center;
    }

    #merkwaarde p{
        max-width: 700px;
    }

    #merkwaarde .flex-item-intro {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    #merkwaarde .flex-item-intro {
        width: 100%;
        text-align: center;
        align-items: center;
    }
}

/* lg+ */
@media (max-width:1299px) {}

/* lg */
@media (max-width:991px) {
    .inner-container {
        align-items: center;
        width: 90%;
    }

    .inner-wrapper {
        width: 100%;
    }

    .cards {
        align-self: center;
        flex-direction: column;
    }

    .cards-medium {
        align-self: center;
        flex-direction: column;
        width: 100%;
    }

    .cards-large {
        align-self: center;
    }

    #footer .footer-intro {
        text-align: center;
        padding-bottom: 30px;
    }

    #footer .inner-footer {
        flex-direction: column;
    }

    #footer .footer-title {
        width: 100%;
        align-self: center;
    }

    #footer .footer-text {
        width: 100%;
    }

    #footer .company-names,
    .sigma-svg,
    #footer .footer-svg-container {
        align-self: center;
    }

    #essentie .essentie-text{
        width: 100%;
    }

    #merkbare-groei .inner-container .text-container p{
        text-align: center;
    }
 
    #footer .footer-info{
        flex-direction: column;
    }

    #footer .wrap-test{
        flex-direction: column;
        padding-left: 0px;
        padding-right:0px;
    }

    #footer .footer-item-wrapper{
        align-items: center;
    }

    #footer .contact h3 {
        text-align: center;
    }

    #footer .contact{
        padding-bottom: 30px;
    }

    #footer .contact.pr-40px{
        padding-right: 0px;
    }

    .categories{
        display: none;
    }
}

/* md */
@media (max-width:767px) {
    body .container {
        width: 100%;
    }

    .categories {
        display: none;
    }

    .nav-1{
        justify-content: center;
        flex: 2;
    }

    .nav-3{
        justify-content: flex-start;
    }

    .navbar .navbar-content .navbar-title {
        text-align: center;
    }

    .navbar .navbar-content .navbar-title .title-bottom {
        align-self: flex-end;
    }

    .navbar .navbar-content {
        width: 90%;
    }

    #merkbare-groei {
        align-items: end;
    }

    #merkbare-groei .inner-container {
        width: 95%;
    }

    #merkbare-groei .inner-container .button-container {
        flex-direction: column;
        height: fit-content;
    }

    #merkbare-groei .inner-container .button-container a {
        margin-bottom: 20px;
    }

    #merkbare-groei .inner-container .button-container .button-2 {
        padding: 15px 35px;
    }

    #merkbare-groei .inner-container .button-container .button-2 p {
        margin: 0px;
    }

    #merkbare-groei .inner-container .title-container h1 {
        font-size: 60px;
        margin-bottom: 0px;
    }

    #merkbare-groei .inner-container .text-container {
        width: 100%;
        margin-bottom: 0px;
    }

    .title-2 {
        font-size: 48px;
    }

    .title-container {
        text-align: left;
    }

    #visies .flex-row-test {
        width: 100%;
    }

    #visies .card-buttons{
        width: fit-content;
    }

    #footer .footer-intro {
        
    }
    #footer .inner-footer {
        flex-direction: column;
    }

    #footer .footer-title {
        width: 100%;
        align-self: left;
    }

    #footer .footer-text {
        width: 100%;
    }

    #footer .company-names{
        align-self: left;
    }

    .essentie-text{
        width: 70%;
    }

    .md-display-none{
        display: none;
    }

    .md-display-block{
        display: block;
    }
}

/* sm */
@media (max-width:575px) {
    .mt-top-50-sm{
        margin-top: 50px;
    }

    .text-small-sm{
        font-size: 14px !important;
    }

    .text-wrap-sm{
        text-wrap:wrap;
    }

    .text-medium-sm{
        font-size: 16px !important;
    }

    #merkwaarde .flex-item-intro {
        padding-bottom: 35px;
    }

    #merkwaarde .flex-item-intro h2 {
        font-size: 36px;
        padding-bottom: 50px;
    }

    #merkwaarde .gradient-card-large {
        height: 300px;
        width: 300px;
    }

    #merkwaarde .card-holder {
        flex-wrap: wrap;
    }

    .card-container.res-container {
        width: 95%;
        height: 95%;
    }

    #footer .sigma-svg{
        align-self: flex-start;
    }

    #footer .footer-text{
        text-align: left;
    }

      #footer .footer-item-wrapper{
        align-items: flex-start;
    }
    #footer .contact h3 {
        text-align: left;
    }

    #footer .contact{
        align-self: flex-start;
        padding-bottom: 40px;
    }

    #footer .text-big.bold{
        justify-self: flex-start;
    }

    #footer .navigatie{
        align-self: flex-start;
    }

    #footer .navigatie h3{
        text-align: left;
    }

    #footer .footer-item{
        justify-content: left;
    }

    #footer .footer-info{
        padding-left:20px;
    }

    #footer .footer-intro{
        padding-bottom:40px;
    }

    .title-2{
        font-size: 36px;
    }

    #visies .intro h2{
        font-size: 36px;
        max-width: 250px;
    }

    #essentie .intro h2{
        font-size: 36px;
    }

    .note{
        align-self:flex-start;
    }

    #merkbare-groei .inner-container .button-container{
        align-self: flex-start;
    }

    #merkbare-groei .inner-container .button-container{
        align-self: flex-start;
    }

    #merkbare-groei .inner-container .text-container p{
        margin-bottom: 5px;
        text-align: left;
    }

    #merkbare-groei .company-container{
         align-self: flex-start;
    }

    #merkbare-groei .inner-container .title-container{
        align-self: flex-start;
    }

    .flex-item-intro h2{
        text-align: left;
    }

    .align-self-flex-start-sm{
        align-self: flex-start;
    }
    .text-align-left-sm{
        text-align: left;
    }

    .text-align-center-sm{
        text-align: center;
    }

    #footer .bottom-footer-content{
        flex-direction: column !important;
        align-items: center;
        text-align: center;
    }

    .sm-display-none{
        display: none;
    }
    .sm-display{
        display:block !important;
    }

    .sm-column{
        flex-direction: column !important;
    }

    #merkbare-groei {
        padding-top:135px;
    }
    #merkwaarde .nested-card{
        padding:30px 0px;
    }

    #merkbare-groei .company-container {
        margin-top: 15px;
    }

    #merkwaarde .merk-card-nested{
        padding: 0px;
        padding-top:20px;
    }

    #merkwaarde .merk-card .card-text p{
        width: 100%;
    }

    #merkbare-groei .inner-container .scroll-container{
        margin-bottom:40px;
    }

    #merkbare-groei .company-container{
        margin-bottom: 60px;
    }

    #merkwaarde .inner-merk-card.custom {
        width: 100%;
        padding:0px;
    }

    #merkwaarde .flex-item.card-2{
        width: 100%;
    }

    #merkwaarde .merk-card{
        max-width: none;
    }

    #merkwaarde .card-flex-row{
        gap: 0px;
        padding-bottom: 0px;
    }

    #merkbare-groei .company-container{
        padding-bottom: 0px;
    }
    #merkwaarde .inner-merk-card-nested{
        padding:15px 15px;
    }

    #merkwaarde .nested-card .inner-nested-card p{
        text-wrap: nowrap;
    }

    .navbar .navbar-logo {
        gap:20px;
    }

    #essentie .text-small.dark-gray{
        max-width: 200px;
    }

    .blue-mark{
        min-width: 20px;
        min-height: 20px;
        padding: 13px;
        background-color:#155DFC ;
        border-radius: 14px;
    }

    .red-mark{
        min-width: 20px;
        min-height: 20px;
        padding: 13px;
        background-color:#E7000B ;
        border-radius: 14px;
    }

    #spel .row{
        align-items: center;
    }

    #merkbare-groei .inner-container .button-container .button-2{
        background-color: #FFFFFF0D;
        border: #FFFFFF1A;
        border: 1px solid #FFFFFF1A
    }

    .button-wrapper{
        align-self: flex-start;
        flex-direction: column;
    }

    .gradient-card{
        min-width: 300px;
    }

    .nested-card svg {
        margin: 0px;
    }

    #visies .intro{
        margin-bottom:30px;
    }

    #visies .intro p{
        max-width: 300px;
    }

    #merkwaarde{
        background: #0F1420;
    }

    #merkwaarde-part2 {
        background: #0F1420;
    }

    #essentie .inner-container p {
        max-width: 265px;
    }

    #essentie .buttons{
        gap:18px;
    }

    #essentie a div{
        gap: 10px;
    }

    .navbar .navbar-logo p{
        max-width: 70px;
    }

    #spel .intro h2{
        font-size: 36px;
        max-width: 300px;
    }
}