* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }



 .testimonials-container {
     width: 100%;
     text-align: center;
     margin:0;
  background:#0b0b0f;
  color:#fff;
 }

 .header {
     margin-bottom: 60px;
 }

 .header h1 {
     color: white;
     font-size: 3rem;
     font-weight: 300;
     margin-bottom: 10px;
     letter-spacing: -0.5px;
 }

 .header p {
     color: rgba(255, 255, 255, 0.7);
     font-size: 1.1rem;
     font-weight: 400;
 }

 .carousel-container {
     position: relative;
     width: 100%;
     height: 360px;
     overflow: hidden;
     mask: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
     -webkit-mask: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
 }

 .carousel-track {
     display: flex;
     gap: 30px;
     animation: scroll-left 15s linear infinite;/* Adjust duration as needed */
     width: fit-content;
 }

 @keyframes scroll-left {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(calc(-430px * 3));
     }
 }

 .testimonial-card {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 40px 32px 0px 32px;
     text-align: center;
     transition: all 0.5s ease;
     position: relative;
     overflow: visible;
     opacity: 0.5;
     transform: scale(0.85);
     width: 400px;
     height: 240px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     margin-bottom: 60px;
 }

 .testimonial-card.focused {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     opacity: 1;
     transform: scale(1);
     z-index: 10;
 }

 .testimonial-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 }

 .testimonial-quote {
     color: rgba(255, 255, 255, 0.6);
     font-size: 1rem;
     line-height: 1;
     margin-bottom: 0;
     font-weight: 400;
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding-bottom: 30px;
 }

 .testimonial-card.focused .testimonial-quote {
     color: white;
     font-size: 1.15rem;
 }

 .user-info {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .user-avatar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: 600;
     font-size: 1.4rem;
     border: 3px solid rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
     position: absolute;
     bottom: -30px;
     left: 50%;
     transform: translateX(-50%);
 }

 .testimonial-card.focused .user-avatar {
     border-color: rgba(255, 255, 255, 0.4);
 }

 .user-details {
     text-align: center;
     position: absolute;
     top: 40px;
     left: 50%;
     transform: translateX(-50%);
     white-space: nowrap;
 }

 .user-details h3 {
     color: rgba(255, 255, 255, 0.7);
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 4px;
     transition: all 0.3s ease;
 }

 .testimonial-card.focused .user-details h3 {
     color: white;
     font-size: 1.15rem;
 }

 .user-details p {
     color: rgba(255, 255, 255, 0.4);
     font-size: 0.95rem;
     transition: all 0.3s ease;
     font-weight: 400;
     margin: 0;
 }

 .testimonial-card.focused .user-details p {
     color: rgba(255, 255, 255, 0.7);
 }

 /* Avatar colors */
 .testimonial-card:nth-child(1) .user-avatar,
 .testimonial-card:nth-child(4) .user-avatar,
 .testimonial-card:nth-child(7) .user-avatar {
     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 }

 .testimonial-card:nth-child(2) .user-avatar,
 .testimonial-card:nth-child(5) .user-avatar,
 .testimonial-card:nth-child(8) .user-avatar {
     background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
 }

 .testimonial-card:nth-child(3) .user-avatar,
 .testimonial-card:nth-child(6) .user-avatar,
 .testimonial-card:nth-child(9) .user-avatar {
     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
 }

 /* Responsive design */
 @media (max-width: 768px) {
     .header h1 {
         font-size: 2.2rem;
     }

     .testimonial-card {
         width: 320px;
         padding: 32px 24px 0px 24px;
         height: 220px;
         margin-bottom: 50px;
     }

     .carousel-track {
         gap: 20px;
     }
 }

 @media (max-width: 480px) {
    
     .header h1 {
         font-size: 1.8rem;
     }

     .header {
         margin-bottom: 40px;
     }

     .testimonial-card {
         width: 280px;
         padding: 28px 20px 0px 20px;
         height: 200px;
         margin-bottom: 45px;
     }

     .user-avatar {
         width: 50px;
         height: 50px;
         font-size: 1.2rem;
     }
 }