body, header, footer {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern Font */
}

header, footer {
  text-align: center;
  padding: 20px;
}


#project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
  gap: 20px; /* Consistent spacing between projects */
  padding: 20px;
}

.project {
  position: relative;
  cursor: pointer;
  overflow: hidden; /* Keep everything within bounds */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  aspect-ratio: 9 / 12; /* Set consistent aspect ratio for all project cards */
}

.project img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* Zoom and crop images to fill the container */
  object-position: center; /* Center the image within the crop */
  transition: transform 0.5s ease; /* Smooth transition for zoom effect */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project:hover .overlay {
  opacity: 1;
}

.project:hover img {
  transform: scale(1.1); /* Zoom effect on hover */
}

.project-info {
  color: white;
  text-align: center;
  padding: 15px; /* Padding for text inside overlay */
}

footer p {
  color: #ccc;
  margin: 20px 0;
  font-size: 0.9rem;
}

.home-button {
  position: absolute; /* Fixed position */
  top: 40px; /* Distance from the top */
  left: 40px; /* Distance from the left */
  font-size: 24px; /* Icon size */
  color: black; /* Icon color */
  padding: 10px; /* Padding around the icon */
  border-radius: 50%; /* Circular button */
  text-decoration: none; /* Removes underline from the icon */
  z-index: 1000; /* Makes sure the button is on top */
  transition: transform 0.5s ease, color 3s ease; /* Smooth transition for transform and color */
}

.home-button:hover {
color: #C41E3A;
transform: scale(1.8); /* Enlarge icons on hover */ 
}