/* =============================================================
   AI-Era Enhancements for Subscrbe
   ============================================================= */

:root {
  --color-primary: #21325E;
  --color-accent-purple: #7c6bff;
  --color-accent-blue: #60a5fa;
  --gradient-hero: linear-gradient(135deg, #060b18 0%, #0f1729 40%, #1a2847 100%);
  --gradient-feature-bg: linear-gradient(160deg, #080d1a 0%, #111827 60%, #1a2232 100%);
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glow-purple: 0 0 40px rgba(124, 107, 255, 0.25);
}

/* =====================
   Navigation
   ===================== */

/* Ensure top-bar social icons sit above the navbar (z-index: 1999) so they're clickable */
.top-bar {
  z-index: 2001;
}

.top-bar .social-media a {
  position: relative;
  z-index: 2002;
  pointer-events: auto;
}

/* Glassmorphism when sticky/scrolled */
.sticky-wrapper.is-sticky .site-navbar {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(33, 50, 94, 0.07);
}

/* =====================
   Hero Section
   ===================== */

/* Particle canvas — clipped strictly to the hero section, never blocks clicks */
.particlehead {
  z-index: 1;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  opacity: 0.18;
}

.particlehead canvas {
  pointer-events: none;
}

/* Light hero — subtle gradient, keeps logo and nav text visible */
.site-blocks-cover {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 55%, #e8eeff 100%) !important;
}

.site-blocks-cover h1 {
  color: #21325E !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-size: 3.5rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
}

@media (max-width: 991.98px) {
  .site-blocks-cover h1 {
    font-size: 2.2rem !important;
  }
}

.site-blocks-cover p.lead {
  color: #555 !important;
}

/* Typed words — dark-to-purple gradient, legible on light bg */
.typed-words {
  background: linear-gradient(135deg, #21325E, #5b4fcf, #7c6bff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  animation: gradient-shift 5s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* "Now in Beta" badge */
.ai-badge {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 50px;
  background: rgba(33, 50, 94, 0.07);
  border: 1px solid rgba(33, 50, 94, 0.18);
  color: #21325E;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* App download CTA buttons — dark theme for light bg */
.app-cta-group {
  margin-top: 2rem;
}

.app-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.3s ease;
  margin: 6px;
  color: #21325E !important;
  border: 1.5px solid rgba(33, 50, 94, 0.25);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-download-btn:hover {
  background: #fff;
  border-color: rgba(33, 50, 94, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(33, 50, 94, 0.12);
  color: #21325E !important;
}

.app-download-btn.btn-solid {
  background: linear-gradient(135deg, #21325E, #3D5A9E);
  border-color: transparent;
  color: #fff !important;
}

.app-download-btn.btn-solid:hover {
  background: linear-gradient(135deg, #2a3f72, #4d6aae);
  box-shadow: 0 8px 28px rgba(33, 50, 94, 0.35);
  color: #fff !important;
}

.app-download-btn i {
  font-size: 18px;
}

/* Scroll-down chevron */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: bounce 2.4s ease-in-out infinite;
}

.scroll-indicator::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(33, 50, 94, 0.4);
  border-bottom: 2px solid rgba(33, 50, 94, 0.4);
  transform: rotate(45deg);
  margin: auto;
}

@keyframes bounce {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 0.9;  transform: translateX(-50%) translateY(7px); }
}

/* =====================
   About Section
   ===================== */

/* Section: subtle light→navy gradient toward the video side */
.about-connection-section {
  background: linear-gradient(105deg, #ffffff 0%, #f4f6fb 45%, #e8ecf7 70%, #d6ddf0 100%);
}

/* Video frame: deep navy container with rounded corners + shadow */
.about-video-frame {
  background: #0d1526;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 8px 40px rgba(13, 21, 38, 0.22),
    0 2px 10px rgba(13, 21, 38, 0.12);
  position: relative;
}

.about-video-frame video {
  display: block;
  width: 100%;
  height: auto;
}

/* Soft vignette on the video edges to blend into the dark frame */
.about-video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(13, 21, 38, 0.35) 100%);
  pointer-events: none;
}

@media (max-width: 991px) {
  .about-connection-section {
    background: linear-gradient(180deg, #ffffff 0%, #f0f3fb 60%, #e4eaf5 100%);
  }
  .about-video-frame {
    margin-top: 2rem;
  }
}

.about-enhanced h2.text-primary {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

@media (max-width: 768px) {
  .about-enhanced h2.text-primary {
    font-size: 1.8rem;
  }
}

/* =====================
   Feature Cards (light section)
   ===================== */

.ai-feature-section {
  background: #f4f7fc !important;
}

/* White cards with shadow */
.ai-feature-section .box-with-humber {
  background: #ffffff !important;
  border: 1px solid rgba(33, 50, 94, 0.08) !important;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(33, 50, 94, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.ai-feature-section .box-with-humber:hover {
  border-color: rgba(124, 107, 255, 0.3) !important;
  box-shadow: 0 20px 48px rgba(33, 50, 94, 0.13);
  transform: translateY(-6px);
}

.ai-feature-section .box-with-humber h2 {
  color: #21325E !important;
}

.ai-feature-section .box-with-humber p {
  color: #777;
}

.ai-feature-section .box-with-humber .icon {
  color: #7c6bff !important;
}

/* =====================
   Professional Team Section
   ===================== */

#team {
  scroll-margin-top: 80px;
}

.pro-team-section {
  background: #f4f6fb;
  padding-top: 100px !important;
}

/* Section badge pill */
.section-badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 50px;
  background: rgba(33, 50, 94, 0.08);
  color: #21325E;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pro-section-heading {
  font-size: 2.4rem;
  font-weight: 800;
  color: #21325E;
  line-height: 1.15;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .pro-section-heading {
    font-size: 1.8rem;
  }
}

/* Team card */
.pro-team-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(33, 50, 94, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.pro-team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 52px rgba(33, 50, 94, 0.16);
}

/* Photo */
.pro-team-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e8ecf5;
}

.pro-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
  display: block;
}

.pro-team-card:hover .pro-team-photo img {
  transform: scale(1.06);
}

/* Bio overlay */
.pro-team-bio {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 60, 0.95) 0%, rgba(15, 23, 60, 0.6) 100%);
  display: flex;
  align-items: flex-end;
  padding: 22px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pro-team-card:hover .pro-team-bio {
  opacity: 1;
}

.pro-team-bio p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

/* Name / role / social row */
.pro-team-info {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pro-team-info h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 3px;
  color: #21325E;
  line-height: 1.1;
}

.pro-team-role {
  font-size: 15px;
  color: #7c6bff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pro-team-linkedin {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef0fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #21325E;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.pro-team-linkedin:hover {
  background: #0077b5;
  color: #fff;
  transform: scale(1.12);
  text-decoration: none;
}

/* =====================
   Career Section
   ===================== */

.h-entry {
  padding: 28px 32px;
  border-radius: 16px;
  border: 1px solid rgba(33, 50, 94, 0.12);
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.h-entry:hover {
  border-color: rgba(124, 107, 255, 0.3);
  box-shadow: 0 12px 32px rgba(33, 50, 94, 0.1);
  transform: translateY(-3px);
}

.h-entry h3 a {
  color: #21325E;
  transition: color 0.25s;
}

.h-entry h3 a:hover {
  color: #7c6bff;
  text-decoration: none;
}

.h-entry .meta {
  color: #7c6bff;
}

/* =====================
   Footer (light)
   ===================== */

.site-footer {
  background: #21325E;
}

.site-footer h2 {
  color: #ffffff !important;
}

.site-footer .footer-heading {
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.1em;
}

.site-footer p {
  color: rgba(255, 255, 255, 0.55);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: none;
}

.site-footer ul li {
  margin-bottom: 8px;
}

.site-footer .border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Footer contact links */
.text-gradient-orange-1 a,
.text-gradient-orange-2 a,
.text-gradient-orange-3 a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
}

.site-footer .fa-phone,
.site-footer .fa-envelope,
.site-footer .fa-map-marker-alt {
  color: rgba(255, 255, 255, 0.6);
}

/* Footer social icons */
.site-footer a [class*="icon-facebook"],
.site-footer a [class*="icon-twitter"],
.site-footer a [class*="icon-instagram"],
.site-footer a [class*="icon-linkedin"] {
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
  transition: color 0.2s;
}

.site-footer a:hover [class*="icon-facebook"],
.site-footer a:hover [class*="icon-twitter"],
.site-footer a:hover [class*="icon-instagram"],
.site-footer a:hover [class*="icon-linkedin"] {
  color: #ffffff;
}

/* =====================
   Contact section map
   ===================== */

#contact iframe {
  border-radius: 16px;
  width: 100% !important;
  max-width: 100%;
}

/* =====================
   Feature Carousel
   ===================== */

.ai-feature-section {
  padding-bottom: 60px;
}

/* Slide card */
.feature-slide-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(33, 50, 94, 0.08);
  box-shadow: 0 4px 20px rgba(33, 50, 94, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  margin: 10px 4px 20px;
}

.feature-slide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(33, 50, 94, 0.14);
}

/* Animated illustration header */
.feature-animation {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.feature-anim--chat     { background: linear-gradient(135deg, #ede9ff 0%, #d8d2ff 100%); }
.feature-anim--location { background: linear-gradient(135deg, #dff0ff 0%, #bde0ff 100%); }
.feature-anim--files    { background: linear-gradient(135deg, #d9f5ee 0%, #b3e8da 100%); }
.feature-anim--community{ background: linear-gradient(135deg, #fff3de 0%, #fde8b4 100%); }
.feature-anim--soon     { background: linear-gradient(135deg, #fde8f0 0%, #f9c6da 100%); }

/* Centered icon wrapper */
.feature-anim-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.feature-anim-icon > i {
  font-size: 38px;
  position: relative;
  z-index: 2;
  animation: icon-float 3s ease-in-out infinite;
}

.feature-anim--chat     i { color: #7c6bff; }
.feature-anim--location i { color: #3b9eff; }
.feature-anim--files    i { color: #1db89e; }
.feature-anim--community i { color: #f59e0b; }
.feature-anim--soon     i { color: #e9447a; }

@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Expanding ring animation */
.feature-anim-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: ring-expand 2.4s ease-out infinite;
}

.feature-anim--chat     .feature-anim-ring { color: #7c6bff; }
.feature-anim--community .feature-anim-ring { color: #f59e0b; }

.feature-anim-ring.ring-2 {
  animation-delay: 1.2s;
}

@keyframes ring-expand {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Pulse animation (location) */
.feature-anim-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3b9eff;
  opacity: 0;
  animation: pulse-out 2s ease-out infinite;
}

.feature-anim-pulse.pulse-2 {
  animation-delay: 1s;
}

@keyframes pulse-out {
  0%   { transform: scale(0.8); opacity: 0.4; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Orbit animation (files & rocket) */
.feature-anim-orbit {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1.5px dashed currentColor;
  opacity: 0.3;
  animation: orbit-spin 6s linear infinite;
}

.feature-anim--files .feature-anim-orbit { color: #1db89e; }
.feature-anim--soon  .feature-anim-orbit { color: #e9447a; }

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Text body below illustration */
.feature-slide-body {
  padding: 22px 24px 28px;
}

.feature-slide-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: #21325E;
  margin: 0 0 10px;
}

.feature-slide-body p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
  margin: 0;
}

/* Hide Owl's built-in nav — we use custom buttons instead */
.ai-feature-section .owl-nav {
  display: none !important;
}

/* Outer wrapper: row with prev/next flanking the track */
.feature-carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
}

.feature-carousel-wrapper .container-fluid {
  flex: 1;
  min-width: 0;
}

/* Custom nav buttons */
.feature-nav-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(33, 50, 94, 0.18);
  box-shadow: 0 4px 16px rgba(33, 50, 94, 0.10);
  color: #21325E;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
  z-index: 10;
}

.feature-nav-btn:hover {
  background: #21325E;
  color: #fff;
  box-shadow: 0 8px 24px rgba(33, 50, 94, 0.22);
  transform: scale(1.08);
}

/* Dot indicators */
.ai-feature-section .owl-dots {
  text-align: center;
  margin-top: 18px;
}

.ai-feature-section .owl-dot span {
  width: 8px;
  height: 8px;
  background: rgba(33, 50, 94, 0.2) !important;
  border-radius: 50%;
  margin: 4px;
  transition: background 0.25s, transform 0.25s;
}

.ai-feature-section .owl-dot.active span {
  background: #7c6bff !important;
  transform: scale(1.3);
}

/* =====================
   Team Passion Videos — Unified
   ===================== */

.team-video-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  animation: team-video-cycle 20s ease-in-out infinite;
}

.team-video-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 20s cycle: ~5s photo, ~10s video, ~5s photo */
@keyframes team-video-cycle {
  0%,   8% { opacity: 0; }
  12%,  58% { opacity: 1; }
  65%, 100% { opacity: 0; }
}

/* Label */
.team-video-label {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
}

.tvl-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.tvl-line {
  flex: 1;
  max-width: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  display: block;
}


/* =====================
   Misc utilities
   ===================== */

.site-section-heading {
  font-weight: 700;
}

/* =============================================================
   Mobile responsiveness & motion tuning
   -------------------------------------------------------------
   The original animations were tuned for desktop and felt heavy /
   janky / non-responsive on phones:
     - .particlehead used a fixed 100vh canvas and ran WebGL on
       every device (now gated in JS — hidden here as a safety net).
     - The hero used 100vh which jumps on iOS / Android as the URL
       bar collapses. We switch to 100svh (small viewport height)
       with a vh fallback for older browsers.
     - Feature card ring/pulse/orbit animations overflowed narrow
       cards on small screens; the orbit ring (110px) was larger
       than the 80px icon frame and leaked.
     - The 20s team-video-cycle staggers 8 autoplay videos across
       ~17.5s of delay — we shorten the cycle on mobile so the
       paused + inview + focused optimizations in main.js kick in
       sooner, and we drop shadow hover effects that don't apply.
   ============================================================= */

/* Use small-viewport units on mobile so the hero doesn't jump
   when the browser chrome hides/shows. Falls back to 100vh. */
@supports (height: 100svh) {
  .particlehead {
    height: 100svh;
  }
  .site-blocks-cover,
  .site-blocks-cover > .container > .row {
    height: 100svh !important;
  }
}

@media (max-width: 767.98px) {
  /* Hide decorative particle canvas on small screens as a safety net
     (the ParticleHead script also bails early on narrow/coarse
     pointer / reduced-motion devices). */
  .particlehead {
    display: none !important;
  }

  /* Hero on phones: use the small-viewport unit so the height doesn't
     jump when the URL bar hides/shows, and give enough top padding to
     clear the absolutely-positioned navbar + logo (~120-140px tall on
     mobile). Without this, the centered headline lands directly under
     the logo image. */
  .site-blocks-cover {
    min-height: 100vh;      /* fallback */
    min-height: 100svh;
    height: auto !important;
    padding-top: 140px;
    padding-bottom: 60px;
  }
  .site-blocks-cover > .container > .row {
    min-height: 0 !important;
    height: auto !important;
  }
  /* Stop the scroll-down chevron bumping into the CTA buttons on
     short viewports. */
  .scroll-indicator {
    bottom: 16px;
  }

  /* Feature-card animations: scale everything down so nothing
     overflows the card, which was causing odd visual clipping on
     narrow screens. */
  .feature-animation {
    height: 160px;
  }
  .feature-anim-icon {
    width: 64px;
    height: 64px;
  }
  .feature-anim-icon > i {
    font-size: 30px;
  }
  .feature-anim-orbit {
    width: 88px;
    height: 88px;
  }
  @keyframes ring-expand {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  @keyframes pulse-out {
    0%   { transform: scale(0.8); opacity: 0.4; }
    100% { transform: scale(2.1); opacity: 0; }
  }

  /* Team passion videos are driven per-card by JS on mobile (see
     initVideoPerf() in main.js). The inline CSS keyframe stagger
     (up to 17.5s delay on the last card) meant scrolling to the
     bottom cards would reveal nothing for ~18 seconds. When the
     JS has taken over, each card fades in via a simple
     transition the moment it scrolls into view. */
  .team-video-overlay.is-mobile-cycle {
    animation: none !important;
    animation-delay: 0s !important;
    opacity: 0;
    transition: opacity 0.45s ease;
  }
  .team-video-overlay.is-mobile-cycle.is-showing {
    opacity: 1;
  }

  /* Bio overlay is hover-driven, which doesn't exist on touch. Show
     it at the bottom of the card as a subtle gradient caption. */
  .pro-team-bio {
    position: static;
    opacity: 1;
    background: transparent;
    padding: 14px 18px 0;
  }
  .pro-team-bio p {
    color: #555;
    font-size: 13px;
  }

  /* Nav buttons on the feature carousel get tight on narrow screens
     and were overlapping the first/last card. */
  .feature-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* Users who opt in to reduced motion: drop every looping animation
   and transform transition. Content remains fully legible. */
@media (prefers-reduced-motion: reduce) {
  .particlehead {
    display: none !important;
  }
  .typed-words,
  .scroll-indicator,
  .feature-anim-icon > i,
  .feature-anim-ring,
  .feature-anim-pulse,
  .feature-anim-orbit,
  .team-video-overlay {
    animation: none !important;
  }
  .pro-team-card,
  .pro-team-photo img,
  .feature-slide-card,
  .app-download-btn,
  .feature-nav-btn {
    transition: none !important;
  }
  .team-video-overlay {
    opacity: 0 !important;
  }
}