@charset "utf-8";
/* CSS Document -  WEBSPICE - Sofie Vandenberghe -  www.webspice.be*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
  --primary: #19191a;
  --secondary: #f5f4f0;
}
html {
  scroll-behavior: smooth;
text-rendering: optimizeLegibility !important;
-moz-osx-font-smoothing:grayscale!important;
-webkit-font-smoothing:antialiased!important
}
* {box-sizing: border-box;list-style: none;margin: 0;padding: 0;transition: all ease .3s;}
button {cursor: pointer;}
*:focus, *:visited, *:focus:visited, *:focus:active {outline: none !important;}
.bootstrap-select .dropdown-toggle:focus {outline: none !important;box-shadow: none !important;}
textarea:focus, input:focus {outline: none !important;}
img {border: none;max-width: 100%;height:auto}
::-moz-selection {background: var(--primary);color: #fff;}
::selection {background: var(--primary);color: #fff;}
body{font-optical-sizing: auto;font-size: 15px;color: var(--primary);font-family: "Plus Jakarta Sans";font-style: normal;font-weight: 200;background-color: #ffffff;line-height: 1.8em;}
h1, h2, h3, h4{font-family: "Plus Jakarta Sans", sans-serif;}
h1{ color: var(--primary);font-size: 22px;line-height: 40px;text-align: center;margin-top: 70px;font-weight:300}
h2 {font-size: 22px;line-height: 40px;margin-bottom: 40px;text-align:left;font-weight: 300;
  letter-spacing: 1px;}
.inhoud h2 {font-size: 22px;line-height: 40px;color: var(--primary);text-align: left;margin-bottom: 20px;font-weight: 300}
h3{font-size: 26px;line-height: 55px;color: var(--primary); margin-bottom: 10px;font-weight:300}
h4{font-size: 24px;color: var(--primary);}
h5{font-size: 20px;line-height:35px;fcolor: var(--primary);font-weight:300}
p{ font-size: 15px;line-height: 24px;color: var(--primary);margin-bottom: 20px;}
a, a:hover, a:focus, a:focus, a:active{ text-decoration:underline;color:var(--primary);transition: all 0.4s;}
p a{color:var(--primary);}
p a:hover, p a:active, p a:visited{color:var(--primary)}
.inhoud ul, .inhoud ol {margin-left: 15px;margin-top: 0px;}
.inhoud ul li, .inhoud ol li {margin:5px;list-style: disc;}
.list-group-item{border:none;padding-bottom:0;padding-top:0}
.breadcrumb {background-color:transparent;border-radius:0;justify-content:flex-end;padding-left:0px;padding-top:10px;margin-bottom: 0}
.breadcrumb-item {font-size:12px}
.breadcrumb-item.active a{color: var(--primary);}
#webspice { text-align: right;}
#webspice a {font-weight:600;font-size:14px;color:#a9afb3;text-decoration:none;padding-top: 5px;padding-bottom:5px;}
#webspice a:hover{color:#ffffff}
.bol {color:#D99F15;font-size:24px}
.buttons {display: inline-flex;gap: 20px;margin: 0 auto;}
.btn, .btn:visited {
font-size: 18px;
  line-height: 20px;
  font-weight: 400;
  padding: 18px 25px;
  border: 1px solid var(--secondary);
  border-radius: 15px;
  color: #ffffff;
  transition: .2s ease-in;
  min-width: 285px;
  box-shadow: none !important;
  text-decoration: none;
  background: var(--secondary);
  font-style: normal;
  position: relative;
  margin: 5px;
}
.btn:hover,.btn:active,.btn:focus,.btn-check:checked + .btn,.btn.active,.btn:first-child:active,:not(.btn-check) + .btn:active {color:#ffffff;background: var(--primary);border-color: var(--primary);box-shadow: none;text-decoration: none}
.btn-secondary, .btn-secondary:visited{background: var(--secondary);border: 1px solid var(--secondary);}
.btn-secondary:hover,.btn-secondary:active,.btn-secondary:focus{background: var(--secondary);border-color: var(--secondary);color:var(--primary)}
.form-floating label, select.form-select {color:#959494}
.form-control, .form-control-file, .form-select{font-weight: normal;border-radius:0.8rem;margin:10px 0;}
.form-control:focus, .form-select:focus{color: var(--secundary);background-color: #fff;border-color:var(--primary);outline: 0;box-shadow: none;}
.submit {color:#ffffff;background-color:var(--secondary)}
.submit:hover{color:#ffffff;background-color:var(--primary)}
.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {background-color: transparent}
.form-select{height: calc(3.5rem + calc(var(--bs-border-width) * 2));min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));line-height: 1.25;}
label.input-group-text{height: 38px; margin-top: 10px;}
/*******/
.topbar {background:#e7e5dc;text-align: center;padding: 10px 0;position: fixed;z-index: 100;width: 100%;font-weight: 400;}
.topbar a {color: var(--primary);font-size: 14px;line-height: 18px;text-transform: uppercase;text-decoration:none;letter-spacing: 1px}
header {
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
  z-index: 99;
  background: transparent;
   padding: 40px 50px 15px;
}
.sticky-header {padding: 40px 50px 15px;-webkit-transition: opacity 0.15s linear;transition: opacity 0.15s linear;}
header:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--secondary);
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
  z-index: -1;
}
header.page{background-color:var(--secondary)}
.sticky-header:before {opacity: 1;}
.navbar-expand-xl .navbar-collapse {justify-content: right;}
.navbar {padding: 0;}
.navbar-brand img {width: 180px;}
.sticky-header .navbar-brand {
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.nav-item {margin: 0 15px;position: relative;}
.nav-item:hover:before,.nav-item:focus:before,.nav-item.active:before{
  position: absolute;
  content: url('../fotomateriaal/drop-icon.webp');
  top: -24px;
  display: block;
  width: 11px;
  height: 21px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.nav-link { padding: 0px !important;font-size: 13px;color: var(--primary);text-transform: uppercase;text-decoration: none;position: relative;letter-spacing: 1px;font-weight: 400;}
.sticky-header .nav-link {color: var(--primary);-webkit-transition: opacity 0.15s linear;transition: opacity 0.15s linear;}
.nav-link:hover, a.nav-link:active{text-decoration: none}
.dropdown-toggle::after{ display:none}
.dropdown-menu {background-color: var(--secondary);border-radius: 0;border: 0 none;border-top: 0.5px solid var(--primary);}
.dropdown-menu a {text-transform: uppercase;font-size: 13px;font-weight: 400;}
.dropdown-menu a:hover {text-decoration: none;background-color:transparent}
/*index*/
.hero-banner {position: relative;min-height: 95vh;display: flex;justify-content: left;align-items: center;}
.hero-bg-image {position: absolute;z-index: 0;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.hero-bg-image img {-o-object-fit: cover;object-fit: cover;width: 100%;height: 100%;}
.hero-banner-content {position: absolute;z-index: 9;left: 80px;bottom: 130px;}
.hero-banner-content h1 {font-weight: normal;color: var(--primary);font-size: 35px;line-height: 40px;letter-spacing: 1px;margin-bottom: 8px;text-shadow: 0px 0px 25px rgba(255, 255, 255, 1);}
.hero-banner-content .subtext {color: var(--primary);font-size: 18px;text-shadow: 0px 0px 30px rgba(255, 255, 255, 1);text-align: right;font-style:italic;
	display: flex;justify-content: end;align-items: center;}
hr {display: inline-block; width: 50px; opacity: 1;margin:0 8px}
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(0%, -50%);
}
.mouse-scroll {
  width: 30px;
  height: 50px;
  border-radius: 20px;
  border: 1px solid var(--secondary);
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 20px);
}
.mouse-scroll:before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 10px;
  left: calc(50% - 5px);
  background: var(--secondary);
  -webkit-animation: m-1-ball 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  animation: m-1-ball 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.mouse-scroll:before,
.mouse-scroll:after {
  content: "";
  display: block;
  position: absolute;
}
@-webkit-keyframes m-1-ball {
  0%,
  65%,
  100% {
    opacity: 0;
  }
  10%,
  40% {
    opacity: 1;
  }
  0% {
    transform: translateY(5px) scale(0.7);
  }
  5% {
    transform: scale(0.7);
  }
  15%,
  100% {
    transform: scale(1);
  }
  45%,
  65% {
    transform: translateY(24px) scale(0.7);
  }
}

@keyframes m-1-ball {
  0%,
  65%,
  100% {
    opacity: 0;
  }
  10%,
  40% {
    opacity: 1;
  }
  0% {
    transform: translateY(5px) scale(0.7);
  }
  5% {
    transform: scale(0.7);
  }
  15%,
  100% {
    transform: scale(1);
  }
  45%,
  65% {
    transform: translateY(24px) scale(0.7);
  }
}
.over {padding: 110px 0;}
.over-img {justify-content: center;display: flex;}
.over-content{padding-right: 100px}
.behandelingen {padding: 0 0 110px;}
.behandelingen .card {background-color: var(--secondary);border-radius: 0px;padding: 32px;height: 100%;position: relative;border: 0 none;}
.behandelingen .card h3 {text-align: center;font-size: 20px;margin-bottom: 15px;padding: 35px 0 15px 0;line-height: 35px;font-weight: 300;letter-spacing: 1px;}
.behandelingen .card h3:before {position: absolute;content: "";display: block;width: 60px;height: 2px;background: var(--primary);margin: -13px auto 0;left: 0;right: 0;}
.behandelingen p {text-align: center;}
.card-icon { position: absolute;left: 50%;bottom: 35px;transform: translateX(-50%);}
.behandeling-img {width: 100%;}
.cta {padding: 0 0 50px;}
.cta-bg {background-color: var(--secondary);text-align: center;height: 100%;padding: 50px;display: flex;align-items: center;}
.icon-set {margin-bottom: 35px;}
.cta-content {width: 425px;margin: 0 auto;}
.cta-content h3 {font-size: 22px;margin-bottom: 20px;line-height: 35px;font-weight: 300;}
.tel-btn a.btn {font-size: 18px;border: 2px solid #c4beb9;background-color: #fff;display: inline-block;color: var(--primary);border-radius: 4px;padding: 24px;margin-top: 24px;}
.tel-btn a.btn:hover{background: var(--primary);color:#fff;border-color:var(--primary)}
.cta-img {margin-left: -140px;padding-top: 60px;padding-bottom: 60px;}
.instagram {margin-bottom: -80px;margin-top:100px}
.social {display: flex;justify-content: center;align-items: center;margin-bottom: 50px;}
.social span {font-size: 22px;text-transform: uppercase;padding-right: 20px;color: var(--primary);font-weight:300;letter-spacing: 1px}
.social ul {display: inline-flex;gap: 20px;}
.social ul span{background: var(--secondary);border-radius:50px;padding:0;display: flex;justify-content: center;align-items: center;width: 50px;height: 50px;}
.social span svg {fill:var(--primary);width:18px;height:18px}
.social span i{font-size:18px}
.social ul a:hover span {background: var(--primary);}
.social ul a:hover i{color: #fff;}
.social ul a:hover svg {fill: #fff;}


/*anderepagina's*/
.head {padding-top: 150px;background-color:var(--secondary);min-height:800px}
.head .intropage{min-height: 600px;display: flex;justify-content: center;align-content: center;flex-direction: column;}
.head .intropage p{text-align: center}
.head .img{position:relative}
.head .img img{position: absolute;top: 50px;padding-bottom: 50px;}
.inhoud {margin-top:100px}
.inhoud2 {padding-top: 180px;}
.ctapag{display:flex;justify-content: center;text-align: center;}
.card {border-radius:0px;border:none;background-color: var(--secondary);text-align: center}
.card-body{padding:25px}
.card-footer{border-top:0;background-color: var(--secondary);padding-bottom:40px}
.card-body img {margin-bottom: 30px}
.galerij figure {height:310px;overflow: hidden;}
.galerij figure img{object-fit:contain;max-width: fit-content;}
iframe.map {height: 500px;display: block;width:100%;margin: 50px 0;}
.price-sections{ display:flex; flex-wrap:wrap; margin:-0.625rem; }
.price-sections .cat{ width:100%; padding:0.625rem;justify-content: center }
@media (min-width:576px){
.price-sections .cat{ width:48%; }
}
.price-table{ width:100%; border-collapse:collapse; }
.price-table td{ padding:.55rem .5rem; border-top:1px solid rgba(0,0,0,.08); }
.price-table tr:first-child td{ border-top:none; }
.price-col{ text-align:right; white-space:nowrap; }
.cat{border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:12px 12px 4px;margin:12px }
.cat h2{font-weight:700; margin:0 0 .25rem; }
.back-top{ font-size:.85rem; margin:.25rem 0 0; }

/**----Footer Css----**/
footer {background: var(--secondary);padding: 160px 0 15px;}
footer h4 {font-size: 18px;line-height: 30px;margin-bottom: 20px;font-weight: 300;}
.footertop{margin-top:100px}
.address p {margin-bottom: 8px;}
.address a {display: block;padding: 5px 0;}
.social-link ul {margin-top: 15px;display: flex;justify-content: left;gap: 30px;}
.social-link ul a {color: var(--primary);font-size: 20px;}
.social-link ul li a svg {height:25px}
.open p {margin-bottom: 5px;}
.footer-nav {margin-top: 40px;}
.footer-nav li {padding: 8px 0;}
.footer-nav li i {padding-right: 5px;}
.footer-nav li a {font-size: 16px;color: var(--primary);}


/*------- Animation Style Start -------*/
.scroll-animation {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1.2s ease, transform 1s ease;
}
.scroll-animation.show{
  opacity: 1;
  transform: translateY(0);
}
.fade-in{
  opacity: 0;
  transition: opacity 5s ease;
}
.fade-in.show{
  opacity: 1;
}
/*------- Scroll to Top Style Start -------*/
#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary);
  width: 50px;
  height: 50px;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 12px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#return-to-top:hover {background: var(--secondary);}
#return-to-top:hover i {color: #fff;top: 5px;}

/* Responsive */
@media (max-width: 1399px) {.behandelingen .card {padding:20px;height:350px}
	.behandelingen .card h3 {font-size:18px;}
	.behandeling-img img{max-width: 100%; height:350px}
	.galerij figure {height: 265px;}
}
@media (max-width: 1199px) {
  header .nav-item:hover:before{display: none;}
  header .navbar-toggler {
    color: var(--primary);
    opacity: 1;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 30px;
    position: absolute;
    right: 15px;
  }
  header .navbar-collapse {
    width: 100%;
    position: absolute;
    top: 59px;
    background: var(--secondary);
    z-index: 9;
    padding: 15px 15px 0;
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.1);
    left: 0;
    right: 0;
  }
  header .navbar-toggler:focus {box-shadow: none;}
  header .navbar-toggler:focus-visible {outline: none;}
  header .nav-item {margin: 0 0 15px 0;}
.navbar-brand img {width: 140px;}
  header.sticky-header .navbar-brand img {width: 140px;}
   .hero-banner-content{bottom: 150px;}
  .hero-banner{min-height: 650px;}
  .hero-bg-image img{object-fit: fill;}
.galerij figure {height: 220px;}
	
}
@media (max-width: 1024px) {
	h1{font-size:22px;margin-top:0}
	h2 {font-size:22px;margin-bottom:20px}
	p{font-size:15px;margin-bottom:10px}
  header,header.sticky-header {padding: 15px 0;}
  .hero-banner-content h1 {font-size: 30px;line-height: 40px;margin-bottom:0;}
  .hero-banner-content .subtext {font-size: 18px;line-height: 28px;}
  .hero-banner-content{bottom: 100px; left:0}
  .hero-banner{min-height: 570px;}
  .hero-bg-image img{object-fit: cover;}
  .over {padding: 70px 0;}
  .behandelingen { padding: 0 0 70px;}
	.behandelingen .card h3 {font-size:16px;}
	.behandeling-img img{height:330px}
	.behandelingen .card {height: 330px;}
  .over-img {padding-left: 0;}
  .cta-bg {padding: 30px;}
  .cta-img {margin-left: -40px;}

}
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}	
 /*============ desktop view .end// ============ */

@media (max-width: 1023px) {
.head .img img {position: relative;max-width: 60%;margin-bottom: 50px;}
.head .img {justify-content: center;display:flex ;}
.head .intropage {min-height: auto;}
}

@media (max-width: 767px) {
  .topbar {padding: 8px 0;}
  header{top: 40px;}
  header,header.sticky-header {padding: 5px 0 10px;}
	.navbar-brand img {width: 120px;}
  header.sticky-header .navbar-brand img {width: 120px;}
  header .navbar-collapse {top: 50px;}
  .hero-banner-content h1 {font-size: 26px;line-height: 35px;margin-bottom:0;}
  .hero-banner-content .subtext {font-size: 18px;line-height: 28px;}
  .hero-banner-content{bottom: 70px;}
  .hero-banner{min-height: 400px;}
.over-content {padding-right: 10px;}
  .over-content h2 {font-size: 22px;line-height: 30px;}
  .behandelingen .card {padding: 15px;height:258px}
.behandeling-img img{height:auto;width:390px}
  .behandelingen .card h3,.cta-content h3 {font-size: 18px;line-height: 28px;}
  .behandelingen .card p,.cta-content p {font-size: 14px;}
  .cta-bg {padding: 25px;}
	.cta > div:nth-child(1) > div:nth-child(1) {position: relative;}
.cta-img {margin-left: 0;padding-left: 0;position: absolute;
  top: 0;
  right: 0;
  width: 250px;}
	.cta-content{width:225px;margin-left: 0;}
  .merken .col-sm-6 {text-align: center;max-width: 50%;}
 footer {padding: 100px 0 15px;}
  .social-link {margin-bottom: 30px;}

  #webspice {text-align: center}
  #return-to-top {
    bottom: 10px;
    right: 10px;
    width: 45px;
    height: 45px;
  }
  #return-to-top i {
    left: 15px;
    top: 9px;
    font-size: 17px;
  }
}
@media (max-width: 580px) {
	.cta-content{width:100%;margin-left: 0;}
  .cta-img {margin-left: 0;padding-left: 0;position: relative;top: 0;right: 0;width: auto;}
  .hero-banner-content {left: 0;}
  .hero-banner-content h1 {font-size: 22px;line-height: 28px;margin-bottom:0;/*text-shadow: 1px 0 8px #BCB7A1,-1px -1px 0 #c7c7c7,1px -1px 0 #c7c7c7,-1px 1px 0 #c7c7c7,1px 1px 0 #c7c7c7;*/}
  .hero-banner-content .subtext {font-size: 14px;line-height: 25px;/*text-shadow: 1px 0 8px #BCB7A1,-1px -1px 0 #c7c7c7,1px -1px 0 #c7c7c7,-1px 1px 0 #c7c7c7,1px 1px 0 #c7c7c7;*/}
	hr {width:30px}
  .hero-banner-content{bottom: 50px;}
  .hero-banner{min-height: 300px;}
	.galerij figure img {max-width:100%;}
	.galerij figure{height:300px}

}