/*
==========================================================
DISHA RECRUITMENT
JOB PAGE — ACCOUNTS & ADMIN EXECUTIVE
VERSION 1.0 — FRESH JOB-PAGE DESIGN

Architecture:
    global-new.css
    +
    jobs-accounts-admin-executive.css

This page does NOT use guide.css or any hiring-guide CSS.
==========================================================
*/

.disha-job-page{
    background:#FFFFFF;
    color:#334A61;
}

.disha-job-page .container{
    width:92%;
    max-width:1180px;
}


/* ==========================================================
01 — BREADCRUMB
========================================================== */

.job-breadcrumb{
    border-bottom:1px solid #E4ECF3;
    background:#FFFFFF;
}

.job-breadcrumb .container{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:9px;
    color:#708296;
    font-size:12px;
}

.job-breadcrumb a{
    color:#56708A;
}

.job-breadcrumb a:hover{
    color:#148C3B;
}

.job-breadcrumb i{
    font-size:8px;
    color:#9BAABB;
}

.job-breadcrumb span{
    color:#334A61;
    font-weight:600;
}


/* ==========================================================
02 — HERO
========================================================== */

.job-hero{
    padding:48px 0 42px;
    background:
        radial-gradient(circle at 84% 18%,rgba(20,140,59,.055),transparent 24%),
        linear-gradient(180deg,#F8FBFE 0%,#FFFFFF 76%);
    border-bottom:1px solid #E7EEF5;
}

.job-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(350px,.68fr);
    gap:56px;
    align-items:center;
}

.job-hero-copy{
    min-width:0;
}

.job-kicker{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
    color:#148C3B;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.10em;
}

.job-kicker-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#148C3B;
    box-shadow:0 0 0 4px #EAF7EF;
}

.job-kicker-separator{
    color:#A5B4C3;
}

.job-hero h1{
    max-width:720px;
    margin:0 0 10px;
    color:#0B4F9C;
    font-family:"Poppins",Arial,sans-serif;
    font-size:40px;
    line-height:1.12;
    letter-spacing:-.7px;
}

.job-location-line{
    margin:0 0 18px;
    color:#405B74;
    font-size:17px;
    line-height:1.4;
    font-weight:600;
}

.job-location-line i{
    margin-right:7px;
    color:#148C3B;
}

.job-intro{
    max-width:750px;
    margin:0 0 20px;
    color:#60758A;
    font-size:16px;
    line-height:1.72;
}

.job-hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:24px;
}

.job-hero-tags span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:8px 12px;
    border:1px solid #D8E5F0;
    border-radius:8px;
    background:#FFFFFF;
    color:#3B5870;
    font-size:13px;
    line-height:1.3;
    font-weight:600;
}

.job-hero-tags i{
    color:#148C3B;
}

.job-primary-cta{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:45px;
    padding:12px 18px;
    border-radius:8px;
    background:#148C3B;
    color:#FFFFFF;
    font-size:14px;
    line-height:1.3;
    font-weight:700;
    box-shadow:0 6px 15px rgba(20,140,59,.15);
    transition:transform .2s ease,background .2s ease;
}

.job-primary-cta:hover{
    background:#107631;
    color:#FFFFFF;
    transform:translateY(-1px);
}

.job-hero-visual{
    min-width:0;
    display:flex;
    justify-content:flex-end;
}

.job-image-frame{
    width:100%;
    max-width:430px;
    padding:9px;
    border:1px solid #D9E5EF;
    border-radius:18px;
    background:#FFFFFF;
    box-shadow:0 16px 34px rgba(18,60,105,.10);
}

.job-image-frame img{
    width:100%;
    height:auto;
    display:block;
    border-radius:11px;
}

.job-image-caption{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 5px 2px;
    color:#63788C;
    font-size:10.5px;
    line-height:1.35;
    font-weight:600;
}

.job-image-caption i{
    color:#148C3B;
}


/* ==========================================================
03 — SECTION INTRO
========================================================== */

.job-section-intro{
    margin:0 0 22px;
    text-align:center;
}

.job-section-intro.left{
    max-width:760px;
    margin-left:0;
    text-align:left;
}

.job-section-intro > span,
.job-apply-card > div:first-child > span{
    display:block;
    margin-bottom:6px;
    color:#148C3B;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.10em;
}

.job-section-intro h2{
    margin:0 0 7px;
    color:#0B4F9C;
    font-size:27px;
    line-height:1.22;
}

.job-section-intro p{
    margin:0;
    color:#687D90;
    font-size:15px;
    line-height:1.65;
}


/* ==========================================================
04 — SUMMARY
========================================================== */

.job-summary{
    padding:44px 0 48px;
    background:#FFFFFF;
}

.job-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.job-fact-card{
    min-width:0;
    padding:18px;
    display:flex;
    gap:13px;
    align-items:flex-start;
    border:1px solid #DDE7F0;
    border-radius:11px;
    background:#FFFFFF;
    box-shadow:0 5px 16px rgba(18,60,105,.045);
}

.job-fact-card.job-fact-green{
    border-top:3px solid #148C3B;
}

.job-fact-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#EAF4FF;
    color:#0B4F9C;
    font-size:15px;
}

.job-fact-green .job-fact-icon{
    background:#EAF7EF;
    color:#148C3B;
}

.job-fact-card small{
    display:block;
    margin-bottom:4px;
    color:#718398;
    font-size:10.5px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.08em;
}

.job-fact-card strong{
    display:block;
    margin-bottom:3px;
    color:#233B53;
    font-family:"Poppins",Arial,sans-serif;
    font-size:17px;
    line-height:1.3;
}

.job-fact-card p{
    margin:0;
    color:#718397;
    font-size:12px;
    line-height:1.45;
}

.job-highlight-row{
    margin-top:15px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.job-highlight-row > div{
    min-height:42px;
    padding:9px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid #E0E9F0;
    border-radius:8px;
    background:#F9FBFD;
    color:#50687E;
    font-size:13px;
    text-align:center;
}

.job-highlight-row i{
    color:#148C3B;
}

.job-highlight-row b{
    color:#2E4962;
}


/* ==========================================================
05 — MAIN CONTENT
========================================================== */

.job-content{
    padding:48px 0 50px;
    background:#F7FAFD;
    border-top:1px solid #E8EFF5;
    border-bottom:1px solid #E8EFF5;
}

.job-content-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    gap:22px;
    align-items:start;
}

.job-responsibilities{
    display:grid;
    gap:10px;
}

.job-responsibility{
    padding:17px 18px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:13px;
    align-items:start;
    border:1px solid #DDE7F0;
    border-radius:10px;
    background:#FFFFFF;
    box-shadow:0 3px 10px rgba(18,60,105,.03);
}

.job-responsibility > b{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#EAF4FF;
    color:#0B4F9C;
    font-size:10px;
    line-height:1;
    font-weight:800;
}

.job-responsibility h3{
    margin:0 0 4px;
    color:#174F89;
    font-size:16px;
    line-height:1.3;
}

.job-responsibility p{
    margin:0;
    color:#60758A;
    font-size:13.5px;
    line-height:1.58;
}

.job-side-card{
    padding:22px;
    border:1px solid #D6E5DD;
    border-radius:12px;
    background:#F7FCF9;
}

.job-side-heading{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:17px;
}

.job-side-heading > div{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#E5F5EB;
    color:#148C3B;
}

.job-side-heading span{
    color:#148C3B;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.09em;
}

.job-side-card ul{
    list-style:none;
    margin:0;
    padding:0;
}

.job-side-card li{
    position:relative;
    padding:10px 0 10px 25px;
    border-top:1px solid #E1EEE6;
    color:#4F687B;
    font-size:13.5px;
    line-height:1.5;
}

.job-side-card li:first-child{
    border-top:0;
}

.job-side-card li i{
    position:absolute;
    left:0;
    top:13px;
    color:#148C3B;
    font-size:12px;
}


/* ==========================================================
06 — DETAIL CARDS
========================================================== */

.job-bottom-grid{
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.job-detail-card{
    padding:21px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:13px;
    border:1px solid #DDE7F0;
    border-radius:11px;
    background:#FFFFFF;
}

.job-detail-card.job-detail-green{
    border-top:3px solid #148C3B;
}

.job-detail-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#EAF4FF;
    color:#0B4F9C;
}

.job-detail-green .job-detail-icon{
    background:#EAF7EF;
    color:#148C3B;
}

.job-detail-card span{
    display:block;
    margin-bottom:4px;
    color:#148C3B;
    font-size:10.5px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.08em;
}

.job-detail-card h3{
    margin:0 0 8px;
    color:#234D78;
    font-size:18px;
    line-height:1.3;
}

.job-detail-card p{
    margin:3px 0;
    color:#60758A;
    font-size:13px;
    line-height:1.55;
}

.job-detail-card p b{
    color:#344E65;
}

.job-fit-note{
    margin-top:16px;
    padding:13px 16px;
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    gap:9px;
    border-left:3px solid #148C3B;
    border-radius:8px;
    background:#F2FAF5;
}

.job-fit-note > i{
    margin-top:3px;
    color:#148C3B;
}

.job-fit-note strong{
    display:block;
    margin-bottom:2px;
    color:#29445B;
    font-size:13px;
    line-height:1.35;
}

.job-fit-note p{
    margin:0;
    color:#61778B;
    font-size:12.5px;
    line-height:1.5;
}


/* ==========================================================
07 — APPLICATION CTA
========================================================== */

.job-apply{
    padding:42px 0 46px;
    background:#FFFFFF;
}

.job-apply-card{
    padding:27px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    border-radius:14px;
    background:linear-gradient(110deg,#0B4F9C 0%,#0B5C88 60%,#126A73 100%);
    box-shadow:0 12px 28px rgba(11,79,156,.14);
}

.job-apply-card h2{
    margin:0 0 7px;
    color:#FFFFFF;
    font-size:25px;
    line-height:1.25;
}

.job-apply-card p{
    max-width:690px;
    margin:0;
    color:#D9E8F3;
    font-size:13.5px;
    line-height:1.55;
}

.job-apply-actions{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:205px;
}

.job-apply-button,
.job-apply-secondary{
    min-height:42px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:7px;
    font-size:12.5px;
    line-height:1.3;
    font-weight:700;
    text-align:center;
}

.job-apply-button{
    background:#148C3B;
    color:#FFFFFF;
    border:1px solid #43C27C;
}

.job-apply-button:hover{
    background:#107631;
    color:#FFFFFF;
}

.job-apply-secondary{
    border:1px solid rgba(255,255,255,.30);
    background:rgba(255,255,255,.08);
    color:#FFFFFF;
}

.job-apply-secondary:hover{
    background:rgba(255,255,255,.14);
    color:#FFFFFF;
}


/* ==========================================================
08 — JOB FOOTER CONTACT
========================================================== */

.job-footer-contact{
    margin:0 0 16px;
    padding:12px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:9px;
    background:rgba(255,255,255,.035);
}

.job-footer-contact a{
    min-height:54px;
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:9px;
    border-radius:7px;
    background:rgba(255,255,255,.045);
    color:#C8D8E8;
    font-size:11px;
    line-height:1.35;
}

.job-footer-contact a:hover{
    background:rgba(255,255,255,.09);
    color:#FFFFFF;
}

.job-footer-contact i{
    color:#76D99B;
}

.job-footer-contact b{
    display:block;
    margin-bottom:1px;
    color:#FFFFFF;
    font-size:11.5px;
}


/* ==========================================================
09 — RESPONSIVE
========================================================== */

@media(max-width:1050px){

    .job-hero-grid{
        grid-template-columns:minmax(0,1.1fr) minmax(290px,.7fr);
        gap:34px;
    }

    .job-hero h1{
        font-size:34px;
    }

    .job-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:820px){

    .job-hero-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .job-hero-visual{
        justify-content:flex-start;
    }

    .job-image-frame{
        max-width:470px;
    }

    .job-content-grid{
        grid-template-columns:1fr;
    }

    .job-side-card{
        order:2;
    }

    .job-responsibilities{
        order:1;
    }

    .job-apply-card{
        align-items:flex-start;
        flex-direction:column;
    }

    .job-apply-actions{
        width:100%;
        flex-direction:row;
        flex-wrap:wrap;
    }

    .job-apply-button,
    .job-apply-secondary{
        flex:1 1 220px;
    }

}

@media(max-width:650px){

    .job-breadcrumb .container{
        min-height:38px;
        font-size:11px;
    }

    .job-hero{
        padding:34px 0 34px;
    }

    .job-hero h1{
        font-size:29px;
        letter-spacing:-.35px;
    }

    .job-location-line{
        font-size:15px;
    }

    .job-intro{
        font-size:15px;
        line-height:1.65;
    }

    .job-summary{
        padding:36px 0 40px;
    }

    .job-section-intro h2{
        font-size:23px;
    }

    .job-summary-grid{
        grid-template-columns:1fr;
    }

    .job-highlight-row{
        grid-template-columns:1fr;
    }

    .job-content{
        padding:38px 0 40px;
    }

    .job-bottom-grid{
        grid-template-columns:1fr;
    }

    .job-apply{
        padding:34px 0 38px;
    }

    .job-apply-card{
        padding:22px;
    }

    .job-apply-card h2{
        font-size:21px;
    }

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

}

@media(max-width:430px){

    .job-hero-tags{
        display:grid;
        grid-template-columns:1fr;
    }

    .job-hero-tags span{
        width:100%;
    }

    .job-primary-cta{
        width:100%;
        justify-content:center;
    }

    .job-responsibility{
        grid-template-columns:32px minmax(0,1fr);
        padding:15px;
        gap:10px;
    }

    .job-responsibility h3{
        font-size:15px;
    }

    .job-responsibility p{
        font-size:13px;
    }

    .job-detail-card{
        padding:17px;
    }

}