<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('/images/bg.webp');
  min-height: 50%;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("/images/bg.webp");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("/images/bg.webp");
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1400px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 0px;
  }
}
/* /* ===== Gallery Controls Alignment ===== */ */
/* #galleryContainer { */
  /* margin-bottom: 16px; /* space between images and buttons */ */
/* } */

/* /* Center gallery buttons horizontally */ */
/* #galleryContainer + .w3-center, */
/* #galleryContainer + div.w3-center { */
  /* display: flex; */
  /* justify-content: center;   /* center buttons horizontally */ */
  /* gap: 12px;                 /* space between buttons */ */
  /* flex-wrap: wrap;           /* wrap if screen is small */ */
  /* margin-top: 16px; */
/* } */

/* /* Optional: make buttons same size for uniform look */ */
/* #galleryContainer + .w3-center .w3-button { */
  /* min-width: 120px; */
/* } */
.gallery-controls {
  display: flex;
  justify-content: center; /* center horizontally */
  gap: 0px;               /* space between buttons */
  flex-wrap: wrap;         /* wrap on small screens */
  margin-top: 16px;        /* space from images */
}

/* Optional: make all buttons same width */
.gallery-controls .w3-button {
  min-width: 50px;
}

/* ===== Lazy Loading Premium Effect ===== */

.lazy-image {
  filter: blur(20px);
  transform: scale(1.05);
  transition: 
    filter 0.6s ease,
    transform 0.6s ease,
    opacity 0.6s ease;
  opacity: 0.6;
}

.lazy-image.loaded {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

.gallery-content {
    max-width: 1500px;
	margin-left: auto;
    margin-right: auto;
}
#myNavbar{
	height: 100px;
	justify-content: center;
	align-items: center;
}

#myNavbar a{
	margin-top: 30px;
}
#logo{
	margin-top: 0px;
	padding: 0px;
}
#myNavbar a.w3-button:hover {
  background-color: transparent !important;
  color: inherit !important;
}
.galleryContainer img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; /* optional, but usually helpful */

}
/* .gallery{ */
	/* background: url('/images/ph.webp') */
/* } */
</style>