@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  --red-color: #f1262c;
  --blue-color: #103279;
  --yellow-color: #f3b910;

  --font-family: "Funnel Sans", sans-serif;
}

.frame-20 {
  height: 727px;
  position: relative;
}
.frame-148 {
  background: #f2e3dc;
  max-width: 1920px;
  height: 634px;
  position: absolute;
  left: 0px;
  top: 93px;
  overflow: hidden;
}
.frame-149 {
  max-width: 1920px;
  height: 634px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}
.reviews {
  display: flex;
  flex-direction: row;
  gap: 239px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 57px;
}

.review {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 482px;
  position: relative;
}

.review:first-child {
  gap: 52px;
  justify-content: flex-end;
}

.review:last-child {
  gap: 58px;
  justify-content: flex-start;
  width: 500px;
}

.review-text {
  color: var(--red-color);
  text-align: left;
  font-family: var(--font-family);
  font-size: 31.131559371948242px;
  line-height: 167%;
  font-weight: 600;
  position: relative;
  width: 418px;
}

.review:first-child .review-author {
  color: var(--red-color);
  font-family:  var(--font-family);
  font-size: 30.659292221069336px;
  font-weight: 600;
  font-style: italic;
}

.review:last-child .review-text {
  color: var(--blue-color);
  font-family:  var(--font-family);
  font-size: 28.94131088256836px;
  line-height: 171.46%;
  font-weight: 700;
  width: auto;
}

.review-signature {
  letter-spacing: 0.01em;
}

.review-footer {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 357px;
}

.review:last-child .review-author {
  color: var(--blue-color);
  font-family:  var(--font-family);
  font-size: 30.65889549255371px;
  line-height: 122.35%;
  font-weight: 800;
  font-style: italic;

  margin: 0;
}

.review-slogan {
  color: var(--blue-color);
  font-family:  var(--font-family);
  font-size: 30.65999984741211px;
  line-height: 122.35%;
  font-weight: 700;

  margin: 0;
}

.testimonials-title {
  color: #f2e3dc;
  text-align: left;
  font-family:  var(--font-family);
  font-size: 75.2px;
  line-height: 82%;
  font-weight: 600;
  margin-left: 218.55px;
}

.testimonials-list {
  background: #f2e3dc;
  width: 100%;
  height: 800px;
  position: absolute;
  left: 0px;
  top: 58px;
  overflow: hidden;
}

.scroll-testimonials-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 1900px;
  padding-left: 50px;
  padding-right: 50px;
  z-index: 2;
  margin: auto;
  margin-top: 300px; /* margin-top: 500px; */
}
.polygon-arrow-left {
  flex-shrink: 0;
  width: 60px;
  height: 69px;
  position: relative;
  overflow: visible;
}
.polygon-arrow-right {
  flex-shrink: 0;
  width: 60px;
  height: 69px;
  position: relative;
  overflow: visible;
}




.review {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.review-text,
.review-author,
.review-signature,
.review-slogan {
  transition: opacity 0.5s ease;
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}



@media (max-width: 1800px) {
  .frame-20 {
    zoom: 0.9375;
  }
}

@media (max-width: 1600px) {
  .frame-20 {
    zoom: 0.8333;
  }
}

@media (max-width: 1500px) {
  .frame-20 {
    zoom: 0.78125;
    margin-top: -400px;
  }

  .testimonials-title {
    line-height: 86%;
  }
}

@media (max-width: 1280px) {
  .frame-20 {
    height: 450px;
    margin-top: -400px;
  }

  .frame-149 {
    max-width: 1280px;
  }

  .frame-148 {
    height: auto;
    padding-bottom: 60px;
  }

  .reviews {
    gap: 120px;
    top: 40px;
  }

  .review {
    height: auto;
  }

  .review-text {
    font-size: 24px;
    width: 350px;
  }

  .review:last-child .review-text {
    font-size: 22px;
  }

  .review:first-child .review-author,
  .review:last-child .review-author,
  .review-slogan {
    font-size: 24px;
  }

  .review-footer {
    width: 100%;
  }

  .testimonials-title {
    font-size: 52px;
    margin-left: 100px;
  }

  .testimonials-list {
    height: auto;
    padding-bottom: 120px;
    top: 40px;
  }

  .scroll-testimonials-list {
    margin-top: 200px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .polygon-arrow-left,
  .polygon-arrow-right {
    width: 45px;
    height: 52px;
  }

}

@media (max-width: 1400px) {
  .frame-20 {
    zoom: 0.729;
    margin-top: -350px;
  }
}

@media (max-width: 1100px) {
  .frame-20 {
    height: 450px;
  }
}