@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=swap');

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #3981b5 #f0f7fc;
}

body {
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f0f7fc;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e12047, #3981b5);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c41a3d, #154e7a);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.fade-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Gradients and Overlays */
.hero-gradient {
  background: linear-gradient(135deg, #154e7a 0%, #184b69 40%, #3981b5 100%);
}

.stats-gradient {
  background: linear-gradient(135deg, #e12047 0%, #c41a3d 100%);
}

.cta-gradient {
  background: linear-gradient(135deg, #184b69 0%, #154e7a 50%, #3981b5 100%);
}

.service-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(24, 75, 105, 0.85) 100%);
}

/* Blob Animations */
@keyframes blob {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(20px, -30px) scale(1.05);
  }
  50% {
    transform: translate(-10px, 15px) scale(0.95);
  }
  75% {
    transform: translate(15px, 10px) scale(1.02);
  }
}

.blob {
  animation: blob 12s ease-in-out infinite;
}

.blob-delay {
  animation-delay: -4s;
}

.blob-delay-2 {
  animation-delay: -8s;
}

/* Form Styles (Careers) */
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.8);
}

.form-input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  background: white;
  color: #184b69;
  font-size: 13px;
}

.form-input:focus {
  outline: none;
  border-color: #e12047;
  box-shadow: 0 0 0 2px rgba(225, 32, 71, 0.3);
}