#pre-load {
    background-color: #ccc;
    background-image: url('https://maymaan.b-cdn.net/assets/frontend/img/sequence_reverse_bg.webp');
    background-size: cover;
    position: fixed;
    inset: 0;
    display: flex; /* ✅ KEEP THIS VISIBLE */
    align-items: center;
    justify-content: center;
    z-index: 99999;
    max-height: 100vh;
    overflow: hidden;
}
#pre-load .loader-inner{
    --loader-background:linear-gradient(0deg,rgba(50,50,50,.2) 0%,rgba(100,100,100,.2) 100%);
    position:relative;
    height:250px;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center 
}
#pre-load .loader-inner .loader-logo{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:color-change 2s infinite ease-in-out;
    z-index:999 
}
#pre-load .loader-inner .loader-logo img{
    width:100px;
    height:100px
}