/* Global Icon Enhancement CSS - Better Visibility Across All Pages */

/* Base icon improvements for better visibility */
i[class*="fa"],
i[class*="fas"],
i[class*="fab"],
i[class*="far"] {
    font-weight: 600 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hero section feature icons */
.fas.fa-paint-brush,
.fas.fa-plug,
.fas.fa-shopping-cart,
.fas.fa-exchange-alt,
.fas.fa-robot,
.fas.fa-gauge-high,
.fas.fa-mobile-screen,
.fas.fa-shield-alt,
.fas.fa-cubes,
.fas.fa-headset {
    color: #60a5fa !important; /* Brighter blue */
    font-size: 1rem !important;
    text-shadow: 0 1px 2px rgba(96, 165, 250, 0.3) !important;
    font-weight: 700 !important;
}

/* Service card main icons - larger and more prominent */
.service-card .fab.fa-wordpress,
.service-card .fas.fa-shopping-cart,
.service-card .fas.fa-cubes,
.service-card .fas.fa-shopping-bag,
.service-card .fas.fa-search,
.service-card .fas.fa-shield-alt,
.service-card .fas.fa-robot,
.service-card .fas.fa-tools,
.service-card .fas.fa-rocket {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    transition: all 0.3s ease;
}

/* Service card icon hover effects */
.service-card:hover .fab.fa-wordpress,
.service-card:hover .fas.fa-shopping-cart,
.service-card:hover .fas.fa-cubes,
.service-card:hover .fas.fa-shopping-bag,
.service-card:hover .fas.fa-search,
.service-card:hover .fas.fa-shield-alt,
.service-card:hover .fas.fa-robot,
.service-card:hover .fas.fa-tools,
.service-card:hover .fas.fa-rocket {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}

/* Arrow icons in links */
.fas.fa-arrow-right {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    transition: transform 0.3s ease;
}

a:hover .fas.fa-arrow-right {
    transform: translateX(4px);
}

/* CTA button icons */
.fas.fa-rocket,
.fas.fa-comments,
.fas.fa-paper-plane,
.fas.fa-bolt {
    color: #fbbf24 !important; /* Yellow accent */
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    font-size: 1.1rem !important;
}

/* Stats/feature section icons */
.fas.fa-users,
.fas.fa-clock,
.fas.fa-rocket,
.fas.fa-shield-alt {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(255,255,255,0.1);
}

/* Team section and other page icons */
.fas.fa-check-circle,
.fas.fa-star,
.fas.fa-heart,
.fas.fa-award,
.fas.fa-briefcase,
.fas.fa-blog,
.fas.fa-info-circle {
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* Social and contact icons */
.fas.fa-envelope,
.fas.fa-phone,
.fas.fa-map-marker-alt,
.fab.fa-facebook,
.fab.fa-twitter,
.fab.fa-linkedin {
    font-weight: 700 !important;
    color: #3b82f6 !important;
    text-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
}

/* Hover effects for all interactive icons */
a:hover i,
button:hover i,
.clickable:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Specific color overrides for themed icons */
.text-blue-600 i,
.text-blue-700 i {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

.text-green-600 i {
    color: #059669 !important;
    font-weight: 700 !important;
}

.text-purple-600 i {
    color: #7c3aed !important;
    font-weight: 700 !important;
}

.text-red-600 i {
    color: #dc2626 !important;
    font-weight: 700 !important;
}

.text-indigo-600 i {
    color: #4f46e5 !important;
    font-weight: 700 !important;
}

.text-orange-600 i {
    color: #ea580c !important;
    font-weight: 700 !important;
}

.text-teal-600 i {
    color: #0d9488 !important;
    font-weight: 700 !important;
}

.text-cyan-600 i {
    color: #0891b2 !important;
    font-weight: 700 !important;
}

.text-pink-600 i {
    color: #db2777 !important;
    font-weight: 700 !important;
}

/* White icons (for dark backgrounds) */
.text-white i {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Yellow accent icons */
.text-yellow-300 i,
.text-yellow-400 i,
.text-yellow-500 i {
    color: #fbbf24 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Mobile-specific icon improvements */
@media (max-width: 768px) {
    /* Larger touch targets for mobile */
    .service-card i {
        font-size: 4rem !important;
    }
    
    /* Better spacing for mobile icons */
    .fas, .fab, .far {
        margin-right: 0.75rem;
    }
    
    /* Mobile navigation icons */
    .m-link i {
        font-size: 1.1rem !important;
        color: #1d4ed8 !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 2px rgba(29, 78, 216, 0.1);
    }
}

/* Dark mode icon adjustments */
.dark i {
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    i {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    i {
        font-weight: 800 !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
    }
}