.iaLayer-bannerindustrial { display: block; background: var(--bg-color, #1a1a2e); border-radius: var(--border-radius, 8px); padding: 36px 32px; transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: default; position: relative; overflow: hidden; } .iaLayer-bannerindustrial::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent-color, #e84545); border-radius: var(--border-radius, 8px) 0 0 var(--border-radius, 8px); } .iaLayer-bannerindustrial:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); } .iaLayer-bannerindustrial .bi-inner { display: flex; align-items: flex-start; gap: 24px; } .iaLayer-bannerindustrial .bi-icon-wrap { flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--accent-color, #e84545); border-radius: 50%; color: var(--icon-color, #ffffff); transition: background 0.25s ease; } .iaLayer-bannerindustrial:hover .bi-icon-wrap { background: color-mix(in srgb, var(--accent-color, #e84545) 80%, #000 20%); } .iaLayer-bannerindustrial .bi-icon-wrap svg { width: 30px; height: 30px; fill: currentColor; } .iaLayer-bannerindustrial .bi-content { flex: 1; min-width: 0; } .iaLayer-bannerindustrial .bi-title { font-size: 1.25rem; font-weight: 700; color: var(--title-color, #ffffff); margin: 0 0 10px 0; line-height: 1.3; } .iaLayer-bannerindustrial .bi-text { font-size: 0.95rem; color: var(--text-color, #aab0be); line-height: 1.6; margin: 0 0 16px 0; } .iaLayer-bannerindustrial .bi-text p { margin: 0; } .iaLayer-bannerindustrial .bi-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--accent-color, #e84545); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; transition: gap 0.2s ease, opacity 0.2s ease; } .iaLayer-bannerindustrial .bi-cta:hover { gap: 10px; opacity: 0.85; } .iaLayer-bannerindustrial .bi-cta-ic { width: 14px; height: 14px; } @media (max-width: 480px) { .iaLayer-bannerindustrial { padding: 24px 20px; } .iaLayer-bannerindustrial .bi-inner { flex-direction: column; gap: 16px; } .iaLayer-bannerindustrial .bi-icon-wrap { width: 52px; height: 52px; } .iaLayer-bannerindustrial .bi-icon-wrap svg { width: 24px; height: 24px; } }