.image-zoom-container {
    /* Hides the edges of the scaled-up image */
    overflow: hidden;
    display: inline-block;
	border-radius:20px;
}

.image-zoom-container img {
    transform: scale(1.4); 
    transition: transform 2.0s ease-out;
}

.image-zoom-container.in-view img {
    transform: scale(1.0); /* Your desired zoom level */
}


/* 1. Make the default (static) header transparent */
#site-header .header-five-inner {
  background: transparent !important; /* Changed this from #fff to transparent */
  border-radius: 55px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-top: 20px !important;
  
  /* Optional: Add a smooth transition for the color change */
  transition: background-color 0.3s ease;
}

/* 2. Keep the sticky wrapper transparent (so the inner element's corners look good) */
#site-header-sticky-wrapper.is-sticky #site-header {
  position: fixed;
  background: transparent !important; /* This is correct */
}

/* 3. NEW: Make the inner header white ONLY WHEN sticky */
#site-header-sticky-wrapper.is-sticky #site-header .header-five-inner {
  background: #fff !important; /* This makes the sticky menu white */
}