body { background-color: #f8f9fa; }
        .container { max-width: 800px; }
        .step-indicator { position: relative; display: flex; justify-content: space-between; margin-bottom: 30px; }
        .step { text-align: center; flex: 1; position: relative; }
        .step .icon { width: 40px; height: 40px; background-color: lightgray; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: auto; color: white; font-size: 18px; position: relative; z-index: 2; }
        .step p { font-size: 14px; margin-top: 5px; font-weight: bold; }
        .progress-line { position: absolute; top: 20px; left: 10%; width: 80%; height: 4px; background-color: #ddd; z-index: 1; }
        .progress-bar { position: absolute; top: 20px; left: 10%; height: 4px; background-color: #007bff; width: 0%; transition: width 0.4s ease-in-out; z-index: 1; }
        .step.active .icon { background-color: #007bff; }
        .step-content { display: none; animation: fadeIn 0.4s; }
        .step-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }