/* =========================================================
   CONTACT PAGE
   FIDAR AFARIN PISHRO
   DARK / GOLD INDUSTRIAL THEME
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --contact-bg:
        #060b14;

    --contact-bg-soft:
        #090f19;

    --contact-card:
        rgba(255,255,255,.035);

    --contact-card-solid:
        #0b111d;

    --contact-border:
        rgba(255,255,255,.09);

    --contact-border-gold:
        rgba(212,175,55,.32);

    --contact-gold:
        #D4AF37;

    --contact-gold-light:
        #F5D36C;

    --contact-text:
        #ffffff;

    --contact-text-soft:
        #d2d5db;

    --contact-text-muted:
        #9198a5;

    --contact-success:
        #4ade80;

    --contact-error:
        #f87171;

}


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

body {

    background:
        var(--contact-bg);

}


main {

    overflow:
        hidden;

}


.container {

    width:
        92%;

    max-width:
        1400px;

    margin:
        0 auto;

}


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

.contact-hero {

    position:
        relative;

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    padding:
        90px 0;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 75% 35%,
            rgba(212,175,55,.14),
            transparent 32%
        ),

        radial-gradient(
            circle at 10% 75%,
            rgba(39,74,126,.12),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #050914,
            #0a111d 55%,
            #060b14
        );

}


.contact-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    opacity:
        .55;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    pointer-events:
        none;

}


.contact-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    left:
        -210px;

    bottom:
        -230px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(212,175,55,.10);

    pointer-events:
        none;

}


.contact-hero-grid {

    position:
        relative;

    z-index:
        2;

    width:
        92%;

    max-width:
        1400px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(300px,.8fr);

    align-items:
        center;

    gap:
        70px;

}


.contact-hero-content {

    max-width:
        800px;

}


.contact-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    padding:
        9px 17px;

    border:
        1px solid
        rgba(212,175,55,.30);

    border-radius:
        999px;

    background:
        rgba(212,175,55,.07);

    color:
        var(--contact-gold-light);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.contact-eyebrow::before {

    content:
        "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--contact-gold);

    box-shadow:
        0 0 14px
        rgba(212,175,55,.75);

}


.contact-hero h1 {

    margin:
        0 0 22px;

    color:
        white;

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    line-height:
        1.2;

    font-weight:
        900;

}


.contact-hero p {

    max-width:
        720px;

    margin:
        0;

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

    font-size:
        clamp(
            16px,
            2vw,
            20px
        );

    line-height:
        2.1;

}


.contact-hero-side {

    display:
        flex;

    justify-content:
        flex-end;

}


.contact-hero-card {

    width:
        min(
            100%,
            360px
        );

    padding:
        30px;

    border:
        1px solid
        var(--contact-border-gold);

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.09),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.35);

}


.contact-hero-card > span {

    display:
        block;

    margin-bottom:
        13px;

    color:
        var(--contact-gold);

    font-size:
        13px;

    font-weight:
        700;

}


.contact-hero-card strong {

    display:
        block;

    margin-bottom:
        9px;

    color:
        white;

    font-size:
        25px;

    line-height:
        1.5;

    direction:
        ltr;

    text-align:
        right;

}


.contact-hero-card small {

    color:
        var(--contact-text-muted);

    font-size:
        13px;

}


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

.contact-section {

    padding:
        100px 0;

    background:
        var(--contact-bg);

}


.contact-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(0,1.18fr);

    gap:
        28px;

    align-items:
        start;

}


.contact-info-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;

}


/* =========================================================
   COMPANY CARD
========================================================= */

.contact-company-card,
.contact-info-card,
.contact-social-card,
.contact-form-card {

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

    border-radius:
        22px;

    background:
        var(--contact-card);

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.20);

}


.contact-company-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        32px;

}


.contact-company-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        4px;

    height:
        100%;

    background:
        var(--contact-gold);

}


.contact-card-eyebrow {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--contact-gold);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .8px;

}


.contact-company-card h2 {

    margin:
        0 0 5px;

    color:
        white;

    font-size:
        28px;

    font-weight:
        900;

}


.contact-company-en {

    display:
        block;

    margin-bottom:
        22px;

    direction:
        ltr;

    text-align:
        right;

    color:
        var(--contact-text-muted);

    font-size:
        13px;

    letter-spacing:
        1px;

}


.contact-company-card p {

    margin:
        0;

    color:
        var(--contact-text-muted);

    font-size:
        14px;

    line-height:
        2.05;

}


/* =========================================================
   INFO CARD
========================================================= */

.contact-info-card {

    padding:
        28px;

}


.contact-card-heading {

    margin-bottom:
        24px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

}


.contact-card-heading > span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--contact-gold);

    font-size:
        12px;

    font-weight:
        800;

}


.contact-card-heading h3 {

    margin:
        0;

    color:
        white;

    font-size:
        23px;

    font-weight:
        800;

}


.contact-info-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.contact-info-item {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        15px;

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

    border-radius:
        15px;

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

    transition:
        .3s;

}


.contact-info-item:hover {

    border-color:
        rgba(212,175,55,.28);

    background:
        rgba(212,175,55,.035);

    transform:
        translateX(-4px);

}


.contact-info-icon {

    flex:
        0 0 46px;

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(212,175,55,.18);

    border-radius:
        13px;

    background:
        rgba(212,175,55,.075);

    color:
        var(--contact-gold-light);

    font-size:
        18px;

    font-weight:
        800;

}


.contact-info-content {

    min-width:
        0;

}


.contact-info-content small {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--contact-text-muted);

    font-size:
        12px;

}


.contact-info-content strong {

    display:
        block;

    color:
        white;

    font-size:
        15px;

    line-height:
        1.8;

    word-break:
        break-word;

}


.contact-info-item[data-address-item] strong,
.contact-info-item [data-address] {

    line-height:
        2;

}


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

.contact-social-card {

    padding:
        28px;

}


.contact-social-card h3 {

    margin:
        0 0 20px;

    color:
        white;

    font-size:
        21px;

}


.contact-social-links {

    display:
        grid;

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

    gap:
        10px;

}


.contact-social-link {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        12px;

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

    color:
        #d5d8df;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        .3s;

}


.contact-social-link:hover {

    border-color:
        rgba(212,175,55,.35);

    background:
        rgba(212,175,55,.07);

    color:
        var(--contact-gold-light);

    transform:
        translateY(-3px);

}


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

.contact-form-card {

    padding:
        38px;

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

}


.contact-form-header {

    margin-bottom:
        30px;

}


.contact-form-header h2 {

    margin:
        0 0 12px;

    color:
        white;

    font-size:
        30px;

    font-weight:
        900;

}


.contact-form-header p {

    max-width:
        670px;

    margin:
        0;

    color:
        var(--contact-text-muted);

    font-size:
        14px;

    line-height:
        2;

}


.contact-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

}


.contact-form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.contact-form-group label {

    color:
        #e7e8eb;

    font-size:
        13px;

    font-weight:
        700;

}


.contact-form-group label > span {

    color:
        var(--contact-gold-light);

}


.contact-form-group label small {

    margin-right:
        7px;

    color:
        #747c8a;

    font-size:
        10px;

    font-weight:
        400;

}


.contact-form-group input,
.contact-form-group textarea {

    width:
        100%;

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

    border-radius:
        12px;

    background:
        rgba(0,0,0,.18);

    color:
        white;

    font-family:
        inherit;

    font-size:
        14px;

    outline:
        none;

    transition:
        border-color .25s,
        box-shadow .25s,
        background .25s;

}


.contact-form-group input {

    min-height:
        51px;

    padding:
        0 15px;

}


.contact-form-group textarea {

    min-height:
        170px;

    padding:
        14px 15px;

    resize:
        vertical;

    line-height:
        2;

}


.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {

    color:
        #667080;

}


.contact-form-group input:focus,
.contact-form-group textarea:focus {

    border-color:
        rgba(212,175,55,.6);

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

    box-shadow:
        0 0 0 4px
        rgba(212,175,55,.07);

}


/* =========================================================
   STATUS
========================================================= */

.contact-form-message {

    padding:
        14px 16px;

    border-radius:
        12px;

    font-size:
        13px;

    line-height:
        1.9;

    font-weight:
        600;

}


.contact-form-message.success {

    border:
        1px solid
        rgba(74,222,128,.22);

    background:
        rgba(74,222,128,.06);

    color:
        var(--contact-success);

}


.contact-form-message.error {

    border:
        1px solid
        rgba(248,113,113,.22);

    background:
        rgba(248,113,113,.06);

    color:
        var(--contact-error);

}


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

.contact-submit-button {

    width:
        100%;

    min-height:
        54px;

    border:
        none;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #D4AF37,
            #F5D36C
        );

    color:
        #111;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 10px 25px
        rgba(212,175,55,.18);

    transition:
        .3s;

}


.contact-submit-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(212,175,55,.30);

}


.contact-submit-button:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;

}


.contact-required-note {

    margin:
        -3px 0 0;

    color:
        #737b89;

    font-size:
        11px;

}


.contact-required-note span {

    color:
        var(--contact-gold);

}


/* =========================================================
   QUICK CTA
========================================================= */

.contact-quick-section {

    padding:
        0 0 110px;

    background:
        var(--contact-bg);

}


.contact-quick-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        44px 50px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(212,175,55,.25);

    border-radius:
        26px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.085),
            rgba(255,255,255,.025)
        );

}


.contact-quick-card::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    left:
        -150px;

    top:
        -160px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.13),
            transparent 70%
        );

    pointer-events:
        none;

}


.contact-quick-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        780px;

}


.contact-quick-content > span {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--contact-gold);

    font-size:
        13px;

    font-weight:
        800;

}


.contact-quick-content h2 {

    margin:
        0 0 12px;

    color:
        white;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

    line-height:
        1.6;

}


.contact-quick-content p {

    margin:
        0;

    color:
        var(--contact-text-muted);

    line-height:
        2;

}


.contact-quick-action {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    gap:
        10px;

    flex-shrink:
        0;

}


.contact-sales-button,
.contact-inquiry-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 23px;

    border-radius:
        40px;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        .3s;

}


.contact-sales-button {

    background:
        linear-gradient(
            135deg,
            #D4AF37,
            #F5D36C
        );

    color:
        #111;

}


.contact-sales-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 28px
        rgba(212,175,55,.28);

}


.contact-inquiry-button {

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

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

    color:
        white;

}


.contact-inquiry-button:hover {

    border-color:
        rgba(212,175,55,.38);

    color:
        var(--contact-gold-light);

}


.is-unavailable {

    opacity:
        .65;

    cursor:
        default;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .contact-hero-grid {

        gap:
            45px;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .contact-info-column {

        display:
            grid;

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

        align-items:
            start;

    }


    .contact-social-card {

        grid-column:
            1 / -1;

    }


    .contact-form-card {

        grid-column:
            1 / -1;

    }


    .contact-quick-card {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


@media (max-width: 800px) {

    .contact-hero {

        min-height:
            auto;

        padding:
            75px 0;

    }


    .contact-hero-grid {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .contact-hero-content {

        max-width:
            none;

    }


    .contact-eyebrow {

        justify-content:
            center;

    }


    .contact-hero p {

        margin:
            auto;

    }


    .contact-hero-side {

        justify-content:
            center;

    }


    .contact-hero-card {

        max-width:
            500px;

    }


    .contact-info-column {

        grid-template-columns:
            1fr;

    }


    .contact-social-card {

        grid-column:
            auto;

    }


    .contact-form-card {

        padding:
            28px 22px;

    }


    .contact-quick-action {

        width:
            100%;

    }


    .contact-sales-button,
    .contact-inquiry-button {

        flex:
            1;

    }

}


@media (max-width: 600px) {

    .contact-section {

        padding:
            70px 0;

    }


    .contact-hero h1 {

        font-size:
            38px;

    }


    .contact-hero p {

        font-size:
            15px;

    }


    .contact-company-card,
    .contact-info-card,
    .contact-social-card {

        padding:
            24px;

        border-radius:
            18px;

    }


    .contact-form-card {

        padding:
            23px 18px;

        border-radius:
            18px;

    }


    .contact-form-header h2 {

        font-size:
            24px;

    }


    .contact-social-links {

        grid-template-columns:
            1fr;

    }


    .contact-quick-section {

        padding-bottom:
            75px;

    }


    .contact-quick-card {

        padding:
            32px 24px;

        border-radius:
            21px;

    }


    .contact-quick-action {

        flex-direction:
            column;

    }


    .contact-sales-button,
    .contact-inquiry-button {

        width:
            100%;

    }

}


@media (max-width: 400px) {

    .contact-hero h1 {

        font-size:
            33px;

    }


    .contact-info-icon {

        flex-basis:
            42px;

        width:
            42px;

        height:
            42px;

    }


    .contact-info-content strong {

        font-size:
            13px;

    }

}