/* Start custom CSS for html, class: .elementor-element-12ca99d *//* ==========================
   CONTACTO
========================== */

.contact-section{
    padding:120px 8%;
    position:relative;
}

.contact-container{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

/* ==========================
   INFO
========================== */

.contact-badge{
    display:inline-block;

    padding:12px 28px;

    border-radius:50px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.3);

    color:#ffb300;

    font-weight:700;
}

.contact-info h2{
    font-size:clamp(3rem,6vw,5rem);

    color:#fff;

    line-height:1.1;

    margin:25px 0;

    text-shadow:
    0 5px 25px rgba(0,0,0,.25);
}

.contact-info p{
    color:rgba(255,255,255,.9);

    font-size:1.1rem;

    line-height:1.9;

    max-width:550px;
}

.contact-item{
    color:white;

    font-size:1.15rem;

    margin-bottom:20px;

    text-shadow:
    0 2px 10px rgba(0,0,0,.2);
}

/* ==========================
   FORMULARIO
========================== */

.contact-form{
    padding:45px;

    border-radius:35px;

    background:rgba(0,0,0,.12);
    backdrop-filter:blur(8px);
    padding:30px;
    border-radius:25px;

    backdrop-filter:
    blur(25px);

    -webkit-backdrop-filter:
    blur(25px);

    border:
    1px solid rgba(255,255,255,.25);

    box-shadow:
    0 25px 50px rgba(0,0,0,.18);
}

/* ==========================
   CAMPOS
========================== */

.contact-form input,
.contact-form textarea{
    width:100%;

    padding:18px 22px;

    background:
    rgba(255,255,255,.15);

    border:
    1px solid rgba(255,255,255,.25);

    border-radius:18px;

    color:#fff;

    font-size:1rem;

    outline:none;

    transition:.3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:rgba(255,255,255,.75);
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#ffb300;

    background:
    rgba(255,255,255,.22);

    box-shadow:
    0 0 20px rgba(255,179,0,.2);
}

.contact-form textarea{
    min-height:180px;
    resize:vertical;
}

/* ==========================
   BOTÓN
========================== */

.contact-form button{
    width:100%;

    padding:18px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #ffb300,
        #ff7b00
    );

    color:white;

    font-size:1.1rem;

    font-weight:700;

    cursor:pointer;

    transition:.4s;
}

.contact-form button:hover{
    transform:
    translateY(-4px);

    box-shadow:
    0 15px 30px rgba(255,179,0,.35);
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:900px){

    .contact-container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .contact-form{
        padding:30px;
    }

    .contact-info{
        text-align:center;
    }

    .contact-info p{
        margin:auto;
    }
}

.contact-info{
    background:rgba(0,0,0,.12);
    backdrop-filter:blur(8px);
    padding:30px;
    border-radius:25px;
}/* End custom CSS */