/*css grid 2column Mobile First: 1 column wide */
    .portfolio-container {
      display: grid;
      grid-template-columns: 1fr; 
      gap: 10px;
      width: 100%;      /* Fill the grid column */
    }

    .portfolio-container img {
      width: 100%;       /* Force image to match container width */
      height: 100%;      /* Force image to match container height */
      object-fit: cover; /* IMPORTANT: Crops the image to fit without stretching it */
      display: block;    /* Removes the weird small gap at the bottom of images */
    }

    /* PC/Desktop: 2 columns wide (2fr total) */
    @media (min-width: 768px) {
      .portfolio-container {
        grid-template-columns: repeat(2, 1fr);
      }

      .nav-buttons {
        margin-top:20px
      }
    }


    .nav-buttons {
        margin-top:5px
      }

 
 
 
 .item {
  /* Darker base - using semi-transparent black */
  background: rgba(0, 0, 0, 0.4); 
  
  /* Glass effect */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  
  /* Border and Corners */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  
  /* Standard styling */
  padding: 40px;
  color: #e0e0e0;
  text-align: center;
  position: relative;
  overflow: hidden; /* Important to clip the shine effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* The Shine Effect */
.item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Start off-screen */
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: 0.6s;
}

/* Hover States */
.item:hover {
  transform: translateY(-5px);
  background: rgba(0, 0, 0, 0.5); /* Gets slightly darker on hover */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.item:hover::before {
  left: 150%; /* Moves across the item */
}



.item2 {
  /* Darker base - using semi-transparent black */
  background: rgba(0, 0, 0, 0.4); 
  
  /* Glass effect */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  
  /* Border and Corners */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  
  /* Standard styling */
  padding: 40px;
  color: #e0e0e0;
  text-align: center;
  position: relative;
  overflow: hidden; /* Important to clip the shine effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* The Shine Effect */
.item2::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Start off-screen */
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: 0.6s;
}

/* Hover States */
.item2:hover {
  transform: translateY(-5px);
  background: rgba(0, 0, 0, 0.5); /* Gets slightly darker on hover */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.item2:hover::before {
  left: 150%; /* Moves across the item */
}