.form-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

label {
    margin-right: 10px;
    width: 150px; 
    text-align: right;
}

input[type="text"] {
    padding: 5px;
    width: 200px; 
    
}

input[type="submit"] {
    background-color: var(--primary-color);
    font-size : medium;
    color: var(--white);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    display: inline-block; /* Ensure the button is an inline-block element */
    margin-top: 10px; /* Optional: Add some space above the button */
}

form {
    display: inline-block;
    text-align: center;
}

h1{
    color: var(--secondary-dark);
}


@media (max-width: 600px) {
   h1{
    padding-top: 50px;
   }
   
   label {
    margin-right: 10px;
    width: 100px; 
    text-align: right;
    }
}
.spinner-div{
    display: none;
    margin-top : 20px;
    gap:10px;
    justify-content: center;
    align-items: center;
}

.spinner {
    /* display: none; Hide spinner by default */
    width: 30px;
    height: 30px;
    border: 5px solid var(--secondary-dark);
    border-top: 5px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}