.hero-section {
      background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
      color: white;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .profile-img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border: 4px solid rgba(255, 255, 255, 0.2);
    }

    .section-padding {
      padding: 80px 0;
    }

    .skill-bar {
      height: 10px;
      background-color: #e9ecef;
      border-radius: 5px;
      overflow: hidden;
    }

    .skill-progress {
      height: 100%;
      background: linear-gradient(90deg, #667eea, #764ba2);
      border-radius: 5px;
      transition: width 0.3s ease;
    }

    .project-card {
      transition: transform 0.3s ease;
      border: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .project-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .contact-section {
      background: linear-gradient(135deg, #f8f9ff 0%, #e8f4f8 100%);
      color: #333;
    }

    .tech-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    .frontend-highlight {
      background: linear-gradient(45deg, #0a9e9f, #4ecdc4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: bold;
    }

    .contact-card {
      text-decoration: none;
      color: #333;
      display: block;
      text-align: center;
      padding: 1.5rem;
      transition: all 0.3s ease;
    }

    .contact-card:hover {
      color: #4f46e5;
      text-decoration: none;
      transform: translateY(-3px);
    }

    .contact-icon {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: #4f46e5;
      transition: all 0.3s ease;
    }

    .contact-card:hover .contact-icon {
      color: #06b6d4;
      transform: scale(1.1);
    }

    .contact-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .contact-info {
      opacity: 0.8;
      font-size: 0.95rem;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      background: rgba(79, 70, 229, 0.1);
      border: 1px solid rgba(79, 70, 229, 0.2);
      border-radius: 50%;
      color: #4f46e5;
      text-decoration: none;
      margin: 0 0.5rem;
      transition: all 0.3s ease;
      font-size: 1.2rem;
    }

    .social-link:hover {
      background: #4f46e5;
      color: white;
      transform: translateY(-3px);
      text-decoration: none;
    }