/* CSS Variables */
:root {
  --blue-primary: #1a5fa4;
  --blue-dark: #0d4a8a;
  --blue-light: #3b82f6;
  --blue-accent: #60a5fa;
  --grey-cog: #b8c4ce;
  --grey-light: #f1f5f9;
  --grey-medium: #e2e8f0;
  --grey-dark: #64748b;
  --text-dark: #0f172a;
  --text-grey: #475569;
  --white: #ffffff;
  --cream: #fafbfc;
  --success: #10b981;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --radius: 8px;
  --radius-lg: 16px;
  --transition: all 0.3s ease;
}

/* Reset & Base */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--white);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.btn-primary {
  background: var(--blue-primary);
  color: var(--white);
  border-color: var(--blue-primary);
}

.btn-primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: transparent;
  color: var(--blue-primary);
  border-color: var(--blue-primary);
}

.btn-secondary:hover {
  background: var(--blue-primary);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--blue-primary);
  border-color: var(--grey-medium);
  padding: 10px 20px;
  font-size: 14px;
}

.btn-outline:hover {
  border-color: var(--blue-primary);
  background: var(--blue-primary);
  color: var(--white);
}

.btn-full {
  width: 100%;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grey-medium);
  transition: var(--transition);
}

.navbar.scrolled {
  box-shadow: var(--shadow);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: 1px;
}

.logo-cog {
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L54 10 L56 20 C60 21 64 23 67 26 L76 22 L80 26 L74 34 C77 38 79 42 80 46 L90 48 L90 52 L80 54 C79 58 77 62 74 66 L80 74 L76 78 L67 74 C64 77 60 79 56 80 L54 90 L46 90 L44 80 C40 79 36 77 33 74 L24 78 L20 74 L26 66 C23 62 21 58 20 54 L10 52 L10 48 L20 46 C21 42 23 38 26 34 L20 26 L24 22 L33 26 C36 23 40 21 44 20 L46 10 Z M50 35 A15 15 0 1 0 50 65 A15 15 0 1 0 50 35' fill='%231a5fa4'/%3E%3C/svg%3E");
  background-size: contain;
  animation: rotateCog 8s linear infinite;
}

.nav-links {
  display: flex;
  gap: 32px;
}

.nav-links a {
  font-weight: 500;
  color: var(--text-grey);
  font-size: 15px;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--blue-primary);
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--blue-primary);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.language-switch {
  display: flex;
  background: var(--grey-light);
  border-radius: 6px;
  padding: 3px;
}

.lang-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-grey);
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition);
}

.lang-btn.active {
  background: var(--white);
  color: var(--blue-primary);
  box-shadow: var(--shadow-sm);
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  transition: var(--transition);
}

/* Hero Section */
.hero {
  padding: 140px 0 80px;
  background: linear-gradient(180deg, var(--grey-light) 0%, var(--white) 100%);
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.main-title {
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: 4px;
  margin-bottom: 30px;
}

/* Visual Element - Globe, Arrow, Cogs with Animations */
.visual-element {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 40px auto;
  max-width: 450px;
}

/* Animated Globe */
.globe {
  flex-shrink: 0;
  position: relative;
}

.globe-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a90d9 0%, #1a5fa4 40%, #0d4a8a 100%);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset -8px -8px 20px rgba(0,0,0,0.3),
    inset 4px 4px 10px rgba(255,255,255,0.2),
    0 8px 30px rgba(26, 95, 164, 0.4);
  animation: globePulse 4s ease-in-out infinite;
}

.globe-shine {
  position: absolute;
  top: 10%;
  left: 15%;
  width: 25%;
  height: 25%;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
  border-radius: 50%;
}

.globe-continents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='30' cy='25' r='8' fill='%2322C55E' opacity='0.9'/%3E%3Ccircle cx='70' cy='20' r='7' fill='%23EF4444' opacity='0.9'/%3E%3Ccircle cx='75' cy='65' r='9' fill='%23FACC15' opacity='0.9'/%3E%3Ccircle cx='25' cy='70' r='6' fill='%233B82F6' opacity='0.9'/%3E%3Ccircle cx='50' cy='45' r='5' fill='%2322C55E' opacity='0.7'/%3E%3Ccircle cx='60' cy='80' r='4' fill='%23EF4444' opacity='0.7'/%3E%3C/svg%3E") center/80% no-repeat;
  animation: globeRotate 20s linear infinite;
}

.globe-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(26, 95, 164, 0.2);
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite;
}

/* Arrow Line with Animation */
.arrow-line {
  flex: 1;
  max-width: 120px;
  min-width: 60px;
  height: 3px;
  background: var(--blue-primary);
  position: relative;
  margin: 0 10px;
}

.arrow-line::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid var(--blue-primary);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.arrow-pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: arrowPulse 2s ease-in-out infinite;
}

/* Animated Cogs Group */
.cogs-group {
  display: flex;
  align-items: flex-end;
  gap: 0;
  position: relative;
  width: 100px;
  height: 80px;
}

.cog {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.cog-blue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L54 10 L56 20 C60 21 64 23 67 26 L76 22 L80 26 L74 34 C77 38 79 42 80 46 L90 48 L90 52 L80 54 C79 58 77 62 74 66 L80 74 L76 78 L67 74 C64 77 60 79 56 80 L54 90 L46 90 L44 80 C40 79 36 77 33 74 L24 78 L20 74 L26 66 C23 62 21 58 20 54 L10 52 L10 48 L20 46 C21 42 23 38 26 34 L20 26 L24 22 L33 26 C36 23 40 21 44 20 L46 10 Z M50 35 A15 15 0 1 0 50 65 A15 15 0 1 0 50 35' fill='%231a5fa4'/%3E%3C/svg%3E");
  animation: rotateCog 6s linear infinite;
}

.cog-grey {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L54 10 L56 20 C60 21 64 23 67 26 L76 22 L80 26 L74 34 C77 38 79 42 80 46 L90 48 L90 52 L80 54 C79 58 77 62 74 66 L80 74 L76 78 L67 74 C64 77 60 79 56 80 L54 90 L46 90 L44 80 C40 79 36 77 33 74 L24 78 L20 74 L26 66 C23 62 21 58 20 54 L10 52 L10 48 L20 46 C21 42 23 38 26 34 L20 26 L24 22 L33 26 C36 23 40 21 44 20 L46 10 Z M50 35 A15 15 0 1 0 50 65 A15 15 0 1 0 50 35' fill='%23b8c4ce'/%3E%3C/svg%3E");
}

.cog-large {
  width: 60px;
  height: 60px;
  right: 0;
  bottom: 0;
}

.cog-medium {
  width: 42px;
  height: 42px;
  right: 38px;
  bottom: 22px;
  animation: rotateCogReverse 5s linear infinite;
}

.cog-small {
  width: 30px;
  height: 30px;
  right: 55px;
  bottom: 48px;
  animation: rotateCog 4s linear infinite;
}

/* Keyframe Animations */
@keyframes rotateCog {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateCogReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes globePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

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

@keyframes ringPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.2;
  }
}

@keyframes arrowPulse {
  0% { left: -30px; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Subtitle & Tagline */
.subtitle {
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 400;
  color: var(--text-dark);
  letter-spacing: 10px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.tagline {
  font-size: 17px;
  font-style: italic;
  color: var(--text-grey);
  margin-bottom: 20px;
}

.hero-description {
  font-size: 18px;
  color: var(--text-grey);
  max-width: 600px;
  margin: 0 auto 30px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* Hero Stats */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--grey-medium);
}

.stat {
  text-align: center;
}

.stat-number {
  font-size: 48px;
  font-weight: 800;
  color: var(--blue-primary);
  line-height: 1;
}

.stat-suffix {
  font-size: 32px;
  font-weight: 700;
  color: var(--blue-primary);
}

.stat-label {
  display: block;
  font-size: 14px;
  color: var(--text-grey);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header.left {
  text-align: left;
}

.section-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.header-line {
  width: 60px;
  height: 4px;
  background: var(--blue-primary);
  margin: 0 auto;
  border-radius: 2px;
}

.section-header.left .header-line {
  margin: 0;
}

.section-description {
  font-size: 17px;
  color: var(--text-grey);
  max-width: 600px;
  margin: 20px auto 0;
}

/* About Section */
.about {
  padding: 100px 0;
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.about-content p {
  color: var(--text-grey);
  margin-bottom: 20px;
  line-height: 1.8;
}

.about-lead {
  font-size: 18px;
  color: var(--text-dark) !important;
  font-weight: 500;
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature-card {
  background: var(--grey-light);
  padding: 24px;
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow);
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--white);
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 14px;
  color: var(--text-grey);
  margin: 0;
}

/* Services Section */
.services {
  padding: 100px 0;
  background: var(--grey-light);
}

.services-banner {
  margin: 40px auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: 900px;
}

.services-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

.service-card {
  background: var(--white);
  padding: 40px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-medium);
  transition: var(--transition);
  position: relative;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}

.service-card.featured {
  border-color: var(--blue-primary);
  background: linear-gradient(180deg, var(--white) 0%, rgba(26, 95, 164, 0.03) 100%);
}

.featured-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-primary);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.service-icon-wrapper {
  margin-bottom: 24px;
}

.service-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--white);
}

.service-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.service-card p {
  color: var(--text-grey);
  line-height: 1.7;
  margin-bottom: 20px;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--blue-primary);
  font-size: 15px;
}

.service-link:hover {
  gap: 12px;
}

.service-link span {
  transition: var(--transition);
}

/* Additional Services */
.additional-services {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius-lg);
  text-align: center;
}

.additional-services h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 30px;
}

.additional-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.additional-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 10px;
  border-radius: var(--radius);
  transition: var(--transition);
}

.additional-item:hover {
  background: var(--grey-light);
}

.additional-item svg {
  width: 28px;
  height: 28px;
  stroke: var(--blue-primary);
}

.additional-item span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-grey);
  text-align: center;
}

/* Jobs Section */
.jobs {
  padding: 100px 0;
  background: var(--white);
}

.jobs-filter {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  background: var(--grey-light);
  color: var(--text-grey);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--blue-primary);
  color: var(--white);
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.job-card {
  background: var(--white);
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-medium);
  transition: var(--transition);
}

.job-card:hover {
  border-color: var(--blue-primary);
  box-shadow: var(--shadow-lg);
}

.job-card.hidden {
  display: none;
}

.job-header {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.job-type,
.job-new,
.job-remote {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  text-transform: uppercase;
}

.job-type {
  background: var(--grey-light);
  color: var(--text-grey);
}

.job-new {
  background: var(--success);
  color: var(--white);
}

.job-remote {
  background: var(--blue-accent);
  color: var(--white);
}

.job-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.job-company {
  font-size: 15px;
  color: var(--blue-primary);
  font-weight: 500;
  margin-bottom: 16px;
}

.job-details {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.job-details span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-grey);
}

.job-details svg {
  width: 16px;
  height: 16px;
  stroke: var(--grey-dark);
}

.job-description {
  font-size: 14px;
  color: var(--text-grey);
  line-height: 1.6;
  margin-bottom: 16px;
}

.job-salary {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.job-salary span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-grey);
}

.jobs-cta {
  text-align: center;
  padding: 40px;
  background: var(--grey-light);
  border-radius: var(--radius-lg);
}

.jobs-cta p {
  font-size: 17px;
  color: var(--text-grey);
  margin-bottom: 20px;
}

/* Contact Section */
.contact {
  padding: 100px 0;
  background: var(--grey-light);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-description {
  font-size: 17px;
  color: var(--text-grey);
  margin-bottom: 40px;
  line-height: 1.7;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-icon {
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.contact-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue-primary);
}

.contact-text h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.contact-text p {
  font-size: 15px;
  color: var(--text-grey);
  line-height: 1.6;
}

.contact-text p.small {
  font-size: 13px;
  color: var(--grey-dark);
}

.contact-text a {
  color: var(--blue-primary);
}

.contact-text a:hover {
  text-decoration: underline;
}

/* Contact Form */
.contact-form-wrapper {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  border: 2px solid var(--grey-medium);
  border-radius: var(--radius);
  transition: var(--transition);
  background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue-primary);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

.file-upload {
  position: relative;
}

.file-upload input[type="file"] {
  padding: 12px;
}

.file-hint {
  display: block;
  font-size: 12px;
  color: var(--grey-dark);
  margin-top: 6px;
}

/* Scrolling Banner */
.scrolling-banner {
  background: var(--blue-primary);
  padding: 20px 0;
  overflow: hidden;
  white-space: nowrap;
}

.scrolling-text {
  display: inline-block;
  animation: scroll 30s linear infinite;
}

.scrolling-text span {
  display: inline-block;
  padding: 0 60px;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

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

/* Footer */
.footer {
  background: var(--text-dark);
  color: var(--white);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.footer-logo .logo-cog {
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-style: italic;
  color: var(--grey-dark);
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 14px;
  color: var(--grey-dark);
  line-height: 1.7;
}

.footer-links h4,
.footer-contact h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 14px;
  color: var(--grey-dark);
}

.footer-links a:hover {
  color: var(--white);
}

.footer-contact p {
  font-size: 14px;
  color: var(--grey-dark);
  line-height: 1.8;
}

.footer-contact a {
  color: var(--grey-dark);
}

.footer-contact a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}

.footer-bottom p {
  font-size: 14px;
  color: var(--grey-dark);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 14px;
  color: var(--grey-dark);
}

.footer-legal a:hover {
  color: var(--white);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card.featured {
    grid-column: span 2;
  }

  .additional-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--grey-medium);
  }

  .nav-links.active {
    display: flex;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .hero {
    padding: 120px 0 60px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 30px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card.featured {
    grid-column: span 1;
  }

  .additional-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .jobs-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
  }

  .visual-element {
    flex-direction: column;
    gap: 20px;
    max-width: 200px;
  }

  .arrow-line {
    transform: rotate(90deg);
    max-width: 60px;
    margin: 10px 0;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .main-title {
    letter-spacing: 2px;
  }

  .subtitle {
    letter-spacing: 4px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
  }

  .stat-number {
    font-size: 36px;
  }

  .job-details {
    flex-direction: column;
    gap: 8px;
  }

  .additional-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Print Styles */
@media print {
  .navbar,
  .language-switch,
  .scrolling-banner,
  .hero-buttons,
  .filter-btn,
  .btn {
    display: none !important;
  }

  .hero {
    padding: 40px 0;
  }

  section {
    padding: 40px 0;
  }
}