@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

  :root {
      --primary: #6366f1;
      --secondary: #8b5cf6;
      --accent: #06b6d4;
      --dark: #0f172a;
      --light: #f8fafc;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Inter', sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
      font-family: 'Space Grotesk', sans-serif;
  }

  /* Glassmorphism */
  .glass {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .glass-dark {
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Gradient Text */
  .gradient-text {
      background: linear-gradient(135deg, var(--primary), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .gradient-text-alt {
      background: linear-gradient(135deg, #f59e0b, #ef4444);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  /* Navigation */
  .nav-link {
      position: relative;
      transition: color 0.3s;
  }

  .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--primary), var(--accent));
      transition: width 0.3s ease;
  }

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

  /* Hero Gradient */
  .hero-gradient {
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  }

  /* Cards */
  .card-modern {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-modern:hover {
      transform: translateY(-10px) scale(1.02);
      border-color: var(--primary);
      box-shadow: 0 25px 50px rgba(99, 102, 241, 0.15);
  }

  /* Circular Progress */
  .circular-progress {
      position: relative;
      width: 120px;
      height: 120px;
  }

  .circular-progress svg {
      transform: rotate(-90deg);
  }

  .circular-progress .percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.5rem;
      font-weight: 700;
  }

  /* Particle Canvas */
  #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }

  /* Stats Counter */
  .stat-card {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.1));
      border: 1px solid rgba(99, 102, 241, 0.2);
  }

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

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

  ::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border-radius: 4px;
  }

  /* Glow Effect */
  .glow {
      box-shadow: 0 0 20px rgba(99, 102, 241, 0.3),
          0 0 40px rgba(99, 102, 241, 0.1);
  }

  .glow-accent {
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.3),
          0 0 40px rgba(6, 182, 212, 0.1);
  }

  /* Button Styles */
  .btn-primary {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      z-index: 1;
  }

  .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--accent), var(--primary));
      transition: left 0.3s;
      z-index: -1;
  }

  .btn-primary:hover::before {
      left: 0;
  }

  /* Timeline */
  .timeline-line {
      background: linear-gradient(180deg, var(--primary), var(--accent));
  }

  /* Section Divider */
  .section-divider {
      height: 100px;
      background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.05));
  }

  /* Dark mode (already dark by default - this is a dark theme portfolio) */

  /* Mobile menu */
  .mobile-menu-open {
      animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }

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

  /* Floating animation */
  @keyframes float {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-20px);
      }
  }

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

  /* Skill bars */
  .skill-bar-bg {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 100px;
      overflow: hidden;
  }

  .skill-bar-fill {
      height: 100%;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }