/* Font Awesome Fallback CSS */
/* This CSS provides fallback text when Font Awesome icons don't load */

/* Fallback for social media icons - only if Font Awesome fails to load */
.social-link .fa-facebook::before,
.social-link .fab.fa-facebook::before {
    content: "f" !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
}

.social-link .fa-twitter::before,
.social-link .fab.fa-twitter::before {
    content: "𝕏" !important;
    font-family: sans-serif !important;
    font-weight: bold !important;
}

.social-link .fa-youtube::before,
.social-link .fab.fa-youtube::before {
    content: "▶" !important;
    font-family: sans-serif !important;
    font-weight: bold !important;
    color: #FF0000 !important;
}

.social-link .fa-instagram::before,
.social-link .fab.fa-instagram::before {
    content: "IG" !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    color: #E4405F !important;
}

.social-link .fa-linkedin-in::before,
.social-link .fab.fa-linkedin-in::before {
    content: "in" !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 0.8em !important;
}

/* Fallback for other common icons */
.fa-trophy::before,
.fas.fa-trophy::before {
    content: "🏆" !important;
    font-family: Arial, sans-serif !important;
}

.fa-search::before,
.fas.fa-search::before {
    content: "🔍" !important;
    font-family: Arial, sans-serif !important;
}

.fa-times-circle::before,
.fas.fa-times-circle::before {
    content: "❌" !important;
    font-family: Arial, sans-serif !important;
}

.fa-exclamation-triangle::before,
.fas.fa-exclamation-triangle::before {
    content: "⚠️" !important;
    font-family: Arial, sans-serif !important;
}

.fa-play::before,
.fas.fa-play::before {
    content: "▶️" !important;
    font-family: Arial, sans-serif !important;
}

/* Ensure fallback text is centered */
.social-link i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}