* { margin: 0; padding: 0; box-sizing: border-box; } .profile-container { max-width: 600px; margin: 0 auto; padding: 20px; } .profile-container h2 { text-align: center; margin-bottom: 20px; color: #333; } .profile-upload-section { display: flex; justify-content: center; margin: 20px 0; } .profile-circle { width: 120px; height: 120px; border-radius: 50%; border: 2px solid #ccc; position: relative; overflow: hidden; background: #f5f5f5; } .profile-circle img { width: 100%; height: 100%; object-fit: cover; } .upload-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); color: white; text-align: center; padding: 8px 0; cursor: pointer; font-size: 12px; } .upload-label input[type="file"] { display: none; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; } .form-group input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .form-group input:focus { outline: none; border-color: #007bff; } .file-input { border: 1px solid #ddd; padding: 6px; border-radius: 4px; background: #fff; } .submit-btn { width: 100%; padding: 10px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 10px; } .submit-btn:hover { background: #0056b3; } input::placeholder { color: #999; } /* Add required field indicator */ label:after { content: '*'; color:red; }