/* =========================================================
   HNIA HARRATI
   CONTACT PAGE
========================================================= */


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

body {
    background: #fcfbf8;
}


/* =========================================================
   HERO
========================================================= */

.hnia-contact-hero {
    width: calc(100% - 72px);
    max-width: 1600px;

    margin: 0 auto;

    padding:
        165px
        0
        105px;

    text-align: center;
}


.hnia-contact-eyebrow {
    display: inline-block;

    margin-bottom: 20px;

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

    font-size: 8px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .20em;

    text-transform: uppercase;

    color: #a6754c;
}


.hnia-contact-title
.elementor-heading-title {
    margin: 0;

    font-family:
        "League Spartan",
        Arial,
        sans-serif;

    font-size:
        clamp(58px, 7vw, 94px);

    font-weight: 400;

    line-height: .92;

    letter-spacing: -.05em;

    color: #17120f;
}


.hnia-contact-intro {
    max-width: 620px;

    margin:
        28px
        auto
        0;

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

    font-size: 12px;

    line-height: 1.8;

    color: #776d66;
}


/* =========================================================
   HERO CONTACT LINKS
========================================================= */

.hnia-contact-links {
    display: grid !important;

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

    width: 100%;

    max-width: 760px;

    margin:
        58px
        auto
        0;

    border-top:
        1px solid
        rgba(23,18,15,.10);

    border-bottom:
        1px solid
        rgba(23,18,15,.10);
}


.hnia-contact-links
> .e-con {
    padding:
        24px
        28px;
}


.hnia-contact-links
> .e-con:first-child {
    border-right:
        1px solid
        rgba(23,18,15,.10);
}


.hnia-contact-links
.elementor-heading-title {
    margin:
        0
        0
        8px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: #8a8078;
}


.hnia-contact-links
.elementor-widget-text-editor {
    margin: 0;

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

    font-size: 11px;

    color: #17120f;
}


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

.hnia-contact-form-section {
    display: grid !important;

    grid-template-columns:
        minmax(0, .78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(70px, 8vw, 140px);

    width:
        calc(100% - 72px);

    max-width:
        1600px;

    margin:
        0
        auto;

    padding:
        115px
        0
        130px;

    border-top:
        1px solid
        rgba(23,18,15,.08);
}


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

.hnia-contact-form-copy {
    max-width: 480px;
}


.hnia-contact-form-copy
.elementor-widget-html {
    margin-bottom: 18px;
}


.hnia-contact-form-copy
.elementor-widget-html {
    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #a6754c;
}


.hnia-contact-form-copy
.elementor-heading-title {
    margin: 0;

    font-family:
        "League Spartan",
        Arial,
        sans-serif;

    font-size:
        clamp(42px, 4.5vw, 60px);

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.04em;

    color: #17120f;
}


.hnia-contact-form-copy
.elementor-widget-text-editor {
    max-width: 430px;

    margin-top: 24px;

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

    font-size: 11px;

    line-height: 1.85;

    color: #776d66;
}


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

.hnia-contact-form-wrapper {
    width: 100%;
}


/* =========================================================
   FLUENT FORMS
========================================================= */

.hnia-contact-form
.ff-el-group {
    margin-bottom:
        24px !important;
}


.hnia-contact-form
.ff-el-input--label {
    margin-bottom:
        9px !important;
}


.hnia-contact-form
.ff-el-input--label
label {
    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;

    line-height: 1.2 !important;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    color:
        #776d66 !important;
}


.hnia-contact-form
.ff-el-form-control {
    width: 100% !important;

    min-height:
        56px;

    padding:
        0
        16px !important;

    border:
        1px solid
        rgba(23,18,15,.12) !important;

    border-radius:
        0 !important;

    outline:
        none !important;

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

    box-shadow:
        none !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size:
        11px !important;

    color:
        #17120f !important;

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}


.hnia-contact-form
textarea.ff-el-form-control {
    min-height:
        170px;

    padding:
        16px !important;

    resize:
        vertical;
}


.hnia-contact-form
.ff-el-form-control:focus {
    border-color:
        rgba(166,117,76,.55) !important;

    background:
        #fff !important;

    box-shadow:
        0 0 0 3px
        rgba(166,117,76,.06) !important;
}


.hnia-contact-form
.ff-btn-submit {
    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-width:
        200px;

    min-height:
        58px;

    margin-top:
        4px !important;

    padding:
        0
        26px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        #17120f !important;

    box-shadow:
        none !important;

    color:
        #fffdf9 !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;

    line-height: 1;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    transition:
        background-color 260ms ease,
        transform 300ms cubic-bezier(.16,1,.3,1);
}


.hnia-contact-form
.ff-btn-submit:hover {
    background:
        #a6754c !important;

    transform:
        translateY(-1px);
}


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

.hnia-contact-location {
    width: 100%;

    padding:
        115px
        0
        0;

    background:
        #f4f0ea;
}


/* Elementor nested container width */

.hnia-contact-location
> .e-con-inner {
    width:
        calc(100% - 72px);

    max-width:
        1600px;

    margin:
        0
        auto;
}


/* fallback for containers without .e-con-inner */

.hnia-contact-location {
    --container-max-width: 1600px;
}


/* =========================================================
   LOCATION TITLE
========================================================= */

.hnia-contact-location-title
.elementor-heading-title {
    margin: 0;

    font-family:
        "League Spartan",
        Arial,
        sans-serif;

    font-size:
        clamp(46px, 5vw, 68px);

    font-weight:
        400;

    line-height: .96;

    letter-spacing: -.04em;

    color:
        #17120f;
}


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

.hnia-contact-location-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.38fr)
        minmax(330px, .62fr);

    gap:
        clamp(50px, 7vw, 110px);

    align-items:
        stretch;

    width: 100%;

    margin-top:
        52px;
}


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

.hnia-contact-map {
    min-height:
        600px;

    overflow:
        hidden;

    background:
        #ded7cf;
}


.hnia-contact-map
.elementor-widget-html,
.hnia-contact-map
.elementor-widget-container {
    width: 100%;

    height: 100%;
}


.hnia-contact-map
iframe {
    display: block;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        600px;

    border:
        0;
}


/* =========================================================
   ADDRESS
========================================================= */

.hnia-contact-address {
    display:
        flex !important;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        48px
        0
        70px;
}


.hnia-contact-address
.elementor-widget-html {
    margin-bottom:
        18px;

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

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        #a6754c;
}


.hnia-contact-address
.elementor-heading-title {
    margin: 0;

    font-family:
        "League Spartan",
        Arial,
        sans-serif;

    font-size:
        clamp(34px, 3.5vw, 48px);

    font-weight:
        400;

    line-height: 1;

    letter-spacing:
        -.035em;

    color:
        #17120f;
}


.hnia-contact-address
.elementor-widget-text-editor {
    margin-top:
        22px;

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

    font-size:
        11px;

    line-height:
        1.9;

    color:
        #6f655e;
}


/* =========================================================
   GOOGLE MAPS BUTTON
========================================================= */

.hnia-contact-address
.elementor-button {
    position:
        relative;

    display:
        inline-flex;

    width:
        fit-content;

    margin-top:
        26px;

    padding:
        0
        0
        7px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        #17120f !important;

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

    font-size:
        8px;

    font-weight:
        700;

    line-height: 1;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.hnia-contact-address
.elementor-button::after {
    content: "";

    position:
        absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background:
        rgba(23,18,15,.38);

    transition:
        transform 350ms cubic-bezier(.16,1,.3,1);

    transform-origin:
        right center;
}


.hnia-contact-address
.elementor-button:hover::after {
    transform:
        scaleX(.4);

    transform-origin:
        left center;
}


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

@media (max-width: 1024px) {

    .hnia-contact-hero,
    .hnia-contact-form-section {
        width:
            calc(100% - 48px);
    }


    .hnia-contact-form-section {
        gap:
            56px;
    }


    .hnia-contact-location
    > .e-con-inner {
        width:
            calc(100% - 48px);
    }


    .hnia-contact-location-grid {
        grid-template-columns:
            minmax(0,1fr)
            300px;

        gap:
            46px;
    }


    .hnia-contact-map,
    .hnia-contact-map iframe {
        min-height:
            500px;
    }
}


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

@media (max-width: 767px) {

    .hnia-contact-hero {
        width:
            calc(100% - 24px);

        padding:
            120px
            0
            70px;
    }


    .hnia-contact-title
    .elementor-heading-title {
        font-size:
            54px;
    }


    .hnia-contact-intro {
        margin-top:
            22px;

        font-size:
            11px;
    }


    .hnia-contact-links {
        grid-template-columns:
            1fr;

        margin-top:
            42px;
    }


    .hnia-contact-links
    > .e-con:first-child {
        border-right:
            0;

        border-bottom:
            1px solid
            rgba(23,18,15,.10);
    }


    .hnia-contact-form-section {
        display:
            block !important;

        width:
            calc(100% - 24px);

        padding:
            72px
            0
            86px;
    }


    .hnia-contact-form-copy {
        margin-bottom:
            48px;
    }


    .hnia-contact-form-copy
    .elementor-heading-title {
        font-size:
            42px;
    }


    .hnia-contact-form
    .ff-btn-submit {
        width:
            100%;
    }


    .hnia-contact-location {
        padding-top:
            74px;
    }


    .hnia-contact-location
    > .e-con-inner {
        width:
            calc(100% - 24px);
    }


    .hnia-contact-location-title
    .elementor-heading-title {
        font-size:
            42px;
    }


    .hnia-contact-location-grid {
        display:
            flex !important;

        flex-direction:
            column;

        gap:
            0;

        margin-top:
            38px;
    }


    .hnia-contact-map,
    .hnia-contact-map iframe {
        min-height:
            420px;
    }


    .hnia-contact-address {
        padding:
            42px
            0
            70px;
    }


    .hnia-contact-address
    .elementor-heading-title {
        font-size:
            34px;
    }
}