/* Custom styling */

/* Header Background */
.header-bg {
    background-image: url(img/harmonix-cover-photo.webp); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  }
  
/* Website body */
body {
    font-family: "Arial", sans-serif;
  }
  
  .w3-bar {
    background-color: #31bde0;
  }
  
  .w3-bar-item {
    font-size: 16px;
  }
  
  .w3-container h2 {
    font-family: "Arial", sans-serif;
    color: #333;
  }
  

  .footer {
    background-color: #4c8eaf;
    padding: 10px 0;
    text-align: center;
    color: white;
  }
  
/* Portfolio Section */
.portfolio-section {
  background-color: #f9f9f9;
  padding: 64px 0;
  text-align: center; /* Center the content */
}

.portfolio-section h2 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 40px;
}

/* Portfolio Item Styling */
.portfolio-section .portfolio-item {
  width: 100%;
  max-width: 100%; /* Ensure full width on smaller screens */
  margin: 0 auto 30px auto; /* Center and space out items */
  text-align: center;
  transition: transform 0.3s ease;
}

/* Image Styling */
.portfolio-section .portfolio-item img {
  width: 100%;
  height: 300px; /* Uniform height for all images */
  object-fit: cover; /* Ensure images fit nicely */
  transition: transform 0.3s ease;
}

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

/* Text Styling */
.portfolio-section p {
  font-size: 1.1rem;
  color: #666;
  margin-top: 10px;
}

/* Grid Layout for Larger Screens */
@media (min-width: 600px) {
  .portfolio-section .portfolio-item {
      display: inline-block;
      width: 23%; /* Four items per row */
      margin-right: 2%;
  }

  .portfolio-section .portfolio-item:nth-child(4n) {
      margin-right: 0; /* Remove margin from the last item */
  }
}