.feedback-container {
    max-width: 600px; margin: 25px auto; padding: 20px; overflow: hidden; position: relative; min-height: 195px;}
.step {position: absolute;width: 100%;top: 0;left: 0;opacity: 0;transform: translateX(100%);transition: all 0.6s ease;display: none;text-align: center;z-index: 0;}
.step.active {display: block;opacity: 1;transform: translateX(0);z-index: 1;}
.step.exit-left {transform: translateX(-100%);opacity: 0;}
.step.enter-right {transform: translateX(100%);opacity: 0;}
h2 {font-size: 1.3rem;margin-bottom: 30px;}
.stars {display: flex;justify-content: center;gap: 15px;font-size: 2.5rem;cursor: pointer;}
.star{color:#ccc;background:#221e1c;border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:.3s;cursor:pointer;margin:5px;position:relative}
.star:hover{transform:scale(1.15);background:linear-gradient(145deg,#153a63,#153a63);box-shadow:0 6px 12px rgb(21 58 99)}
.star.selected {color: #cccccc;
    background: linear-gradient(145deg, #153a63, #153a63);
    box-shadow: 0 6px 12px #153a63;
    transform: scale(1.1);}




.abt-img svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-text 6s ease-in-out infinite;
}

@keyframes draw-text {
  0% {
    stroke-dashoffset: 1000;
  }
  50% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}



.rating-labels {display: flex;justify-content: space-between;max-width: 280px;margin: 10px auto 30px;font-size: 0.9rem;color: grey;}
.next-btn{background:0 0;color:#fff;border:1px solid;padding:7px 14px;font-size:1rem;cursor:pointer;opacity:.3;transition:.3s;display:block;margin:0 auto;max-width:109px;width:100%}
.next-btn:enabled {opacity: 1;}
.note {font-size: 0.85rem;color: #555;margin-bottom: 20px;padding: 0 10px;}
.input-box {display: flex;align-items: center;border: 1px solid #ddd;border-radius: 20px;padding: 10px 15px;background: #fafafa;max-width: 100%;}
.input-box input {flex: 1;border: none;outline: none;font-size: 1rem;background: transparent;}
.input-box .send-icon {font-size: 1.3rem;cursor: pointer;color: #888;margin-left: 10px;transition: color 0.3s;}
.input-box .send-icon:hover {color: #000;}
.thankyou-section .emoji {font-size: 3rem;animation: bounce 1s infinite;margin-bottom: 10px;}

@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-10px); }}
.thankyou-section p {font-size: 1rem;color: #555;margin-top: 10px;}
.progress-bar {width: 80%;height: 6px;background: #eee;border-radius: 3px;margin: 1px auto 0;overflow: hidden;position: relative;}
.progress-fill {width: 0%;height: 100%;background: #1e4c7e;border-radius: 3px;transition: width linear 5s;}

@media (max-width: 480px) {
.stars {font-size: 2rem;gap: 10px;}
.next-btn {width: 100%;}
.input-box {flex-direction: row;}     
h2 {font-size: 1.1rem;}
.thankyou-section .emoji {font-size: 2.5rem;}}