.contact-section{
    padding: 120px 20px;
}

/* ========================= */
/* CONTENEDOR */
/* ========================= */

.contact-container{

    max-width:700px;
    margin:auto;

    background:#ffffff;

    padding:50px;

    border-radius:14px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

}

/* ========================= */
/* TITULOS */
/* ========================= */

.contact-title{

    font-size:32px;
    color:#0d1413;
    margin-bottom:10px;

}

.contact-subtitle{

    color:#324b48;
    margin-bottom:35px;

}

/* ========================= */
/* FORM */
/* ========================= */

.contact-form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.form-group{

    display:flex;
    flex-direction:column;

}

.form-group label{

    margin-bottom:6px;
    font-weight:600;
    color:#324b48;

}

/* ========================= */
/* INPUTS */
/* ========================= */

.form-group input,
.form-group textarea{

    padding:12px;

    border-radius:8px;

    border:1px solid #d9e0e0;

    font-size:15px;

    transition:all .2s;

    background:#ffffff;

    resize: vertical;

}

/* ========================= */
/* FOCUS */
/* ========================= */

.form-group input:focus,
.form-group textarea:focus{

    outline:none;

    border-color:#00f5dc;

    box-shadow:0 0 0 2px rgba(0,245,220,0.15);

}

/* ========================= */
/* BOTON */
/* ========================= */

.contact-btn{

    margin-top:10px;

    background:#f54e00;

    color:white;

    padding:14px;

    border:none;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s;

    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
}

.contact-btn:hover{

    background:#ff6a2e;

    transform:translateY(-2px);

    box-shadow:0 6px 20px rgba(245,78,0,0.3);

}