@font-face {
  font-family: "Sans";
  src: url("../fonts/Sans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Sans";
  src: url("../fonts/Sans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}


::-webkit-scrollbar {
  width: 0rem;
}



html,
body {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
  height: -webkit-fill-available;
  height: -moz-available;
  height: fill-available;
  font-size: 0.140845vw;
}



*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

body {
  position: relative;

  min-width: 320rem;
  font-size: 14rem;
  line-height: 1.25;

  font-family: "Sans", sans-serif;
  font-weight: 300;
  overflow: hidden;
  background: #080808;
  color: #fff;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}


.logo {
  width: 200rem;
  height: 36rem;
  background: center / contain url(../img/logo.svg) no-repeat;
  position: absolute;
  top: 30rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
}

.section {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100vw;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  left: 0;
  position: absolute;
  top: 0;
  opacity: 0;
  z-index: -9;
  pointer-events: none;
}

.section.active {
  opacity: 1;
  pointer-events: all;
  z-index: 1;
}

.section03 .title,
.section01 .title {
  margin-top: 30rem;
}

.title {
  font-size: 36rem;
}

.title span {
  font-weight: 700;
  text-transform: uppercase;
}

.section03,
.section01 {
  text-align: center;
}

.content {
  color: #ffffff;
}

.section03 .content,
.section01 .content {
  max-width: 480rem;
  margin: 20rem 0;
}

a.btn,
button.btn {
  background: #226AF1;
  border: 0;
  width: auto;
  margin: 0 auto;
  padding: 8rem 18rem;
  font-size: 10rem;
  color: #fff;
  font-family: 'Sans';
  font-weight: 700;
  max-width: fit-content;
  display: flex;
  border-radius: 100rem;
  text-decoration: none;
  ;
}

.section03:before {
  content: '';
  background-image: url(../img/bg-final.png);
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -1;
  opacity: 0;
}

.section03.anim:before {
  opacity: 1;
  transition: 1s ease;
  transition-delay: 1s;
}

.section01.anim-next .title,
.section01.anim-next .content,
.section01.anim-next .btn {
  opacity: 0;
  transform: translateX(-150%);
  transition: 1s ease;
  transition-delay: 1s;
}


.section01.anim-next:before,
.section01.anim-next:after {
  opacity: 0;
  transition: 1s ease;
  transition-delay: 1s;
}

button,
a {
  cursor: pointer;
}

.section01:before {
  background-image: url(../img/lines.svg);
  background-size: cover;
  width: 3639rem;
  height: 500rem;
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  z-index: -1;
}

.section01.anim:before {
  animation: 15s lines-start infinite forwards linear;
}

@keyframes lines-start {
  from {
    left: 0;
  }

  to {
    left: -2939rem;
  }
}



.section01:after {

  background-image: url(../img/micr.png);
  background-size: cover;
  width: 545rem;
  height: 545rem;
  position: absolute;
  content: '';
  right: -295rem;
  top: 0;
  z-index: -1;
}

.btn-q-next {
  position: absolute;
  bottom: -100rem;
  left: 50%;
  transform: translate(-50%);
}

.wrap {

  height: 85%;
  width: 621rem;
  background: rgb(255 255 255 / 7%);
  backdrop-filter: blur(100rem);
  border-radius: 30rem;
  position: absolute;
  top: 49%;
  left: 150%;
  opacity: 0;
  transform: translate3D(-50%, -50%, 0);
  padding: 35rem 54rem;
}

.section02.anim .wrap {
  opacity: 1;
  left: 50%;
  transition: 1s ease;
  transition-delay: 0.25s;
}

.section02 .title {
  font-weight: 600;
  font-size: 24rem;
  letter-spacing: -1rem;
  margin-bottom: 10rem;
}

.section03 .title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -1rem;
}


.section03 .content {
  max-width: 620rem;
}

.player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-top: 20rem;
}

.player2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-top: 20rem;
}


.section03 .content span {
  display: block;
  margin-top: 20rem;
  font-weight: bold;
}

.player button.play {
  background-image: url(../img/play.png);
  width: 70rem;
  height: 70rem;
  border: 0;
  border-radius: 100rem;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
}

.player2 button.play2 {
  background-image: url(../img/play.png);
  width: 70rem;
  height: 70rem;
  border: 0;
  border-radius: 100rem;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
}

.wave {
  background-image: url(../img/wave.svg);
  width: 417rem;
  height: 38rem;
  border: 0;
  border-radius: 0;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
}

.section03.anim .title,
.section03.anim .content,
.section03.anim .btn {
  opacity: 1;
  transform: translateY(0);
  transition: 1s ease;
  transition-delay: 1s;
}

.section03 .title,
.section03 .content,
.section03 .btn {
  transform: translateY(50rem);
  opacity: 0;
}

.section02:before {
  content: '';
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 255, 240, 0.2) 100%), #000000;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
}

.section02.anim:before {
  opacity: 1;
  transition: 1s ease;
  transition-delay: 0.25s;
}

.wrap-btn button {

  flex: 1;
  min-width: 160rem;
  text-align: center;
  justify-content: center;
  font-size: 10rem;
  margin-right: 15rem;

}

.wrap-btn button:last-child {
  margin: 0;
}

.wrap-btn {
  position: absolute;
  bottom: 30rem;
  left: 150%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
}



.play-layer-wrapper {
  position: relative;
}

.play-layer {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100vh;
}

.sound-wave {
  width: 100%;
  height: 100rem;
  overflow: hidden;
}

.sound-wave2 {
  width: 100%;
  height: 100rem;
  overflow: hidden;

}

.sound-wave svg.waves {
  width: 430rem;
  position: absolute;
  right: -70rem;
  top: 30%;
}

.sound-wave svg.waves2 {
  width: 430rem;
  position: absolute;
  right: 143rem;
  top: 30%;
}

.sound-wave2 svg.waves3 {
  width: 430rem;
  position: absolute;
  right: -70rem;
  top: 50%;
}

.sound-wave2 svg.waves4 {
  width: 430rem;
  position: absolute;
  right: 143rem;
  top: 50%;
}

.progress-bar {
  height: 10px;
  width: 35%;
  border-radius: 30px;
  border: 2px solid #fff;
  background-color: #fff;
  display: none;
  margin: -2rem auto 6rem;
}

.progress-color {
  background: #1389e9;
  height: 100%;
  width: 0;
  border-radius: 30px;
  transition: width 4s linear;
}

.progress-bar2 {
  height: 10px;
  width: 35%;
  border-radius: 30px;
  border: 2px solid #fff;
  background-color: #fff;
  display: none;
  margin: -2rem auto 6rem;
}

.progress-color2 {
  background: #1389e9;
  height: 100%;
  width: 0;
  border-radius: 30px;
  transition: width 4s linear;
}

.d-none {
  display: none;
}

@keyframes scale1 {
  0% {
    transform: scaleY(0.6);
  }

  40% {
    transform: scaleY(1.2);
  }

  100% {
    transform: scaleY(0.6);
  }
}

.bar-scale1 {
  animation: scale1 0.6s infinite;
  transform-origin: center;
}

@keyframes scale2 {
  0% {
    transform: scaleY(0.5);
  }

  30% {
    transform: scaleY(1.6);
  }

  100% {
    transform: scaleY(0.5);
  }
}

.bar-scale2 {
  animation: scale2 0.6s infinite;
  transform-origin: center;
}

@keyframes scale3 {
  0% {
    transform: scaleY(1.5);
  }

  70% {
    transform: scaleY(0.5);
  }

  100% {
    transform: scaleY(1.5);
  }
}

.bar-scale3 {
  animation: scale3 0.6s infinite;
  transform-origin: center;
}

.stop-animation {
  animation-duration: 0s;
  transform: scaleY(0.5);
}




#play-pause {
  position: absolute;
  top: 50%;
  left: 17%;
  z-index: 1;
}

#play-pause2 {
  position: absolute;
  top: 70%;
  left: 17%;
  z-index: 1;
}




.play-button svg {
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.65);
  border-radius: 50px;
}


.play-button2 svg {
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.65);
  border-radius: 50px;
}




#play-pause.play .play-button {
  display: block;
}

#play-pause .play-button {
  display: none;
}

#play-pause .pause-button {
  display: none;
}

#play-pause.pause .pause-button {
  display: block;
}


#play-pause2.play2 .play-button2 {
  display: block;
}

#play-pause2 .play-button2 {
  display: none;
}

#play-pause2 .pause-button2 {
  display: none;
}

#play-pause2.pause2 .pause-button2 {
  display: block;
}





.play-button,
.pause-button {
  width: 40rem;
  height: 40rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}


.play-button2,
.pause-button2 {
  width: 40rem;
  height: 40rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}





.play-button svg,
.pause-button svg {
  width: 100%;
  height: 100%;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}



.play-button2 svg,
.pause-button2 svg {
  width: 100%;
  height: 100%;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}








.play-button svg,
.pause-button svg,
button {
  transition: 0.5s;
  filter: brightness(100%)
}

.play-button svg:hover,
.pause-button svg:hover,
button:hover {
  filter: brightness(110%);
}

#track {
  display: none;
}


.play-button2 svg,
.pause-button2 svg,
button {
  transition: 0.5s;
  filter: brightness(100%)
}

.play-button2 svg:hover,
.pause-button2 svg:hover,
button:hover {
  filter: brightness(110%);
}

#track2 {
  display: none;
}


.popup .content {
  text-align: center;
  font-size: 16rem;
  color: #ffff;
  max-width: 400rem;
  font-weight: 300;
}

.popup .title {
  font-size: 24rem;
  font-weight: 600;
  margin-bottom: 20rem;
}

.popup {
  position: absolute;
  width: 569rem;
  height: 226rem;
  left: 50%;
  z-index: 3;
  top: -50%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(99.18deg, #20B5A7 5.23%, #1F8253 83.11%, #1F7943 97.61%), #1B1B1B;
  border-radius: 30px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.popup.no {
  background: linear-gradient(88.4deg, #262626 4.96%, #950E44 99.67%), #1B1B1B;
}

.popup.active {
  top: 50%;
  opacity: 1;
  pointer-events: all;
  transition: 1s ease;
}

.section02.anim .wrap-btn.active {
  left: 50%;
  opacity: 1;
  opacity: 1;
  pointer-events: all;
  transition: 1s ease;
  transition-delay: 0.25s;
}

.wrap-btn .btn01,
.wrap-btn .btn02 {
  transition: 1s;
  color: rgb(255 255 255 / 50%);
}

.wrap-btn .btn span {
  color: #fff;
  margin-left: 5rem;
}

.wrap-btn.anim .btn01 {
  transform: translate(50%, 0%);
  position: relative;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.wrap-btn .btn02 {
  margin: 0;
}

.wrap-btn.anim .btn02 {
  transform: translate(-50%, 0%);
  position: relative;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.wrap-btn.anim .btn-q-next {
  bottom: 0rem;
  transition-delay: 0.3s;
}

.section02 .content {
  font-size: 10rem;
  font-weight: 500;
  padding-top: 0rem;
  letter-spacing: -0.2px;
}

.q-img {
  width: 130rem;
  height: 80rem;
  max-width: 90%;
  max-height: 90%;
  border-radius: 500px;
  margin-bottom: 10rem;
  margin-top: 5rem;

}

.title-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 16rem;
  }

  .section02 .content {
    font-size: 14rem;
    text-align: center;

  }

  a.btn,
  button.btn {
    font-size: 16rem;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 18rem;
  }

  a.btn,
  button.btn {
    font-size: 18rem;
  }

  .section02 .content {
    font-size: 16rem;
  }

  .popup .content {
    font-size: 22rem;
  }

  .btn.btn-q-next {
    width: 300rem;
    max-width: none;
  }

  #play-pause {
    top: 56%;

  }

  #play-pause2 {
    top: 74%;
  }

  .sound-wave svg.waves,
  .sound-wave svg.waves2 {
    top: 38%;
  }

  .sound-wave2 svg.waves3,
  .sound-wave2 svg.waves4 {
    top: 54%;
  }
}

@media screen and (max-width: 479px) {
  body {
    font-size: 22rem;
  }

  .section02 .content {
    font-size: 22rem;

  }

  a.btn,
  button.btn {
    font-size: 18rem;
  }

}