/* ======================================================
   CONTACTO - KUBIC STUDIO DIGITAL
====================================================== */


/* CONTENEDOR GENERAL */

.contact-section{

    width:100%;

    max-width:850px;

    margin:200px auto 100px auto;

    padding:0 25px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    align-items:center;

}



.contact-logo{

    width:220px;

    max-width:80%;

    filter:

    drop-shadow(
    0 10px 20px
    rgba(118,255,69,.25)
    );

}



/* FORMULARIO */

.contact-form{

    width:100%;

    max-width:650px;

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:35px;

    border-radius:22px;

    background:

    rgba(10,10,10,.75);

    border:

    1px solid

    rgba(118,255,69,.25);

    box-shadow:

    0 0 35px

    rgba(118,255,69,.12);

    backdrop-filter:blur(10px);

}



/* CAMPOS */

.contact-form input,
.contact-form textarea{


    width:100%;

    box-sizing:border-box;

    background:#050505;

    border:

    1px solid

    rgba(118,255,69,.35);

    color:white;

    padding:15px 18px;

    border-radius:12px;

    font-family:Arial,sans-serif;

    font-size:15px;

    outline:none;

    transition:.25s;


}



.contact-form textarea{

    min-height:160px;

    resize:none;

}



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


    border-color:#76FF45;

    box-shadow:

    0 0 15px

    rgba(118,255,69,.35);

}



/* PLACEHOLDER */

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:#888;

}



/* CONTADOR */

.char-counter{

    text-align:right;

    color:#76FF45;

    font-size:12px;

}



/* BOTON */

.contact-form button{


    align-self:center;

    width:auto;

    min-width:150px;

    padding:12px 28px;


    background:#76FF45;

    color:#000;

    border:none;

    border-radius:25px;


    font-size:15px;

    font-weight:900;

    letter-spacing:1px;


    cursor:pointer;


    transition:.25s;


    box-shadow:

    0 0 18px

    rgba(118,255,69,.35);


}



.contact-form button:hover{


    transform:scale(1.05);

    box-shadow:

    0 0 30px

    rgba(118,255,69,.65);

}



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


@media(max-width:956px){


.contact-section{

    margin-top:40px;

    padding:0 15px;

}



.contact-logo{

    width:180px;

}



.contact-form{

    padding:25px 18px;

}



.contact-form button{

    min-width:130px;

}



}