/* Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: #333; } /* Utility Classes */ .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .gradient-text { background: linear-gradient(90deg, #6366f1, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Tab Styles */ .tab-button { position: relative; transition: all 0.3s ease; } .tab-button.active { color: #4f46e5; border-bottom: 2px solid #4f46e5; } .tab-pane { display: none; } .tab-pane.active { display: block; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Card Hover Effects */ .card-hover { transition: all 0.3s ease; transform: translateY(0); } .card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Button Styles */ .btn-primary { background: linear-gradient(90deg, #6366f1, #8b5cf6); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(99, 102, 241, 0.4); } /* Responsive Adjustments */ @media (max-width: 768px) { .hero-content { flex-direction: column; } .hero-image { order: -1; margin-bottom: 2rem; } .stats-grid { grid-template-columns: 1fr; } } /* Animation Classes */ .animate-float { animation: float 6s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .pulse-slow { animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a5b4fc; } /* Form Styles */ .form-input { border: 2px solid #e2e8f0; transition: all 0.3s ease; } .form-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } /* Badge Styles */ .badge { display: inline-block; padding: 0.25em 0.75em; font-size: 0.75em; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 1rem; } .badge-primary { background-color: #e0e7ff; color: #4f46e5; } /* List Styles */ .list-styled { list-style: none; } .list-styled li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; } .list-styled li:before { content: "→"; position: absolute; left: 0; color: #6366f1; font-weight: bold; } /* Section Padding */ .section-padding { padding: 5rem 0; } /* Background Gradients */ .bg-gradient-primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); } .bg-gradient-secondary { background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); } /* Icon Sizes */ .icon-lg { width: 2rem; height: 2rem; } .icon-xl { width: 3rem; height: 3rem; } /* Card Styles */ .card { border-radius: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Divider */ .divider { height: 1px; background: linear-gradient(to right, transparent, #e2e8f0, transparent); margin: 2rem 0; }