@charset "UTF-8";

#service_banner {
    position: relative;
    overflow: hidden;
    background-image: none !important; /* inline bg overwrite */
  }
  #service_banner .parallax_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%;               /* extra height jate move korle gap na dekhay */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;     /* full width + full height */
    will-change: transform;
    z-index: 0;
    pointer-events: none;
  }
  #service_banner .content_wrapper {
    position: relative;
    z-index: 1;
  }

#banner_link_common + .contents_box01  {

 height: 400px;
}

@media screen and (max-width: 900px) {
  #banner_link_common + .contents_box01 {
    height: 200px;
  }
}


/* applied only after JS adds the class, so the normal background shows until then */
#banner_link_common + .contents_box01.is-fixed-bg {
  position: relative;
  min-height: 400px;
  background-image: none !important;   /* hide the normal background; the pseudo-element draws it instead */
  clip-path: inset(0);                 /* clips the fixed image to this section */
}

#banner_link_common + .contents_box01.is-fixed-bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;                      /* stable on mobile when the address bar hides */
  z-index: -1;
  background-image: var(--fixed-bg);   /* value comes from JS */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  pointer-events: none;
}

#banner_link_common + .contents_box01.is-fixed-bg .content_wrapper {
  position: relative;
  z-index: 1;
}