/* =============================================================
   FONT AWESOME 6 - LATEST VERSION
   ============================================================= */

/* Import Font Awesome 6 from CDN */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* Ensure Font Awesome fonts load properly */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

/* Font Awesome base styles */
.fa, .fas, .far, .fal, .fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
text-rendering: auto;
  line-height: 1;
}

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

/* Regular icons */
.far, .fa-regular {
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
}

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

/* Utility classes for common use cases */
.fa-fw {
  text-align: center;
  width: 1.25em;
}

.fa-2xs {
  font-size: 0.625em;
}

.fa-xs {
  font-size: 0.75em;
}

.fa-sm {
  font-size: 0.875em;
}

.fa-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em;
}

.fa-xl {
  font-size: 1.5em;
  line-height: 0.04167em;
  vertical-align: -0.125em;
}

.fa-2xl {
  font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em;
}

/* Animation utilities */
.fa-beat {
  animation: fa-beat 1s ease infinite;
}

@keyframes fa-beat {
  0%, 90% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.25);
  }
}

.fa-fade {
  animation: fa-fade 1s ease infinite;
}

@keyframes fa-fade {
  50% {
    opacity: 0.4;
  }
}

.fa-beat-fade {
  animation: fa-beat-fade 1s ease infinite;
}

@keyframes fa-beat-fade {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.125);
  }
}

.fa-bounce {
  animation: fa-bounce 1s ease infinite;
}

@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-100%);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(-7%);
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

.fa-flip {
  animation: fa-flip 1s ease infinite;
}

@keyframes fa-flip {
  50% {
    transform: rotate3d(0, 1, 0, -180deg);
  }
}

.fa-shake {
  animation: fa-shake 1s ease infinite;
}

@keyframes fa-shake {
  0% {
    transform: rotate(-15deg);
  }
  4% {
    transform: rotate(15deg);
  }
  8%, 24% {
    transform: rotate(-18deg);
  }
  12%, 28% {
    transform: rotate(18deg);
  }
  16% {
    transform: rotate(-22deg);
  }
  20% {
    transform: rotate(22deg);
  }
  32% {
    transform: rotate(-12deg);
  }
  36% {
    transform: rotate(12deg);
  }
  40%, 100% {
    transform: rotate(0deg);
  }
}

.fa-spin {
  animation: fa-spin 2s linear infinite;
}

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

.fa-spin-reverse {
  animation: fa-spin 2s linear infinite reverse;
}

.fa-pulse {
  animation: fa-spin 1s steps(8) infinite;
}

/* Rotation utilities */
.fa-rotate-90 {
  transform: rotate(90deg);
}

.fa-rotate-180 {
  transform: rotate(180deg);
}

.fa-rotate-270 {
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  transform: scale(1, -1);
}

.fa-flip-both {
  transform: scale(-1, -1);
}

/* Stacking icons */
.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

/* Icon inverse colors */
.fa-inverse {
  color: #fff;
}