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

.vcContactSection,
.vcContactSection *,
.vcContactSection *::before,
.vcContactSection *::after {
    box-sizing: border-box;
}


.vcContactSection {
    position: relative;
    padding:
        clamp(85px, 8vw, 125px)
        clamp(18px, 4vw, 70px)
        clamp(95px, 9vw, 145px);
    overflow: hidden;
    background: #ffffff;
}


.vcContactSection::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -340px;
    bottom: -320px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(99, 116, 255, .055),
            transparent 68%
        );
    pointer-events: none;
}


.vcContactSectionInner {
    position: relative;
    z-index: 2;
    width: min(1450px, 100%);
    margin: 0 auto;
}


/* ============================================================
   INTRO
============================================================ */

.vcContactSectionIntro {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: 40px;
    margin-bottom:
        clamp(45px, 5vw, 72px);
}


.vcContactSectionIntro > div {
    min-width: 0;
    max-width: 850px;
}


.vcContactSectionEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #6374ff;
}


.vcContactSectionEyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            #6374ff,
            rgba(99, 116, 255, .12)
        );
}


.vcContactSectionIntro h2 {
    margin: 0;
    max-width: 850px;
    font-size:
        clamp(
            42px,
            5vw,
            74px
        );
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 500;
    color: #171b23;
}


.vcContactSectionIntro h2 strong {
    display: block;
    font-weight: 850;
}


.vcContactSectionIntro p {
    max-width: 650px;
    margin:
        20px
        0
        0;
    font-size: 14px;
    line-height: 1.75;
    color: #7b838e;
}


/* ============================================================
   SECTION NUMBER
============================================================ */

.vcContactSectionNumber {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    flex: 0 0 auto;
    border:
        1px solid
        rgba(15, 23, 42, .08);
    border-radius: 50%;
    color: #a2a8b1;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
}


/* ============================================================
   MAIN GRID
============================================================ */

.vcContactGrid {
    display: grid;
    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr);
    gap:
        clamp(
            26px,
            3.5vw,
            58px
        );
    align-items: stretch;
}


.vcContactGrid > * {
    min-width: 0;
}


/* ============================================================
   CONTACT INFO
============================================================ */

.vcContactInfo {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding:
        clamp(30px, 3vw, 46px);
    overflow: hidden;
    border:
        1px solid
        rgba(15, 23, 42, .065);
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            #f8f9fc,
            #ffffff
        );
}


.vcContactInfo::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    top: -220px;
    left: -170px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(99, 116, 255, .10),
            transparent 70%
        );
    pointer-events: none;
}


/* ============================================================
   INFO HEADER
============================================================ */

.vcContactInfoHeader {
    position: relative;
    z-index: 2;
    max-width: 480px;
}


.vcContactInfoHeader > span {
    display: block;
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6374ff;
}


.vcContactInfoHeader > strong {
    display: block;
    font-size:
        clamp(
            30px,
            3vw,
            44px
        );
    line-height: 1.04;
    letter-spacing: -.045em;
    color: #1b2029;
}


.vcContactInfoHeader > p {
    max-width: 420px;
    margin:
        13px
        0
        0;
    font-size: 12px;
    line-height: 1.7;
    color: #818994;
}


/* ============================================================
   EMAIL
============================================================ */

.vcContactEmail {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 14px;
    margin-top: 35px;
    padding: 16px;
    border:
        1px solid
        rgba(15, 23, 42, .065);
    border-radius: 19px;
    background:
        rgba(255, 255, 255, .82);
    color: inherit;
    text-decoration: none;
    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .035);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.vcContactEmail:hover {
    transform: translateY(-3px);
    border-color:
        rgba(99, 116, 255, .18);
    box-shadow:
        0 18px 42px
        rgba(15, 23, 42, .07);
}


.vcContactEmailIcon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background:
        rgba(99, 116, 255, .08);
    color: #6374ff;
}


.vcContactEmailIcon svg {
    width: 19px;
    height: 19px;
}


.vcContactEmailText {
    min-width: 0;
    display: grid;
    gap: 3px;
}


.vcContactEmailText small {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa1ab;
}


.vcContactEmailText strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:
        clamp(
            12px,
            1vw,
            15px
        );
    color: #343b46;
}


.vcContactEmailArrow {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        rgba(15, 23, 42, .045);
    color: #747c87;
    transition:
        transform .24s ease,
        background-color .24s ease,
        color .24s ease;
}


.vcContactEmailArrow svg {
    width: 13px;
    height: 13px;
}


.vcContactEmail:hover
.vcContactEmailArrow {
    transform: translateX(3px);
    background: #171b23;
    color: #ffffff;
}


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

.vcContactSocial {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 42px;
}


.vcContactSocialLabel {
    display: block;
    margin-bottom: 12px;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #969da7;
}


.vcContactSocialLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


.vcContactSocialLinks > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding:
        5px
        13px
        5px
        6px;
    border:
        1px solid
        rgba(15, 23, 42, .065);
    border-radius: 999px;
    background:
        rgba(255, 255, 255, .82);
    color: #626a75;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.vcContactSocialLinks > a:hover {
    transform: translateY(-2px);
    border-color:
        rgba(99, 116, 255, .16);
    color: #252b34;
    box-shadow:
        0 10px 24px
        rgba(15, 23, 42, .055);
}


.vcContactSocialIcon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        rgba(99, 116, 255, .07);
    color: #6374ff;
}


.vcContactSocialIcon svg {
    width: 15px;
    height: 15px;
}


/* ============================================================
   FORM WRAP
============================================================ */

.vcContactFormWrap {
    position: relative;
    min-width: 0;
    padding:
        clamp(30px, 3.5vw, 50px);
    overflow: hidden;
    border-radius: 30px;
    background: #171b23;
    color: #ffffff;
    box-shadow:
        0 30px 85px
        rgba(15, 23, 42, .14);
}


.vcContactFormWrap::before {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    top: -230px;
    right: -170px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(99, 116, 255, .32),
            transparent 68%
        );
    pointer-events: none;
}


.vcContactFormWrap::after {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    left: -170px;
    bottom: -170px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .05),
            transparent 70%
        );
    pointer-events: none;
}


/* ============================================================
   FORM HEADER
============================================================ */

.vcContactFormHeader {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
}


.vcContactFormHeader > span {
    display: block;
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #8e9cff;
}


.vcContactFormHeader > strong {
    display: block;
    font-size:
        clamp(
            31px,
            3vw,
            45px
        );
    line-height: 1;
    letter-spacing: -.045em;
    color: #ffffff;
}


.vcContactFormHeader > p {
    margin:
        10px
        0
        0;
    font-size: 11px;
    color:
        rgba(255, 255, 255, .48);
}


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

.vcContactForm {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    column-gap: 16px;
    row-gap: 17px;
    width: 100%;
}


.vcContactForm > * {
    min-width: 0;
}


/* ============================================================
   FIELDS
============================================================ */

.vcContactField {
    min-width: 0;
    width: 100%;
    display: grid;
    gap: 7px;
}


.vcContactField:nth-of-type(3),
.vcContactFieldMessage {
    grid-column:
        1 / -1;
}


.vcContactField label {
    display: block;
    padding-left: 3px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color:
        rgba(255, 255, 255, .48);
}


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

.vcContactField input,
.vcContactField textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border:
        1px solid
        rgba(255, 255, 255, .10);
    outline: none;
    border-radius: 14px;
    background:
        rgba(255, 255, 255, .055);
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    box-sizing: border-box;
    transition:
        border-color .22s ease,
        background-color .22s ease,
        box-shadow .22s ease;
}


.vcContactField input {
    height: 51px;
    padding:
        0
        16px;
}


.vcContactField textarea {
    min-height: 118px;
    padding:
        15px
        16px;
    line-height: 1.55;
    resize: vertical;
}


.vcContactField input::placeholder,
.vcContactField textarea::placeholder {
    color:
        rgba(255, 255, 255, .27);
}


.vcContactField input:hover,
.vcContactField textarea:hover {
    border-color:
        rgba(255, 255, 255, .17);
    background:
        rgba(255, 255, 255, .07);
}


.vcContactField input:focus,
.vcContactField textarea:focus {
    border-color:
        rgba(142, 156, 255, .70);
    background:
        rgba(255, 255, 255, .075);
    box-shadow:
        0 0 0 3px
        rgba(99, 116, 255, .12);
}


/* ============================================================
   AUTOFILL
============================================================ */

.vcContactField input:-webkit-autofill,
.vcContactField input:-webkit-autofill:hover,
.vcContactField input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow:
        0 0 0 1000px
        #20252e
        inset;
    transition:
        background-color 9999s ease-in-out 0s;
}


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

.vcContactSubmit {
    grid-column:
        1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 55px;
    margin-top: 4px;
    padding:
        0
        10px
        0
        22px;
    border: 0;
    border-radius: 999px;
    outline: none;
    background: #ffffff;
    color: #171b23;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
    box-shadow:
        0 13px 35px
        rgba(0, 0, 0, .14);
    transition:
        transform .24s ease,
        box-shadow .24s ease;
}


.vcContactSubmit:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 42px
        rgba(0, 0, 0, .20);
}


.vcContactSubmitIcon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #6374ff;
    color: #ffffff;
    transition:
        transform .24s ease;
}


.vcContactSubmitIcon svg {
    width: 15px;
    height: 15px;
}


.vcContactSubmit:hover
.vcContactSubmitIcon {
    transform:
        translateX(3px);
}


/* ============================================================
   INVALID
============================================================ */

.vcContactField input:invalid:not(:placeholder-shown),
.vcContactField textarea:invalid:not(:placeholder-shown) {
    border-color:
        rgba(255, 110, 110, .45);
}


/* ============================================================
   DESKTOP MEDIUM
============================================================ */

@media (max-width: 1180px) {

    .vcContactGrid {
        grid-template-columns:
            minmax(0, .78fr)
            minmax(0, 1.22fr);
        gap: 24px;
    }


    .vcContactFormWrap {
        padding:
            36px
            32px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 980px) {

    .vcContactGrid {
        grid-template-columns:
            1fr;
    }


    .vcContactInfo {
        min-height: 420px;
    }


    .vcContactFormWrap {
        width: 100%;
    }

}


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

@media (max-width: 650px) {

    .vcContactSection {
        padding:
            68px
            16px
            85px;
    }


    .vcContactSectionIntro {
        grid-template-columns:
            1fr;
        gap: 20px;
        margin-bottom: 31px;
    }


    .vcContactSectionIntro h2 {
        font-size:
            clamp(
                39px,
                11vw,
                52px
            );
    }


    .vcContactSectionIntro p {
        margin-top: 15px;
        font-size: 13px;
    }


    .vcContactSectionNumber {
        width: 43px;
        height: 43px;
    }


    .vcContactGrid {
        gap: 16px;
    }


    .vcContactInfo {
        min-height: 0;
        padding: 24px;
        border-radius: 23px;
    }


    .vcContactInfoHeader > strong {
        font-size: 31px;
    }


    .vcContactEmail {
        margin-top: 27px;
    }


    .vcContactSocial {
        margin-top: 35px;
        padding-top: 0;
    }


    .vcContactFormWrap {
        padding:
            26px
            22px;
        border-radius: 23px;
    }


    .vcContactFormHeader {
        margin-bottom: 25px;
    }


    .vcContactForm {
        grid-template-columns:
            1fr;
        column-gap: 0;
        row-gap: 15px;
    }


    .vcContactField,
    .vcContactField:nth-of-type(3),
    .vcContactFieldMessage {
        grid-column:
            1 / -1;
    }


    .vcContactSubmit {
        grid-column:
            1 / -1;
    }

}


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

@media (max-width: 430px) {

    .vcContactSection {
        padding-left: 14px;
        padding-right: 14px;
    }


    .vcContactInfo {
        padding:
            22px
            18px;
    }


    .vcContactEmail {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .vcContactEmailArrow {
        display: none;
    }


    .vcContactEmailText strong {
        font-size: 11px;
    }


    .vcContactSocialLinks {
        display: grid;
        grid-template-columns:
            1fr;
    }


    .vcContactSocialLinks > a {
        width: 100%;
    }


    .vcContactFormWrap {
        padding:
            24px
            18px;
    }


    .vcContactSubmit {
        width: 100%;
        justify-self: stretch;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .vcContactEmail,
    .vcContactEmailArrow,
    .vcContactSocialLinks > a,
    .vcContactField input,
    .vcContactField textarea,
    .vcContactSubmit,
    .vcContactSubmitIcon {
        transition: none;
    }

}
/* ============================================================
   CONTACT
   RESULT NOTICE
============================================================ */

.vcContactNotice {
    position: fixed;
    z-index: 99999;
    top: 105px;
    left: 50%;
    width: min(520px, calc(100% - 32px));
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 14px;
    padding:
        14px
        14px
        14px
        16px;
    border:
        1px solid
        rgba(15, 23, 42, .08);
    border-radius: 20px;
    background:
        rgba(255, 255, 255, .96);
    box-shadow:
        0 22px 65px
        rgba(15, 23, 42, .17);
    backdrop-filter:
        blur(18px);
    -webkit-backdrop-filter:
        blur(18px);
    transform:
        translateX(-50%);
}


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

.vcContactNoticeIcon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 14px;
}


.vcContactNoticeIcon svg {
    width: 21px;
    height: 21px;
}


.vcContactNotice--success
.vcContactNoticeIcon {
    background:
        rgba(35, 170, 105, .09);
    color: #22a66a;
}


.vcContactNotice--error
.vcContactNoticeIcon {
    background:
        rgba(224, 78, 78, .09);
    color: #dc5050;
}


/* ============================================================
   CONTENT
============================================================ */

.vcContactNoticeContent {
    min-width: 0;
    display: grid;
    gap: 3px;
}


.vcContactNoticeContent strong {
    font-size: 12px;
    font-weight: 850;
    color: #252b34;
}


.vcContactNoticeContent span {
    font-size: 10px;
    line-height: 1.5;
    color: #7c8490;
}


/* ============================================================
   CLOSE
============================================================ */

.vcContactNoticeClose {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa1ab;
    cursor: pointer;
    transition:
        background-color .2s ease,
        color .2s ease;
}


.vcContactNoticeClose:hover {
    background:
        rgba(15, 23, 42, .05);
    color: #343b45;
}


.vcContactNoticeClose svg {
    width: 15px;
    height: 15px;
}


/* ============================================================
   JS STATES
============================================================ */

.vcContactNotice {
    animation:
        vcContactNoticeIn
        .55s
        cubic-bezier(.16, 1, .3, 1)
        both;
}


.vcContactNotice.is-hiding {
    animation:
        vcContactNoticeOut
        .35s
        ease
        both;
}


@keyframes vcContactNoticeIn {

    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(-18px)
            scale(.97);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

}


@keyframes vcContactNoticeOut {

    from {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0);
    }

    to {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(-12px);
    }

}


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

@media (max-width: 650px) {

    .vcContactNotice {
        top: 88px;
        width:
            calc(100% - 24px);
        gap: 11px;
        padding:
            12px;
        border-radius: 17px;
    }


    .vcContactNoticeIcon {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }


    .vcContactNoticeContent strong {
        font-size: 11px;
    }


    .vcContactNoticeContent span {
        font-size: 9px;
    }

}