/* stylling for background fade-out */
:root {
  --Home-Container-Height: 69.85vw;
  --Home-Overlay-animation-duration: 6s;
}

#HomeOverlayBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, white, rgb(217, 224, 229),rgb(186, 203, 209));
  z-index: 5;
  animation: HomeOverlayBoxGrow var(--Home-Overlay-animation-duration);
  animation-fill-mode: forwards;
}

#HomeOverlayImage {
  width: 30vw;
  
  animation: HomeOverlayImageGrow var(--Home-Overlay-animation-duration);
  animation-fill-mode: forwards;
}

@keyframes HomeOverlayBoxGrow {
  0% {
      opacity: 1;
  }
  60% {
    opacity: 1;
  }
  75% {
      opacity: 1;
  }
  99% {
    transform: scale(1); /*to make it fully disappear at the end*/
  }
  100% {
    opacity: 0;
    transform: scale(0); /*to make it fully disappear at the end*/
  }
}

@keyframes HomeOverlayImageGrow {
  0% {
      transform: scale(0.4);
      opacity: 0;
  }
  60% {
    transform: scale(0.85);  
    opacity: 1;
  }
  75% {
      transform: scale(1);
      opacity: 0;
  }
  99% {
    transform: scale(1); /*to make it fully disappear at the end*/
  }
  100% {
    transform: scale(0); /*to make it fully disappear at the end*/
    opacity: 0;
  }
}

.HomeContainer {
  width: 100vw;
  max-height: 100vh;
  min-height: 35vw;
  /* border: 1px solid black;
  box-sizing: border-box; */
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

#HomeContainer1-2 {
  height: calc(2 * var(--Home-Container-Height));
  max-height: 200vh;
  min-height: 70vw;
  
}

.HomeContainerSingle {
  height: var(--Home-Container-Height);
  max-height: 100vh;
  min-height: 35vw;
}

#HomeContainer7-8-9 {
  height: calc(3 * var(--Home-Container-Height));
  max-height: 300vh;
  min-height: 105vw;
}

#HomeContainer10-11-12 {
  height: calc(3 * var(--Home-Container-Height));
  max-height: 300vh;
  min-height: 105vw;
}
.HomeContainerImg {
  width: 100vw;
  height: var(--Home-Container-Height);
  max-height: 100vh;
  min-height: 35vw;
  /* opacity: 0.5; */
  transition: opacity 0.7s ease;
  position: absolute;
  top:0;
}

.HomeContainerGifOver {
  max-height: 100vh;
  min-height: 35vw;
  position: absolute;
  top: 0;
  left: 0;
}

.HomeContainerSticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100vw;
  height: var(--Home-Container-Height);
  max-height: 100vh;
  min-height: 35vw;
  /* border: 1px solid blue;
  box-sizing: border-box; */
}

.HomeContainerDistanceMeasureBig {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.HomeContainerDistanceMeasureSmall {
  height: var(--Home-Container-Height);
  Width: 100vw;
  max-height: 100vh;
  min-height: 35vw;
  /* border: 1px solid orange;
  box-sizing: border-box; */
}

.HomeContainerImg11Gif{
  animation: gif-animation 2s infinite;
}

.home-text-container {
  /* background-color: rgba(201, 201, 136, 0.7);  */
  border-radius: 1em;
  border: 2vw;
  margin-right: 1.5vw;
   margin-top: 2vw;
   margin-bottom: 1vw;
   margin-left: 1.5vw;
  z-index: 2; 
  position: absolute;
  padding: 2vw; 
  padding-bottom: 1vw;
  
  width: 50%;
  left: 25%; 
  top: 25%;
}


.home-text-container.fadeOnScrollInView {
  transition: 1.5s opacity ease 1s;
  opacity: 0;
  pointer-events: none;
}

.home-text-container.fadeOnScrollInView.show {
  transition: 1.5s opacity ease;
  opacity: 1;
}


.highlight-text{
  color: rgb(198, 107, 43);
}

.home-text{
  
 /* font-family: 'Dela Gothic One', cursive; */
 /* font-family: 'Roboto', serif; */
 /* font-family: 'Young Serif', serif; */
 /* font-family: 'Poppins', sans-serif; */
 font-family: 'Open-sans', serif;
 font-weight: 500;
 font-size: 3vw;
 color: black;
 z-index: 5;
 text-align-last: center;
 text-align: justify;
 line-height: 1.3;

}

/* First, check if the browser supports the 'text-stroke' property
@supports (-webkit-text-stroke: 1px white) or (text-stroke: 1px rgb(0, 0, 0)) {
  
  .home-text {
    -webkit-text-stroke: 1.3px rgb(15 12 24); 
    text-stroke: 1.3px rgb(15 12 24); 
  }
} */


.letter-g{
  font-size: 2.5vw;
}
.letter-gr{
  font-size: 3vw;
}
.letter-gro{
  font-size: 3.7vw;
}
.letter-grow{
  font-size: 5vw;
}

#HomeScrollDownHintBox {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translate(-50%, -50%);
  /* transform: rotate(90deg); */
  cursor: pointer;
  z-index: 1;
  animation: HomeScrollFadeOut 18s 1 forwards;
}

.HomeScrollDownHintSpan {
  display: block;
  width: 1.5vw;
  height: 1.5vw;
  border-bottom: 5px solid var(--AT-gray-2);
  border-right: 5px solid var(--AT-gray-2);
  transform: rotate(45deg);
  margin: -10px;
  animation: HomeScrollDownHintAnimate 2s infinite;
}

#HomeScrollDownHintSpan2 {
  animation-delay: -0.2s;
}

#HomeScrollDownHintSpan3 {
  animation-delay: -0.4s;
}

@keyframes HomeScrollDownHintAnimate {
  0% {
      opacity: 0;
      transform: rotate(45deg) translate(-20px, -20px);
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 0;
      transform: rotate(45deg) translate(20px, 20px);
  }
}

@keyframes HomeScrollFadeOut{
  0%{
    opacity: 0;
  }
  40%{
    opacity: 0;
  }
  41%{
    opacity: 1;
  }
  93%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

#HomeBackToTop {
  background-color: #8baff8;
  border-radius: 15px;
  width: 40px;
  height: 40px;
  z-index: 400;
  position: fixed;
  bottom: 2vw;
  right: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}