body app-splash-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #f9fafb;
    z-index: 999990;
    opacity: 1;
    visibility: visible;
    background-size: cover;
  }
  
  body app-splash-screen .layer-1 {
    position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 999991;
    background: linear-gradient(
      179.99deg,
      #ffb23e 0.01%,
      #ff8012 15.11%,
      #e2063b 52.09%,
      #75287a 100%
    );
    pointer-events: none;
  }
  
  body app-splash-screen .layer-2 {
    background-size: cover;
    position: absolute;
    content: '';
    left: 0px;
    bottom: 0px;
    height: 75%;
    width: 100%;
    z-index: 999992;
    pointer-events: none;
  }
  body app-splash-screen .layer-3 {
    position: absolute;
    content: '';
    left: 0px;
    bottom: 0px;
    height: 75%;
    width: 100%;
    z-index: 999993;
    background: linear-gradient(191.35deg, rgba(255, 178, 62, 0) 1.02%, rgba(226, 6, 59, 0.4) 52.57%, #75287A 100%);
    pointer-events: none;
  }
  
  
  
  body:not(.app-splash-screen-hidden) {
    overflow: hidden;
  }
  
  body.app-splash-screen-hidden app-splash-screen {
    visibility: hidden;
    opacity: 0;
  }
  
  .title {
    z-index: 999999;
    width: 177px;
    height: 80px;
    font-style: normal;
    font-weight: 200;
    font-size: 32px;
    line-height: 125%;
    text-align: center;
  }
  
  .logo {
    position: absolute;
    top: 20rem;
    -webkit-animation: mymove 0.7s 0.1s linear;
    animation-fill-mode: both;
    align-items: center;
    padding: 0px;
    gap: 24px;
    width: 9rem;
  }
  
  @-webkit-keyframes mymove {
    0% { top:20rem;}
    80% {top: 10rem;}
    90% {top: 5rem;}
    95% {top: 7rem;}
    100% {top: 6rem;}
  }
  .h-1\/8{
    height: 12.5%;
  }
  
  .loadingContainer {
    position: relative;
    width: 200px; /* Increased size */
    height: 200px; /* Increased size */
  }
  
  .loadingCircle {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .rotatingLogobehind {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* Adjust as needed */
    height: 100%; /* Adjust as needed */
    z-index: 1;
    animation: rotate 5s linear infinite;
  }
  
  .innerLogo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%; /* Increased size */
    height: 100%;/* Increased size */
  }
  
  @keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
  .loadingbar {
    width: 500px;
    height: 16px;
    border: 1px solid #bbb;
    position: relative;
    overflow: hidden;
    background: #E6E6E6;
    border-radius: 25px;
    margin: 5px;
  }
  
  .loadingbar:after {
    content: " ";
    display: block;
    width: 450px;
    height: 100%;
    position: absolute;
    animation: glow 2500ms linear infinite;
    z-index: 2;
    border-radius: 50px;
    background: #3e4e88
  
  }
  
  @keyframes glow {
    from {
      left: -420px;
    }
  
    to {
      left: 100%;
    }
  }