@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
  @import url('https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap');

  body {
  font-family: 'Open Sans', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  }

  h1 {
  font-size: 34px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 26px;
  }

  h4 {
  font-size: 21px;
  }

  h5 {
  font-size: 18px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 15px;
  }

  body,
  .product-usps li,
  .stock-message {
  color: var(--gray-900);
  }

  h1, h2, h3, h4, h5, h6 {
  color: var(--gray-900) !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: var(--primary-100) !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: var(--primary-300) !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: var(--primary-100) !important;
  color: #fff !important;
  }

  .btn:hover,
  .wpcf7-submit:hover,
  .woocommerce span.onsale:hover,
  .woocommerce a.button:hover,
  .woocommerce .button:hover,
  [type="submit"]:hover,
  .nf-form-content input[type=submit]:hover
  {
  background: var(--primary-300) !important;
  color: #fff !important;
  }

  div.social-media ul li a {
  background: var(--inverse-surface) !important;
  color: #fff !important;
  }

  div.social-media ul li a i {
  color: #fff !important;
  }

  div.social-media ul li a:hover {
  background: var(--primary-300) !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: var(--primary-100) !important;
  }

  div.phone a.phone, div.email a.email {
  background: var(--inverse-surface) !important;
  color: #fff !important;
  }

  div.phone a.phone, div.email a.email i {
  color: #fff !important;
  }

  div.phone a.phone:hover, div.email a.email:hover {
  background: var(--primary-300) !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: var(--inverse-surface);
  border-color: var(--inverse-surface);
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: var(--inverse-surface) !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: var(--inverse-surface) !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  .modal__container,
  .footer-cta-box,
  .rimg,
  [type="submit"] {
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  border-radius: 5px !important;
  }

  .img-responsive {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }



  header div.header {
  background-color: rgba(255, 255, 255, .5) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(255, 255, 255) !important;
  }

  @media only screen and (max-width : 992px) {
  header nav.navbar-default {
  background: none !important;
  }
  }





  @media only screen and (min-width : 992px) {
  header > div.wrapper {
  min-height: 260px;
  }
  header > div.wrapper.above {
  min-height: 410px;
  }

  header div.header div.holder {
  height: 160px;
  }
  }





  nav.navbar-default, div.navbar-collapse {
  background-color: var(--inverse-surface); !important;
  }

  @media only screen and (min-width : 992px) {
  
  div.navbar-collapse {
  background: none !important;
  }

  header nav.navbar-default {
  background-color: rgba(10, 0, 0, .5) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(10, 0, 0, .5) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  }

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:hover,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:focus,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:active {
  color: var(--inverse-surface) !important;
  }
  }


  section.featured div.wrapper {
  margin-top: 60px;
  }





  header div.header {
  text-align: center;
  }

  header div.navbar-collapse ul.navbar-nav li a, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  border-bottom: 1px solid var(--primary-100);
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse ul.navbar-nav li a, header nav.navbar-default div.navbar-collapse ul.navbar-nav li ul.dropdown-menu li.active > a {
  color: var(--primary-100) !important;
  }
  }


  header div.header div.contact i {
  color: var(--primary-100);
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse {
  text-align: right;
  }
  }

  section.featured div.item p,
  section.news div.item p {
  color: var(--gray-900) !important;
  }

  section.featured div.item,
  section.news div.item {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }

  section.partners {
  background: var(--primary-100) !important;
  }

  section.partners img {
  border-radius: 0 !important;
  }

  footer,
  .footer-cta.center:after,
  .author {
  background: var(--inverse-surface) !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid var(--primary-100);
  }

  footer div.socket,
  .footer-sticky {
  background: var(--primary-300) !important;
  }


  section.treatments div.items div.item img {
  border-radius: 100% !important;
  }

  .img-circle {
  border-radius: 100% !important;
  }

  section.treatments div.button-wrap {
  background: #9c7694;
  margin-top: 30px;
  }

  section.treatments div.item a {
  color: var(--gray-900) !important;
  }

  section.prices table tr td a {
  color: var(--gray-900) !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: var(--gray-900) !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: var(--inverse-surface);
  }

  @media only screen and (min-width : 1400px) {
  .container {
  width: 1370px;
  }
  }
  :root {
  /* Primary Colors */
  --primary: #7a590c; /* Replace #value with the actual color code */
  --primary-on: #ffffff;
  --primary-container: #ffdea6;
  --primary-on-container: #271900;
  --primary-fixed: #ffdea6;
  --primary-fixed-dim: #ecc06c;
  --primary-on-fixed: #271900;
  --primary-fixed-variant: #5d4200;
  --primary-inverse: #ecc06c;

  /* Secondary Colors */
  --secondary: #6d5c3f;
  --secondary-on: #ffffff;
  --secondary-container: #f7dfbb;
  --secondary-on-container: #281805;
  --secondary-fixed: #f7dfbb;
  --secondary-fixed-dim: #d9c4a0;
  --secondary-on-fixed: #251a04;
  --secondary-fixed-variant: #53452a;

  /* Surface Colors */
  --surface-dim: #e3d8cc;
  --surface: #fff8f4;
  --surface-bright: #fff8f4;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fdf2e5;
  --surface-container: #f7ecdf;
  --surface-container-high: #f1e7d9;
  --surface-container-highest: #ece1d4;
  --surface-on: #201b13;
  --surface-on-variant: #4e4639;
  --surface-outline: #807667;
  --surface-outline-variant: #d1c5b4;

  /* Other Colors */
  --inverse-surface: #353027;
  --inverse-on-surface: #faefe2;
  --scrim: #000000;
  --shadow:  3px 3px 9px rgba(0, 0, 0, 0.2);

/*spacings*/
   --spacing-25: calc(1rem * 0.25);
   --spacing-50: calc(1rem * 0.5);
   --spacing-75: calc(1rem * 0.75);
   --spacing-100: calc(1rem * 1);
   --spacing-150: calc(1rem * 1.5);
   --spacing-200: calc(1rem * 2);
   --spacing-300: calc(1rem * 3);
   --spacing-400: calc(1rem * 4);
   --spacing-600: calc(1rem * 6);
   --spacing-800: calc(1rem * 8);
   --spacing-1200: calc(1rem * 12);
   --spacing-1600: calc(1rem * 16);
   --spacing-2400: calc(1rem * 24);
   --spacing-3200: calc(1rem * 32);
   --spacing-4000: calc(1rem * 40);
   --spacing-4800: calc(1rem * 48);


/*fonts*/
    --font-size-h1: 58px;  
    --font-size-h2: 47px; 
    --font-size-h3: 33px;   
    --font-size-h4: 23px;  
    --font-size-h5: 19px;     
    --font-size-h6: 16px; 
    --font-primary: "Inter", sans-serif;
    --font-secondary: "Inter", sans-serif;
}
/*end root*/





/*fonts
    --font-size-h1: 93px;  
    --font-size-h2: 58px; 
    --font-size-h3: 47px;   
    --font-size-h4: 33px;  
    --font-size-h5: 23px;     
    --font-size-h6: 19px; 
    --font-primary: "Inter", sans-serif;
    --font-secondary: "Inter", sans-serif;
}*/


.faq-question br {
  display: none;
}
.faq-question {
  font-weight: bold;
  margin: 1rem 0 1rem 0;
}

.faq-answer {
    display: none;
}

.faq-question {
  display: flex;
  gap: 1rem;
    cursor: pointer;
}

.pigment__picca {
  width: 100%;
  border-radius: 20px;
  max-height: 437px;
  object-fit: cover;
}

.cw * {
    color: #ffffff!important;
}

.section-header {
  background: linear-gradient(180deg, var(--surface-container-lowest) 85%, var(--surface-container-low) 85%);
}

.featured__image {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
}


html.dark-mode .partners-section {
  background: var(--surface) !important;
}
html.dark-mode .partners-section::before {
  background: var(--surface-bright);
}

section.page {
  padding: var(--spacing-600) 0;
}

/* Basis font definitie */

html {
font-size: 16px !important;
}
.content-container {
  max-width: 780px;
  width: 100%;
}

.header-child.content h1 {
  font-size: 30px;
  letter-spacing: 0px;
}

.page-header h1, section.contact div.page-header h1 {
  font-size: var(--font-size-h1);
}
.scroll-popup {
  background: var(--primary-container);
  color: var(--primary-on-container);
  padding: var(--spacing-50);
  border-radius: 50px;
  width: fit-content;
  font-size: 14px;
  position: absolute;
  z-index: 10;
  right: 30px;
  bottom: 30px;
}




body {
  font-family: var(--font-primary);
  font-size: var(--spacing-100);
  font-weight: normal;
color: var(--surface-on-variant) !important;
  letter-spacing: 0.5px;
}
.wpcf7-submit, .woocommerce span.onsale, .woocommerce a.button, .woocommerce .button, [type="submit"], .nf-form-content input[type="submit"] {
  background: var(--primary) !important;
}
.wpcf7-submit:hover, .woocommerce span.onsale:hover, .woocommerce a.button:hover, .woocommerce .button:hover, [type="submit"]:hover, .nf-form-content input[type="submit"]:hover {
  background: var(--primary-on-fixed) !important;
  color: #fff !important;
}

.nf-form-content button, .nf-form-content input[type="button"], .nf-form-content input[type="submit"] {
  border: none !important;
  border-radius: 100px !important;
  transition: ease 300ms !important;
  padding: var(--spacing-75) var(--spacing-150) !important;
}

div.social-media ul li a:hover {
  background: var(--secondary-container) !important;
  color: #fff !important;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
  padding: 20px 0px 0px 0px;
}

footer div.social-media ul li a {
  background: var(--surface-container) !important;
  color: var(--surface-on) !important;
}


#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  padding: 14px 10px 14px 10px;
}

.partners-child {
  border-radius: 2rem;
  background: var(--surface-bright);
  padding: var(--spacing-200);
  width: 100%;
  border: 1px solid var(--surface-outline-variant);
}

.partners-child img {
  width: 100%;
  height: 300px;
  border-radius: 2rem;
  object-fit: cover;
}
.partners {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-100);
  flex-wrap: wrap;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
  background: var(--primary);
  color: var(--primary-on) !important;
}

footer div.social-media ul li a i {
  color: var(--surface-on) !important;
}

body {
  background: var(--surface-container-lowest);
}
.dark-mode .partners-title h1 {
  color: var(--inverse-surface) !important;
}
header div.header.full-width {
  background: var(--surface-container-lowest) !important;
}
.item-category {
  z-index: 0;
  border-radius: 2rem;
}

/* Header stijlen */
h1, h2, h3, h4 ,h5, h6 {
  font-family: var(--font-primary);
  font-weight: 500;
  margin: var(--spacing-300) 0 var(--spacing-75) 0;
  color: var(--surface-on) !important;
}


#mega-menu-item-custom_html-4 .mega-block-title {
  visibility: hidden !important;
}



.intro.text.block3 {
  height: 100%;
}
div.page-header h1, section.contact div.page-header h1 {
  margin-bottom: var(--spacing-600);
}

.cta-footer-wrapper {
  text-align: left;
}

a, .woocommerce ul.products li.product .price, .woocommerce .price {
  color: var(--primary) !important;
  font-weight: bold;
}


html.dark-mode footer div.socket a, 
html.dark-mode footer div.socket a:hover, 
html.dark-mode footer div.socket {
  color: var(--inverse-on-surface) !important;
}
html.dark-mode footer div.socket img[alt="netbeauty"] {
  filter: brightness(0);
}




.footer-cta.text-center.above {
  background: var(--surface-container-high);
}
.cta-footer-divider {
  content: "";
  height: 2px;
  width: 100%;
  background: var(--surface-outline-variant);
  margin: var(--spacing-200) 0;
}
.footer-cta.text-center.above {
  padding: var(--spacing-600) var(--spacing-100);
}
.cards-basic__row {
  display: flex;
  gap: var(--spacing-150);
}

div.page-header, section.contact div.page-header h1 {
  width: 100%;
  max-width: 960px;
}
figure {
  width: 100%;
  margin: var(--spacing-400) 0;
  position: relative;
  max-width: 1200px;
  max-height: 460px;
}
figure img {
  object-fit: cover;
  border-radius: 3rem !important;
  width: 100%;
  max-width: 1200px;
  box-shadow: var(--shadow);
  max-height: 460px;
}


hundefined {
  display: none;
}


section.contact div.holder div.wrap {
  box-shadow: var(--shadow);
  border-radius: 2rem;
  background: var(--surface-container-highest);
}

footer div.column > h4, footer section.treatments div.items div.item a div.column > span, section.treatments div.items div.item a footer div.column > span, footer, footer .column a {
  border-bottom: 0px solid #e6e6e6;
}

.treatments .col-xs-24.col-sm-12 .item {
  background: var(--surface-container) !important;
  border: 1px solid var(--surface-outline-variant);
  border-radius: 1rem;
  overflow: hidden;
}
section.archive.treatments div.treatments div.item h4 {
  text-transform: none !important;
  padding: var(--spacing-50) 0;
}
section.archive.treatments div.treatments div.item img:hover, section.treatments.shortcode div.treatments div.item img:hover {
  box-shadow: none;
}
section.archive.treatments div.treatments div.item img {
  width: 100%;
  border-radius: 0 !important;
  height: 220px;
  object-fit: cover;
}


figure::after {
  position: absolute;
  content: "";
  width: 50%;
  height: 90%;
  background: var(--surface-container-highest);
  border-radius: 3rem;
  right: -40px;
  top: -40px;
  z-index: -1;
}
.bottom-item i:not(#theme-switcher i) {
  font-size: var(--font-size-h4) !important;
  color: var(--surface-on) !important;
}

.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-25);
  color: var(--surface-on-variant);
}

.partners-child .btn {
  margin-top: var(--spacing-150);
}

.bottom-item i {
  padding: var(--spacing-25);
}
.bottom-item:hover {
cursor: pointer;
}

.bottom-item:hover i:not(.bottom-item:hover .theme-switcher i) {
  background: var(--secondary-container);
  color: var(--secondary-on-container);
  width: 100%;
  border-radius: 5rem;
  text-align: center;
  padding: var(--spacing-25);
}
.bottom-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: var(--surface-container-high);
  z-index: 200;
  height: auto;
    padding: var(--spacing-100) var(--spacing-50);
  align-items: center;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu {
   background: var(--surface-container);
}
header div.navbar-collapse ul li a {
  color: var(--surface-on-variant) !important;
  line-height: 25px;
}
header div.navbar-collapse ul li a:not(header div.navbar-collapse ul li a.btn) {
  color: var(--surface-on-variant) !important;
  line-height: 25px;
  text-transform: none !important;
  font-size: var(--font-size-h6) !important;
  font-weight: 400 !important;
  line-height: 17px !important;
}

.partners-child h3 {
  margin-top: 0;
}

.about-video {
  overflow: hidden;
  border-radius: 4rem;
  margin-bottom: -7rem;
}
.dark-mode .logo {
  content: url(https://skinsupport.nl/wp-content/uploads/sites/57/2024/02/logogwit.png);
}

h1 {
  font-size: var(--font-size-h1);
  letter-spacing: -1.5px;
 /* Sentence case */
  font-weight: light;
}

.cards-section {
  z-index: 2;
  position: relative;
}
h2 {
    font-size: var(--font-size-h2);
  letter-spacing: -0.5px;
 /* Sentence case */
  font-weight: light;
}
header .btn.btn-primary {
  color: var(--primary-on) !important;
}
h3 {
    font-size: var(--font-size-h3);
  letter-spacing: 0;
 /* Sentence case */
  font-weight: normal;
}

.recensie-title {
  text-align: center;
}

div.page-header h1, section.contact div.page-header h1 {
  border-bottom: 0px solid #e6e6e6;
}

h4 {
    font-size: var(--font-size-h4);
  letter-spacing: 0.25px;
 /* Sentence case */
  font-weight: normal;
}

h5 {
    font-size: var(--font-size-h5);
  letter-spacing: 0;
 /* Sentence case */
  font-weight: normal;
}

h6 {
    font-size: var(--font-size-h6);
  letter-spacing: 0.15px;
  font-weight: medium;
 /* Sentence case */
}

.intro.text.block1.section-about {
  position: relative;
  z-index: 3;
}

/* paraaf*/

p {
  margin:  0 0 var(--spacing-75);
  letter-spacing: 0.5px;
}
.small {
  font-weight: 500; /* Medium */
  font-size: 14px;
  letter-spacing: 0.1px;
 /* Sentence case */
}

/* Subtitel*/
.subtitle1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400; /* Regular */
  font-size: 16px;
 /* Sentence case */
  letter-spacing: 0.15px;
}


.partners-section {
  position: relative;
  overflow: hidden;
  height: 50vh;
}


.partners-section::before {
  background: var(--inverse-surface);
  content: "";
  position: absolute;
  width: 210vh;
  height: 100vh;
  right: 50%;
  transform: translate(50%, 0);
  bottom: 50px;
  border-radius: 0 0 100% 100%;
  z-index: 0;
}

.subtitle2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 14px;
 /* Sentence case */
  letter-spacing: 0.1px;
}
/* Knop stijlen */
.btn {
  font-weight: 500; /* Medium */
  font-size: 14px;
  letter-spacing: 1.25px;
  border-radius: 100px !important;
  text-transform: uppercase; /* All caps */
}

.btn.btn-outline {
  color: var(--primary) !important;
  border: 1px solid var(--primary);
}

footer div.column > h4, footer section.treatments div.items div.item a div.column > span, section.treatments div.items div.item a footer div.column > span, footer, footer .column a {
  color: var(--inverse-on-surface) !important;
}
header .image {
  margin-bottom: -17px;
  border-radius: var(--spacing-100);
}
.card-child_image img {
  width: 100%;
  border-radius: 2rem;
  margin: 0;
  display: block;
  height: 370px;
 object-fit: cover;
}
.card-child_title, .card-child_title {
  padding: 0 var(--spacing-100);
}
.cards-basic__child {
  background: var(--surface);
  color: var(--surface-on-variant);
  padding: var(--spacing-100);
  border-radius: 20px;
  border: 1px solid var(--surface-outline-variant);
  box-shadow: var(--shadow);
}
/* Onderschrift stijlen */
.caption {
  font-weight: 400; /* Regular */
  font-size: 12px;
  letter-spacing: 0.4px;
 /* Sentence case */
}

/* Overline stijlen */
.overline {
  font-weight: 400; /* Regular */
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase; /* All caps */
}

/*Einde fonts*/
.partners-title {
  position: relative;
  padding: var(--spacing-600) 0 var(--spacing-200) 0;
}
.partners-title  h1 {
  color: var(--secondary-on) !important;
}

.cards {
  display: flex;
  gap: var(--spacing-100);
}
.card-child {
  border: 1px solid var(--surface-outline-variant);
  border-radius: 2rem;
  overflow: hidden;
  background: var(--surface-container-high);
  box-shadow: var(--shadow);
}
.card-child_title {
  color: var(--primary);
}
.cards-title {
  padding-top: var(--spacing-1200);
  padding-bottom: var(--spacing-600);
}

.card-child {
  min-width: 20vw;
}


.cards {
  display: flex;
  gap: var(--spacing-100);
  margin-bottom: -170px;
  z-index: 2;
  position: relative;
  margin-top: var(--spacing-400);
}
.partner-logos img {
  width: 29%;
  height: 50px;
  object-fit: contain;
  margin: var(--spacing-200) auto;
}
.partner-logos {
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-200);
}

  #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation[data-effect="fade_up"] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu {
   transition: cubic-bezier(1,.0,.65,1.16) 300ms !important;
    box-shadow: var(--shadow);
  }

.col-xs-24.col-sm-12:hover .item {
  box-shadow: var(--shadow);
  transition: ease 300ms !important;
}

.archive.treatments {
  padding: var(--spacing-800) 0;
}

#mega-menu-wrap-primary_navigation, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation ul.mega-sub-menu, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation li.mega-menu-item, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation li.mega-menu-row, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation li.mega-menu-column, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation a.mega-menu-link, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation span.mega-menu-badge {
   transition: cubic-bezier(1,.0,.65,1.16) 300ms !important;
}


.btn {
  padding: var(--spacing-100) var(--spacing-200);
}

.btn.btn-outline {
  color: var(--primary) !important;
  border: 1px solid var(--primary);
  transition: cubic-bezier(1,.0,.65,1.16) 300ms;
}
.btn.btn-outline:hover {
  background: var(--primary) !important;
  color: var(--primary-on) !important;
}

.btn.btn-primary, header a.btn.btn-primary  {
  border: 1px solid var(--primary);
  background: var(--primary) !important;
  transition: ease 200ms;
  transition: cubic-bezier(1,.0,.65,1.16) 300ms;
}
.btn.btn-primary:hover, header a.btn.btn-primary:hover  {
  background: var(--secondary) !important;
}
.btn.btn-primary:active, header a.btn.btn-primary:active  {
  background: var(--secondary-fixed-variant) !important;
}


/*other*/
.header-child.image img {
  border-radius: 30px;
}

.cards-wrapper {
  position: relative;
}

.bottom-item, .bottom-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-25);
    font-size: 12px;
}

.bottom-bar-fab-button {
font-size: var(--font-size-h3);
  background: var(--primary-container);
  color: var(--secondary-on-container) !important;
  border-radius: 0.4rem;
  position: fixed;
  bottom: 97px;
  right: 20px;
  z-index: 999999999999999;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow);
}
.intro.recensies {
  padding: var(--spacing-600) 0;
}
div.breadcrumbs {
  display: none;
}

@media only screen and (min-width: 1241px) {
.row.images {
  min-width: 1240px;
  width: 100%;
  margin: var(--spacing-400) 0;
  position: relative;
  max-width: 1200px;
  max-height: 460px;
  display: flex;
    background: var(--surface-bright);
  border-radius: 2rem;
  padding: 0rem;
}

.row.images img {
  margin: 0;
}

}

.row.images img {
  border-radius: 2rem;
  margin: 0;
  min-width: 100%;
  object-fit: cover;
  max-height: 100%;
}

.row.images img {
  margin: var(--spacing-150) 0;
}
@media only screen and (min-width: 992px) {

#mega-menu-item-652 a:hover {
  opacity: 0.8 !important;
  background: var(--inverse-on-surface) !important;
}

.mega-menu__btn a {
  vac: border: 1px solid var(--primary);
  background: var(--primary) !important;
  transition: ease 200ms;
  transition: cubic-bezier(1,.0,.65,1.16) 300ms;
  color: #fff !important;
  border-radius: 200px !important;
  margin-left: var(--spacing-200) !important;
  margin-top: -20px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-100) !important;
}
#mega-menu-item-652 > a:nth-child(1) {
  color: #fff !important;
}


.content-container {
  grid-column: 1;
}

#mega-menu-item-835 .mega-sub-menu {
  padding-bottom: 0 !important;
}

footer .col-sm-16 .column {
  width: 84%;
  margin: 0 auto;
  display: block;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation li.mega-menu-item > ul.mega-sub-menu {
  padding-bottom: 0.7rem;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  background: var(--surface-container);
}

.header-child.content {
  min-width: 35%;
    position: relative;
    z-index: 0;
}

#mega-menu-primary_navigation {
  text-align: right !important;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:focus, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link:focus {
  text-decoration: underline;
  transition: ease 300ms !important;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
  text-decoration: underline;
  transition: ease 300ms !important;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-item > a.mega-menu-link:focus {
  color: var(--secondary) !important;
}
header .container {
  width: 99% !important;
  max-width: 1699px;
}

  header > div.wrapper.sticky_menu.sticky_header.sticky_menu_small .header .holder {
    min-height: 70px;
    height: 120px;
    width: 100%;
  }

  #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation[data-effect="fade_up"] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu {
    top: 79px !important;
  }

.cta-footer-buttons {
  text-align: right;
}

figure.video {
  border-radius: 2rem;
  min-height: 630px;
}


.video iframe {
  border-radius: 2rem;
}

header > div.wrapper {
    min-height: 160px;
  }

.treatments .col-xs-48.col-md-24 {
  width: calc(100%/3);
}
.item-category h2 {
  font-size: var(--font-size-h4);
}

.bottom-bar {
  flex-direction: column;
  top: 50%;
  bottom: auto;
  width: 60px;
  right: 10px;
  transform: translate(0%, -50%);
  box-shadow: var(--shadow);
  gap: var(--spacing-200);
  border-radius: 8px;
}
#goBack {
  display: none;
}
.bottom-bar-fab-button {
  bottom: auto;
    top: 60%;
    right: 10px;
    transform: translate(0%, 70%);
}

.cta-footer-buttons, .cta-footer-tekst {
  width: 50%;
  float: left;
}

  .container {
    width: 100%;
    max-width: 1560px;
  }

  header > div.wrapper.sticky_menu.sticky_header.sticky_menu_small .header .holder img {
    max-height: 100%;
  }

.mega-sub-menu {
  z-index: 99999999999999999999999999999999999999;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
  padding: var(--spacing-200) !important;
}

.about-tekst {
  padding: var(--spacing-600) 0;
  max-width: 980px;
  margin: 0 auto;
}

.section-about .container {
  width: 100%;
  max-width: 1690px;
}
.header-parent {
  display: flex;
  gap: var(--spacing-400);
}
.header-child.image img {
  height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: right;
}
.header-child.image {
  min-width: 50%;
  height: 70vh;
  max-height: 800px;
}


}


.header-child-button .btn {
  margin: var(--spacing-200) 0 var(--spacing-600);
}

@media only screen and (max-width: 991px) {

.header-child.image img {
  min-height: 300px;
    object-fit: contain;
  object-position: right;
}

.socket {
  padding-bottom: 105px !important;
}


#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    background: var(--secondary-on-container) !important;
}
#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu li.mega-2-columns > ul.mega-sub-menu > li.mega-menu-item {
  width: 100%;
}


#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation[data-effect="fade_up"] li.mega-menu-item.mega-menu-flyout ul.mega-sub-menu {
  background: var(--secondary-on-container);
  margin: var(--spacing-200) 0;
}

.cta-footer-title .mb-0 {
  margin-bottom: -30px !important;
}

.bottom-bar {
  box-shadow: var(--shadow);
}


.cta-footer-buttons {
  margin-top: var(--spacing-150);
}

.page-header h1, section.contact div.page-header h1 {
  font-size: 13vw;
  text-align: center;
}

.row.images {
  margin: var(--spacing-300) var(--spacing-25);
}

figure.video, figure iframe {
  max-height: 300px;
  border-radius: 2rem;
}

section.archive.treatments div.treatments div.item img {
  height: 130px;

}

section.archive.treatments div.treatments div.item h4 {
  font-size: 13px !important;
  padding: 2px;
}

.header-parent .btn {
  width: 100% !important;
  margin: var(--spacing-150) 0 var(--spacing-150) 0;
}

/*Sticky header*/
.sticky {
  position: fixed;
  top: 10px;
  left: -10px;
  width: 100%;
  display: grid;
  margin: 0 10px;
  grid-template-columns: 1fr 0.2fr;
}
header > div.wrapper.sticky_menu.sticky_header .header {
background: white!important;
}
.header.full-width.sticky .logo {
    padding: 0px !important;
    float: left;
    max-width: 115px !important;
}
#mobile-menu .container {
  width: 100%;
}
.header.full-width.sticky div.holder {
  min-height: 75px !important;
}
.header.full-width.sticky {
  position: fixed;
  top: 0;
  left: -10px;
  width: 100%;
}
.header.full-width.sticky {
  position: fixed;
  top: 0;
    box-shadow: var(--shadow);
  left: -10px;
  width: 100%;
    background: var(--surface-container-lowest) !important;
}

/*end*/


html {
  font-size: 14px !important;
}



html, body {
  overflow-x: hidden;
}

.about-video {
  margin-top: var(--spacing-300);
}

.prev, .next {
  top: auto !important;
  bottom: 30px;
}

.partners-title {
  padding: var(--spacing-100);
  margin-top: var(--spacing-300);
}

.about-video {
  overflow: hidden;
  border-radius: 2rem;
}

:root {
--font-size-h1: 38px;
  --font-size-h2: 27px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;
  --font-size-h5: 16px;
  --font-size-h6: 16px;
    --font-primary: "Inter", sans-serif;
    --font-secondary: "Inter", sans-serif;
}



.cards {
  flex-direction: column;
}


 #mega-menu-wrap-primary_navigation .mega-menu-toggle + #mega-menu-primary_navigation {
    background: var(--inverse-surface) !important;
}

header div.navbar-collapse ul li a:not(header div.navbar-collapse ul li a.btn) {
  color: var(--inverse-on-surface) !important;
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu {
  background: var(--inverse-surface);
}

#mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title, #mega-menu-wrap-primary_navigation #mega-menu-primary_navigation > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title {
  color: var(--inverse-on-surface) !important;
}


.header-child.image {
  margin-right: -50px;
}
.section-header {
  overflow: hidden;
}




}

body {
    transition: ease 300ms;
}

header * {    transition: ease 300ms }

body.dark-mode, 
html.dark-mode {
  /* Primary Colors */
  --primary: #ecc06c; 
  --primary-on: #412d00;
  --primary-container: #5d4200;
  --primary-on-container: #ffdea6;
  --primary-fixed: #ffdea6;
  --primary-fixed-dim: #ecc06c;
  --primary-on-fixed: #271900;
  --primary-fixed-variant: #5d4200;
  --primary-inverse: #7a590c;

  /* Secondary Colors */
  --secondary: #d9c4a0;
  --secondary-on: #3c2e15;
  --secondary-container: #53452a;
  --secondary-on-container: #f7dfbb;
  --secondary-fixed: #f7dfbb;
  --secondary-fixed-dim: #d9c4a0;
  --secondary-on-fixed: #251a04;
  --secondary-fixed-variant: #53452a;

  /* Surface Colors */
  --surface-dim: #17130b;
  --surface: #17130b;
  --surface-bright: #3e382f;
  --surface-container-lowest: #120e07;
  --surface-container-low: #201b13;
  --surface-container: #241f17;
  --surface-container-high: #2f2921;
  --surface-container-highest: #3a342b;
  --surface-on: #ece1d4;
  --surface-on-variant: #d1c5b4;
  --surface-outline: #9a8f80;
  --surface-outline-variant: #4e4639;

  /* Other Colors */
  --inverse-surface: #ece1d4;
  --inverse-on-surface: #353027;
  --scrim: #000000;
  --shadow:  3px 3px 9px rgba(0, 0, 0, 0.2);
}

#theme-switcher i {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
.theme-switcher {
  cursor: pointer;
  font-size: 1rem;
  position: relative;
  border: none;
  border-radius: var(--spacing-50);
  background: var(--primary);
  color: var(--primary-on);
  height: 30px;
  width: 30px;
}
.theme-switcher .fas {
  transition: opacity 0.3s ease;
}

.theme-switcher .fa-sun {
  opacity: 0; /* Verborgen bij het begin */
}



.theme-switcher .fa-moon {

}

/* Je kunt specifieke klassen toevoegen om te toggelen welk icoon zichtbaar is */
body.dark-mode .theme-switcher .fa-sun {
  opacity: 1; /* Toon zon in dark mode */
}

body.dark-mode .theme-switcher .fa-moon {
  opacity: 0; /* Verberg maan in dark mode */
}