/* ---Review Page --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Myanmar", Arial, sans-serif;
}
.reviewpage{
  display:grid;
  place-items:center;
  padding:48px 16px;
}

/* ---Review Heading --- */
.reviewheading{
  text-transform:uppercase;
  letter-spacing:.06em;
  color: #fe826c;
  margin:0 0 24px;
  font-size: clamp(28px,4vw,48px);
}

/* --- Card --- */
.review-card{
  width:min(980px, 95vw);
  background: none;
  border-radius: 28px;
  display:grid;
  grid-template-columns: 64px 120px 1fr 64px;
  align-items:center ;
  gap:20px;
  padding:24px;
}

/* Avatar circle  */
.reviewavatar{
  width:96px;
  height:96px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:28px;
  color:#FFFFFF;
  background:none;
  justify-self:center;
}
#avatar img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 70%; 
  border: 4px solid;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}




/* Content */
.content{align-self:center}
.top-row{
  display:flex; 
  align-items:center;
   gap:14px; 
   flex-wrap:wrap;
}
.name{
  margin:0;
  font-size: clamp(20px, 2.6vw, 28px);
  color: #ff9b8a;
}
.stars{
  display:flex;
   gap:6px;
  flex-direction: row;
}
.stars span {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: gold;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.text{
  margin:.4rem 0 0;
  line-height:1.6;
  color:#333333;
  font-size: clamp(15px, 1.8vw, 18px);
}

/* Nav buttons */
.nav-btn{
  width:52px;height:52px;
  border:none;border-radius:50%;
  background: #F49B6B;
  cursor:pointer;
  font-size:28px;line-height:1;
  display:grid;place-items:center;
  transition: transform .15s ease, box-shadow .2s ease;
  margin-top: auto;
}
.nav-btn:hover{ transform: translateY(-2px) }
.nav-btn:active{ transform: translateY(0) scale(.98) }

/* Layout tweaks for small screens */
@media (max-width: 720px){
  .review-card{
    grid-template-columns: 44px 90px 1fr 44px;
    border-radius: 22px;
  }
  .avatar{ width:80px; height:80px; font-size:24px }
  .nav-btn{ width:44px; height:44px; font-size:24px }
}