.error-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; max-width: 520px; width: 100%; margin: auto; /* Works alongside layout flex to keep perfectly centered */ animation: fadeIn 0.4s ease-out; } /* Technical SVG Frame Handling */ .error-visual { width: 160px; height: 160px; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; } .tech-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 25px rgba(0, 150, 199, 0.25)); } /* Typography Hierarchy */ .error-code { font-family: 'Poppins', sans-serif; font-size: 3.5rem; font-weight: 900; line-height: 1; color: var(--brand-blue); letter-spacing: -1px; margin: 0 0 0.5rem 0; text-shadow: 0 0 20px rgba(0, 150, 199, 0.2); } .error-title { font-size: 1.25rem; font-weight: 700; color: var(--text-white); margin-bottom: 0.75rem; letter-spacing: -0.2px; } .error-desc { font-size: 0.9rem; line-height: 1.6; color: var(--payoff-color); opacity: 0.75; margin-bottom: 2rem; } /* Control Actions styled precisely to match your existing brand colors */ .btn-return { display: inline-flex; align-items: center; gap: 10px; background-color: rgba(0, 150, 199, 0.08); color: var(--text-white); border: 1px solid rgba(0, 150, 199, 0.4); padding: 12px 28px; border-radius: 6px; font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: all 0.25s ease; } .btn-return:hover { background-color: var(--brand-blue); border-color: var(--hover-blue); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0, 150, 199, 0.3); } .icon-left { width: 16px; height: 16px; transition: transform 0.25s ease; } .btn-return:hover .icon-left { transform: translateX(-3px); } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }