/* Hero background with red tint overlay */
#hero {
  position: relative;
  height: 100vh;
  background: linear-gradient(rgba(255,0,0,0.4), rgba(255,0,0,0.4)), url("../img/cruiseship.avif") center/cover no-repeat;
  background-size: cover;
  display: flex; align-items: center; justify-content: center;
  color: white; text-align: center;
}
/* Portfolio overlay */
.portfolio-item { overflow: hidden; }
.portfolio-item .overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.portfolio-item:hover .overlay { opacity: 1; }