.review-card {
  background-color: #fffefa;
  border-bottom: 1px solid #e5e3da;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}


.reviews-track {
  display: flex;
  gap: 0;
  transition: transform 0.5s ease;
  width: fit-content;
}
.reviews-slider {
  overflow: hidden;
}

.reviews-carousel {
  overflow: hidden;
  padding-top: 0.5rem;
  padding-bottom: 6.25rem;
}

.reviews-header {
  position: relative;
  margin-bottom: 0;
  padding-top: 3.5rem;
  display: flex;
  align-items: flex-start;
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.reviews-header:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.1rem;
  height: 1px;
  background-color: #e5e3da;
  width: 100%;
  z-index: 1;
}

.reviews-header:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  background-color: #e5e3da;
  width: 100%;
  z-index: 1;
}

.review-card:not(first-child) {
  border-left: 1px solid #e5e3da;
}

.reviews-nav {
  display: flex;
  gap: 0;
  position: absolute;
  top: 2.1rem;
  right: 0;
  align-items: flex-start;
  border-left: 1px solid #e5e3da;
}

button.review-nav-btn {
  width: 90px;
  height: 90px;
  border: none;
  background-color: transparent ;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  padding: 0;
  border-right: 1px solid #e5e3da;
}

button.review-nav-btn:disabled {
  opacity: 0.3;₹
  cursor: default;
  background: none;
}
button.review-nav-btn:last-child {
  border-right: none;
}
.reviewer-name {
  font-family: var(--primary-font);
  font-size: 1.25rem;
  font-style: normal;
  line-height: 110%;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.reviews-header h2 {
  font-size: 2.5rem;
}

@media (max-width: 1024px) {
  .reviews-carousel {
    padding: .5rem 2rem 6.25rem;
  }
  .review-card {
    padding: 1.5rem;
    border-left: 1px solid #e5e3da;
    border-right: 1px solid #e5e3da;
  }
  .reviews-nav {
    right: 0;
    top: 3rem;
    border-left: none;
  }
  button.review-nav-btn {
    width: 60px;
    height: 40px;
    border-right: none;
  }
  .reviews-header h2 {
    font-size: 1.5rem;
  }
  .reviews-carousel {
    padding-left: 0;
    padding-right: 0;
}
  /* The shorthand here used to be padding: 0, which also wiped the 3.5rem padding-top from the
     base rule and left the heading flush against the section above. The nav is absolutely
     positioned inside this header, so its top offset has to match the padding-top or the arrows
     stay behind while the heading moves down. Keep these two values in step. 2026-10-08 */
  .reviews-header {
    padding: 2rem 0 0;
  }
  .reviews-nav {
    top: 2rem;
    gap: 1rem;
  }
  button.review-nav-btn {
    width: 25px;
    height: 25px;
  }
  .reviews-header:before, .reviews-header:after {
    content: none;
  }
  .review-card {
    border-top: 1px solid #e5e3da;
  }
}