/* =====================================================================
KSI Technology Icons
File: /inc/technology-icons/technology-icons.css
Enqueued automatically by technology-icons-shortcode.php — only on
Solutions posts (and in the Elementor editor/preview).
===================================================================== */

.ksi-tech-icons {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 14px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}

.ksi-tech-icons__item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 12px !important;
}

.ksi-tech-icons__icon {
width: 86px !important;
height: 86px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.ksi-tech-icons__icon img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
/* Icon already includes its own background shape — no extra styling needed */
}

.ksi-tech-icons__title {
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
color: #616161 !important;
max-width: 140px !important;
}

/* ---------- Responsive: 2 per row on tablet/mobile ---------- */
@media (max-width: 1280px) {
.ksi-tech-icons__icon {
width: 70px !important;
height: 70px !important;
}
}
@media (max-width: 767px) {
.ksi-tech-icons {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 16px !important;
}

.ksi-tech-icons__icon {
    width: 84px !important;
    height: 84px !important;
}

.ksi-tech-icons__title {
    font-size: 15px !important;
}
}