:root { --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--bs-gray-800); line-height: 1.6; }
.navbar { background-color: #fff !important; border-bottom: 1px solid var(--bs-gray-200); padding: 1rem 0; }
.navbar-brand { font-size: 1.75rem; letter-spacing: -0.5px; }
.nav-link { color: var(--bs-gray-700); font-weight: 500; transition: color 0.3s ease; }
.nav-link:hover { color: var(--bs-gray-900); }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--bs-gray-400); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-section { background: linear-gradient(135deg, var(--bs-gray-100) 0%, var(--bs-gray-200) 100%); position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/static/img/logo.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0.08; z-index: 0; background-attachment: fixed; }
.hero-section .container { position: relative; z-index: 1; }
.text-gradient { background: linear-gradient(135deg, var(--bs-gray-700) 0%, var(--bs-gray-900) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-card { background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.08); transition: transform 0.3s ease; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.12); }
.stat-icon { width: 50px; height: 50px; background: var(--bs-gray-200); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--bs-gray-700); margin-right: 1rem; }
.feature-card { background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.feature-icon { width: 60px; height: 60px; background: var(--bs-gray-200); border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--bs-gray-700); }
.mentor-card { background: white; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; }
.mentor-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.mentor-image-container { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(135deg, var(--bs-gray-100) 0%, var(--bs-gray-200) 100%); display: flex; align-items: center; justify-content: center; }
.mentor-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; }
.mentor-card:hover .mentor-image { transform: scale(1.05); }
.mentor-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--bs-gray-600); background: linear-gradient(135deg, var(--bs-gray-100) 0%, var(--bs-gray-200) 100%); }
.mentor-card .p-4 { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.row.g-4 [class*="col"] { display: flex; flex-direction: column; }
.event-card { background: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); transition: transform 0.3s ease; height: 100%; }
.event-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.12); }
.event-image-container { width: 100%; height: 200px; background: var(--bs-gray-200); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.event-image { width: 100%; height: 100%; object-fit: cover; }
.event-placeholder { font-size: 4rem; color: var(--bs-gray-400); }
.event-badge { position: absolute; top: 1rem; right: 1rem; background: var(--bs-gray-800); color: white; padding: 0.25rem 0.75rem; border-radius: 2rem; font-size: 0.875rem; font-weight: 500; }
.cta-section { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: white !important; }
.cta-card { padding: 4rem 2rem; color: white !important; }
.cta-card h2 { color: white !important; }
.cta-card p { color: #e2e8f0 !important; }
.cta-card .btn-light { background-color: white; border-color: white; color: var(--bs-gray-800); font-weight: 600; transition: all 0.3s ease; }
.cta-card .btn-light:hover { background-color: #f8f9fa; border-color: #f8f9fa; color: var(--bs-gray-900); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn-dark { background-color: var(--bs-gray-800); border-color: var(--bs-gray-800); transition: all 0.3s ease; }
.btn-dark:hover { background-color: var(--bs-gray-900); border-color: var(--bs-gray-900); transform: translateY(-2px); }
.btn-outline-dark { color: var(--bs-gray-800); border-color: var(--bs-gray-800); transition: all 0.3s ease; }
.btn-outline-dark:hover { background-color: var(--bs-gray-800); border-color: var(--bs-gray-800); transform: translateY(-2px); }
.footer { background-color: #1a202c !important; color: #ffffff !important; }
.footer-text { color: #a0aec0 !important; }
.footer-link { color: #cbd5e0 !important; transition: color 0.3s ease; }
.footer-link:hover { color: #ffffff !important; }
.footer-input { background-color: #2d3748 !important; border: 1px solid #4a5568 !important; color: #ffffff !important; }
.footer-input::placeholder { color: #a0aec0 !important; }
.footer-input:focus { background-color: #374151 !important; border-color: #6b7280 !important; color: #ffffff !important; box-shadow: 0 0 0 0.2rem rgba(107, 114, 128, 0.25) !important; }
.footer-btn { background-color: #ffffff !important; border-color: #ffffff !important; color: #1a202c !important; font-weight: 600; transition: all 0.3s ease; }
.footer-btn:hover { background-color: #f7fafc !important; border-color: #f7fafc !important; color: #1a202c !important; }
.footer-divider { border-color: #4a5568 !important; opacity: 0.5; }
.social-links a { font-size: 1.25rem; transition: color 0.3s ease; }
.alert { border-radius: 0.75rem; }
.dropdown-menu { border-radius: 0.75rem; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.dropdown-item { padding: 0.75rem 1.25rem; transition: background-color 0.3s ease; }
.dropdown-item:hover { background-color: var(--bs-gray-100); }
.rounded-pill { border-radius: 50rem !important; }
@media (max-width: 768px) { .hero-section { min-height: 100vh; padding: 2rem 0; } .hero-background { background-size: contain; background-attachment: scroll; opacity: 0.05; } .stat-card { margin-bottom: 1rem; } .cta-card { padding: 3rem 1.5rem; } .mentor-image-container { aspect-ratio: 1 / 1; } .mentor-placeholder { font-size: 3rem; } }
@media (max-width: 576px) { .hero-section { min-height: 100vh; padding: 1rem 0; } .hero-background { background-size: 120%; opacity: 0.04; } .cta-card { padding: 2rem 1rem; } .mentor-card { border-radius: 0.9375rem; } .mentor-placeholder { font-size: 2.5rem; } }