/* ==========================================
   NOWSHERWAN INTERNATIONAL
   MAIN STYLESHEET
========================================== */


/* ---------- VARIABLES ---------- */

:root {
    --navy: #0c2432;
    --navy-deep: #071922;

    --green: #17695f;
    --green-light: #24887a;

    --accent: #ad3a1d;

    --white: #ffffff;
    --off-white: #f7f8f6;

    --light-gray: #e6e9e8;
    --gray: #697478;

    --text: #172126;

    --container: 1200px;
}


/* ---------- RESET ---------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);
    background: var(--white);

    line-height: 1.6;
}


img {
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


/* ---------- GENERAL ---------- */

.container {
    width: min(90%, var(--container));
    margin: 0 auto;
}


.section {
    padding: 110px 0;
}


.eyebrow {
    font-size: 0.77rem;
    font-weight: 700;

    letter-spacing: 0.17em;

    margin-bottom: 22px;

    color: #a9d0ca;
}


.eyebrow.dark {
    color: var(--green);
}


h1,
h2,
h3,
h4 {
    line-height: 1.15;
}


h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);

    font-weight: 600;

    letter-spacing: -0.03em;
}


p {
    color: var(--gray);
}


.button {
    display: inline-flex;

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

    padding: 15px 25px;

    border-radius: 4px;

    font-size: 0.93rem;
    font-weight: 600;

    transition: 0.2s ease;
}


.button-primary {
    background: var(--green);
    color: var(--white);
}


.button-primary:hover {
    background: var(--green-light);
}


.button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.55);

    color: white;

    margin-left: 8px;
}


.button-secondary:hover {
    background: white;
    color: var(--navy);
}


.button-light {
    margin-top: 30px;

    background: white;
    color: var(--navy);
}


.button-light:hover {
    background: var(--off-white);
}


.full-width {
    width: 100%;
}


.text-link {
    display: inline-block;

    margin-top: 24px;

    font-weight: 600;

    color: var(--green);
}


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

.site-header {
    background: white;
}


.top-bar {
    background: var(--navy-deep);

    color: white;

    font-size: 0.76rem;
}


.top-bar-content {
    min-height: 36px;

    display: flex;

    align-items: center;
    justify-content: space-between;
}


.top-bar p {
    color: #c4ced1;
}


.top-bar p span {
    margin: 0 7px;
}


.top-links {
    display: flex;
    gap: 23px;
}


.top-links a {
    color: #d9e0e2;
}


.navbar {
    background: white;

    border-bottom: 1px solid #edf0ef;

    position: sticky;

    top: 0;

    z-index: 1000;
}


.nav-container {
    min-height: 90px;

    display: flex;

    justify-content: space-between;
    align-items: center;
}


.brand-logo {
    width: 190px;

    height: 68px;

    object-fit: contain;
}


.nav-menu {
    display: flex;

    align-items: center;

    gap: 25px;

    font-size: 0.87rem;

    font-weight: 500;
}


.nav-menu > a:not(.nav-cta) {
    position: relative;
}


.nav-menu > a:not(.nav-cta)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;
    height: 1px;

    background: var(--green);

    transition: width 0.2s ease;
}


.nav-menu > a:not(.nav-cta):hover::after {
    width: 100%;
}


.language-button {
    background: transparent;

    border: 0;

    cursor: pointer;

    color: var(--green);

    font-weight: 600;
}


.nav-cta {
    background: var(--navy);

    color: white;

    padding: 12px 17px;

    border-radius: 3px;
}


.nav-cta:hover {
    background: var(--green);
}


.mobile-menu-button {
    display: none;

    background: none;

    border: none;

    font-size: 1.7rem;

    color: var(--navy);

    cursor: pointer;
}


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

.hero {
    min-height: 680px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(36, 136, 122, 0.30),
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #061821 0%,
            #0d2c38 60%,
            #12463f 100%
        );
}


.hero::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

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

    border-radius: 50%;

    right: -100px;
    top: 30px;
}


.hero::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

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

    border-radius: 50%;

    right: 80px;
    top: 140px;
}


.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 16, 23, 0.45),
            transparent
        );
}


.hero-content {
    position: relative;

    z-index: 2;
}


.hero-text {
    max-width: 780px;
}


.hero h1 {
    color: white;

    font-size: clamp(3.4rem, 7vw, 6.3rem);

    font-weight: 500;

    letter-spacing: -0.055em;

    max-width: 900px;
}


.hero h1 span {
    color: #a9d0ca;
}


.hero-description {
    margin-top: 28px;

    max-width: 650px;

    color: #d6dee0;

    font-size: 1.07rem;

    line-height: 1.8;
}


.hero-buttons {
    margin-top: 35px;
}


/* ==========================================
   TRUST BAR
========================================== */

.trust-bar {
    background: white;

    border-bottom: 1px solid var(--light-gray);
}


.trust-grid {
    display: grid;

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


.trust-item {
    padding: 31px 30px;

    border-right: 1px solid var(--light-gray);
}


.trust-item:first-child {
    border-left: 1px solid var(--light-gray);
}


.trust-item strong {
    display: block;

    color: var(--navy);

    font-size: 1.1rem;

    margin-bottom: 2px;
}


.trust-item span {
    color: var(--gray);

    font-size: 0.79rem;
}


/* ==========================================
   ABOUT
========================================== */

.two-column {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.section-copy {
    padding-top: 45px;
}


.section-copy p {
    margin-bottom: 20px;

    font-size: 1rem;

    line-height: 1.8;
}


/* ==========================================
   EMPLOYERS
========================================== */

.section-dark {
    background: var(--navy);

    color: white;
}


.section-dark h2 {
    max-width: 650px;
}


.light-copy {
    margin-top: 25px;

    max-width: 590px;

    color: #c7d2d5;

    line-height: 1.8;
}


.employer-grid {
    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 100px;
}


.employer-card {
    background: rgba(255,255,255,0.05);

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

    padding: 45px;
}


.card-number {
    color: #7fbab0;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-top: 25px;
}


.card-number:first-child {
    margin-top: 0;
}


.employer-card h3 {
    font-size: 1.25rem;

    margin: 4px 0 8px;
}


.employer-card p:not(.card-number) {
    color: #becacc;

    font-size: 0.92rem;
}


/* ==========================================
   SERVICES
========================================== */

.center-heading {
    text-align: center;

    max-width: 720px;

    margin: 0 auto 60px;
}


.center-heading > p:last-child {
    margin-top: 20px;
}


.cards-grid {
    display: grid;

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

    border-top: 1px solid var(--light-gray);

    border-left: 1px solid var(--light-gray);
}


.service-card {
    padding: 38px;

    min-height: 300px;

    border-right: 1px solid var(--light-gray);

    border-bottom: 1px solid var(--light-gray);

    transition: 0.25s ease;
}


.service-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 18px 35px rgba(0,0,0,0.06);
}


.service-card span {
    display: block;

    color: var(--green);

    font-size: 0.75rem;

    letter-spacing: 0.15em;

    margin-bottom: 65px;
}


.service-card h3 {
    color: var(--navy);

    font-size: 1.25rem;

    margin-bottom: 15px;
}


.service-card p {
    font-size: 0.9rem;

    line-height: 1.75;
}


/* ==========================================
   INDUSTRIES
========================================== */

.section-soft {
    background: var(--off-white);
}


.industries-heading {
    max-width: 680px;

    margin-bottom: 50px;
}


.industry-grid {
    display: grid;

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

    border-top: 1px solid #d8dddb;

    border-left: 1px solid #d8dddb;
}


.industry-grid div {
    padding: 25px;

    background: white;

    border-right: 1px solid #d8dddb;
    border-bottom: 1px solid #d8dddb;

    color: var(--navy);

    font-weight: 500;
}


/* ==========================================
   PROCESS
========================================== */

.process-grid {
    display: grid;

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

    gap: 20px;
}


.process-step {
    padding: 32px 20px 20px 0;
}


.process-number {
    width: 52px;
    height: 52px;

    display: flex;

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

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

    border-radius: 50%;

    color: var(--green);

    font-size: 0.75rem;

    font-weight: 700;

    margin-bottom: 25px;
}


.process-step h3 {
    color: var(--navy);

    font-size: 1.18rem;

    margin-bottom: 13px;
}


.process-step p {
    font-size: 0.9rem;

    line-height: 1.7;
}


/* ==========================================
   MARKETS
========================================== */

.markets-section {
    padding: 110px 0;

    background:
        linear-gradient(
            115deg,
            #0a312e,
            #0d2531
        );

    color: white;
}


.markets-content {
    max-width: 850px;

    text-align: center;
}


.markets-content p:last-child {
    color: #c6d4d2;

    max-width: 720px;

    margin: 25px auto 0;

    line-height: 1.8;
}


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

.contact-section {
    background: white;
}


.contact-grid {
    display: grid;

    grid-template-columns: 1fr 0.85fr;

    gap: 100px;
}


.contact-grid > div:first-child > p:last-child {
    margin-top: 25px;

    max-width: 580px;

    line-height: 1.8;
}


.contact-card {
    border: 1px solid var(--light-gray);

    padding: 40px;

    box-shadow: 0 15px 45px rgba(5, 29, 38, 0.06);
}


.contact-card h3 {
    color: var(--navy);

    font-size: 1.3rem;

    margin-bottom: 25px;
}


.contact-detail {
    padding: 16px 0;

    border-top: 1px solid var(--light-gray);
}


.contact-detail span {
    display: block;

    color: var(--gray);

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: 4px;
}


.contact-detail a,
.contact-detail p {
    color: var(--navy);

    font-size: 0.93rem;
}


/* ==========================================
   FOOTER
========================================== */

.footer {
    background: var(--navy-deep);

    color: white;

    padding: 75px 0 25px;
}


.footer-grid {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 60px;
}


.footer h3 {
    font-size: 1.4rem;

    margin-bottom: 15px;
}


.footer h4 {
    margin-bottom: 17px;

    font-size: 0.85rem;
}


.footer a {
    display: block;

    color: #bdc8ca;

    font-size: 0.84rem;

    margin-bottom: 10px;
}


.footer p {
    color: #97a7aa;

    font-size: 0.84rem;
}


.footer-company > p {
    max-width: 310px;
}


.footer-licence {
    margin-top: 22px;
}


.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.09);

    padding-top: 22px;

    margin-top: 55px;
}


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

@media (max-width: 950px) {

    .top-bar {
        display: none;
    }


    .mobile-menu-button {
        display: block;
    }


    .nav-menu {
        display: none;

        position: absolute;

        top: 90px;
        left: 0;

        width: 100%;

        background: white;

        padding: 30px 5%;

        flex-direction: column;

        align-items: flex-start;

        border-bottom: 1px solid var(--light-gray);
    }


    .nav-menu.active {
        display: flex;
    }


    .nav-cta {
        width: 100%;

        text-align: center;
    }


    .hero {
        min-height: 600px;
    }


    .hero h1 {
        font-size: clamp(3rem, 10vw, 5rem);
    }


    .trust-grid {
        grid-template-columns: 1fr 1fr;
    }


    .two-column,
    .employer-grid,
    .contact-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .section-copy {
        padding-top: 0;
    }


    .cards-grid {
        grid-template-columns: 1fr 1fr;
    }


    .industry-grid {
        grid-template-columns: 1fr 1fr;
    }


    .process-grid {
        grid-template-columns: 1fr 1fr;
    }


    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

}



@media (max-width: 600px) {

    .section {
        padding: 75px 0;
    }


    .nav-container {
        min-height: 76px;
    }


    .nav-menu {
        top: 76px;
    }


    .brand-logo {
        width: 145px;
        height: 55px;
    }


    .hero {
        min-height: 650px;
    }


    .hero-description {
        font-size: 0.96rem;
    }


    .hero-buttons {
        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    .button-secondary {
        margin-left: 0;
    }


    .trust-grid {
        grid-template-columns: 1fr 1fr;
    }


    .trust-item {
        padding: 23px 15px;
    }


    .cards-grid,
    .industry-grid,
    .process-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }


    .employer-card,
    .contact-card {
        padding: 28px;
    }

}



/* ==========================================
   INNER PAGE NAVIGATION
========================================== */

.nav-menu > a.active:not(.nav-cta) {
    color: var(--green);
    font-weight: 700;
}


.nav-menu > a.active:not(.nav-cta)::after {
    width: 100%;
}



/* ==========================================
   INNER PAGE HERO
========================================== */

.inner-hero {
    min-height: 475px;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(36, 136, 122, 0.28),
            transparent 32%
        ),
        linear-gradient(
            115deg,
            #061821 0%,
            #0c2936 60%,
            #12463f 100%
        );
}


.inner-hero::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    border-radius: 50%;

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

    right: -80px;
    top: -40px;
}


.inner-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

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

    right: 100px;
    top: 70px;
}


.inner-hero-content {
    position: relative;

    z-index: 2;

    max-width: 900px;
}


.inner-hero h1 {
    color: white;

    font-size: clamp(3rem, 6vw, 5.2rem);

    font-weight: 500;

    letter-spacing: -0.05em;

    max-width: 900px;
}


.inner-hero h1 span {
    color: #a9d0ca;
}


.inner-hero-content > p:last-child {
    max-width: 680px;

    margin-top: 25px;

    color: #c9d5d7;

    font-size: 1.05rem;

    line-height: 1.8;
}



/* ==========================================
   ABOUT INTRODUCTION
========================================== */

.about-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.about-intro-copy {
    padding-top: 43px;
}


.about-intro-copy p {
    margin-bottom: 21px;

    line-height: 1.85;
}



/* ==========================================
   ABOUT STATISTICS
========================================== */

.about-stat-section {
    border-top: 1px solid var(--light-gray);

    border-bottom: 1px solid var(--light-gray);

    background: white;
}


.about-stats {
    display: grid;

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


.about-stat {
    padding: 45px 30px;

    border-right: 1px solid var(--light-gray);
}


.about-stat:first-child {
    border-left: 1px solid var(--light-gray);
}


.about-stat strong {
    display: block;

    color: var(--navy);

    font-size: clamp(1.5rem, 3vw, 2.1rem);

    font-weight: 600;

    letter-spacing: -0.03em;

    margin-bottom: 3px;
}


.about-stat span {
    color: var(--gray);

    font-size: 0.78rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}



/* ==========================================
   ABOUT SERVICES
========================================== */

.about-service-grid {
    display: grid;

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

    border-top: 1px solid #d8dddb;

    border-left: 1px solid #d8dddb;
}


.about-service-item {
    min-height: 280px;

    padding: 42px;

    background: white;

    border-right: 1px solid #d8dddb;
    border-bottom: 1px solid #d8dddb;
}


.about-service-item span {
    display: block;

    color: var(--green);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 50px;
}


.about-service-item h3 {
    color: var(--navy);

    font-size: 1.3rem;

    margin-bottom: 15px;
}


.about-service-item p {
    font-size: 0.92rem;

    line-height: 1.75;
}



/* ==========================================
   LICENSING / TRUST SECTION
========================================== */

.about-trust-section {
    background: var(--navy);

    color: white;
}


.about-trust-grid {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 100px;

    align-items: center;
}


.about-trust-section h2 {
    max-width: 650px;
}


.about-trust-copy {
    color: #bdcacc;

    line-height: 1.8;

    max-width: 600px;

    margin-top: 25px;
}


.licence-card {
    background: rgba(255,255,255,0.05);

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

    padding: 42px;
}


.licence-card-label {
    color: #8ec2ba;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 13px;
}


.licence-card h3 {
    font-size: 1.5rem;

    margin-bottom: 30px;
}


.licence-row {
    display: flex;

    justify-content: space-between;

    gap: 25px;

    padding: 17px 0;

    border-top: 1px solid rgba(255,255,255,0.12);
}


.licence-row span {
    color: #9daeb1;

    font-size: 0.82rem;
}


.licence-row strong {
    color: white;

    text-align: right;

    font-size: 0.9rem;

    font-weight: 600;
}



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

.leadership-grid {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 100px;

    align-items: center;
}


.leadership-photo-placeholder {
    min-height: 500px;

    display: flex;

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

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #eef1ef,
            #dde4e1
        );

    border: 1px solid #d9dfdc;
}


.leadership-photo-placeholder span {
    display: block;

    color: var(--green);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 8px;
}


.leadership-photo-placeholder p {
    font-size: 0.85rem;
}


.leadership-content h2 {
    color: var(--navy);

    margin-bottom: 5px;
}


.leadership-title {
    color: var(--green);

    font-weight: 600;

    margin-bottom: 28px;
}


.leadership-content > p:not(.eyebrow):not(.leadership-title) {
    margin-bottom: 18px;

    line-height: 1.8;

    max-width: 620px;
}



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

.office-grid {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 100px;

    align-items: center;
}


.office-grid > div:first-child > p:last-child {
    margin-top: 24px;

    max-width: 570px;

    line-height: 1.8;
}


.office-address-card {
    background: white;

    border: 1px solid var(--light-gray);

    padding: 42px;

    box-shadow: 0 15px 40px rgba(5,29,38,0.05);
}


.office-address-card > span {
    display: block;

    color: var(--green);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    margin-bottom: 12px;
}


.office-address-card h3 {
    color: var(--navy);

    font-size: 1.35rem;

    margin-bottom: 18px;
}


.office-address-card > p {
    line-height: 1.8;
}


.office-contact-links {
    margin-top: 28px;

    padding-top: 22px;

    border-top: 1px solid var(--light-gray);
}


.office-contact-links a {
    display: block;

    color: var(--green);

    font-weight: 600;

    margin-bottom: 8px;
}



/* ==========================================
   ABOUT FINAL CTA
========================================== */

.about-final-cta {
    padding: 90px 0;

    color: white;

    background:
        linear-gradient(
            115deg,
            #0b3b36,
            #081f2a
        );
}


.about-final-cta-content {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 60px;
}


.about-final-cta h2 {
    max-width: 680px;
}


.about-final-cta-content > div:first-child > p:last-child {
    color: #c1d0cf;

    margin-top: 18px;

    max-width: 630px;
}


.about-final-buttons {
    flex-shrink: 0;

    display: flex;

    gap: 8px;
}



/* ==========================================
   ABOUT PAGE RESPONSIVE
========================================== */

@media (max-width: 950px) {

    .about-intro-grid,
    .about-trust-grid,
    .leadership-grid,
    .office-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .about-intro-copy {
        padding-top: 0;
    }


    .about-stats {
        grid-template-columns: 1fr 1fr;
    }


    .about-service-grid {
        grid-template-columns: 1fr 1fr;
    }


    .leadership-photo-placeholder {
        min-height: 400px;
    }


    .about-final-cta-content {
        flex-direction: column;

        align-items: flex-start;
    }


    .about-final-buttons {
        flex-wrap: wrap;
    }

}



@media (max-width: 600px) {

    .inner-hero {
        min-height: 420px;
    }


    .inner-hero h1 {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }


    .about-stats {
        grid-template-columns: 1fr 1fr;
    }


    .about-stat {
        padding: 28px 16px;
    }


    .about-service-grid {
        grid-template-columns: 1fr;
    }


    .about-service-item {
        min-height: auto;

        padding: 30px;
    }


    .licence-card {
        padding: 28px;
    }


    .licence-row {
        flex-direction: column;

        gap: 4px;
    }


    .licence-row strong {
        text-align: left;
    }


    .leadership-photo-placeholder {
        min-height: 330px;
    }


    .office-address-card {
        padding: 28px;
    }


    .about-final-buttons {
        width: 100%;

        flex-direction: column;
    }


    .about-final-buttons .button {
        width: 100%;
    }


    .about-final-buttons .button-secondary {
        margin-left: 0;
    }

}


/* ==========================================
   FOR EMPLOYERS PAGE
========================================== */

.employer-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}


.employer-intro-copy {
    padding-top: 43px;
}


.employer-intro-copy p {
    margin-bottom: 21px;
    line-height: 1.85;
}



/* EMPLOYER BENEFITS */

.employer-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #d8dddb;
    border-left: 1px solid #d8dddb;
}


.employer-benefit {
    background: white;

    padding: 38px;

    min-height: 270px;

    border-right: 1px solid #d8dddb;
    border-bottom: 1px solid #d8dddb;
}


.employer-benefit span {
    display: block;

    color: var(--green);

    font-size: 0.73rem;
    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 45px;
}


.employer-benefit h3 {
    color: var(--navy);

    margin-bottom: 13px;

    font-size: 1.2rem;
}


.employer-benefit p {
    font-size: 0.9rem;
    line-height: 1.75;
}



/* WORKFORCE REQUIREMENTS */

.workforce-section {
    background: var(--navy);

    color: white;
}


.workforce-heading {
    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 90px;

    align-items: end;

    margin-bottom: 55px;
}


.workforce-heading > p {
    color: #becbcc;

    line-height: 1.8;
}


.requirement-grid {
    display: grid;

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

    border-top: 1px solid rgba(255,255,255,0.14);
    border-left: 1px solid rgba(255,255,255,0.14);
}


.requirement-card {
    min-height: 150px;

    padding: 30px;

    border-right: 1px solid rgba(255,255,255,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.14);

    background: rgba(255,255,255,0.035);
}


.requirement-card span {
    display: block;

    color: #8bbdb5;

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.13em;

    margin-bottom: 22px;
}


.requirement-card strong {
    font-size: 1.05rem;

    font-weight: 500;

    line-height: 1.45;
}



/* INDUSTRIES CTA */

.employer-industry-cta {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 70px;

    align-items: center;
}


.employer-industry-cta h2 {
    max-width: 650px;
}


.employer-industry-cta p:last-child {
    margin-top: 22px;

    max-width: 700px;

    line-height: 1.8;
}



/* CREDIBILITY */

.employer-credibility-grid {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 100px;

    align-items: center;
}


.employer-credibility-card {
    padding: 42px;

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

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

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 0;
}


.employer-credibility-card span,
.employer-credibility-card strong {
    padding: 18px 0;

    border-bottom: 1px solid rgba(255,255,255,0.1);
}


.employer-credibility-card span {
    color: #8fa5a9;

    font-size: 0.71rem;

    letter-spacing: 0.12em;
}


.employer-credibility-card strong {
    color: white;

    font-size: 0.9rem;

    text-align: right;
}



/* FINAL CTA */

.employer-final-cta {
    padding: 90px 0;

    color: white;

    background:
        linear-gradient(
            115deg,
            #0b423b,
            #081d29
        );
}


.employer-final-cta-content {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 70px;
}


.employer-final-cta h2 {
    max-width: 650px;
}


.employer-final-cta-content > div:first-child > p:last-child {
    color: #c2d0d0;

    margin-top: 18px;

    max-width: 590px;
}


.employer-final-buttons {
    display: flex;

    flex-shrink: 0;

    gap: 8px;
}



/* RESPONSIVE */

@media (max-width: 950px) {

    .employer-intro-grid,
    .workforce-heading,
    .employer-credibility-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .employer-intro-copy {
        padding-top: 0;
    }


    .employer-benefits-grid {
        grid-template-columns: 1fr 1fr;
    }


    .requirement-grid {
        grid-template-columns: 1fr 1fr;
    }


    .employer-industry-cta {
        grid-template-columns: 1fr;
    }


    .employer-final-cta-content {
        flex-direction: column;

        align-items: flex-start;
    }

}



@media (max-width: 600px) {

    .employer-benefits-grid {
        grid-template-columns: 1fr;
    }


    .requirement-grid {
        grid-template-columns: 1fr;
    }


    .employer-benefit {
        min-height: auto;
    }


    .employer-credibility-card {
        padding: 27px;

        grid-template-columns: 1fr;
    }


    .employer-credibility-card span {
        padding-bottom: 3px;

        border-bottom: none;
    }


    .employer-credibility-card strong {
        padding-top: 3px;

        text-align: left;
    }


    .employer-final-buttons {
        width: 100%;

        flex-direction: column;
    }


    .employer-final-buttons .button {
        width: 100%;
    }


    .employer-final-buttons .button-secondary {
        margin-left: 0;
    }

}


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

.services-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.services-intro-copy {
    padding-top: 43px;
}


.services-intro-copy p {
    margin-bottom: 21px;

    line-height: 1.85;
}



/* SERVICES CARDS */

.services-page-grid {
    display: grid;

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

    border-top: 1px solid #d8dddb;
    border-left: 1px solid #d8dddb;
}


.services-page-card {
    min-height: 300px;

    padding: 42px;

    background: white;

    border-right: 1px solid #d8dddb;
    border-bottom: 1px solid #d8dddb;

    transition: 0.25s ease;
}


.services-page-card:hover {
    transform: translateY(-3px);

    box-shadow: 0 16px 35px rgba(5,29,38,0.06);
}


.service-index {
    display: block;

    color: var(--green);

    font-size: 0.73rem;
    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 55px;
}


.services-page-card h3 {
    color: var(--navy);

    font-size: 1.3rem;

    margin-bottom: 14px;
}


.services-page-card p {
    max-width: 500px;

    font-size: 0.92rem;

    line-height: 1.75;
}



/* SERVICES PROCESS */

.services-dark-section {
    background: var(--navy);

    color: white;
}


.services-process-heading {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 100px;

    align-items: end;

    margin-bottom: 60px;
}


.services-process-heading > p {
    color: #bccacc;

    line-height: 1.8;
}


.services-process-grid {
    display: grid;

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

    border-top: 1px solid rgba(255,255,255,0.13);
    border-left: 1px solid rgba(255,255,255,0.13);
}


.services-process-item {
    min-height: 240px;

    padding: 32px;

    border-right: 1px solid rgba(255,255,255,0.13);
    border-bottom: 1px solid rgba(255,255,255,0.13);
}


.services-process-item > span {
    display: block;

    color: #82bcb3;

    font-size: 0.73rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    margin-bottom: 45px;
}


.services-process-item h3 {
    font-size: 1.2rem;

    margin-bottom: 12px;
}


.services-process-item p {
    color: #b8c7ca;

    font-size: 0.88rem;

    line-height: 1.7;
}



/* SCALE */

.services-scale-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}


.services-scale-grid > div:last-child > p {
    line-height: 1.85;

    margin-bottom: 35px;
}


.services-scale-list {
    border-top: 1px solid var(--light-gray);
}


.services-scale-list > div {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 30px;

    padding: 20px 0;

    border-bottom: 1px solid var(--light-gray);
}


.services-scale-list span {
    color: var(--green);

    font-size: 0.78rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.services-scale-list strong {
    color: var(--navy);

    font-size: 0.95rem;

    font-weight: 500;
}



/* INDUSTRIES */

.services-industries-grid {
    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 100px;

    align-items: start;
}


.services-industries-grid > div:first-child > p:last-child {
    margin-top: 23px;

    line-height: 1.8;

    max-width: 600px;
}


.services-industries-list {
    border-top: 1px solid #d5dbd8;
}


.services-industries-list a {
    display: flex;

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

    padding: 20px 4px;

    color: var(--navy);

    font-weight: 500;

    border-bottom: 1px solid #d5dbd8;

    transition: 0.2s ease;
}


.services-industries-list a span {
    color: var(--green);

    transition: transform 0.2s ease;
}


.services-industries-list a:hover {
    color: var(--green);
}


.services-industries-list a:hover span {
    transform: translateX(5px);
}



/* WHY US */

.services-why-grid {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 100px;

    align-items: center;
}


.services-why-list {
    border-top: 1px solid rgba(255,255,255,0.13);
}


.services-why-list > div {
    padding: 20px 0;

    border-bottom: 1px solid rgba(255,255,255,0.13);
}


.services-why-list strong {
    display: block;

    color: white;

    font-size: 1.05rem;

    margin-bottom: 3px;
}


.services-why-list span {
    color: #91a5a9;

    font-size: 0.82rem;
}



/* FINAL CTA */

.services-final-cta {
    padding: 90px 0;

    color: white;

    background:
        linear-gradient(
            115deg,
            #0b423b,
            #081d29
        );
}


.services-final-cta-content {
    display: flex;

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

    gap: 70px;
}


.services-final-cta h2 {
    max-width: 650px;
}


.services-final-cta-content > div:first-child > p:last-child {
    color: #c2d0d0;

    max-width: 600px;

    margin-top: 18px;
}


.services-final-buttons {
    display: flex;

    flex-shrink: 0;

    gap: 8px;
}



/* SERVICES RESPONSIVE */

@media (max-width: 950px) {

    .services-intro-grid,
    .services-process-heading,
    .services-scale-grid,
    .services-industries-grid,
    .services-why-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .services-intro-copy {
        padding-top: 0;
    }


    .services-process-grid {
        grid-template-columns: 1fr 1fr;
    }


    .services-final-cta-content {
        flex-direction: column;

        align-items: flex-start;
    }

}



@media (max-width: 600px) {

    .services-page-grid,
    .services-process-grid {
        grid-template-columns: 1fr;
    }


    .services-page-card {
        min-height: auto;

        padding: 30px;
    }


    .service-index {
        margin-bottom: 35px;
    }


    .services-process-item {
        min-height: auto;
    }


    .services-scale-list > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .services-final-buttons {
        width: 100%;

        flex-direction: column;
    }


    .services-final-buttons .button {
        width: 100%;
    }


    .services-final-buttons .button-secondary {
        margin-left: 0;
    }

}


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

.industries-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.industries-intro-copy {
    padding-top: 43px;
}


.industries-intro-copy p {
    margin-bottom: 21px;

    line-height: 1.85;
}



/* INDUSTRY CARDS */

.industries-page-grid {
    display: grid;

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

    border-top: 1px solid #d8dddb;
    border-left: 1px solid #d8dddb;
}


.industry-card {
    min-height: 390px;

    padding: 38px;

    background: white;

    border-right: 1px solid #d8dddb;
    border-bottom: 1px solid #d8dddb;

    transition: 0.25s ease;
}


.industry-card:hover {
    transform: translateY(-3px);

    box-shadow: 0 16px 35px rgba(5,29,38,0.06);
}


.industry-number {
    display: block;

    color: var(--green);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    margin-bottom: 45px;
}


.industry-card h3 {
    color: var(--navy);

    font-size: 1.25rem;

    margin-bottom: 14px;
}


.industry-card > p {
    font-size: 0.9rem;

    line-height: 1.7;

    margin-bottom: 23px;
}


.industry-card ul {
    list-style: none;

    border-top: 1px solid var(--light-gray);

    padding-top: 14px;
}


.industry-card li {
    color: var(--gray);

    font-size: 0.83rem;

    padding: 5px 0;
}


.industry-card li::before {
    content: "—";

    color: var(--green);

    margin-right: 8px;
}


.industry-card-highlight {
    background:
        linear-gradient(
            145deg,
            #0e2f39,
            #114d46
        );

    color: white;
}


.industry-card-highlight h3 {
    color: white;
}


.industry-card-highlight > p {
    color: #c7d4d3;
}


.industry-card-highlight .industry-number {
    color: #92c5bd;
}


.industry-card-highlight .text-link {
    color: white;
}



/* WORKFORCE CATEGORIES */

.industries-workforce-section {
    background: var(--navy);

    color: white;
}


.industries-workforce-heading {
    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 90px;

    align-items: end;

    margin-bottom: 55px;
}


.industries-workforce-heading > p {
    color: #bccacc;

    line-height: 1.8;
}


.workforce-category-grid {
    display: grid;

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

    border-top: 1px solid rgba(255,255,255,0.13);
    border-left: 1px solid rgba(255,255,255,0.13);
}


.workforce-category-grid > div {
    min-height: 245px;

    padding: 32px;

    border-right: 1px solid rgba(255,255,255,0.13);
    border-bottom: 1px solid rgba(255,255,255,0.13);
}


.workforce-category-grid span {
    display: block;

    color: #8ec2ba;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    margin-bottom: 50px;
}


.workforce-category-grid strong {
    display: block;

    color: white;

    font-size: 1.2rem;

    margin-bottom: 12px;
}


.workforce-category-grid p {
    color: #b9c8ca;

    font-size: 0.88rem;

    line-height: 1.7;
}



/* CUSTOM REQUIREMENTS */

.industries-custom-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}


.industries-custom-grid > div:last-child > p {
    line-height: 1.85;

    margin-bottom: 35px;
}


.custom-requirement-list {
    border-top: 1px solid var(--light-gray);
}


.custom-requirement-list > div {
    display: grid;

    grid-template-columns: 0.65fr 1.35fr;

    gap: 30px;

    padding: 20px 0;

    border-bottom: 1px solid var(--light-gray);
}


.custom-requirement-list span {
    color: var(--green);

    font-size: 0.77rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.custom-requirement-list strong {
    color: var(--navy);

    font-size: 0.95rem;

    font-weight: 500;
}



/* MARKETS CTA */

.industries-markets-grid {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 70px;

    align-items: center;
}


.industries-markets-grid h2 {
    max-width: 700px;
}


.industries-markets-grid p:last-child {
    max-width: 650px;

    margin-top: 22px;

    line-height: 1.8;
}



/* FINAL CTA */

.industries-final-cta {
    padding: 90px 0;

    color: white;

    background:
        linear-gradient(
            115deg,
            #0b423b,
            #081d29
        );
}


.industries-final-cta-content {
    display: flex;

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

    gap: 70px;
}


.industries-final-cta h2 {
    max-width: 650px;
}


.industries-final-cta-content > div:first-child > p:last-child {
    color: #c2d0d0;

    max-width: 600px;

    margin-top: 18px;
}


.industries-final-buttons {
    display: flex;

    flex-shrink: 0;

    gap: 8px;
}



/* INDUSTRIES RESPONSIVE */

@media (max-width: 950px) {

    .industries-intro-grid,
    .industries-workforce-heading,
    .industries-custom-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .industries-intro-copy {
        padding-top: 0;
    }


    .industries-page-grid {
        grid-template-columns: 1fr 1fr;
    }


    .workforce-category-grid {
        grid-template-columns: 1fr 1fr;
    }


    .industries-markets-grid {
        grid-template-columns: 1fr;
    }


    .industries-final-cta-content {
        flex-direction: column;

        align-items: flex-start;
    }

}



@media (max-width: 600px) {

    .industries-page-grid,
    .workforce-category-grid {
        grid-template-columns: 1fr;
    }


    .industry-card {
        min-height: auto;

        padding: 30px;
    }


    .industry-number {
        margin-bottom: 30px;
    }


    .custom-requirement-list > div {
        grid-template-columns: 1fr;

        gap: 4px;
    }


    .industries-final-buttons {
        width: 100%;

        flex-direction: column;
    }


    .industries-final-buttons .button {
        width: 100%;
    }


    .industries-final-buttons .button-secondary {
        margin-left: 0;
    }

}


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

.markets-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.markets-intro-copy {
    padding-top: 43px;
}


.markets-intro-copy p {
    margin-bottom: 21px;

    line-height: 1.85;
}



/* PRIMARY REGIONAL FOCUS */

.markets-focus-section {
    padding: 100px 0;

    color: white;

    background:
        linear-gradient(
            115deg,
            #0b423b,
            #081f2b
        );
}


.markets-focus-grid {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 100px;

    align-items: center;
}


.markets-focus-grid h2 {
    max-width: 600px;
}


.markets-focus-grid > div:first-child > p:last-child {
    color: #c3d1d0;

    max-width: 600px;

    margin-top: 22px;

    line-height: 1.8;
}


.markets-focus-card {
    padding: 40px;

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

    background: rgba(255,255,255,0.04);
}


.markets-focus-card > span {
    display: block;

    color: #8ec2ba;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    margin-bottom: 20px;
}


.markets-focus-card strong {
    display: block;

    color: white;

    padding: 12px 0;

    font-size: 0.95rem;

    font-weight: 500;

    border-bottom: 1px solid rgba(255,255,255,0.1);
}



/* COUNTRY CARDS */

.markets-country-grid {
    display: grid;

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

    border-top: 1px solid #d8dddb;
    border-left: 1px solid #d8dddb;
}


.market-country-card {
    min-height: 300px;

    padding: 42px;

    background: white;

    border-right: 1px solid #d8dddb;
    border-bottom: 1px solid #d8dddb;

    transition: 0.25s ease;
}


.market-country-card:hover {
    transform: translateY(-3px);

    box-shadow: 0 16px 35px rgba(5,29,38,0.06);
}


.market-code {
    display: block;

    color: var(--green);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 50px;
}


.market-country-card h3 {
    color: var(--navy);

    font-size: 1.35rem;

    margin-bottom: 15px;
}


.market-country-card p {
    max-width: 520px;

    font-size: 0.92rem;

    line-height: 1.75;
}


.market-country-other {
    color: white;

    background:
        linear-gradient(
            145deg,
            #0e2f39,
            #114d46
        );
}


.market-country-other .market-code {
    color: #92c5bd;
}


.market-country-other h3 {
    color: white;
}


.market-country-other p {
    color: #c3d2d1;
}


.market-country-other .text-link {
    color: white;
}



/* WHY PAKISTAN */

.markets-pakistan-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}


.markets-pakistan-grid > div:first-child > p:last-child {
    max-width: 550px;

    margin-top: 22px;

    line-height: 1.8;
}


.markets-pakistan-list {
    border-top: 1px solid var(--light-gray);
}


.markets-pakistan-list > div {
    display: grid;

    grid-template-columns: 70px 0.8fr 1.2fr;

    gap: 25px;

    padding: 24px 0;

    border-bottom: 1px solid var(--light-gray);

    align-items: start;
}


.markets-pakistan-list span {
    color: var(--green);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.12em;
}


.markets-pakistan-list strong {
    color: var(--navy);

    font-size: 1rem;
}


.markets-pakistan-list p {
    font-size: 0.88rem;

    line-height: 1.7;
}



/* INTERNATIONAL EMPLOYER PROCESS */

.markets-process-section {
    color: white;

    background: var(--navy);
}


.markets-process-section .center-heading > p:last-child {
    color: #becacc;
}


.markets-process-grid {
    display: grid;

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

    border-top: 1px solid rgba(255,255,255,0.13);
    border-left: 1px solid rgba(255,255,255,0.13);
}


.markets-process-grid > div {
    min-height: 260px;

    padding: 32px;

    border-right: 1px solid rgba(255,255,255,0.13);
    border-bottom: 1px solid rgba(255,255,255,0.13);
}


.markets-process-grid span {
    display: block;

    color: #8ec2ba;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    margin-bottom: 45px;
}


.markets-process-grid h3 {
    color: white;

    font-size: 1.18rem;

    margin-bottom: 12px;
}


.markets-process-grid p {
    color: #b9c8ca;

    font-size: 0.88rem;

    line-height: 1.7;
}



/* COMPLIANCE */

.markets-compliance-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}


.markets-compliance-grid > div:last-child p {
    margin-bottom: 20px;

    line-height: 1.85;
}



/* FINAL CTA */

.markets-final-cta {
    padding: 90px 0;

    color: white;

    background:
        linear-gradient(
            115deg,
            #0b423b,
            #081d29
        );
}


.markets-final-cta-content {
    display: flex;

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

    gap: 70px;
}


.markets-final-cta h2 {
    max-width: 680px;
}


.markets-final-cta-content > div:first-child > p:last-child {
    color: #c2d0d0;

    max-width: 610px;

    margin-top: 18px;
}


.markets-final-buttons {
    display: flex;

    flex-shrink: 0;

    gap: 8px;
}



/* MARKETS RESPONSIVE */

@media (max-width: 950px) {

    .markets-intro-grid,
    .markets-focus-grid,
    .markets-pakistan-grid,
    .markets-compliance-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .markets-intro-copy {
        padding-top: 0;
    }


    .markets-process-grid {
        grid-template-columns: 1fr 1fr;
    }


    .markets-final-cta-content {
        flex-direction: column;

        align-items: flex-start;
    }

}



@media (max-width: 600px) {

    .markets-country-grid,
    .markets-process-grid {
        grid-template-columns: 1fr;
    }


    .market-country-card {
        min-height: auto;

        padding: 30px;
    }


    .market-code {
        margin-bottom: 32px;
    }


    .markets-pakistan-list > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .markets-final-buttons {
        width: 100%;

        flex-direction: column;
    }


    .markets-final-buttons .button {
        width: 100%;
    }


    .markets-final-buttons .button-secondary {
        margin-left: 0;
    }

}


/* ==========================================
   RECRUITMENT REQUIREMENT PAGE
========================================== */

.recruitment-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.recruitment-intro-grid > div:last-child {
    padding-top: 43px;
}


.recruitment-intro-grid > div:last-child p {
    margin-bottom: 20px;

    line-height: 1.85;
}



/* FORM LAYOUT */

.recruitment-layout {
    display: grid;

    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.5fr);

    gap: 55px;

    align-items: start;
}


.recruitment-form-wrapper {
    background: white;

    border: 1px solid var(--light-gray);

    box-shadow: 0 18px 50px rgba(5,29,38,0.05);
}


.recruitment-form-heading {
    padding: 45px;

    border-bottom: 1px solid var(--light-gray);
}


.recruitment-form-heading h2 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);

    margin-bottom: 12px;
}



/* FORM SECTIONS */

.form-section {
    padding: 45px;

    border-bottom: 1px solid var(--light-gray);
}


.form-section:last-child {
    border-bottom: none;
}


.form-section-heading {
    display: flex;

    gap: 20px;

    align-items: flex-start;

    margin-bottom: 35px;
}


.form-section-heading > span {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;

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

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

    border-radius: 50%;

    color: var(--green);

    font-size: 0.72rem;

    font-weight: 700;
}


.form-section-heading h3 {
    color: var(--navy);

    font-size: 1.25rem;

    margin-bottom: 3px;
}


.form-section-heading p {
    font-size: 0.85rem;
}



/* FIELDS */

.form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;
}


.form-field {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


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


.form-field label {
    color: var(--navy);

    font-size: 0.82rem;

    font-weight: 600;
}


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

    border: 1px solid #d4dcda;

    border-radius: 3px;

    background: white;

    color: var(--text);

    font: inherit;

    font-size: 0.92rem;

    padding: 14px 15px;

    outline: none;

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


.form-field textarea {
    resize: vertical;

    min-height: 115px;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(23,105,95,0.08);
}


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



/* CONSENT */

.form-consent {
    display: flex;

    gap: 12px;

    align-items: flex-start;

    margin-top: 28px;

    cursor: pointer;
}


.form-consent input {
    margin-top: 4px;

    flex-shrink: 0;
}


.form-consent span {
    color: var(--gray);

    font-size: 0.82rem;

    line-height: 1.65;
}



/* HONEYPOT */

.website-field {
    position: absolute;

    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}



/* TURNSTILE PLACEHOLDER */

.turnstile-placeholder {
    margin-top: 28px;

    padding: 18px;

    border: 1px dashed #c9d4d1;

    background: var(--off-white);
}


.turnstile-placeholder span {
    display: block;

    color: var(--green);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    margin-bottom: 3px;
}


.turnstile-placeholder p {
    font-size: 0.8rem;
}



/* SUBMIT */

.recruitment-submit {
    border: none;

    cursor: pointer;

    margin-top: 28px;

    min-width: 260px;
}


.form-security-note {
    margin-top: 15px;

    font-size: 0.76rem;

    line-height: 1.6;
}



/* SIDEBAR */

.recruitment-sidebar {
    display: flex;

    flex-direction: column;

    gap: 24px;

    position: sticky;

    top: 120px;
}


.recruitment-sidebar-card {
    padding: 32px;

    background: white;

    border: 1px solid var(--light-gray);
}


.recruitment-sidebar-card h3 {
    color: var(--navy);

    font-size: 1.25rem;

    margin-bottom: 12px;
}


.recruitment-sidebar-card > p:not(.eyebrow) {
    font-size: 0.88rem;

    line-height: 1.7;

    margin-bottom: 24px;
}


.recruitment-contact-row {
    padding: 14px 0;

    border-top: 1px solid var(--light-gray);
}


.recruitment-contact-row span {
    display: block;

    color: var(--gray);

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.09em;

    margin-bottom: 3px;
}


.recruitment-contact-row a {
    color: var(--green);

    font-size: 0.9rem;

    font-weight: 600;
}



/* SIDEBAR CREDENTIALS */

.dark-card {
    background: var(--navy);

    color: white;

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


.dark-card h3 {
    color: white;
}


.credential-row {
    padding: 15px 0;

    border-top: 1px solid rgba(255,255,255,0.12);
}


.credential-row span {
    display: block;

    color: #90a4a8;

    font-size: 0.69rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}


.credential-row strong {
    display: block;

    color: white;

    font-size: 0.9rem;

    margin-top: 3px;
}



/* NEXT STEPS */

.sidebar-step {
    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 12px;

    padding: 14px 0;

    border-top: 1px solid var(--light-gray);
}


.sidebar-step span {
    color: var(--green);

    font-size: 0.7rem;

    font-weight: 700;
}


.sidebar-step p {
    font-size: 0.83rem;

    line-height: 1.55;
}



/* FINAL SECTION */

.recruitment-final-section {
    padding: 95px 0;

    color: white;

    background:
        linear-gradient(
            115deg,
            #0b423b,
            #081d29
        );
}


.recruitment-final-content {
    max-width: 800px;

    text-align: center;
}


.recruitment-final-content p:last-child {
    color: #c0d0ce;

    max-width: 650px;

    margin: 20px auto 0;

    line-height: 1.8;
}



/* RESPONSIVE */

@media (max-width: 950px) {

    .recruitment-intro-grid,
    .recruitment-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .recruitment-intro-grid > div:last-child {
        padding-top: 0;
    }


    .recruitment-sidebar {
        position: static;

        display: grid;

        grid-template-columns: 1fr 1fr;
    }

}



@media (max-width: 650px) {

    .recruitment-form-heading,
    .form-section {
        padding: 28px;
    }


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


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


    .recruitment-submit {
        width: 100%;

        min-width: 0;
    }


    .recruitment-sidebar {
        grid-template-columns: 1fr;
    }

}


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

.contact-page-intro {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 100px;
}


.contact-page-intro > div:first-child > p:last-child {
    margin-top: 25px;

    line-height: 1.85;

    max-width: 550px;
}



/* CONTACT CARDS */

.contact-information-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 1px solid var(--light-gray);
    border-left: 1px solid var(--light-gray);
}


.contact-info-card {
    min-height: 220px;

    padding: 30px;

    border-right: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
}


.contact-info-card > span {
    display: block;

    color: var(--green);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    margin-bottom: 35px;
}


.contact-info-card h3 {
    color: var(--navy);

    font-size: 1.15rem;

    margin-bottom: 9px;
}


.contact-info-card a {
    color: var(--green);

    font-weight: 600;

    font-size: 0.9rem;
}


.contact-info-card p {
    font-size: 0.88rem;

    line-height: 1.7;
}


.contact-info-card strong {
    color: var(--navy);
}



/* OFFICE + MAP */

.contact-office-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: stretch;
}


.contact-office-content > p:not(.eyebrow) {
    margin-top: 22px;

    line-height: 1.8;

    max-width: 550px;
}


.contact-office-details {
    margin-top: 35px;

    border-top: 1px solid #d5dcd9;
}


.contact-office-details > div {
    padding: 18px 0;

    border-bottom: 1px solid #d5dcd9;
}


.contact-office-details span {
    display: block;

    color: var(--green);

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: 5px;
}


.contact-office-details strong {
    color: var(--navy);

    font-size: 0.92rem;

    line-height: 1.7;
}


.contact-office-details a {
    color: var(--navy);

    font-weight: 600;
}



/* MAP PLACEHOLDER */

.contact-map-placeholder {
    min-height: 480px;

    display: flex;

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

    padding: 50px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #e9efec,
            #d8e3de
        );

    border: 1px solid #d4ddda;
}


.contact-map-placeholder span {
    display: block;

    color: var(--green);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 15px;
}


.contact-map-placeholder h3 {
    color: var(--navy);

    font-size: 1.5rem;

    margin-bottom: 12px;
}


.contact-map-placeholder p {
    margin-bottom: 25px;

    line-height: 1.7;
}


.contact-map-placeholder small {
    display: block;

    max-width: 350px;

    color: var(--gray);

    font-size: 0.75rem;

    line-height: 1.6;
}



/* EMPLOYER CTA */

.contact-employer-section {
    padding: 90px 0;

    color: white;

    background: var(--navy);
}


.contact-employer-grid {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 80px;

    align-items: center;
}


.contact-employer-grid h2 {
    max-width: 680px;
}


.contact-employer-grid > div:first-child > p:last-child {
    color: #bdcbcd;

    max-width: 620px;

    margin-top: 20px;

    line-height: 1.8;
}



/* COMPANY CREDENTIALS */

.contact-credentials-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}


.contact-credentials-grid > div:first-child > p:last-child {
    margin-top: 22px;

    max-width: 560px;

    line-height: 1.8;
}


.contact-company-card {
    border-top: 1px solid var(--light-gray);
}


.contact-company-card > div {
    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 30px;

    padding: 20px 0;

    border-bottom: 1px solid var(--light-gray);
}


.contact-company-card span {
    color: var(--gray);

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.contact-company-card strong {
    color: var(--navy);

    font-size: 0.93rem;

    font-weight: 600;

    text-align: right;
}



/* FINAL CTA */

.contact-final-section {
    padding: 100px 0;

    color: white;

    text-align: center;

    background:
        linear-gradient(
            115deg,
            #0b423b,
            #081d29
        );
}


.contact-final-content {
    max-width: 850px;
}


.contact-final-content > p:last-of-type {
    max-width: 630px;

    margin: 20px auto 0;

    color: #c3d1d0;

    line-height: 1.8;
}


.contact-final-buttons {
    margin-top: 32px;

    display: flex;

    justify-content: center;

    gap: 8px;
}



/* CONTACT RESPONSIVE */

@media (max-width: 950px) {

    .contact-page-intro,
    .contact-office-grid,
    .contact-credentials-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .contact-employer-grid {
        grid-template-columns: 1fr;
    }

}



@media (max-width: 600px) {

    .contact-information-grid {
        grid-template-columns: 1fr;
    }


    .contact-info-card {
        min-height: auto;
    }


    .contact-map-placeholder {
        min-height: 350px;

        padding: 30px;
    }


    .contact-company-card > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .contact-company-card strong {
        text-align: left;
    }


    .contact-final-buttons {
        flex-direction: column;
    }


    .contact-final-buttons .button {
        width: 100%;
    }


    .contact-final-buttons .button-secondary {
        margin-left: 0;
    }

}


/* ==========================================
   FORM STATUS MESSAGES
========================================== */

.form-status {
    margin: 0 45px 30px;

    padding: 18px 20px;

    border-radius: 3px;

    font-size: 0.9rem;

    line-height: 1.65;
}


.form-status strong {
    display: block;

    margin-bottom: 3px;
}


.form-status-success {
    background: #edf7f3;

    border: 1px solid #badccf;

    color: #145c4f;
}


.form-status-error {
    background: #fff1ee;

    border: 1px solid #e2bbb1;

    color: #85341f;
}


@media (max-width: 650px) {

    .form-status {
        margin:
            0 28px
            25px;
    }

}


/* ==========================================
   FORM SUBMISSION STATUS
========================================== */

.form-status {
    margin: 30px 45px 0;

    padding: 20px 22px;

    border-radius: 4px;

    font-size: 0.92rem;

    line-height: 1.65;
}


.form-status strong {
    display: block;

    margin-bottom: 4px;

    font-size: 1rem;
}


.form-status-success {
    background: #edf8f4;

    border: 1px solid #b7ddcf;

    color: #145c4f;
}


.form-status-error {
    background: #fff1ee;

    border: 1px solid #e1b7ad;

    color: #87331e;
}


@media (max-width: 650px) {

    .form-status {
        margin:
            25px 28px
            0;
    }

}


/* ==========================================
   ARABIC / RTL
========================================== */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}


html[dir="rtl"] .nav-container,
html[dir="rtl"] .top-bar-content,
html[dir="rtl"] .hero-buttons,
html[dir="rtl"] .about-final-cta-content,
html[dir="rtl"] .employer-final-cta-content,
html[dir="rtl"] .services-final-cta-content,
html[dir="rtl"] .industries-final-cta-content,
html[dir="rtl"] .markets-final-cta-content,
html[dir="rtl"] .contact-final-buttons {
    direction: rtl;
}


html[dir="rtl"] .nav-menu {
    direction: rtl;
}


html[dir="rtl"] .button-secondary {
    margin-left: 0;
    margin-right: 8px;
}


html[dir="rtl"] .eyebrow {
    letter-spacing: 0;
}


html[dir="rtl"] .hero h1,
html[dir="rtl"] .inner-hero h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
    letter-spacing: 0;
}


html[dir="rtl"] .text-link {
    direction: rtl;
}


html[dir="rtl"] .industry-card li::before {
    margin-right: 0;
    margin-left: 8px;
}


html[dir="rtl"] .licence-row strong,
html[dir="rtl"] .employer-credibility-card strong,
html[dir="rtl"] .contact-company-card strong {
    text-align: left;
}


html[dir="rtl"] .form-field {
    text-align: right;
}


html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    text-align: right;
}


html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left;
}


html[dir="rtl"] .form-consent {
    direction: rtl;
}


@media (max-width: 600px) {

    html[dir="rtl"] .button-secondary {
        margin-right: 0;
    }

}/* ==========================================
   ARABIC / RTL
========================================== */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}


html[dir="rtl"] .nav-container,
html[dir="rtl"] .top-bar-content,
html[dir="rtl"] .hero-buttons,
html[dir="rtl"] .about-final-cta-content,
html[dir="rtl"] .employer-final-cta-content,
html[dir="rtl"] .services-final-cta-content,
html[dir="rtl"] .industries-final-cta-content,
html[dir="rtl"] .markets-final-cta-content,
html[dir="rtl"] .contact-final-buttons {
    direction: rtl;
}


html[dir="rtl"] .nav-menu {
    direction: rtl;
}


html[dir="rtl"] .button-secondary {
    margin-left: 0;
    margin-right: 8px;
}


html[dir="rtl"] .eyebrow {
    letter-spacing: 0;
}


html[dir="rtl"] .hero h1,
html[dir="rtl"] .inner-hero h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
    letter-spacing: 0;
}


html[dir="rtl"] .text-link {
    direction: rtl;
}


html[dir="rtl"] .industry-card li::before {
    margin-right: 0;
    margin-left: 8px;
}


html[dir="rtl"] .licence-row strong,
html[dir="rtl"] .employer-credibility-card strong,
html[dir="rtl"] .contact-company-card strong {
    text-align: left;
}


html[dir="rtl"] .form-field {
    text-align: right;
}


html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    text-align: right;
}


html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left;
}


html[dir="rtl"] .form-consent {
    direction: rtl;
}


@media (max-width: 600px) {

    html[dir="rtl"] .button-secondary {
        margin-right: 0;
    }

}


/* ==========================================
   MOBILE CONTENT POLISH
========================================== */

@media (max-width: 768px) {

    /* Slightly tighter sections on phones */

    .section {
        padding-top: 65px;
        padding-bottom: 65px;
    }


    /* Services cards */

    .service-card {
        padding: 34px 28px;
        min-height: auto;
    }


    .service-card span {
        margin-bottom: 35px;
    }


    .service-card h3 {
        margin-bottom: 14px;
    }


    /* Keep headings comfortable */

    .center-heading {
        margin-bottom: 42px;
    }

}



/* ==========================================
   MOBILE INDUSTRIES + PROCESS POLISH
========================================== */

@media (max-width: 768px) {

    /* Industries list */

    .industry-grid > div {
        padding: 22px 20px;
    }


    /* Recruitment process */

    .process-grid {
        gap: 34px;
    }


    .process-step {
        min-height: auto;
        padding-bottom: 10px;
    }


    .process-number {
        margin-bottom: 18px;
    }


    .process-step h3 {
        margin-bottom: 10px;
    }


    /* International markets */

    .markets-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }


    /* Contact card */

    .contact-card {
        padding: 28px 24px;
    }


    /* Footer */

    .footer-grid {
        gap: 38px;
    }

}

/* ==========================================
   HEADER LOGO SIZE FIX
========================================== */

.brand {
    width: 185px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}


.brand-logo {
    width: 185px;
    height: auto;
    max-width: none;
    max-height: none;
    display: block;
    transform: scale(2.2);
    transform-origin: center center;
}


@media (max-width: 768px) {

    .brand {
        width: 135px;
        height: 60px;
    }


    .brand-logo {
        width: 135px;
        transform: scale(2.2);
        transform-origin: center center;
    }

}

/* ==========================================
   FINAL HEADER LOGO
========================================== */

.brand {
    width: 105px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
}


.brand-logo {
    display: block;
    width: 96px;
    height: auto;
    max-width: 100%;
    max-height: 68px;

    transform: none;
    transform-origin: center;
    object-fit: contain;
}


/* MOBILE */

@media (max-width: 768px) {

    .brand {
        width: 82px;
        height: 62px;
    }


    .brand-logo {
        width: 74px;
        max-height: 54px;
        transform: none;
    }

}


/* =========================================================
   NOWSHERWAN INTERNATIONAL
   FINAL GLOBAL VISUAL POLISH
   Keep this block at the VERY BOTTOM of style.css
========================================================= */


/* ---------------------------------------------------------
   HEADER + FINAL LOGO
--------------------------------------------------------- */

.nav-container {
    min-height: 92px;
}


.brand {
    width: 122px;
    height: 78px;

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

    flex-shrink: 0;

    overflow: visible;
}


.brand-logo {
    display: block;

    width: 108px;
    height: auto;

    max-width: 100%;
    max-height: 72px;

    object-fit: contain;

    transform: none !important;
    transform-origin: center center;
}



/* ---------------------------------------------------------
   HERO BUTTONS
--------------------------------------------------------- */

.hero-buttons {
    gap: 18px;
}


.hero-buttons .button {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}



/* ---------------------------------------------------------
   GENERAL CARD POLISH
--------------------------------------------------------- */

.service-card,
.contact-card,
.employer-card,
.industry-card {
    overflow: hidden;
}



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

@media (max-width: 768px) {


    /* HEADER */

    .navbar {
        min-height: 72px;
    }


    .nav-container {
        min-height: 72px;
    }


    .brand {
        width: 90px;
        height: 60px;
    }


    .brand-logo {
        width: 82px;
        max-height: 56px;

        transform: none !important;
    }


    .mobile-menu-button {
        font-size: 28px;
    }



    /* SECTION SPACING */

    .section {
        padding-top: 62px;
        padding-bottom: 62px;
    }



    /* HERO */

    .hero-buttons {
        display: flex;
        flex-direction: column;

        gap: 12px;

        width: 100%;
    }


    .hero-buttons .button {
        width: 100%;

        margin: 0;
    }



    /* SERVICES */

    .service-card {
        min-height: auto;

        padding: 32px 26px;
    }


    .service-card span {
        margin-bottom: 28px;
    }


    .service-card h3 {
        margin-bottom: 12px;
    }



    /* CENTER HEADINGS */

    .center-heading {
        margin-bottom: 38px;
    }



    /* INDUSTRIES */

    .industry-grid > div {
        padding: 20px 20px;
    }



    /* RECRUITMENT PROCESS */

    .process-grid {
        gap: 30px;
    }


    .process-step {
        min-height: auto;

        padding-bottom: 8px;
    }


    .process-number {
        margin-bottom: 16px;
    }


    .process-step h3 {
        margin-bottom: 8px;
    }



    /* MARKETS */

    .markets-section {
        padding-top: 68px;
        padding-bottom: 68px;
    }



    /* CONTACT */

    .contact-card {
        padding: 26px 22px;
    }



    /* FOOTER */

    .footer-grid {
        gap: 36px;
    }

}



/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {


    .brand {
        width: 84px;
    }


    .brand-logo {
        width: 76px;
    }


    .section {
        padding-top: 56px;
        padding-bottom: 56px;
    }


    .service-card {
        padding: 28px 22px;
    }


    .contact-card {
        padding: 24px 20px;
    }

}


/* ==========================================
   LARGE DESKTOP WIDTH POLISH
========================================== */

@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
    }

}