/* Full hero backdrop, with a readable white-to-blue overlay. */
#hero {
  position: relative;
  isolation: isolate;
  background: #edf5fd;
  overflow: hidden;
}
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/hero-goclick-it-v20.webp") center center / cover no-repeat;
}
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(248,251,255,.90) 0%, rgba(248,251,255,.85) 30%, rgba(248,251,255,.73) 43%, rgba(239,247,255,.55) 53%, rgba(239,247,255,.13) 70%, rgba(231,242,255,.04) 100%);
}
#hero .hero-layout {
  display: flex;
  align-items: center;
  min-height: 660px;
  padding-block: 80px;
}
#hero .hero-content { width: 54%; max-width: 650px; }
@media (max-width: 1199px) {
  #hero .hero-layout { min-height: 610px; padding-block: 65px; }
  #hero .hero-content { width: 60%; }
  #hero::after { background: linear-gradient(90deg,rgba(248,251,255,.93) 0%,rgba(248,251,255,.87) 35%,rgba(248,251,255,.72) 55%,rgba(239,247,255,.15) 82%); }
}
@media (max-width: 767px) {
  #hero .hero-layout { min-height: 560px; padding-block: 56px; }
  #hero .hero-content { width: 100%; max-width: 580px; }
  #hero::before { background-size: cover; background-position: 58% top; }
  #hero::after { background: linear-gradient(90deg,rgba(248,251,255,.98),rgba(248,251,255,.91) 60%,rgba(239,247,255,.83)); }
}
@media (max-width: 575px) {
  #hero .hero-layout { min-height: 0; padding-block: 48px 52px; }
}