.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    size: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Change this to your desired background color */
    z-index: 9999;
    transition: opacity 0.5s ease; /* Smooth fading effect */
  }

  .hide-loader {
    opacity: 0;
    pointer-events: none; /* Prevents interaction with the loader */
  }
  .custom-loader {
    width: 100px;
    height: auto; 
  }
  














/* #preloader{
    background: #000 url('loader.gif') no-repeat center center;
    background-size: 15%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
  } */

  /* .loader-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  } */

  /* .loader{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    top: 50%;
    border: 4px solid #fff;
    animation: loader 10s infinite ease;
  }
  .loader-inner{
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: white;
    background-color: #fff;
    animation: loader-inner 10s infinite ease;
  } */
  /* @keyframes loader {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(180deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
  }
  @keyframes loader-inner {
    0% {height: 0%;}
    25% {height: 0%;}
    50% {height: 100%;}
    75% {height: 100%;}
    100% {height: 0%;}
  } */