/* CSS Variables for better maintainability */
:root {
  --primary-50: #f8fafc;
  --primary-100: #f1f5f9;
  --primary-200: #e2e8f0;
  --primary-300: #cbd5e1;
  --primary-400: #94a3b8;
  --primary-500: #64748b;
  --primary-600: #475569;
  --primary-700: #334155;
  --primary-800: #1e293b;
  --primary-900: #0f172a;
  --primary-950: #020617;

  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;

  --forces-dark-50: #f8fafc;
  --forces-dark-100: #f1f5f9;
  --forces-dark-200: #e2e8f0;
  --forces-dark-300: #cbd5e1;
  --forces-dark-400: #94a3b8;
  --forces-dark-500: #64748b;
  --forces-dark-600: #475569;
  --forces-dark-700: #334155;
  --forces-dark-800: #1e293b;
  --forces-dark-900: #0f172a;
  --forces-dark-950: #020617;

  --forces-950: #063656;
  --forces-900: #0a4b5c;
  --forces-800: #0e5b6c;
  --forces-700: #117c8c;
  --forces-600: #1399a0;
  --forces-500: #15b2b8;
  --forces-400: #17c8d0;
  --forces-300: #1ae0e8;
  --forces-200: #1cf0f0;
  --forces-100: #1efff8;

  --accent-400: #facc15;
  --accent-500: #eab308;

  --emerald-400: #34d399;
  --purple-400: #a78bfa;
}

/* Global Styles */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  background: linear-gradient(
    135deg,
    var(--primary-950) 0%,
    var(--primary-900) 50%,
    var(--primary-800) 100%
  );
  color: var(--primary-50);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.2;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--primary-800);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--brand-500), var(--brand-600));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--brand-600), var(--brand-700));
}

/* Navigation Styles */
.nav-glass {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link:hover {
  color: var(--brand-500);
  transform: translateY(-2px);
}

/* Button Styles */
.btn-primary {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--brand-500),
    var(--brand-600),
    var(--brand-700)
  );
  background-size: 200% 200%;
  transition: all 0.4s ease;
  overflow: hidden;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

/* Loading Animations */
@keyframes loading-bar {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-loading-bar {
  animation: loading-bar 2s ease-in-out infinite;
}

@keyframes loadingLogo {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.4));
  }
  50% {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 8px 20px rgba(59, 130, 246, 0.6));
  }
}

/* Loading Screen Styles */
#loading-screen {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  backdrop-filter: blur(0px);
}

#loading-screen.hiding {
  opacity: 0;
  transform: scale(0.98);
  backdrop-filter: blur(20px);
}

/* Enhanced Glassmorphism Effects */
.backdrop-blur-3xl {
  backdrop-filter: blur(64px);
  -webkit-backdrop-filter: blur(64px);
}

/* Smooth transitions for glass elements */
#loading-screen .relative > div {
  transition: all 0.3s ease;
}

/* Forces Gross Tooltip Styles */
.forces-gross-tooltip {
  position: relative;
}

.forces-gross-tooltip span {
  transition: all 0.3s ease;
}

.forces-gross-tooltip:hover span {
  opacity: 1;
  color: var(--brand-400);
}

/* Tooltip animation */
.forces-gross-tooltip .absolute {
  animation: tooltipBounce 0.3s ease-out;
}

@keyframes tooltipBounce {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Mobile Tooltip */
.forces-gross-tooltip-mobile {
  position: relative;
}

.forces-gross-tooltip-mobile .mobile-tooltip {
  transition: all 0.3s ease;
}

.forces-gross-tooltip-mobile .mobile-tooltip.show {
  display: block !important;
  animation: tooltipSlideIn 0.3s ease-out;
}

@keyframes tooltipSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll to Top Button */
#scroll-to-top {
  transition: opacity 0.3s ease;
}

/* Logo Slider Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
  animation: scroll 20s linear infinite;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

.btn-primary:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

/* Hero Section */
.hero-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--primary-950) 0%,
    var(--primary-900) 25%,
    var(--primary-800) 50%,
    var(--primary-700) 75%,
    var(--primary-600) 100%
  );
  z-index: -2;
}

.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.particle {
  position: absolute;
  background: rgba(59, 130, 246, 0.6);
  border-radius: 50%;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

.particle:nth-child(odd) {
  animation-delay: -3s;
  background: rgba(234, 179, 8, 0.4);
}

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

/* Project Cards */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, var(--primary-800), var(--primary-700));
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(59, 130, 246, 0.1) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.project-card:hover::before {
  transform: translateX(100%);
}

.project-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.5);
}

/* Service Cards */
.service-card {
  position: relative;
  background: linear-gradient(145deg, var(--primary-800), var(--primary-700));
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: all 0.4s ease;
  overflow: hidden;
}

.service-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1),
    rgba(234, 179, 8, 0.1)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card:hover::after {
  opacity: 1;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
}

/* Stats Animation */
.stat-card {
  background: linear-gradient(145deg, var(--primary-800), var(--primary-700));
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: scale(1.05);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}

/* Animation Classes */
.fade-in-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease-out;
}

.slide-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease-out;
}

.slide-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s ease-out;
}

.scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Loading Animation */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(59, 130, 246, 0.3);
  border-left-color: var(--brand-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Video Background */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Scroll Indicator */
.scroll-indicator {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  user-select: none;
  padding: 0.5rem;
}

.scroll-indicator:hover {
  transform: translateX(-50%) scale(1.2);
}

.scroll-indicator:hover i {
  color: rgba(249, 115, 22, 0.9);
  animation: bounce 1s infinite;
}

.scroll-arrow-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.scroll-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-container {
    padding: 1rem;
  }

  .project-card {
    margin-bottom: 1rem;
  }
}

/* Utility classes for animations */
.animate-slide-up {
  animation: slideUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.font-handwriting {
  font-family: "Dancing Script", "Kalam", cursive;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.2);
  font-size: 2rem;
  line-height: 1.2;
  transform: rotate(-1deg);
  transition: all 0.3s ease;
}

.font-handwriting:hover {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 255, 255, 0.3);
  transform: rotate(0deg) scale(1.05);
  font-weight: 800;
}

.font-handwriting:nth-child(odd) {
  transform: rotate(1deg);
}

/* Enhanced animations for vision section */
@keyframes animate-gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: animate-gradient 3s ease infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}

/* Project slider enhancements */
.project-card {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.project-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.font-handwriting:nth-child(even) {
  transform: rotate(-0.5deg);
}

/* Navigation Styles */
.nav-glass {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  transition: all 0.3s ease;
}

.nav-glass.scrolled {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Forces Color Utility Classes */
/* Background Colors */
.bg-forces-100 {
  background-color: var(--forces-100);
}
.bg-forces-200 {
  background-color: var(--forces-200);
}
.bg-forces-300 {
  background-color: var(--forces-300);
}
.bg-forces-400 {
  background-color: var(--forces-400);
}
.bg-forces-500 {
  background-color: var(--forces-500);
}
.bg-forces-600 {
  background-color: var(--forces-600);
}
.bg-forces-700 {
  background-color: var(--forces-700);
}
.bg-forces-800 {
  background-color: var(--forces-800);
}
.bg-forces-900 {
  background-color: var(--forces-900);
}
.bg-forces-950 {
  background-color: var(--forces-950);
}

/* Text Colors */
.text-forces-100 {
  color: var(--forces-100);
}
.text-forces-200 {
  color: var(--forces-200);
}
.text-forces-300 {
  color: var(--forces-300);
}
.text-forces-400 {
  color: var(--forces-400);
}
.text-forces-500 {
  color: var(--forces-500);
}
.text-forces-600 {
  color: var(--forces-600);
}
.text-forces-700 {
  color: var(--forces-700);
}
.text-forces-800 {
  color: var(--forces-800);
}
.text-forces-900 {
  color: var(--forces-900);
}
.text-forces-950 {
  color: var(--forces-950);
}

/* Border Colors */
.border-forces-100 {
  border-color: var(--forces-100);
}
.border-forces-200 {
  border-color: var(--forces-200);
}
.border-forces-300 {
  border-color: var(--forces-300);
}
.border-forces-400 {
  border-color: var(--forces-400);
}
.border-forces-500 {
  border-color: var(--forces-500);
}
.border-forces-600 {
  border-color: var(--forces-600);
}
.border-forces-700 {
  border-color: var(--forces-700);
}
.border-forces-800 {
  border-color: var(--forces-800);
}
.border-forces-900 {
  border-color: var(--forces-900);
}
.border-forces-950 {
  border-color: var(--forces-950);
}

/* Gradient Background Classes */
.from-forces-100 {
  --tw-gradient-from: var(--forces-100);
  --tw-gradient-to: rgb(31 255 248 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-200 {
  --tw-gradient-from: var(--forces-200);
  --tw-gradient-to: rgb(28 240 240 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-300 {
  --tw-gradient-from: var(--forces-300);
  --tw-gradient-to: rgb(26 224 232 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-400 {
  --tw-gradient-from: var(--forces-400);
  --tw-gradient-to: rgb(23 200 208 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-500 {
  --tw-gradient-from: var(--forces-500);
  --tw-gradient-to: rgb(21 178 184 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-600 {
  --tw-gradient-from: var(--forces-600);
  --tw-gradient-to: rgb(19 153 160 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-700 {
  --tw-gradient-from: var(--forces-700);
  --tw-gradient-to: rgb(17 124 140 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-800 {
  --tw-gradient-from: var(--forces-800);
  --tw-gradient-to: rgb(14 91 108 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-900 {
  --tw-gradient-from: var(--forces-900);
  --tw-gradient-to: rgb(10 75 92 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-950 {
  --tw-gradient-from: var(--forces-950);
  --tw-gradient-to: rgb(6 54 86 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-forces-100 {
  --tw-gradient-to: var(--forces-100);
}
.to-forces-200 {
  --tw-gradient-to: var(--forces-200);
}
.to-forces-300 {
  --tw-gradient-to: var(--forces-300);
}
.to-forces-400 {
  --tw-gradient-to: var(--forces-400);
}
.to-forces-500 {
  --tw-gradient-to: var(--forces-500);
}
.to-forces-600 {
  --tw-gradient-to: var(--forces-600);
}
.to-forces-700 {
  --tw-gradient-to: var(--forces-700);
}
.to-forces-800 {
  --tw-gradient-to: var(--forces-800);
}
.to-forces-900 {
  --tw-gradient-to: var(--forces-900);
}
.to-forces-950 {
  --tw-gradient-to: var(--forces-950);
}

.via-forces-100 {
  --tw-gradient-to: rgb(31 255 248 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-100),
    var(--tw-gradient-to);
}
.via-forces-200 {
  --tw-gradient-to: rgb(28 240 240 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-200),
    var(--tw-gradient-to);
}
.via-forces-300 {
  --tw-gradient-to: rgb(26 224 232 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-300),
    var(--tw-gradient-to);
}
.via-forces-400 {
  --tw-gradient-to: rgb(23 200 208 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-400),
    var(--tw-gradient-to);
}
.via-forces-500 {
  --tw-gradient-to: rgb(21 178 184 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-500),
    var(--tw-gradient-to);
}
.via-forces-600 {
  --tw-gradient-to: rgb(19 153 160 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-600),
    var(--tw-gradient-to);
}
.via-forces-700 {
  --tw-gradient-to: rgb(17 124 140 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-700),
    var(--tw-gradient-to);
}
.via-forces-800 {
  --tw-gradient-to: rgb(14 91 108 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-800),
    var(--tw-gradient-to);
}
.via-forces-900 {
  --tw-gradient-to: rgb(10 75 92 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-900),
    var(--tw-gradient-to);
}
.via-forces-950 {
  --tw-gradient-to: rgb(6 54 86 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-950),
    var(--tw-gradient-to);
}

/* Hover States */
.hover\:bg-forces-100:hover {
  background-color: var(--forces-100);
}
.hover\:bg-forces-200:hover {
  background-color: var(--forces-200);
}
.hover\:bg-forces-300:hover {
  background-color: var(--forces-300);
}
.hover\:bg-forces-400:hover {
  background-color: var(--forces-400);
}
.hover\:bg-forces-500:hover {
  background-color: var(--forces-500);
}
.hover\:bg-forces-600:hover {
  background-color: var(--forces-600);
}
.hover\:bg-forces-700:hover {
  background-color: var(--forces-700);
}
.hover\:bg-forces-800:hover {
  background-color: var(--forces-800);
}
.hover\:bg-forces-900:hover {
  background-color: var(--forces-900);
}
.hover\:bg-forces-950:hover {
  background-color: var(--forces-950);
}

.hover\:text-forces-100:hover {
  color: var(--forces-100);
}
.hover\:text-forces-200:hover {
  color: var(--forces-200);
}
.hover\:text-forces-300:hover {
  color: var(--forces-300);
}
.hover\:text-forces-400:hover {
  color: var(--forces-400);
}
.hover\:text-forces-500:hover {
  color: var(--forces-500);
}
.hover\:text-forces-600:hover {
  color: var(--forces-600);
}
.hover\:text-forces-700:hover {
  color: var(--forces-700);
}
.hover\:text-forces-800:hover {
  color: var(--forces-800);
}
.hover\:text-forces-900:hover {
  color: var(--forces-900);
}
.hover\:text-forces-950:hover {
  color: var(--forces-950);
}

.hover\:border-forces-100:hover {
  border-color: var(--forces-100);
}
.hover\:border-forces-200:hover {
  border-color: var(--forces-200);
}
.hover\:border-forces-300:hover {
  border-color: var(--forces-300);
}
.hover\:border-forces-400:hover {
  border-color: var(--forces-400);
}
.hover\:border-forces-500:hover {
  border-color: var(--forces-500);
}
.hover\:border-forces-600:hover {
  border-color: var(--forces-600);
}
.hover\:border-forces-700:hover {
  border-color: var(--forces-700);
}
.hover\:border-forces-800:hover {
  border-color: var(--forces-800);
}
.hover\:border-forces-900:hover {
  border-color: var(--forces-900);
}
.hover\:border-forces-950:hover {
  border-color: var(--forces-950);
}

.hover\:from-forces-100:hover {
  --tw-gradient-from: var(--forces-100);
  --tw-gradient-to: rgb(31 255 248 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-200:hover {
  --tw-gradient-from: var(--forces-200);
  --tw-gradient-to: rgb(28 240 240 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-300:hover {
  --tw-gradient-from: var(--forces-300);
  --tw-gradient-to: rgb(26 224 232 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-400:hover {
  --tw-gradient-from: var(--forces-400);
  --tw-gradient-to: rgb(23 200 208 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-500:hover {
  --tw-gradient-from: var(--forces-500);
  --tw-gradient-to: rgb(21 178 184 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-600:hover {
  --tw-gradient-from: var(--forces-600);
  --tw-gradient-to: rgb(19 153 160 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-700:hover {
  --tw-gradient-from: var(--forces-700);
  --tw-gradient-to: rgb(17 124 140 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-800:hover {
  --tw-gradient-from: var(--forces-800);
  --tw-gradient-to: rgb(14 91 108 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-900:hover {
  --tw-gradient-from: var(--forces-900);
  --tw-gradient-to: rgb(10 75 92 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-950:hover {
  --tw-gradient-from: var(--forces-950);
  --tw-gradient-to: rgb(6 54 86 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-forces-100:hover {
  --tw-gradient-to: var(--forces-100);
}
.hover\:to-forces-200:hover {
  --tw-gradient-to: var(--forces-200);
}
.hover\:to-forces-300:hover {
  --tw-gradient-to: var(--forces-300);
}
.hover\:to-forces-400:hover {
  --tw-gradient-to: var(--forces-400);
}
.hover\:to-forces-500:hover {
  --tw-gradient-to: var(--forces-500);
}
.hover\:to-forces-600:hover {
  --tw-gradient-to: var(--forces-600);
}
.hover\:to-forces-700:hover {
  --tw-gradient-to: var(--forces-700);
}
.hover\:to-forces-800:hover {
  --tw-gradient-to: var(--forces-800);
}
.hover\:to-forces-900:hover {
  --tw-gradient-to: var(--forces-900);
}
.hover\:to-forces-950:hover {
  --tw-gradient-to: var(--forces-950);
}

/* Forces Dark Color Utility Classes */
/* Background Colors */
.bg-forces-dark-50 {
  background-color: var(--forces-dark-50);
}
.bg-forces-dark-100 {
  background-color: var(--forces-dark-100);
}
.bg-forces-dark-200 {
  background-color: var(--forces-dark-200);
}
.bg-forces-dark-300 {
  background-color: var(--forces-dark-300);
}
.bg-forces-dark-400 {
  background-color: var(--forces-dark-400);
}
.bg-forces-dark-500 {
  background-color: var(--forces-dark-500);
}
.bg-forces-dark-600 {
  background-color: var(--forces-dark-600);
}
.bg-forces-dark-700 {
  background-color: var(--forces-dark-700);
}
.bg-forces-dark-800 {
  background-color: var(--forces-dark-800);
}
.bg-forces-dark-900 {
  background-color: var(--forces-dark-900);
}
.bg-forces-dark-950 {
  background-color: var(--forces-dark-950);
}

/* Text Colors */
.text-forces-dark-50 {
  color: var(--forces-dark-50);
}
.text-forces-dark-100 {
  color: var(--forces-dark-100);
}
.text-forces-dark-200 {
  color: var(--forces-dark-200);
}
.text-forces-dark-300 {
  color: var(--forces-dark-300);
}
.text-forces-dark-400 {
  color: var(--forces-dark-400);
}
.text-forces-dark-500 {
  color: var(--forces-dark-500);
}
.text-forces-dark-600 {
  color: var(--forces-dark-600);
}
.text-forces-dark-700 {
  color: var(--forces-dark-700);
}
.text-forces-dark-800 {
  color: var(--forces-dark-800);
}
.text-forces-dark-900 {
  color: var(--forces-dark-900);
}
.text-forces-dark-950 {
  color: var(--forces-dark-950);
}

/* Border Colors */
.border-forces-dark-50 {
  border-color: var(--forces-dark-50);
}
.border-forces-dark-100 {
  border-color: var(--forces-dark-100);
}
.border-forces-dark-200 {
  border-color: var(--forces-dark-200);
}
.border-forces-dark-300 {
  border-color: var(--forces-dark-300);
}
.border-forces-dark-400 {
  border-color: var(--forces-dark-400);
}
.border-forces-dark-500 {
  border-color: var(--forces-dark-500);
}
.border-forces-dark-600 {
  border-color: var(--forces-dark-600);
}
.border-forces-dark-700 {
  border-color: var(--forces-dark-700);
}
.border-forces-dark-800 {
  border-color: var(--forces-dark-800);
}
.border-forces-dark-900 {
  border-color: var(--forces-dark-900);
}
.border-forces-dark-950 {
  border-color: var(--forces-dark-950);
}

/* Gradient Background Classes */
.from-forces-dark-50 {
  --tw-gradient-from: var(--forces-dark-50);
  --tw-gradient-to: rgb(248 250 252 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-100 {
  --tw-gradient-from: var(--forces-dark-100);
  --tw-gradient-to: rgb(241 245 249 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-200 {
  --tw-gradient-from: var(--forces-dark-200);
  --tw-gradient-to: rgb(226 232 240 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-300 {
  --tw-gradient-from: var(--forces-dark-300);
  --tw-gradient-to: rgb(203 213 225 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-400 {
  --tw-gradient-from: var(--forces-dark-400);
  --tw-gradient-to: rgb(148 163 184 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-500 {
  --tw-gradient-from: var(--forces-dark-500);
  --tw-gradient-to: rgb(100 116 139 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-600 {
  --tw-gradient-from: var(--forces-dark-600);
  --tw-gradient-to: rgb(71 85 105 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-700 {
  --tw-gradient-from: var(--forces-dark-700);
  --tw-gradient-to: rgb(51 65 85 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-800 {
  --tw-gradient-from: var(--forces-dark-800);
  --tw-gradient-to: rgb(30 41 59 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-900 {
  --tw-gradient-from: var(--forces-dark-900);
  --tw-gradient-to: rgb(15 23 42 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-forces-dark-950 {
  --tw-gradient-from: var(--forces-dark-950);
  --tw-gradient-to: rgb(2 6 23 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-forces-dark-50 {
  --tw-gradient-to: var(--forces-dark-50);
}
.to-forces-dark-100 {
  --tw-gradient-to: var(--forces-dark-100);
}
.to-forces-dark-200 {
  --tw-gradient-to: var(--forces-dark-200);
}
.to-forces-dark-300 {
  --tw-gradient-to: var(--forces-dark-300);
}
.to-forces-dark-400 {
  --tw-gradient-to: var(--forces-dark-400);
}
.to-forces-dark-500 {
  --tw-gradient-to: var(--forces-dark-500);
}
.to-forces-dark-600 {
  --tw-gradient-to: var(--forces-dark-600);
}
.to-forces-dark-700 {
  --tw-gradient-to: var(--forces-dark-700);
}
.to-forces-dark-800 {
  --tw-gradient-to: var(--forces-dark-800);
}
.to-forces-dark-900 {
  --tw-gradient-to: var(--forces-dark-900);
}
.to-forces-dark-950 {
  --tw-gradient-to: var(--forces-dark-950);
}

.via-forces-dark-50 {
  --tw-gradient-to: rgb(248 250 252 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-50),
    var(--tw-gradient-to);
}
.via-forces-dark-100 {
  --tw-gradient-to: rgb(241 245 249 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-100),
    var(--tw-gradient-to);
}
.via-forces-dark-200 {
  --tw-gradient-to: rgb(226 232 240 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-200),
    var(--tw-gradient-to);
}
.via-forces-dark-300 {
  --tw-gradient-to: rgb(203 213 225 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-300),
    var(--tw-gradient-to);
}
.via-forces-dark-400 {
  --tw-gradient-to: rgb(148 163 184 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-400),
    var(--tw-gradient-to);
}
.via-forces-dark-500 {
  --tw-gradient-to: rgb(100 116 139 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-500),
    var(--tw-gradient-to);
}
.via-forces-dark-600 {
  --tw-gradient-to: rgb(71 85 105 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-600),
    var(--tw-gradient-to);
}
.via-forces-dark-700 {
  --tw-gradient-to: rgb(51 65 85 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-700),
    var(--tw-gradient-to);
}
.via-forces-dark-800 {
  --tw-gradient-to: rgb(30 41 59 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-800),
    var(--tw-gradient-to);
}
.via-forces-dark-900 {
  --tw-gradient-to: rgb(15 23 42 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-900),
    var(--tw-gradient-to);
}
.via-forces-dark-950 {
  --tw-gradient-to: rgb(2 6 23 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--forces-dark-950),
    var(--tw-gradient-to);
}

/* Hover States */
.hover\:bg-forces-dark-50:hover {
  background-color: var(--forces-dark-50);
}
.hover\:bg-forces-dark-100:hover {
  background-color: var(--forces-dark-100);
}
.hover\:bg-forces-dark-200:hover {
  background-color: var(--forces-dark-200);
}
.hover\:bg-forces-dark-300:hover {
  background-color: var(--forces-dark-300);
}
.hover\:bg-forces-dark-400:hover {
  background-color: var(--forces-dark-400);
}
.hover\:bg-forces-dark-500:hover {
  background-color: var(--forces-dark-500);
}
.hover\:bg-forces-dark-600:hover {
  background-color: var(--forces-dark-600);
}
.hover\:bg-forces-dark-700:hover {
  background-color: var(--forces-dark-700);
}
.hover\:bg-forces-dark-800:hover {
  background-color: var(--forces-dark-800);
}
.hover\:bg-forces-dark-900:hover {
  background-color: var(--forces-dark-900);
}
.hover\:bg-forces-dark-950:hover {
  background-color: var(--forces-dark-950);
}

.hover\:text-forces-dark-50:hover {
  color: var(--forces-dark-50);
}
.hover\:text-forces-dark-100:hover {
  color: var(--forces-dark-100);
}
.hover\:text-forces-dark-200:hover {
  color: var(--forces-dark-200);
}
.hover\:text-forces-dark-300:hover {
  color: var(--forces-dark-300);
}
.hover\:text-forces-dark-400:hover {
  color: var(--forces-dark-400);
}
.hover\:text-forces-dark-500:hover {
  color: var(--forces-dark-500);
}
.hover\:text-forces-dark-600:hover {
  color: var(--forces-dark-600);
}
.hover\:text-forces-dark-700:hover {
  color: var(--forces-dark-700);
}
.hover\:text-forces-dark-800:hover {
  color: var(--forces-dark-800);
}
.hover\:text-forces-dark-900:hover {
  color: var(--forces-dark-900);
}
.hover\:text-forces-dark-950:hover {
  color: var(--forces-dark-950);
}

.hover\:border-forces-dark-50:hover {
  border-color: var(--forces-dark-50);
}
.hover\:border-forces-dark-100:hover {
  border-color: var(--forces-dark-100);
}
.hover\:border-forces-dark-200:hover {
  border-color: var(--forces-dark-200);
}
.hover\:border-forces-dark-300:hover {
  border-color: var(--forces-dark-300);
}
.hover\:border-forces-dark-400:hover {
  border-color: var(--forces-dark-400);
}
.hover\:border-forces-dark-500:hover {
  border-color: var(--forces-dark-500);
}
.hover\:border-forces-dark-600:hover {
  border-color: var(--forces-dark-600);
}
.hover\:border-forces-dark-700:hover {
  border-color: var(--forces-dark-700);
}
.hover\:border-forces-dark-800:hover {
  border-color: var(--forces-dark-800);
}
.hover\:border-forces-dark-900:hover {
  border-color: var(--forces-dark-900);
}
.hover\:border-forces-dark-950:hover {
  border-color: var(--forces-dark-950);
}

.hover\:from-forces-dark-50:hover {
  --tw-gradient-from: var(--forces-dark-50);
  --tw-gradient-to: rgb(248 250 252 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-100:hover {
  --tw-gradient-from: var(--forces-dark-100);
  --tw-gradient-to: rgb(241 245 249 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-200:hover {
  --tw-gradient-from: var(--forces-dark-200);
  --tw-gradient-to: rgb(226 232 240 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-300:hover {
  --tw-gradient-from: var(--forces-dark-300);
  --tw-gradient-to: rgb(203 213 225 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-400:hover {
  --tw-gradient-from: var(--forces-dark-400);
  --tw-gradient-to: rgb(148 163 184 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-500:hover {
  --tw-gradient-from: var(--forces-dark-500);
  --tw-gradient-to: rgb(100 116 139 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-600:hover {
  --tw-gradient-from: var(--forces-dark-600);
  --tw-gradient-to: rgb(71 85 105 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-700:hover {
  --tw-gradient-from: var(--forces-dark-700);
  --tw-gradient-to: rgb(51 65 85 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-800:hover {
  --tw-gradient-from: var(--forces-dark-800);
  --tw-gradient-to: rgb(30 41 59 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-900:hover {
  --tw-gradient-from: var(--forces-dark-900);
  --tw-gradient-to: rgb(15 23 42 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-forces-dark-950:hover {
  --tw-gradient-from: var(--forces-dark-950);
  --tw-gradient-to: rgb(2 6 23 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-forces-dark-50:hover {
  --tw-gradient-to: var(--forces-dark-50);
}
.hover\:to-forces-dark-100:hover {
  --tw-gradient-to: var(--forces-dark-100);
}
.hover\:to-forces-dark-200:hover {
  --tw-gradient-to: var(--forces-dark-200);
}
.hover\:to-forces-dark-300:hover {
  --tw-gradient-to: var(--forces-dark-300);
}
.hover\:to-forces-dark-400:hover {
  --tw-gradient-to: var(--forces-dark-400);
}
.hover\:to-forces-dark-500:hover {
  --tw-gradient-to: var(--forces-dark-500);
}
.hover\:to-forces-dark-600:hover {
  --tw-gradient-to: var(--forces-dark-600);
}
.hover\:to-forces-dark-700:hover {
  --tw-gradient-to: var(--forces-dark-700);
}
.hover\:to-forces-dark-800:hover {
  --tw-gradient-to: var(--forces-dark-800);
}
.hover\:to-forces-dark-900:hover {
  --tw-gradient-to: var(--forces-dark-900);
}
.hover\:to-forces-dark-950:hover {
  --tw-gradient-to: var(--forces-dark-950);
}

/* About Page Specific Styles */
/* Animation delays */
.animation-delay-200 {
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

.animation-delay-400 {
  animation-delay: 0.4s;
  animation-fill-mode: both;
}

.animation-delay-600 {
  animation-delay: 0.6s;
  animation-fill-mode: both;
}

.animation-delay-800 {
  animation-delay: 0.8s;
  animation-fill-mode: both;
}

.animation-delay-1000 {
  animation-delay: 1s;
  animation-fill-mode: both;
}

.animation-delay-2000 {
  animation-delay: 2s;
  animation-fill-mode: both;
}

/* Fade in up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out;
}

/* Hero background zoom animation */
@keyframes subtle-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

/* Glass effect */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* ==================== DROPDOWN MENU STYLES ==================== */

/* Desktop Dropdown */
.dropdown-container {
  position: relative;
}

.dropdown-menu {
  z-index: 50;
  min-width: 200px;
}

.dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-container:hover .dropdown-icon {
  transform: rotate(180deg);
}

/* Mobile Dropdown */
.mobile-dropdown-menu {
  transition: all 0.3s ease;
}

.mobile-dropdown-icon {
  transition: transform 0.3s ease;
}

/* ==================== SPECIAL ANIMATIONS ==================== */

/* Floating Animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 8s ease-in-out infinite 2s;
}

/* Fade in animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-600 {
  animation-delay: 0.6s;
}

/* Hover effects for opportunity cards */
.hover\:shadow-3xl:hover {
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}

/* Custom gradient backgrounds */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Custom border animations */
@keyframes border-dance {
  0%,
  100% {
    border-color: rgba(251, 191, 36, 0.3);
  }
  50% {
    border-color: rgba(251, 191, 36, 0.8);
  }
}

.animate-border-dance {
  animation: border-dance 3s ease-in-out infinite;
}

/* Pulse animation for special badges */
@keyframes special-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.animate-special-pulse {
  animation: special-pulse 2s ease-in-out infinite;
}