.parallax-div {
  position: relative;
  justify-content: center;
  align-content: center;
  max-width: 100vw;
  aspect-ratio: 16 / 9;
  border-width: 0px;
  border-style: solid;
  border-color: red;
  overflow: hidden;
  /* margin-bottom: 50vw; */

  opacity: 0;
  /* Use visibility to ensure the element doesn't take up space when hidden */
  visibility: hidden; 
  /* Add transition properties for the fade effect */
  transition: opacity 1s ease-in, visibility 0s linear 1s;



  border: red solid 0px;

    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 95%, transparent 100%);

}

.parallax-div.is-visible {
  /* End state: fully visible */
  opacity: 1;
  visibility: visible;
  /* Override the previous transition delay for visibility when fading in */
  transition-delay: 0s; 
}


.loader-home {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.loader-home-icon {
    border: 3px solid #f3f3f3d5;
    border-radius: 50%;
    border-top: 3px solid #3498db;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;

}


.loader-home-image {
    position: relative;
    margin: auto;
    box-sizing: border-box;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    border: 4vw solid #0b1d26;   
    transform-origin: 50% 50%;
    transform: perspective(18vw) rotateX(66deg);
    animation: spinner-wiggle 1.2s infinite;
  }
  .loader-home-image:before,
  .loader-home-image:after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 4px solid #0000;
    animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
      spinner-fade 1.2s linear infinite;
  }
  .loader-home-image:before {
    /* border-top-color: #fff; */
    border-top-color: #8dcbf5;
  }
  .loader-home-image:after {
    border-top-color: #5a69f7;
    /* border-top-color: #ff3d00; */
    animation-delay: 0.4s;
  }

  @keyframes spinner-spin {
    100% { transform: rotate(360deg)}
  }
  @keyframes spinner-fade {
    25%, 75% { opacity: 0.1}
    50% { opacity: 1 }
  }
   



.parallax-div img {
  width: 100%;
  height: auto;
  position: absolute;
}

.parallax-div img.street-sky {
  z-index: 1;
  position: absolute;
  margin-top: 0px;
  top: 0;
  left: 0;
}

.parallax-div img.street-far {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0;
  transform: translateY(40px);
}

.parallax-div img.street-mid {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0;
  transform: translateY(40px);
}

.parallax-div img.street-front {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translateY(46px);
}

@media (min-width: 500px) {

  .parallax-div {
    position: relative;
    justify-content: center;
    align-content: center;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(9, 255, 0);
    overflow: hidden;
    /* margin-bottom: 50vw; */

  
  }

  .parallax-div img.street-sky {
    z-index: 1;
    position: absolute;
    margin-top: 0px;
    top: 0;
    left: 0;
  }

  .parallax-div img.street-far {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    /* transform: translateY(40px); */
    transform: translateY(22px);
  }

  .parallax-div img.street-mid {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    /* transform: translateY(40px); */
    transform: translateY(28px);
  }

  .parallax-div img.street-front {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    /* transform: translateY(46px); */
    transform: translateY(28px);
  }

}


@media (min-width: 600px) {
  .parallax-div {
    position: relative;
    justify-content: center;
    align-content: center;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(42, 56, 253);
    overflow: hidden;
    /* margin-bottom: 50vw; */

  }

   .parallax-div img.street-far {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    /* transform: translateY(40px); */
    transform: translateY(20px);
  }

  .parallax-div img.street-mid {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    /* transform: translateY(40px); */
    transform: translateY(25px);
  }

  .parallax-div img.street-front {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    /* transform: translateY(46px); */
    transform: translateY(27px);
  }


}


@media (min-width: 700px) {

  .parallax-div {
    position: relative;
    justify-content: center;
    align-content: center;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    border-width: 0px;
    border-style: solid;
    border-color: red;
    overflow: hidden;
    /* margin-bottom: 50vw; */

  }


  .parallax-div img.street-sky {
    z-index: 1;
    position: absolute;
    margin-top: 0px;
    top: 0;
    left: 0;
  }

  .parallax-div img.street-far {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(36px);
  }

  .parallax-div img.street-mid {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(40px);
  }

  .parallax-div img.street-front {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateY(42px);
  }

}


@media (min-width: 1000px) {

  .parallax-div {
    position: relative;
    justify-content: center;
    align-content: center;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(192, 224, 10);
    overflow: hidden;
    /* margin-bottom: 50vw; */

  }


  .parallax-div img.street-sky {
    z-index: 1;
    position: absolute;
    margin-top: 0px;
    top: 0;
    left: 0;
  }

  .parallax-div img.street-far {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(40px);
  }

  .parallax-div img.street-mid {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(40px);
  }

  .parallax-div img.street-front {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateY(46px);
  }

}