.testimonials { background-color: var(--gray-light); } .testimonials-slider { position: relative; max-width: 800px; margin: 3rem auto 0; overflow: hidden; } .testimonial-card { display: none; background-color: var(--bg-color); padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .testimonial-card.active { display: block; animation: fadeIn 0.5s ease-in-out; } .testimonial-content p { font-size: 1.1rem; color: var(--gray-dark); font-style: italic; margin-bottom: 1.5rem; line-height: 1.8; } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .author-info h4 { font-size: 1.1rem; color: var(--text-color); margin-bottom: 0.2rem; } .author-info p { font-size: 0.9rem; color: var(--gray-dark); font-style: normal; margin: 0; } .testimonial-controls { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 2rem; } .control-btn { background: none; border: none; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; transition: var(--transition); } .control-btn:hover { color: var(--accent-color); } .testimonial-dots { display: flex; gap: 0.5rem; } .dot { width: 10px; height: 10px; border-radius: 50%; background-color: var(--gray-dark); border: none; cursor: pointer; transition: var(--transition); } .dot.active { background-color: var(--primary-color); } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }