/* Start custom CSS for shortcode, class: .elementor-element-3df9f7c *//* ==========================================================
   MONOCRETE QUOTE - CONTACT FORM 7
   COMPACT / REFERENCE MATCH VERSION
========================================================== */

.mono-cf7-quote,
.mono-cf7-quote *,
.mono-cf7-quote *::before,
.mono-cf7-quote *::after {
    box-sizing: border-box;
}


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

.mono-cf7-quote {
    --mono-pink: #E91663;
    --mono-pink-light: #FF6699;
    --mono-pink-dark: #C90F52;

    --mono-dark: #29292F;
    --mono-heading: #303036;
    --mono-body: #62636A;
    --mono-muted: #92939A;
    --mono-border: #DAD9DF;

    width: 100%;

    margin: 0;

    padding:
        clamp(46px, 5vw, 72px)
        0;

    background:
        radial-gradient(
            circle at 94% 8%,
            rgba(233, 22, 99, 0.045),
            transparent 26%
        ),
        #FFFFFF;

    overflow: hidden;
}


/* ==========================================================
   VERY IMPORTANT:
   REMOVE CF7 / WORDPRESS AUTO SPACING
========================================================== */

.mono-cf7-quote p {
    margin: 0 !important;
    padding: 0 !important;
}

.mono-cf7-quote p:empty {
    display: none !important;
}

.mono-cf7-quote br {
    margin: 0;
}

.mono-cf7-quote .wpcf7-form {
    margin: 0 !important;
    padding: 0 !important;
}

.mono-cf7-quote .wpcf7-form-control-wrap {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   CONTAINER
========================================================== */

.mono-cf7-container {
     width: min(
    calc(100% - clamp(32px, 7vw, 100px)),
    1240px
  );

    margin-inline: auto;
}


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

.mono-cf7-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 0.98fr)
        minmax(0, 1.02fr);

    gap:
        clamp(26px, 2.8vw, 34px);

    align-items: stretch;
}


/* ==========================================================
   LEFT CARD
========================================================== */

.mono-cf7-left {
    position: relative;

    width: 100%;
    min-width: 0;

    padding:
        clamp(42px, 4vw, 52px)
        clamp(34px, 3.7vw, 42px);

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 111, 163, 0.14),
            transparent 35%
        ),
        linear-gradient(
            140deg,
            #303036 0%,
            #242429 100%
        );

    box-shadow:
        0 22px 65px
        rgba(48, 48, 54, 0.13);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    justify-content: center;

    text-align: left;
}


/* Background QUOTE */

.mono-cf7-left::before {
    content: "QUOTE";

    position: absolute;

    top: 17px;
    right: -21px;

    font-family:
        Manrope,
        Arial,
        sans-serif;

    font-size:
        clamp(86px, 8vw, 112px);

    line-height: 0.88;

    letter-spacing: -5px;

    font-weight: 800;

    color:
        rgba(255, 255, 255, 0.052);

    pointer-events: none;
}


/* Keep content above QUOTE */

.mono-cf7-left > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   KICKER
========================================================== */

.mono-cf7-kicker {
    display: block;

    width: fit-content;

    margin: 0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1.5px;

    color:
        #FF6FA3;

    text-transform: uppercase;
}


/* ==========================================================
   SMALL LINE
========================================================== */

.mono-cf7-line {
    width: 44px;

    height: 3px;

    margin:
        12px 0 20px;

    border-radius: 50px;

    background:
        var(--mono-pink);
}


/* ==========================================================
   LEFT HEADING
========================================================== */

.mono-cf7-left h2 {
    width: 100%;

    max-width: 420px;

    margin: 0 !important;
    padding: 0 !important;

    font-family:
        Manrope,
        Arial,
        sans-serif;

    font-size:
        clamp(39px, 3.75vw, 50px);

    line-height: 1.02;

    letter-spacing: -1.8px;

    font-weight: 800;

    color: #FFFFFF;
}


.mono-cf7-left h2 span {
    color:
        #FF6198;
}


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

.mono-cf7-intro {
    max-width: 420px;

    margin-top: 20px !important;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 13.5px;

    line-height: 1.7;

    font-weight: 400;

    color:
        rgba(255, 255, 255, 0.75);
}


/* ==========================================================
   HELPFUL DETAILS BOX
========================================================== */

.mono-cf7-note {
    width: 100%;

    margin-top: 24px;

    padding:
        20px 20px;

    display: grid;

    gap: 7px;

    border-radius: 17px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.095);

    backdrop-filter:
        blur(7px);
}


.mono-cf7-note strong {
    margin: 0;

    font-family:
        Manrope,
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 800;

    color: #FFFFFF;
}


.mono-cf7-note span {
    margin: 0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.55;

    font-weight: 400;

    color:
        rgba(255, 255, 255, 0.77);
}


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

.mono-cf7-contact {
    display: grid;

    gap: 12px;

    margin-top: 24px;
}


.mono-cf7-contact a {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    color:
        #FFFFFF !important;

    text-decoration:
        none !important;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 800;

    transition:
        color 0.2s ease;
}


.mono-cf7-contact a:hover {
    color:
        #FF6FA3 !important;
}


.mono-cf7-contact-icon {
    width: 20px;
    height: 20px;

    flex:
        0 0 20px;

    display: inline-flex;

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

    border-radius: 50%;

    background:
        rgba(233, 22, 99, 0.21);

    color:
        #FF6FA3;

    font-size: 10px;

    font-weight: 900;
}


/* ==========================================================
   RIGHT CARD
========================================================== */

.mono-cf7-card {
    position: relative;

    width: 100%;
    min-width: 0;

    padding:
        clamp(30px, 3vw, 36px)
        clamp(28px, 3vw, 34px);

    border-radius: 30px;

    border:
        1px solid
        rgba(218, 217, 223, 0.98);

    background:
        #FFFFFF;

    box-shadow:
        0 22px 65px
        rgba(48, 48, 54, 0.085);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* Pink accent */

.mono-cf7-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 32px;
    right: 32px;

    height: 3px;

    border-radius:
        0 0 100px 100px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(233, 22, 99, 0.7),
            transparent
        );
}


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

.mono-cf7-form-grid {
    width: 100%;

    display: grid;

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

    column-gap: 14px;

    row-gap: 16px;
}


.mono-cf7-field {
    width: 100%;
    min-width: 0;

    display: grid;

    gap: 7px;

    margin: 0;
    padding: 0;
}


.mono-cf7-full {
    grid-column:
        1 / -1;
}


/* ==========================================================
   LABEL
========================================================== */

.mono-cf7-field > label {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 500;

    color:
        #22232A;
}


/* ==========================================================
   NORMAL INPUTS
========================================================== */

.mono-cf7-quote input[type="text"],
.mono-cf7-quote input[type="email"],
.mono-cf7-quote input[type="tel"],
.mono-cf7-quote select,
.mono-cf7-quote textarea {

    display: block;

    width: 100%;

    min-width: 0;
    max-width: 100%;

    margin: 0 !important;

    border:
        1px solid
        #CAC9D0;

    border-radius: 10px;

    background:
        #FFFFFF;

    outline: none;

    box-shadow:
        0 3px 11px
        rgba(48, 48, 54, 0.035);

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 400;

    color:
        var(--mono-heading);

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


/* Inputs / select */

.mono-cf7-quote input[type="text"],
.mono-cf7-quote input[type="email"],
.mono-cf7-quote input[type="tel"],
.mono-cf7-quote select {

    height: 40px;

    min-height: 40px;

    padding:
        9px 12px;
}


/* Textarea */

.mono-cf7-quote textarea {
    height: 90px;

    min-height: 90px;

    padding:
        11px 12px;

    resize: vertical;
}


/* Placeholders */

.mono-cf7-quote input::placeholder,
.mono-cf7-quote textarea::placeholder {
    color:
        #A0A0A8;

    opacity: 1;
}


/* Focus */

.mono-cf7-quote input[type="text"]:focus,
.mono-cf7-quote input[type="email"]:focus,
.mono-cf7-quote input[type="tel"]:focus,
.mono-cf7-quote select:focus,
.mono-cf7-quote textarea:focus {

    border-color:
        rgba(233, 22, 99, 0.56);

    box-shadow:
        0 0 0 3px
        rgba(233, 22, 99, 0.07);
}


/* ==========================================================
   FILE FIELD
========================================================== */

.mono-cf7-upload {
    gap: 7px;
}


.mono-cf7-quote input[type="file"] {
    display: block;

    width: 100%;
    max-width: 100%;

    min-height: 43px;

    margin: 0 !important;

    padding: 6px;

    border:
        1px solid
        #CAC9D0;

    border-radius: 5px;

    background:
        #FFFFFF;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 12px;

    color:
        #5D5E67;

    cursor: pointer;
}


.mono-cf7-quote
input[type="file"]::file-.elementor-277 .elementor-element.elementor-element-3df9f7c-button {

    min-height: 29px;

    margin-right: 7px;

    padding:
        6px 10px;

    border:
        1px solid
        #BBBBBF;

    border-radius: 2px;

    background:
        #F6F6F7;

    color:
        #25262C;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 12px;

    cursor: pointer;
}


.mono-cf7-upload small {
    display: block;

    margin: 0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 10.5px;

    line-height: 1.45;

    color:
        #9999A2;
}


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

.mono-cf7-submit-wrap {
    position: relative;

    padding-top: 8px;
}


.mono-cf7-quote
input[type="submit"].mono-cf7-submit {

    display: block;

    width: 100%;

    height: 45px;
    min-height: 45px;

    margin: 0 !important;

    padding:
        11px 18px;

    border: none;

    border-radius: 4px;

    background:
        var(--mono-pink);

    color:
        #FFFFFF;

    box-shadow:
        0 14px 30px
        rgba(233, 22, 99, 0.17);

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.mono-cf7-quote
input[type="submit"].mono-cf7-submit:hover {

    background:
        var(--mono-pink-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 17px 34px
        rgba(233, 22, 99, 0.22);
}


/* ==========================================================
   CF7 SPINNER
========================================================== */

.mono-cf7-submit-wrap
.wpcf7-spinner {

    position: absolute;

    right: 10px;
    top: 50%;

    margin: 0;

    transform:
        translateY(-35%);
}


/* ==========================================================
   CF7 VALIDATION
========================================================== */

.mono-cf7-quote
.wpcf7-not-valid {

    border-color:
        #D8436B !important;
}


.mono-cf7-quote
.wpcf7-not-valid-tip {

    display: block;

    margin:
        4px 0 0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.35;

    color:
        #C90F52;
}


/* ==========================================================
   RESPONSE
========================================================== */

.mono-cf7-response {
    width: 100%;

    margin: 0;
}


.mono-cf7-response
.wpcf7-response-output {

    margin:
        0 0 16px !important;

    padding:
        11px 13px !important;

    border-radius:
        9px !important;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.45;

    font-weight: 600;
}


/* Keep completely empty response out of layout */

.mono-cf7-response:empty {
    display: none;
}


.mono-cf7-quote
form.sent
.wpcf7-response-output {

    color:
        #167744;

    background:
        rgba(35, 160, 85, 0.08);

    border:
        1px solid
        rgba(35, 160, 85, 0.22) !important;
}


.mono-cf7-quote
form.failed
.wpcf7-response-output,

.mono-cf7-quote
form.aborted
.wpcf7-response-output {

    color:
        #C90F52;

    background:
        rgba(233, 22, 99, 0.07);

    border:
        1px solid
        rgba(233, 22, 99, 0.2) !important;
}


.mono-cf7-quote
form.invalid
.wpcf7-response-output {

    color:
        #805D00;

    background:
        rgba(255, 185, 0, 0.09);

    border:
        1px solid
        rgba(255, 185, 0, 0.3) !important;
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1199px) {

    .mono-cf7-container {
        width:
            min(
                calc(100% - 40px),
                1040px
            );
    }


    .mono-cf7-layout {
        gap: 28px;
    }


    .mono-cf7-left {
        padding:
            42px 36px;
    }


    .mono-cf7-card {
        padding:
            30px 28px;
    }


    .mono-cf7-left h2 {
        font-size:
            clamp(38px, 4.1vw, 47px);
    }

}


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

@media (max-width: 900px) {

    .mono-cf7-quote {
        padding:
            52px 0;
    }


    .mono-cf7-container {
        width:
            calc(100% - 40px);

        max-width:
            720px;
    }


    .mono-cf7-layout {
        grid-template-columns:
            1fr;

        gap: 22px;
    }


    .mono-cf7-left,
    .mono-cf7-card {
        min-height: auto;
    }


    .mono-cf7-left {
        padding:
            42px 36px;

        border-radius:
            28px;
    }


    .mono-cf7-card {
        padding:
            32px;

        border-radius:
            28px;
    }


    .mono-cf7-left h2 {
        max-width:
            520px;

        font-size:
            46px;
    }


    .mono-cf7-intro {
        max-width:
            570px;
    }


    .mono-cf7-note {
        max-width:
            570px;
    }

}


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

@media (max-width: 767px) {

    .mono-cf7-quote {
        padding:
            44px 0;
    }


    .mono-cf7-container {
        width:
            calc(100% - 28px);
    }


    .mono-cf7-layout {
        gap: 16px;
    }


    /* LEFT */

    .mono-cf7-left {
        padding:
            32px 22px;

        border-radius:
            24px;
    }


    .mono-cf7-left::before {
        top: 16px;

        right: -12px;

        font-size:
            76px;
    }


    .mono-cf7-kicker {
        font-size: 11px;
    }


    .mono-cf7-line {
        margin:
            11px 0 18px;
    }


    .mono-cf7-left h2 {
        font-size:
            clamp(34px, 10vw, 42px);

        line-height:
            1.03;

        letter-spacing:
            -1.3px;
    }


    .mono-cf7-intro {
        margin-top:
            17px !important;

        font-size:
            13px;

        line-height:
            1.62;
    }


    .mono-cf7-note {
        margin-top:
            21px;

        padding:
            18px;

        border-radius:
            16px;
    }


    .mono-cf7-note strong {
        font-size:
            17px;
    }


    .mono-cf7-note span {
        font-size:
            12.5px;
    }


    .mono-cf7-contact {
        margin-top:
            21px;
    }


    .mono-cf7-contact a {
        width: 100%;

        font-size:
            12.5px;

        overflow-wrap:
            anywhere;
    }


    /* RIGHT */

    .mono-cf7-card {
        padding:
            28px 20px;

        border-radius:
            24px;
    }


    .mono-cf7-card::before {
        left: 22px;
        right: 22px;
    }


    .mono-cf7-form-grid {
        grid-template-columns:
            1fr;

        gap: 14px;
    }


    .mono-cf7-full {
        grid-column:
            auto;
    }


    .mono-cf7-quote input[type="text"],
    .mono-cf7-quote input[type="email"],
    .mono-cf7-quote input[type="tel"],
    .mono-cf7-quote select {

        height: 47px;

        min-height: 47px;

        font-size: 16px;
    }


    .mono-cf7-quote textarea {

        height: 110px;

        min-height: 110px;

        font-size: 16px;
    }


    .mono-cf7-quote input[type="file"] {
        font-size: 12px;
    }


    .mono-cf7-quote
    input[type="submit"].mono-cf7-submit {

        height: 52px;

        min-height: 52px;

        font-size: 13px;
    }

}


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

@media (max-width: 420px) {

    .mono-cf7-container {
        width:
            calc(100% - 22px);
    }


    .mono-cf7-left {
        padding:
            29px 18px;

        border-radius:
            21px;
    }


    .mono-cf7-card {
        padding:
            25px 16px;

        border-radius:
            21px;
    }


    .mono-cf7-left h2 {
        font-size:
            clamp(31px, 9.6vw, 38px);
    }


    .mono-cf7-note {
        padding:
            16px;
    }


    .mono-cf7-quote
    input[type="file"]::file-.elementor-277 .elementor-element.elementor-element-3df9f7c-button {

        margin-right:
            5px;

        padding:
            6px 8px;
    }

}


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

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

    .mono-cf7-quote input,
    .mono-cf7-quote textarea,
    .mono-cf7-quote select,
    .mono-cf7-contact a {

        transition:
            none !important;
    }

}/* End custom CSS */