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

.makoro-contact-page {
    --mk-green-dark: #073c25;
    --mk-green-deep: #0b4d2d;
    --mk-green: #126b3b;
    --mk-green-medium: #208450;
    --mk-green-light: #eaf5ee;

    --mk-cream: #fbfaf4;
    --mk-white: #ffffff;

    --mk-text: #183429;
    --mk-text-soft: #65756c;

    --mk-border: #dce7df;

    width: 100%;

    padding:
        48px
        0
        70px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(32, 132, 80, .08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcf9 100%
        );

    color: var(--mk-text);
}


.makoro-contact-container {
    width:
        min(
            1180px,
            calc(100% - 34px)
        );

    margin:
        0
        auto;
}


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

.makoro-contact-heading {
    max-width: 730px;

    margin:
        0
        auto
        48px;

    text-align: center;
}


.makoro-contact-kicker {
    display: inline-block;

    margin-bottom: 9px;

    color:
        var(--mk-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.makoro-contact-heading h1 {
    margin:
        0
        0
        13px;

    color:
        var(--mk-green-dark);

    font-size:
        clamp(
            32px,
            4vw,
            46px
        );

    font-weight: 800;

    line-height: 1.1;
}


.makoro-contact-heading p {
    margin: 0;

    color:
        var(--mk-text-soft);

    font-size: 15px;

    line-height: 1.75;
}


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

.makoro-contact-wrapper {
    display: flex;

    align-items: center;

    justify-content: center;

    max-width: 1050px;

    margin:
        0
        auto;
}


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

.makoro-support-card {
    position: relative;

    z-index: 3;

    flex:
        0
        0
        330px;

    width: 330px;

    margin-right: -45px;

    padding:
        35px
        30px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #073c25 0%,
            #0c5f37 55%,
            #147746 100%
        );

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .06
        );

    border-radius: 18px;

    box-shadow:
        0 22px 48px
        rgba(
            7,
            60,
            37,
            .22
        );
}


.makoro-support-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, .08),
            transparent 35%
        );
}


.makoro-support-title {
    position: relative;

    margin:
        0
        0
        28px;

    color: #ffffff;

    font-size: 21px;

    font-weight: 800;
}


/* =========================================================
   SUPPORT BLOCKS
========================================================= */

.makoro-support-block {
    position: relative;

    margin-bottom: 26px;
}


.makoro-support-block:last-child {
    margin-bottom: 0;
}


.makoro-support-block h3 {
    margin:
        0
        0
        11px;

    color:
        rgba(
            255,
            255,
            255,
            .73
        );

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.makoro-support-row {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 11px;
}


.makoro-support-row:last-child {
    margin-bottom: 0;
}


.makoro-support-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0
        0
        36px;

    width: 36px;

    height: 36px;

    color: #ffffff;

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

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 50%;

    font-size: 13px;
}


.makoro-support-small {
    display: block;

    margin-bottom: 1px;

    color:
        rgba(
            255,
            255,
            255,
            .65
        );

    font-size: 10px;
}


.makoro-support-row a,
.makoro-support-row span {
    color:
        rgba(
            255,
            255,
            255,
            .96
        );

    text-decoration: none;

    font-size: 13px;

    line-height: 1.6;

    overflow-wrap: anywhere;
}


.makoro-support-row a:hover {
    color: #ffffff;
}


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

.makoro-social-links {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.makoro-social-links a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    color: #ffffff;

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

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 50%;

    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease;
}


.makoro-social-links a:hover {
    background:
        rgba(
            255,
            255,
            255,
            .20
        );

    transform:
        translateY(-2px);
}


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

.makoro-form-card {
    position: relative;

    z-index: 2;

    width:
        min(
            720px,
            100%
        );

    padding:
        40px
        40px
        38px
        82px;

    box-sizing: border-box;

    background: #ffffff;

    border:
        1px
        solid
        #e2ebe5;

    border-radius: 18px;

    box-shadow:
        0 16px 45px
        rgba(
            16,
            65,
            39,
            .09
        );
}


.makoro-form-card::before {
    content: "";

    position: absolute;

    top: 0;

    left: 82px;

    width: 76px;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--mk-green),
            #66a93f
        );

    border-radius:
        0
        0
        4px
        4px;
}


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

.makoro-form-heading {
    margin-bottom: 27px;
}


.makoro-form-heading > span {
    display: block;

    margin-bottom: 6px;

    color:
        var(--mk-green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.makoro-form-heading h2 {
    margin:
        0
        0
        8px;

    color:
        var(--mk-green-dark);

    font-size: 25px;

    font-weight: 800;
}


.makoro-form-heading p {
    max-width: 570px;

    margin: 0;

    color:
        var(--mk-text-soft);

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   ALERT
========================================================= */

.makoro-form-alert {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 20px;

    padding:
        12px
        14px;

    color: #9a2929;

    background: #fff4f4;

    border:
        1px
        solid
        #ffd0d0;

    border-radius: 9px;

    font-size: 13px;

    line-height: 1.5;
}


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

.makoro-form-grid {
    display: grid;

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

    gap:
        18px
        16px;
}


.makoro-form-field {
    min-width: 0;
}


.makoro-form-field-full {
    grid-column:
        1 / -1;
}


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

.makoro-form-field label {
    display: block;

    margin-bottom: 7px;

    color:
        #2c4035;

    font-size: 12px;

    font-weight: 700;
}


.makoro-form-field label span {
    color: #d83535;
}


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

.makoro-input-wrap {
    position: relative;
}


.makoro-input-wrap > i {
    position: absolute;

    top: 50%;

    left: 15px;

    transform:
        translateY(-50%);

    color:
        #78897f;

    font-size: 13px;

    pointer-events: none;
}


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

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

    box-sizing: border-box;

    color:
        var(--mk-text);

    background:
        #fbfcfb;

    border:
        1px
        solid
        #cfdad3;

    border-radius: 10px;

    outline: none;

    font-family: inherit;

    font-size: 13px;

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


.makoro-form-field input {
    height: 48px;

    padding:
        0
        14px;
}


.makoro-input-wrap input {
    padding-left: 42px;
}


.makoro-form-field textarea {
    min-height: 145px;

    padding:
        13px
        14px;

    resize: vertical;

    line-height: 1.55;
}


.makoro-form-field input::placeholder,
.makoro-form-field textarea::placeholder {
    color: #9da8a2;
}


.makoro-form-field input:focus,
.makoro-form-field textarea:focus {
    background: #ffffff;

    border-color:
        var(--mk-green);

    box-shadow:
        0 0 0 3px
        rgba(
            18,
            107,
            59,
            .10
        );
}


/* =========================================================
   CHARACTER COUNT
========================================================= */

.makoro-character-count {
    margin-top: 5px;

    text-align: right;

    color: #98a39d;

    font-size: 10px;
}


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

.makoro-form-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 22px;

    padding-top: 20px;

    border-top:
        1px
        solid
        #edf1ee;
}


.makoro-privacy-note {
    display: flex;

    align-items: center;

    gap: 8px;

    max-width: 360px;

    color:
        #78867e;

    font-size: 11px;

    line-height: 1.5;
}


.makoro-privacy-note i {
    flex-shrink: 0;

    color:
        var(--mk-green);

    font-size: 14px;
}


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

.makoro-send-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-width: 165px;

    min-height: 48px;

    padding:
        0
        20px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b5a34,
            #14824a
        );

    border: 0;

    border-radius: 10px;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 18px
        rgba(
            11,
            90,
            52,
            .18
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.makoro-send-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 23px
        rgba(
            11,
            90,
            52,
            .24
        );
}


.makoro-send-btn:disabled {
    opacity: .65;

    cursor: wait;

    transform: none;
}


/* =========================================================
   HONEYPOT
========================================================= */

.makoro-honeypot {
    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

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

    opacity: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   BOTTOM INFO CARDS
========================================================= */

.makoro-contact-info-grid {
    display: grid;

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

    gap: 18px;

    max-width: 1050px;

    margin:
        38px
        auto
        0;
}


.makoro-info-card {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 24px;

    background:
        var(--mk-cream);

    border:
        1px
        solid
        var(--mk-border);

    border-radius: 15px;
}


.makoro-info-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0
        0
        44px;

    width: 44px;

    height: 44px;

    color:
        var(--mk-green);

    background:
        var(--mk-green-light);

    border-radius: 12px;

    font-size: 17px;
}


.makoro-info-card h3 {
    margin:
        0
        0
        7px;

    color:
        var(--mk-green-dark);

    font-size: 17px;

    font-weight: 800;
}


.makoro-info-card p {
    margin: 0;

    color:
        var(--mk-text-soft);

    font-size: 12px;

    line-height: 1.65;
}


/* =========================================================
   MAP
========================================================= */

.makoro-map-section {
    max-width: 1050px;

    margin:
        40px
        auto
        0;
}


.makoro-map-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}


.makoro-map-heading span {
    display: block;

    margin-bottom: 4px;

    color:
        var(--mk-green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.makoro-map-heading h2 {
    margin: 0;

    color:
        var(--mk-green-dark);

    font-size: 22px;

    font-weight: 800;
}


.makoro-map-heading p {
    margin: 0;

    color:
        var(--mk-text-soft);

    font-size: 12px;
}


.makoro-map-box {
    width: 100%;

    height: 380px;

    overflow: hidden;

    background: #eef2ef;

    border:
        1px
        solid
        var(--mk-border);

    border-radius: 16px;

    box-shadow:
        0 10px 30px
        rgba(
            20,
            53,
            36,
            .06
        );
}


.makoro-map-box iframe {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;
}


/* =========================================================
   SUCCESS OVERLAY
========================================================= */

.makoro-success-overlay {
    position: fixed;

    inset: 0;

    z-index: 9999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(
            6,
            34,
            20,
            .68
        );

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);
}


/* =========================================================
   SUCCESS MODAL
========================================================= */

.makoro-success-modal {
    width: 100%;

    max-width: 430px;

    box-sizing: border-box;

    padding:
        38px
        32px
        30px;

    text-align: center;

    background: #ffffff;

    border:
        1px
        solid
        rgba(
            12,
            96,
            55,
            .10
        );

    border-radius: 20px;

    box-shadow:
        0 28px 75px
        rgba(
            0,
            0,
            0,
            .28
        );

    animation:
        makoroSuccessPopup
        .32s
        ease;
}


@keyframes makoroSuccessPopup {

    from {
        opacity: 0;

        transform:
            translateY(22px)
            scale(.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


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

.makoro-success-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    margin:
        0
        auto
        16px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #07552f,
            #1b9254
        );

    border-radius: 50%;

    box-shadow:
        0 12px 26px
        rgba(
            17,
            128,
            72,
            .25
        );

    font-size: 29px;
}


.makoro-success-label {
    display: inline-block;

    margin-bottom: 8px;

    color:
        var(--mk-green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.makoro-success-modal h2 {
    margin:
        0
        0
        11px;

    color:
        var(--mk-green-dark);

    font-size: 24px;

    font-weight: 800;

    line-height: 1.25;
}


.makoro-success-modal p {
    margin:
        0
        0
        16px;

    color:
        var(--mk-text-soft);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   ENQUIRY NUMBER
========================================================= */

.makoro-enquiry-number {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    padding:
        9px
        15px;

    color:
        #355243;

    background:
        #eef8f2;

    border:
        1px
        solid
        #d4eadc;

    border-radius: 9px;

    font-size: 12px;
}


.makoro-enquiry-number strong {
    color:
        var(--mk-green);

    font-size: 14px;

    font-weight: 800;
}


.makoro-whatsapp-info {
    font-size: 12px !important;
}


/* =========================================================
   POPUP WHATSAPP BUTTON
========================================================= */

.makoro-success-whatsapp-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    width: 100%;

    min-height: 50px;

    padding:
        12px
        20px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b7040,
            #1e9a5b
        );

    border: 0;

    border-radius: 11px;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 10px 23px
        rgba(
            15,
            135,
            76,
            .20
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.makoro-success-whatsapp-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(
            15,
            135,
            76,
            .27
        );
}


.makoro-success-whatsapp-btn i {
    font-size: 19px;
}


.makoro-success-whatsapp-btn:disabled {
    opacity: .70;

    cursor: wait;

    transform: none;
}


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

@media
(max-width: 900px) {

    .makoro-contact-wrapper {
        flex-direction: column;

        align-items: center;
    }


    .makoro-support-card {
        width:
            calc(
                100% - 50px
            );

        max-width: 680px;

        flex: none;

        box-sizing: border-box;

        margin:
            0
            0
            -32px;

        padding:
            28px
            28px;

        z-index: 3;
    }


    .makoro-form-card {
        width: 100%;

        max-width: 720px;

        padding:
            66px
            30px
            32px;
    }


    .makoro-form-card::before {
        left: 30px;
    }

}


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

@media
(max-width: 650px) {

    .makoro-contact-page {
        padding:
            30px
            0
            45px;
    }


    .makoro-contact-container {
        width:
            calc(
                100% - 22px
            );
    }


    .makoro-contact-heading {
        margin-bottom: 30px;
    }


    .makoro-contact-heading h1 {
        font-size: 31px;
    }


    .makoro-contact-heading p {
        font-size: 13px;
    }


    /* SUPPORT */

    .makoro-support-card {
        width: 100%;

        max-width: none;

        margin:
            0
            0
            18px;

        padding:
            25px
            21px;

        border-radius: 14px;
    }


    /* FORM */

    .makoro-form-card {
        max-width: none;

        padding:
            27px
            20px;

        border-radius: 14px;
    }


    .makoro-form-card::before {
        left: 20px;
    }


    .makoro-form-heading h2 {
        font-size: 22px;
    }


    .makoro-form-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .makoro-form-field-full {
        grid-column: auto;
    }


    .makoro-form-bottom {
        flex-direction: column;

        align-items: stretch;
    }


    .makoro-send-btn {
        width: 100%;
    }


    .makoro-privacy-note {
        max-width: none;
    }


    /* INFO */

    .makoro-contact-info-grid {
        grid-template-columns: 1fr;

        margin-top: 25px;
    }


    /* MAP */

    .makoro-map-section {
        margin-top: 30px;
    }


    .makoro-map-heading {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }


    .makoro-map-box {
        height: 310px;
    }


    /* MODAL */

    .makoro-success-overlay {
        padding: 14px;
    }


    .makoro-success-modal {
        max-width: 100%;

        padding:
            31px
            20px
            24px;

        border-radius: 16px;
    }


    .makoro-success-icon {
        width: 64px;

        height: 64px;

        font-size: 25px;
    }


    .makoro-success-modal h2 {
        font-size: 21px;
    }

}


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

@media
(max-width: 400px) {

    .makoro-contact-container {
        width:
            calc(
                100% - 16px
            );
    }


    .makoro-support-card {
        padding:
            23px
            17px;
    }


    .makoro-form-card {
        padding:
            24px
            16px;
    }


    .makoro-form-card::before {
        left: 16px;
    }


    .makoro-map-box {
        height: 270px;
    }

}
/* =========================================================
   SUCCESS POPUP ACTIONS
========================================================= */

.makoro-success-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}


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

.makoro-success-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 48px;
    padding: 13px 22px;

    border: none;
    border-radius: 9px;

    background: #168c4e;
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

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


.makoro-success-whatsapp-btn:hover {
    background: #107a42;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(22, 140, 78, .20);
}


.makoro-success-whatsapp-btn i {
    font-size: 17px;
}


/* =========================================================
   BACK TO WEBSITE BUTTON
========================================================= */

.makoro-success-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;
    padding: 13px 22px;

    border: 1px solid #d5ded8;
    border-radius: 9px;

    background: #ffffff;
    color: #315343;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.makoro-success-back-btn:hover {
    background: #f4f8f5;

    border-color: #b9ccc0;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, .06);
}


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

@media (max-width: 575px) {

    .makoro-success-actions {
        flex-direction: column;
        width: 100%;
    }


    .makoro-success-whatsapp-btn,
    .makoro-success-back-btn {
        width: 100%;
    }

}