/* CONTACT */

.contact{

    max-width:700px;

    margin:120px auto;

    padding:0 25px;

}

.contact h1{

    font-size:42px;

    font-weight:600;

    text-align:center;

    margin-bottom:20px;

    letter-spacing:3px;

}

.contact p{

    text-align:center;

    /* color:#666; */

    margin-bottom:60px;

    line-height:1.7;

}

.contact form{

    display:flex;

    flex-direction:column;

    gap:20px;
    

}

.contact input,
.contact textarea{

    width:100%;


    padding:15px;

    font-size:16px;

    outline:none;

    resize:none;

    transition:.3s;
    
    box-sizing:border-box;

    background-color: black;
    color: #3A9605;
    border: 2px solid #000;

}

.contact input:focus,
.contact textarea:focus{

    outline: none;
    border-color: #3A9605;

}

.contact button{

    margin-top:20px;

    padding:18px;

    background:#111;

    color:#fff;

    border:none;

    cursor:pointer;

    letter-spacing:2px;

    transition:.3s;

    box-sizing:border-box;

    font-size:20px;

}

.contact button:hover{

    
    background-color: #153e0f;
        color: white;

}

/* ==============================
   MOBILE
============================== */

@media (max-width: 768px) {

    .contact {
        width: 100%;
        margin: 60px auto;
        padding: 0 20px;
    }

    .contact h1 {
        font-size: 30px;
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

    .contact p {
        margin-bottom: 35px;
        font-size: 14px;
    }

    .contact form {
        gap: 15px;
    }

    .contact input,
    .contact textarea {
        width: 100%;
        font-size: 16px;
        padding: 14px;
    }

    .contact button {
        width: 100%;
        padding: 16px;
        font-size: 16px;
    }
}