/* ZamZam homepage hero image final fix
   Keeps the original soft left fade effect while forcing the uploaded hero image to fill the image area without the blue/empty edge and without cropping the doctor's head. */

.home .hero,
body:not(.about-page):not(.founder-page):not(.services-page):not(.insurance-page):not(.contact-page) .hero{
  overflow:hidden !important;
  background:linear-gradient(90deg,#fff 0%,#fff 42%,#f5f8fb 100%) !important;
}

.hero-img{
  overflow:hidden !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  clip-path:none !important;
}

.hero-img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center top !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:none !important;
}

/* Restore the visual fade, but as an overlay only. This does not create layout space or alter the image asset. */
.hero-img::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:24% !important;
  z-index:3 !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.92) 28%,
    rgba(255,255,255,.55) 64%,
    rgba(255,255,255,0) 100%) !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

.hero-img::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:1px !important;
  z-index:4 !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 0 16px 12px rgba(255,255,255,.55) !important;
  pointer-events:none !important;
}

@media (min-width:901px){
  .hero-img{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    width:58% !important;
    height:610px !important;
  }

  .hero-img img{
    object-position:center top !important;
  }
}

@media (max-width:900px){
  .hero-img{
    position:relative !important;
    width:100% !important;
    height:430px !important;
  }

  .hero-img::before,
  .hero-img::after{
    display:none !important;
    content:none !important;
  }

  .hero-img img{
    object-position:center top !important;
  }
}

@media (max-width:560px){
  .hero-img{
    height:390px !important;
  }

  .hero-img img{
    object-position:center top !important;
  }
}


/* 20% zoom image only */
.hero-img{overflow:hidden !important;}
.hero-img img{transform:scale(1.4) !important; transform-origin:center 10% !important; object-position:center top !important;}

/* Hero image aesthetic reframing from Zoom40 baseline:
   slightly less zoom, shifted upward, and framed left enough to keep more of the wall logo visible. */
@media (min-width:901px){
  .hero-img{
    overflow:hidden !important;
  }
  .hero-img img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:38% top !important;
    transform:translateY(-28px) scale(1.28) !important;
    transform-origin:center top !important;
  }
}

@media (max-width:900px){
  .hero-img img{
    object-fit:cover !important;
    object-position:center top !important;
    transform:scale(1.12) !important;
    transform-origin:center top !important;
  }
}