.loaderContainer {
  position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15%;
    margin-bottom: 15%;
    height: 100%;
    width: 100%;
   min-height: max-content;
   @media screen and (max-width:768px) {
    
    margin-top: 50%;
    margin-bottom: 0;
   }
  }
  
  .dotWaveLoader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #888888;
    display: inline-block;
    animation: wave 1.3s infinite ease-in-out;
  }
  
  .dot:nth-child(1) {
    animation-delay: 0s;
  }
  
  .dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes wave {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }