/* =============================================
   TT Norms Pro Font Faces
   ============================================= */
@font-face {
  font-family: 'TT Norms Pro';
  src: url('/fonts/TTNormsPro-Regular.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms Pro';
  src: url('/fonts/TTNormsPro-DemiBold.ttf') format('ttf');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =============================================
   Base & Global Styles
   ============================================= */
html,
body {
  font-family: 'TT Norms Pro', ui-sans-serif, system-ui, sans-serif;
  background-color: #F5F5F5;
}

* {
  font-family: inherit;
}

/* =============================================
   Marquee Animations
   ============================================= */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}

@keyframes backers-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.backers-track {
  display: flex;
  width: max-content;
  animation: backers-marquee 30s linear infinite;
}

/* --- Tablet Breakpoint (768px and up) --- */
@media (max-width: 768px) {
  .hero-text-md {
    background-color: rgba(255, 255, 255,.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 5px;
  }

  .hero-div-md {
    padding-top: 5rem !important;
  }

  .justi-md {
    justify-content: unset !important;
  }

  .justi-md h3 {
    margin-bottom: 15px;
  }
}