.portfolio-item {
    position: relative;
    width: 100%;
    aspect-ratio: 32 / 9;
    overflow: hidden;
    background: #333;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
  }

  .portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: transform 0.4s ease, opacity 0.4s ease;
  }
  
  .portfolio-item:hover img {
    transform: scale(1.01);
    opacity: 0.8;
  }



  /* Keyframes for animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

  /* Media Queries */
  @media (max-width: 1024px) {

    .portfolio-item {
      margin-bottom: 20px;
    }

  }