/* ==========================================
Contact Form
========================================== */

.hero-contact {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/contact-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;

}

.contact-wrapper{

    max-width:800px;

    margin:auto;

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:.5rem;

    font-weight:600;

    color:var(--color-heading);

}

.form-group label span{

    color:#d32f2f;

}

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

    width:100%;

    padding:1rem 1.2rem;

    border:1px solid #d9d9d9;

    border-radius:12px;

    font-size:1rem;

    font-family:inherit;

    transition:.3s;

    background:#fff;

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}

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

    outline:none;

    border-color:rgb(50,0,100);

    box-shadow:0 0 0 4px rgba(50,0,100,.12);

}

.contact-form small{

    margin-top:.4rem;

    color:#777;

}

.contact-submit{

    align-self:flex-start;

}

.g-recaptcha{

    margin-top:.5rem;

}

.honeypot{

    display:none;

}

/* PHILOSOPHY CARDS */
.philosophy-card {
    text-align: center;
}

.philosophy-card .icon-circle {
    margin: 0 auto 1rem;
}

/* ICON CIRCLE */
.icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(50,0,100,.08);
    color: rgb(50,0,100);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

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

.contact-option .icon-circle {
    margin: 0 auto 1rem;
}

.alert{

    padding:1rem 1.5rem;

    border-radius:12px;

    margin-bottom:2rem;

}

.alert-success{

    background:#edf9ef;

    color:#1b5e20;

    border:1px solid #b7dfc1;

}

.alert-error{

    background:#fdecec;

    color:#b71c1c;

    border:1px solid #f4bcbc;

}

.small-italic {
    margin-top:1rem;
    color:#777;
    opacity: 0.9;
    font-size: 90%;
    font-style: italic;
}

.consultation-card {
    color:white;
    display: flex;
    flex-direction: column;
}
.consultation-card h3, .consultation-card p {
    color:white;
    text-align: center;
}

.consultation-card ul {
    color: rgb(237, 233, 233);

}

.consultation-card a {
    border: white solid 2px;
}