/*
============================================================
NAQLA MUSTAQBAL
GLOBAL WEBSITE DESIGN SYSTEM
============================================================
*/


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

:root {

    --nm-brand-navy: #061521;
    --nm-brand-navy-2: #0c2a49;
    --nm-brand-navy-3: #173c5d;

    --nm-brand-gold: #b88a2a;
    --nm-brand-gold-light: #e3bd65;

    --nm-brand-cream: #f8f5ef;
    --nm-brand-cream-2: #f1ebe1;

    --nm-brand-text: #202a36;
    --nm-brand-muted: #738092;
    --nm-brand-border: #e8e1d5;


    /* PAGE COMPATIBILITY */

    --nm-navy:
        var(--nm-brand-navy);

    --nm-navy-2:
        var(--nm-brand-navy-2);

    --nm-navy-3:
        var(--nm-brand-navy-3);

    --nm-gold:
        var(--nm-brand-gold);

    --nm-gold-light:
        var(--nm-brand-gold-light);

    --nm-cream:
        var(--nm-brand-cream);

    --nm-cream-2:
        var(--nm-brand-cream-2);

    --nm-text:
        var(--nm-brand-text);

    --nm-muted:
        var(--nm-brand-muted);

    --nm-border:
        var(--nm-brand-border);


    /* RADIUS */

    --nm-radius-sm: 8px;
    --nm-radius-md: 14px;
    --nm-radius-lg: 20px;
    --nm-radius-xl: 28px;


    /* SHADOW */

    --nm-shadow-sm:
        0 8px 24px
        rgba(6,21,33,.06);

    --nm-shadow-md:
        0 18px 45px
        rgba(6,21,33,.11);

    --nm-shadow-lg:
        0 30px 80px
        rgba(6,21,33,.18);

}



/* ==========================================================
   GLOBAL SAFETY
========================================================== */

html {

    scroll-behavior: smooth;

}


body {

    overflow-x: hidden;

}


*,
*::before,
*::after {

    box-sizing: border-box;

}



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

.eyebrow {

    color:
        var(--nm-gold);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .23em;

    text-transform:
        uppercase;

}



/* ==========================================================
   GLOBAL BUTTON SYSTEM
========================================================== */

.nm-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        48px;

    padding:
        0 22px;

    border-radius:
        var(--nm-radius-sm);

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1;

    text-decoration:
        none;

    cursor:
        pointer;

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

}


.nm-btn:hover {

    transform:
        translateY(-2px);

}


.nm-btn-primary {

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

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            #9f7624,
            var(--nm-gold)
        );

    box-shadow:

        0 10px 27px
        rgba(184,138,42,.23);

}


.nm-btn-primary:hover {

    border-color:
        var(--nm-gold);

    color:
        #fff;

    background:
        var(--nm-gold);

}


.nm-btn-gold {

    border:
        1px solid
        var(--nm-gold-light);

    color:
        var(--nm-navy);

    background:
        var(--nm-gold-light);

}


.nm-btn-gold:hover {

    border-color:
        var(--nm-gold);

    color:
        #fff;

    background:
        var(--nm-gold);

}


.nm-btn-outline {

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

    color:
        var(--nm-navy);

    background:
        #fff;

}


.nm-btn-outline:hover {

    border-color:
        var(--nm-navy);

    color:
        #fff;

    background:
        var(--nm-navy);

}



/* ==========================================================
   SUPPORT EXISTING .btn CLASSES
========================================================== */

.btn {

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

}


.btn:hover {

    transform:
        translateY(-2px);

}



/* ==========================================================
   GLOBAL CARD SYSTEM
========================================================== */

.nm-card {

    border:

        1px solid
        rgba(184,138,42,.15);

    border-radius:
        var(--nm-radius-lg);

    background:
        #fff;

    box-shadow:
        var(--nm-shadow-sm);

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

}


.nm-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(184,138,42,.43);

    box-shadow:
        var(--nm-shadow-md);

}



/* ==========================================================
   GLOBAL SECTION HEADING
========================================================== */

.nm-global-section-heading {

    display:
        grid;

    grid-template-columns:

        minmax(0,1fr)
        minmax(300px,.72fr);

    align-items:
        end;

    gap:
        55px;

}


.nm-global-section-heading .eyebrow {

    color:
        var(--nm-gold);

}


.nm-global-section-heading h2 {

    max-width:
        780px;

    margin:
        8px 0 0;

    color:
        var(--nm-text);

    font-size:
        clamp(
            31px,
            3.7vw,
            49px
        );

    line-height:
        1.08;

    letter-spacing:
        -.028em;

}


.nm-global-section-heading > p {

    margin:
        0;

    color:
        var(--nm-muted);

    font-size:
        13px;

    line-height:
        1.75;

}



/* ==========================================================
   GLOBAL LEADERSHIP
========================================================== */

.nm-global-leadership {

    padding:
        100px 0;

    background:
        #fff;

}


.nm-global-leadership-grid {

    display:
        grid;

    grid-template-columns:

        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        16px;

    margin-top:
        42px;

}


.nm-global-leader-card {

    overflow:
        hidden;

    cursor:
        pointer;

}


.nm-global-leader-card:focus-visible {

    outline:

        2px solid
        var(--nm-gold);

    outline-offset:
        3px;

}



/* LEADER IMAGE */

.nm-global-leader-image {

    position:
        relative;

    overflow:
        hidden;

    display:
        grid;

    height:
        260px;

    place-items:
        center;

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

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(227,189,101,.18),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            var(--nm-navy),
            var(--nm-navy-2)
        );

}


.nm-global-leader-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .45s ease;

}


.nm-global-leader-card:hover
.nm-global-leader-image img {

    transform:
        scale(1.04);

}


.nm-global-leader-image > strong {

    position:
        absolute;

    top:
        23px;

    left:
        23px;

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

    font-size:
        20px;

    letter-spacing:
        .10em;

}


.nm-global-leader-image > i {

    font-size:
        84px;

    opacity:
        .15;

}


.nm-global-leader-image > span {

    position:
        absolute;

    right:
        16px;

    bottom:
        14px;

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

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .1em;

}



/* LEADER CONTENT */

.nm-global-leader-content {

    padding:
        22px;

}


.nm-global-leader-content > small {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--nm-gold);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.nm-global-leader-content h3 {

    margin:
        0 0 5px;

    color:
        var(--nm-text);

    font-size:
        18px;

    line-height:
        1.25;

}


.nm-global-leader-content > strong {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #596777;

    font-size:
        10px;

}


.nm-global-leader-content p {

    min-height:
        82px;

    margin:
        0 0 17px;

    color:
        var(--nm-muted);

    font-size:
        10px;

    line-height:
        1.65;

}


.nm-global-leader-content em {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--nm-gold);

    font-size:
        8px;

    font-style:
        normal;

    font-weight:
        800;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

}



/* ==========================================================
   GLOBAL CTA
========================================================== */

.nm-global-cta {

    padding:
        75px 0;

    background:
        var(--nm-cream);

}


.nm-global-cta-shell {

    position:
        relative;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:

        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        55px;

    padding:

        clamp(
            35px,
            5vw,
            58px
        );

    border-radius:
        var(--nm-radius-xl);

    color:
        #fff;

    background:

        radial-gradient(
            circle at 94% 0%,
            rgba(227,189,101,.31),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            var(--nm-navy),
            var(--nm-navy-2) 68%,
            #876625 130%
        );

    box-shadow:

        0 25px 65px
        rgba(6,21,33,.18);

}


.nm-global-cta-shell::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -220px;

    right:
        -80px;

    border:

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

    border-radius:
        50%;

    pointer-events:
        none;

}


.nm-global-cta .eyebrow {

    position:
        relative;

    z-index:
        2;

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

}


.nm-global-cta h2 {

    position:
        relative;

    z-index:
        2;

    max-width:
        780px;

    margin:
        9px 0 12px;

    color:
        #fff;

    font-size:

        clamp(
            31px,
            3.8vw,
            50px
        );

    line-height:
        1.08;

    letter-spacing:
        -.028em;

}


.nm-global-cta p {

    position:
        relative;

    z-index:
        2;

    max-width:
        700px;

    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.7;

}


.nm-global-cta .nm-btn {

    position:
        relative;

    z-index:
        2;

}



/* ==========================================================
   GLOBAL POPUP / MODAL
========================================================== */

.nm-global-modal[hidden] {

    display:
        none;

}


.nm-global-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999999;

    display:
        grid;

    place-items:
        center;

    padding:
        24px;

}



/* BACKDROP */

.nm-global-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(6,21,33,.80);

    -webkit-backdrop-filter:
        blur(7px);

    backdrop-filter:
        blur(7px);

    opacity:
        0;

    transition:
        opacity .25s ease;

}



/* DIALOG */

.nm-global-modal-dialog {

    position:
        relative;

    z-index:
        2;

    width:
        min(860px,100%);

    max-height:
        min(90vh,900px);

    overflow-x:
        hidden;

    overflow-y:
        auto;

    border:

        1px solid
        rgba(255,255,255,.30);

    border-radius:
        20px;

    background:
        #fff;

    box-shadow:

        0 35px 110px
        rgba(0,0,0,.38);

    opacity:
        0;

    transform:

        translateY(24px)
        scale(.975);

    transition:
        opacity .25s ease,
        transform .25s ease;

}


.nm-global-modal.is-open
.nm-global-modal-backdrop,

.nm-global-modal.is-open
.nm-global-modal-dialog {

    opacity:
        1;

}


.nm-global-modal.is-open
.nm-global-modal-dialog {

    transform:

        translateY(0)
        scale(1);

}



/* CLOSE */

.nm-global-modal-close {

    position:
        sticky;

    z-index:
        20;

    top:
        16px;

    float:
        right;

    display:
        grid;

    width:
        44px;

    height:
        44px;

    margin:

        16px
        16px
        -60px
        0;

    place-items:
        center;

    border:

        1px solid
        var(--nm-border);

    border-radius:
        50%;

    color:
        var(--nm-text);

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

    box-shadow:

        0 8px 24px
        rgba(6,21,33,.14);

    cursor:
        pointer;

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

}


.nm-global-modal-close:hover {

    color:
        #fff;

    background:
        var(--nm-gold);

    transform:
        rotate(5deg);

}



/* BODY */

.nm-global-modal-body {

    padding:
        42px;

}



/* MODAL HEADER */

.nm-global-modal-heading {

    display:
        grid;

    grid-template-columns:
        68px 1fr;

    gap:
        20px;

    align-items:
        start;

    padding-right:
        40px;

}


.nm-global-modal-icon {

    display:
        grid;

    width:
        68px;

    height:
        68px;

    place-items:
        center;

    border-radius:
        16px;

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            var(--nm-navy),
            var(--nm-gold)
        );

    box-shadow:

        0 12px 27px
        rgba(184,138,42,.24);

    font-size:
        28px;

}


.nm-global-modal-heading small {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #a77e3d;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.nm-global-modal-heading h2 {

    margin:
        0 0 8px;

    color:
        var(--nm-text);

    font-size:

        clamp(
            28px,
            4vw,
            39px
        );

    line-height:
        1.12;

}


.nm-global-modal-heading p {

    margin:
        0;

    color:
        var(--nm-muted);

    font-size:
        15px;

    line-height:
        1.65;

}



/* MODAL COLUMNS */

.nm-global-modal-columns {

    display:
        grid;

    grid-template-columns:

        minmax(0,1.2fr)
        minmax(250px,.8fr);

    gap:
        35px;

    margin-top:
        31px;

}


.nm-global-modal-columns h3 {

    margin:
        0 0 11px;

    color:
        var(--nm-text);

    font-size:
        19px;

}


.nm-global-modal-columns p {

    margin:
        0;

    color:
        var(--nm-muted);

    font-size:
        14px;

    line-height:
        1.8;

}


.nm-global-modal-columns ul {

    display:
        grid;

    gap:
        11px;

    margin:
        0;

    padding:
        22px;

    border:

        1px solid
        var(--nm-border);

    border-radius:
        15px;

    background:
        var(--nm-cream);

    list-style:
        none;

}


.nm-global-modal-columns li {

    position:
        relative;

    padding-left:
        24px;

    color:
        #6f7a88;

    font-size:
        12px;

    line-height:
        1.55;

}


.nm-global-modal-columns li::before {

    content:
        "\F26A";

    position:
        absolute;

    top:
        0;

    left:
        0;

    color:
        var(--nm-gold);

    font-family:
        "bootstrap-icons";

}



/* MODAL ACTIONS */

.nm-global-modal-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;

    padding-top:
        24px;

    border-top:

        1px solid
        var(--nm-border);

}


body.nm-global-modal-open {

    overflow:
        hidden;

}



/* ==========================================================
   EXISTING PAGE MODALS
   FORCE SAME GLOBAL BRAND
========================================================== */

.manpower-detail-dialog,

.equipment-detail-dialog,

.project-detail-dialog,

.compliance-detail-dialog,

.about-detail-dialog {

    border-radius:
        var(--nm-radius-lg);

}


.manpower-detail-close:hover,

.equipment-detail-close:hover,

.project-detail-close:hover,

.compliance-detail-close:hover,

.about-detail-close:hover {

    background:
        var(--nm-gold);

}



/* ==========================================================
   SHARED EXISTING PAGE COLORS
========================================================== */

.nm-manpower-page,

.nm-equipment-page,

.nm-projects-page,

.nm-compliance-page,

.nm-about-page {

    --nm-navy:
        var(--nm-brand-navy);

    --nm-navy-2:
        var(--nm-brand-navy-2);

    --nm-navy-3:
        var(--nm-brand-navy-3);

    --nm-gold:
        var(--nm-brand-gold);

    --nm-gold-light:
        var(--nm-brand-gold-light);

    --nm-cream:
        var(--nm-brand-cream);

    --nm-cream-2:
        var(--nm-brand-cream-2);

    --nm-text:
        var(--nm-brand-text);

    --nm-muted:
        var(--nm-brand-muted);

    --nm-border:
        var(--nm-brand-border);

}



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

@media (max-width:1100px) {

    .nm-global-leadership-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0,1fr)
            );

    }

}



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

@media (max-width:900px) {

    .nm-global-section-heading {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .nm-global-cta-shell {

        grid-template-columns:
            1fr;

    }

}



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

@media (max-width:700px) {

    .nm-global-leadership {

        padding:
            75px 0;

    }


    .nm-global-leadership-grid {

        grid-template-columns:
            1fr;

    }


    .nm-global-leader-image {

        height:
            320px;

    }


    .nm-global-cta {

        padding:
            55px 0;

    }


    .nm-global-cta-shell {

        gap:
            28px;

    }


    .nm-global-cta .nm-btn {

        width:
            100%;

    }



    /* MODAL */

    .nm-global-modal {

        align-items:
            end;

        padding:
            10px;

    }


    .nm-global-modal-dialog {

        max-height:
            92vh;

        border-radius:

            20px
            20px
            12px
            12px;

    }


    .nm-global-modal-body {

        padding:

            32px
            21px
            25px;

    }


    .nm-global-modal-heading {

        grid-template-columns:
            54px 1fr;

        gap:
            14px;

        padding-right:
            20px;

    }


    .nm-global-modal-icon {

        width:
            54px;

        height:
            54px;

        border-radius:
            13px;

        font-size:
            22px;

    }


    .nm-global-modal-columns {

        grid-template-columns:
            1fr;

    }


    .nm-global-modal-actions {

        flex-direction:
            column;

    }


    .nm-global-modal-actions
    .nm-btn {

        width:
            100%;

    }

}



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

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

    html {

        scroll-behavior:
            auto;

    }


    .nm-global-modal *,

    .nm-global-leadership *,

    .nm-global-cta * {

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

    }

}
/* ==========================================================
   NAQLA GLOBAL HEADER
========================================================== */

.nm-global-header {

    position:
        sticky;

    top:
        0;

    z-index:
        99990;

    width:
        100%;

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

    border-bottom:
        1px solid
        rgba(6,21,33,.07);

    box-shadow:
        0 8px 28px
        rgba(6,21,33,.055);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);

}


/* Keep the sticky header below the WordPress admin bar when logged in. */
.admin-bar .nm-global-header {

    top:
        32px;

}


@media (max-width:782px) {

    .admin-bar .nm-global-header {

        top:
            46px;

    }

}


.nm-header-shell {

    position:
        relative;

    width:
        100%;

}


.nm-header-inner {

    display:
        grid;

    grid-template-columns:
        180px
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        32px;

    min-height:
        88px;

}



/* ==========================================================
   LOGO
========================================================== */

.nm-header-logo {

    display:
        flex;

    align-items:
        center;

}


.nm-header-logo > a {

    display:
        inline-flex;

    align-items:
        center;

    max-width:
        165px;

    text-decoration:
        none;

}


.nm-header-logo img {

    display:
        block;

    width:
        auto;

    max-width:
        155px;

    max-height:
        66px;

    object-fit:
        contain;

}


.nm-header-logo .custom-logo-link {

    display:
        inline-flex;

    align-items:
        center;

}



/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

.nm-header-nav {

    display:
        flex;

    justify-content:
        center;

    min-width:
        0;

}


.nm-header-nav .nm-menu {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        nowrap;

    gap:
        clamp(
            18px,
            2vw,
            35px
        );

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.nm-header-nav .nm-menu > li {

    position:
        relative;

    margin:
        0;

    padding:
        0;

}


.nm-header-nav .nm-menu > li > a {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        88px;

    color:
        var(--nm-navy);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        color .2s ease;

}


.nm-header-nav .nm-menu > li > a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        23px;

    height:
        2px;

    border-radius:
        10px;

    background:
        var(--nm-gold);

    opacity:
        0;

    transform:
        scaleX(.35);

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.nm-header-nav .nm-menu > li > a:hover {

    color:
        var(--nm-gold);

}


.nm-header-nav .nm-menu > li > a:hover::after,

.nm-header-nav .nm-menu > li.current-menu-item > a::after,

.nm-header-nav .nm-menu > li.current_page_item > a::after,

.nm-header-nav .nm-menu > li.current-menu-parent > a::after {

    opacity:
        1;

    transform:
        scaleX(1);

}


.nm-header-nav .nm-menu > li.current-menu-item > a,

.nm-header-nav .nm-menu > li.current_page_item > a,

.nm-header-nav .nm-menu > li.current-menu-parent > a {

    color:
        var(--nm-navy);

}



/* ==========================================================
   SUBMENU
========================================================== */

.nm-header-nav .sub-menu {

    position:
        absolute;

    top:
        calc(100% - 9px);

    left:
        50%;

    z-index:
        50;

    min-width:
        235px;

    margin:
        0;

    padding:
        10px;

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

    border-radius:
        14px;

    background:
        #fff;

    box-shadow:
        0 18px 45px
        rgba(6,21,33,.15);

    list-style:
        none;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(-50%)
        translateY(10px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

}


.nm-header-nav li:hover > .sub-menu,

.nm-header-nav li:focus-within > .sub-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(-50%)
        translateY(0);

}


.nm-header-nav .sub-menu a {

    display:
        block;

    padding:
        12px 14px;

    border-radius:
        8px;

    color:
        var(--nm-text);

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color .2s ease,
        background .2s ease;

}


.nm-header-nav .sub-menu a:hover {

    color:
        var(--nm-gold);

    background:
        var(--nm-cream);

}



/* ==========================================================
   HEADER ACTIONS
========================================================== */

.nm-header-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        13px;

}


.nm-header-contact {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        96px;

    min-height:
        46px;

    padding:
        0 20px;

    border:
        1px solid
        var(--nm-navy-2);

    border-radius:
        8px;

    color:
        #fff;

    background:

        linear-gradient(
            135deg,
            var(--nm-navy-2),
            var(--nm-navy-3)
        );

    box-shadow:
        0 9px 21px
        rgba(6,21,33,.14);

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

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

}


.nm-header-contact:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--nm-gold);

    background:
        var(--nm-gold);

    color:
        #fff;

}


.nm-header-icon-button {

    display:
        grid;

    width:
        38px;

    height:
        38px;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    color:
        var(--nm-navy-2);

    background:
        transparent;

    cursor:
        pointer;

    font-size:
        17px;

    transition:
        color .2s ease,
        transform .2s ease;

}


.nm-header-icon-button:hover {

    color:
        var(--nm-gold);

    transform:
        translateY(-1px);

}


.nm-header-language {

    color:
        var(--nm-navy-2);

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        color .2s ease;

}


.nm-header-language:hover {

    color:
        var(--nm-gold);

}


.nm-header-globe {

    display:
        grid;

    width:
        28px;

    height:
        38px;

    place-items:
        center;

    color:
        var(--nm-navy-2);

    font-size:
        15px;

}



/* ==========================================================
   SEARCH
========================================================== */

.nm-header-search[hidden] {

    display:
        none;

}


.nm-header-search {

    position:
        absolute;

    top:
        100%;

    left:
        0;

    right:
        0;

    z-index:
        60;

    padding:
        16px 0;

    border-top:
        1px solid
        rgba(6,21,33,.06);

    border-bottom:
        1px solid
        rgba(6,21,33,.08);

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

    box-shadow:
        0 15px 35px
        rgba(6,21,33,.08);

}


.nm-header-search-field {

    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;

    padding:
        8px 10px
        8px 18px;

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

    border-radius:
        12px;

    background:
        var(--nm-cream);

}


.nm-header-search-field > i {

    color:
        var(--nm-gold);

    font-size:
        16px;

}


.nm-header-search-field input {

    width:
        100%;

    height:
        44px;

    padding:
        0;

    border:
        0;

    outline:
        0;

    color:
        var(--nm-text);

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        13px;

}


.nm-header-search-field button[type="submit"] {

    min-height:
        40px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        8px;

    color:
        #fff;

    background:
        var(--nm-navy);

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

}


.nm-header-search-close {

    display:
        grid;

    width:
        38px;

    height:
        38px;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    color:
        var(--nm-muted);

    background:
        transparent;

    cursor:
        pointer;

}



/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.nm-mobile-menu-toggle {

    display:
        none;

    width:
        42px;

    height:
        42px;

    padding:
        9px;

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

    border-radius:
        9px;

    background:
        #fff;

    cursor:
        pointer;

}


.nm-mobile-menu-toggle span {

    display:
        block;

    width:
        100%;

    height:
        2px;

    margin:
        4px 0;

    border-radius:
        10px;

    background:
        var(--nm-navy);

    transition:
        transform .2s ease,
        opacity .2s ease;

}


.nm-mobile-menu-toggle.is-open span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);

}


.nm-mobile-menu-toggle.is-open span:nth-child(2) {

    opacity:
        0;

}


.nm-mobile-menu-toggle.is-open span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);

}



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

.nm-mobile-navigation[hidden] {

    display:
        none;

}


.nm-mobile-navigation {

    border-top:
        1px solid
        var(--nm-border);

    background:
        #fff;

    box-shadow:
        0 16px 34px
        rgba(6,21,33,.08);

}


.nm-mobile-navigation .container {

    padding-top:
        20px;

    padding-bottom:
        24px;

}


.nm-mobile-menu {

    display:
        grid;

    gap:
        0;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.nm-mobile-menu > li {

    border-bottom:
        1px solid
        #eee9e0;

}


.nm-mobile-menu a {

    display:
        flex;

    align-items:
        center;

    min-height:
        50px;

    color:
        var(--nm-text);

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

}


.nm-mobile-menu .current-menu-item > a,

.nm-mobile-menu .current_page_item > a {

    color:
        var(--nm-gold);

}


.nm-mobile-menu .sub-menu {

    margin:
        0 0 12px;

    padding:
        0 0 0 18px;

    list-style:
        none;

}


.nm-mobile-menu .sub-menu a {

    min-height:
        40px;

    color:
        var(--nm-muted);

    font-size:
        11px;

}


.nm-mobile-contact-actions {

    display:
        grid;

    gap:
        11px;

    margin-top:
        22px;

}


.nm-mobile-contact-actions > a:not(.nm-btn) {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        42px;

    color:
        var(--nm-muted);

    font-size:
        11px;

    font-weight:
        600;

    text-decoration:
        none;

}


.nm-mobile-contact-actions > a:not(.nm-btn) i {

    color:
        var(--nm-gold);

}



/* ==========================================================
   SKIP LINK
========================================================== */

.nm-skip-link {

    position:
        fixed;

    z-index:
        99999999;

    top:
        -100px;

    left:
        15px;

    padding:
        10px 15px;

    border-radius:
        7px;

    color:
        #fff;

    background:
        var(--nm-navy);

    text-decoration:
        none;

}


.nm-skip-link:focus {

    top:
        15px;

}



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

@media (max-width:1200px) {

    .nm-header-inner {

        grid-template-columns:
            150px
            minmax(0,1fr)
            auto;

        gap:
            20px;

    }


    .nm-header-nav .nm-menu {

        gap:
            18px;

    }


    .nm-header-nav .nm-menu > li > a {

        font-size:
            10px;

    }


    .nm-header-language,
    .nm-header-globe {

        display:
            none;

    }

}



@media (max-width:980px) {

    .nm-header-inner {

        grid-template-columns:
            minmax(120px,1fr)
            auto;

        min-height:
            78px;

    }


    .nm-header-nav {

        display:
            none;

    }


    .nm-header-logo > a {

        max-width:
            145px;

    }


    .nm-header-logo img {

        max-width:
            140px;

        max-height:
            58px;

    }


    .nm-mobile-menu-toggle {

        display:
            block;

    }


    .nm-header-contact {

        display:
            none;

    }

}



@media (max-width:520px) {

    .nm-header-inner {

        min-height:
            72px;

        gap:
            10px;

    }


    .nm-header-logo img {

        max-width:
            125px;

        max-height:
            52px;

    }


    .nm-header-actions {

        gap:
            4px;

    }


    .nm-header-search-field {

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

    }


    .nm-header-search-field button[type="submit"] {

        display:
            none;

    }

}

/* ==========================================================
   MANPOWER REQUEST
   PREMIUM LIGHT DESIGN — MATCHES MANPOWER PAGE CARDS
========================================================== */

/*
 * This section intentionally overrides the older request-card
 * styling so the form matches the white / cream / gold cards
 * used in "Why Choose Naqla Mustaqbal" and "Our Capacity".
 */


/* ==========================================================
   MAIN REQUEST CARD
========================================================== */

.manpower-bottom-grid > #request.request-card,
#request.request-card {

    grid-column:
        1 / -1 !important;

    justify-self:
        stretch !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        22px 0 0 !important;

    padding:
        clamp(34px,4vw,52px) !important;

    border:
        1px solid
        rgba(184,138,42,.16) !important;

    border-radius:
        24px !important;

    color:
        var(--nm-text) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 18px 45px
        rgba(6,21,33,.07) !important;

    overflow:
        hidden;

}


/* REMOVE OLD DARK DECORATION */

#request.request-card::before,
#request.request-card::after {

    display:
        none !important;

}


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

#request.request-card > .eyebrow {

    margin:
        0 0 10px !important;

    color:
        var(--nm-gold) !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .20em !important;

    text-transform:
        uppercase;

}


#request.request-card > h2 {

    max-width:
        760px !important;

    margin:
        0 !important;

    color:
        var(--nm-text) !important;

    font-size:
        clamp(34px,4vw,50px) !important;

    font-weight:
        800 !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -.035em !important;

}


#request.request-card > p {

    max-width:
        720px !important;

    margin:
        14px 0 0 !important;

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

    font-size:
        12px !important;

    line-height:
        1.7 !important;

}


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

#request
.nm-manpower-request-system {

    width:
        100% !important;

}


#request
.nm-manpower-request-form {

    display:
        grid !important;

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

    gap:
        22px !important;

    width:
        100% !important;

    margin:
        36px 0 0 !important;

}


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

#request
.nm-manpower-form-section {

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        28px !important;

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

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbf8f2
        ) !important;

    box-shadow:
        0 8px 24px
        rgba(6,21,33,.035) !important;

}


/* CLIENT */

#request
.nm-manpower-form-section:nth-of-type(1) {

    grid-column:
        1 !important;

    grid-row:
        1 !important;

}


/* WORKFORCE */

#request
.nm-manpower-form-section:nth-of-type(2) {

    grid-column:
        2 !important;

    grid-row:
        1 !important;

}


/* PROJECT INFORMATION */

#request
.nm-manpower-form-section:nth-of-type(3) {

    grid-column:
        1 / -1 !important;

    grid-row:
        2 !important;

}


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

#request
.nm-manpower-form-section-heading {

    display:
        grid !important;

    grid-template-columns:
        58px minmax(0,1fr) !important;

    gap:
        16px !important;

    align-items:
        center !important;

    margin:
        0 0 25px !important;

}


/* 01 / 02 / 03 BADGE */

#request
.nm-manpower-form-section-heading > span {

    display:
        grid !important;

    width:
        58px !important;

    height:
        58px !important;

    place-items:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px solid
        rgba(184,138,42,.24) !important;

    border-radius:
        14px !important;

    color:
        var(--nm-gold) !important;

    background:
        #f7f1e5 !important;

    font-size:
        16px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    letter-spacing:
        .04em !important;

}


/* SMALL LABEL */

#request
.nm-manpower-form-section-heading small {

    display:
        block !important;

    margin:
        0 0 5px !important;

    color:
        var(--nm-gold) !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .14em !important;

    text-transform:
        uppercase !important;

}


/* SECTION TITLE */

#request
.nm-manpower-form-section-heading h3 {

    margin:
        0 !important;

    color:
        var(--nm-text) !important;

    font-size:
        20px !important;

    font-weight:
        800 !important;

    line-height:
        1.24 !important;

    letter-spacing:
        -.02em !important;

}


/* SECTION DESCRIPTION */

#request
.nm-manpower-form-section-heading p {

    max-width:
        520px !important;

    margin:
        7px 0 0 !important;

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

    font-size:
        10px !important;

    line-height:
        1.6 !important;

}


/* ==========================================================
   FIELD GRIDS
========================================================== */

/* CLIENT FIELDS */

#request
.nm-manpower-form-section:nth-of-type(1)
.nm-manpower-form-grid {

    display:
        grid !important;

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

    gap:
        14px !important;

}


/* PROJECT FIELDS */

#request
.nm-manpower-form-section:nth-of-type(3)
.nm-manpower-form-grid {

    display:
        grid !important;

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

    gap:
        14px !important;

}


/* ==========================================================
   LABELS
========================================================== */

#request
.nm-manpower-request-form label {

    display:
        block !important;

    min-width:
        0 !important;

    margin:
        0 !important;

}


#request
.nm-manpower-request-form
label > span {

    display:
        block !important;

    margin:
        0 0 7px !important;

    color:
        var(--nm-text) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;

}


#request
.nm-manpower-request-form
label > span b {

    color:
        var(--nm-gold) !important;

}


/* ==========================================================
   INPUT / SELECT / TEXTAREA
========================================================== */

#request
.nm-manpower-request-form input,

#request
.nm-manpower-request-form select,

#request
.nm-manpower-request-form textarea {

    width:
        100% !important;

    max-width:
        100% !important;

    border:
        1px solid
        #ded7cb !important;

    outline:
        none !important;

    color:
        var(--nm-text) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 3px 8px
        rgba(6,21,33,.025) !important;

    font-family:
        inherit !important;

    font-weight:
        500 !important;

    color-scheme:
        light;

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

}


#request
.nm-manpower-request-form input,

#request
.nm-manpower-request-form select {

    height:
        47px !important;

    min-height:
        47px !important;

    padding:
        0 13px !important;

    border-radius:
        9px !important;

    font-size:
        10px !important;

}


#request
.nm-manpower-request-form textarea {

    min-height:
        120px !important;

    padding:
        13px !important;

    border-radius:
        9px !important;

    font-size:
        10px !important;

    line-height:
        1.6 !important;

    resize:
        vertical;

}


#request
.nm-manpower-request-form
input::placeholder,

#request
.nm-manpower-request-form
textarea::placeholder {

    color:
        #9ba3ab !important;

    opacity:
        1 !important;

}


#request
.nm-manpower-request-form select {

    cursor:
        pointer !important;

}


#request
.nm-manpower-request-form select option {

    color:
        var(--nm-text) !important;

    background:
        #ffffff !important;

}


#request
.nm-manpower-request-form input:focus,

#request
.nm-manpower-request-form select:focus,

#request
.nm-manpower-request-form textarea:focus {

    border-color:
        var(--nm-gold) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 3px
        rgba(184,138,42,.09) !important;

}


/* ==========================================================
   WORKER BUILDER
========================================================== */

#request
.nm-worker-builder {

    overflow:
        hidden !important;

    width:
        100% !important;

    border:
        1px solid
        #e3dbcf !important;

    border-radius:
        13px !important;

    background:
        #ffffff !important;

}


/* BUILDER HEADER */

#request
.nm-worker-builder-head {

    display:
        grid !important;

    grid-template-columns:
        minmax(0,1fr)
        110px
        44px !important;

    gap:
        10px !important;

    align-items:
        center !important;

    padding:
        12px 14px !important;

    color:
        #8b754b !important;

    background:
        #f7f2e8 !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .10em !important;

    text-transform:
        uppercase !important;

}


/* WORKER ROW */

#request
.nm-worker-row {

    display:
        grid !important;

    grid-template-columns:
        minmax(0,1fr)
        110px
        44px !important;

    gap:
        10px !important;

    align-items:
        end !important;

    padding:
        13px 14px !important;

    border-top:
        1px solid
        #eee7dc !important;

    background:
        #ffffff !important;

}


/* MOBILE FIELD LABELS HIDDEN ON DESKTOP */

#request
.nm-mobile-field-label {

    display:
        none !important;

}


/* DELETE BUTTON */

#request
.nm-remove-worker {

    display:
        grid !important;

    width:
        42px !important;

    height:
        42px !important;

    min-width:
        42px !important;

    min-height:
        42px !important;

    place-items:
        center !important;

    align-self:
        end !important;

    padding:
        0 !important;

    border:
        1px solid
        #e7ddcb !important;

    border-radius:
        9px !important;

    color:
        #9b8255 !important;

    background:
        #faf5e9 !important;

    cursor:
        pointer !important;

    font-size:
        13px !important;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease !important;

}


#request
.nm-remove-worker:hover:not(:disabled) {

    border-color:
        #c66161 !important;

    color:
        #ffffff !important;

    background:
        #c66161 !important;

}


#request
.nm-remove-worker:disabled {

    cursor:
        not-allowed !important;

    opacity:
        .36 !important;

}


/* ==========================================================
   WORKER BUILDER FOOTER
========================================================== */

#request
.nm-worker-builder-footer {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        15px !important;

    padding:
        13px 14px !important;

    border-top:
        1px solid
        #eee7dc !important;

    background:
        #fcfaf6 !important;

}


/* ADD ANOTHER WORKER */

#request
.nm-add-worker {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    width:
        auto !important;

    min-height:
        42px !important;

    padding:
        0 15px !important;

    border:
        1px solid
        rgba(184,138,42,.32) !important;

    border-radius:
        8px !important;

    color:
        #87651f !important;

    background:
        #f7edda !important;

    box-shadow:
        none !important;

    font-family:
        inherit !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    cursor:
        pointer !important;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease !important;

}


#request
.nm-add-worker:hover {

    transform:
        translateY(-1px) !important;

    border-color:
        var(--nm-gold) !important;

    color:
        #ffffff !important;

    background:
        var(--nm-gold) !important;

}


/* ==========================================================
   MANPOWER TOTAL
========================================================== */

#request
.nm-worker-total {

    display:
        flex !important;

    align-items:
        baseline !important;

    justify-content:
        flex-end !important;

    gap:
        6px !important;

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

    white-space:
        nowrap;

}


#request
.nm-worker-total span {

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

    font-size:
        8px !important;

    font-weight:
        700 !important;

}


#request
.nm-worker-total strong {

    color:
        var(--nm-gold) !important;

    font-size:
        24px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

}


#request
.nm-worker-total small {

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

    font-size:
        8px !important;

    font-weight:
        700 !important;

}


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

#request
.nm-manpower-full-field {

    display:
        block !important;

    margin:
        15px 0 0 !important;

}


/* ==========================================================
   FINAL SUBMIT SUMMARY
========================================================== */

#request
.nm-manpower-request-summary {

    grid-column:
        1 / -1 !important;

    grid-row:
        3 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        24px !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        22px 24px !important;

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

    border-radius:
        15px !important;

    background:
        #f9f5ed !important;

}


/* TOTAL SUMMARY */

#request
.nm-manpower-request-summary > div {

    display:
        grid !important;

    grid-template-columns:
        48px auto !important;

    column-gap:
        12px !important;

    align-items:
        center !important;

}


#request
.nm-manpower-request-summary > div > i {

    grid-row:
        1 / 3 !important;

    display:
        grid !important;

    width:
        48px !important;

    height:
        48px !important;

    place-items:
        center !important;

    border-radius:
        12px !important;

    color:
        var(--nm-gold) !important;

    background:
        #f0e4ca !important;

    font-size:
        19px !important;

}


#request
.nm-manpower-request-summary span {

    color:
        #8a7a5b !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .08em !important;

    text-transform:
        uppercase !important;

}


#request
.nm-manpower-request-summary strong {

    margin:
        3px 0 0 !important;

    color:
        var(--nm-text) !important;

    font-size:
        18px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

}


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

#request
.nm-manpower-submit {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        9px !important;

    width:
        auto !important;

    min-width:
        245px !important;

    min-height:
        50px !important;

    padding:
        0 23px !important;

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

    border-radius:
        9px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #9e7522,
            #c59732
        ) !important;

    box-shadow:
        0 9px 22px
        rgba(184,138,42,.20) !important;

    font-family:
        inherit !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    cursor:
        pointer !important;

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

}


#request
.nm-manpower-submit:hover {

    transform:
        translateY(-2px) !important;

    background:
        var(--nm-gold) !important;

    box-shadow:
        0 13px 28px
        rgba(184,138,42,.28) !important;

}


/* ==========================================================
   SUCCESS / ERROR MESSAGES
========================================================== */

#request
.nm-form-message {

    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    margin:
        0 0 20px !important;

    padding:
        14px 16px !important;

    border-radius:
        10px !important;

}


#request
.nm-form-success {

    border:
        1px solid
        rgba(58,139,87,.22) !important;

    color:
        #28653d !important;

    background:
        #edf8f0 !important;

}


#request
.nm-form-error {

    border:
        1px solid
        rgba(186,71,71,.20) !important;

    color:
        #934040 !important;

    background:
        #fff2f2 !important;

}


/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media (max-width:1050px) {

    #request
    .nm-manpower-form-section:nth-of-type(1)
    .nm-manpower-form-grid {

        grid-template-columns:
            1fr !important;

    }


    #request
    .nm-manpower-form-section:nth-of-type(3)
    .nm-manpower-form-grid {

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

    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width:820px) {

    #request.request-card {

        padding:
            30px 24px !important;

    }


    #request
    .nm-manpower-request-form {

        grid-template-columns:
            1fr !important;

    }


    #request
    .nm-manpower-form-section:nth-of-type(1),

    #request
    .nm-manpower-form-section:nth-of-type(2),

    #request
    .nm-manpower-form-section:nth-of-type(3),

    #request
    .nm-manpower-request-summary {

        grid-column:
            1 !important;

        grid-row:
            auto !important;

    }


    #request
    .nm-manpower-form-section:nth-of-type(1)
    .nm-manpower-form-grid {

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

    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width:560px) {

    #request.request-card {

        margin-top:
            16px !important;

        padding:
            26px 17px !important;

        border-radius:
            18px !important;

    }


    #request.request-card > h2 {

        font-size:
            32px !important;

    }


    #request.request-card > p {

        font-size:
            11px !important;

    }


    #request
    .nm-manpower-form-section {

        padding:
            20px 16px !important;

        border-radius:
            14px !important;

    }


    #request
    .nm-manpower-form-section-heading {

        grid-template-columns:
            48px 1fr !important;

        gap:
            11px !important;

        margin-bottom:
            20px !important;

    }


    #request
    .nm-manpower-form-section-heading > span {

        width:
            48px !important;

        height:
            48px !important;

        font-size:
            13px !important;

    }


    #request
    .nm-manpower-form-section-heading h3 {

        font-size:
            17px !important;

    }


    #request
    .nm-manpower-form-section:nth-of-type(1)
    .nm-manpower-form-grid,

    #request
    .nm-manpower-form-section:nth-of-type(3)
    .nm-manpower-form-grid {

        grid-template-columns:
            1fr !important;

    }


    #request
    .nm-worker-builder-head {

        display:
            none !important;

    }


    #request
    .nm-worker-row {

        position:
            relative !important;

        grid-template-columns:
            1fr !important;

        gap:
            10px !important;

        padding:
            14px !important;

    }


    #request
    .nm-mobile-field-label {

        display:
            block !important;

    }


    #request
    .nm-remove-worker {

        position:
            absolute !important;

        top:
            10px !important;

        right:
            10px !important;

        width:
            35px !important;

        height:
            35px !important;

        min-width:
            35px !important;

        min-height:
            35px !important;

    }


    #request
    .nm-worker-row label:first-child {

        padding-right:
            42px !important;

    }


    #request
    .nm-worker-builder-footer {

        flex-direction:
            column !important;

        align-items:
            stretch !important;

    }


    #request
    .nm-add-worker {

        width:
            100% !important;

    }


    #request
    .nm-worker-total {

        justify-content:
            center !important;

    }


    #request
    .nm-manpower-request-summary {

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        padding:
            18px !important;

    }


    #request
    .nm-manpower-submit {

        width:
            100% !important;

        min-width:
            0 !important;

    }

}