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

.hv-contact-page {

    min-height: calc(100vh - 76px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 4rem 1.5rem;

    background:
        linear-gradient(135deg,
            #f5f8fc 0%,
            #edf3f9 100%);
}


/* =====================================================
   MAIN WRAPPER
===================================================== */

.hv-contact-wrapper {

    width: 100%;

    max-width: 1100px;

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    background: #fff;

    border: 1px solid #e2e9f1;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(25, 42, 65, .12);
}


/* =====================================================
   LEFT PANEL
===================================================== */

.hv-contact-info {

    position: relative;

    overflow: hidden;

    padding: 3.5rem;

    display: flex;

    align-items: center;

    color: #fff;

    background:
        linear-gradient(145deg,
            #101827 0%,
            #172a42 50%,
            #203e61 100%);
}


.hv-contact-info-content {

    position: relative;

    z-index: 2;

}


.hv-contact-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background:
        rgba(66, 122, 181, .18);

    color: #83afe4;

    font-size: 1.4rem;

    margin-bottom: 1.5rem;

}


.hv-contact-eyebrow {

    color: #7fa9dd;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: 2px;

}


.hv-contact-info h1 {

    font-size: 3rem;

    line-height: 1.08;

    margin: .8rem 0 1rem;

}


.hv-contact-info h1 span {

    display: block;

    color: #79a8df;

}


.hv-contact-info>div>p {

    color: #acbccf;

    line-height: 1.7;

    max-width: 430px;

}


/* =====================================================
   CONTACT DETAILS
===================================================== */

.hv-contact-details {

    display: flex;

    flex-direction: column;

    gap: 1.15rem;

    margin-top: 2rem;

}


.hv-contact-detail {

    display: flex;

    align-items: center;

    gap: 12px;

}


.hv-contact-detail-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

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

    color: #80aae0;

}


.hv-contact-detail small {

    display: block;

    color: #7e91a7;

    font-size: .7rem;

    margin-bottom: 2px;

}


.hv-contact-detail strong {

    display: block;

    color: #e5edf6;

    font-size: .82rem;

}


/* =====================================================
   SOCIAL
===================================================== */

.hv-contact-social {

    margin-top: 2.5rem;

}


.hv-contact-social>span {

    display: block;

    color: #8496aa;

    font-size: .7rem;

    margin-bottom: .7rem;

}


.hv-contact-social a {

    display: inline-flex;

    width: 36px;

    height: 36px;

    align-items: center;

    justify-content: center;

    margin-right: 7px;

    border-radius: 9px;

    color: #b6c8db;

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

    text-decoration: none;

    transition: .25s;

}


.hv-contact-social a:hover {

    color: #fff;

    background: #427ab5;

    transform: translateY(-3px);

}


/* =====================================================
   DECORATION
===================================================== */

.hv-contact-grid {

    position: absolute;

    inset: 0;

    opacity: .07;

    background-image:
        linear-gradient(rgba(255, 255, 255, .3) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .3) 1px,
            transparent 1px);

    background-size: 35px 35px;

}


.hv-contact-circle {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(125, 174, 226, .15);

}


.circle-one {

    width: 320px;

    height: 320px;

    right: -170px;

    bottom: -130px;

}


.circle-two {

    width: 180px;

    height: 180px;

    right: -70px;

    top: -80px;

}


/* =====================================================
   FORM PANEL
===================================================== */

.hv-contact-form-panel {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 3rem;

}


.hv-contact-form {

    width: 100%;

    max-width: 470px;

}


.hv-contact-heading h2 {

    margin: 0 0 .5rem;

    color: #182438;

    font-size: 1.8rem;

}


.hv-contact-heading p {

    color: #7a8798;

    margin-bottom: 1.8rem;

}


/* =====================================================
   ALERTS
===================================================== */

.hv-contact-alert {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 12px 14px;

    margin-bottom: 1.2rem;

    border-radius: 10px;

    font-size: .85rem;

}


.hv-contact-alert.success {

    background: #effaf4;

    border: 1px solid #ccebd8;

    color: #247447;

}


.hv-contact-alert.error {

    background: #fff4f4;

    border: 1px solid #f2d2d2;

    color: #a23d3d;

}


/* =====================================================
   FORM GROUP
===================================================== */

.hv-contact-group {

    margin-bottom: 1.15rem;

}


.hv-contact-group label {

    display: block;

    margin-bottom: 7px;

    font-size: .8rem;

    font-weight: 700;

    color: #263449;

}


/* =====================================================
   INPUT
===================================================== */

.hv-contact-input {

    position: relative;

}


.hv-contact-input>i {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #9aa8b8;

    pointer-events: none;

}


.hv-contact-input input {

    width: 100%;

    height: 48px;

    box-sizing: border-box;

    padding: 0 42px;

    border: 1px solid #dce4ec;

    border-radius: 9px;

    background: #fbfcfe;

    outline: none;

    color: #253348;

    transition: .2s;

}


.hv-contact-input input:focus {

    background: #fff;

    border-color: #6d9bd2;

    box-shadow:
        0 0 0 3px rgba(66, 122, 181, .1);

}


.hv-contact-readonly {

    background: #f2f5f8 !important;

    color: #667487 !important;

}


/* =====================================================
   VERIFIED ICON
===================================================== */

.hv-verified {

    position: absolute;

    right: 13px;

    top: 50%;

    transform: translateY(-50%);

    color: #36a269;

    font-size: .8rem;

}


/* =====================================================
   FIELD NOTE
===================================================== */

.hv-field-note {

    display: block;

    margin-top: 5px;

    color: #8b98a7;

    font-size: .68rem;

}


.hv-field-note i {

    margin-right: 3px;

}


/* =====================================================
   TEXTAREA
===================================================== */

.hv-contact-textarea {

    position: relative;

}


.hv-contact-textarea>i {

    position: absolute;

    top: 16px;

    left: 14px;

    color: #9aa8b8;

}


.hv-contact-textarea textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 13px 14px 13px 40px;

    resize: vertical;

    min-height: 145px;

    border: 1px solid #dce4ec;

    border-radius: 9px;

    background: #fbfcfe;

    outline: none;

    font-family: inherit;

    line-height: 1.6;

}


.hv-contact-textarea textarea:focus {

    background: #fff;

    border-color: #6d9bd2;

    box-shadow:
        0 0 0 3px rgba(66, 122, 181, .1);

}


/* =====================================================
   CHARACTER COUNTER
===================================================== */

.hv-character-counter {

    text-align: right;

    color: #9aa5b3;

    font-size: .68rem;

    margin-top: 4px;

}


/* =====================================================
   SUBMIT
===================================================== */

.hv-contact-submit {

    width: 100%;

    height: 50px;

    border: none;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background:
        linear-gradient(135deg,
            #427ab5,
            #526fc0);

    color: #fff;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(66, 122, 181, .22);

    transition: .25s;

}


.hv-contact-submit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(66, 122, 181, .3);

}


.hv-contact-submit:active {

    transform: translateY(0);

}


/* =====================================================
   SECURITY NOTE
===================================================== */

.hv-contact-security {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-top: 1.2rem;

    color: #9ba6b3;

    font-size: .68rem;

    text-align: center;

}


.hv-contact-security i {

    color: #6f91b7;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 850px) {

    .hv-contact-wrapper {

        grid-template-columns: 1fr;

        max-width: 550px;

    }

    .hv-contact-info {

        padding: 2.5rem;

    }

    .hv-contact-info h1 {

        font-size: 2.4rem;

    }

    .hv-contact-form-panel {

        padding: 2.5rem 2rem;

    }

}


@media (max-width: 500px) {

    .hv-contact-page {

        padding: 2rem 1rem;

    }

    .hv-contact-info {

        padding: 2rem;

    }

    .hv-contact-form-panel {

        padding: 2rem 1.3rem;

    }

    .hv-contact-info h1 {

        font-size: 2rem;

    }

}