.loading-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.65);

    backdrop-filter:blur(6px);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:.25s;
}

.loading-modal.show{

    opacity:1;
    visibility:visible;
}

.loading-box{

    width:320px;

    background:#111827;

    border-radius:24px;

    padding:35px;

    text-align:center;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.35);

    animation:modalShow .25s ease;
}

@keyframes modalShow{

    from{

        opacity:0;
        transform:scale(.95);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

.loading-spinner{

    width:70px;
    height:70px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,0.08);

    border-top:5px solid #2563eb;

    margin:auto;

    animation:spin .8s linear infinite;
}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

.loading-box h3{

    margin-top:25px;

    font-size:22px;

    color:white;
}

.loading-box p{

    margin-top:10px;

    color:#9ca3af;

    font-size:15px;
}


@media (max-width: 480px) {
    .loading-box {
        width: 90%;
        padding: 25px 20px;
        border-radius: 18px;
    }
 
    .loading-spinner {
        width: 55px;
        height: 55px;
    }
 
    .loading-box h3 {
        font-size: 18px;
    }
 
    .loading-box p {
        font-size: 13px;
    }
}