/* * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  
        url('/images/sadi.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;
}

.card{
    
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    margin: 20% auto; 
}
.card-header{
    border-bottom: 1px solid white;
    justify-content: center;
    text-align: center;
    font-size: 20px;
}
.card-header,
.card-body{
    color:white;
}
.row.mb-0 {
    display: flex;
    margin-left:12%;
}
.row .mb-3{
    margin-left:-20%;
}

.card-body button{
    
    background-color: #fff;
    color: #333;
    outline: none;
    width:120px;
    text-align: center;
    padding: 10px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}
.card-body button:hover{
    background-color: #98989b;
}
.login{
    width:150px;
    padding: 10px;
}
.card-aggent{
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    margin-bottom: 5%; 
} */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        /* Gradient */ url("/images/sadi.jpg"); /* Background image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;
}

.card {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 5% auto;
    width: 100%;
    max-width: 400px; /* Restrict max width */
    padding: 20px;
}

.card-header {
    border-bottom: 1px solid white;
    justify-content: center;
    text-align: center;
    font-size: 20px;
}

.card-header,
.card-body {
    color: white;
}

.row.mb-0 {
    display: flex;
    margin-left: 0; /* Reset margin */
    justify-content: center; /* Center-align */
}

.row .mb-3 {
    margin-left: 0; /* Reset negative margin */
}

.card-body button {
    background-color: #fff;
    color: #333;
    outline: none;
    /* width: 100%; Full width button */
    text-align: center;
    padding: 10px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.card-body button:hover {
    background-color: #98989b;
}

.login {
    width: 100%; /* Full width login button */
    padding: 10px;
}

.card-aggent {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 5%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .card {
        margin: 10% auto; /* Adjust margin for smaller screens */
        width: 80%; /* Reduce width */
        padding: 15px;
    }

    .card-header {
        font-size: 18px; /* Smaller header text */
    }

    .card-body button {
        font-size: 14px; /* Adjust font size */
        padding: 8px;
    }

    .login {
        font-size: 14px;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .card {
        width: 90%; /* Further reduce width on very small screens */
        padding: 10px;
    }

    .card-header {
        font-size: 16px; /* Even smaller header text */
    }

    .card-body button {
        font-size: 12px; /* Smaller button text */
        padding: 6px;
    }

    .login {
        font-size: 12px;
        padding: 6px;
    }
}