*/ .iconroot { --icon-accent: #ff5a1f; --icon-accent-2: #ff7a3d; --icon-navy: #0f2740; --icon-slate: #64748b; --icon-line: rgba(15, 39, 64, 0.10); --icon-card: #ffffff; --icon-soft: rgba(255, 255, 255, 0.14); --icon-shadow: 0 12px 28px rgba(15, 39, 64, 0.10); --icon-shadow-hover: 0 16px 34px rgba(15, 39, 64, 0.16); } /* Base icon reset */ .iconroot i[class^="bi"], .iconroot i[class*=" bi-"] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; transition: all 0.2s ease; } /* Size helpers */ .iconroot .icon-xs { font-size: 0.85rem; } .iconroot .icon-sm { font-size: 1rem; } .iconroot .icon-md { font-size: 1.2rem; } .iconroot .icon-lg { font-size: 1.5rem; } .iconroot .icon-xl { font-size: 2rem; } /* Colors */ .iconroot .icon-muted { color: var(--icon-slate); } .iconroot .icon-dark { color: var(--icon-navy); } .iconroot .icon-accent { color: var(--icon-accent); } .iconroot .icon-white { color: #fff; } /* Icon chip */ .iconroot .icon-chip { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--icon-line); box-shadow: var(--icon-shadow); color: var(--icon-navy); } .iconroot .icon-chip i { font-size: 20px; } /* Accent */ .iconroot .icon-chip--accent { background: linear-gradient(135deg, var(--icon-accent), var(--icon-accent-2)); color: #fff; border: none; } /* Dark */ .iconroot .icon-chip--dark { background: #10253d; color: #fff; } /* Card icon */ .iconroot .icon-card { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--icon-line); box-shadow: var(--icon-shadow); } .iconroot .icon-card i { font-size: 22px; } /* Nav icon */ .iconroot .nav-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,0.08); } .iconroot .nav-icon:hover, .iconroot .icon-card:hover, .iconroot .icon-chip:hover { transform: translateY(-2px); } .quote-logo-box { width: 120px; /* adjust size */ height: 120px; display: flex; align-items: center; justify-content: center; } .quote-logo-box img { width: 100%; height: 100%; object-fit: contain; }