/* =========================================================
   CONTACTO LINCOLN
========================================================= */

.contacto-lincoln{
    position: relative !important;

    padding: 70px 0 55px !important;

    background:
        linear-gradient(
            rgba(242,246,252,0.96),
            rgba(236,241,248,0.96)
        ),
        url("../images/fondo-lincoln.png") center center repeat !important;

    overflow: hidden !important;
}

/* =========================================================
   TITULO
========================================================= */

.contacto-heading{
    text-align: center !important;

    margin-bottom: 40px !important;
}

.contacto-heading span{
    display: inline-block !important;

    padding: 7px 16px !important;

    border-radius: 30px !important;

    background: rgba(255,255,255,0.8) !important;

    border: 1px solid rgba(0,70,148,0.12) !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    color: #004694 !important;

    margin-bottom: 16px !important;
}

.contacto-heading h2{
    font-size: 46px !important;

    font-weight: 900 !important;

    line-height: 1.1 !important;

    color: #003b80 !important;

    margin-bottom: 14px !important;
}

.contacto-heading p{
    max-width: 650px !important;

    margin: 0 auto !important;

    font-size: 16px !important;

    line-height: 1.8 !important;

    color: #5e6a7d !important;
}

/* =========================================================
   TARJETAS
========================================================= */

.contact-card,
.map-card{
    background: rgba(255,255,255,0.82) !important;

    backdrop-filter: blur(8px) !important;

    border-radius: 22px !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,0.7) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.06) !important;

    transition: all .25s ease !important;
}

.contact-card:hover,
.map-card:hover{
    transform: translateY(-2px) !important;
}

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

.contact-card{
    padding: 28px !important;

    height: 100% !important;
}

.contact-card h3{
    font-size: 28px !important;

    font-weight: 800 !important;

    color: #003b80 !important;

    margin-bottom: 8px !important;
}

.contact-subtitle{
    font-size: 14px !important;

    line-height: 1.7 !important;

    color: #6b7485 !important;

    margin-bottom: 22px !important;
}

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

.contact-card .form-control{
    width: 100% !important;

    border: 1px solid #d9e1ec !important;

    background: rgba(255,255,255,0.96) !important;

    border-radius: 14px !important;

    min-height: 50px !important;

    padding: 14px 16px !important;

    margin-bottom: 14px !important;

    font-size: 14px !important;

    color: #1f2937 !important;

    box-shadow: none !important;

    transition: all .25s ease !important;
}

.contact-card textarea.form-control{
    min-height: 140px !important;

    resize: none !important;
}

.contact-card .form-control:focus{
    border-color: #004694 !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(0,70,148,0.08) !important;
}

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

.contact-btn{
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 180px !important;

    height: 48px !important;

    padding: 0 24px !important;

    border: none !important;

    border-radius: 14px !important;

    background: linear-gradient(
        135deg,
        #0057c2,
        #004694
    ) !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    transition: all .25s ease !important;

    box-shadow:
        0 8px 22px rgba(0,70,148,0.18) !important;
}

.contact-btn:hover{
    transform: translateY(-1px) !important;
}

/* =========================================================
   MAPA
========================================================= */

.map-info{
    padding: 24px 24px 14px !important;
}

.map-info h3{
    font-size: 30px !important;

    font-weight: 800 !important;

    color: #003b80 !important;

    margin-bottom: 10px !important;
}

.map-info p{
    margin: 0 !important;

    font-size: 14px !important;

    line-height: 1.7 !important;

    color: #647084 !important;
}

#map{
    width: 100% !important;

    height: 320px !important;

    overflow: hidden !important;

    border-radius: 0 0 22px 22px !important;
}

#map iframe{
    width: 100% !important;
    height: 100% !important;

    display: block !important;
}

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

@media(max-width:767px){

    .contacto-lincoln{
        padding: 55px 0 40px !important;
    }

    .contacto-heading h2{
        font-size: 34px !important;
    }

    .contacto-heading p{
        font-size: 15px !important;
    }

    .contact-card{
        margin-bottom: 25px !important;

        padding: 22px !important;
    }

    .contact-card h3,
    .map-info h3{
        font-size: 24px !important;
    }

    .contact-btn{
        width: 100% !important;
    }

    #map{
        height: 280px !important;
    }

}