@font-face {
  font-family: 'CustomAvenir';
  src: url('https://www.ncino.com/_next/static/media/28d16ba8328a4c36-s.p.woff2') format('woff2');
  font-weight: normal;
}

@font-face {
  font-family: 'CustomAvenir';
  src: url('https://www.ncino.com/_next/static/media/25a2863204e05d48-s.p.woff2') format('woff2');
  font-weight: bold;
}

body {
  font-family: 'CustomAvenir', sans-serif;
  margin: 0;
  background-color: #0D253A;
  overflow: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

  /* Hide scrollbar for Chrome, Safari and Opera */
  .body::-webkit-scrollbar {
    display: none;
}

.shapeContain {
  z-index: 1;
  margin: 0;
  display: flex;
  align-content: center;
  width: auto;
  height: auto;
  position: absolute;
}

.shape {
  position: relative;
  width: 400px;
  height: auto;
}

.shapeContain.shape1 {
  top: 3%;
  left: 10%;
  border-top-right-radius: 110px;
  border-bottom-left-radius: 110px;
  padding: 0;
  display: flex;
  align-content: start !important;
}

.shapeContain.shape2 {
  top: 40%;
  left: 4%;
  border-radius: 195px;
}

.shapeContain.shape3 {
  border-top-left-radius: 260px;
  top: 70%;
  left: 12%;
}

.shapeContain.shape4 {
  top: 15%;
  left: 60%;
  border-top-left-radius: 195px;
  border-bottom-left-radius: 195px;
}

.shapeContain.shape5 {
  top: 60%;
  left: 60%;
  border-top-right-radius: 110px;
  border-bottom-left-radius: 110px;
}


.shapeContain#shape1c {
  top: 25%;
  left: 56%;
  border-radius: 195px;
}


.shapeContain#shape2c {
  top: 50%;
  left: 4%;
  border-top-left-radius: 195px;
  border-bottom-left-radius: 195px;
}

.shapeContain#shape3c {
  top: 75%;
  left: 5%;
  border-top-right-radius: 110px;
  border-bottom-left-radius: 110px;
}

.shapeContain#shape4c {
  top: 25%;
  left: 4%;
  border-top-right-radius: 110px;
  border-bottom-left-radius: 110px;
}

.shapeContain#shape5c {
  top: 59%;
  left: 60%;
  border-top-right-radius: 110px;
  border-bottom-left-radius: 110px;
}

.shapeContain#shape2c2 {
  top: 1%;
  left: 54%;
  border-radius: 195px;
}


.shapeContain#shape4c2 {
  top: 78%;
  left: 50%;
  border-top-left-radius: 195px;
  border-bottom-left-radius: 195px;
}

.shapeContain#shape5c2 {
  top: 3%;
  left: 9%;
  border-top-right-radius: 110px;
  border-bottom-left-radius: 110px;
}


.pulse {
  animation: pulse 1s forwards;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

h3 {
  position: absolute;
  z-index: 2;
  text-align: center;
  color: white;
  font-size: 50px;
  line-height: 60px;
  font-weight: bold;

  width: 50%;
  transform: translate(-50%, -50%);
}

.q1.question1text {
  top: 39%;
  left: 47%;
}

.q2.question2text {
  position: absolute;
  z-index: 2;
  text-align: center;
  color: white;
  font-size: 50px;
  line-height: 60px;
  font-weight: bold;
  top: 42%;
  left: 10%;
  width: 77%;
  transform: translate(-50%, -50%);
}

.q3.question3text {
  top: 43.5%;
  left: 43%;
  width: 54%;
}

.q1 {
  transform: scale(1);   /* Element is at normal size */
}

.q2, .q3 {
  transform: scale(0);   /* Elements are scaled down to 0 */
}




.q1, .q2, .q3 {
  transition: transform 0.5s ease;
  position: absolute;
  transform-origin: center center;  /* Ensures scaling occurs centered */
  
}


.text {
  font-size: 40px;
  line-height: 50px;
  position: absolute;
  color: white;
  text-align: center;
  z-index: 1;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flyingShape {
  position: absolute;
  margin: 0;
  width: 10vw; /* Calculated from the SCSS variable $size */
  height: auto;
  z-index: 0;
}

.x {
  animation: x 10s ease-in-out infinite alternate;
}

.y {
  animation: y 7s linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX(calc(100vw - 10vw));
  }
}

@keyframes y {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(calc(100vh - 8vw)) rotate(360deg);
  }
}

.x2 {
  animation: x 19s ease-in-out infinite alternate;
}

.y2 {
  animation: y 8s linear infinite alternate;
}

@keyframes x2 {
  100% {
    transform: translateX(calc(100vw - 10vw));
  }
}

@keyframes y2 {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(calc(100vh - 10vw)) rotate(360deg);
  }
}

.x3 {
  animation: x 8s ease-in-out infinite alternate;
}

.y3 {
  animation: y 10s linear infinite alternate;
}

@keyframes x3 {
  100% {
    transform: translateX(calc(100vw - 10vw));
  }
}

@keyframes y3 {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(calc(100vh - 10vw)) rotate(360deg);
  }
}

#banner {
  position: absolute;
  bottom: 0;
  margin: 0;
  z-index: -1;
}

#bannerTwo {
  width: 100vw;
  margin: 0;
}

#accent1 {
  position: absolute;
  width: 20vw;
  height: auto;
  margin-top: -42px;
  top: 0;
  left: 70%;
  transform: rotate(90deg);
  z-index: -1;
}

#accent2 {
  position: absolute;
  width: 15vw;
  bottom: 0;
  z-index: -1;
}

#accent3 {
  position: absolute;
  width: 20vw;
  bottom: 0;
  right: 0;
  z-index: -1;
}

#accent4 {
  position: absolute;
  width: 20vw;
  bottom: 45%;
  right: -13%;
  z-index: -1;
}

#accent5 {
  position:absolute;
  width: 15vw;
  bottom: 62%;
  right: 55%;
  z-index: -1;
}

/* switching between questions */