/* ==========================================================
VALIRINA ATELIER — CONTACT PROJECT
Elementor Free + Fluent Forms

FINAL POLISH — UNIFIED VERSION

DESIGN

- max-width: 1600px
- 2-column desktop layout
- form vertically centered
- balanced separator
- compact legal information
- black typing text
- accent spans
- minimalist Fluent Forms

SECTION SPACING SYSTEM

Desktop:      35px bottom
Tablet:       30px bottom
Mobile:       24px bottom
Small mobile: 20px bottom

Top spacing is 0 because the previous component owns
the distance leading into this section.

IMPORTANT

The following remain INTERNAL spacing and are preserved:

- eyebrow → title
- title → contact details
- contact detail gaps
- company separator spacing
- left ↔ form column gap
- form internal padding
- field spacing
- title → form spacing
- submit button spacing
========================================================== */


/* ==========================================================
01 — VARIABLES — DESKTOP
========================================================== */

.valirina-contact-project {

    /* ======================================================
       DESIGN SYSTEM
    ====================================================== */

    --valirina-editorial-font:
        "Cormorant Garamond",
        Georgia,
        serif;

    --contact-primary:
        #1d1c1a;

    --contact-secondary:
        #625d57;

    --contact-muted:
        #8a847e;

    --contact-accent:
        #ad772d;

    --contact-white:
        #ffffff;

    --contact-card-background:
        #fbf8f2;

    --contact-border:
        rgba(36, 33, 31, 0.085);

    --contact-border-hover:
        rgba(36, 33, 31, 0.15);

    --contact-border-focus:
        rgba(173, 119, 45, 0.48);


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

    --contact-max-width:
        1600px;

    --contact-padding-top:
        0px;

    --contact-padding-right:
        20px;

    --contact-padding-bottom:
        35px;

    --contact-padding-left:
        20px;


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

    --contact-grid-left:
        1.08fr;

    --contact-grid-right:
        .92fr;

    --contact-columns-gap:
        64px;


    /* ======================================================
       TITLES
    ====================================================== */

    --contact-heading-size:
        40px;

    --contact-heading-weight:
        620;

    --contact-heading-line-height:
        1.02;

    --contact-heading-letter-spacing:
        -0.035em;

    --contact-heading-color:
        var(--contact-primary);

    --contact-heading-accent:
        var(--contact-accent);


    /* ======================================================
       EYEBROW
    ====================================================== */

    --contact-eyebrow-size:
        14px;

    --contact-eyebrow-weight:
        500;

    --contact-eyebrow-color:
        var(--contact-secondary);

    --contact-eyebrow-dot-size:
        7px;

    --contact-eyebrow-gap:
        11px;


    /* ======================================================
       LEFT SPACING
    ====================================================== */

    --contact-eyebrow-title-gap:
        16px;

    --contact-title-details-gap:
        36px;


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

    --contact-details-gap:
        32px;

    --contact-left-details-gap:
        20px;

    --contact-label-size:
        13px;

    --contact-value-size:
        15.5px;

    --contact-value-weight:
        600;


    /* ======================================================
       COMPANY SEPARATOR
    ====================================================== */

    --contact-company-separator-space:
        18px;

    --contact-company-separator-width:
        82%;


    /* ======================================================
       COMPANY INFO
    ====================================================== */

    --contact-company-title-size:
        14px;

    --contact-company-legal-size:
        12px;

    --contact-company-line-size:
        12.5px;

    --contact-company-gap:
        1px;

    --contact-company-item-gap:
        7px;


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

    --contact-form-radius:
        18px;

    --contact-form-padding-top:
        28px;

    --contact-form-padding-right:
        30px;

    --contact-form-padding-bottom:
        28px;

    --contact-form-padding-left:
        30px;


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

    --contact-form-title-gap:
        21px;


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

    --contact-field-height:
        44px;

    --contact-field-radius:
        8px;

    --contact-field-padding-x:
        14px;

    --contact-field-font-size:
        13.5px;

    --contact-form-row-gap:
        12px;

    --contact-textarea-height:
        104px;


    /* ======================================================
       BUTTON
    ====================================================== */

    --contact-button-height:
        43px;

    --contact-button-radius:
        999px;

    --contact-button-size:
        13px;

    --contact-button-weight:
        600;

    --contact-button-background:
        #1d1c1a;

    --contact-button-color:
        #ffffff;

    --contact-button-hover-background:
        #ffffff;

    --contact-button-hover-color:
        #1d1c1a;

    --contact-button-hover-border:
        #1d1c1a;

    --contact-button-margin-top:
        10px;


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

    --contact-transition:
        180ms;
}


/* ==========================================================
02 — TABLET
========================================================== */

@media (max-width: 1024px) {

    .valirina-contact-project {

        --contact-padding-top:
            0px;

        --contact-padding-right:
            18px;

        --contact-padding-bottom:
            30px;

        --contact-padding-left:
            18px;


        --contact-columns-gap:
            38px;

        --contact-grid-left:
            1fr;

        --contact-grid-right:
            1fr;


        --contact-heading-size:
            38px;


        --contact-eyebrow-title-gap:
            15px;

        --contact-title-details-gap:
            32px;


        --contact-details-gap:
            24px;

        --contact-left-details-gap:
            18px;


        --contact-company-separator-width:
            88%;

        --contact-company-separator-space:
            17px;


        --contact-form-padding-top:
            24px;

        --contact-form-padding-right:
            24px;

        --contact-form-padding-bottom:
            24px;

        --contact-form-padding-left:
            24px;


        --contact-form-title-gap:
            20px;


        --contact-textarea-height:
            100px;


        --contact-button-margin-top:
            9px;
    }
}


/* ==========================================================
03 — MOBILE
========================================================== */

@media (max-width: 767px) {

    .valirina-contact-project {

        --contact-padding-top:
            0px;

        --contact-padding-right:
            14px;

        --contact-padding-bottom:
            24px;

        --contact-padding-left:
            14px;


        --contact-columns-gap:
            32px;


        --contact-heading-size:
            34px;


        --contact-eyebrow-title-gap:
            14px;

        --contact-title-details-gap:
            26px;


        --contact-details-gap:
            18px;

        --contact-left-details-gap:
            18px;


        --contact-label-size:
            12px;

        --contact-value-size:
            15px;


        --contact-company-separator-width:
            100%;

        --contact-company-separator-space:
            18px;


        --contact-form-radius:
            15px;


        --contact-form-padding-top:
            18px;

        --contact-form-padding-right:
            18px;

        --contact-form-padding-bottom:
            18px;

        --contact-form-padding-left:
            18px;


        --contact-form-title-gap:
            18px;


        --contact-field-height:
            44px;

        --contact-field-font-size:
            13.5px;


        --contact-textarea-height:
            96px;


        --contact-button-height:
            43px;

        --contact-button-margin-top:
            8px;
    }
}


/* ==========================================================
04 — SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .valirina-contact-project {

        --contact-padding-top:
            0px;

        --contact-padding-right:
            12px;

        --contact-padding-bottom:
            20px;

        --contact-padding-left:
            12px;


        --contact-heading-size:
            31px;


        --contact-form-padding-top:
            16px;

        --contact-form-padding-right:
            16px;

        --contact-form-padding-bottom:
            16px;

        --contact-form-padding-left:
            16px;
    }
}


/* ==========================================================
05 — RESET
========================================================== */

.valirina-contact-project,
.valirina-contact-project *,
.valirina-contact-project *::before,
.valirina-contact-project *::after {

    box-sizing:
        border-box;
}


/* ==========================================================
06 — MAIN SECTION
========================================================== */

.valirina-contact-project {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        var(--contact-max-width) !important;

    margin:
        0 auto !important;

    padding:
        var(--contact-padding-top)
        var(--contact-padding-right)
        var(--contact-padding-bottom)
        var(--contact-padding-left) !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* ==========================================================
07 — INNER GRID
========================================================== */

.valirina-contact-project
.contact-project-inner {

    display:
        grid !important;

    grid-template-columns:
        minmax(0, var(--contact-grid-left))
        minmax(0, var(--contact-grid-right)) !important;

    gap:
        var(--contact-columns-gap) !important;

    align-items:
        stretch !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;
}


/* ==========================================================
08 — LEFT COLUMN
========================================================== */

.valirina-contact-project
.contact-project-info {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        4px
        0
        0
        0 !important;

    background:
        transparent !important;
}


.valirina-contact-project
.contact-project-info > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;

    --justify-content:
        flex-start !important;

    --align-items:
        stretch !important;
}


/* ==========================================================
09 — EYEBROW
========================================================== */

.valirina-contact-project
.contact-project-eyebrow {

    position:
        relative !important;

    display:
        block !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    margin:
        0 !important;

    padding:
        0
        0
        0
        calc(
            var(--contact-eyebrow-dot-size)
            +
            var(--contact-eyebrow-gap)
        ) !important;

    color:
        var(--contact-eyebrow-color) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-eyebrow-size) !important;

    font-weight:
        var(--contact-eyebrow-weight) !important;

    line-height:
        1.4 !important;
}


.valirina-contact-project
.contact-project-eyebrow::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        50%;

    width:
        var(--contact-eyebrow-dot-size);

    height:
        var(--contact-eyebrow-dot-size);

    border-radius:
        50%;

    background:
        var(--contact-accent);

    transform:
        translateY(-50%);
}


.valirina-contact-project
.contact-project-eyebrow
.elementor-widget-container,

.valirina-contact-project
.contact-project-eyebrow p {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        inherit !important;

    font:
        inherit !important;
}


/* ==========================================================
10 — TYPING TITLE
========================================================== */

.valirina-contact-project
.contact-project-typing {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        620px !important;

    margin:
        var(--contact-eyebrow-title-gap)
        0
        0
        0 !important;

    padding:
        0 !important;
}


.valirina-contact-project
.contact-project-typing
.elementor-widget-container {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
11 — TITLES TYPOGRAPHY
========================================================== */

.valirina-contact-project
.contact-project-typing
.elementor-heading-title,

.valirina-contact-project
.contact-form-title
.elementor-heading-title,

.valirina-contact-project
.contact-project-typing h1,

.valirina-contact-project
.contact-project-typing h2,

.valirina-contact-project
.contact-project-typing h3,

.valirina-contact-project
.contact-project-typing h4,

.valirina-contact-project
.contact-project-typing h5,

.valirina-contact-project
.contact-project-typing h6,

.valirina-contact-project
.contact-form-title h1,

.valirina-contact-project
.contact-form-title h2,

.valirina-contact-project
.contact-form-title h3,

.valirina-contact-project
.contact-form-title h4,

.valirina-contact-project
.contact-form-title h5,

.valirina-contact-project
.contact-form-title h6 {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--contact-heading-color) !important;

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        var(--contact-heading-size) !important;

    font-weight:
        var(--contact-heading-weight) !important;

    font-style:
        normal !important;

    line-height:
        var(--contact-heading-line-height) !important;

    letter-spacing:
        var(--contact-heading-letter-spacing) !important;

    text-align:
        left !important;

    text-transform:
        none !important;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* ==========================================================
12 — TITLE SPANS
========================================================== */

.valirina-contact-project
.contact-form-title
.elementor-heading-title span,

.valirina-contact-project
.contact-project-typing
.elementor-heading-title
span:not(.contact-project-typing-text):not(.typing-cursor) {

    color:
        var(--contact-heading-accent) !important;

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    font-style:
        normal !important;

    line-height:
        inherit !important;

    letter-spacing:
        inherit !important;
}


/* ==========================================================
13 — TYPING TEXT — BLACK
========================================================== */

.valirina-contact-project
.contact-project-typing
.contact-project-typing-text,

.valirina-contact-project
.contact-project-typing
.elementor-heading-title
.contact-project-typing-text {

    color:
        var(--contact-primary) !important;

    -webkit-text-fill-color:
        var(--contact-primary) !important;

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        inherit !important;

    font-weight:
        620 !important;

    font-style:
        normal !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -0.035em !important;
}


/* ==========================================================
14 — CURSOR
========================================================== */

.valirina-contact-project
.contact-project-typing
.typing-cursor {

    display:
        inline-block !important;

    width:
        1px !important;

    height:
        .80em !important;

    margin-left:
        5px !important;

    vertical-align:
        -.04em !important;

    background:
        var(--contact-accent) !important;

    color:
        transparent !important;

    animation:
        valirina-contact-cursor
        .8s
        steps(1)
        infinite;
}


@keyframes valirina-contact-cursor {

    0%,
    48% {

        opacity:
            1;
    }

    49%,
    100% {

        opacity:
            0;
    }
}


/* ==========================================================
15 — CONTACT DETAILS
========================================================== */

.valirina-contact-project
.contact-project-details,

.valirina-contact-project
.contact-project-details > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        var(--contact-details-gap) !important;

    background:
        transparent !important;
}


.valirina-contact-project
.contact-project-details {

    margin-top:
        var(--contact-title-details-gap) !important;
}


/* ==========================================================
16 — LEFT DETAILS
========================================================== */

.valirina-contact-project
.contact-details-left {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    flex:
        1 1 0 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-contact-project
.contact-details-left > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        var(--contact-left-details-gap) !important;

    --justify-content:
        flex-start !important;

    --align-items:
        flex-start !important;
}


/* ==========================================================
17 — DETAIL BLOCKS
========================================================== */

.valirina-contact-project
.contact-detail {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-contact-project
.contact-detail > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        5px !important;
}


.valirina-contact-project
.contact-detail-email {

    flex:
        1 1 0 !important;

    width:
        100% !important;
}


.valirina-contact-project
.contact-detail-phone,

.valirina-contact-project
.contact-detail-location {

    width:
        100% !important;
}


/* ==========================================================
18 — DETAIL LABEL
========================================================== */

.valirina-contact-project
.contact-detail-label,

.valirina-contact-project
.contact-detail-label p {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--contact-secondary) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-label-size) !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;
}


/* ==========================================================
19 — DETAIL VALUE
========================================================== */

.valirina-contact-project
.contact-detail-value,

.valirina-contact-project
.contact-detail-value p,

.valirina-contact-project
.contact-detail-value a {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--contact-primary) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-value-size) !important;

    font-weight:
        var(--contact-value-weight) !important;

    line-height:
        1.4 !important;

    text-decoration:
        none !important;

    overflow-wrap:
        anywhere !important;
}


/* ==========================================================
20 — LOCATION
========================================================== */

.valirina-contact-project
.contact-location-value,

.valirina-contact-project
.contact-location-value p,

.valirina-contact-project
.contact-location-value a {

    white-space:
        normal !important;

    line-height:
        1.48 !important;
}


/* ==========================================================
21 — COMPANY INFO
========================================================== */

.valirina-contact-project
.contact-company-info {

    position:
        relative !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        var(--contact-company-separator-space)
        0
        0
        0 !important;

    padding:
        var(--contact-company-separator-space)
        0
        0
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;
}


/* ==========================================================
22 — CENTERED SEPARATOR
========================================================== */

.valirina-contact-project
.contact-company-info::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        var(--contact-company-separator-width);

    height:
        1px;

    background:
        var(--contact-border);

    transform:
        translateX(-50%);
}


.valirina-contact-project
.contact-company-info > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        var(--contact-company-gap) !important;
}


/* ==========================================================
23 — COMPANY TITLE
========================================================== */

.valirina-contact-project
.company-info-title,

.valirina-contact-project
.company-info-title p {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--contact-primary) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-company-title-size) !important;

    font-weight:
        600 !important;

    line-height:
        1.35 !important;
}


/* ==========================================================
24 — COMPANY LEGAL
========================================================== */

.valirina-contact-project
.company-info-legal,

.valirina-contact-project
.company-info-legal p {

    margin:
        var(--contact-company-item-gap)
        0
        0
        0 !important;

    padding:
        0 !important;

    color:
        #77716b !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-company-legal-size) !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        .01em !important;
}


/* ==========================================================
25 — COMPANY INFO LINES
========================================================== */

.valirina-contact-project
.company-info-line {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-contact-project
.company-info-line
.elementor-widget-container {

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-contact-project
.company-info-line,

.valirina-contact-project
.company-info-line p {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--contact-secondary) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-company-line-size) !important;

    font-weight:
        400 !important;

    line-height:
        1.30 !important;
}


.valirina-contact-project
.company-info-line
+
.company-info-line {

    margin-top:
        2px !important;
}


/* ==========================================================
26 — FORM CARD
VERTICALLY CENTERED ON DESKTOP
========================================================== */

.valirina-contact-project
.contact-form-card {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        var(--contact-form-padding-top)
        var(--contact-form-padding-right)
        var(--contact-form-padding-bottom)
        var(--contact-form-padding-left) !important;

    border:
        1px
        solid
        var(--contact-border) !important;

    border-radius:
        var(--contact-form-radius) !important;

    background:
        var(--contact-card-background) !important;

    box-shadow:
        none !important;

    align-self:
        center !important;
}


.valirina-contact-project
.contact-form-card > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;
}


/* ==========================================================
27 — FORM TITLE
========================================================== */

.valirina-contact-project
.contact-form-title {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0
        0
        var(--contact-form-title-gap)
        0 !important;

    padding:
        0 !important;
}


.valirina-contact-project
.contact-form-title
.elementor-widget-container {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
28 — FORM WRAPPER
========================================================== */

.valirina-contact-project
.contact-project-form,

.valirina-contact-project
.contact-project-form
.elementor-widget-container,

.valirina-contact-project
.contact-project-form
.fluentform,

.valirina-contact-project
.contact-project-form form {

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
29 — FORM GROUPS
========================================================== */

.valirina-contact-project
.contact-project-form
.ff-el-group {

    width:
        100% !important;

    margin:
        0
        0
        var(--contact-form-row-gap)
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
30 — HIDE LABELS
========================================================== */

.valirina-contact-project
.contact-project-form
.ff-el-input--label {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

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

    clip-path:
        inset(50%) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* ==========================================================
31 — INPUTS
========================================================== */

.valirina-contact-project
.contact-project-form
input[type="text"],

.valirina-contact-project
.contact-project-form
input[type="email"],

.valirina-contact-project
.contact-project-form
input[type="tel"],

.valirina-contact-project
.contact-project-form
input[type="number"],

.valirina-contact-project
.contact-project-form
input[type="url"],

.valirina-contact-project
.contact-project-form
select {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        var(--contact-field-height) !important;

    min-height:
        var(--contact-field-height) !important;

    margin:
        0 !important;

    padding:
        0
        var(--contact-field-padding-x) !important;

    border:
        1px
        solid
        var(--contact-border) !important;

    border-radius:
        var(--contact-field-radius) !important;

    background:
        rgba(255, 255, 255, .78) !important;

    color:
        var(--contact-primary) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-field-font-size) !important;

    font-weight:
        400 !important;

    line-height:
        1.3 !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    transition:
        border-color
        var(--contact-transition)
        ease,
        background
        var(--contact-transition)
        ease !important;
}


/* ==========================================================
32 — TEXTAREA
========================================================== */

.valirina-contact-project
.contact-project-form textarea {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-height:
        var(--contact-textarea-height) !important;

    height:
        var(--contact-textarea-height) !important;

    max-height:
        180px !important;

    margin:
        0 !important;

    padding:
        13px
        var(--contact-field-padding-x) !important;

    border:
        1px
        solid
        var(--contact-border) !important;

    border-radius:
        var(--contact-field-radius) !important;

    background:
        rgba(255, 255, 255, .78) !important;

    color:
        var(--contact-primary) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-field-font-size) !important;

    font-weight:
        400 !important;

    line-height:
        1.5 !important;

    resize:
        vertical !important;

    outline:
        none !important;

    box-shadow:
        none !important;
}


/* ==========================================================
33 — PLACEHOLDERS
========================================================== */

.valirina-contact-project
.contact-project-form
input::placeholder,

.valirina-contact-project
.contact-project-form
textarea::placeholder {

    color:
        var(--contact-muted) !important;

    opacity:
        .9 !important;

    font-family:
        inherit !important;

    font-size:
        inherit !important;

    font-weight:
        400 !important;
}


/* ==========================================================
34 — SELECT
========================================================== */

.valirina-contact-project
.contact-project-form select,

.valirina-contact-project
.contact-project-form
select.ff-el-form-control {

    color:
        var(--contact-muted) !important;

    -webkit-text-fill-color:
        var(--contact-muted) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-field-font-size) !important;

    font-weight:
        400 !important;

    opacity:
        .9 !important;

    cursor:
        pointer !important;
}


.valirina-contact-project
.contact-project-form
select option {

    color:
        var(--contact-primary) !important;

    -webkit-text-fill-color:
        var(--contact-primary) !important;

    opacity:
        1 !important;
}


/* ==========================================================
35 — FOCUS
========================================================== */

.valirina-contact-project
.contact-project-form input:focus,

.valirina-contact-project
.contact-project-form select:focus,

.valirina-contact-project
.contact-project-form textarea:focus {

    border-color:
        var(--contact-border-focus) !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


/* ==========================================================
36 — TWO COLUMN FORM ROW
========================================================== */

.valirina-contact-project
.contact-project-form
.ff-t-container {

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    gap:
        10px !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-contact-project
.contact-project-form
.ff-t-cell {

    width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
37 — CHECKBOX
========================================================== */

.valirina-contact-project
.contact-project-form
.ff-el-form-check {

    display:
        flex !important;

    align-items:
        flex-start !important;

    gap:
        8px !important;

    width:
        100% !important;
}


.valirina-contact-project
.contact-project-form
input[type="checkbox"] {

    flex:
        0 0 15px !important;

    width:
        15px !important;

    height:
        15px !important;

    margin:
        2px
        0
        0
        0 !important;

    accent-color:
        var(--contact-primary) !important;

    cursor:
        pointer !important;
}


.valirina-contact-project
.contact-project-form
.ff-el-form-check-label {

    color:
        var(--contact-secondary) !important;

    font-family:
        inherit !important;

    font-size:
        11.5px !important;

    font-weight:
        400 !important;

    line-height:
        1.5 !important;
}


/* ==========================================================
38 — SUBMIT BUTTON
========================================================== */

.valirina-contact-project
.contact-project-form
.ff-btn-submit,

.valirina-contact-project
.contact-project-form
button[type="submit"],

.valirina-contact-project
.contact-project-form
input[type="submit"] {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        var(--contact-button-height) !important;

    min-height:
        var(--contact-button-height) !important;

    margin:
        var(--contact-button-margin-top)
        0
        0
        0 !important;

    padding:
        0
        20px !important;

    border:
        1px
        solid
        var(--contact-button-background) !important;

    border-radius:
        var(--contact-button-radius) !important;

    background:
        var(--contact-button-background) !important;

    color:
        var(--contact-button-color) !important;

    font-family:
        inherit !important;

    font-size:
        var(--contact-button-size) !important;

    font-weight:
        var(--contact-button-weight) !important;

    line-height:
        1 !important;

    box-shadow:
        none !important;

    cursor:
        pointer !important;

    transition:
        background
        var(--contact-transition)
        ease,
        color
        var(--contact-transition)
        ease,
        border-color
        var(--contact-transition)
        ease !important;
}


/* ==========================================================
39 — SUBMIT HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

    .valirina-contact-project
    .contact-project-form
    .ff-btn-submit:hover,

    .valirina-contact-project
    .contact-project-form
    button[type="submit"]:hover,

    .valirina-contact-project
    .contact-project-form
    input[type="submit"]:hover {

        background:
            var(--contact-button-hover-background) !important;

        color:
            var(--contact-button-hover-color) !important;

        border-color:
            var(--contact-button-hover-border) !important;

        transform:
            none !important;

        box-shadow:
            none !important;
    }
}


/* ==========================================================
40 — ERROR
========================================================== */

.valirina-contact-project
.contact-project-form
.error {

    color:
        #a65447 !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    line-height:
        1.4 !important;
}


.valirina-contact-project
.contact-project-form
.ff-el-is-error input,

.valirina-contact-project
.contact-project-form
.ff-el-is-error textarea,

.valirina-contact-project
.contact-project-form
.ff-el-is-error select {

    border-color:
        rgba(166, 84, 71, .42) !important;
}


/* ==========================================================
41 — SUCCESS
========================================================== */

.valirina-contact-project
.contact-project-form
.ff-message-success {

    margin:
        0 !important;

    padding:
        14px
        16px !important;

    border:
        1px
        solid
        rgba(83, 119, 86, .16) !important;

    border-radius:
        9px !important;

    background:
        rgba(83, 119, 86, .055) !important;

    color:
        #4f6751 !important;

    font-family:
        inherit !important;

    font-size:
        12.5px !important;

    line-height:
        1.5 !important;

    box-shadow:
        none !important;
}


/* ==========================================================
42 — MOBILE LAYOUT
========================================================== */

@media (max-width: 767px) {

    .valirina-contact-project
    .contact-project-inner {

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        justify-content:
            flex-start !important;

        gap:
            var(--contact-columns-gap) !important;
    }


    .valirina-contact-project
    .contact-project-info,

    .valirina-contact-project
    .contact-form-card {

        width:
            100% !important;

        max-width:
            100% !important;
    }


    .valirina-contact-project
    .contact-form-card {

        align-self:
            stretch !important;
    }


    .valirina-contact-project
    .contact-project-details,

    .valirina-contact-project
    .contact-project-details > .e-con-inner {

        flex-direction:
            column !important;

        flex-wrap:
            nowrap !important;

        gap:
            var(--contact-details-gap) !important;
    }


    .valirina-contact-project
    .contact-details-left,

    .valirina-contact-project
    .contact-detail-email {

        flex:
            0 0 auto !important;

        width:
            100% !important;

        max-width:
            100% !important;
    }


    .valirina-contact-project
    .contact-project-form
    .ff-t-container {

        grid-template-columns:
            1fr !important;

        gap:
            0 !important;
    }
}


/* ==========================================================
43 — ELEMENTOR SAFETY
========================================================== */

.valirina-contact-project
.contact-project-inner,

.valirina-contact-project
.contact-project-info,

.valirina-contact-project
.contact-project-details,

.valirina-contact-project
.contact-details-left,

.valirina-contact-project
.contact-company-info,

.valirina-contact-project
.contact-form-card,

.valirina-contact-project
.contact-project-form {

    left:
        auto !important;

    right:
        auto !important;

    transform:
        none !important;
}


/* ==========================================================
44 — FINAL TITLE TYPOGRAPHY
========================================================== */

.valirina-contact-project
.contact-project-typing
.elementor-heading-title,

.valirina-contact-project
.contact-form-title
.elementor-heading-title {

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        var(--contact-heading-size) !important;

    font-weight:
        620 !important;

    font-style:
        normal !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -0.035em !important;
}


/* ==========================================================
45 — FORM TITLE SPAN
========================================================== */

.valirina-contact-project
.contact-form-title
.elementor-heading-title span {

    color:
        var(--contact-heading-accent) !important;

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    font-style:
        normal !important;

    line-height:
        inherit !important;

    letter-spacing:
        inherit !important;
}


/* ==========================================================
46 — FINAL TYPING TEXT
========================================================== */

.valirina-contact-project
.contact-project-typing
.contact-project-typing-text,

.valirina-contact-project
.contact-project-typing
.elementor-heading-title
.contact-project-typing-text {

    color:
        var(--contact-primary) !important;

    -webkit-text-fill-color:
        var(--contact-primary) !important;

    font-family:
        var(--valirina-editorial-font) !important;

    font-size:
        inherit !important;

    font-weight:
        620 !important;

    font-style:
        normal !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -0.035em !important;
}


/* ==========================================================
47 — REDUCED MOTION
========================================================== */

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

    .valirina-contact-project *,
    .valirina-contact-project *::before,
    .valirina-contact-project *::after {

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;
    }


    .valirina-contact-project
    .contact-project-typing
    .typing-cursor {

        animation:
            none !important;
    }
}