/* :root{
    --bg-color : rgb(2, 56, 56);
    --second-bg-color : rgb(2, 80, 80);
    --text-color : rgb(220, 246, 249);
    --second-text-color : rgb(190, 246, 255);
    --navbar-text-color : rgb(10, 150, 150);
    --btn-color : rgb(245, 222, 179);
    --white-color: white;
    --input-text-color: #16c8c8;
} */

.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: var(--second-bg-color);
    /* background: var(--bg-color); */
    padding: 40px 50px;

}

.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: var(--second-bg-color);
    padding: 40px 50px;
}

.footer {
    background: var(--bg-color);
}

.form-bg{
    background: var(--bg-color);
    padding: 40px 50px;
}

.contact-form{
    background: var(--bg-color);
    padding: 20px;
    width: 60%;
}



.form-input input:focus-within,
.form-input textarea:focus-within {
    background: var(--second-bg-color);
    color: var(--input-text-color);
}

.form-input input,
.form-input textarea{
    margin: 7px 0px;
    font-size: 20px;
    color: var(--white-color);
    background: var(--second-bg-color);
    border-radius: 7px;
    border: 1px solid var(--second-bg-color);
}

.form-input ::-webkit-input-placeholder{
    color : var(--input-text-color);
}

.form-input textarea{
resize: none;
}

.form-input>.btn{
    margin-top: 10px;
    cursor: pointer ;
}

@media (max-width : 1199px) {
    .contact-form{
        width: 70%;
    }
}

@media (max-width : 767px) {
    .contact-form{
        width: 90%;
    }
    .form-bg{
        padding: 15px 10px 30px 10px;
    }
    .contact
    {
        padding: 10px;
    }
    .footer-top {
        padding: 20px;
    }
}

@media (max-width : 575px) {
    .contact-form{
        width: 100%;
    }
    .form-bg{
        padding: 15px 10px 30px 10px;
    }
}