/* Heading above form */
    .heading {
      text-align:center;
      margin: 6px 0 18px;
    }
    .heading h1 {
      margin:0;
      font-size:1.4rem;
      letter-spacing:0.2px;
    }
    .heading p {
      margin:6px 0 0;
      color:var(--muted);
      font-size:0.95rem;
    }

    /* FORM card (single-column now) */
    .form-card{
      max-width:720px;
      margin: 10px auto 28px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgb(255, 255, 255));
      border-radius: var(--radius);
      padding:20px;
      border:1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 18px 40px rgba(247, 246, 246, 0.06);
    }

    .title-small{ font-weight:700; margin:0 0 6px; font-size:1.05rem }
    .desc-small{ margin:0 0 12px; color:var(--muted); font-size:0.95rem }

    label { display:block; font-size:13px; margin:8px 0 6px; font-weight:600; color:#333 }
    input[type="text"], select, textarea{
      width:100%;
      padding:12px 14px;
      border-radius:10px;
      border:1px solid #e9e6dd;
      background:var(--card);
      font-size:14px;
      transition: box-shadow .18s, border-color .18s, transform .12s;
    }
    input[type="text"]:focus, select:focus, textarea:focus{
      outline:none;
      border-color:var(--gold-2);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(240,196,0,0.12);
    }
    textarea{ min-height:100px; resize:vertical; }

    /* star row */
    .stars-row{ display:flex; gap:10px; align-items:center; margin-top:6px }
    .star{
      font-size:30px;
      color:#d7d2c9;
      cursor:pointer;
      transition: transform .12s ease, color .12s ease;
      user-select:none;
    }
    .star.hover{ transform:scale(1.08) }
    .star.active{ color:var(--gold-2); transform:scale(1.06) }

    /* submit button (gold gradient) */
    .submit-btn{
      margin-top:12px;
      width:100%;
      padding:12px;
      border-radius:11px;
      border: none;
      font-weight:700;
      font-size:15px;
      cursor:pointer;
      color:#111;
      background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
      box-shadow: 0 10px 26px rgba(224,179,0,0.14);
      transition: transform .12s, box-shadow .12s;
    }
    .submit-btn:active{ transform:translateY(1px) }
    .submit-btn:hover{ box-shadow: 0 14px 34px rgba(224,179,0,0.18) }

    /* carousel area */
    .carousel {
      max-width:1100px;
      margin: 6px auto 50px;
      padding:8px;
      text-transform: uppercase;
    }
    .viewport{
      overflow:hidden;
      border-radius:12px;
      background:transparent;
      padding:6px;
    }
    .reviews-row{
      display:flex;
      gap:12px;
      transition: transform 520ms cubic-bezier(.2,.9,.2,1);
      will-change: transform;
      align-items:stretch;
      user-select:none;
      padding-bottom:10px;
    }
    .review-card{
      flex: 0 0 calc(25% - 12px);
      background:var(--card);
      border-radius:12px;
      padding:14px;
      border:1px solid rgba(240,196,0,0.08);
      box-shadow: 0 12px 30px rgba(0,0,0,0.04);
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .rc-head{ display:flex; gap:10px; align-items:center }
    .rc-avatar{ width:52px; height:52px; border-radius:10px; object-fit:cover; border:1px solid rgba(0,0,0,0.04) }
    .rc-name{ font-weight:700; font-size:14px }
    .rc-time{ font-size:12px; color:var(--muted) }
    .rc-product{ font-weight:600; font-size:13px; color:#444 }
    .rc-text{ color:#444; font-size:14px; line-height:1.45; overflow:hidden }
    .rc-rating{ color:var(--gold-2); font-size:15px; margin-top:6px }

    /* fun subtle animation for slider (scale on visible) */
    .review-card { transform-origin: center; transition: transform 360ms ease; }
    .review-card.visible { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,0.06) }

    /* dots */
    .dots{ display:flex; justify-content:center; gap:8px; margin-top:12px }
    .dot{ width:10px; height:10px; background:#e6e92b; border-radius:50%; cursor:pointer; transition: transform .14s, background .14s }
    .dot.active{ background:var(--gold-2); transform:scale(1.2); background:#0b130b59}

    /* small popup message */
    #popup{ position:fixed; right:14px; top:14px; padding:10px 14px; background:#222; color:#fff; border-radius:8px; display:none; z-index:9999; font-size:14px }

    /* responsive rules */
    @media (max-width:1000px){ .review-card{ flex:0 0 calc(50% - 12px) } }
    @media (max-width:640px){
      .review-card{ flex:0 0 100% }
      .form-card{ padding:16px }
    }