.modal{
    display:none;

    position:fixed;
    z-index:9999;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.6);

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

    padding:20px;
}

.modal-content{
    background:#fff;

    width:100%;
    max-width:500px;

    padding:30px;

    border-radius:20px;

    position:relative;

    animation:fadeIn .3s ease;
}

.modal-content h2{
    text-align:center;
    margin-bottom:25px;
    color:#d63384;
}

.modal-content input{
    width:100%;

    padding:14px;

    margin-bottom:15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;
}

.btn-submit{
    width:100%;

    background:#25D366;

    color:white;

    border:none;

    padding:15px;

    border-radius:10px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;
}

.close-modal{
    position:absolute;

    right:20px;
    top:15px;

    font-size:30px;

    cursor:pointer;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(-20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}