[data-home-bg-container] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-overall-home-bg-img] {
  background-color: rgb(31 21 21 / 12%);
  position: absolute;
  isolation: isolate;
  z-index: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  /* background img variable */
  --bg-over-img: './background.jpg';
  
  img {
    position: absolute;
    width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.main-content-sec {
  position: inherit;
  z-index: 1;
  background-color: rgb(31 21 21 / 12%);
  background-image: url('./background.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: fit-content;
  background-position: center center;
  height: 100dvh;
  width: 100%;
  overflow: auto;
}

@media (max-width: 500px) {
  .main-content-sec {
    background-size: cover;
  }
}