#preloader { position: fixed; inset: 0; background: var(--bg-light); display: flex; justify-content: center; align-items: center; z-index: 99999; opacity: 1; transition: opacity 0.6s ease;  }  .loader { position: relative; width: 70px; height: 70px; } .loader .ring { position: absolute; border: 4px solid transparent; border-radius: 50%; animation: spin 1.2s linear infinite; } .loader .ring1 { width: 70px; height: 70px; border-top-color: var(--primary); border-left-color: var(--primary); } .loader .ring2 { width: 50px; height: 50px; top: 10px; left: 10px; border-bottom-color: var(--secondary); border-right-color: var(--secondary); animation-direction: reverse; } @keyframes spin { 100% { transform: rotate(360deg); } }  #preloader.hide { opacity: 0; pointer-events: none; }