/* icons.css */

/* 1. Define @font-face rules with font-display: swap */
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2") format("woff2");
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");
}

/* 2. Basic Font Awesome styling */
.fa, .fas, .fab, .fa-solid, .fa-brands {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.fas, .fa-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.fab, .fa-brands {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}

/* 3. Specific icon classes used in the project */
.fa-play:before { content: "\f04b"; }
.fa-edit:before { content: "\f044"; }
.fa-check-circle:before { content: "\f058"; }
.fa-lock:before { content: "\f023"; }
.fa-unlock:before { content: "\f09c"; }
.fa-unlock-alt:before { content: "\f13e"; }
.fa-cog:before { content: "\f013"; }
.fa-brain:before { content: "\f5dc"; }
.fa-code:before { content: "\f121"; }
.fa-route:before { content: "\f4d7"; }
.fa-compress-alt:before { content: "\f422"; }
.fa-shield-alt:before { content: "\f3ed"; }
.fa-key:before { content: "\f084"; }
.fa-user-secret:before { content: "\f21b"; }
.fa-comments:before { content: "\f086"; }
.fa-eye:before { content: "\f06e"; }
.fa-eye-slash:before { content: "\f070"; }
.fa-copy:before { content: "\f0c5"; }
.fa-rocket:before { content: "\f135"; }
.fa-globe:before { content: "\f0ac"; }
.fa-robot:before { content: "\f544"; }
.fa-microchip:before { content: "\f2db"; }
.fa-mobile-alt:before { content: "\f3cd"; }
.fa-bars:before { content: "\f0c9"; }
.fa-times:before { content: "\f00d"; }
.fa-spinner:before { content: "\f110"; }
.fa-github:before { content: "\f09b"; }
.fa-linkedin:before { content: "\f0e1"; }
.fa-arrow-down:before { content: "\f063"; }
.fa-arrow-right:before { content: "\f061"; }
.fa-file-alt:before { content: "\f15c"; }
.fa-compress:before { content: "\f066"; }
.fa-stream:before { content: "\f550"; }
.fa-database:before { content: "\f1c0"; }
.fa-code-branch:before { content: "\f126"; }
.fa-sms:before { content: "\f7cd"; }
.fa-whatsapp:before { content: "\f232"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-telegram:before { content: "\f2c6"; }
.fa-discord:before { content: "\f392"; }
.fa-slack:before { content: "\f198"; }
.fa-plus:before { content: "\f067"; }
.fa-search:before { content: "\f002"; }
.fa-puzzle-piece:before { content: "\f12e"; }

/* 4. Animation for spinner */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}