.contact {
    background: black;
}

.contact-section-name {
    margin-top: 50px;
    color: white;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 4em;
}

.contact-section {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    flex-direction: row;
    justify-content: center;
}

.input-filed {
    color: white;
    background: rgb(0, 0, 0);
    box-shadow: 0px 3px 5px 0px green;
    border: 2px solid green;
    padding: 2.5em;
    border-radius: 28px;
    margin: 1.5em 26px;
    display: flex;
}

.message-filed {
    color: white;
    height: 10em;
    width: 15em;
    background: rgb(0, 0, 0);
    box-shadow: 0px 3px 5px 0px green;
    border: 2px solid green;
    padding: 2.5em;
    border-radius: 28px;
    margin: 1.5em 26px;
    display: flex;
}

.btn-contact {
    background: darkgreen;
    border-radius: 29em;
    width: 157px;
    height: 44px;
    margin-top: 20px;
    transition: 0.2s ;
}

.btn-contact:hover {
    box-shadow: red 0 0 2px, 0 0 25px red;
    transform: scale(1.02);
}

.message-btn {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

/*@media all and (max-width: 768px){*/
/*    .contact-section-name {*/
/*        font-size: 8vw;*/
/*        font-family: Arial, sans-serif;*/
/*    }*/
/*}*/

@media all and (max-width: 480px) {

    .contact-section-name {
        font-size: 12vw;
        font-family: Arial, sans-serif;
    }

    .contact-section {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column
    }

    .input-box {
        display: contents
    }

    .message-filed {
        width: auto;
    }

    .message-btn {
        margin-top: -16px;
    }
}









/*<!--<main class="contact">-->*/
/*<!--    <div class="contact-section-name">Contact Me</div>-->*/
/*<!--    <section class="contact-section">-->*/
/*<!--        <input class="input-filed" type="text" placeholder="Full Name">-->*/
/*<!--        <input class="input-filed" type="email" placeholder="Email">-->*/

/*<!--        <input class="input-filed" type="number" placeholder="Phone Number">-->*/
/*<!--        <input class="input-filed" type="text" placeholder="Subject">-->*/
/*<!--    </section>-->*/

/*<!--    <section class="contact-section-2">-->*/
/*<!--        <div class="input-box2">-->*/
/*<!--                <textarea class="message-filed" name="" id=""-->*/
/*<!--                          placeholder="Your Message" cols="30"-->*/
/*<!--                          rows="10"></textarea>-->*/
/*<!--            <button  class="btn-contact" value="Send Message">Submit</button>-->*/
/*<!--        </div>-->*/
/*<!--    </section>-->*/
/*<!--</main>-->*/