@media (max-width: 768px) {
  .tg-card,
  .tg-card::before,
  .tg-card::after,
  .tg-card:hover,
  .tg-card:hover::before,
  .tg-card:hover::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .team-card,
  .team-card *,
  .team-card:hover,
  .team-card:hover *,
  .event-head-card,
  .event-head-card *,
  .event-head-card:hover,
  .event-head-card:hover * {
    transition: none !important;
  }
  .team-card:hover,
  .event-head-card:hover {
    transform: none !important;
  }

  .event-card,
  .event-card *,
  .event-card:hover,
  .event-card:hover *,
  .event-tile,
  .event-tile *,
  .event-tile:hover,
  .event-tile:hover * {
    transition: none !important;
  }
  .event-card:hover,
  .event-tile:hover {
    transform: none !important;
  }

  #aboutus .tg-visual .tg-orbit {
    animation: none !important;
    will-change: auto;
  }
} /* Accessibility preference also eliminates needless animation work. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  #ff-hero-canvas {
    display: none !important;
  }

  .ff-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .qodef--init.qodef-direction--left.qodef-text-marquee .qodef-m-content-inner {
    animation: qode-text-marquee-left var(--qode-marquee-duration, 25s) linear
      infinite !important;
  }

  .ff-team-particle,
  .ff-section-particle,
  .ff-particle {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile GPU budget
   Keep the desktop visual system untouched. On touch/small screens,
   replace the most expensive compositor effects with visually similar
   translucent surfaces and prevent decorative layers from becoming
   full-screen GPU work.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .ff-nav,
  .ff-mobile-menu,
  .qodef-header-navigation,
  .qodef-search-cover,
  .qodef-side-area,
  .qodef-back-to-top-icon,
  .ff-event-card,
  .tg-card,
  .team-card,
  .event-head-card {
    background-color: rgba(10, 14, 22, 0.88);
  }

  /* Don't promote entire pages into GPU layers. Only interactive media
     gets a stable compositing layer where it is actually useful. */
  .ff-card-image-wrap img,
  .team-card img,
  .event-head-card img {
    will-change: auto !important;
  }

  @media (hover: none) {
    .ff-event-card:hover,
    .tg-card:hover,
    .team-card:hover,
    .event-head-card:hover,
    .ff-card-btn:hover {
      transform: none !important;
    }
  }

  .ff-location {
    contain: paint;
  }

  html,
  body {
    overflow-x: clip;
  }

  a,
  button,
  [role="button"] {
    touch-action: manipulation;
  }
}