@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; line-height: 1.6; } .container { max-width: 1200px; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #3B82F6; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #2563EB; } /* Star Rating */ .rating-row { margin-bottom: 1rem; } .rating-row label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #374151; } .star { transition: all 0.2s ease; color: #d1d5db; /* gray-300 */ cursor: pointer; font-size: 1.5rem; margin-right: 0.25rem; } .star:hover, .star.active { color: #f59e0b; /* yellow-500 */ transform: scale(1.2); } .star:hover ~ .star { color: #d1d5db; } /* Animation classes */ .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive tweaks */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } }