.loader-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    /* background-image: linear-gradient(170deg,  #f9aa0be7,  #44139ee7 80%); */
    background-color: rgba(0, 0, 0, 0.952);
}
  
  .cube {
      color: grey;
      margin: auto;
      font-size: 50px;
      height: 3em;
      width: 3em;
      position: absolute;
      top: 40%;
      left: 45%;
      
      transform-style: preserve-3d;
      animation: cube-spin 4.1s infinite ease-out alternate;
  }

  @media (max-width: 550px) {
    .cube {
        left: 35%;
    }
  }
  
  .side {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      transform-style: preserve-3d;
  }
  
      .side::before {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background-image: linear-gradient(8deg,  #f9a90b,  #44139e 80%);
          animation: cube-explode 18s infinite linear;
          opacity: 0.3;
      }
  
      .side:nth-child(1) {
          transform: rotateY(90deg);
      }
  
      .side:nth-child(2) {
          transform: rotateY(180deg);
      }
  
      .side:nth-child(3) {
          transform: rotateY(270deg);
      }
  
      .side:nth-child(4) {
          transform: rotateY(360deg);
      }
  
      .side:nth-child(5) {
          transform: rotateX(90deg);
      }
  
      .side:nth-child(6) {
          transform: rotateX(270deg);
      }
  
  @keyframes cube-spin {
      0% {
          transform: rotateX(15deg) rotateY(40deg);
      }
  
      100% {
          transform: rotateX(45deg) rotateY(760deg);
      }
  }
  
  @keyframes cube-explode {
      0% {
          transform: translateZ(1.55em);
      }
  
      50% {
          transform: translateZ(3em);
      }
  
      100% {
          transform: translateZ(1.55em);
      }
  }



  /* next loader */