@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*, 
*::before, 
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: "Poppins", sans-serif;
}

header {
    position: absolute;
    z-index: 1;
    width: 100%;
    padding: 0.9rem 0;
    top:0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

main{
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.parallax {
  pointer-events: none;
  transition: 0.45s cubic-bezier(.2,.49,.32,.99);
}

.bg-img{
    position: absolute;
    width: 194.44%;
    top: 3.91%;
    left: 50.69%;
    z-index: 1;
}

.fog-1 {
    position: absolute;
    width: 111.11%;
    top: 49.31%;
    left: 50%;
    z-index: 21;
}

.mountain-10 {
  position: absolute;
  z-index: 3;
  width: 60.42%;
  top: 57.67%;
  left: 65.97%;
}

.fog-2 {
  position: absolute;
  z-index: 4;
  width: 127.29%;
  top: 60.56%;
  left: 50.49%;
}

.mountain-9 {
  position: absolute;
  z-index: 5;
  width: 32.15%;
  top: 63.22%;
  left: 18.82%;
}

.mountain-8 {
  position: absolute;
  z-index: 6;
  width: 54.58%;
  top: 60.67%;
  left: 35.97%;
}

.fog-3 {
  position: absolute;
  z-index: 7;
  width: 31.18%;
  top: 69.00%;
  left: 52.01%;
}

.mountain-7 {
  position: absolute;
  z-index: 8;
  width: 35.76%;
  top: 64.89%;
  left: 71.18%;
}

.text {
  position: absolute;
  z-index: 9;
  top: 29.78%;
  left: 50%;
  text-align: center;
  text-transform: uppercase;
  pointer-events: auto;
  color: white;
}

.text h2 {
  font-weight: 100;
  font-size: 6.5rem;
  line-height: 0.88;
}

.text h1 {
  font-weight: 800;
  font-size: 8rem;
  line-height: 0.88;
}

.mountain-6 {
  position: absolute;
  z-index: 10;
  width: 26.63%;
  top: 59.61%;
  left: 90.97%;
}

.fog-4 {
  position: absolute;
  z-index: 11;
  width: 37.71%;
  top: 76.89%;
  left: 45.56%;
}

.mountain-5 {
  position: absolute;
  z-index: 12;
  width: 40.49%;
  top: 82.89%;
  left: 59.03%;
}

.fog-5 {
  position: absolute;
  z-index: 13;
  width: 99.65%;
  top: 65.56%;
  left: 48.61%;
}

.mountain-4 {
  position: absolute;
  z-index: 14;
  width: 49.79%;
  top: 74.56%;
  left: 23.49%;
}

.mountain-3 {
  position: absolute;
  z-index: 15;
  width: 29.10%;
  top: 64.78%;
  left: 101.11%;
}

.fog-6 {
  position: absolute;
  z-index: 16;
  width: 98.47%;
  top: 69.11%;
  left: 48.61%;
}

.mountain-2 {
  position: absolute;
  z-index: 17;
  width: 43.40%;
  top: 70.89%;
  left: 78.82%;
}

.mountain-1 {
  position: absolute;
  z-index: 18;
  width: 31.25%;
  top: 60.17%;
  left: 8.68%;
}

.sun-rays {
  position: absolute;
  z-index: 19;
  top: 0;
  right: 0;
  width: 41.32%;
  pointer-events: none;
}

.black-shadow {
  position: absolute;
  z-index: 20;
  bottom: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
}

.fog-1 {
  position: absolute;
  z-index: 21;
  width: 111.11%;
  top: 60.56%;
  left: 50%;
}

.vignette{
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: radial-gradient(
        ellipse at center, 
        rgba(0,0,0,0) 65%, 
        rgba(0,0,0,0.7)
    );
    pointer-events: none;
}

@media (max-width: 1100px) {
    .text h1{
        font-size: 5.8rem;
    }
    .text h2{
        font-size: 4.7rem;
    }
}

@media (max-width: 725px) {
  .text h1 {
    font-size: 5rem;
    line-height: 1.1;
  }

  .text h2 {
    font-size: 4.1rem;
    line-height: 1.1;
  }

  .logo {
    width: 75px;
  }

  .bg-img {
    width: initial;
    height: 311.104%; /* 194.44 * 1.6 */
  }

  .fog-1 {
    width: initial;
    height: 177.776%; /* 111.11 * 1.6 */
  }

  .mountain-10 {
    width: initial;
    height: 96.672%; /* 60.42 * 1.6 */
  }

  .fog-2 {
    width: initial;
    height: 203.664%; /* 127.29 * 1.6 */
  }

  .mountain-9 {
    width: initial;
    height: 51.44%; /* 32.15 * 1.6 */
  }

  .mountain-8 {
    width: initial;
    height: 87.328%; /* 54.58 * 1.6 */
  }

  .fog-3 {
    width: initial;
    height: 49.888%; /* 31.18 * 1.6 */
  }

  .mountain-7 {
    width: initial;
    height: 57.216%; /* 35.76 * 1.6 */
  }

  .mountain-6 {
    width: initial;
    height: 42.608%; /* 26.63 * 1.6 */
  }

  .fog-4 {
    width: initial;
    height: 60.336%; /* 37.71 * 1.6 */
  }

  .mountain-5 {
    width: initial;
    height: 64.784%; /* 40.49 * 1.6 */
  }

  .fog-5 {
    width: initial;
    height: 159.44%; /* 99.65 * 1.6 */
  }

  .mountain-4 {
    width: initial;
    height: 79.664%; /* 49.79 * 1.6 */
  }

  .mountain-3 {
    width: initial;
    height: 46.56%; /* 29.10 * 1.6 */
  }

  .fog-6 {
    width: initial;
    height: 157.552%; /* 98.47 * 1.6 */
  }

  .mountain-2 {
    width: initial;
    height: 69.44%; /* 43.40 * 1.6 */
  }

  .mountain-1 {
    width: initial;
    height: 50%; /* 31.25 * 1.6 */
  }

  .sun-rays {
    width: initial;
    height: 66.112%; /* 41.32 * 1.6 */
  }

  .black-shadow {
    width: initial;
    height: 160%; /* Assuming 100% original width × 1.6 */
  }
}

@media (max-width: 520px) {
    .text h1{
        font-size: 3.3rem;
    }
    .text h2{
        font-size: 2.6rem;
    }
}