/* ==========================================================
   CONTACT HERO
========================================================== */

.contact-hero{
    position:relative;
    overflow:hidden;

    padding:110px 0 80px;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 100%
    );
}

.contact-hero::before{
    content:"";

    position:absolute;

    top:-180px;
    right:-150px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:rgba(37,99,235,.08);

    filter:blur(80px);

    z-index:0;
}

.contact-hero .container{
    position:relative;
    z-index:1;
}

.contact-hero__content{
    max-width:760px;
}

.contact-section-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 14px;
    margin-bottom:18px;

    border:1px solid rgba(15,76,129,.15);
    border-radius:999px;

    background:rgba(15,76,129,.06);

    color:var(--primary);

    font-size:.78rem;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;
}

.contact-hero__title{
    margin-bottom:24px;

    color:var(--heading);

    font-size:3.6rem;
    line-height:1.15;
    font-weight:800;
}

.contact-hero__description{
    max-width:680px;

    margin:0;

    color:var(--text);

    font-size:1.15rem;
    line-height:1.85;
}

/* ==========================================================
   CONTACT SECTION
========================================================== */

.contact-section{
    padding:100px 0;
    background:#ffffff;
}


/* ==========================================================
   CONTACT GRID
========================================================== */

.contact-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:50px;

    align-items:start;
}


/* ==========================================================
   CONTACT INFORMATION
========================================================== */

.contact-info{
    padding:40px;

    background:#f8fafc;

    border:1px solid var(--border);
    border-radius:22px;

    box-shadow:var(--shadow);
}

.contact-info h3,
.contact-form-wrapper h3{
    margin-bottom:15px;

    color:var(--heading);

    font-size:1.5rem;
    line-height:1.3;
}

.contact-info__intro{
    margin-bottom:35px;

    color:var(--text);

    font-size:1rem;
    line-height:1.8;
}


/* ==========================================================
   CONTACT INFORMATION ITEMS
========================================================== */

.contact-info__item{
    display:flex;
    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;
}

.contact-info__item:last-child{
    margin-bottom:0;
}

.contact-info__icon{
    width:52px;
    height:52px;

    flex:0 0 52px;

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

    border-radius:15px;

    background:rgba(15,76,129,.08);

    color:var(--primary);

    font-size:1.1rem;
}

.contact-info__item h4{
    margin-bottom:6px;

    color:var(--heading);

    font-size:1rem;
    font-weight:700;
}

.contact-info__item p,
.contact-info__item a{
    margin:0;

    color:var(--text);

    font-size:.95rem;
    line-height:1.65;

    text-decoration:none;
}

.contact-info__item a:hover{
    color:var(--primary);
}


/* ==========================================================
   CONTACT FORM
========================================================== */

.contact-form-wrapper{
    padding:40px;

    background:#ffffff;

    border:1px solid var(--border);
    border-radius:22px;

    box-shadow:var(--shadow);
}

.contact-form{
    display:flex;
    flex-direction:column;

    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;

    gap:8px;
}

.form-group label{
    color:var(--heading);

    font-size:.95rem;
    font-weight:600;
}

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

    padding:14px 16px;

    border:1px solid var(--border);
    border-radius:12px;

    background:#ffffff;

    color:var(--heading);

    font-family:inherit;
    font-size:.95rem;

    outline:none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.form-group input{
    height:50px;
}

.form-group textarea{
    min-height:145px;

    resize:vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#94a3b8;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--primary);

    box-shadow:
        0 0 0 3px rgba(15,76,129,.08);
}

.contact-form__submit{
    align-self:flex-start;

    margin-top:5px;
}


/* ==========================================================
   CONTACT FORM STATUS
========================================================== */

.contact-form-status{
    display:none;

    margin-top:5px;
    padding:13px 16px;

    border-radius:12px;

    font-size:.92rem;
    line-height:1.5;
}

.contact-form-status.show{
    display:block;
}

.contact-form-status.success{
    background:rgba(20,184,166,.10);
    border:1px solid rgba(20,184,166,.25);
    color:#087f73;
}

.contact-form-status.error{
    background:rgba(239,68,68,.08);
    border:1px solid rgba(239,68,68,.20);
    color:#b91c1c;
}

.contact-form__submit.is-loading{
    pointer-events:none;
    opacity:.7;
}