.testimonial-slider {
  background-color: #a4adad;
  padding: 1em 1em 0.2em;
}

.testimonial-title {
  color: #fff;
}

.testimonial-title h2 {
  padding-left: 0.2em;
}

.card {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: 2px solid rgb(84, 235, 230);
  height: 59%;
}

.carousel-control-prev,
.carousel-control-next {
  background-color: #fff;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  top: 60%;
  transform: translateY(-50%);
}

@media (min-width: 576px) {
  .carousel-item {
    margin-right: 0;
    flex: 0 0 26%;
    display: block;
  }

  .carousel-inner {
    display: flex;
  }
}

@media (min-width: 768px) {
  .carousel-inner {
    padding: 0.5em;
  }

  .carousel-control-prev,
  .carousel-control-next {
    opacity: 1;
    position: absolute;
    left: 1em;
    top: 90%;
    transform: translateY(-50%);
  }

  .carousel-control-next {
    left: 5em;
  }
}

.imgfeedback {
  width: 300px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.rating {
  --star-size: clamp(1rem, 3vw, 3rem);
  --star-clr-inactive: rgb(5, 173, 92);
  --star-clr-active: rgb(5, 173, 92);
  --star-clr-hover: rgba(236, 201, 136, 0.2);
  --star-clip-path: polygon(50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 50px;
}

label {
  position: relative;
  cursor: pointer;
  width: var(--star-size);
  height: var(--star-size);
}

label::before {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  background-color: var(--star-clr-hover);
  transition: rotate 450ms ease-in-out, inset 300ms ease-in-out;
  clip-path: var(--star-clip-path);
}

label:hover::before {
  inset: -1rem;
  rotate: 45deg;
}

label::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--star-clr-inactive);
  clip-path: var(--star-clip-path);
  transition: 300ms ease-in-out;
  scale: 0.75;
}

label:has(~ label:hover)::after,
label:has(~ label > :checked)::after,
label:has(:checked)::after,
label:hover::after {
  background-color: var(--star-clr-active);
  scale: 1;
}

label:hover~label::after {
  scale: 0.75;
}

label:active::before {
  inset: -2rem;
}

.feedback {
  display: block !important;
}

.feedbackdiv span {
  margin-left: 10px;
  font-style: italic;
  font-weight: 400;
  text-decoration: underline;
}

.feedbackdiv {
  display: flex;
}