:root { --primary-color: #5E72E4; --secondary-color: #8965E0; --accent-color: #F5365C; --text-color: #32325D; --light-gray: #F8F9FA; --white: #FFFFFF; --border-color: #dee2e6; } body { font-family: 'Open Sans', sans-serif; color: var(--text-color); background-color: var(--white); } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 600; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; transition: all 0.2s ease-in-out; } .btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Hero Section */ .hero-section { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 4rem 1rem; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); color: var(--white); text-align: center; } .hero-section h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -1px; } .hero-section .lead { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9; } /* Profile Form */ .profile-form-container { padding: 4rem 1rem; } .profile-form-container h1 { margin-bottom: 2rem; } .form-section { background-color: var(--light-gray); padding: 2rem; border-radius: 0.75rem; margin-bottom: 2rem; } .form-section h2 { font-size: 1.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.75rem; } .form-label { font-weight: 600; } .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); } .form-text { font-size: 0.875rem; }