*{
    margin: 0px;
    padding: 5px;
    box-sizing: border-box;
}
.container-contact{
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
    min-height: 100vh;
    width: 100%;
    display: flex;
}

    .form{
        background-color: #fff;
        width: 90%;
        margin: auto;
        max-width: 400px;
        border-radius: 1em;
        padding: 3.5em 1.5em;
    }

        .form-container{
            width: 100%;
            display: grid;
            gap: 1em;
            grid-auto-columns: 100%;
        }

            .form-title-ini{
                text-align: center;
                font-size: 1.9rem;
                margin-bottom: 0.4em;
                color:#bbb0b0;
            }
            .paragph-1{
                color:#3a3939;
            }

            .paragph{
                color:#bbb0b0;
            }
            .form-title{
                text-align: center;
                font-size: 1.9rem;
                margin-bottom: 0.4em;
            }
            .form-input{
                font-family: inherit;
                font-size: 1rem;
                padding: 0.8em 1em;
                outline: none;
                border: none;
                border: 1px solid #bbb0b0;
                border-radius: 0.2em;
            }

            .form-input--message{
                resize: none;
                padding: 1.8em 1em;
                margin-bottom: 0.5em;
            }

            .form-cta{
                font-family: inherit;
                background-color: #089fe0;
                color: #fff;
                border: none;
                padding: 0.7em 0;
                border-radius: 0.2em;
                font-size: 1em;
                cursor: pointer;
                font-weight: 400;
            }

                .form-cta:hover{
                    background: #034f70;
                }

@media (max-width:450px){
    .form{
        padding: 3.5em 1em;
    }
}