/* ===========================
   CONTACT PAGE
=========================== */

.contact-hero{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:100px 20px;

    background-image:url("../images/hero-image.webp");

    background-size:cover;

    background-position:center;

}


.contact-card{

    width:100%;
    max-width:650px;

    padding:50px;

    background:rgba(15,23,42,.75);

    border:1px solid rgba(222,234,255,.15);

    border-radius:25px;

    color:white;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.contact-card h1{

    text-align:center;

    font-size:3rem;

    margin-bottom:15px;

    color:white;

}

.contact-card p{

    text-align:center;

    color:#CBD5E1;

    margin-bottom:35px;

    line-height:1.6;

}


/* FORM */

.contact-card form{

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

}


.contact-card input,
.contact-card textarea{

    width:100%;

    padding:18px;

    border:none;

    border-radius:12px;

    background:rgba(30, 41, 59, 0.5);

    color:white;

    font-size:1rem;

    outline:none;

    font-family:inherit;

}


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

    color:#94A3B8;

}

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

    outline:2px solid #DEEAFF;

}


.contact-card textarea{

    resize:vertical;

    min-height:160px;

}


.contact-card button{

    padding:18px;

    border:none;

    border-radius:12px;

    background:#DEEAFF;

    color:#0F172A;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


.contact-card button:hover{

    background:white;

    transform:translateY(-2px);

}

/* FLASH */

.flash-container{

    margin-bottom:25px;

}


.flash{

    padding:16px 20px;

    border-radius:12px;

    margin-bottom:12px;

    font-weight:500;

    text-align:center;

}


.flash-success{

    background:#14532d;

    color:#dcfce7;

}


.flash-error{

    background:#7f1d1d;

    color:#fee2e2;

}


.flash-warning{

    background:#78350f;

    color:#fef3c7;

}


/* HONEYPOT */

.honeypot-field{

    display:none;

}


.submit-button {
    font-family: inherit;
}


/* MOBILE */

@media(max-width:700px){

    .contact-card{

        padding:35px 25px;

    }

    .contact-card h1{

        font-size:2.2rem;

    }

}

.sr-only {

    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}