.introBanner {
  aspect-ratio: 16 / 9;
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('../images/bg_banner.png');
  overflow: hidden;
}

@media (max-width: 575px) {
  .introBanner {
    height: 30vh;
    background-size: cover;
  }
}

@media screen and (min-width: 767px) and (max-width: 842.99px){
  .introBanner {
    height: 45vh;
  }
}

.final-image {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 90%;
  display: flex;
  opacity: 0;
  animation:  revealImage 1s ease forwards,
    marqueeScroll 30s linear infinite;
  animation-delay: 5s, 6s;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.home-banner-img{
  height: 100%;
}

.final-image img {
  width: auto;
  height: 100%;
  /* flex-shrink: 0; */
  display: block;
}

.n-container {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
}


@media (max-width: 575px) {
  /* html,
  body {
    overflow-x: hidden;
  } */

  .n-container {
    width: 100px;
  }
}

@media screen and (min-width: 600px) and (max-width: 767px){
  .n-container {
      width: 180px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px){
  .n-container {
      width: 200px;
  }
}


.n-stroke {
  stroke: #E8E8E8;
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 4650;
  stroke-dashoffset: 4650;
  animation: drawStroke 5s ease-in-out forwards,
             smoothFill 2s ease-in-out forwards 5s;
}

.n-fill {
  fill: url(#paint0_linear_4944_6081);
  fill-opacity: 0.5;
  opacity: 0;
  animation: fadeFill 2s ease-in-out forwards;
  animation-delay: 5s;
}


@media (max-width: 768px) {
  .n-stroke {
    stroke-width: 5px;
  }

}

/* .img-stroke {
  stroke: var(--golden);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 12000;
  stroke-dashoffset: 12000;
  animation: drawStroke 3s ease-in-out forwards;
  animation-play-state: paused;
}

section:hover .img-stroke {
  animation-play-state: running;
} */


@keyframes drawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes smoothFill {
  to {
    fill-opacity: 1;
  }
}

@keyframes fadeFill {
  to {
    opacity: 1;
  }
}

@keyframes revealImage {
  to {
    opacity: 1;
  }
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.cloud-path {
  stroke: #A56417;
  stroke-width: 1;
  fill: none;
  stroke-dashoffset: 2000;
  animation:
    drawCloud 3s ease-in-out forwards,
    floatCloud 3s ease-in-out infinite;
}

  @keyframes drawCloud {
  to {
      stroke-dashoffset: 0;
  }
  }

  @keyframes floatCloud {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-20px); }
    100% { transform: translateX(0); }
  }


/* .final-image {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: max-content;
  height: 100%;
  overflow: hidden;
  animation: marqueeScroll 12s linear infinite;
  z-index: 1;
}

.final-image svg {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  display: block;
}

 */