/* Technology Icons with Iconify */
.single-technology {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 15px !important;
    min-height: 100px !important;
    gap: 10px !important;
}

.tech-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    filter: hue-rotate(320deg) saturate(1.2) brightness(1.1) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* Force size with more specific selectors */
iconify-icon.tech-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.single-technology iconify-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* Hover effect with app colors */
.single-technology:hover .tech-icon {
    filter: hue-rotate(320deg) saturate(1.5) brightness(1.3) drop-shadow(0 4px 8px rgba(224, 77, 121, 0.3)) !important;
    transform: scale(1.1) !important;
}

/* Ensure text stays centered */
.single-technology .heading-5---medium {
    margin: 0 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .tech-icon,
    iconify-icon.tech-icon,
    .single-technology iconify-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .single-technology {
        min-height: 85px !important;
        padding: 12px !important;
        gap: 8px !important;
    }
}

@media (max-width: 576px) {
    .tech-icon,
    iconify-icon.tech-icon,
    .single-technology iconify-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .single-technology {
        min-height: 70px !important;
        padding: 10px !important;
        gap: 6px !important;
    }
}