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

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

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', 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: #010f13;
  }

  h1, h2, h3, h4, h5, h6 {
  color: #010f13 !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: #3fabd1 !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: #1096c6 !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: #3fabd1 !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: #1096c6 !important;
  color: #fff !important;
  }

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

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

  div.social-media ul li a:hover {
  background: #1096c6 !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: #3fabd1 !important;
  }

  div.phone a.phone, div.email a.email {
  background: #27a0cb !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: #1096c6 !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: #27a0cb;
  border-color: #27a0cb;
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: #27a0cb !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #27a0cb !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(252, 251, 249, 1) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(252, 251, 249) !important;
  }

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

  header > div.wrapper {
  display: block;
  position: relative;
  }

  header div.header::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  }

  header > div.wrapper::after {
  background: url('https://splendid.nbsalsprem.nl/wp-content/uploads/sites/77/2025/12/Hydrofacial.jpg');
  background-size: cover;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  }




  @media only screen and (min-width : 992px) {
  body.home header > div.wrapper {
  min-height: 350px;
      min-height: 515px;
    }
  body.home header > div.wrapper.above {
  min-height: 500px;
      min-height: 665px;
    }
  }

  @media only screen and (min-width : 992px) {
  body header > div.wrapper {
  min-height: 225px;
      min-height: 315px;
    }
  body header > div.wrapper.above {
  min-height: 375px;
      min-height: 465px;
    }
  body header > div.wrapper.above::after,
  body header > div.wrapper.above.shadow::before,
  body header > div.wrapper.above_shadow::before {
      top: 240px;
    }
  body header > div.wrapper.sticky_menu .header__content {
      margin-top: 240px;
    }
  }

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

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





  nav.navbar-default, div.navbar-collapse {
  background-color: #27a0cb; !important;
  }

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

  header nav.navbar-default {
  background-color: rgba(39, 160, 203, 1) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(39, 160, 203, 1) !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: #27a0cb !important;
  }
  }


  @media only screen and (min-width : 992px) {
  section.featured div.wrapper {
  margin-top: -100px;
  }
  header>div.wrapper .header__content {
  transform: translate3d(0, -40px, 0);
  }
  }





  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 #3fabd1;
  }

  @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: #3fabd1 !important;
  }
  }


  header div.header div.contact i {
  color: #3fabd1;
  }

  @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: #010f13 !important;
  }

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

  section.partners {
  background: #3fabd1 !important;
  }

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

  footer,
  .footer-cta.center:after,
  .author {
  background: #27a0cb !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid #3fabd1;
  }

  footer div.socket,
  .footer-sticky {
  background: #1096c6 !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: #010f13 !important;
  }

  section.prices table tr td a {
  color: #010f13 !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: #010f13 !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: #27a0cb;
  }

  :root {

            --transition-speed: 0.3s;
            --border-radius-sm: 8px;
            --border-radius: 16px;
            --border-radius-lg: 24px;
            --border-radius-xl: 32px;


  /* Colors: Primary (Ocean Blue - Refined Client Color) */
  /* Klant origineel was +/- hsl(196, 75%, 40%) - Deze is iets pittiger */
  --primary-100: hsl(196, 90%, 96%);
  --primary-200: hsl(196, 85%, 88%);
  --primary-300: hsl(196, 80%, 75%);
  --primary-400: hsl(196, 78%, 60%);
  --primary-500: hsl(196, 85%, 42%); /* Base: Iets dieper en rijker dan #1988b0 */
  --primary-600: hsl(196, 90%, 35%);
  --primary-700: hsl(196, 95%, 28%);
  --primary-800: hsl(196, 100%, 20%);
  --primary-900: hsl(196, 100%, 12%);

  /* Colors: Secondary (Warm Sand / Paper) */
  /* Geeft een mooi high-end contrast met het koele blauw */
  --secondary-50: hsl(36, 33.3%, 98.3%);
  --secondary-100: hsl(35, 30%, 97%);
  --secondary-200: hsl(35, 25%, 90%);
  --secondary-300: hsl(35, 20%, 82%);
  --secondary-400: hsl(35, 15%, 74%);
  --secondary-500: hsl(35, 10%, 66%); /* Base */
  --secondary-600: hsl(35, 10%, 50%);
  --secondary-700: hsl(35, 10%, 40%);
  --secondary-800: hsl(35, 10%, 30%);
  --secondary-900: hsl(35, 10%, 20%);

  /* Colors: Grey Scale (Cool Grays) */
  /* Subtiele blauwe ondertoon (hue 200) voor een moderne look */
  --gray-900: hsl(200, 15%, 12%);
  --gray-800: hsl(200, 10%, 20%);
  --gray-700: hsl(200, 8%, 30%);
  --gray-600: hsl(200, 6%, 40%);
  --gray-500: hsl(200, 4%, 50%);
  --gray-400: hsl(200, 4%, 60%);
  --gray-300: hsl(200, 4%, 75%);
  --gray-200: hsl(200, 6%, 88%);
  --gray-100: hsl(200, 10%, 96%);

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

  /* Settings */
  --transition-speed: 0.3s;
  --border-radius: 8px;

  /* Typography Sizes */
  --font-size-h1: 2.25rem;  /* ~36px */
  --font-size-h2: 1.75rem;  /* ~28px */
  --font-size-h3: 1.5rem;   /* ~24px */
  --font-size-h4: 1.25rem;  /* ~20px */
  --font-size-h5: 1rem;     /* ~16px */
  --font-size-h6: 0.875rem; /* ~14px */

  /* Fonts */
  --font-head: 'Cormorant Garamond', serif;
  --font-main: 'Montserrat', sans-serif;
}

/* -------------------------------------------------------------------------- */
/* GLOBAL RESET                               */
/* -------------------------------------------------------------------------- */
html {
  font-size: 15px !important;
}

body {
  font-size: var(--spacing-100);
  line-height: 1.8;
  font-family: var(--font-main);
  word-spacing: 2px;
  background: hsl(36, 33.3%, 98.3%);
  color: var(--gray-600) !important;
}

.intro.text.block5 {
  overflow: hidden;
}

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

.treatments {
  margin-top: var(--spacing-100);
}

.btn.btn-primary:has(i), .btn.btn-secondary:has(i) {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-100);
}

aside div.block div.head h4 {
  margin-bottom: 1rem;
}

@media only screen and (min-width: 992px) {
section.intro {
  padding: 96px 0;
}

.treatment-media__img {
  aspect-ratio: 1/1.2;
}

body.home header > div.wrapper {
    min-height: auto;
  }
html {
  font-size: 17px !important;
}

nav.navbar-default div.navbar-collapse ul.navbar-nav > li a:hover {
    background-color: var(--primary-100) !important;
}

nav.navbar-default div.navbar-collapse ul.navbar-nav ul.dropdown-menu {
  border-radius: var(--border-radius-sm);
}

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

header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
    color: var(--primary-900) !important;
    font-weight: bold;
    letter-spacing: 0.5px;
  }

header > div.wrapper::after {
  background-position: center;
}


  header div.header div.holder {
    height: auto;
    padding: 1rem 0;
  }

section.archive.treatments div.treatments div.item img {
  aspect-ratio: 1/1.3;
  border-radius: var(--border-radius) !important;
  object-fit: cover;
}

#home {
padding: 0;
}


  header > div.wrapper {
    min-height: auto;
  }
.col-md-14.col-md-offset-2 {
  position: sticky;
  top: var(--spacing-100);
    margin-bottom: 1rem;
  background: var(--secondary-100);
  padding: var(--spacing-150);
}

}


#contact {
  padding: 0;
}

@media only screen and (max-width: 991px) {
  html {
    font-size: 14px !important;
  }

.treatment-cta-box.treatment-cta-box--has-media {
flex-direction: column;
}

header nav.navbar-default div.navbar-header div.wrapper {
  top: -13px;
  position: relative;
}
header div.header div.wrapper img.logo {
  float: left;
}

.column .list-unstyled li {
  margin-bottom: 0 !important;
}


header > div.wrapper {
  min-height: 400px;
}
header > div.wrapper::after {
  background-position: center;
  top: 150px;
}
.header__content .container {
  width: 100%;
}
.intro.text.block0.hero__header::before {
  content: '';
  position: absolute;
  top: auto;
  right: 0;
  width: 100%;
  height: 30%;
  background: var(--primary-100);
  bottom: 0;
}
}

/* -------------------------------------------------------------------------- */
/* TYPOGRAPHY                                 */
/* -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 300;
  margin: var(--spacing-200) 0 var(--spacing-75) 0;
  color: var(--gray-900) !important;
}

h1 i { color: var(--secondary-900); }

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3);   font-family: var(--font-main); }
h4 { font-size: var(--font-size-h4);   font-family: var(--font-main); }
h5 { font-size: var(--font-size-h5);   font-family: var(--font-main); }
h6 { font-size: var(--font-size-h6);   font-family: var(--font-main); }

.home .wrapper.title_in_header.shadow {
  min-height: 0;
}


p {
  margin: 0 0 var(--spacing-75);
}

main a:not(.btn) {
  color: var(--primary-400) !important;
  font-weight: 500;
  text-decoration: underline;
}

ul li {
  margin-bottom: var(--spacing-25);
}

i {
  font-weight: bold;
}

/* -------------------------------------------------------------------------- */
/* COMPONENTS                                 */
/* -------------------------------------------------------------------------- */

/* Buttons */
.btn {
  margin-top: var(--spacing-200);
  padding: var(--spacing-100) var(--spacing-200);
  font-size: var(--font-size-h6);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 300;
  border-radius: var(--border-radius) !important;
  transition: var(--transition-speed);
}

/* Primary Button */
.btn.btn-primary {
  background: var(--primary-400) !important;
  border: 1px solid var(--primary-400);
}

.btn.btn-primary:hover {
  background: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
}

.btn.btn-primary.invert {
  background: #fff !important;
  border: 1px solid #fff;
  color: var(--primary-400) !important;
}

.intro.text.block0.hero__header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--primary-100);
  bottom: 0;
}
.intro.text.block0.hero__header {
  position: relative;
}

.btn.btn-primary.invert:hover {
  background: var(--primary-300) !important;
  border-color: var(--primary-300) !important;
  color: #fff !important;
}

/* Secondary Button */
.btn.btn-secondary {
  background: none !important;
  color: var(--primary-400) !important;
  border: 1px solid var(--primary-400);
}

.btn.btn-secondary:hover {
  color: #fff !important;
  background: var(--primary-400) !important;
}

.btn.btn-secondary.invert {
  background: none !important;
  color: #fff !important;
  border: 1px solid #fff;
}

section.page, section.prices, section.contact, section.treatments {
  padding: 96px 0;
}

.btn.btn-secondary.invert:hover {
  background: var(--primary-300) !important;
  color: #fff !important;
  border-color: var(--primary-300) !important;
}

/* -------------------------------------------------------------------------- */
/* UTILITIES                                  */
/* -------------------------------------------------------------------------- */
.cw * {
  color: #fff !important;
}



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



/*test*/

.bg-warm-canvas {
  background-color: var(--secondary-100);
  padding: var(--spacing-400);
  display: flex;
  justify-content: center;
  align-items: center;
}


.card {
  background-color: #fff;
  padding: var(--spacing-200);
  max-width: 450px;
  border: 1px solid var(--secondary-200); /* Heel subtiel randje, sjieker dan grijs */
  border-top: 4px solid var(--primary-500); /* Blauw accent bovenaan */
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px hsla(200, 15%, 12%, 0.05);
}

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

.about-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.about-img.about-img-2 img {
  object-position: 0% 0%;
  transform: scaleX(-1);
}

.card__title {
  margin-top: 0;
  color: var(--primary-600) !important;
}

.card__text {
  color: var(--gray-600);
  margin-bottom: var(--spacing-200);
}




/*START HOME*/

.hero-image-container {
  min-height: 60vh;
}

        /* Hero Section */
        .hero {
            min-height: auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            position: relative;
            overflow: hidden;
        }

section.page, section.prices, section.contact {
  padding: 96px 0;
}

.treatment-bg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

        .hero-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: var(--spacing-800) 5% var(--spacing-400) 8%;
            position: relative;
            z-index: 2;
        }

        .hero-label {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-75);
            font-size: 0.75rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--primary-500);
            margin-bottom: var(--spacing-200);
            font-weight: 500;
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards 0.2s;
        }

.home .contact-privacy p {
  color: #fff !important;
}


        .hero-label::before {
            content: '';
            width: 40px;
            height: 2px;
            background: var(--primary-500);
        }

        .hero-title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.15;
            margin-bottom: var(--spacing-200);
            color: var(--gray-900);
        }

        .hero-title .line {
            display: block;
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards;
        }

        .hero-title .line:nth-child(1) { animation-delay: 0.4s; }
        .hero-title .line:nth-child(2) { animation-delay: 0.55s; }
        .hero-title .line:nth-child(3) { animation-delay: 0.7s; }

        .hero-title em {
            font-style: italic;
            color: var(--primary-500);
        }

        .hero-description {
            font-size: 1rem;
            color: var(--gray-600);
            max-width: 450px;
            margin-bottom: var(--spacing-300);
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards 0.9s;
            line-height: 1.8;
        }

        .hero-buttons {
            display: flex;
            gap: var(--spacing-150);
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards 1.1s;
        }

        /* Hero Visual */
        .hero-visual {
            position: relative;
       /*     background: linear-gradient(135deg, var(--primary-100), var(--secondary-200));*/
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-image-container {
            position: relative;
            width: 80%;
            height: 70%;
            opacity: 0;
            animation: fadeIn 1.2s ease forwards 0.5s;
        }

        .hero-image {
            width: 100%;
            height: 100%;
            background: linear-gradient(160deg, var(--primary-300) 0%, var(--primary-500) 50%, var(--primary-700) 100%);
            border-radius: var(--border-radius-xl);
            position: relative;
            overflow: hidden;
        }

        .hero-image::before {
  background-size: cover;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
         /*background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/
  background: url("https://splendid.nbsalsprem.nl/wp-content/uploads/sites/77/2025/12/facial-treatment.jpg");
  background-size: cover;
        }

        .floating-card {
            position: absolute;
            background: white;
            padding: var(--spacing-100) var(--spacing-150);
            border-radius: var(--border-radius);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
            animation: float 6s ease-in-out infinite;
        }

        .floating-card.card-1 {
            bottom: 20%;
            left: -5%;
            animation-delay: 0s;
        }

        .floating-card.card-2 {
            top: 25%;
            right: 0;
            animation-delay: 2s;
        }

        .floating-card-icon {
            width: 35px;
            height: 35px;
            background: var(--primary-100);
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--spacing-50);
            color: var(--primary-500);
        }

        .floating-card h4 {
            font-size: 0.9rem;
            margin-bottom: 0.15rem;
  color: var(--gray-800) !important;
  margin-top: 0;
        }

        .floating-card p {
            font-size: 0.7rem;
            color: var(--gray-500);
        }

        /* Decorative lines */
        .hero-lines {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .hero-lines::before,
        .hero-lines::after {
            content: '';
            position: absolute;
            width: 1px;
            height: 200%;
            background: linear-gradient(to bottom, transparent, var(--primary-300), transparent);
            opacity: 0.3;
        }

        .hero-lines::before {
            right: 20%;
            top: -50%;
            transform: rotate(15deg);
        }

        .hero-lines::after {
            right: 35%;
            top: -30%;
            transform: rotate(15deg);
        }

        /* Quote Section */
        .quote-section {
            padding: var(--spacing-600) 5%;
            background: var(--primary-700);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .quote-section::before {
            content: '"';
            font-family: var(--font-head);
            font-size: 18rem;
            color: rgba(255, 255, 255, 0.05);
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%);
            line-height: 1;
        }

        .quote-text {
            font-family: var(--font-head);
            font-size: clamp(1.4rem, 3vw, 2.2rem);
            font-style: italic;
            color: white;
            max-width: 750px;
            margin: 0 auto var(--spacing-150);
            line-height: 1.5;
            position: relative;
            z-index: 1;
        }

        .quote-author {
            color: var(--primary-200);
            font-size: 0.85rem;
            letter-spacing: 0.1em;
            font-weight: 500;
        }

        /* About Section */
        .about {
            padding: 0;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: var(--spacing-600);
            align-items: center;

        }

        .about-visual {
            position: relative;
        }

        .about-image-stack {
            position: relative;
            height: 550px;
        }

        .about-img {
            position: absolute;
            overflow: hidden;
            border-radius: var(--border-radius-lg);
        }

        .about-img-1 {
            width: 75%;
            height: 400px;
            background: linear-gradient(135deg, var(--primary-200), var(--primary-400));
            top: 0;
            left: 0;
            z-index: 2;
        }

        .about-img-2 {
            width: 60%;
            height: 300px;
            background: linear-gradient(135deg, var(--secondary-200), var(--secondary-400));
            bottom: 0;
            right: 0;
            z-index: 1;
        }

        .about-badge {
            position: absolute;
            bottom: 25%;
            left: 55%;
            transform: translateX(-50%);
            background: white;
            padding: var(--spacing-150) var(--spacing-200);
            border-radius: var(--border-radius);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            z-index: 3;
            text-align: center;
        }

        .about-badge h4 {
            font-size: 2.5rem;
  font-family: var(--font-head);
            color: var(--primary-500);
            line-height: 1;
        }

        .about-badge p {
            font-size: 0.75rem;
            color: var(--gray-600);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 500;
        }

        .about-content h2 {
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            margin-bottom: var(--spacing-200);
            line-height: 1.2;
            color: var(--gray-900);
        }

        .about-content h2 span {
            color: var(--primary-500);
            font-style: italic;
        }

        .about-text {
            color: var(--gray-600);
            margin-bottom: var(--spacing-150);
            font-size: 0.95rem;
            line-height: 1.9;
        }

        .about-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-150);
            margin-top: var(--spacing-300);
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-100);
        }

        .feature-icon {
            width: 45px;
            height: 45px;
            background: var(--primary-100);
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--primary-500);
        }

        .feature-item h4 {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  margin-top: 0;
  color: var(--gray-800);
  font-family: var(--font-main);
  font-weight: bold;
        }

        .feature-item p {
            font-size: 0.8rem;
            color: var(--gray-500);
        }

        /* Technology Section */
        .technology {
            padding: 0;
        }

        .section-header {
            text-align: center;
            max-width: 650px;
            margin: 0 auto var(--spacing-400);
        }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-75);
            font-size: 0.75rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--primary-500);
            margin-bottom: var(--spacing-100);
            font-weight: 500;
        }

        .section-label::before,
        .section-label::after {
            content: '';
            width: 25px;
            height: 2px;
            background: var(--primary-400);
        }

        .section-header h2 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: var(--spacing-100);
            color: var(--gray-900);
        }

        .section-header p {
            color: var(--gray-600);
            font-size: 0.95rem;
        }

        .tech-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--spacing-150);
        }

        .tech-card {
            background: white;
            padding: var(--spacing-200) var(--spacing-150);
            text-align: center;
            transition: all var(--transition-speed) ease;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--gray-200);
            border-radius: var(--border-radius);
        }

        .tech-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
            transform: scaleX(0);
            transition: transform var(--transition-speed) ease;
            border-radius: var(--border-radius) var(--border-radius) 0 0;
        }

        .tech-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
            border-color: var(--primary-200);
        }

        .tech-card:hover::before {
            transform: scaleX(1);
        }

        .tech-icon {
            width: 55px;
            height: 55px;
            background: var(--primary-100);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--spacing-100);
            transition: all var(--transition-speed) ease;
        }

        .tech-card:hover .tech-icon {
            background: var(--primary-500);
        }

        .tech-card:hover .tech-icon svg {
            color: white;
        }

        .tech-icon svg {
            width: 24px;
            height: 24px;
            color: var(--primary-500);
            transition: color var(--transition-speed) ease;
        }

        .tech-card h4 {
            font-size: 1rem;
            margin-bottom: var(--spacing-50);
            color: var(--gray-800);
        }

        .tech-card p {
            font-size: 0.8rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        /* Treatments Section */
        .treatments {
        padding: 0;

        }

        .treatments-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-200);
        }

        .treatment-card {
            position: relative;
            overflow: hidden;
            aspect-ratio: 3/4;
            cursor: pointer;
            border-radius: var(--border-radius-lg);
        }

        .treatment-bg {
            position: absolute;
            inset: 0;
            transition: transform 0.6s ease;
        }

        .treatment-card:nth-child(1) .treatment-bg { background: linear-gradient(160deg, var(--primary-300), var(--primary-600)); }
        .treatment-card:nth-child(2) .treatment-bg { background: linear-gradient(160deg, var(--secondary-200), var(--secondary-500)); }
        .treatment-card:nth-child(3) .treatment-bg { background: linear-gradient(160deg, var(--primary-200), var(--primary-400)); }
        .treatment-card:nth-child(4) .treatment-bg { background: linear-gradient(160deg, var(--primary-500), var(--primary-800)); }

        .treatment-card:hover .treatment-bg {
            transform: scale(1.1);
        }

        .treatment-content {
            position: absolute;
            inset: 0;
            padding: var(--spacing-200);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
            transition: background var(--transition-speed) ease;
        }

        .treatment-card:hover .treatment-content {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 70%);
        }

        .treatment-icon {
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: auto;
            color: white;
            transition: all var(--transition-speed) ease;
        }

        .treatment-card:hover .treatment-icon {
            background: white;
            color: var(--primary-500);
            transform: rotate(45deg);
        }

        .treatment-title {
            font-family: var(--font-head);
            color: white !important;
            font-size: 1.5rem;
            margin-bottom: var(--spacing-50);
        }

        .treatment-items {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.8rem;
            opacity: 0;
            transform: translateY(10px);
            transition: all var(--transition-speed) ease;
        }

        .treatment-card:hover .treatment-items {
            opacity: 1;
            transform: translateY(0);
        }

        /* Contact Section */
        .contact {
            padding: 0;
         /*   background: var(--gray-900);*/
            position: relative;
            overflow: hidden;
        }
section.intro:nth-child(6) {
position: relative;
}
section.intro.block5::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -10%;
width: 50vw;
height: 50vw;
            background: radial-gradient(circle, hsla(196, 85%, 42%, 0.15), transparent 70%);
        }

        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-400);
            position: relative;
            z-index: 1;
        }

        .contact-content h2 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            color: white !important;
            margin-bottom: var(--spacing-150);
        }

        .contact-content h2 span {
            color: var(--primary-400);
            font-style: italic;
        }

        .contact-content > p {
            color: var(--gray-400);
            margin-bottom: var(--spacing-300);
            max-width: 400px;
            font-size: 0.95rem;
            line-height: 1.8;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-150);
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-100);
            color: white;
        }

        .contact-item-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-400);
        }

        .contact-item div h4 {
font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-400) !important;
  margin-bottom: 0.2rem;
  font-family: var(--font-main);
  font-weight: 500;
  margin-top: 0;
        }

        .contact-item div p {
            color: white;
            font-size: 1rem;
  margin-bottom: 0 !important;
        }

        /* Ninja Forms Placeholder */
        .contact-form-wrapper {
            background: rgba(255, 255, 255, 0.03);
            padding: var(--spacing-300);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--border-radius-lg);
        }

        .contact-form-wrapper h3 {
            color: white !important;
            font-size: 1.4rem;
            margin-bottom: var(--spacing-50);
        }

        .contact-form-wrapper > p {
            color: var(--gray-400);
            font-size: 0.85rem;
            margin-bottom: var(--spacing-200);
        }

        /* Ninja Forms placeholder */
        .ninja-forms-placeholder {
            background: rgba(255, 255, 255, 0.05);
            border: 2px dashed rgba(255, 255, 255, 0.15);
            border-radius: var(--border-radius);
            padding: var(--spacing-300);
            text-align: center;
            color: var(--gray-400);
            font-size: 0.9rem;
        }

        .ninja-forms-placeholder code {
            display: block;
            margin-top: var(--spacing-100);
            color: var(--primary-300);
            font-size: 0.85rem;
        }

        /* Footer */
        footer {
            padding: var(--spacing-200) 5%;
            background: var(--gray-900);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-logo {
            font-family: var(--font-head);
            font-size: 1.3rem;
            color: white;
            font-weight: 500;
        }

        .footer-logo span {
            color: var(--primary-400);
        }

        .footer-links {
            display: flex;
            gap: var(--spacing-200);
        }

        .footer-links a {
            color: var(--gray-500);
            text-decoration: none;
            font-size: 0.85rem;
            transition: color var(--transition-speed) ease;
        }

        .footer-links a:hover {
            color: var(--primary-400);
        }

        .footer-social {
            display: flex;
            gap: var(--spacing-100);
        }

        .footer-social a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all var(--transition-speed) ease;
        }

        .footer-social a:hover {
            background: var(--primary-500);
            transform: translateY(-3px);
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Scroll animations */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive - Tablet */
        @media (max-width: 1200px) {
            .tech-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .treatments-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Responsive - Mobile (<992px) */
        @media (max-width: 991px) {

.about-img.about-img-2 {
  bottom: -40px;
}

            nav {
                padding: var(--spacing-100) 5%;
            }
            
            .nav-links, .nav-cta {
                display: none;
            }
            
            .menu-toggle {
                display: flex;
            }

            .hero {
                grid-template-columns: 1fr;
                min-height: auto; 
padding; 0;
            }
            
            .hero-content {
         /*       padding: var(--spacing-800) 5% var(--spacing-400);*/
                text-align: center;
            }
            
            .hero-label {
                justify-content: center;
            }
            
            .hero-description {
                margin-left: auto;
                margin-right: auto;
            }
            
            .hero-buttons {
                justify-content: center;
            }
            
            .hero-visual {
                height: 50vh;
            }

            .hero-lines {
                display: none;
            }
            
            .about {
                grid-template-columns: 1fr;
                gap: var(--spacing-400);
            }
            
            .about-image-stack {
                height: 400px;
            }
            
            .contact-container {
                grid-template-columns: 1fr;
                gap: var(--spacing-300);
            }

footer div.socket, .footer-sticky {
  background: #1a2023 !important;
}

            .tech-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .treatments-grid {
                grid-template-columns: 1fr;
            }
            
            .about-features {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                flex-direction: column;
                gap: var(--spacing-150);
                text-align: center;
            }
        }

        /* Responsive - Small Mobile */
        @media (max-width: 576px) {
            .tech-grid {
                grid-template-columns: 1fr;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }

            .contact-form-wrapper {
                padding: var(--spacing-200);
            }

            .floating-card {
                display: none;
            }
        }




/* =========================================
   1. Visual Flair & Images (De 'Hero' look)
   ========================================= */

/* Geef de hoofdafbeelding een statement look */
figure img,
.img-responsive {
    border-radius: var(--border-radius-lg); /* 24px - lekker rond */
    margin-bottom: var(--spacing-200);
    transform: translateZ(0); /* Hack voor scherpere rendering */
    transition: transform var(--transition-speed);
}
.woocommerce .widget_product_categories ul, aside div.block.treatments ul {
  border: 0px solid #e6e6e6;
}


/* =========================================
   2. Content Layout & Ritme
   ========================================= */

/* Meer witruimte tussen de tekst en de sidebar kolom */
/* Dit voorkomt dat tekst te breed en 'muur-achtig' wordt */
.col-md-32 .content {
    padding-right: var(--spacing-200); 
}

/* De koppen breken met een accent */
.content h2 {
    position: relative;
    margin-top: var(--spacing-300); /* Veel ruimte boven nieuwe secties */
    padding-left: var(--spacing-100);
    border-left: 4px solid var(--secondary-400); /* Accentstreep in zandkleur */
}

.content h3 {
    margin-top: var(--spacing-200);
    color: var(--primary-600);
}

/* Intro tekst (eerste paragraaf na H1 of img) iets groter maken? */
/* Dit geeft een 'magazine' intro gevoel */
.content h1 + figure + br + h2 + p, /* Specifieke target flow */
.content > p:first-of-type {
    font-size: 1.15em;
    color: var(--gray-600);
    line-height: 1.8;
}

/* =========================================
   3. De Sidebar (Modern & Sticky)
   ========================================= */

/* Zorg dat de sidebar blijft hangen tijdens scrollen */
aside {
    position: sticky;
    top: var(--spacing-200); /* Afstand tot bovenkant scherm */
}

/* De blokken zelf */
aside .block {
    background-color: var(--secondary-100); /* Heel licht zandkleur als achtergrond */
    border: 1px solid var(--secondary-200); /* Geen harde borders, maar zacht */
    border-radius: var(--border-radius); /* 16px */
    padding: var(--spacing-150);
    margin-bottom: var(--spacing-150);
    /* Geen schaduw hier, maar juist 'flat' design op een gekleurd vlak */
}

/* Headers in de sidebar */
aside .block .head h4 {
    color: var(--primary-700);
    font-size: var(--font-size-h5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-100);
    border-bottom: 2px solid var(--primary-200); /* Korte streep eronder */
    display: inline-block;
    padding-bottom: var(--spacing-25);
}

/* Lijstjes in sidebar moderner maken */
.block.treatments ul li a {
    display: flex;
    align-items: center;
    padding: var(--spacing-50) 0;
    font-weight: 500;
    color: var(--gray-700);
    border-bottom: 0px solid var(--secondary-200); /* Zachte dividers */
}

.block.treatments ul li:last-child a {
    border-bottom: none;
}

/* Icon pijltje naar rechts duwen bij hover */
.block.treatments ul li a i {
    color: var(--primary-400);
    margin-right: var(--spacing-50);
    transition: margin-left var(--transition-speed);
}



/* =========================================
   4. De Actie (Call to Action)
   ========================================= */

/* Het blok met de knop onderaan de tekst */
.actions {
    background-color: var(--primary-100); /* Highlight dit blok */
    border-radius: var(--border-radius);
    padding: var(--spacing-150);
    margin-top: var(--spacing-400);
    text-align: center;
    border: 1px solid var(--primary-300); /* Speels randje */
}



.home header > div.wrapper.title_in_header .header__content {
  display: none;
}
.home header > div.wrapper::after {
  background: var(--gray-100);
}

.home header > div.wrapper.shadow::before { 
display: none;
}



/* --- Spacing Helpers --- */
.treatment-mt-2 { margin-top: var(--spacing-200); }
.treatment-mt-4 { margin-top: var(--spacing-400); }

/* --- Layout Helper --- */
.treatment-flex-align-center {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Base Layout & Backgrounds --- */
.treatment-section {
    padding: var(--spacing-400) 0;
    /* Jouw full-width fix */
    margin: 0em calc(50% - 50vw);
    width: 100vw; /* Zekerheidje dat hij echt breed pakt */
    background-color: white; /* Default */
}

/* Variaties in achtergrondkleur */
.treatment-bg-primary {
    background-color: var(--primary-100); 
}

.treatment-bg-secondary {
    background-color: var(--secondary-50); 
}

/* --- Typography --- */
.treatment-heading {
    font-family: var(--font-head);
    color: var(--primary-700);
    line-height: 1.1;
    margin-bottom: var(--spacing-100);
}

.treatment-heading--hero {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-50);
}

.treatment-heading__accent {
    color: var(--secondary-500);
}

.treatment-subtitle {
    font-family: var(--font-main);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: var(--spacing-300);
}

.treatment-heading--sub {
    font-size: var(--font-size-h3);
    color: var(--primary-600);
}

.treatment-heading--sm {
    font-size: var(--font-size-h5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.treatment-lead {
    font-family: var(--font-head);
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--primary-800);
    margin-bottom: var(--spacing-150);
}

.treatment-text {
    font-family: var(--font-main);
    color: var(--gray-600);
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: var(--spacing-100);
}

.treatment-text--sm {
    font-size: 0.9rem;
    color: var(--gray-500);
}

/* --- Components: Media & Images --- */
.treatment-media {
    margin: 0;
    position: relative;
}

.treatment-media__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px -10px rgba(196, 216, 224, 0.5);
    object-fit: cover;
}

.treatment-media__caption {
    margin-top: var(--spacing-100);
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--gray-500);
    text-align: center;
}

.treatment-media__caption .treatment-heading__accent {
    font-weight: 600;
}

/* --- Components: Steps (Proces) --- */
.treatment-step {
    position: relative;
    padding-top: var(--spacing-100);
}

.treatment-step__number {
  display: block;
  font-family: var(--font-head);
  color: var(--primary-700);
  line-height: 1;
  position: absolute;
  left: 0;
  z-index: 0;
  font-size: 20px;
}

.treatment-step h4, .treatment-step p {
    position: relative;
    z-index: 1;
}

/* --- Components: Items (Grid items) --- */
.treatment-item {
    padding-right: var(--spacing-100);
}

.treatment-heading--item {
    font-size: 1.25rem;
    color: var(--primary-700);
    border-bottom: 1px solid var(--secondary-200);
    padding-bottom: var(--spacing-50);
    margin-bottom: var(--spacing-75);
    display: inline-block;
}

/* --- Components: Accordion --- */
.treatment-accordion {
    border-bottom: 1px solid var(--gray-300);
}

.treatment-accordion__summary {
    padding: var(--spacing-100) 0;
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--primary-700);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.treatment-accordion__summary::-webkit-details-marker { display: none; }

.treatment-accordion__summary::after {
    content: '+';
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--secondary-600);
}

.treatment-accordion[open] .treatment-accordion__summary::after {
    content: '−';
}

.treatment-accordion__content {
    padding-bottom: var(--spacing-150);
    color: var(--gray-700);
    font-size: 0.95rem;
    line-height: 1.6;
}



.treatment-cta-box__content h3 {
  margin-top: 0;
}

.treatment-mt-2 {
  margin-top: 0;
}

.treatment-cta-box.treatment-cta-box--has-media {
  display: flex;
  gap: 1rem;
  background: var(--primary-100);
  border: 1px solid var(--primary-300);
  padding: var(--spacing-100);
  align-items: center;
}

.btn.btn-primary br {
  display: none;
}