/* Custom Icon System for App Development Technologies */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Flutter Icon */
.icon-flutter {
    background-image: url('flutter.svg');
    width: 1.2em;
    height: 1.2em;
}

/* Dart Icon */
.icon-dart {
    background-image: url('dart.svg');
    width: 1.1em;
    height: 1.1em;
}

/* React Icon */
.icon-react {
    background-image: url('react.svg');
    width: 1.1em;
    height: 1.1em;
}

/* Android Icon */
.icon-android {
    background-image: url('android.svg');
    width: 1.1em;
    height: 1.1em;
}

/* PHP Icon */
.icon-php {
    background-image: url('php.svg');
    width: 1.1em;
    height: 1.1em;
}

/* Fallback for missing icons - simplified without text */
.icon-flutter:not([style*="background-image"]),
.icon-dart:not([style*="background-image"]),
.icon-php:not([style*="background-image"]),
.icon-react:not([style*="background-image"]),
.icon-android:not([style*="background-image"]) {
    background: var(--primary);
    border-radius: 50%;
    position: relative;
}

/* Service Icon Sizes */
.service-icon .icon {
    width: 2em;
    height: 2em;
}

/* Tech Tag Icon Sizes */
.tech-tag .icon {
    width: 1em;
    height: 1em;
}

/* Tech Chip Icon Sizes */
.tech-chip .icon {
    width: 0.8em;
    height: 0.8em;
}