:root {
	--main-color: #155E72;
	--secondary-color: #5385c1;
  --gray-color: #bacee6;
	--font: 'Poppins', sans-serif;

}

.scroll-container {
  margin-top: 3.125rem;
}

.beschrijving h1 {
  font-size: 3.125rem;
  text-align: center;
}

.beschrijving p {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--main-color);
}


.beschrijving {
  margin-top: 6.25rem;
  margin-bottom: 3.125rem;
}

.slider-wrapper {
  width: 50%;
  height: 100vh;
  margin-left: 25%;
}

.before-wrapper1 {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: url("werf~/vloerverwarming\ before.jpg") no-repeat center center;
  background-size: 100% auto;
}
.before-wrapper2 {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: url("werf~/verwarming\ badkamer\ side.jpeg") no-repeat center center;
  background-size: 100% auto;
}
.before-wrapper3 {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: url("werf~/vloerverwarming.jpeg") no-repeat center center;
  background-size: 100% auto;
}
.before-wrapper4 {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: url("werf~/stijlvolle\ verwarming.jpeg") no-repeat center center;
  background-size: 100% auto;
}
.before-wrapper5 {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: url("werf~/traditionele\ wandverwarming\ 2.jpeg") no-repeat center center;
  background-size: 100% auto;
}

.before-wrapper:before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;

}

.after-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

.after-image1 {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateX(-50%);
  background: url("werf~/vloerverwarming.jpg") no-repeat center center;
  background-size: 100% auto;

}
.after-image2 {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateX(-50%);
  background: url("werf~/verwarming\ badkamer\ front.jpeg") no-repeat center center;
  background-size: 100% auto;

}
.after-image3 {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateX(-50%);
  background: url("werf~/vloerverwarming2.jpeg") no-repeat center center;
  background-size: 100% auto;

}
.after-image4 {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateX(-50%);
  background: url("werf~/stijlvolle\ verwarming\ 3.jpeg") no-repeat center center;
  background-size: 100% auto;

}
.after-image5 {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateX(-50%);
  background: url("werf~/traditionele\ wandverwarming.jpeg") no-repeat center center;
  background-size: 100% auto;

}

.uitleg1 h2 {
  margin-top: -7rem;
  text-align: center;
  font-weight: 600;
  margin-bottom: 8rem;

}

.uitleg2 h2 {
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 8rem;

}