*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{

    background:#0f172a;

    color:white;

    padding:40px;
}
#loading-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15,23,42,.95);
    display: none; /* hidden initially */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}
.container{

    max-width:1100px;

    margin:auto;
}

h1{

    text-align:center;

    margin-bottom:30px;
}

.search-box{

    display:flex;

    gap:10px;

    margin-bottom:40px;
}

.search-box input{

    flex:1;

    padding:15px;

    border:none;

    border-radius:12px;

    font-size:17px;
}

.search-box button{

    padding:15px 30px;

    background:#2563eb;

    color:white;

    border:none;

    border-radius:12px;

    cursor:pointer;
}

.card{

    background:#1e293b;

    padding:25px;

    border-radius:15px;

    margin-bottom:20px;

    box-shadow:0px 5px 20px rgba(0,0,0,.3);
}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.card h3{

    margin-bottom:8px;
}

.tender-id{

    color:#94a3b8;
}

.description{

    margin-top:20px;

    line-height:1.7;
}

.toggle-btn{

    background:#334155;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:8px;

    cursor:pointer;
}

.details{

    display:none;

    margin-top:25px;

    background:#111827;

    padding:20px;

    border-radius:10px;
}

.details p{

    margin-bottom:12px;
}

/* ===========================
   Loading Overlay
=========================== */

#loading-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(15,23,42,.95);

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:9999;
}

.loader{

    width:70px;

    height:70px;

    border:8px solid #334155;

    border-top:8px solid #3b82f6;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin-bottom:25px;
}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

#loading-overlay h2{

    color:white;

    margin-bottom:10px;
}

#loading-overlay p{

    color:#cbd5e1;
}