/* v:120825 */
/* rows en columns */

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
}

input, label, button {
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
}

.floating-form input {
  border: 1px solid #ccc;
  border-radius: 4px;
}

button, .btn {
  padding: 0.75rem 1.25rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.btn:hover {
  background-color: #0056b3;
}
/* einde row/col */
  
  html {
    font-size: 16px;
    background-color: var(--primarycolour);
    scroll-behavior: smooth;
    scrollbar-gutter: stable; /* Reserves space for scrollbar */
    overflow:visible;
  }
  
  html, body {
    color: var(--text-dark);
    margin:0;
    font-family: var(--font-family-montserrat);
  padding: 0;
  overflow:visible;
  }

  * {
    box-sizing: border-box;
  }
  section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    height: auto;
    scroll-margin-top: 75px;
    padding:48px 0;

  }
  
  .w-100 {
    width:100%;
  }

  .gap-12 {
    display:flex;
    gap:12px;
  }
  .gap-24 {
    display:flex;
    gap:24px;
  }
  .gap-48 {
    display:flex;
    gap:48px;
  }
  .gap-96 {
    display:flex;
    gap:96px;
  }
  
  .m-0 {
    margin:0;
  }

  .p-0 {
    padding:0;
  }

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

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

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

  .basis-padding {
    padding: 0px 70px;
  }

  .mw-1200 {
    max-width:1200px;
  }
  
  .mw-1600 {
    max-width:1600px;
  }

  .cptl {
    text-transform:uppercase;
  }

  .italic {
    font-style:italic!important;
  }

  .fz-20 {
    font-size:1.25em!important;
  }

  .fz-24 {
    font-size:1.5em!important;
  }
  .fz-14 {
    font-size:0.875em!important;
  }

  .w-50 {
    width:50%;
  }

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

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

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

  .flex-row {
    display:flex;
    flex-direction:row;
    align-items: center;
  }
  
  .flex-column {
    display:flex;
    flex-direction:column;
  }

  .visually-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;  
  }

  .op-0 {
    opacity: 0;
  }

  .p0 {
    padding:0;
  }

  .logo {
    width:auto;
    height:50px;
  }

  @keyframes bounce {
    0%, 100%   { transform: translateY(0);}
    50%  { transform: translateY(16px);}

    
}
.bounce-down {
    animation: bounce 1.4s ease-in-out infinite;
    will-change: transform;
}



  /* navbar */

  #navbar {
    position:sticky;
    z-index:999;
    top:0;
  }

  .navbar {
    color: var(--text-light);
    background-color: var(--pp-primary);
    width: 100%;

  }

  .nav-content {
    max-width:1600px;
    justify-content: space-between;
    width:100%;
    padding:12px 70px;
    align-items: center;
    
  }

.menu-item-container {
    width: 50%;
}

.navbar ul {
    list-style: none;
    justify-content: space-around;
    position:relative;
    display: flex;
    margin:0;
    padding:0;
}

.menu-item-container ul li:first-of-type {
  display:none;
}

ul li a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.3s;
  display: inline-block;
  padding: 15px 36px;
  position: relative;
}

ul li a:after {
  content: "";
  display: block;
  height: 2px;
  bottom: 0;
  position: absolute;
  background: currentColor;
  transition: width 0.5s ease, left 0.5s ease;
  width: 0;
  left: 50%;
  transform: translateX(-50%);
}

ul li a:hover:after {
  width: 70%;
}

.nav-btn-container {
    display: flex;
    gap: 24px;
    justify-content: flex-end;
    width: fit-content;
}

.nav-btn-container .btn-secondary:hover {
  background-color: var(--pp-secondary-100) !important;
}

.nav-btn-container .btn-primary:hover {
  background-color: var(--pp-secondary-75) !important;
}

.menu-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.menu-item-container {
    width: 50%;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}


.menu-container.open {
  display: flex; 
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--pp-primary);
  padding-top: 80px;
  z-index: 2500;
}


/* Hamburger button: hidden op desktop */
.hamburgermenu {
  display: none!important;
  background: none;
  border: none;
  font-size: 28px;
  color: white;
  cursor: pointer;
  z-index: 3001;
}
/* hero */
.hero {
  background-image: url(/library/backgrounds.webp);
  background-size:cover;
  height:85vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


.index .hero .overlay {
  display:none;
  z-index:2;
}

.hero .hero-content {
  position:relative;
  z-index: 2;
  text-align: center;
  color:var(--text-light);
  display:flex;
  align-items:center;
  gap:0;
}

.hero .hero-content p {
  font-size:1.25em;
}

.hero .rating {
  color: var(--text-light);
  z-index: 2;
}

.hero .rating i {
  color: #decf59;
  font-size: 20px;
}

.hero-btn {
  margin:24px 0;
}

.hero h1 {
  margin: 0.2em 0;
}

/* usps */
.usps {
  width: 100%;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 1600px;
  transition: margin 0.7s ease-out 0.7s, opacity 0.2s ease-out 0.7s, transform 0.7s ease-out 0.7s;
  opacity: 0;
  transform: translateY(20px);
}

.usps.loaded {
  margin: -120px auto 0 auto;
  opacity: 1;
  transform: translateY(0);
}

.usp-item {
  background-color: #dcf2f2;
  border-radius: 8px;
  padding: 34px;
  width: 100%;
  text-align: center;
}

.usp-item p {
  font-weight:bold;
  font-size:1.125em;
}

.usps svg {
  margin-top: -60px;
  overflow: visible;
  margin-bottom: -22px;
}
  .usp-item svg path:nth-child(1) {
  stroke:#dcf2f2;
  }

.usp-item svg path:nth-child(2) {
  fill: var(--pp-primary);
}

/* product */

.our-product {
  padding-bottom: 100px;

}
.our-product-content {
  max-width:1600px;
  justify-content: space-between;
}

.our-product .product-image img {
  width:800px;
  height:auto;
}

.product-text {
  width: 33%;
  gap: 8px;
}

.product-text h2 {
  font-size:1.8em!important;
  line-height:1.5em!important;
}

.product-text h3, .product-text p {
  font-size: 1.125em!important;
  line-height:1.5em!important;
}

#rocket {
  width:600px;
  height:auto;
}

/* cta */
.cta {
  background-color:var(--pp-secondary-25);
  width: 100%;
  overflow: hidden;
}

.cta-content {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 70px;
  justify-content: space-between;
}

.cta-text {
    font-size: 1.5em !important;
    font-weight:600;
    max-width:35%;
}

.cta-dark {
  background-color:var(--pp-secondary-100);
  color:var(--text-light);
}

.cta-light {
  background-color:var(--pp-secondary-25);
  color:var(--pp-primary);
}


/* compare */
.compare {
  background: 
  url(/library/cloud-bg.webp) no-repeat 76% 2%/ 300px,
  url(/library/cloud-bg.webp) no-repeat -8% 7% / 300px,
  url(/library/cloud-bg.webp) no-repeat 39% 9%/ 268px,
  url(/library/cloud-bg.webp) no-repeat 105% 16%/ 324px,
  url(/library/cloud-bg.webp) no-repeat -2% 26%/ 359px,
  url(/library/cloud-bg.webp) no-repeat 85% 45% / 280px,
  url(/library/cloud-bg.webp) no-repeat 15% 50% / 310px,
  url(/library/cloud-bg.webp) no-repeat 50% 60% / 260px,
  url(/library/cloud-bg.webp) no-repeat 110% 70% / 300px,
  url(/library/cloud-bg.webp) no-repeat 0% 75% / 270px,
  url(/library/cloud-bg.webp) no-repeat 60% 85% / 320px,
  url(/library/cloud-bg.webp) no-repeat 25% 90% / 280px,
  url(/library/cloud-bg.webp) no-repeat 90% 95% / 310px,
      linear-gradient(180deg, 
rgba(97, 119, 158, 1) 0%,
rgba(97, 119, 158, 1) 64%,
rgba(203, 210, 224, 1) 100%);

overflow:clip;
}

.swipe-hint {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-top: -32px;
}

.swipe-hint i {
  position: absolute;
  left: 100%;
  animation: swipeLeftRotate 1.5s ease-in-out infinite;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0.8;
}

@keyframes swipeLeftRotate {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateX(-100px) rotate(15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-110px) rotate(0deg);
    opacity: 0;
  }
}

/* procedure */
.procedure h2, .procedure h3, .procedure h4, .procedure p{
  color:var(--text-light)!important;
}

.procedure h2 {
  font-size:3.25em!important;
text-align: center;
}


.propixel-site, .maatwerk-site {
  color:var(--text-light);
  font-size:1.5em;
}

.procedure-carousel-container {
  margin-top: 48px;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
  position: relative;
  z-index: 10; 
  will-change: transform;
}

.procedure-carousel-container.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  background: yellow; 
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.propixel-site span.cptl.bold {
  font-size: 1.125em;
}

.total-price p, .total-price span{
  font-size:1.3em!important;
  margin:0;
}

.extra-content i {
    margin-right: 8px;
}

/* demo */
.demo {
  max-width: 700px;
  text-align: center;
  margin:96px 0;
  color: var(--pp-primary);
}

.demo-intro .intro-afbeelding {
    width:70%;
}

.intro-afbeelding img {
    width:100%;
    height:auto;
}

.compare .contactform h3.bold {
  font-size: 2.2em!important;
}



.contactform h3 {
  max-width: 850px;
  text-align: center;
}

.contactform .text-container {
  color:var(--pp-primary);
}

.floating-form .container {
  width:100%;
  position:relative;
}

.floating-form .entryarea {
  position:relative;
  height:80px;
  line-height: 54px;
  margin-bottom: 0;
}

.floating-form input {
  position:absolute;
  width:100%;
  outline:none;
  line-height: 54px;
  border-radius:10px;
  border:4px solid;
  background:transparent;
  transition:0.1s ease;
  z-index:3;
  box-sizing:border-box;
  padding:0 24px;
}

.floating-form .labelline {
  position:absolute;
  color:white;
  padding: 0 25px;
  margin: 0 20px;
  transition:0.2s ease;
  z-index:2;
}



/* ✅ Focus & validatie – algemeen */
.floating-form input:focus,
.floating-form input[required]:valid {
  color: var(--pp-accent2);
  border: 4px solid var(--pp-accent2);
}

.floating-form input:focus + [data-lastpass-icon-root] + .labelline,
.floating-form input[required]:valid + [data-lastpass-icon-root] + .labelline,
.floating-form input:focus + .labelline,
.floating-form input[required]:valid + .labelline,
.floating-form input:not(:placeholder-shown) + [data-lastpass-icon-root] + .labelline,
.floating-form input:not(:placeholder-shown) + .labelline,
.floating-form textarea:focus + .labelline {
  color: var(--pp-secondary-75);
  line-height: 30px;
  transform: translate(-15px,-16px) scale(0.88);
  z-index: 10;
  background-color:var(--pp-accent2);
  border-radius: 6px;
  padding: 0 25px;
  font-weight:600;
}

[data-lastpass-icon-root] {
  position: absolute !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* formulier index */
#verwerk_contactaanvraag input, #verwerk_contactformulier input {
  border: 4px solid var(--pp-secondary-50);
}

#verwerk_contactaanvraag input:focus,
#verwerk_contactaanvraag input[required]:valid,
#verwerk_contactaanvraag input:not([required]):not(:placeholder-shown) {
    color: var(--pp-primary);
    border: 4px solid var(--pp-accent2);
}

/* Email validatie */
#verwerk_contactaanvraag input[type="email"]:invalid:not(:placeholder-shown),
#verwerk_contactformulier input[type="email"]:invalid:not(:placeholder-shown) {
  color: #bf1b1b;
  border: 4px solid #e89494;
}

 #verwerk_contactaanvraag input[type="email"]:invalid:not(:placeholder-shown) + [data-lastpass-icon-root] + .labelline,
 .index #verwerk_contactaanvraag input[type="email"]:invalid:not(:placeholder-shown) + .labelline,
 .tarieven #verwerk_contactaanvraag input[type="email"]:invalid:not(:placeholder-shown) + .labelline,
  #verwerk_contactformulier input[type="email"]:invalid:not(:placeholder-shown) + [data-lastpass-icon-root] + .labelline,
 .contact #verwerk_contactformulier input[type="email"]:invalid:not(:placeholder-shown) + .labelline,
.usecase-brand #verwerk_contactaanvraag input[type="email"]:invalid:not(:placeholder-shown) + .labelline,
.usecase-brand #verwerk_contactaanvraag input[type="email"]:invalid:not(:placeholder-shown) + [data-lastpass-icon-root] + .labelline   {
  background-color: #e89494;
  color:white;
}

.pricing .floating-form input[type="email"]:invalid:not(:placeholder-shown), 
.contact #verwerk_contactformulier input[type="email"]:invalid:not(:placeholder-shown) {
  color: #e89494;
  border: 4px solid #e89494;
}

/* Tarieven form styling */
.pricing .contactform {
  background: linear-gradient(
90deg,
rgba(0, 204, 204, 0.4) 0%,
rgba(0, 204, 204, 0.1) 27%
);
backdrop-filter:blur(7px);
border-radius:16px;
padding: 48px;
align-items:center;
text-align:left;
}

.pricing .contactform h3 {
  text-align:left;
}
.pricing .floating-form .container {
  width: 100%;
  position: relative;
}

.pricing .floating-form .entryarea {
  position: relative;
  height: 56px;
  width: 100%;
  display: flex;
  align-items: center;
}

.pricing .floating-form input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  transition: 0.3s ease;
}

.pricing .floating-form .labelline {
  position: absolute;
  left: 7px;
  padding: 0 8px;
  transition: 0.3s ease;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
  font-size:0.875em;
}

.pricing .floating-form input:focus + .labelline,
.pricing .floating-form input:not(:placeholder-shown) + .labelline {
  transform: translateY(-29px);
  font-size: 14px;
}

.pricing .floating-form input:focus + [data-lastpass-icon-root] + .labelline, .pricing .floating-form input[required]:valid + [data-lastpass-icon-root] + .labelline, .pricing .floating-form input:focus + .labelline, .pricing .floating-form input[required]:valid + .labelline {
  color: var(--pp-accent1);
  line-height: 30px;
  transform: translate(-15px, -26px) scale(0.88);
  z-index: 1111;
}


.pricing .floating-form input[type="email"]:invalid:not(:placeholder-shown) + [data-lastpass-icon-root] + .labelline, .pricing .floating-form input[type="email"]:invalid:not(:placeholder-shown) + .labelline {
  line-height: 30px;
  transform: translate(-15px, -29px) scale(0.88);
  z-index: 1111;
}

.tarieven #verwerk_contactaanvraag input {
    border: 4px solid white;
}
.tarieven #verwerk_contactaanvraag .labelline {
  color: var(--pp-secondary-75);
}

.tarieven #verwerk_contactaanvraag input:focus {
    border: 4px solid var(--pp-accent1);
}
.tarieven #verwerk_contactaanvraag input:focus + .labelline {
  background-color: var(--pp-accent1);
  color:white;
}

.tarieven #verwerk_contactaanvraag input[required]:valid + .labelline,
.tarieven #verwerk_contactaanvraag input:focus + [data-lastpass-icon-root] + .labelline {
  background-color: var(--pp-accent1);
  color:white;
}

.tarieven #verwerk_contactaanvraag input[required]:valid {
  border-color: var(--pp-accent1);
}

.tarieven #verwerk_contactaanvraag input:not(:placeholder-shown) + [data-lastpass-icon-root] + .labelline,
.tarieven #verwerk_contactaanvraag input:not(:placeholder-shown) + .labelline {
  background-color: var(--pp-accent1);
  color:white;
}

#verwerk_contactformulier input:focus,
#verwerk_contactformulier input[required]:valid,
#verwerk_contactformulier input:not([required]):not(:placeholder-shown) {
  border: 4px solid var(--pp-accent1);
  color: var(--pp-accent2);
}

/* contact formulier */

.contact .floating-form input::placeholder,
.contact .floating-form textarea::placeholder {
    opacity: 0;
}


.contact .floating-form input:focus + .labelline,
.contact .floating-form input:not(:placeholder-shown) + .labelline,
.contact .floating-form textarea:not(:placeholder-shown) + .labelline {
    transform: translate(-15px, -16px) scale(0.88);
    padding: 0 8px;
    z-index: 1111;
}

.floating-form input[type="email"]:invalid:not(:placeholder-shown) + [data-lastpass-icon-root] + .labelline#voornaam {
  transform: translate(-15px,-16px) scale(0.88);
  z-index: 1111;
}

.contact .floating-form textarea:focus + .labelline {
   transform: translate(-15px, -16px) scale(0.88);
    padding: 0 8px;
    z-index: 1111;
    line-height: 30px;
}

.contact .floating-form textarea:not(:placeholder-shown) + .labelline {
    transform: translate(-15px, -16px) scale(0.88);
    padding: 0 8px;
    z-index: 1111;
    line-height: 30px;
}

.contact #verwerk_contactformulier input:focus + .labelline {
  background-color: var(--pp-accent1);
  color: white;
}

.contact #verwerk_contactformulier input:not(:placeholder-shown) + .labelline,
.contact #verwerk_contactformulier input:not(:placeholder-shown) + [data-lastpass-icon-root] + .labelline,
.contact #verwerk_contactformulier input:focus + [data-lastpass-icon-root] + .labelline,
.contact #verwerk_contactformulier textarea:focus + .labelline,
.contact #verwerk_contactformulier textarea:not(:placeholder-shown) + .labelline {
  background-color: var(--pp-accent1);
  color: white;
  border-radius:6px;
}
.contact #verwerk_contactformulier .labelline {
  padding: 0 10px;
}



/* formulier use-case-brand */
.usecase-brand #verwerk_contactaanvraag input {
  border: 4px solid var(--pp-accent2);
}

/* review slider */

.reviews {
  gap: 48px;
  padding: 50px 70px;
  position: relative;
  justify-content: center;
  
}

.reviews h2 {
  color:var(--text-light);
}
  
  .swiper {
    width:100%;
    max-width:1600px;
  }
  
  .slider-wrapper {
    overflow: hidden;
    max-width: 1600px;
    margin: 0 70px 55px;
  }
  
  .card-list .card-item {
    height: auto;
    user-select: none;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 12px;
    backdrop-filter: blur(30px);
    background: linear-gradient(
      104deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.6) 63%
      );    
      border: 1px solid rgba(143, 143, 143, 0.2);
    box-shadow: 2px 4px 12px rgba(0,0,0,0.1);
    gap:8px;
  }
  
  .card-list .card-item .user-image {
    width: auto;
    height: 48px;
    border-radius: 100%;
    margin-bottom: 40px;
    padding: 4px;
  }
  
  .persona {
    display:flex;
    flex-direction: row;
    gap:24px;
    height:17.5%;
  }
  
  .persona-text {
    display:flex;
    flex-direction: column;
    gap:8px;
  }

  .persona-text p {
    margin: 0;
}
  
  .review-score {
    display:flex;
    flex-direction: row;
    gap:8px;
    height:22px;
    margin-top:12px;
    align-items: center;
  }
  
  .persona-text .disclaimer {
    color:grey;
  }
  
  .fa-star, .fa-star-half-stroke {
    color:var(--pp-accent1);
  }
  
  .slider-wrapper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.685);
    height: 13px;
    width: 13px;
    opacity: 0.5;
  }
  
  .slider-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
  }
  
  .slider-wrapper .swiper-slide-button {
    color: #a2dee2;
    margin-top: -55px;
    transition: 0.2s ease;
  }
  
  .slider-wrapper .swiper-slide-button:hover {
    color: var(--accent1-colour);
  }
  
  @media (max-width: 768px) {
    .slider-wrapper {
      margin: 0 10px 40px;
    }
  
    .slider-wrapper .swiper-slide-button {
      display: none;
    }
  }

  .message, .persona-text {
    text-align:left;
  }


  /* keurmerken */
.img-carousel {
  overflow:hidden;
  white-space: nowrap;
  position: relative;
  width:100%;
  max-width: 1600px;
}

.img-carousel .section-title {
  margin-bottom:48px;
}

.img-carousel:before,
.img-carousel:after {
   position: absolute;
  top:0;
  width:250px;
  height:100%;
  content: "";
  z-index:2; 
}

.img-carousel:before{
/* background: linear-gradient(to left, rgba(255,255,255,0), #c2cada88);  */
left:0;
}

.img-carousel:after{
  /* background: linear-gradient(to right, rgba(255,255,255,0), #c2cada93);  */
  right:0;
  }

.img-carousel:hover .img-slide{
  animation-play-state: paused;
}

.img-slide {
  animation: 35s slide infinite linear;
  display:inline-block;
}

.img-slide img {
  height: 60px;
  width:auto;
  margin: 0 40px;
}

@keyframes slide {
  from{
    transform: translateX(0);

  }
  to {
    transform: translateX(-100%);
  }
}

/* footer */
.footer {
  background-color: var(--pp-primary);
  color: var(--text-light);
}

.footer .footer-heading {
  font-size: 1.2em;
}

.footer-content {
  justify-content: space-between;
  max-width:1600px;
  align-items:flex-start;
  padding:24px 70px;
  
}

.phone-mail-container i, .helpdesk i {
  margin-right: 12px;
}

.footer a {
  margin: 4px 0;
}

.socials-container i {
  color:var(--pp-accent2);
}


/* tarieven pagina */

.tarieven .hero {
  background-image: url(/library/rocket.webp);
  background-size: cover;
  background-position: center center;
  height: 65vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tarieven .hero h2 {
  max-width: 700px;
}

.tarieven .hero-content {
  align-items: flex-start;
  padding: 0 70px;
  max-width: 1600px;
  text-align: left;
  width:100%;
  
}

.tarieven .hero-content h1 {
  text-align:left;
}

/* tarieven sectie */

.pricing {
  text-align:center;
  background: 
  url(/library/propixel-beeldmerk-white.webp) no-repeat -50% 5% / 1008px,
  url(/library/propixel-beeldmerk-white.webp) no-repeat 135% 106% / 700px,  
  var(--pp-tertiary-100);
  overflow: clip;
}

.pricing-content{
  max-width: 1600px;
  width:100%;
}

.pricing-content .title, .pricing-content .products, .pricing-content .included {
  max-width:1100px;
}

.pricing-content .products .flex-row{
  justify-content: space-between;
  align-items: stretch;
}

.price {
  font-size: 2em!important;
}

.productprice {
  margin-bottom:0;
}

.startup, .business, .more-sites {
  padding:24px 48px;
  background-color: rgba(255, 255, 255, 1.0);
  background: linear-gradient(111deg,rgba(191, 242, 242, 0.4) 0%,rgba(191, 242, 242, 0.1) 52%);
  border-radius:16px;
  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter:blur(7px);
  justify-content: space-between;
  text-align: left;
  height:100%;
}

.startup td, .business td {
  padding:8px 0!important;
}

.product-business, .product-startup, .more-sites, .pricing .table tr {
    transition: 0.5s ease;
}

.product-business:hover, .product-startup:hover, .more-sites:hover, .pricing .table tr:hover {
    transform: scale(1.02);
}

.startup p, .business p {
  margin:0;
}

.startup button.btn-primary, .business button.btn-primary {
  margin-top: auto;
  align-self:center;
  width:100%;
  text-align:center;
  display: flex  ;
  justify-content: center;
  box-sizing:border-box;
  cursor:pointer;
}  

.tarieven td i.fa-solid.fa-check {
    margin-right: 12px;
    font-size: 1.5em !important;
    color: var(--pp-accent1);
}

.more-sites {
padding:36px 48px;
background-color: rgba(255, 255, 255, 1.0);
background: linear-gradient(111deg,rgba(191, 242, 242, 0.4) 0%,rgba(191, 242, 242, 0.1) 52%);
border-radius:16px;
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1);
backdrop-filter:blur(7px);
justify-content: space-between;
text-align: left;
}

.more-sites .btn {
  align-self:center;
}

.more-sites h3 {
  margin:0;
}

.most-popular {
  margin-bottom: 12px; 
  pointer-events: none; 
  background: var(--pp-accent1)!important; 
  color: white!important; 
  font-weight: bold; 
  border: none; 
  border-radius: 20px!important; 
  padding: 6px 18px!important; 
  font-size: 1em;
}

/* included */
.included .title i {
  color:var(--pp-accent1);
  margin-top:48px;
}
.included table {
  width: 100%;
  border-spacing: 0 20px;
  border-collapse: separate;
  color: var(--pp-secondary-100);
}

.included tbody tr {
  background: linear-gradient(111deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 63%);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.included td {
  padding: 10px;
  background: none;
}

.included thead tr {
  background: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.included tbody tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.included tbody tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

table td:first-child {
  text-align: left;
  padding-left:48px;
}


.included .table i {
  font-size: 1.4em;
}



.pricing .reviews h2 {
  display:none;
}

/* SUCCESVERHALEN */

.succesverhalen .hero {
    background-image: url(/library/mountains.webp);
    height: 70vh;
}



.succesverhalen .hero-content  {
    align-items: flex-start;
    padding: 0 70px;
    max-width: 1600px;
    text-align: left;
    width: 100%;
    
}

.succesverhalen .hero-content h2 {
  max-width:54%;
}

.succesverhalen .rating {
  align-self: flex-start;
  align-items: flex-start;
  max-width:1600px;
}

.succesverhalen .rating p {
  font-size:1em;
}
/* use case sectie */

.use-case-section {
    max-width: 1600px;
    margin: 0 auto;
}

.use-case {
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.66) 100%);
    border: 0px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 40px;
    flex: 1 1 calc(33% - 20px);
    /* max-width:33%; */
    justify-content: flex-start;
    overflow:hidden;
}

.use-case .uitgelichte-afbeelding {
    width: 100%;
    height: 400px; /* vaste hoogte voor consistente weergave */
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.use-case .uitgelichte-afbeelding img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

/* Scale transitie bij hover op de use-case */
.use-case:hover .uitgelichte-afbeelding img {
    transform: scale(1.08); /* zelfde effect als background-size vergroten */
}

.use-case .content {
  padding:24px;
}

.use-case .content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp:inherit;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.use-case .btn-use-case {
  width:100%!important;
  justify-content: center;
  
}

.use-cases-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 48px;
    padding: 24px 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Remove horizontal scroll */
}

.succesverhalen-sector .sector-container h1 {
  text-align: center;
  color:white;
}

.use-case {
    flex: 0 0 calc(33.333% - 32px);
    width: calc(33.333% - 32px);
}

.use-cases-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.use-case .use-case-footer {
  width:100%;
  padding:0 24px;
  box-sizing:border-box;
  padding-bottom:24px;
}

/* sector sectie*/

.sectoren-content {
  max-width:1600px;
  text-align:center;
  padding-top:0;
}
.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 600px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "bouw gezondheid gezondheid hr-recruitment"
    "bouw gezondheid gezondheid hr-recruitment"
    "product automotive industrie hr-recruitment"
    "product automotive industrie hr-recruitment"
    "product horeca recreatie recreatie"
    "product horeca recreatie recreatie"
}
.item {
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
}

.item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: all 0.3s ease;
}

.item > * {
  position: relative;
  z-index: 2;
}

.grid .item:nth-child(1) {
  grid-area: bouw;
  background: url(/library/bouw.webp) center/150% no-repeat;
  transition: background-size 0.3s ease;
}
.grid .item:nth-child(1):hover {
  background-size: 160%;
}

.grid .item:nth-child(2) {
  grid-area: product;
  background: url(/library/product.webp) center/110% no-repeat;
  transition: background-size 0.3s ease;
}
.grid .item:nth-child(2):hover {
  background-size: 120%;
}

.grid .item:nth-child(3) {
  grid-area: horeca;
  background:url(/library/horeca.webp) center/110% no-repeat;
  transition: background-size 0.3s ease;
}
.grid .item:nth-child(3):hover {
  background-size: 120%;
}
.grid .item:nth-child(4) {
  grid-area: gezondheid;
  background:url(/library/gezondheid.webp) center/110% no-repeat;
  transition: background-size 0.3s ease;
}
.grid .item:nth-child(4):hover {
  background-size: 120%;
}

.grid .item:nth-child(5) {
  grid-area: hr-recruitment;
  background:url(/library/recruitment1.webp) center/150% no-repeat;
  transition: background-size 0.3s ease;
}
.grid .item:nth-child(5):hover {
  background-size: 160%;
}

.grid .item:nth-child(6) {
  grid-area: automotive;
  background:url(/library/automotive.webp) center/150% no-repeat;
  transition: background-size 0.3s ease;
  
}
.grid .item:nth-child(6):hover {
  background-size: 160%;
}

.grid .item:nth-child(7) {
  grid-area: industrie;
  background:url(/library/industry.webp) center/150% no-repeat;
  transition: background-size 0.3s ease;
}
.grid .item:nth-child(7):hover {
  background-size: 160%;
}

.grid .item:nth-child(8) {
  grid-area: recreatie;
  background:url(/library/recreatie.webp) center/150% no-repeat;
  transition: background-size 0.3s ease;
}
.grid .item:nth-child(8):hover {
  background-size: 160%;
}

.sector-container h3 {
  font-weight:700!important;
  color:white;
  text-align:center;
}

.normal {
  font-size:2.2em!important;
}

.big {
  font-size:2.5em!important;
}

/* usecase bedrijf pagina */
.use-case-item {
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
}

.use-case-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: all 0.3s ease;
}

.use-case-item > * {
  position: relative;
  z-index: 2;
}

.use-case-item.story {
    align-items:flex-start;
}

.use-case-logo {
    height:45px;
    width:100%;
}


.usecase-brand .cta-usecase {
    margin: 0 auto;
    justify-content: center;
    background-color: var(--pp-tertiary-75);
}


.usecase-brand h2 {
  font-size: 1.5em!important;
}

.usecase-brand .cta-usecase .right {
  background-color: var(--pp-accent1);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--pp-primary);
    padding-top: 24px;
}
.succesverhaal .promo-banner i {
    color: var(--pp-accent1);
    margin-top: 24px;
}

.promo-banner {
  color:var(--pp-primary);
}

.promo-banner p {
  margin-top:4px;
}

.usecase-brand .cta-content {
  padding:48px 70px;
}

.usecase-brand .right .btn-primary {
        background-color: var(--pp-primary)!important;
        color: white!important;
    }

.usecase-brand .btn-primary:hover {
  background-color:var(--pp-secondary-100)!important;
}

/* Contact pagina */
.contact .contact-container {
    max-width: 1600px;
    justify-content: space-between;
    gap: 48px;
    align-items:flex-start;
    width:100%;
    
}

.contact-section {
    background-color: var(--pp-secondary-75);
    color: white;
    background-image: url(/library/beeldmerk-d-blauw.webp);
    background-repeat: no-repeat;
    background-position: 0px -1254px;
    background-size: 1450px;
}

.contact-contactekst, .contact-contactformulier {
    width: 50%;
}

.contact-contacttekst {
  display:flex;
  flex-direction: column;
  gap:12px;
}

.contact-contacttekst h1 {
  font-size: 2.25em!important;
}

.contactdetails {
  gap:6px;
  width:fit-content;

}

.contactdetails i {
  margin-right:12px;
}

.contact .floating-form .message-area {
    height: 120px;
}

input#privacy {
    accent-color: var(--pp-accent1);
}

.contact .floating-form textarea {
    position: absolute;
    width: 100%;
    height: 120px;
    padding: 16px 24px;
    border: 4px solid var(--pp-secondary-50);
    border-radius: 10px;
    resize: none;
    font-family: inherit;
    font-size: 1rem;
    background: transparent;
    transition: 0.1s ease;
    z-index: 1111;
    
    color: var(--pp-accent2);
}

.labelline#tel {
    padding: 0 7px;
}



:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.entryarea.message-area .labelline:focus {
  line-height:30px;
}

.contact-contactekst h2, .contact-contactformulier h3 {
    font-weight: 600 !important;
}

.privacy-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.privacy-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
}

.privacy-check label {
    font-size: 0.875em;
    color: white;
}

.privacy-check a {
    color: var(--pp-accent2);
    text-decoration: none;
}

.privacy-check a:hover {
    text-decoration: underline;
}

/*accordion sectie */
.accordion {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width:100%;
}

.accordion-item {
  flex: 1; 
  margin: 6px 0; 
}

.accordion-button {
    background-color: var(--pp-secondary-25);
    color: var(--text-dark);
    border: none;
    cursor: pointer;
    width: 100% !important;
    text-align: left;
    padding: 0 20px!important;
    font-size: 18px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.accordion-button[aria-expanded="true"] {
    border-radius: 8px 8px 0 0;
}

.accordion-title {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    text-transform:none!important;
}

.accordion-content {
    height: 0;
    padding: 0 20px;
    background-color: var(--pp-secondary-25);
    color: var(--text-dark);
    border-radius: 0 0 8px 8px;
    margin-top: -8px; /* Remove gap between button and content */
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.accordion-content.open {
  height:auto;
  padding:15px 20px;
}

.accordion-button[aria-expanded="true"] + .accordion-content {
    height: auto;
    padding: 15px 20px;
}

.accordion-button .icon {
    transition: transform 0.3s ease;
    color: var(--pp-secondary-100);
}

.accordion-button[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.faq-section {
  color:white;
  padding-bottom:100px;
  margin-top: 48px;
}

.faq {
    max-width: 1600px;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    
}

/* LANDINGSPAGINA PRODUCT */

 .why-usp {
      align-items: flex-end;
  }

  .landingpage-product .included tr td:nth-child(2),
  .landingpage-product .included tr td:nth-child(3){
      color: #0ab80a;
  }

  .landingpage-product .included .fa-xmark {
      color: #c30606 ;
  }

      .landingpage-product .intro-afbeelding {
      width:70%;
  }

  .landingpage-product .intro-afbeelding img {
      width:100%;
      height:auto;
  }

.landingpage-product .hero {
  background-image: url(/library/landingpage-bg.webp);
}

.landingpage-product .hero .overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
}



.why { 
  max-width:1600px;
}

.underline-animate {
  position: relative;
  display: inline-block;
  width:fit-content;
  font-size: inherit!important;
}

.underline-bar {
    position: absolute;
    bottom: 3px;
    left: 0;
    height: 30px;
    width: 0%;
    background-color: #00cccc42;
    border-radius: 3px;
    z-index: -1;
}

.why-image {
    width: 57%;
    margin-left: -175px;
}

.why-image img {
    width: 100%;
    height:auto;
}

.lp-usps {
    max-width: 1600px;
    align-self: flex-start;
    width: 45%;
}

.lp-usp-item {
    background-color: var(--pp-tertiary-50);
    padding: 16px;
    border-radius: 8px;
    width: 100%;
    align-items:center;
    justify-content: flex-start;
}

.lp-usp-item i {
  font-size:2em;
  color:var(--pp-secondary-50);
}

.landingpage-product .pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    url(/library/cloud-white.webp) no-repeat -8% 7% / 300px, 
    url(/library/cloud-white.webp) no-repeat 76% 2% / 300px, 
    url(/library/cloud-white.webp) no-repeat 39% 9% / 268px, 
    url(/library/cloud-white.webp) no-repeat 105% 16% / 324px, 
    url(/library/cloud-white.webp) no-repeat -2% 26% / 359px, 
    url(/library/cloud-white.webp) no-repeat 4% 56% / 450px, 
    url(/library/cloud-white.webp) no-repeat 100% 77% / 368px, 
    url(/library/cloud-white.webp) no-repeat 87% 39% / 282px;
  opacity: 0.6; /* Pas hier transparantie aan */
  pointer-events: none;
  z-index: -1;
  overflow:clip;
}
.landingpage-product .pricing {
  position: relative;
  z-index: 1;
  background-color: var(--pp-tertiary-100);
  background-image:none;
}

.landingpage-product .faq {
  color:var(--text-dark);
}

.landingpage-product .accordion-button, .landingpage-product .accordion-content {
  background-color: var(--pp-tertiary-50);
}

.landingpage-product .cta {
  background-color: var(--pp-accent2);
  color:var(--text-dark);
}

/* LANDINGPAGE DEMO */



.usp-bar-section {
  background-color:var(--pp-tertiary-50);
  padding: 24px 0;
}

.usp-bar {
  justify-content: space-between;
  font-weight:600;
}

.usp-bar-item {
  display: flex;
  align-items: center;
  justify-content: center;;
}

.usp-bar i {
  font-size:1.5em;
}

.demo-promo {
  background-color: var(--pp-tertiary-50);
  border-radius:8px;
  padding: 24px 36px;
  max-width: 500px;
  width:100%;
}

.demo-img{
    width: 100%;
}

.demo-img img {
    width: 100%;
    height:auto;
}

.demo-3 {
  margin-top:48px;
}

.demo-slogan {
  font-weight:600;
  font-size:1.5em!important;
  margin-top:64px;
}

.demo-2 span {
    font-size: 2.25em;
    margin-top: 2em;
    margin-bottom: 0.5em;
}


/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: rgba(0,0,0,0);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.modal.active {
    display: block;
    opacity: 1;
    visibility: visible;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    position: relative;
    background-color: var(--pp-primary);
    color: white;
    padding: 40px;
    max-width: 1200px;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    transition: all 0.3s ease;
    justify-content: space-between;
    overflow: hidden;
}

.modal.active .modal-content {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    top: 50%;
}

.modal.closing {
    opacity: 0;
    background-color: rgba(0,0,0,0);
}

.modal.closing .modal-content {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    top: 50%;
}

.close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 28px;
    cursor: pointer;
}

.contact-form {
    margin-top: 24px;
}

.form-group {
    margin-bottom: 16px;
    width:100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.875em;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.modal-img {
    width: 30%;
}

.modal-img img {
    width: 50%;
    position: fixed;
    top: -95px;
    left: -136px;
}

.modal-text {
  width:60%;
}

.modal-content form {
  gap:4px;
}

.modal-content form button:hover {
      background-color: var(--pp-secondary-75) !important;
}

.form-message {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    display: none;
}

.form-message.success {
    display: block;
    background-color: var(--pp-accent1);
    color: white;
}

.form-message.error {
    display: block;
    background-color: #e89494;
    color: white;
}

/* Shared styles for modal and regular form */
.modal-content,
.demo-form {
    position: relative;
    background-color: var(--pp-primary);
    color: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    justify-content: space-between;
    overflow: hidden;
}

.modal-img,
.form-img {
    width: 30%;
}

.modal-text,
.form-text {
    width: 60%;
}

.demo-form {
    width: 100%;
    max-width: 1200px;
    margin:96px auto 48px auto
  }

.demo-form button:hover {
  background-color:var(--pp-secondary-75)!important;
}

.form-img img {
    width: 46%;
    position: absolute;
    top: -121px;
    left: -119px;
}

/* tijdsbesparing div */
.pin-spacer {
    width: 100% !important;
    justify-content: center;
}

            .proces-text {
              background: rgba(255, 255, 255, 0.12); /* semi-transparant wit */
              color:var(--pp-primary); 
              padding:24px;
              border-radius:8px;
              width:328px;
              box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
              height:90px;
              backdrop-filter: blur(10px);
              -webkit-backdrop-filter: blur(10px);
              border: 0.5px solid rgba(255, 255, 255, 0.25);
              text-align: center;
              transition: all 0.3s ease;
              display:flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
            }

            .proces-text p {
              color:var(--pp-primary)!important;
            }

            .hour-hand, .hour-hand-custom {
                width: 6px;
                height: 30px;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                transform-origin: 50% 100%;
            }

            .minute-hand, .minute-hand-custom {
                width: 4px;
                height: 40px;
                top: 10px;
                left: 50%;
                transform: translateX(-50%);
                transform-origin: 50% 100%;
}
            
/* Clock styling */
.clock {
  width: 105px;
  height: 105px;
  background: rgba(255, 255, 255, 0.15); /* lichte transparantie */
  border-radius: 50%;
  position: relative;
  margin: 0; 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 6px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);      
}

.clock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 0;
}

.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 0;
  border-radius: 4px;
  z-index: 1;
  transition: transform 0.3s ease;
  background-color: rgba(255, 255, 255, 0.8); /* lichtere hand */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.hour-hand, .hour-hand-custom {
  width: 6px;
  height: 28px;
}

.minute-hand, .minute-hand-custom {
  width: 6px;
  height: 38px;
}

.comparison {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison div.flex-row {
  gap:24px;
}

.comparison-container {
  opacity:1;
    display: flex;
  flex-wrap: wrap; 
  margin-bottom:200px;
  margin-top:24px;
}

.carousel-container {
    flex-grow: 1;
}

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

.carousel-container {
    position: relative;
    height: auto; 
    overflow: visible; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0; 
    flex-direction: column;
    height:180px;
}

.propixel-compare, .custom-compare {
  gap: 8px;
  color:white;
  line-height:1.5em!important;
}

.propixel-compare img, .custom-compare img {
  height:30px;
}

.propixel-site > div:first-of-type, .maatwerk-site > div:first-of-type {
    width: 150px;
    height:50px;
}

.propixel-site > div:last-of-type, .maatwerk-site > div:last-of-type {
  width:400px;
}

        /* Style for carousel steps */
.processtep {
  position: absolute;
  display: none;
  opacity: 0;
  transform: translateY(188px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.processtep.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  z-index: 2;
}

.processtep.below {
  display: flex;
  opacity: 0.5;
  transform: translateY(210px);
  z-index: 1;
}

span.procestitle.bold {
    font-size: 1.25em !important;
}

.last-step .proces-text {
    background-color: #bfe7bf73;
}

.carousel-container {
    width: 400px; 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
}

/* Hero section animation */
        .hero-content {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 1.5s ease-out forwards;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

    /* succesverhalen-bouw pagina */

   #succesverhalen-bouw .grid {
    grid-template-areas:
    "bouw bouw bouw bouw";
    height:300px;
    max-width:1600px;
    padding:0;
   }

   .sector-container h2 {
    font-weight: 900!important;
    color: white;
}

   button#laad-meer-btn {
    margin:24px 0;
   }

   .use-cases-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.use-cases-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 48px;
    padding: 24px 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Remove horizontal scroll */
}

.use-case {
    flex: 0 0 calc(33.333% - 32px);
    width: calc(33.333% - 32px);
}

.procedure {
  position: relative;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  overflow:hidden;
  padding-top:110px;
}

.procedure-pin-wrapper {
  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  flex-direction: column;
  padding-top: 140px !important;
}

.procedure h2 {
  font-size: 4em !important;
  text-align: center;
}

.procedure h3 {
  font-size:2em!important;
  margin:0;
}

.compare .contactform .text-container {
    color: white;
}

.call-to-action .contactform {
  opacity: 0;
  transform: translateY(60px);
}


/* SUCCESVERHALEN INDUSTRIE */
   #succesverhalen-industrie .grid {
    grid-template-areas:
    "industrie industrie industrie industrie";
    height:300px;
    max-width:1600px;
    padding:0;
   }

  #succesverhalen-industrie .grid .item:nth-child(1) {
  grid-area: industrie;
  background: url(/library/industrie3.webp) center /150% no-repeat;
  transition: background-size 0.3s ease;
}

  #succesverhalen-industrie .item::before {
    background: rgba(0, 0, 0, 0.4);
}

  #succesverhalen-industrie .grid .item:nth-child(1):hover {
    background-size: 160%;
}

/* SUCCESVERHALEN GEZONDHEID */
   #succesverhalen-gezondheid .grid {
    grid-template-areas:
    "gezondheid gezondheid gezondheid gezondheid";
    height:300px;
    max-width:1600px;
    padding:0;
   }

  #succesverhalen-gezondheid .grid .item:nth-child(1) {
  grid-area: gezondheid;
  background: url(/library/gezondheid.webp) center /150% no-repeat;
  transition: background-size 0.3s ease;
}

  #succesverhalen-gezondheid .item::before {
    background: rgba(0, 0, 0, 0.4);
}

  #succesverhalen-gezondheid .grid .item:nth-child(1):hover {
    background-size: 160%;
}
/* SUCCESVERHALEN HR & RECRUITMENT */
   #succesverhalen-hr .grid {
    grid-template-areas:
    "hr hr hr hr";
    height:300px;
    max-width:1600px;
    padding:0;
   }

  #succesverhalen-hr .grid .item:nth-child(1) {
  grid-area: hr;
  background: url(/library/recruitment.webp) center /150% no-repeat;
  transition: background-size 0.3s ease;
}

  #succesverhalen-hr .item::before {
    background: rgba(0, 0, 0, 0.4);
}

  #succesverhalen-hr .grid .item:nth-child(1):hover {
    background-size: 160%;
}

/* SUCCESVERHALEN HORECA */
   #succesverhalen-horeca .grid {
    grid-template-areas:
    "horeca horeca horeca horeca";
    height:300px;
    max-width:1600px;
    padding:0;
   }

  #succesverhalen-horeca .grid .item:nth-child(1) {
  grid-area: horeca;
  background: url(/library/horeca-2.webp) center /110% no-repeat;
  transition: background-size 0.3s ease;
}

  #succesverhalen-horeca .item::before {
    background: rgba(0, 0, 0, 0.4);
}

  #succesverhalen-horeca .grid .item:nth-child(1):hover {
    background-size: 120%;
}
/* SUCCESVERHALEN PRODUCT */
   #succesverhalen-product .grid {
    grid-template-areas:
    "product product product product";
    height:300px;
    max-width:1600px;
    padding:0;
   }

  #succesverhalen-product .grid .item:nth-child(1) {
  grid-area: product;
  background: url(/library/product-2.webp) center /114% no-repeat;
  transition: background-size 0.3s ease;
}

  #succesverhalen-product .item::before {
    background: rgba(0, 0, 0, 0.4);
}

  #succesverhalen-product .grid .item:nth-child(1):hover {
    background-size: 120%;
}

/* SUCCESVERHALEN AUTOMOTIVE */
   #succesverhalen-automotive .grid {
    grid-template-areas:
    "automotive automotive automotive automotive";
    height:300px;
    max-width:1600px;
    padding:0;
   }

  #succesverhalen-automotive .grid .item:nth-child(1) {
  grid-area: automotive;
  background: url(/library/automotive-2.webp) center /114% no-repeat;
  transition: background-size 0.3s ease;
}

  #succesverhalen-automotive .item::before {
    background: rgba(0, 0, 0, 0.4);
}

  #succesverhalen-automotive .grid .item:nth-child(1):hover {
    background-size: 118%;
}
/* SUCCESVERHALEN RECREATIE */
   #succesverhalen-recreatie .grid {
    grid-template-areas:
    "recreatie recreatie recreatie recreatie";
    height:300px;
    max-width:1600px;
    padding:0;
   }

  #succesverhalen-recreatie .grid .item:nth-child(1) {
  grid-area: recreatie;
  background: url(/library/recreatie.webp) top /114% no-repeat;
  transition: background-size 0.3s ease;
}

  #succesverhalen-recreatie .item::before {
    background: rgba(0, 0, 0, 0.4);
}

  #succesverhalen-recreatie .grid .item:nth-child(1):hover {
    background-size: 118%;
}

/* OVER */

            .waarom {
                align-items: flex-start;
            }

            .waarom-img {
                width:80%;
            }

            .oplossing {
                align-items:flex-end;
                width:100%;
            }

            .oplossing-img {
                width:65%;
            }

            .gezichten {
                width:100%;
                background-color:#E5FAFA;
                align-items: center;
            }

            .profielen {
                width:100%;
                justify-content: space-evenly;
            }

            .profiel h4 {
                margin-bottom:0;
            }

            .profiel p {
                font-style: italic;
            }

            .about img {
    width: 100%;
    height: auto;
}

.about {
  max-width:1600px;
}

.img-container {
    width: 100%;
    overflow: clip;
    border-radius: 12px;
}

.profiel img {
    width:100%;
    height:auto;
    max-width:300px;
}

.profiel p {
  font-style: italic!important;
}

.gezichten {
    padding:48px 0;
    margin-top:96px;
}

.about-us {
    padding-bottom:0;
}

.about-text h1 {
   font-size: 2.25em!important;
}

.about-text h2 {
  font-size: 1.5em!important; 
}

.about-text h3 {
  font-size: 1.2em!important;
}




/* 1. Mobiel klein + groot / kleine tablets */
@media (max-width: 767px) {
  /* Styles voor kleine mobiele apparaten */
    .basis-padding {
    padding: 0 24px;
  }

  .hamburgermenu {
    display: block !important;
  }

  .nav-content {
    padding:12px 24px;
  }

  .logo {
    height:32px;
  }

  .menu-item-container ul li:first-of-type {
  display:flex;
}

.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--pp-primary);
  padding-top: 80px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 3000;
  overflow-y: auto;

  /* Start gesloten, buiten beeld boven */
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.6s ease;
}

.menu-container.open {
  transform: translateX(0);
  pointer-events: auto;
}
  /* Maak menu-items verticaal */
  .menu-item-container {
    width: 100%;
    flex-direction: column;
    display: flex; /* altijd zichtbaar, geen display:none */
    align-items: center;
  }

  .menu-item-container ul {
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .menu-item-container ul li {
    width: 100%;
    text-align: center;
  }

  .menu-item-container ul li a {
    padding: 20px;
    font-size: 20px;
    display: block;
    width: 100%;
  }

  /* Nav buttons onder menu-items */
  .nav-btn-container {
    display: flex; /* altijd zichtbaar */
    flex-direction: column;
    gap: 36px;
    width: 100%;
    margin-top: 40px;
    justify-content: center;
    align-items: center;
  }

        .nav-btn-container a {
            width: 65% !important;
            padding: 16px 0;
            font-size: 18px;
            text-align: center;
            justify-content: center;
        }
  
  
  .hero {
    padding: 24px;
    height:100%!important;
    justify-content: space-evenly;
  }

    .index .hero .overlay {
        position: absolute !important;
        background: rgba(0, 0, 0, 0.15);
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: block;
    }

  
  .hero .hero-content {
    align-items: flex-start;
  }
  
  .hero h1 {
    font-size:1.8em!important;
    letter-spacing:0.05em!important;
    line-height:1.5em!important;
    text-align: left;
  }

  .hero p {
    text-align: left;
    font-size:12px;
  }

  .hero .rating i {
    font-size: 12px;
}



  .usps-content {
    flex-direction: column;
    gap:48px;
  }

  .usps.loaded {
    margin:24px 0;
  }

  .our-product-content {
    flex-direction: column;
    gap:48px;
  }

  .product-text {
    width:100%;
  }

  #rocket {
    width:100%;
  }

  .product-image dotlottie-player {
    width:100%!important;
    height:auto!important;
  }

  .cta-content {
    flex-direction: column;
    padding:48px 24px;
    gap:24px;
  }

  .cta-text {
    max-width: 100%;
    text-align: center;
}



  .cta-content div {
    flex-direction: column;
  }

  .cta-content div .btn-lrg {
    width: 100%;
    text-align: center;
    justify-content: center;;
  }

  .compare {
    padding: 0 24px;
  }

  .compare {
    background: 
    url(/library/cloud-bg.webp) no-repeat -39% 9% / 268px, 
    url(/library/cloud-bg.webp) no-repeat 123% 37% / 213px, 
    url(/library/cloud-bg.webp) no-repeat -105% 66% / 250px, 
    url(/library/cloud-bg.webp) no-repeat 153% 97% / 300px, 
    linear-gradient(180deg, rgba(97, 119, 158, 1) 0%, rgba(97, 119, 158, 1) 64%, rgba(203, 210, 224, 1) 100%);
    overflow: clip;
    background-attachment: fixed;
}

  .call-to-action h3 {
    text-align: left;
  }

  .compare .contactform h3.bold {
    font-size: 1.9em !important;
}

.swiper-wrapper {
  display:flex;
}

.swiper-slide {
  flex-shrink: 0;
  width:auto;
}

.processtep {
  display:flex;
  flex-direction:column;
  width:100%;
  box-sizing:border-box;
  padding:16px;
}


.proces-text {
  max-width:100%;
  box-sizing:border-box;
}

.procedure-pin-wrapper {
    width:100%;
    height:auto;
}

.comparison-container {
  margin-bottom:0;
}

.comparison-container > .flex-column:nth-of-type(2), .extra-content .propixel-site > div:nth-of-type(1) {
  display:none;
}

.comparison-container > .flex-column:nth-of-type(1) {
  gap:24px;
}

.comparison div.flex-row {
  flex-direction: column;
}

.procedure h2 {
    font-size: 2.3em !important;
} 

.procedure h3 {
  font-size:1.7em!important;
  text-align: center;
  margin-top: 46px;
}

.procedure h4 {
  text-align:center;
}

.call-to-action .contactform form > div:nth-child(2) {
  flex-direction: column;
}

 #verwerk_contactaanvraag div {
  flex-direction:column;
}





.tarieven .floating-form div {
  flex-direction: column;
}


.reviews {
  padding:50px 0px;
}

.reviews h2 {
  text-align: center;
}

.footer-content {
  flex-direction: column;
  gap:60px;
  padding:24px;
  align-items:center;
}

.contact-details, .support, .links, .socials {
  text-align: center;
}

/* TARIEVEN */

.tarieven .hero {
  height:100%;
}
.tarieven .hero-content {
  padding: 0;
}

.tarieven .hero br {
  display:none;
}

.hero h2 {
  font-size:1.5em!important;
}

.tarieven .products-div {
  flex-direction: column;
  gap:48px;
}

.pricing {
  padding: 96px 24px;
}

.pricing-content {
  gap:48px;
}

.startup, .business, .more-sites {
  padding: 24px;
}

.tarieven .business a {
  margin-top:59px;
}

.more-sites {
  flex-direction: column;
  justify-content: flex-start;
}

.more-sites div {
  width:100%;
}

.tarieven .included table td:first-child {
    padding-left: 12px;
}

.tarieven .contactform {
  flex-direction: column;
  padding:28px;
}


.pricing .floating-form .labelline {
    top: 17px;
    padding:0;
}

.pricing .floating-form button {
  margin-top:24px;
}

.pricing .floating-form input:focus + [data-lastpass-icon-root] + .labelline, .pricing .floating-form input[required]:valid + [data-lastpass-icon-root] + .labelline, .pricing .floating-form input:focus + .labelline, .pricing .floating-form input[required]:valid + .labelline {
    transform: translate(-15px, -34px) scale(0.88);
}

.pricing .floating-form input:focus + [data-lastpass-icon-root] + .labelline {
    transform: translate(-15px, -31px) scale(0.88);
}

/* CONTACT */
.contact .contact-container {
  flex-direction: column;
}

.contact-contactekst, .contact-contactformulier {
    width: 100%;
}

.contact .floating-form div {
  flex-direction: column;
}

.contact .privacy-check {
  flex-direction: row!important;
}

/* SUCCESVERHALEN */
.succesverhalen .hero-content {
  padding:0;
}

.succesverhalen .hero-content h2 {
  max-width: 100%;
}

.succesverhalen .use-case {
  flex: 0 0 100%;
}

.use-case-swiper-wrapper .swiper-button-prev, .use-case-swiper-wrapper .swiper-button-next {
    left: 0;
    right: 0;
    background-color: #ffffff91;
    border-radius: 100px;
    width: 48px;
    height: 48px;
}

.use-case-swiper-wrapper .swiper-button-prev, .use-case-swiper-wrapper .swiper-button-next {
        left: auto!important;

}
.use-case-swiper-wrapper .swiper-button-prev {
  right:auto!important;
}

.swiper-wrapper {
    width: 100%!important;
}

.grid {
  margin-top:24px;
    gap: 2.5vw;
    grid-template-areas:
        "bouw bouw gezondheid gezondheid"
        "bouw bouw gezondheid gezondheid"
        "hr-recruitment hr-recruitment hr-recruitment hr-recruitment"
        "hr-recruitment hr-recruitment hr-recruitment hr-recruitment"
        "product product horeca horeca"
        "product product horeca horeca"
        "product product industrie industrie"
        "product product industrie industrie"
        "automotive automotive recreatie recreatie"
        "automotive automotive recreatie recreatie";
}

.normal {
    font-size: 1.2em !important;
}

.big {
    font-size: 1.4em!important;
}

.succesverhalen-sectoren {
  text-align: left;;
}

/* SUCCESVERHALEN BOUW */
.succesverhalen-sector section {
  padding:24px;
}

 .succesverhalen-sector .use-case {
  flex: 0 0 100%;
}

/* USE CASE BEDRIJF */

.usecase-brand section {
  padding:24px;
}

    .use-case-grid {
        grid-template-columns: repeat(2, 1fr)!important;
        grid-template-areas:
        "story story"
        "story story"
        "feedback feedback"
        "feedback feedback"
        "img-1 img-1"
        "img-1 img-1"
        "img-2 img-2"
        "img-2 img-2"
        "img-3 img-3"
        "img-3 img-3"!important;
}

.use-case-grid .use-case-item:nth-child(1), .use-case-grid .use-case-item:nth-child(3), .use-case-grid .use-case-item:nth-child(4) {
    height: 400px;
}

.use-case-grid .use-case-item:nth-child(3) {
    background-size: 122%;
}

.use-case-grid .use-case-item:nth-child(3):hover {
    background-size: 130%;
}

.use-case-grid .use-case-item:nth-child(4) {
    background-size: 130%;
  }

  .use-case-grid .use-case-item:nth-child(4):hover {
    background-size: 140%;
}

.use-case-item div {
  flex-direction: column-reverse;
}

.cta-usecase {
  padding: 0!important;
}

.cta-usecase .floating-form {
  width:100%;
}

.cta-usecase .floating-form div:nth-child(2) {
  flex-direction: column;
}

.cta-usecase .floating-form .labelline {
  padding: 0;
}

.cta-usecase form {
  width:100%!important;
}

.modal-text {
  width:100%;
}

.modal-img {
  display:none;
}

.close {
    right: 28px;
    top: 48px;
    font-size: 28px !important;
}

.modal h2 {
  font-size:1.5em!important;
}

.modal .contact-form div:nth-child(3) {
  flex-direction: column;
}

.modal .contact-form button {
  margin-top:24px;
}

body.modal-open {
  overflow: hidden;
}

/* OVER */

.oplossing {
    flex-direction: column;
}

.oplossing-img {
    width: 100%;
}

.waarom{
    flex-direction: column;
}

.waarom-2 {
  flex-direction: column-reverse;
}

.waarom-img {
    width: 100%;
}

.profielen {
  flex-direction: column;
  gap:24px;
}

.gezichten {
  padding:48px 24px;
}

.gezichten h3 {
  text-align: center;
}

.profiel img {
  max-width: 200px;
}

/* DEMO LANDINGPAGE */


.landingpage-demo .hero {
  min-height: 80vh;
}

.landingpage-demo .hero-content {
  padding:0;
  text-align: left;
  align-items: flex-start;
}

.landingpage-demo .hero-content h2 {
  text-align: left;
}

.landingpage-demo .rating {
  align-items: flex-start;
}

.landingpage-demo .rating p {
  font-size:0.875em!important;
}

.landingpage-demo .usp-bar {
  flex-direction: column;
  align-items: flex-start;
  padding:12px 24px;
  gap:12px;
}

.demo-3 {
  width:100%;
  flex-direction: column;
  gap:48px;
}

.demo-slogan{
  padding:48px 24px;
}

.landingpage-demo .demo-img img {
  width:100%;
}

.landingpage-demo .demo-intro {
  flex-direction:column;
}

.landingpage-demo .demo-intro h2 br{
  display:none;
}
.landingpage-demo .demo-intro h2, .landingpage-demo .demo-2 h2{
  font-size:1.8em!important;
}

.landingpage-demo .demo-2 p {
  text-align: left;
}

.landingpage-demo .demo-promo {
  padding:24px 12px;
}

.landingpage-demo .demo-form {
  border-radius:0;
  margin:0;
}

.landingpage-demo .demo-form .form-img {
  display: none;
}

.landingpage-demo .form-text {
  width:100%;
}

.landingpage-demo .form-text h2 {
  font-size: 2em;
}

.landingpage-demo .contact-form div:nth-child(3) {
  flex-direction: column;
}

.landingpage-demo section:nth-child(3) {
  gap:48px;
}

.landingpage-demo .cta {
  margin-top:-48px;
}

/* LANDINGPAGE PRODUCT  */

.landingpage-product .hero {
  min-height: 80vh;
}

.landingpage-product .hero-content {
  padding:0;
  text-align: left;
  align-items: flex-start;
}

.landingpage-product .hero-content h2 {
  text-align: left;
}

.landingpage-product .rating {
  align-items: flex-start;
}

.landingpage-product .rating p {
  font-size:0.875em!important;
}

.landingpage-product .why h2, .landingpage-product .pricing-content h2, .landingpage-product .faq h2 {
  font-size:1.8em!important;
}

.landingpage-product .why-usp {
  flex-direction: column;
  padding: 24px;
  gap:48px;
}

.landingpage-product .lp-usps {
  width:100%;
  margin-top:0;
  padding:0;
}

.landingpage-product .why-image {
  margin:0;
  width:100%;
}

.landingpage-product .cta {
  padding:0;
}

.why-content {
  flex-direction: column;
}

.landingpage-product .intro-afbeelding {
  width:100%;
}

.landingpage-product .products div {
  flex-direction: column;
}

.landingpage-product .products-div {
  gap:48px;
}


.included {
  overflow-x:auto;
}

.included tbody tr {
  filter:none;
}

.landingpage-product .included table td:first-child {
        padding-left: 12px;
    }

    .landingpage-product .pricing::before {
    background: 
    url(/library/cloud-white.webp) no-repeat -130% -2% / 300px, 
    url(/library/cloud-white.webp) no-repeat 150% 7% / 268px, 
    url(/library/cloud-white.webp) no-repeat -44% 14% / 324px, 
    url(/library/cloud-white.webp) no-repeat -105% 23% / 364px, 
    url(/library/cloud-white.webp) no-repeat 231% 34% / 282px, 
    url(/library/cloud-white.webp) no-repeat -16% 43% / 283px,
    url(/library/cloud-white.webp) no-repeat  -200% 50% / 283px,
    url(/library/cloud-white.webp) no-repeat -112% 62% / 283px,
    url(/library/cloud-white.webp) no-repeat 85% 71% / 283px,
    url(/library/cloud-white.webp) no-repeat -44% 82% / 283px,
    url(/library/cloud-white.webp) no-repeat 136% 100% / 283px;
}

.landingpage-product .accordion-title {
  gap:12px;
}
}

/* 3. Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .basis-padding {
    padding: 0 48px;
  }

  .hamburgermenu {
    display: block !important;
  }

  .nav-content {
    padding:12px 24px;
  }

  .logo {
    height:32px;
  }

    .menu-item-container ul li:first-of-type {
  display:flex;
}

.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--pp-primary);
  padding-top: 80px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 3000;
  overflow-y: auto;

  /* Start gesloten, buiten beeld boven */
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.6s ease;
}

.menu-container.open {
  transform: translateX(0);
  pointer-events: auto;
}


  /* Maak menu-items verticaal */
  .menu-item-container {
    width: 100%;
    flex-direction: column;
    display: flex; /* altijd zichtbaar, geen display:none */
    align-items: center;
  }

  .menu-item-container ul {
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .menu-item-container ul li {
    width: 100%;
    text-align: center;
  }

  .menu-item-container ul li a {
    padding: 20px;
    font-size: 20px;
    display: block;
    width: 100%;
  }

  /* Nav buttons onder menu-items */
  .nav-btn-container {
    display: flex; /* altijd zichtbaar */
    flex-direction: column;
    gap: 36px;
    width: 100%;
    margin-top: 40px;
    justify-content: center;
    align-items: center;
  }

        .nav-btn-container a {
            width: 36% !important;
            padding: 16px 0;
            font-size: 18px;
            text-align: center;
            justify-content: center;
        }

  .usps-content {
    flex-wrap: wrap;
  }     
  
  .usp-item {
    flex: 0 0 47%;
  }

  .hero {
    padding:48px;
  }

  .our-product-content {
    flex-direction: column;
  }

  .product-text {
    width:100%;
  }

  .cta-content {
    padding:48px 24px;
    gap:48px;
  }

  .cta-text {
    max-width:50%;
  }

  .cta-buttons {
    flex-direction: column;
    width:39%;
  }

  .cta-content a {
    width: 100%!important;
    justify-content: center;
}

.footer-content {
  flex-direction: column;
  gap:60px;
  padding:24px;
  align-items:center;
}

.contact-details, .support, .links, .socials {
  text-align: center;
}

.swiper-wrapper {
  display:flex;
}

.swiper-slide {
  flex-shrink: 0;
  width:auto;
}

 .compare {
    background: 
    url(/library/cloud-bg.webp) no-repeat -15% 9% / 268px, 
    url(/library/cloud-bg.webp) no-repeat 79% 29% / 324px, 
    url(/library/cloud-bg.webp) no-repeat 7% 67% / 359px, 
    url(/library/cloud-bg.webp) no-repeat 128% 82% / 310px, 
    url(/library/cloud-bg.webp) no-repeat -18% 108% / 300px, 
    url(/library/cloud-bg.webp) no-repeat 120% -3% / 310px, 
    linear-gradient(180deg, rgba(97, 119, 158, 1) 0%, rgba(97, 119, 158, 1) 64%, rgba(203, 210, 224, 1) 100%);
    overflow: clip;
    background-attachment: fixed;
    padding:0 48px;
}


.processtep {
  display:flex;
  flex-direction:column;
  width:100%;
  box-sizing:border-box;
  padding:16px;
}


.proces-text {
  max-width:100%;
  box-sizing:border-box;
}

.procedure-pin-wrapper {
    width:100%;
    height:auto;
}

.comparison-container {
  margin-bottom:0;
}

.comparison-container > .flex-column:nth-of-type(2), .extra-content .propixel-site > div:nth-of-type(1) {
  display:none;
}

.comparison-container > .flex-column:nth-of-type(1) {
  gap:24px;
}

.comparison div.flex-row {
  flex-direction: column;
}

.procedure h2 {
    font-size: 2.3em !important;
} 

.procedure h3 {
  font-size:1.7em!important;
  text-align: center;
}

.procedure h4 {
  text-align: center;
}

/* TARIEVEN */
.tarieven .hero-content {
  padding: 0;
}
.tarieven .hero {
  height:80vh;
}

.tarieven .hero br {
  display:none;
}

.pricing-content {
  padding: 48px;
}

.business, .startup {
  width: 75%;
  padding:48px;
}

.products div {
  flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.products-div, .products {
  gap:96px;
}

.more-sites div {
  width: 100%!important;
  text-align: center;
  }

  .pricing .contactform {
    align-items:flex-start;
    flex-direction: column;
  }

  .pricing .floating-form div:nth-child(2) {
    flex-direction: column;
  }

  .pricing .floating-form .labelline {
    padding:0;
  }

  .pricing .contactform button {
    margin-top:24px;
  }

  .reviews {
    padding:0;
  }

  .pricing {
    background: url(/library/propixel-beeldmerk-white.webp) no-repeat 100% 5% / 1008px, 
    url(/library/propixel-beeldmerk-white.webp) no-repeat 135% 106% / 700px, var(--pp-tertiary-100);
}

.modal-img img {
    width: 58%;
    top: 73px;
}

body.modal-open {
  overflow: hidden;
}

.modal-img {
  display:none;
}

.modal-text {
  width:75%;
}

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

/* CONTACT */
.contact .contact-container {
  flex-direction: column;
}

.contact-contactekst, .contact-contactformulier {
    width: 100%;
}

.contact .floating-form div {
  flex-direction: column;
}

.contact .privacy-check {
  flex-direction: row!important;
}

.succesverhalen .hero-content {
  padding:0;
}

.succesverhalen .hero-content h2 {
  max-width: 100%;
}

.use-case-swiper-wrapper {
  max-width: 100%!important;
}

.use-case {
    flex: 0 0 50%!important;
}

.use-case-swiper-wrapper .swiper-button-prev, .use-case-swiper-wrapper .swiper-button-next {
    left: 0;
    right: 0;
    background-color: #ffffff91;
    border-radius: 100px;
    width: 48px;
    height: 48px;
}

.use-case-swiper-wrapper .swiper-button-prev, .use-case-swiper-wrapper .swiper-button-next {
        left: auto!important;

}
.use-case-swiper-wrapper .swiper-button-prev {
  right:auto!important;
}

.swiper-wrapper {
    width: 100%!important;
}

.succesverhalen .grid {
  margin-top:24px;
  height:100%;
    gap: 2.5vw;
    grid-template-rows:repeat(10, 100px);
    grid-template-areas:
        "bouw bouw gezondheid gezondheid"
        "bouw bouw gezondheid gezondheid"
        "hr-recruitment hr-recruitment hr-recruitment hr-recruitment"
        "hr-recruitment hr-recruitment hr-recruitment hr-recruitment"
        "product product horeca horeca"
        "product product horeca horeca"
        "product product industrie industrie"
        "product product industrie industrie"
        "automotive automotive recreatie recreatie"
        "automotive automotive recreatie recreatie";
}

.succesverhalen-sector section {
        padding: 48px;
    }

    .succesverhalen-sector .use-case {
        flex: 0 0 calc(50% - 24px) !important;
    }

/* USE CASE BEDRIJF  */
.usecase-brand .use-case-grid {
        grid-template-columns: repeat(2, 1fr)!important;
        grid-template-areas:
        "story story"
        "story story"
        "feedback feedback"
        "feedback feedback"
        "img-3 img-2"
        "img-3 img-2"
        "img-1 img-1"
        "img-1 img-1"
}

.use-case-grid .use-case-item:nth-child(1), .use-case-grid .use-case-item:nth-child(3), .use-case-grid .use-case-item:nth-child(4) {
    height: 400px;
}

.use-case-grid .use-case-item:nth-child(1) {
    background-size:105%!important;
}

.use-case-grid .use-case-item:nth-child(1):hover {
  background-size: 110%!important;
}

.use-case-grid .use-case-item:nth-child(3) {
    background-size:122%!important;
}

.use-case-grid .use-case-item:nth-child(3):hover {
    background-size: 130%!important;
}

.use-case-grid .use-case-item:nth-child(4) {
    background-size:123%!important;
  }

  .use-case-grid .use-case-item:nth-child(4):hover {
    background-size: 130%!important;
}

.usecase-brand .succesverhaal {
  padding:48px;
}

.usecase-brand .promo-banner {
margin: 64px 0;
}

/* OVER */
.oplossing {
    flex-direction: column;
    align-items:center;
}

.oplossing-img {
    width: 100%;
}

.waarom{
    flex-direction: column;
    align-items:center;
}

.waarom-2 {
  flex-direction: column-reverse;
}

.waarom-img {
    width: 75%;
}

.profielen {
  flex-direction: column;
  gap:24px;
}

.gezichten {
  padding:48px 24px;
}

.gezichten h3 {
  text-align: center;
}

.profiel img {
  max-width: 200px;
}

/* DEMO LANDINGPAGE */


.landingpage-demo .rating p {
  font-size:0.875em!important;
}

.landingpage-demo .usp-bar {
  flex-wrap: wrap;
  justify-content: center;
  padding:12px 24px;
  gap:24px 12px;
}

.demo-intro {
  flex-direction: column;
}
.demo-3 {
  width:100%;
  flex-direction: column;
  gap:48px;
}

.demo-slogan{
  padding:48px 24px;
  text-align: center;
  max-width:80%;
  margin-top:0;
}

.landingpage-demo .demo-img img {
  width:100%;
}

.landingpage-demo .demo-intro h2 br{
  display:none;
}
.landingpage-demo .demo-2 h2{
  text-align: center;
}

.landingpage-demo .demo-promo {
  max-width:100%;
}

.landingpage-demo .demo-form {
  margin:0;
  border-radius: 0;
}
.landingpage-demo .form-text {
  width:100%;
  z-index: 2;
}

.form-img img {
    width: 83%;
    position: absolute;
    top: -79px;
    left: -65px;
    z-index: 1;
    opacity: 0.7;
}

.landingpage-demo .contact-form div:nth-child(3) {
  flex-direction: column;
}

.landingpage-demo section:nth-child(3) {
  gap:48px;
}

.landingpage-demo .cta {
  margin-top:-48px;
}
/* LANDINGPAGE PRODUCT  */


.landingpage-product .rating p {
  font-size:0.875em!important;
}

.landingpage-product .why-usp {
  flex-direction: column;
  padding: 24px;
  gap:48px;
}

.landingpage-product .lp-usps, .landingpage-product .why-image {
  width:100%;
}

.landingpage-product .cta {
  padding:0;
}

.landingpage-product .why-content {
  flex-direction:column;
}

.landingpage-product .why-image {
  margin:0;
}

.landingpage-product .products div {
  flex-direction: column;
}

.landingpage-product .products-div {
  gap:48px;
}


.landingpage-product .accordion-title {
  gap:12px;
}

.landingpage-product .pricing::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
    url(/library/cloud-white.webp) no-repeat -8% 9% / 300px, 
    url(/library/cloud-white.webp) no-repeat 76% 2% / 300px, 
    url(/library/cloud-white.webp) no-repeat 109% 20% / 268px, 
    url(/library/cloud-white.webp) no-repeat 30% 26% / 324px, 
    url(/library/cloud-white.webp) no-repeat -48% 40% / 450px, 
    url(/library/cloud-white.webp) no-repeat 119% 54% / 369px, 
    url(/library/cloud-white.webp) no-repeat 6% 68% / 282px,
    url(/library/cloud-white.webp) no-repeat 113% 78% / 300px,
    url(/library/cloud-white.webp) no-repeat -22% 85% / 285px,
    url(/library/cloud-white.webp) no-repeat 32% 101% / 374px;
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
    overflow: clip;
}


}



/* 4. Desktop small */
@media (min-width: 1024px) and (max-width: 1439px) {
   .hamburgermenu {
    display: block !important;
  }

  .nav-content {
    padding:16px 70px;
  }

  .logo {
    height:32px;
  }

    .menu-item-container ul li:first-of-type {
  display:flex;
}

#verwerk_contactaanvraag div {
  flex-direction:column;
}

.tarieven #verwerk_contactaanvraag .labelline {
    top: 12px;
}


.menu-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  background-color: var(--pp-primary);
  padding-top: 80px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  overflow-y: auto;

  /* Start gesloten, buiten beeld boven */
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.6s ease;
}

    .menu-container.open {
        transform: translateX(0%);
        pointer-events: auto;
        right: 0;
        left: auto;
        width: 50%;
        justify-content:center;
    }


  .menu-item-container ul {
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .menu-item-container ul li {
    width: 100%;
    text-align: center;
  }

  .menu-item-container ul li a {
    padding: 20px;
    font-size: 20px;
    display: block;
    width: 100%;
  }

  /* Nav buttons onder menu-items */
  .nav-btn-container {
    display: flex; /* altijd zichtbaar */
    flex-direction: column;
    gap: 36px;
    width: 100%;
    margin-top: 40px;
    justify-content: center;
    align-items: center;
  }

  .nav-btn-container a {
      width: 36% !important;
      padding: 16px 0;
      font-size: 18px;
      text-align: center;
      justify-content: center;
  }

  .product-text {
    width:50%;
  }

  /* HOME */
  .product-image dotlottie-player {
    width:400%!important;
    height:auto!important;
  }

  .product-image {
    width:50%!important;
  }

   .compare {
    background: 
    url(/library/cloud-bg.webp) no-repeat -11% 9% / 268px,     
    url(/library/cloud-bg.webp) no-repeat 53% 29% / 405px,     
    url(/library/cloud-bg.webp) no-repeat 4% 61% / 359px,     
    url(/library/cloud-bg.webp) no-repeat 93% 74% / 310px,     
    url(/library/cloud-bg.webp) no-repeat 122% 100% / 300px,     
    url(/library/cloud-bg.webp) no-repeat 111% 2% / 310px,
    url(/library/cloud-bg.webp) no-repeat 37% 97% / 300px,     
    linear-gradient(180deg, rgba(97, 119, 158, 1) 0%, rgba(97, 119, 158, 1) 64%, rgba(203, 210, 224, 1) 100%);
    overflow: clip;
    background-attachment: fixed;
    padding:0 48px;
}

.swiper-wrapper {
  display:flex;
}

.swiper-slide {
  flex-shrink: 0;
  width:auto;
}

.processtep {
  display:flex;
  flex-direction:column;
  width:100%;
  box-sizing:border-box;
  padding:16px;
}


.proces-text {
  max-width:100%;
  box-sizing:border-box;
}

.procedure-pin-wrapper {
    width:100%;
    height:auto;
}

.comparison-container {
  margin-bottom:0;
}

.comparison-container > .flex-column:nth-of-type(2), .extra-content .propixel-site > div:nth-of-type(1) {
  display:none;
}

.comparison-container > .flex-column:nth-of-type(1) {
  gap:24px;
}

.comparison div.flex-row {
  flex-direction: column;
}


.procedure h3 {
  font-size:1.7em!important;
  text-align: center;
}

.contactform {
  padding:0 70px;
}

.cta-text {
  max-width:55%;
}


  /* CONTACT  */

  .contact-container {
    flex-direction: column;
  }

  .contact-contactformulier {
    width:100%;
  }
  .contact form div {
    flex-direction: column;
  }

  .contact form .privacy-check {
    flex-direction: row!important;
  }
 /* SUCCESVERHALEN */
  .succesverhalen .hero {
    height:95vh;
  }

  .succesverhalen .hero-content h2 {
    max-width: 85%;
  }

  .use-case-swiper-wrapper {
    width:100%;
  }

  .use-case {
    flex: 0 0 50%!important;
}

.grid .item:nth-child(1) {
    background: url(/library/bouw.webp) center / 170% no-repeat;
}

.grid .item:nth-child(1):hover, .grid .item:nth-child(5):hover, .grid .item:nth-child(7):hover  {
    background-size: 180%;
}

.grid .item:nth-child(2) {
    background-size:125%;

}

.grid .item:nth-child(5) {
    background: url(/library/recruitment1.webp) center / 212% no-repeat;
}

.grid .item:nth-child(7) {
    background: url(/library/industry.webp) center / 170% no-repeat;
}

.big {
  font-size:2em!important;
}

/* SUCCESVERHALEN SECTOR */
.succesverhalen-sector section {
  padding:48px 70px;
}

.succesverhalen-sector  .use-case {
    flex: 0 0 calc(50% - 24px);
}


/* USECASE BRAND */
.use-case-grid .use-case-item:nth-child(1) {
    background-size: 171%!important;
}

.use-case-grid .use-case-item:nth-child(1):hover {
    background-size: 177%!important;
}

/* .use-case-grid .use-case-item:nth-child(1), .use-case-grid .use-case-item:nth-child(3), .use-case-grid .use-case-item:nth-child(4) {
    height: 400px;
} */

.use-case-grid .use-case-item:nth-child(3) {
    background-size: 194%!important;
}

.use-case-grid .use-case-item:nth-child(3):hover {
    background-size: 200%!important;
}

.use-case-grid .use-case-item:nth-child(4) {
    background-size: 159%!important;
  }

  .use-case-grid .use-case-item:nth-child(4):hover {
    background-size: 165%!important;
}



/* 
TARIEVEN */

  .pricing {
    padding:96px 70px;
  }

  .tarieven .floating-form div:nth-child(2) {
    flex-direction: column;
  }

  .tarieven .pricing .contactform {
    align-items:flex-start;
  }

  .reviews {
    padding:0;
  }


/* OVER */

.waarom, .oplossing {
  align-items: center;
}

.oplossing {
  flex-direction: column;
}
.waarom-img {
    width: 80%;
}

.profielen {
  flex-direction: row;
}

.profiel img {
  max-width: 200px;
}
  /* LANDINGPAGE PRODUCT */


  .landingpage-product .why-usp {
    padding:48px 70px;
    align-items: flex-end;
  }

  .landingpage-product .why-image {
    width:69%;
  }

  .lp-usps {
    width:75%;
  }

  /* LANDINGPAGE DEMO */
  
  .usp-bar-section {
    padding: 24px;
}

  .landingpage-demo .demo-img img {
    width:100%;
  }

  .landingpage-demo section:nth-child(3) {
    gap:48px;
  }

  .landingpage-demo .demo-slogan {
    margin-top:48px;
  }

  .landingpage-demo .demo-form {
    width: 90%;
  }
}


/* 5. Desktop large */
@media (min-width: 1440px) and (max-width: 1919px) {

  .cta-text {
    max-width:40%;
  }

.contact #verwerk_contactformulier div {
  flex-direction: column;
}

.contact #verwerk_contactformulier .privacy-check {
  flex-direction: row;
}

.swipe-hint {
 display:none;
}
    /* OVER */
  


}



/* 6. desktop xl / 4K */
@media (min-width: 1920px) {
  /* Styles voor grote schermen */
.swipe-hint {
display:none;
}
}



@media screen and (max-width: 1440px) {
  [data-carousel] {
    overflow: hidden;
  }

  [data-carousel] .swiper-wrapper {
    display: flex;
    flex-direction: row;
  }

  [data-carousel] .swiper-slide {
    width: auto !important;
    flex-shrink: 0;
  }

  [data-carousel] .processtep {
    min-width: 100%;
    scroll-snap-align: start;
    border-radius: 12px;
  }

  .processtep.below, .processtep {
    opacity: 1;
}
}
body > .menu-container {
  position: fixed;
  z-index: 9999;
}