/* MAIN WRAPPER */
.page {
  text-align: center;
  padding: 40px 20px 50px;
  margin: 0 auto;
  background: #fffcf6;
}

/* PROGRESS BAR */
.progress {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
  background: none;
}

.step {
  width: 70px;
  height: 6px;
  background-color: #e3e3df;
  border-radius: 2px;
}

.step.active {
  background-color: #3e6b3f;
}

/* HEADING */
h1 {
  font-size: 2.5rem;
  font-weight: 400;
  color: #2b2b2b;
  margin-bottom: 12px;
  letter-spacing: 5px;
}
h1 span {
  color: #3d815a;
  font-weight: 500;
}



/* SUBTITLE */
.subtitle {
  font-size: 1rem;
  color: #5e5e5e;
  line-height: 1.6;
  max-width: 63%;
  margin: 0 auto 40px;
}

/* CARD BOX */
.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
  width: 46%;
  margin: 0 auto;
  padding: 35px 40px;
  text-align: left;
}

.card label {
  display: block;
  font-weight: 600;
  color: #2c2c2c;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.card select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  color: #333;
  background: #fff url("data:image/svg+xml;utf8,<svg fill='%23222222' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center;
  background-size: 16px;
  appearance: none;
}

.next-btn {
  display: block;
  margin: 25px 0 0 auto;
  background-color: #8ac48a;
  color: white;
  font-size: 1rem;
  border: none;
  padding: 10px 32px;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.next-btn:hover {
  background-color: #79b379;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  h1 {
    font-size: 1.7rem;
  }

  .card {
    width: 90%;
    padding: 25px;
  }

  .next-btn {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
}

.space-section {
  padding: 3rem 0 2rem;
}

.therapy-messege-section{
  background: #f7f0e6;
}

/* container */
.reviews-section{padding:48px 20px 8px; background: #f7f0e6; border-radius: 20% 20% 0 0px;}
.wrapper{max-width:1100px;margin:0 auto;text-align:center}

/* slider container */
.review-slider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  position:relative;
}

/* arrows */
.arrow{
  background:none;border:0;font-size:36px;line-height:1;color:var(--accent);
  cursor:pointer;padding:8px 12px;
}
.arrow:focus{outline:2px solid rgba(50,102,51,0.15);border-radius:6px}

/* viewport & track */
.viewport{
  width:88%;
  max-width:980px;
  overflow:hidden;
  border-radius:6px;
}
.track{
  display:flex;
  transition:transform .55s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
}

/* each slide occupies 100% of viewport */
.slide{
  min-width:100%;
  padding:18px 30px;
  display:flex;
  gap:30px;
  align-items:flex-start;
  justify-content:space-between;
}

/* review card (two per slide) */
.review-card{
  width:calc(50% - 15px);
  text-align:left;
  padding:8px 8px 8px 0;
}

/* create visual divider between the pair */
.review-card.left{
  padding-right:30px;
}
.review-card.right{
  padding-left:30px;
  border-left:1px solid rgba(0,0,0,0.06);
}

/* header inside card */
.avatar{
  width:56px;height:56px;border-radius:50%;float:left;margin-right:14px;border:3px solid #fff;box-shadow:0 1px 0 rgba(0,0,0,0.04);
}
.review-title{font-size:.85rem;letter-spacing:1px;color:var(--muted);margin:8px 0 2px}
.review-name{color:var(--accent);font-size:1.05rem;margin:0 0 8px;letter-spacing:.8px}
.review-author{font-weight:700;margin:6px 0;color:#333}
.review-text{color:#333;line-height:1.6;margin-top:6px}

/* dots */
.dots{margin-top:22px;}
.dots .dot{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  margin:0 6px;background:#e6e6e3;border: 1px solid black;;
  cursor:pointer;
}
.dots .dot.active{background:#397a4a;border: 1px solid black;}

/* footer */
.footer-note{margin-top:36px;color:var(--muted);font-size:.95rem}
.footer-note a{color:var(--accent);text-decoration:underline}

/* responsive: mobile -> show single card per slide */
@media (max-width:720px){
  .slide{flex-direction:column;gap:18px;padding:14px}
  .review-card{width:100%}
  .review-card.right{border-left:0;padding-left:0}
  .viewport{width:100%}
  .arrow{font-size:30px}
}


.nextradiobutton{
  font-family: var(--fontTitle);
  border-radius: 31px;  
  font-size: 18px;
  padding: 16px 25px 14px;
  line-height: 24px;
  color: var(--primaryButton);
  background-color: #a6de9b;

}

.messegedata{
  background-color: #def6d9;
  font-size: 14px;
  line-height: 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  margin-top: 1.5rem;
}

.nextradiobutton:hover {
  background-color: #2b2b2b !important;
  color:white;
}