@keyframes heroFade {
  /* Desert */
  0%   { background-image: url("/images/desert.jpg"); opacity: 1; }
  20%  { background-image: url("/images/desert.jpg"); opacity: 1; }
  25%  { background-image: url("/images/desert.jpg"); opacity: 1; }

  /* Waves (swap happens while still invisible) */
  25%  { background-image: url("/images/waves.jpg"); opacity: 1; }
  30%  { background-image: url("/images/waves.jpg"); opacity: 1; }
  45%  { background-image: url("/images/waves.jpg"); opacity: 1; }
  50%  { background-image: url("/images/waves.jpg"); opacity: 1; }

  /* Forest */
  50%  { background-image: url("/images/forest.jpg"); opacity: 1; }
  55%  { background-image: url("/images/forest.jpg"); opacity: 1; }
  70%  { background-image: url("/images/forest.jpg"); opacity: 1; }
  75%  { background-image: url("/images/forest.jpg"); opacity: 1; }

  /* Mountains */
  75%  { background-image: url("/images/mountains.jpg"); opacity: 1; }
  80%  { background-image: url("/images/mountains.jpg"); opacity: 1; }
  95%  { background-image: url("/images/mountains.jpg"); opacity: 1; }

  100% { background-image: url("/images/desert.jpg"); opacity: 1; }
}

/* center items to page  */
.portfolio-items {
    display: flex;
    flex-direction: column;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 0px;
  margin-bottom: 30px;
}

.portfolio-item {
    display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
    overflow: hidden;              /* crops the zoom */
  border: solid 10px #ffffff2f;  /* move border here so it doesn’t scale */
  box-shadow: rgba(0, 0, 0, 0.553) 0px 5px 15px;
  width: 600px;
}

.portfolio-item > img {
    width: 100%;
  height: auto;
  border: solid 5px #ffffff2f;
  transition: transform 0.3s ease;
}

.contact-us-button {
  margin-top: 50px;
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    .portfolio-items {
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;

}
  .portfolio-item {
    width: 90%;
    height: auto;
  }
}