.text-gray-500 { color: #764ba2 !important; } #rattingIcon .fa-star { color: #f65353; padding: 0 5px; } .text-purple-600 { color: #764ba2 !important; } button.bg-purple-600.text-white.px-6.py-2.rounded-lg.hover\:bg-purple-700.transition { background: linear-gradient(135deg, #667eea 0, #764ba2 100%); } .bg-cyan-100, .gradient-bg, button#browseBtn, button#compressBtn { background: linear-gradient(135deg, #667eea 0, #764ba2 100%); } .text-cyan-600 { color: #fff !important; --tw-text-opacity: 1; } .disabled\:opacity-50:disabled { opacity: 0.5; background: #ccc !important; } .card-effect { background: #fff; border: 1px solid #e5e7eb; } .drop-area { border: 3px dashed #667eea; border-radius: 15px; padding: 60px 40px; text-align: center; transition: all 0.3s ease; cursor: pointer; background: white; } .drop-area.dragover { border-color: #06b6d4; background-color: rgba(6, 182, 212, 0.05); transform: scale(1.02); } .progress-bar { transition: width 0.3s; } .btn-primary, .card-hover { transition: 0.3s; } .btn-primary { background: linear-gradient(90deg, #06b6d4, #0891b2); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(6, 182, 212, 0.3); } .btn-primary:disabled { opacity: 0.6; transform: none; box-shadow: none; } .file-info { animation: 0.3s fadeIn; background-color: #f9fafb; border: 1px solid #e5e7eb; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .notification { animation: 0.3s slideIn; } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .gradient-text { background: linear-gradient(135deg, #667eea 0, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .fade-in { opacity: 0; transform: translateY(30px); transition: 0.6s; } .fade-in.visible { opacity: 1; transform: translateY(0); } .pulse-animation { animation: 2s infinite pulse; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); } } .upload-area { border: 3px dashed #e0e7ff; transition: 0.3s; } .upload-area:hover { border-color: #667eea; background-color: #f3f4f6; } .upload-area.dragover { border-color: #667eea; background-color: #e0e7ff; }