.splash {
  margin: 0;
  padding: 0 0 10vh 0;
  overflow: hidden;
  color: black;
  font-family: 'Inter', sans-serif;
  align-items: center;
  background-color: --sapBackgroundColor;
  justify-content: center;
  display: flex;
  bottom: 50%;
}

body {
  /* overflow-y: auto; */
  /* or auto */
  scrollbar-width: thin;
  /* scrollbar-color: rgb(221, 221, 221) rgb(231, 231, 231); */
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(211, 211, 211);
  /* border-radius: 10px; */
}

::-webkit-scrollbar-track {
  background-color: rgb(234, 234, 234);
  /* border-radius: 10px; */
}

.splash-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 100vw;
}

/* Newly added */
p {
  margin: 0;
}

.splash-maintext > p:first-child {
  text-align: center;
}

.splash-logo {
  position: absolute;
  z-index: 2;
  font-weight: bold;
  letter-spacing: 1px;
  width: 400px;
  height: 250px;
  animation: bounce 1.5s, blink 2s 2s infinite alternate;
  transition: all 0.3s;
  background: linear-gradient(to right, #fff, #2595ff 60%, #fff 90%);
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
  background-size: 200% auto;
}

@keyframes bounce {
  0% {
    font-size: 1px;
  }
}

@keyframes blink {
  0% {
    background-position: 200% center;
  }
}

.splash-maintext {
  display: flex;
  flex-direction: column;
  font-size: 25px;
  animation: hidden 0.5s, content 1.5s 0.5s;
  opacity: 1;
  width: 90%;
  margin: 200px auto 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  color: #0a2750;
}

@keyframes content {
  0% {
    font-size: 1px;
    opacity: 1;
  }

  100% {
    opacity: 1;
    font-size: 25px;
    transition: all 0.3s;
  }
}

@keyframes hidden {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.typing-css {
  position: relative;
  width: 103px;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_3 {
  animation: text3;
}

.text_1,
.text_2,
.text_3 {
  background: linear-gradient(to right, #2ee3ea, #8ae962, #ffdd54);
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
  width: 0;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  left: 0;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  animation-timing-function: ease-in-out;
  margin-top: -5px;
  /* font-weight:; */
}

@keyframes text1 {
  0%,
  33% {
    width: 0;
  }

  16.5% {
    width: 150px;
  }
}

@keyframes text2 {
  0%,
  34%,
  66% {
    width: 0;
  }

  51.5% {
    width: 150px;
  }
}

@keyframes text3 {
  0%,
  67%,
  99% {
    width: 0;
  }

  80% {
    width: 150px;
  }
}

@media screen and (min-width: 767px) {
  .splash-logo {
    font-size: 100px;
    transition: all 0.3s;
    object-fit: contain;
  }

  .splash-maintext {
    flex-direction: row;
    width: 100%;
    margin: 150px auto 0;
    font-size: 30px;
  }

  .splash-maintext > div {
    flex-basis: 160px;
  }

  .typing-css {
    margin-top: -20px;
  }

  @keyframes content {
    0% {
      font-size: 1px;
      opacity: 1;
    }

    100% {
      opacity: 1;
      font-size: 30px;
      transition: all 0.3s;
    }
  }
}

@media screen and (min-width: 1024px) {
  .splash-maintext {
    flex-direction: row;
    width: 70%;
  }
}