body {
        background-color: #0a0a0a;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
    }

    .navbar {
        background: rgba(33, 37, 41, 0.95) !important;
        backdrop-filter: blur(10px);
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
    }
    .hero-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      background: linear-gradient(45deg, #0a0a0a, #1a1a1a);
      padding-top: 80px;
  }

  .profile-image {
      border: 4px solid #0d6efd;
      transition: transform 0.3s ease;
  }

  .profile-image:hover {
      transform: scale(1.05);
  }
  .contact-form input, .contact-form textarea {
      background: #fff;
      border: 1px solid #333;
      color: white;
  }

  .contact-form input:focus, .contact-form textarea:focus {
      background: #242424;
      border-color: #0d6efd;
      color: white;
      box-shadow: none;
  }
  .social-links {
      margin-top: 2rem;
  }

  .social-links a {
      color: white;
      margin: 0 10px;
      font-size: 1.5rem;
      transition: color 0.3s ease;
  }

  .social-links a:hover {
      color: #0d6efd;
  }

  .experience-item {
      padding: 1rem;
      background: #1a1a1a;
      border-left: 3px solid #0d6efd;
      margin-bottom: 1rem;
      transition: transform 0.3s ease;
  }
  .social-links {
      margin-top: 2rem;
  }

  .social-links a {
      color: white;
      margin: 0 10px;
      font-size: 1.5rem;
      transition: color 0.3s ease;
  }

  .social-links a:hover {
      color: #0d6efd;
  }
  .project-card {
      background: #ffffff;
      border: 1px solid #333;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      color: #000000;
  }

  .project-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  }
  .experience-item {
      padding: 1rem;
      background: #1a1a1a;
      border-left: 3px solid #0d6efd;
      margin-bottom: 1rem;
      transition: transform 0.3s ease;
  }
  .experience-item:hover {
      transform: translateX(10px);
  }

  @keyframes slideIn {
      from { transform: translateY(50px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
  }

  .animate-on-scroll {
      animation: slideIn 1s ease-out;
  }