/* Custom CSS fixes for LION landing page */
/* Fixes gray box artifacts and ensures proper card styling */

/* ============================================ */
/* KEY FEATURES SECTION FIXES                  */
/* ============================================ */

.key-features-card,
.key-features-card-content {
  background-color: transparent !important;
}

.key-features-card-content {
  background-color: #11001a !important;
  background-image: url("https://cdn.prod.website-files.com/67f6b4446c55762b083a612b/67f959838ea0f821e0bc88c7_Key%20Features%20Card%20Top%20bg.jpg") !important;
  background-position: 50% 0 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.key-features-card-image-wrapper {
  background: transparent !important;
}

.key-features-card-typography {
  background: transparent !important;
}

.key-features-card-title,
.key-features-card-description-text {
  background: transparent !important;
}

/* Fix key-features grid stretching */
.key-features-top-grid,
.key-features-top-middle-grid {
  align-items: stretch !important;
}

.key-features-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.key-features-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Remove opacity transitions causing visibility issues */
.section.key-features [style*="opacity:0"],
.section.key-features [style*="opacity: 0"] {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================ */
/* CORE FEATURES / INDUSTRIES SECTION FIXES    */
/* ============================================ */

.core-features-card {
  background-image: linear-gradient(#fff0, #ffffff1a) !important;
}

.core-features-card-content {
  background-color: #11001a !important;
  background-image: url("https://cdn.prod.website-files.com/67f6b4446c55762b083a612b/68092aa272e08029e00ca2c7_Core%20Features%20Card%20Bg.jpg") !important;
  background-position: 50% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  min-height: 100% !important;
  height: 100% !important;
}

.core-features-card-bottom-content {
  background: transparent !important;
}

.core-features-card-description-text {
  background: transparent !important;
  color: var(--gray) !important;
}

.core-features-grid {
  align-items: stretch !important;
}

.core-features-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.core-features-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.core-features-card-bottom-content {
  flex: 1 !important;
}

/* Remove opacity transitions */
.section.core-features .section-title-wrapper,
.section.core-features .core-features-content {
  opacity: 1 !important;
  transform: none !important;
}

.core-features-card * {
  background-color: transparent;
}

.core-features-card-top-content,
.core-features-card-line {
  background-color: transparent;
}

/* ============================================ */
/* GLOBAL FIXES FOR ALL SECTIONS              */
/* ============================================ */

/* Ensure no gray text selection artifacts */
::selection {
  background-color: rgba(163, 82, 204, 0.3);
  color: white;
}

/* ============================================ */
/* SMOOTH SCROLL ANIMATIONS FIX                 */
/* Make Webflow scroll animations feel smooth   */
/* rather than "jumping at the face"            */
/* ============================================ */

/* 
 * The problem: Webflow animations snap elements from opacity:0 to 1
 * and translate3d(0, 150%, 0) to normal position instantly.
 * The solution: Add smooth CSS transitions so the browser animates
 * these property changes gracefully.
 */

/* Global transition for all animated elements */
[data-w-id] {
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Stagger delays for sequential section animations */
.section-title-wrapper[data-w-id] {
  transition-delay: 0.08s !important;
}

.section-description-text {
  transition-delay: 0.15s !important;
}

/* Process cards stagger */
.easy-process-card:nth-child(1) {
  transition-delay: 0.08s !important;
}

.easy-process-card:nth-child(2) {
  transition-delay: 0.15s !important;
}

.easy-process-card:nth-child(3) {
  transition-delay: 0.22s !important;
}

/* Pricing cards stagger */
.pricing-card:nth-child(1) {
  transition-delay: 0.08s !important;
}

.pricing-card:nth-child(2) {
  transition-delay: 0.15s !important;
}

.pricing-card:nth-child(3) {
  transition-delay: 0.22s !important;
}

/* Key features cards stagger */
.key-features-top-content {
  transition-delay: 0.08s !important;
}

.key-features-middle-content {
  transition-delay: 0.15s !important;
}

.key-features-bottom-content {
  transition-delay: 0.22s !important;
}

/* Benefits section */
.benefits-content {
  transition-delay: 0.1s !important;
}

/* Testimonials */
.testimonials-bottom-content {
  transition-delay: 0.15s !important;
}

/* FAQ section */
.faq-main {
  transition-delay: 0.08s !important;
}

/* Blog section */
.blog-content {
  transition-delay: 0.1s !important;
}

/* \n * Note on Webflow's extreme translate transforms:\n * Elements use inline styles like translate3d(0, 150%, 0) which\n * cannot be directly overridden via CSS selectors. However, the\n * 0.8s transition properties above ensure these transforms animate\n * smoothly when Webflow's JS changes them to the final positions.\n */

/* Gallery images in About App section */
.about-app-gallery-image {
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.about-app-gallery-single.left .about-app-gallery-image {
  transition-delay: 0.08s !important;
}

.about-app-gallery-single.middle .about-app-gallery-image {
  transition-delay: 0.15s !important;
}

.about-app-gallery-single.right .about-app-gallery-image {
  transition-delay: 0.22s !important;
}

/* Core features / Industries cards with staggered animation */
.core-features-card {
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.core-features-grid .core-features-card:nth-child(1) {
  transition-delay: 0.03s !important;
}

.core-features-grid .core-features-card:nth-child(2) {
  transition-delay: 0.08s !important;
}

.core-features-grid .core-features-card:nth-child(3) {
  transition-delay: 0.12s !important;
}

.core-features-grid .core-features-card:nth-child(4) {
  transition-delay: 0.15s !important;
}

.core-features-grid .core-features-card:nth-child(5) {
  transition-delay: 0.18s !important;
}

.core-features-grid .core-features-card:nth-child(6) {
  transition-delay: 0.22s !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

  [data-w-id],
  .about-app-gallery-image,
  .core-features-card {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}

/* Ensure all card typography has transparent backgrounds */
.card-typography,
.card-description-text,
[class*="-card-typography"],
[class*="-card-description"] {
  background: transparent !important;
}

/* ============================================ */
/* MISSION & VISION SECTION FIXES              */
/* ============================================ */

/* Fix the mission-vision-content to use flexbox layout instead of relying on absolute positioning */
.mission-vision-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 40px !important;
  padding: 40px !important;
  min-height: 400px !important;
}

/* Fix for the animated mission-vision-image - make it part of flex flow */
.mission-vision-image {
  position: relative !important;
  inset: unset !important;
  min-height: 380px !important;
  height: auto !important;
  display: block !important;
  flex-shrink: 0 !important;
  max-width: 400px !important;
  width: 100% !important;
}

/* Typography should take remaining space */
.mission-vision-typography {
  flex: 1 !important;
  max-width: none !important;
  margin-left: 0 !important;
}

/* Make the wrapper visible */
.mission-vision-wrapper {
  overflow: visible !important;
}

/* Responsive fix for tablets and mobile */
@media screen and (max-width: 991px) {
  .mission-vision-content {
    flex-direction: column !important;
    padding: 30px !important;
    gap: 30px !important;
  }

  .mission-vision-image {
    max-width: 100% !important;
    min-height: 350px !important;
    order: -1 !important;
    /* Image appears first on mobile */
  }

  .mission-vision-typography {
    width: 100% !important;
  }
}

/* ============================================ */
/* HERO SECTION FIXES & ENHANCEMENTS          */
/* ============================================ */

.section.banner {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* CRITICAL: Force hero content visibility */
.section.banner .banner-content {
  position: relative !important;
  z-index: 10 !important;
}

.section.banner .banner-top-content {
  position: relative !important;
  z-index: 10 !important;
}

.section.banner .banner-typography,
.section.banner .hero-text-wrap,
.section.banner .banner-title-description,
.section.banner .translation-ui-card,
.section.banner .hero-visual-col,
.section.banner .processing-card {
  opacity: 1 !important;
  visibility: visible !important;
}

.section.banner .hero-grid {
  position: relative !important;
  z-index: 5 !important;
}

/* Vertically Stacked Hero Layout */
.section.banner .hero-stacked {
  position: relative !important;
  z-index: 5 !important;
  padding-top: 40px;
  padding-bottom: 60px;
}

.section.banner .hero-demo-block {
  position: relative !important;
  z-index: 5 !important;
}

.section.banner .demo-dashboard {
  position: relative !important;
  z-index: 5 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Responsive adjustments for stacked hero */
@media (max-width: 768px) {
  .section.banner .hero-stacked {
    gap: 40px !important;
    padding-top: 20px;
  }

  .section.banner .demo-dashboard>div:last-child {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure background video stays behind content */
.section.banner .banner-background-video {
  z-index: 0 !important;
}

.section.banner .banner-background-video-shape {
  z-index: 1 !important;
}

.hero-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 80px !important;
  align-items: center !important;
}

@media screen and (max-width: 991px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 60px !important;
    text-align: center !important;
  }

  .banner-typography {
    align-items: center !important;
    max-width: 100% !important;
  }

  .banner-description-text {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .translation-ui-card {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}

/* Animations */
@keyframes hOrb1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(50px, 30px) scale(1.1);
  }
}

@keyframes hOrb2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1.1);
  }

  50% {
    transform: translate(-40px, -20px) scale(0.9);
  }
}

@keyframes hPulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Globe Rotation Effect */
.globe-svg {
  animation: globeRotate 20s linear infinite;
}

@keyframes globeRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Glassmorphism Hover */
.upload-zone:hover {
  border-color: rgba(163, 82, 204, 0.4) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.language-selector>div:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================ */
/* START FREE TRIAL BUTTON - HERO SECTION ONLY  */
/* Premium dark button - targeted specifically  */
/* ============================================ */

/* Target the exact .primary-button in the hero banner */
.section.banner .primary-button.w-inline-block {
  /* Dark/black gradient background */
  background: linear-gradient(135deg,
      #050008 0%,
      #0a0014 50%,
      #050008 100%) !important;

  /* Slightly larger, more powerful sizing */
  padding: 14px 28px !important;

  /* Subtle purple glow for distinction */
  box-shadow:
    0 0 20px rgba(163, 82, 204, 0.3),
    0 0 40px rgba(124, 58, 237, 0.12),
    0 2px 15px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  /* Purple accent border */
  border: 1px solid rgba(163, 82, 204, 0.35) !important;
  border-radius: 50px !important;

  /* Smooth transitions */
  transition: all 0.3s ease !important;
  animation: ctaGlow 3s ease-in-out infinite !important;
}

/* Inner text styling for elegance */
.section.banner .primary-button.w-inline-block .primary-button-text-block {
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* Hover state */
.section.banner .primary-button.w-inline-block:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg,
      #0a0014 0%,
      #1a0a2e 50%,
      #0a0014 100%) !important;
  box-shadow:
    0 0 30px rgba(163, 82, 204, 0.45),
    0 0 60px rgba(124, 58, 237, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(163, 82, 204, 0.5) !important;
}

/* Override banner styles for .is-white button */
.section.banner .primary-button.is-white.w-inline-block {
  background: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  animation: none !important;
  box-shadow:
    inset 0 -4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 8px rgba(0, 0, 0, 0.02),
    0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

.section.banner .primary-button.is-white.w-inline-block:hover {
  background: #f5f0fa !important;
  border-color: rgba(163, 82, 204, 0.25) !important;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 -1px 8px rgba(0, 0, 0, 0.02),
    0 4px 20px rgba(163, 82, 204, 0.12) !important;
}

.section.banner .primary-button.is-white .primary-button-text-block {
  color: #0a0014 !important;
}

/* Override banner styles for .is-black button */
.section.banner .primary-button.is-black.w-inline-block {
  background: #0a0014 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  animation: none !important;
  box-shadow:
    inset 0 -4px 12px rgba(163, 82, 204, 0.3),
    inset 0 1px 8px rgba(163, 82, 204, 0.1),
    0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

.section.banner .primary-button.is-black.w-inline-block:hover {
  background: #0a0014 !important;
  border-color: rgba(163, 82, 204, 0.3) !important;
  box-shadow:
    inset 0 4px 12px rgba(163, 82, 204, 0.3),
    inset 0 -1px 8px rgba(163, 82, 204, 0.1),
    0 4px 20px rgba(163, 82, 204, 0.2) !important;
}

.section.banner .primary-button.is-black .primary-button-text-block {
  color: #fff !important;
}

/* ============================================ */
/* DASHBOARD MOCKUP CONTAINMENT                */
/* ============================================ */

.banner-image-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.banner-image-card .banner-image {
  overflow: hidden !important;
  position: relative !important;
}

.banner-image-wrapper {
  overflow: visible !important;
}

/* Push AI-Powered Document Translation badge down from nav */
.section.banner .subtitle-wrapper {
  margin-top: 32px !important;
}

/* Extra space between description and Get Started button */
.section.banner .banner-title-description {
  margin-bottom: 48px !important;
}

/* Reduce space between Get Started button and demo */
.section.banner .banner-top-content {
  margin-bottom: 20px !important;
}

.section.banner .banner-bottom-content {
  margin-top: 0 !important;
}

/* ============================================ */
/* PRICING CARDS SYMMETRY FIX                  */
/* Equal height cards with buttons aligned     */
/* ============================================ */

/* Widen the pricing section container so 4 cards breathe */
.section.pricing .container,
.section.pricing-main-section .container {
  max-width: 1440px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* 4-column grid for Free + Starter + Pro + Growth */
.pricing-grid {
  align-items: stretch !important;
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  grid-column-gap: 20px !important;
}

/* Slightly tighter internal padding so content has more room */
.pricing-card-content {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.pricing-features-wrapper {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.pricing-card-top-content {
  margin-bottom: 24px !important;
}

.pricing-card-icon-wrapper {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Tablet: 2x2 grid */
@media screen and (max-width: 991px) {

  .section.pricing .container,
  .section.pricing-main-section .container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-row-gap: 24px !important;
  }

  .pricing-features-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .pricing-card-icon-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Mobile: single column */
@media screen and (max-width: 767px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Each wrapper in the grid must fill its cell */
.pricing-collection-list-wrapper,
.pricing-collection-list,
.pricing-collection-item {
  height: 100% !important;
}

/* Card itself fills the full height */
.pricing-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card content grows to fill */
.pricing-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Features wrapper grows to push button down */
.pricing-features-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Features list stays at top, button goes to bottom */
.pricing-features-wrapper .pricing-button-wrapper {
  margin-top: auto !important;
}

/* ============================================ */
/* HIDE CART ICON FROM NAVBAR                  */
/* ============================================ */

.navbar-cart,
.w-commerce-commercecartwrapper {
  display: none !important;
}

/* Pulsing glow animation */
@keyframes ctaGlow {

  0%,
  100% {
    box-shadow:
      0 0 20px rgba(163, 82, 204, 0.3),
      0 0 40px rgba(124, 58, 237, 0.12),
      0 2px 15px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  50% {
    box-shadow:
      0 0 28px rgba(163, 82, 204, 0.4),
      0 0 55px rgba(124, 58, 237, 0.18),
      0 2px 15px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

/* ============================================ */
/* TEAM PAGE FIXES                             */
/* ============================================ */

/* ============================================ */
/* TEAM HERO SECTION                           */
/* Full-width hero with background video,      */
/* centered text, stats bar, dual buttons      */
/* ============================================ */

.section.banner.team-hero {
  min-height: 85vh !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.section.banner.team-hero .banner-typography {
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.section.banner.team-hero .banner-title {
  text-align: center !important;
}

.section.banner.team-hero .banner-description-text {
  text-align: center !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* Hero stats bar */
.team-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
}

@media screen and (max-width: 768px) {
  .section.banner.team-hero {
    min-height: 70vh !important;
  }

  .section.banner.team-hero .banner-typography {
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }

  .team-hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media screen and (max-width: 480px) {
  .section.banner.team-hero {
    min-height: auto !important;
  }

  .team-hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}

/* ============================================ */
/* WHITE BUTTON VARIANT (GLOBAL)               */
/* Used in hero and CTA sections               */
/* ============================================ */

.primary-button.is-white.w-inline-block {
  background-color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    inset 0 -4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 8px rgba(0, 0, 0, 0.02),
    0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

.primary-button.is-white.w-inline-block:hover {
  background-color: #f5f0fa !important;
  border-color: rgba(163, 82, 204, 0.25) !important;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 -1px 8px rgba(0, 0, 0, 0.02),
    0 4px 20px rgba(163, 82, 204, 0.12) !important;
}

.primary-button.is-white .primary-button-text-block {
  color: #0a0014 !important;
}

/* ============================================ */
/* BLACK BUTTON VARIANT (GLOBAL)               */
/* Used in hero and CTA sections               */
/* ============================================ */

.primary-button.is-black.w-inline-block {
  background-color: #0a0014 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    inset 0 -4px 12px rgba(163, 82, 204, 0.3),
    inset 0 1px 8px rgba(163, 82, 204, 0.1),
    0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

.primary-button.is-black.w-inline-block:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(163, 82, 204, 0.3) !important;
  box-shadow:
    inset 0 4px 12px rgba(163, 82, 204, 0.3),
    inset 0 -1px 8px rgba(163, 82, 204, 0.1),
    0 4px 20px rgba(163, 82, 204, 0.2) !important;
}

.primary-button.is-black .primary-button-text-block {
  color: #fff !important;
}

/* Force team section visibility */
.section.our-experts .team-member-content {
  opacity: 1 !important;
  transform: none !important;
}

/* Team member cards hover effect */
.team-member-single {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.team-member-single:hover {
  transform: translateY(-6px) !important;
}

/* Team member image hover zoom */
.team-member-image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.team-member-single:hover .team-member-image {
  transform: scale(1.05) !important;
}

/* Ensure Our Story animated panel renders correctly */
.section.mission-vision .mission-vision-image {
  min-height: 380px !important;
}

/* ============================================ */
/* TEAM PAGE - NEW STORYTELLING SECTIONS        */
/* ============================================ */

/* Force visibility on all new team page sections */
.section.core-features .section-title-wrapper,
.section.core-features .core-features-content,
.section.easy-process .section-title-wrapper,
.section.easy-process .easy-process-content,
.section.benefits .section-title-wrapper,
.section.highlights .highlights-ticker {
  opacity: 1 !important;
  transform: none !important;
}

/* Pipeline section responsive */
@media screen and (max-width: 768px) {
  .pipeline-grid {
    grid-template-columns: 1fr !important;
  }

  .culture-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Easy process cards on team page - force visibility */
.section.easy-process .easy-process-card {
  opacity: 1 !important;
  transform: none !important;
}

/* Quote section styling */
.section blockquote {
  border: none !important;
  padding: 0 !important;
}

/* Highlights ticker animation fix for team page */
.section.highlights .ticker {
  overflow: hidden !important;
}

.section.highlights .inner-highlights-ticker {
  display: flex !important;
  animation: ticker-scroll 20s linear infinite !important;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* CTA section on team page */
.team-cta-section {
  background: linear-gradient(135deg,
      rgba(163, 82, 204, 0.08),
      rgba(124, 58, 237, 0.04)) !important;
  border-top: 1px solid rgba(163, 82, 204, 0.1);
  border-bottom: 1px solid rgba(163, 82, 204, 0.1);
}

/* CTA buttons row responsive */
@media screen and (max-width: 480px) {
  .cta-buttons-row {
    flex-direction: column !important;
    align-items: center !important;
  }

  .cta-buttons-row .primary-button-wrapper {
    width: 100% !important;
  }

  .cta-buttons-row .primary-button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Stats bar responsive */
@media screen and (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media screen and (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Expertise circles responsive */
@media screen and (max-width: 768px) {
  .expertise-circles {
    gap: 16px !important;
  }

  .expertise-circle {
    width: 140px !important;
    height: 140px !important;
  }
}

/* Expertise circle hover */
.expertise-circle:hover {
  border-color: rgba(163, 82, 204, 0.35) !important;
  background: linear-gradient(135deg,
      rgba(163, 82, 204, 0.1),
      rgba(124, 58, 237, 0.05)) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(163, 82, 204, 0.15) !important;
}

/* ============================================ */
/* BENEFITS SLIDER - CARD & ANIMATION STYLING  */
/* ============================================ */

/* Outer card — gradient border wrapper (same pattern as innovative-features-card) */
.benefits-single-card {
  background-image: linear-gradient(160deg,
      rgba(163, 82, 204, 0.24) 0%,
      rgba(255, 255, 255, 0.1) 40%,
      rgba(255, 255, 255, 0.06) 60%,
      rgba(163, 82, 204, 0.18) 100%) !important;
  border-radius: 16px !important;
  padding: 1px !important;
}

/* Inner card surface — rich atmospheric background */
.benefits-single-card-grid {
  background:
    radial-gradient(ellipse at 20% 30%,
      rgba(163, 82, 204, 0.08) 0%,
      transparent 50%),
    radial-gradient(ellipse at 80% 70%,
      rgba(124, 58, 237, 0.06) 0%,
      transparent 50%),
    linear-gradient(160deg, #0f001a 0%, #0a0014 50%, #080012 100%) !important;
  border-radius: 15px !important;
}

/* Animation panel — clean inset within the card */
.benefits-single-card-image-wrap {
  border-radius: 15px !important;
  overflow: hidden !important;
  min-height: 280px !important;
}

.benefits-single-card-image-wrap>div {
  min-height: 280px !important;
}

/* Typography side — remove its own gradient border wrapper since the card provides it */
.benefits-single-card-typography {
  background-image: none !important;
  padding: 0 !important;
}

.benefits-single-card-typography-content {
  background-color: transparent !important;
  border-radius: 0 !important;
}

@media screen and (max-width: 991px) {
  .benefits-single-card-image-wrap {
    min-height: 240px !important;
  }

  .benefits-single-card-image-wrap>div {
    min-height: 240px !important;
  }
}

@media screen and (max-width: 479px) {
  .benefits-single-card-image-wrap {
    min-height: 200px !important;
  }

  .benefits-single-card-image-wrap>div {
    min-height: 200px !important;
    padding: 16px !important;
  }
}

/* ============================================ */
/* FOOTER FORM FIXES                           */
/* ============================================ */

/* ---- Footer Email Form ---- */
.footer-form-single {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 310px !important;
}

.footer-form-text-field {
  flex: 1 !important;
  min-width: 0 !important;
  height: 44px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: white !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  transition: border-color 0.2s ease !important;
}

/* Fix browser autofill white background */
.footer-form-text-field:-webkit-autofill,
.footer-form-text-field:-webkit-autofill:hover,
.footer-form-text-field:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a0836 inset !important;
  -webkit-text-fill-color: white !important;
  border-color: rgba(138, 92, 246, 0.6) !important;
}

.footer-form-text-field:focus {
  outline: none !important;
  border-color: rgba(138, 92, 246, 0.7) !important;
}

.footer-form-text-field::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Submit button — sits beside the input */
.footer-form-submit-button {
  position: static !important;
  flex-shrink: 0 !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 50px !important;
  background: rgba(167, 139, 250, 0.2) !important;
  color: rgba(220, 200, 255, 0.95) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(4px) !important;
  letter-spacing: 0.02em !important;
}

.footer-form-submit-button:hover {
  background: rgba(167, 139, 250, 0.35) !important;
  border-color: rgba(167, 139, 250, 0.7) !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
  transform: translateY(-1px) !important;
}

.footer-form-submit-button.w-button {
  line-height: 44px !important;
}

@media screen and (max-width: 479px) {
  .footer-form-single {
    gap: 6px !important;
  }

  .footer-form-text-field {
    height: 40px !important;
    font-size: 12px !important;
  }

  .footer-form-submit-button {
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }
}

/* ============================================ */
/* NAVIGATION HOVER ANIMATION                  */
/* Replaces Webflow IX2 hover interaction      */
/* ============================================ */

/* Hide the hover line by default */
.nav-link-hover-line {
  transform: scaleX(0);
  transform-origin: center;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.35s ease;
  opacity: 0;
}

/* Show on hover of the parent nav-link-single */
.nav-link-single:hover .nav-link-hover-line {
  transform: scaleX(1);
  opacity: 1;
}

/* Also show for the current/active page link */
.nav-link-single:has(.w--current) .nav-link-hover-line {
  transform: scaleX(1);
  opacity: 1;
}

/* Nav link text subtle color shift on hover */
.nav-link-single:hover .nav-link {
  color: #d4a5f0;
}

/* Smooth transition for nav link color */
.nav-link {
  transition: color 0.3s ease !important;
}

/* ============================================ */
/* PRIMARY BUTTON TEXT-SWAP HOVER EFFECT        */
/* Replaces Webflow IX2 scroll-up text swap    */
/* ============================================ */

/* Container setup for the text swap */
.primary-button {
  overflow: hidden !important;
  position: relative !important;
}

/* Default text - visible, slides up on hover */
.primary-button-text-block {
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Absolute text - positioned below, slides up on hover */
.primary-button-text-block.is-text-absolute {
  display: flex !important;
  position: absolute !important;
  inset: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* On hover, slide default text up and replacement text into view */
.primary-button:hover .primary-button-text-block:not(.is-text-absolute) {
  transform: translateY(-100%);
}

.primary-button:hover .primary-button-text-block.is-text-absolute {
  transform: translateY(0);
}

/* ============================================ */
/* TEAM MEMBER SOCIAL OVERLAY ON HOVER          */
/* Replaces Webflow IX2 slide-up interaction   */
/* ============================================ */

/* The image wrapper needs overflow hidden and relative positioning */
.team-member-image-wrapper {
  position: relative !important;
  overflow: hidden !important;
}

/* Social overlay - positioned below by default, slides up on hover */
.team-member-social-media-wrapper {
  transform: translateY(100%) !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Slide up on hover of the image wrapper */
.team-member-image-wrapper:hover .team-member-social-media-wrapper {
  transform: translateY(0) !important;
}

/* ============================================ */
/* BENEFITS CARD TYPOGRAPHY REVEAL ON HOVER     */
/* Replaces Webflow IX2 slide-up reveal        */
/* ============================================ */

/* The benefits card needs overflow hidden for the slide effect */
.benefits-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Typography starts hidden below - override the inline translate3d */
.benefits-card-typography {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.5s ease !important;
}

/* ============================================ */
/* FOOTER SOCIAL LINKS HOVER EFFECT             */
/* ============================================ */

.footer-social-link-block {
  transition: color 0.3s ease, transform 0.3s ease !important;
}

.footer-social-link-block:hover {
  color: #d4a5f0 !important;
  transform: translateX(4px);
}

/* Arrow slides right on hover */
.footer-social-link-block-arrow {
  transition: transform 0.3s ease !important;
}

.footer-social-link-block:hover .footer-social-link-block-arrow {
  transform: translateX(6px);
}

/* ============================================ */
/* FOOTER MENU TEXT LINKS HOVER EFFECT          */
/* ============================================ */

.footer-menu-text-link {
  transition: color 0.3s ease !important;
}

.footer-menu-text-link:hover {
  color: #d4a5f0 !important;
}

/* ============================================ */
/* SUPPORTED LANGUAGES SECTION                  */
/* ============================================ */

.supported-languages {
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
  padding-bottom: 100px;
}

.languages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 50px;
}

.language-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: default;
}

.language-card:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.language-card-name {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.language-card-native {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

.more-languages-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2)) !important;
  border: 1px dashed rgba(168, 85, 247, 0.4) !important;
}

.more-languages-count {
  font-size: 2rem;
  font-weight: 800;
  color: #a855f7;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.more-languages-text {
  color: #fff;
  font-weight: 500;
  margin-top: 8px;
}

/* Language Search Styles */
.languages-search-wrapper {
  max-width: 500px;
  margin: 40px auto 40px;
  position: relative;
  z-index: 10;
}

.languages-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 20px 14px 45px;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(10px);
}

.languages-search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

.languages-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  font-size: 20px;
}

.languages-grid {
  min-height: 200px;
  transition: all 0.5s ease;
}

[data-hidden="true"] {
  display: none !important;
}
/* ============================================ */
/* NEW MOBILE MENU (SELENEX STYLE) FIXES       */
/* ============================================ */

@media screen and (max-width: 990px) {

  /* Ensure the nav container spans full width to allow flexbox spacing */
  .navbar-wrapper {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
  }

  /* Style the menu toggle button like SeleneX (Glassy circle with hamburger) */
  .menu-button.w-nav-button {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 44px !important;
      height: 44px !important;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      cursor: pointer !important;
      padding: 0 !important;
      margin-left: 12px !important;
      transition: all 0.3s ease !important;
      z-index: 9999 !important;
  }

  /* Remove default webflow background overrides */
  .menu-button.w-nav-button:hover,
  .menu-button.w-nav-button.w--open {
      background: rgba(163, 82, 204, 0.15) !important;
      border-color: rgba(163, 82, 204, 0.3) !important;
  }

  /* Hide the webflow icon span if it exists */
  .w-icon-nav-menu {
      display: none !important;
  }

  /* Hamburger Icon Lines */
  .hamburger-menu-icon {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      width: 20px !important;
      height: 20px !important;
      padding: 0 !important;
  }

  .hamburger-line {
      width: 18px !important;
      height: 1.5px !important;
      background-color: #fff !important;
      border-radius: 2px !important;
      transition: transform 0.3s ease, opacity 0.3s ease !important;
      transform-origin: center !important;
  }

  /* Animate to X when open */
  .menu-button.w--open .hamburger-line.line-1 {
      transform: translateY(6.5px) rotate(45deg) !important;
  }
  .menu-button.w--open .hamburger-line.line-2 {
      opacity: 0 !important;
  }
  .menu-button.w--open .hamburger-line.line-3 {
      transform: translateY(-6.5px) rotate(-45deg) !important;
  }

  /* Fix navigation menu (dropdown popup) */
  .nav-menu.w-nav-menu {
      display: none !important; /* Hide by default */
      position: absolute !important;
      top: calc(100% + 15px) !important;
      right: 20px !important;
      left: 20px !important;
      max-height: calc(100vh - 100px) !important;
      overflow-y: auto !important;
      background: rgba(8, 0, 18, 0.85) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 16px !important;
      padding: 24px 20px !important;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(163, 82, 204, 0.1) !important;
      z-index: 9998 !important;
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
      transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
      flex-direction: column !important;
      gap: 16px !important;
  }

  /* Custom Scrollbar for Mobile Menu (SeleneX exact match) */
  .nav-menu.w-nav-menu::-webkit-scrollbar {
      width: 4px;
  }
  .nav-menu.w-nav-menu::-webkit-scrollbar-track {
      background: transparent;
  }
  .nav-menu.w-nav-menu::-webkit-scrollbar-thumb {
      background: rgba(163, 82, 204, 0.35); /* Subtle purple matching dark background */
      border-radius: 4px;
  }
  .nav-menu.w-nav-menu::-webkit-scrollbar-thumb:hover {
      background: rgba(163, 82, 204, 0.6);
  }

  /* Show the menu smoothly when script adds this class */
  .nav-menu.nav-menu-open {
      display: flex !important;
      opacity: 1 !important;
      transform: translateY(0) scale(1) !important;
  }

  /* Re-style individual nav links in mobile view */
  .nav-link-single {
      margin: 0 !important;
      width: 100% !important;
  }

  .nav-link.w-nav-link {
      font-size: 1.1rem !important;
      font-weight: 500 !important;
      color: rgba(255, 255, 255, 0.85) !important;
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      text-align: left !important;
      padding: 12px 16px !important;
      border-radius: 8px !important;
      background: transparent !important;
      transition: all 0.2s ease !important;
  }

  .nav-mobile-icon {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      opacity: 0.7 !important;
      color: #a78bfa !important;
  }

  .nav-link.w-nav-link:hover {
      background: rgba(255, 255, 255, 0.05) !important;
      color: #fff !important;
  }

  .nav-link.w-nav-link:hover .nav-mobile-icon {
      opacity: 1 !important;
      color: #c4b5fd !important;
  }

  /* Hide the hover line in mobile view since we switch to block styling */
  .nav-link-hover-line {
      display: none !important;
  }

  .primary-button-wrapper.desktop {
      display: none !important;
  }
}

/* Also ensure .nav-menu does not stretch/overlap oddly when hidden on Desktop */
@media screen and (min-width: 991px) {
  .nav-menu.w-nav-menu {
      display: flex !important;
  }
  
  /* Hide the dynamically injected mobile icons on desktop */
  .nav-mobile-icon {
      display: none !important;
  }
  
  /* Reduce spacing on narrow desktop views to avoid overflow */
  @media screen and (max-width: 1100px) {
    .nav-menu {
        grid-column-gap: 8px !important;
    }
    .nav-link.w-nav-link {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 14px !important;
    }
  }
}