.bg {
  background-image: url(../pictures/customer_experience.jpg);
}

section {
  height: clamp(900px, calc(100vh - 30px), calc(100vh - 30px));
}

/*customer review*/

.splide {
  height: max-content;
  margin-top: clamp(180px, calc(30vh - 30px), calc(30vh - 30px));
  margin-left: 15%;
}

.splide__track {
  width: 600px;
}

.splide__pagination__page {
  display: none;
}

.slide__block {
  margin-left: 50px;
  width: 500px;
}

.slide__blockheader {
  text-align: center;
  color: white;
  font-family: "Inter";
  font-size: 22px;
  text-decoration: underline;
}

.slide__blocktitle {
  color: white;
  font-family: "Inter";
  font-size: 18px;
  margin-top: 30px;
  width: 75%;
}

.slide__blocktext {
  font-size: 18px;
  margin-top: -10px;
  color: white;
  font-family: "Inter";
}

.slide__block .btn {
  font-family: "Inter";
  background-color: rgb(19, 192, 183);
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 10px;
  border: 2px solid rgb(23, 156, 150);
}

.slide__block > .btn:hover {
  cursor: pointer;
  background-color: rgb(19, 192, 183, 0.3);
  color: rgb(19, 192, 183);
  border: 2px solid rgb(19, 192, 183);
  transition: 0.15s linear;
}

/*--------------------devices---------------------*/

@media screen and (min-device-width: 319px) and (max-device-width: 329px) {
  section {
    height: clamp(1250px, calc(100vh - 30px), calc(100vh - 30px));
  }
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 319px;
  }
  .splide__slide {
    display: flex;
    vertical-align: middle;
  }
  .slide__block {
    width: 219px;
  }
  .slide__block > form {
    text-align: center;
  }
}

@media screen and (min-device-width: 330px) and (max-device-width: 349px) {
  section {
    height: clamp(1230px, calc(100vh - 30px), calc(100vh - 30px));
  }
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 330px;
  }
  .slide__block {
    width: 230px;
  }
  .slide__block > form {
    text-align: center;
  }
}

@media screen and (min-device-width: 350px) and (max-device-width: 374px) {
  section {
    height: clamp(1160px, calc(100vh - 30px), calc(100vh - 30px));
  }
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 350px;
  }
  .slide__block {
    width: 250px;
  }
  .slide__block > form {
    text-align: center;
  }
}

@media screen and (min-device-width: 375px) and (max-device-width: 399px) {
  section {
    height: clamp(1100px, calc(100vh - 30px), calc(100vh - 30px));
  }
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 375px;
  }
  .slide__block {
    width: 275px;
  }
  .slide__block > form {
    text-align: center;
  }
}

@media screen and (min-device-width: 400px) and (max-device-width: 448px) {
  section {
    height: clamp(1020px, calc(100vh - 30px), calc(100vh - 30px));
  }
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 400px;
  }
  .slide__block {
    width: 300px;
  }
  .slide__block > form {
    text-align: center;
  }
}

@media screen and (min-device-width: 449px) and (max-device-width: 480px) {
  section {
    height: clamp(1000px, calc(100vh - 30px), calc(100vh - 30px));
  }
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 425px;
  }
  .slide__block {
    width: 325px;
  }
  .slide__block > form {
    text-align: center;
  }
}

/*------------------overige viewports------------------*/

@media screen and (min-device-width: 481px) and (max-device-width: 560px) {
  section {
    height: clamp(1000px, calc(100vh - 30px), calc(100vh - 30px));
  }
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 450px;
  }
  .slide__block {
    width: 350px;
  }
  .slide__block > form {
    text-align: center;
  }
}

@media screen and (min-device-width: 561px) and (max-device-width: 767px) {
  section {
    height: clamp(1000px, calc(100vh - 30px), calc(100vh - 30px));
  }
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 500px;
  }
  .slide__block {
    width: 400px;
  }
  .slide__block > form {
    text-align: center;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 900px) {
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 0%;
    margin-top: clamp(280px, calc(50vh - 30px), calc(50vh - 30px));
  }
  .splide__track {
    width: 600px;
  }
  .slide__block {
    width: 500px;
  }
  .slide__block > form {
    text-align: center;
  }
}

@media screen and (min-device-width: 901px) and (max-device-width: 1023px) {
  .nav-container {
    margin-top: 0px;
  }
  .splide {
    margin-left: 40%;
  }
  .splide__track {
    width: 500px;
  }
  .slide__block {
    width: 400px;
  }
  .slide__block > form {
    text-align: center;
  }
}

/*------------------laptop------------------*/

@media screen and (min-device-width: 1024px) and (max-device-width: 1269px) {
  .splide {
    margin-left: 30%;
  }
}

@media screen and (min-device-width: 1270px) and (max-device-width: 1399px) {
}

@media screen and (min-device-width: 1400px) and (max-device-width: 1529px) {
}

@media screen and (min-device-width: 1530px) and (max-device-width: 1659px) {
}

@media screen and (min-device-width: 1660px) and (max-device-width: 1789px) {
}

@media screen and (min-device-width: 1790px) and (max-device-width: 1919px) {
}