.elementor-kit-111{--e-global-color-primary:#1B3A5C;--e-global-color-secondary:#0A1628;--e-global-color-text:#2B5F8E;--e-global-color-accent:#00B4D8;--e-global-color-db8f471:#F77F00;--e-global-color-8323063:#111827;--e-global-color-d46ba07:#374151;--e-global-color-df60ead:#9CA3AF;--e-global-color-fc7fdf9:#E5E7EB;--e-global-color-f6dd71b:#F3F4F6;--e-global-color-488bfc9:#FFFFFF;--e-global-color-17a9198:#10B981;--e-global-color-17a71c6:#EF4444;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"JetBrains";--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;}.elementor-kit-111 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════════
   FUS ALIANZ — Custom CSS for Hello Elementor Theme
   WordPress + Elementor Pro Implementation

   HOW TO USE:
   1. Go to Elementor > Custom CSS (or Appearance > Customize > Additional CSS)
   2. Paste this entire file
   3. In Elementor editor, assign these classes via Advanced > CSS Classes
   4. Each section below maps to a specific part of the mockup
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   1. CSS VARIABLES (Global Design Tokens)
   Add to: Appearance > Customize > Additional CSS
   Also configure in: Elementor > Site Settings > Global Colors/Fonts
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --fa-primary-dark: #0A1628;
  --fa-primary: #1B3A5C;
  --fa-primary-light: #2B5F8E;
  --fa-accent: #00B4D8;
  --fa-accent-hover: #0096b7;
  --fa-accent-warm: #F77F00;

  /* Neutrals */
  --fa-neutral-900: #111827;
  --fa-neutral-700: #374151;
  --fa-neutral-400: #9CA3AF;
  --fa-neutral-200: #E5E7EB;
  --fa-neutral-100: #F3F4F6;
  --fa-white: #FFFFFF;

  /* Status */
  --fa-success: #10B981;
  --fa-error: #EF4444;

  /* Typography */
  --fa-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fa-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --fa-container-max: 1280px;
  --fa-section-padding: 100px;
  --fa-section-padding-mobile: 60px;

  /* Effects */
  --fa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --fa-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --fa-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --fa-shadow-accent: 0 6px 20px rgba(0, 180, 216, 0.35);
  --fa-radius-sm: 4px;
  --fa-radius-md: 8px;
  --fa-radius-lg: 16px;
  --fa-transition: all 0.2s ease;
}


/* ─────────────────────────────────────────────────────────────────
   2. GLOBAL RESETS & BASE STYLES
   Applied automatically to Hello Elementor
   ───────────────────────────────────────────────────────────────── */
body {
  font-family: var(--fa-font-primary) !important;
  color: var(--fa-neutral-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Elementor defaults */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--fa-container-max);
}

.elementor-widget-text-editor {
  font-family: var(--fa-font-primary);
  line-height: 1.7;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }


/* ─────────────────────────────────────────────────────────────────
   3. TOP BAR
   Elementor: Section > Inner Section
   CSS Class: fa-top-bar
   ───────────────────────────────────────────────────────────────── */
.fa-top-bar {
  background: var(--fa-primary-dark) !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fa-top-bar .elementor-widget-text-editor,
.fa-top-bar .elementor-widget-text-editor p {
  color: var(--fa-neutral-400) !important;
  font-size: 12px !important;
  margin: 0 !important;
}
.fa-top-bar a {
  color: var(--fa-accent) !important;
  text-decoration: none;
  font-weight: 500;
}
.fa-top-bar a:hover { text-decoration: underline; }
.fa-top-bar .elementor-icon-list-text {
  color: var(--fa-neutral-400) !important;
  font-size: 13px !important;
}
.fa-top-bar .elementor-icon-list-icon i {
  color: var(--fa-accent) !important;
  font-size: 12px !important;
}

@media (max-width: 767px) {
  .fa-top-bar { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────────
   4. NAVBAR / HEADER
   Elementor: Theme Builder > Header template
   CSS Class: fa-navbar
   ───────────────────────────────────────────────────────────────── */
.fa-navbar {
  background: var(--fa-white) !important;


  transition: var(--fa-transition);
}
.fa-navbar.elementor-sticky--effects {
  box-shadow: var(--fa-shadow-md) !important;
}

/* Logo */
.fa-navbar .elementor-widget-theme-site-logo img,
.fa-navbar .elementor-widget-image img {
  max-height: 52px !important;
  width: auto !important;
}

/* Logo text next to image */
.fa-logo-text {
  font-family: var(--fa-font-primary) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--fa-primary) !important;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
}
.fa-logo-text sup {
  font-size: 9px;
  color: var(--fa-accent);
}
.fa-logo-subtitle {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--fa-neutral-400) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Nav menu items */
.fa-navbar .elementor-nav-menu a.elementor-item {
  font-family: var(--fa-font-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--fa-neutral-700) !important;
  padding: 8px 14px !important;
  border-radius: var(--fa-radius-sm);
  transition: var(--fa-transition);
}
.fa-navbar .elementor-nav-menu a.elementor-item:hover,
.fa-navbar .elementor-nav-menu a.elementor-item.elementor-item-active {
  color: var(--fa-accent) !important;
  background: rgba(0, 180, 216, 0.06);
}
/* Active indicator */
.fa-navbar .elementor-nav-menu a.elementor-item-active {
  font-weight: 600 !important;
}

/* Dropdown submenu */
.fa-navbar .elementor-nav-menu--dropdown a.elementor-item {
  font-size: 13px !important;
  padding: 10px 20px !important;
}
.fa-navbar .elementor-nav-menu--dropdown {
  background: var(--fa-white) !important;
  border: 1px solid var(--fa-neutral-200) !important;
  border-radius: var(--fa-radius-md) !important;
  box-shadow: var(--fa-shadow-lg) !important;
  margin-top: 8px !important;
}

/* Mobile hamburger */
.fa-navbar .elementor-menu-toggle {
  color: var(--fa-primary) !important;
}


/* ─────────────────────────────────────────────────────────────────
   5. BUTTONS — Global Classes
   Apply via Elementor button widget > Advanced > CSS Classes
   ───────────────────────────────────────────────────────────────── */

/* Primary CTA Button (cyan) */
.fa-btn-primary .elementor-button {
  background-color: var(--fa-accent) !important;
  color: var(--fa-white) !important;
  border-radius: 6px !important;
  padding: 14px 28px !important;
  font-family: var(--fa-font-primary) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: none !important;
  transition: var(--fa-transition) !important;
  letter-spacing: 0;
}
.fa-btn-primary .elementor-button:hover {
  background-color: var(--fa-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--fa-shadow-accent) !important;
}

/* Secondary Button (outline white — for dark backgrounds) */
.fa-btn-secondary .elementor-button {
  background-color: transparent !important;
  color: var(--fa-white) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  padding: 14px 28px !important;
  font-family: var(--fa-font-primary) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: var(--fa-transition) !important;
}
.fa-btn-secondary .elementor-button:hover {
  border-color: var(--fa-accent) !important;
  color: var(--fa-accent) !important;
  background-color: rgba(0, 180, 216, 0.08) !important;
}

/* Outline Button (cyan border — for light backgrounds) */
.fa-btn-outline .elementor-button {
  background-color: transparent !important;
  color: var(--fa-accent) !important;
  border: 1.5px solid var(--fa-accent) !important;
  border-radius: 6px !important;
  padding: 14px 28px !important;
  font-family: var(--fa-font-primary) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: var(--fa-transition) !important;
}
.fa-btn-outline .elementor-button:hover {
  background-color: var(--fa-accent) !important;
  color: var(--fa-white) !important;
}

/* Dark Button (navy) */
.fa-btn-dark .elementor-button {
  background-color: var(--fa-primary) !important;
  color: var(--fa-white) !important;
  border-radius: 6px !important;
  padding: 14px 28px !important;
  font-family: var(--fa-font-primary) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: var(--fa-transition) !important;
}
.fa-btn-dark .elementor-button:hover {
  background-color: var(--fa-primary-light) !important;
  transform: translateY(-1px);
}

/* Navbar CTA button */
.fa-nav-cta .elementor-button {
  background-color: var(--fa-accent) !important;
  color: var(--fa-white) !important;
  border-radius: 6px !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: var(--fa-transition) !important;
}
.fa-nav-cta .elementor-button:hover {
  background-color: var(--fa-accent-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3) !important;
}


/* ─────────────────────────────────────────────────────────────────
   6. HERO SECTION
   Elementor: Section with full width + min-height 85vh
   CSS Class: fa-hero
   ───────────────────────────────────────────────────────────────── */
.fa-hero {
  background: var(--fa-primary-dark) !important;
  min-height: 85vh;
  position: relative;
  overflow: hidden;
}
/* Gradient overlay for hero */
.fa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 180, 216, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(43, 95, 142, 0.2) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
/* Grid pattern overlay */
.fa-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 180, 216, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 216, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.fa-hero > .elementor-container {
  position: relative;
  z-index: 2;
}

/* Hero badge */
.fa-hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(0, 180, 216, 0.12) !important;
  border: 1px solid rgba(0, 180, 216, 0.25);
  color: var(--fa-accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  width: fit-content;
}
.fa-hero-badge .elementor-icon-list-icon i {
  color: var(--fa-accent) !important;
}

/* Hero title */
.fa-hero-title,
.fa-hero-title .elementor-heading-title {
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 800 !important;
  color: var(--fa-white) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
}
/* Gradient text for accent words */
.fa-hero-title .elementor-heading-title span,
.fa-hero-title .elementor-heading-title em {
  background: linear-gradient(135deg, var(--fa-accent), #0096b7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
}

/* Hero subtitle */
.fa-hero-subtitle,
.fa-hero-subtitle .elementor-widget-text-editor p {
  font-size: 18px !important;
  color: var(--fa-neutral-400) !important;
  line-height: 1.7 !important;
  max-width: 520px;
}

/* Animated reactor rings (add via HTML widget in Elementor) */
.fa-reactor {
  width: 380px;
  height: 380px;
  position: relative;
  margin: 0 auto;
}
.fa-reactor-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(0, 180, 216, 0.2);
  animation: fa-spin 30s linear infinite;
}
.fa-reactor-ring:nth-child(1) { inset: 0; border-color: rgba(0, 180, 216, 0.15); }
.fa-reactor-ring:nth-child(2) { inset: 30px; border-color: rgba(0, 180, 216, 0.2); animation-direction: reverse; animation-duration: 25s; }
.fa-reactor-ring:nth-child(3) { inset: 60px; border-color: rgba(0, 180, 216, 0.25); animation-duration: 20s; }
.fa-reactor-ring::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--fa-accent);
  border-radius: 50%;
  top: -4px;
  left: 50%;
  box-shadow: 0 0 10px var(--fa-accent);
}
.fa-reactor-core {
  position: absolute;
  inset: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 216, 0.3), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fa-reactor-core img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
@keyframes fa-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 1024px) {
  .fa-reactor { display: none; }
}


/* ─────────────────────────────────────────────────────────────────
   7. SECTION STYLES (reusable)
   ───────────────────────────────────────────────────────────────── */

/* Standard section padding */
.fa-section {
  padding: var(--fa-section-padding) 0 !important;
}
@media (max-width: 767px) {
  .fa-section { padding: var(--fa-section-padding-mobile) 0 !important; }
}

/* Alternate background (light gray) */
.fa-section-alt {
  background: var(--fa-neutral-100) !important;
}

/* Dark background section */
.fa-section-dark {
  background: var(--fa-primary-dark) !important;
}
.fa-section-dark .elementor-heading-title,
.fa-section-dark .elementor-widget-text-editor p,
.fa-section-dark h1, .fa-section-dark h2, .fa-section-dark h3 {
  color: var(--fa-white) !important;
}

/* Gradient CTA section */
.fa-section-cta {
  background: linear-gradient(135deg, var(--fa-primary) 0%, var(--fa-primary-dark) 100%) !important;
  position: relative;
  overflow: hidden;
}
.fa-section-cta::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(0, 180, 216, 0.1);
  right: -100px;
  top: -200px;
  pointer-events: none;
}

/* Section label (e.g., "Our Expertise", "R&D") */
.fa-section-label,
.fa-section-label .elementor-heading-title {
  font-family: var(--fa-font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fa-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fa-section-label .elementor-heading-title::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--fa-accent);
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* Section title */
.fa-section-title,
.fa-section-title .elementor-heading-title {
  font-size: clamp(28px, 3.5vw, 40px) !important;
  font-weight: 800 !important;
  color: var(--fa-neutral-900) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}
.fa-section-dark .fa-section-title .elementor-heading-title {
  color: var(--fa-white) !important;
}

/* Section description */
.fa-section-desc,
.fa-section-desc .elementor-widget-text-editor p {
  font-size: 17px !important;
  color: var(--fa-neutral-400) !important;
  line-height: 1.7 !important;
}


/* ─────────────────────────────────────────────────────────────────
   8. PILLAR CARDS (Science / Engineering / Consulting)
   Elementor: Inner Section with 3 columns
   CSS Class on each column widget/container: fa-pillar
   ───────────────────────────────────────────────────────────────── */
.fa-pillar {
  background: var(--fa-white) !important;
  border-radius: var(--fa-radius-md) !important;
  padding: 40px 32px !important;
  border: 1px solid var(--fa-neutral-200) !important;
  transition: var(--fa-transition) !important;
  position: relative;
  overflow: hidden;
}
.fa-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--fa-accent);
}
.fa-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--fa-shadow-lg) !important;
  border-color: transparent !important;
}

/* Color variants — apply BOTH classes */
.fa-pillar-science::before { background: var(--fa-accent) !important; }
.fa-pillar-engineering::before { background: var(--fa-primary-light) !important; }
.fa-pillar-consulting::before { background: var(--fa-accent-warm) !important; }

/* Pillar icon container */
.fa-pillar-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}
.fa-pillar-science .fa-pillar-icon { background: rgba(0, 180, 216, 0.1) !important; }
.fa-pillar-science .fa-pillar-icon i { color: var(--fa-accent) !important; }
.fa-pillar-engineering .fa-pillar-icon { background: rgba(43, 95, 142, 0.1) !important; }
.fa-pillar-engineering .fa-pillar-icon i { color: var(--fa-primary-light) !important; }
.fa-pillar-consulting .fa-pillar-icon { background: rgba(247, 127, 0, 0.1) !important; }
.fa-pillar-consulting .fa-pillar-icon i { color: var(--fa-accent-warm) !important; }

/* Pillar title */
.fa-pillar .elementor-heading-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fa-neutral-900) !important;
}

/* Pillar list items */
.fa-pillar .elementor-icon-list-items .elementor-icon-list-item {
  padding: 6px 0 !important;
}
.fa-pillar .elementor-icon-list-text {
  font-size: 14px !important;
  color: var(--fa-neutral-700) !important;
}
.fa-pillar .elementor-icon-list-icon i {
  color: var(--fa-accent) !important;
  font-size: 12px !important;
}

/* Pillar "Learn More" link */
.fa-pillar-link a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fa-accent) !important;
  text-decoration: none !important;
  transition: var(--fa-transition);
}
.fa-pillar-link a:hover { letter-spacing: 0.5px; }


/* ─────────────────────────────────────────────────────────────────
   9. STATS BAR
   Elementor: Section (dark bg) with 4 columns
   CSS Class: fa-stats
   ───────────────────────────────────────────────────────────────── */
.fa-stats {
  background: var(--fa-primary-dark) !important;
  padding: 60px 0 !important;
}
.fa-stat-number,
.fa-stat-number .elementor-heading-title,
.fa-stat-number .elementor-counter-number-wrapper {
  font-family: var(--fa-font-mono) !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--fa-accent) !important;
  line-height: 1 !important;
}
.fa-stat-label,
.fa-stat-label .elementor-heading-title {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
}
@media (max-width: 767px) {
  .fa-stat-number .elementor-heading-title,
  .fa-stat-number .elementor-counter-number-wrapper {
    font-size: 32px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────
   10. ABOUT SECTION (Split layout)
   Elementor: Section > 2 columns (image left, text right)
   ───────────────────────────────────────────────────────────────── */
.fa-about-image {
  border-radius: var(--fa-radius-lg) !important;
  overflow: hidden !important;
}
.fa-about-image img {
  border-radius: var(--fa-radius-lg) !important;
}

.fa-about-text .elementor-heading-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--fa-neutral-900) !important;
  line-height: 1.2 !important;
}
.fa-about-text .elementor-widget-text-editor p {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--fa-neutral-700) !important;
}
/* Highlight text inside about */
.fa-text-highlight {
  font-weight: 600;
  color: var(--fa-primary);
}


/* ─────────────────────────────────────────────────────────────────
   11. R&D LINE CARDS
   Elementor: Container/Column with icon + text
   CSS Class: fa-rd-card
   ───────────────────────────────────────────────────────────────── */
.fa-rd-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 20px !important;
  background: var(--fa-white) !important;
  border-radius: var(--fa-radius-md) !important;
  border: 1px solid var(--fa-neutral-200) !important;
  transition: var(--fa-transition) !important;
}
.fa-rd-card:hover {
  border-color: var(--fa-accent) !important;
  box-shadow: 0 0 0 1px var(--fa-accent) !important;
}
.fa-rd-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 8px !important;
  background: rgba(0, 180, 216, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fa-rd-icon i { color: var(--fa-accent) !important; font-size: 16px !important; }

.fa-rd-card .elementor-heading-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--fa-neutral-900) !important;
}
.fa-rd-card .elementor-widget-text-editor p {
  font-size: 13px !important;
  color: var(--fa-neutral-400) !important;
  line-height: 1.5 !important;
}


/* ─────────────────────────────────────────────────────────────────
   12. PROJECT CARDS
   Elementor: Use Posts widget or Loop Grid with custom skin
   CSS Class: fa-project-card
   ───────────────────────────────────────────────────────────────── */
.fa-project-card {
  background: var(--fa-white) !important;
  border-radius: var(--fa-radius-md) !important;
  border: 1px solid var(--fa-neutral-200) !important;
  overflow: hidden !important;
  transition: var(--fa-transition) !important;
  padding: 0 !important;
}
.fa-project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fa-shadow-lg) !important;
}

/* Project number badge */
.fa-project-number {
  font-family: var(--fa-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fa-accent) !important;
  background: rgba(0, 180, 216, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* Project category badge */
.fa-project-category {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}
.fa-project-category-science { color: var(--fa-accent) !important; background: rgba(0, 180, 216, 0.08) !important; }
.fa-project-category-engineering { color: var(--fa-primary-light) !important; background: rgba(43, 95, 142, 0.08) !important; }
.fa-project-category-consulting { color: var(--fa-accent-warm) !important; background: rgba(247, 127, 0, 0.08) !important; }

/* Project name */
.fa-project-name,
.fa-project-name .elementor-heading-title {
  font-family: var(--fa-font-mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--fa-neutral-900) !important;
}

/* Project description */
.fa-project-desc,
.fa-project-desc .elementor-widget-text-editor p {
  font-size: 14px !important;
  color: var(--fa-neutral-400) !important;
  line-height: 1.6 !important;
}

/* Project card footer */
.fa-project-footer {
  border-top: 1px solid var(--fa-neutral-200) !important;
  padding: 16px 28px !important;
}
.fa-project-footer a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fa-accent) !important;
  text-decoration: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   13. AWARDS / PARTNERS TICKER
   Elementor: Section with Icon List or Image Carousel
   CSS Class: fa-awards
   ───────────────────────────────────────────────────────────────── */
.fa-award-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.fa-award-item:hover { opacity: 1; }

.fa-award-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 8px !important;
  background: rgba(0, 180, 216, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fa-award-icon i { color: var(--fa-accent) !important; font-size: 20px !important; }

.fa-award-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fa-neutral-700) !important;
}
.fa-award-text span {
  display: block;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--fa-neutral-400) !important;
}


/* ─────────────────────────────────────────────────────────────────
   14. LOCATION CARDS
   Elementor: Container or Column with icon + text, 3 columns
   CSS Class: fa-location
   ───────────────────────────────────────────────────────────────── */
.fa-location {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--fa-radius-md) !important;
  padding: 28px !important;
  text-align: center !important;
  transition: var(--fa-transition) !important;
}
.fa-location:hover {
  background: rgba(0, 180, 216, 0.06) !important;
  border-color: rgba(0, 180, 216, 0.2) !important;
}
.fa-location i { color: var(--fa-accent) !important; font-size: 28px !important; }
.fa-location .elementor-heading-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--fa-white) !important;
}


/* ─────────────────────────────────────────────────────────────────
   15. CAREERS / JOB CARDS
   Reuse pillar card styles with different content
   CSS Class: fa-job-card
   ───────────────────────────────────────────────────────────────── */
.fa-job-card {
  background: var(--fa-white) !important;
  border-radius: var(--fa-radius-md) !important;
  padding: 32px !important;
  border: 1px solid var(--fa-neutral-200) !important;
  transition: var(--fa-transition) !important;
}
.fa-job-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fa-shadow-lg) !important;
  border-color: var(--fa-accent) !important;
}
.fa-job-title .elementor-heading-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--fa-neutral-900) !important;
}
.fa-job-meta {
  font-size: 14px !important;
  color: var(--fa-neutral-400) !important;
}


/* ─────────────────────────────────────────────────────────────────
   16. FOOTER
   Elementor: Theme Builder > Footer template
   CSS Class: fa-footer
   ───────────────────────────────────────────────────────────────── */
.fa-footer {
  background: var(--fa-primary-dark) !important;
  padding: 60px 0 0 !important;
}
.fa-footer .elementor-heading-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--fa-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 20px !important;
}
.fa-footer .elementor-icon-list-text {
  color: var(--fa-neutral-400) !important;
  font-size: 14px !important;
  transition: color 0.2s !important;
}
.fa-footer .elementor-icon-list-item:hover .elementor-icon-list-text {
  color: var(--fa-accent) !important;
}
.fa-footer .elementor-widget-text-editor p {
  color: var(--fa-neutral-400) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Footer social icons */
.fa-footer-social .elementor-social-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  transition: var(--fa-transition) !important;
}
.fa-footer-social .elementor-social-icon:hover {
  background: var(--fa-accent) !important;
}
.fa-footer-social .elementor-social-icon i {
  color: var(--fa-neutral-400) !important;
}
.fa-footer-social .elementor-social-icon:hover i {
  color: var(--fa-white) !important;
}

/* Footer bottom bar */
.fa-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 24px 0 !important;
}
.fa-footer-bottom .elementor-widget-text-editor p {
  font-size: 13px !important;
  color: var(--fa-neutral-400) !important;
}
.fa-footer-bottom a {
  color: var(--fa-neutral-400) !important;
  text-decoration: none !important;
}
.fa-footer-bottom a:hover { color: var(--fa-accent) !important; }


/* ─────────────────────────────────────────────────────────────────
   17. NEWSLETTER FORM
   Elementor: Form widget inside footer or CTA section
   CSS Class: fa-newsletter
   ───────────────────────────────────────────────────────────────── */
.fa-newsletter .elementor-field {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  color: var(--fa-white) !important;
  font-family: var(--fa-font-primary) !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
}
.fa-newsletter .elementor-field::placeholder {
  color: var(--fa-neutral-400) !important;
}
.fa-newsletter .elementor-field:focus {
  border-color: var(--fa-accent) !important;
  outline: none !important;
}
.fa-newsletter .elementor-button {
  background-color: var(--fa-accent) !important;
  border-radius: 6px !important;
  padding: 14px 20px !important;
}


/* ─────────────────────────────────────────────────────────────────
   18. CONTACT PAGE — FORM
   Elementor: Form widget
   CSS Class: fa-contact-form
   ───────────────────────────────────────────────────────────────── */
.fa-contact-form .elementor-field-group label {
  font-family: var(--fa-font-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--fa-neutral-700) !important;
  margin-bottom: 6px !important;
}
.fa-contact-form .elementor-field {
  border: 1px solid var(--fa-neutral-200) !important;
  border-radius: var(--fa-radius-sm) !important;
  padding: 12px 16px !important;
  font-family: var(--fa-font-primary) !important;
  font-size: 14px !important;
  transition: border-color 0.2s !important;
}
.fa-contact-form .elementor-field:focus {
  border-color: var(--fa-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1) !important;
  outline: none !important;
}
.fa-contact-form .elementor-button {
  background-color: var(--fa-accent) !important;
  border-radius: 6px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: var(--fa-transition) !important;
}
.fa-contact-form .elementor-button:hover {
  background-color: var(--fa-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--fa-shadow-accent) !important;
}


/* ─────────────────────────────────────────────────────────────────
   19. MONOSPACE / TECHNICAL TEXT
   For project codes, formulas, specs
   CSS Class: fa-mono
   ───────────────────────────────────────────────────────────────── */
.fa-mono,
.fa-mono .elementor-heading-title,
.fa-mono .elementor-widget-text-editor p {
  font-family: var(--fa-font-mono) !important;
}


/* ─────────────────────────────────────────────────────────────────
   20. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────── */
.fa-text-accent { color: var(--fa-accent) !important; }
.fa-text-white { color: var(--fa-white) !important; }
.fa-text-primary { color: var(--fa-primary) !important; }
.fa-text-muted { color: var(--fa-neutral-400) !important; }

.fa-bg-dark { background: var(--fa-primary-dark) !important; }
.fa-bg-alt { background: var(--fa-neutral-100) !important; }
.fa-bg-white { background: var(--fa-white) !important; }

.fa-shadow-md { box-shadow: var(--fa-shadow-md) !important; }
.fa-shadow-lg { box-shadow: var(--fa-shadow-lg) !important; }

.fa-rounded-md { border-radius: var(--fa-radius-md) !important; }
.fa-rounded-lg { border-radius: var(--fa-radius-lg) !important; }

.fa-border { border: 1px solid var(--fa-neutral-200) !important; }
.fa-border-accent { border: 1px solid var(--fa-accent) !important; }

/* Top accent lines (4px colored bar on top of cards) */
.fa-accent-top-cyan { border-top: 4px solid var(--fa-accent) !important; }
.fa-accent-top-blue { border-top: 4px solid var(--fa-primary-light) !important; }
.fa-accent-top-amber { border-top: 4px solid var(--fa-accent-warm) !important; }

/* Hide on mobile / desktop */
@media (max-width: 767px) {
  .fa-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .fa-hide-desktop { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────────
   21. ANIMATIONS (subtle, performant)
   ───────────────────────────────────────────────────────────────── */
@keyframes fa-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fa-animate-in {
  animation: fa-fadeInUp 0.6s ease forwards;
}

/* Floating particles for hero (optional decorative element) */
@keyframes fa-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(5deg); }
}
.fa-float { animation: fa-float 20s infinite ease-in-out; }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://fusnew.jherranz.com/wp-content/uploads/2026/02/Inter-Regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'JetBrains';
	font-display: auto;
	src: url('https://fusnew.jherranz.com/wp-content/uploads/2026/02/JetBrainsMonowght.ttf') format('truetype');
}
/* End Custom Fonts CSS */