.quotes-page { background-color: var(--bg-dark); border-radius: 15px; max-width: 1200px; margin: 0 auto; padding: 2rem; }
.quotes-header {background-color: rebeccapurple;padding: 1rem; margin-bottom: 2rem; text-align: center;border-radius: 1rem;}
.quotes-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; justify-content: center; }
.filter-btn { background-color: var(--secondary-color); border: none; padding: 0.5rem 1rem; border-radius: 50px; cursor: pointer; color: white; transition: all 0.3s ease; }
.filter-btn:hover, .filter-btn.active { background-color: var(--primary-green); transform: translateY(-2px); }
.quotes-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.quote-card { background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 1.5rem; transition: transform 0.3s ease; }
.quote-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.15); }
.quote-card blockquote { margin: 0 0 1rem 0; padding: 0; border-left: none; }
.quote-card blockquote p { font-style: italic; margin-bottom: 1rem; line-height: 1.6; font-size: 1.1rem; }
.quote-card blockquote footer { font-size: 0.9rem; text-align: right; }
.quote-card blockquote cite { font-style: normal; }
.quote-card blockquote .source { display: block; font-size: 0.8rem; margin-top: 0.25rem; opacity: 0.8; }
.quote-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.quote-tag { background-color: var(--secondary-color); padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.8rem;border: none;color: inherit;cursor: pointer;transition: background-color 0.3s, transform 0.2s; }
.quote-tag:hover {background-color: var(--primary-green); transform: translateY(-2px);}

@media (max-width: 768px) {
  .quotes-container { grid-template-columns: 1fr; }
  .quotes-filter { overflow-x: auto; padding-bottom: 1rem; justify-content: flex-start; }
}