.data {
        min-height: 100vh;
        background: url('../swagimgs/Login.jpg');
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .data .data-save {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(20px);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 50%;
        max-width: 600px;  /* يحدّد الحد الأقصى للعرض */
        min-width: 320px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .wrapper {
        width: 100%;
        background: transparent;
        color: #FFF;
        padding: 30px 40px;
        border-radius: 10px;
    }
    
    .input-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 20px 0;
    }
    
    .input-field {
        width: 100%;
        font-size: 16px;
        height: 55px;
        color: #FFF;
        background: transparent;
        padding-inline: 20px 54px;
        border-radius: 40px;
        border: 1px solid #FFF;
        outline: none;
        direction: rtl;
    }
    
    .label {
        position: absolute;
        transition: 0.3s ease-in-out;
        top: 15px;
        right: 20px;
        direction: rtl;
        font-size: 16px;
        color: #FFF;
    }
    
    .input-field:focus ~ .label,
    .input-field:not(:placeholder-shown) ~ .label {
        font-size: 14px;
        top: -10px;
        right: 20px;
        background-color: #FFF;
        color: #000;
        border-radius: 20px;
        padding: 0 10px;
    }
    
    .input-wrapper p {
        position: absolute;
        top: 15px;
        left: 20px;
        font-size: 14px;
        color: #FFF;
        margin: 0;
    }
    
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    .wrapper .save {
        width: 100%;
        height: 45px;
        background: #FFF;
        border: none;
        outline: none;
        border-radius: 40px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        margin-top: 5%;
        font-size: 16px;
        font-weight: bold;
        transition: 0.3s;
    }
    
    .wrapper .save:hover {
        background: #f8d210;
        color: #000;
    }