@keyframes marquee-ltr-animation {
     0% {
         transform: translateX(0%);
     }

     100% {
         transform: translateX(-100%);
     }
 }

 @keyframes marquee-rtl-animation {
     0% {
         transform: translateX(-100%);
     }

     100% {
         transform: translateX(0%);
     }
 }

 .quotes-section {
     padding: 80px 0;
     background-color: var(--light-grey);
 }

 .quotes-section .filter-buttons {
     display: flex;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 40px;
 }

 .quotes-section .filter-btn {
     padding: 10px 22px;
     border: 1px solid #ddd;
     background-color: #fff;
     color: var(--text-dark);
     border-radius: 20px;
     cursor: pointer;
     font-family: 'Hind Siliguri', sans-serif;
     font-weight: 500;
     transition: all 0.3s ease;
 }

 .quotes-section .filter-btn:hover {
     background-color: var(--primary-blue);
     color: #fff;
     border-color: var(--primary-blue);
 }

 .quotes-section .filter-btn.active {
     background-color: var(--primary-blue);
     color: #fff;
     border-color: var(--primary-blue);
     box-shadow: 0 4px 10px rgba(5, 110, 182, 0.3);
 }

 .quotes-carousel-container {
     overflow: hidden;
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .quotes-wrapper {
     display: flex;
     width: max-content;
     /* Important for marquee */
     flex-shrink: 0;
 }

 .quotes-wrapper:hover {
     animation-play-state: paused;
 }

 .marquee-ltr {
     animation: marquee-ltr-animation 60s linear infinite;
 }

 .marquee-rtl {
     animation: marquee-rtl-animation 60s linear infinite;
 }

 .quote-card {
     flex: 0 0 auto;
     width: 380px;
     /* Smaller card width */
     margin: 0 15px;
     background-color: #fdfaf2;
     /* Parchment-like color */
     border: 1px solid #e0d9c6;
     border-radius: 8px;
     padding: 25px;
     display: flex;
     align-items: center;
     gap: 20px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     transition: opacity 0.4s ease, transform 0.4s ease;
     /* For filtering */
 }

 .quote-card.filtered-out {
     /* We can't use display:none for marquee. Instead, we can hide it visually */
     opacity: 0;
     width: 0;
     padding: 0;
     margin: 0;
     overflow: hidden;
 }

 .author-image {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     object-fit: cover;
     border: 4px solid #fff;
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
     filter: grayscale(80%);
 }

 .quote-content {
     font-family: 'Georgia', serif;
 }

 .quote-content blockquote {
     font-size: 1.05rem;
     line-height: 1.6;
     color: #4a4a4a;
     margin: 0 0 15px 0;
     border-left: 3px solid var(--primary-blue);
     padding-left: 15px;
     font-style: italic;
 }

 .quote-content cite {
     font-family: 'Hind Siliguri', sans-serif;
     font-style: normal;
     font-weight: 600;
     color: var(--primary-blue);
 }

 @media (max-width: 768px) {
     .quote-card {
         width: 320px;
     }
 }