body {
    margin: 0px;
    background: none;
  }
  #pageLoader {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3); /* semi-transparent */
    backdrop-filter: blur(6px); /* blur effect */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #main {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:50%;
    left:45%;
    transform: rotate(-90deg) translate(-50%,-50%);
  }
  .line {
    height: 2px;
    width: 30px;
    background: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: anime 1.2s ease-in-out infinite;
    animation-fill-mode: both;
    will-change: width;
  }
  
  .line::before {
    content: '';
    height: 10px;
    width: 10px;
    background: rgb(209,0,101);
    border-radius: 50%;
    position: absolute;
    left:0%;
    margin-top:-4px;
  }
  .line::after {
    content: '';
    height: 10px;
    width: 10px;
    background: rgb(209,0,101);
    border-radius: 50%;
    position: absolute;
    left:100%;
    margin-top:-4px;
  }
  .line1 { margin-top: 50px; animation-delay: 0s; }
  .line2 { margin-top: 70px; animation-delay: 0.1s; }
  .line3 { margin-top: 90px; animation-delay: 0.2s; }
  .line4 { margin-top: 110px; animation-delay: 0.3s; }
  .line5 { margin-top: 130px; animation-delay: 0.4s; }
  .line6 { margin-top: 150px; animation-delay: 0.5s; }
  .line7 { margin-top: 170px; animation-delay: 0.6s; }
  .line8 { margin-top: 190px; animation-delay: 0.7s; }
  

  @keyframes anime {
    0%, 100% {
      width: 30px;
    }
    50% {
      width: 5px;
    }
  }
  

  .msg {
    font-family: arial;
    font-size: 8px;
    color: white;
    letter-spacing: 2px;
    position: absolute;
    top:60%;
    left:50%;
    transform: translate(-50%,-50%);
  }

/* Loader base */
#pageLoader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  
  #pageLoader.show {
    display: block;
    opacity: 1;
    pointer-events: all;
  }
  
  /* Blur layer behind the loader */
  #pageLoader .blur-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.4);
  }
  
  /* Loader stays sharp on top */
  #pageLoader .loader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  
  /* Example animation holder */
  .dna-loader {
    /* your animation styles */
  }