.portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      padding: 2rem;
  }

  .portfolio-item {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
  }

  .portfolio-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
  }

  .portfolio-item:hover img {
      transform: scale(1.05);
  }

  .portfolio-caption {
      position: absolute;
      bottom: 0;
      background: rgba(26, 35, 126, 0.8);
      color: #fff;
      width: 100%;
      text-align: center;
      padding: 0.5rem;
  }

  .portfolio-hero {
      background: linear-gradient(to bottom right, #1a237e, #303f9f);
      color: white;
      padding: 100px 20px 60px;
      text-align: center;
  }