/* Font optimization overrides for better performance */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/webfonts/fa-regular-400.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/webfonts/fa-brands-400.woff2") format("woff2");
}

.fa, .fab, .far, .fas {
  font-display: swap;
}

/* Critical CSS Optimization for Performance */

.trm-main-card {
  min-height: 600px;
  contain: layout style paint;
}

.trm-banner {
  min-height: 560px;
  contain: layout;
}

img {
  max-width: 100%;
  height: auto;
}

/* Optimized animations using transform and opacity only */
.trm-scroll-animation {
  will-change: transform, opacity;
}

.trm-btn {
  will-change: transform;
  transition: transform 0.3s ease;
}

/* Fix non-composited animation issue */
.trm-testimonials-slider-prev,
.trm-testimonials-slider-next {
  will-change: transform;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.trm-video {
  aspect-ratio: 16/9;
  position: relative;
}

.trm-app-frame {
  contain: layout style paint;
}

/* Reduce layout shift for avatars and testimonial images */
.trm-avatar {
  aspect-ratio: 1/1;
  width: 110px;
  height: 110px;
}

.trm-testimonial-author img {
  aspect-ratio: 1/1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

/* Optimize banner images */
.trm-banner-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prevent CLS for slider navigation */
.trm-slider-navigation {
  position: relative;
  min-height: 60px;
}

/* Image skeleton pulse animation for better perceived performance */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.image-skeleton {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}