@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  src: url(../../webfonts/fa-brands-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../../webfonts/fa-regular-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Solid';
  font-style: normal;
  font-weight: 900;
  src: url(../../webfonts/fa-solid-900.woff2) format('woff2');
}
/* Fix for Font Awesome icons not displaying properly */
/* This file should be loaded AFTER mobile-nav-fix.css to ensure proper icon rendering */
/* Using extremely specific selectors to override !important declarations */

/* Ensure Font Awesome classes have proper display properties */
.fas, .far, .fab, .fal, .fa,
i[class*="fa-"],
[class*="fa-"]::before {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-display: block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Fix for icon wrappers */
.icon-wrapper,
.service-icon-wrapper,
.value-icon,
.pillar-icon,
.stat-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure icons in all sections display properly */
.service-icon-wrapper i,
.value-icon i,
.pillar-icon i,
.stat-icon i,
.hero-badge i,
.quick-link i,
.news-meta i,
.floating-icon i {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Specific fixes for different icon sizes */
.fa-2x {
    font-size: 2em !important;
}

.fa-3x {
    font-size: 3em !important;
}

.fa-4x {
    font-size: 4em !important;
}

/* Fix for icons in buttons */
.btn i {
    display: inline-block !important;
}

/* Fix for icons in links */
a i {
    display: inline-block !important;
}

/* Ensure icons in floating elements display */
.floating-icon i {
    display: inline-block !important;
    font-size: 1.5rem !important;
}

/* Fix for pseudo-elements that might be overriding icons */
i[class*="fa-"]::before,
.fas::before, 
.far::before, 
.fab::before, 
.fal::before, 
.fa::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
}