@font-face {
  font-family: "MMRecht";
  src: url("mmrecht.ttf") format("truetype");
}

@font-face {
  font-family: "MMSchuin";
  src: url("mmschuin.ttf") format("truetype");
}

body {
  overflow-y: hidden;
  scrollbar-width: none; /* voor Firefox */
}

body::-webkit-scrollbar {
  /* voor Chrome, Safari en Opera */
  display: none;
}

#feedback-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 1690px; /* Breedte van 3 feedback-items (300px elk) + 2 gaten van 20px */
  margin: 0 auto; /* Centreer de container horizontaal */
  overflow-y: hidden;
  overflow: hidden;
}

#feedback-container::-webkit-scrollbar {
  /* voor Chrome, Safari en Opera */
  display: none;
}

.feedback-item {
  width: 550px;
  height: 320px;
  text-align: center;
  position: relative;
}

.feedback-cijfer {
  font-size: 63px;
  position: absolute;
  top: 3px;
  left: 58%; /* Positie het cijfer rechts van het icoon */
  font-family: MMSchuin;
}

.feedback-afdeling {
  font-size: 37px;
  position: absolute;
  top: 79px;
  font-family: MMSchuin;
  width: 70%;
  border-radius: 10px;
  left: 82px;
}

.feedback-icon {
  display: block;
  width: 60px;
  height: 60px;
  background: url("user.png") no-repeat center;
  background-size: cover;
  position: absolute;
  top: 10px; /* Positioneer bovenin het feedback-item */
  left: 50%;
  transform: translateX(-50%);
}

.feedback-textwolk {
  border-radius: 10px;
  padding: 10px;
  width: 90%;
  position: absolute;
  top: 39%; /* Verander 'bottom' naar 'top' */
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  font-family: MMRecht;
  font-size: 30px;
}

/* Kleuren voor de randen */
.border-0-6 {
  border: 2px solid #e30613;
}
.border-7-8 {
  border: 2px solid #f8b100;
}
.border-9-10 {
  border: 2px solid #008d3a;
}