.review-container {
  background-color: var(--bkg2);
  border-radius: .5rem;
  position: relative;
  text-align: center;
  display: flex;
    flex-direction: column;
    align-items: center;
}

.review-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: .5rem;
  background: var(--gradient);
  z-index: -1;
  transform: translate(4.5%, 5.5%) scale(.94);
  filter: blur(10px);
  opacity: .4;
}

.review-header {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 2rem 2rem 0;
}

.review-header h2 {
  position: relative;
  font-size: clamp(1.3rem, 0.34545462rem + 4.363636vw, 2.8rem);
  z-index: 0;
  margin: auto;
}

.review-header h2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient);
  z-index: -1;
  transform: translateY(120%) scale(1.05);
  height: 50%;
  filter: blur(1px);
}

.review-header p {
  color: var(--text2);
}

.review-content {
  position: relative;
  max-width: 850px;
  width: calc(100vw - 4rem);
  padding: 2rem .5rem;
  overflow: hidden;
   background-color: rgb(255, 255, 255, .75);
   box-shadow: 8px 11px 12px 4px rgb(62, 63, 63);
  /* border: #cc0000 4px solid; */
  border-radius: 65px;


}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  padding: .4rem;
  color: var(--text2);
  z-index: 1;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  border: none;
  color: #000000;
  height: 30px;
  width: 30px;
}

.arrow:is(:hover, :focus){
  color: var(--text1);
}

.arrow i {
  color: #000000;
  
}

#arrow--right {
  right: 4%;
}

#arrow--right:is(:hover, :focus){
  transform: translate(10%, -50%);
}

#arrow--right::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gradient);
  z-index: -1;
  transform: translate(20%, -2%) scale(.6);
  inline-size: min(50px, 100%);
  block-size: min(50px, 100%);
  filter: blur(1px);
  transition: all 250ms ease-in-out;
}

#arrow--right:hover::before, #arrow--right:focus::before {
  transform: translate(4%, -2%) scale(.8);
}

#arrow--left {
  left: 4%;
}

#arrow--left:is(:hover, :focus){
  transform: translate(-10%, -50%);
}

#arrow--left::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gradient);
  z-index: -1;
  transform: translate(-20%, -2%) scale(.6);
  inline-size: min(50px, 100%);
  block-size: min(50px, 100%);
  filter: blur(1px);
  transition: all 250ms ease-in-out;
}

#arrow--left:hover::before, #arrow--left:focus::before {
  transform: translate(-4%, -2%) scale(.8);
}

.reviews {
  display: flex;
}

.review {
  padding: 0 8rem 2rem 8rem;
   flex: 1 0 100%;
  display: flex;
  flex-direction: row;
  max-width: 100%;
  place-items: center;
  gap: 1.3rem;
  align-items: flex-start;
}
.left__qutation{
  text-align: left;
  font-size: xxx-large !important;
}

.review__headshot {
  position: relative;
  z-index: 0;
  inline-size: 60px;
  block-size: 60px;
}

.review__headshot img {
  inline-size: 60px !important;
  border-radius: 10%;
  height: 60px !important;
  min-height: 60px;
  min-width: 60px;
  border: 1px solid #b2b1af;
}

.review__headshot::before {
  content: '';
  position: absolute;
  inset: 0;
  /* border-radius: 50%; */
  background: var(--gradient);
  z-index: -1;
  transform: scale(1.05);
  filter: blur(1px);
}

.review__name {
  letter-spacing: .05rem;
  font-size: clamp(1.3rem, 1.10909097rem + 0.872727vw, 1.6rem);
}

.review__stars{
  display: flex;
  align-items: center;

}
.review__stars img{
  height: 30px;
  width: 30px;
}
.review___body {
  width: 100%;
  text-align: center;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.review__rating{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.review__body{
font-size: 14px;
text-align:center;
}

.review__author{


  display: flex;
  

  flex-direction: row;

  justify-content: center;

  align-items: center;

  gap: 1rem;

}

.review__center{

  width: 100% !important;

}

  @media (max-width:530px){
    .review{
            padding: 0 4rem 2rem 4rem;
    }
}