/* ==========================================================
DISHA Recruitment
BPO Recruitment Services CSS
Version 3.7 - Page Specific
==========================================================

Purpose
-------
Dedicated stylesheet for:
BPO Recruitment Services in Bangalore

Architecture
------------
• global.css   = site-wide foundation
• office.css   = shared Office Staff foundation
• this file   = BPO page-specific styling only

IMPORTANT
---------
All page-specific selectors are scoped under:
.bpo-recruitment-page

This prevents these rules from affecting Customer Support,
Accounts, Administrative or other Office Staff pages.
========================================================== */


/* ==========================================================
BPO PAGE
BODY SCOPE
START
========================================================== */

.bpo-recruitment-page{
    --bpo-blue:#0B4F9C;
    --bpo-green:#2E9E44;
    --bpo-border:#E5ECF4;
    --bpo-soft:#F7FAFD;
    --bpo-text:#5F6875;
}


/* ==========================================================
SECTION A
HERO
START
========================================================== */

.bpo-recruitment-page .office-hero{
    background:#F5F9FF;
    padding:28px 0 30px;
}

.bpo-recruitment-page .office-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    align-items:center;
    gap:48px;
}

.bpo-recruitment-page .office-hero-content{
    max-width:690px;
    padding-top:8px;
}

.bpo-recruitment-page .office-hero-content h1{
    margin:0 0 12px;
    color:var(--bpo-blue);
    font-family:'Poppins',Arial,sans-serif;
    font-size:30px;
    line-height:1.10;
    font-weight:700;
}

.bpo-recruitment-page .office-hero-content p{
    max-width:690px;
    margin:0 0 11px;
    color:var(--bpo-text);
    font-size:15px;
    line-height:1.62;
}

.bpo-recruitment-page .office-hero-content .hero-intro{
    font-size:15.5px;
}

.bpo-recruitment-page .office-hero-content strong{
    color:#3F4D5D;
    font-weight:700;
}

.bpo-recruitment-page .office-hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.bpo-recruitment-page .office-hero-image img{
    display:block;
    width:100%;
    max-width:330px;
    height:auto;
    border-radius:10px;
}

.bpo-recruitment-page .hero-btn{
    margin-top:3px;
}


/* ==========================================================
SECTION A
HERO
END
========================================================== */


/* ==========================================================
COMMON PAGE SECTION TITLES
START
========================================================== */

.bpo-recruitment-page .section-title{
    text-align:center;
    margin-bottom:20px;
}

.bpo-recruitment-page .section-title h2{
    margin:0;
    color:var(--bpo-blue);
    font-family:'Poppins',Arial,sans-serif;
    font-size:27px;
    line-height:1.22;
    font-weight:700;
}

.bpo-recruitment-page .section-title .title-line{
    width:64px;
    height:3px;
    margin:10px auto 0;
    background:var(--bpo-green);
    border-radius:10px;
}

.bpo-recruitment-page .section-intro{
    max-width:850px;
    margin:12px auto 0;
    color:var(--bpo-text);
    font-size:15px;
    line-height:1.65;
}


/* ==========================================================
COMMON PAGE SECTION TITLES
END
========================================================== */


/* ==========================================================
SECTION B2
BPO REQUIREMENTS CARD
START
========================================================== */

.bpo-recruitment-page .qualities-section{
    padding:28px 0 30px;
}

.bpo-recruitment-page .qualities-master-card{
    max-width:980px;
    margin:0 auto;
    padding:26px 32px;
    background:#fff;
    border:1px solid var(--bpo-border);
    border-radius:15px;
    box-shadow:0 10px 28px rgba(11,79,156,.07);
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(210px,.55fr);
    gap:28px;
    align-items:center;
}

.bpo-recruitment-page .qualities-columns-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
}

.bpo-recruitment-page .qualities-column{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.bpo-recruitment-page .quality-item{
    position:relative;
    padding-left:21px;
    color:var(--bpo-blue);
    font-size:14px;
    line-height:1.42;
    font-weight:600;
}

.bpo-recruitment-page .quality-item::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--bpo-green);
    font-weight:800;
}

.bpo-recruitment-page .qualities-image-card{
    display:flex;
    justify-content:center;
    align-items:center;
}

.bpo-recruitment-page .qualities-image-card img{
    display:block;
    width:100%;
    max-width:250px;
    height:auto;
    border-radius:9px;
}


/* ==========================================================
SECTION B2
BPO REQUIREMENTS CARD
END
========================================================== */


/* ==========================================================
SECTION B3
ORGANISATION / OPERATIONS SUPPORT
START
========================================================== */

.bpo-recruitment-page .support-section{
    padding:25px 0 30px;
}

.bpo-recruitment-page .support-master-card{
    max-width:980px;
    margin:0 auto;
    padding:25px 32px;
    background:#fff;
    border:1px solid var(--bpo-border);
    border-radius:15px;
    box-shadow:0 10px 28px rgba(11,79,156,.06);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
}

.bpo-recruitment-page .support-column{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.bpo-recruitment-page .support-item{
    position:relative;
    padding-left:21px;
    color:var(--bpo-blue);
    font-size:14px;
    line-height:1.42;
    font-weight:600;
}

.bpo-recruitment-page .support-item::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--bpo-green);
    font-weight:800;
}

.bpo-recruitment-page .support-item.featured-support{
    color:var(--bpo-green);
    font-weight:700;
}


/* ==========================================================
SECTION B3
ORGANISATION / OPERATIONS SUPPORT
END
========================================================== */


/* ==========================================================
SECTION B4
DISHA RECRUITMENT FRAMEWORK
START
========================================================== */

.bpo-recruitment-page .framework-section{
    padding:28px 0 34px;
}

.bpo-recruitment-page .framework-card{
    max-width:1000px;
    margin:0 auto;
    padding:22px 28px;
    background:#fff;
    border:1px solid var(--bpo-border);
    border-radius:15px;
    box-shadow:0 12px 30px rgba(11,79,156,.08);
}

.bpo-recruitment-page .framework-layout{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);
    gap:28px;
    align-items:center;
}

.bpo-recruitment-page .framework-left{
    min-width:0;
}

.bpo-recruitment-page .framework-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid #EDF2F7;
}

.bpo-recruitment-page .framework-row.framework-last{
    border-bottom:none;
}

.bpo-recruitment-page .framework-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#EEF5FF;
    color:var(--bpo-blue);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:15px;
}

.bpo-recruitment-page .framework-icon i{
    line-height:1;
}

.bpo-recruitment-page .framework-content{
    flex:1;
}

.bpo-recruitment-page .framework-content h3{
    margin:0 0 3px;
    color:var(--bpo-blue);
    font-family:'Poppins',Arial,sans-serif;
    font-size:15px;
    line-height:1.3;
    font-weight:600;
}

.bpo-recruitment-page .framework-content p{
    margin:0;
    color:var(--bpo-text);
    font-size:13px;
    line-height:1.42;
}

.bpo-recruitment-page .framework-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.bpo-recruitment-page .framework-image-card{
    background:transparent;
    border:0;
    padding:0;
    box-shadow:none;
}

.bpo-recruitment-page .framework-image-card img{
    display:block;
    width:100%;
    max-width:300px;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:contain;
    border-radius:9px;
}

.bpo-recruitment-page .framework-row:hover .framework-icon{
    background:var(--bpo-blue);
    color:#fff;
    transition:.25s ease;
}

.bpo-recruitment-page .framework-row:hover .framework-content h3{
    color:var(--bpo-green);
    transition:.25s ease;
}


/* ==========================================================
SECTION B4
DISHA RECRUITMENT FRAMEWORK
END
========================================================== */


/* ==========================================================
SECTION B5
FAQ
START
========================================================== */

.bpo-recruitment-page .faq-section{
    padding:38px 0 40px;
}

.bpo-recruitment-page .faq-header{
    text-align:center;
    margin-bottom:22px;
}

.bpo-recruitment-page .faq-header .section-intro{
    max-width:820px;
    margin:12px auto 0;
    text-align:center;
}

.bpo-recruitment-page .faq-wrapper{
    max-width:1080px;
    margin:0 auto;
}

.bpo-recruitment-page .faq-item{
    background:#fff;
    border:1px solid #E8EEF5;
    border-radius:11px;
    margin-bottom:10px;
    overflow:hidden;
    transition:.25s ease;
}

.bpo-recruitment-page .faq-item:hover{
    border-color:var(--bpo-blue);
    box-shadow:0 8px 20px rgba(11,79,156,.08);
}

.bpo-recruitment-page .faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:16px 22px;
    padding-right:55px;
    position:relative;
    color:var(--bpo-blue);
    font-size:15px;
    line-height:1.4;
    font-weight:600;
}

.bpo-recruitment-page .faq-item summary::-webkit-details-marker{
    display:none;
}

.bpo-recruitment-page .faq-item summary::after{
    content:"+";
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    color:var(--bpo-green);
    font-size:20px;
    font-weight:700;
}

.bpo-recruitment-page .faq-item[open] summary::after{
    content:"−";
}

.bpo-recruitment-page .faq-item p{
    margin:0;
    padding:0 22px 18px;
    color:#5B6574;
    font-size:14px;
    line-height:1.65;
}


/* ==========================================================
SECTION B5
FAQ
END
========================================================== */


/* ==========================================================
PAGE CTA HELPERS
START
========================================================== */

.bpo-recruitment-page .final-cta{
    padding:50px 0;
    background:#F7F9FC;
    text-align:center;
}

.bpo-recruitment-page .final-cta h2{
    margin:0 0 12px;
    color:var(--bpo-blue);
    font-size:32px;
}

.bpo-recruitment-page .final-cta p{
    max-width:760px;
    margin:0 auto;
    color:var(--bpo-text);
    line-height:1.7;
}

.bpo-recruitment-page .cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    margin-top:25px;
}


/* ==========================================================
PAGE CTA HELPERS
END
========================================================== */


/* ==========================================================
FOOTER HELPERS
START
==========================================================

Footer typography/layout remains controlled by global.css.
These rules only prevent accidental list/image inheritance
on this page.

========================================================== */

.bpo-recruitment-page footer{
    margin-top:0;
}

.bpo-recruitment-page footer ul{
    list-style:none;
    margin:0;
    padding:0;
}

.bpo-recruitment-page footer li{
    margin-bottom:10px;
}

.bpo-recruitment-page footer a{
    text-decoration:none;
}

.bpo-recruitment-page footer img{
    max-width:100%;
    height:auto;
}


/* ==========================================================
FOOTER HELPERS
END
========================================================== */


/* ==========================================================
RESPONSIVE
TABLET
START
========================================================== */

@media (max-width:991px){

    .bpo-recruitment-page .office-hero-grid{
        grid-template-columns:1fr;
        gap:25px;
        text-align:center;
    }

    .bpo-recruitment-page .office-hero-content{
        max-width:760px;
        margin:0 auto;
    }

    .bpo-recruitment-page .office-hero-image{
        justify-content:center;
    }

    .bpo-recruitment-page .qualities-master-card{
        grid-template-columns:1fr;
    }

    .bpo-recruitment-page .qualities-image-card{
        order:2;
    }

    .bpo-recruitment-page .support-master-card{
        grid-template-columns:1fr 1fr;
    }

    .bpo-recruitment-page .framework-layout{
        grid-template-columns:1fr;
        gap:24px;
    }

    .bpo-recruitment-page .framework-right{
        justify-content:center;
    }

}


/* ==========================================================
RESPONSIVE
TABLET
END
========================================================== */


/* ==========================================================
RESPONSIVE
MOBILE
START
========================================================== */

@media (max-width:767px){

    .bpo-recruitment-page .office-hero{
        padding:24px 0 28px;
    }

    .bpo-recruitment-page .office-hero-content h1{
        font-size:26px;
    }

    .bpo-recruitment-page .office-hero-content p{
        font-size:14px;
        line-height:1.58;
    }

    .bpo-recruitment-page .office-hero-image img{
        max-width:250px;
    }

    .bpo-recruitment-page .section-title h2{
        font-size:24px;
    }

    .bpo-recruitment-page .section-intro{
        font-size:14px;
    }

    .bpo-recruitment-page .qualities-section,
    .bpo-recruitment-page .support-section,
    .bpo-recruitment-page .framework-section{
        padding:24px 0 28px;
    }

    .bpo-recruitment-page .qualities-master-card{
        padding:22px;
    }

    .bpo-recruitment-page .qualities-columns-wrapper{
        grid-template-columns:1fr;
        gap:7px;
    }

    .bpo-recruitment-page .support-master-card{
        grid-template-columns:1fr;
        padding:22px;
    }

    .bpo-recruitment-page .quality-item,
    .bpo-recruitment-page .support-item{
        font-size:14px;
    }

    .bpo-recruitment-page .framework-card{
        padding:18px;
    }

    .bpo-recruitment-page .framework-layout{
        padding:0;
    }

    .bpo-recruitment-page .framework-row{
        gap:9px;
        padding:8px 0;
    }

    .bpo-recruitment-page .framework-icon{
        width:30px;
        height:30px;
        font-size:14px;
    }

    .bpo-recruitment-page .framework-content h3{
        font-size:14px;
    }

    .bpo-recruitment-page .framework-content p{
        font-size:13px;
    }

    .bpo-recruitment-page .framework-image-card img{
        max-width:230px;
    }

    .bpo-recruitment-page .faq-section{
        padding:32px 0;
    }

    .bpo-recruitment-page .faq-item summary{
        padding:15px 20px;
        padding-right:48px;
        font-size:14px;
    }

    .bpo-recruitment-page .faq-item p{
        padding:0 20px 17px;
        font-size:13.5px;
    }

    .bpo-recruitment-page .final-cta{
        padding:42px 0;
    }

    .bpo-recruitment-page .final-cta h2{
        font-size:27px;
    }

}


/* ==========================================================
RESPONSIVE
MOBILE
END
========================================================== */


/* ==========================================================
PRINT / REDUCED MOTION
START
========================================================== */

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

    .bpo-recruitment-page *{
        transition:none !important;
        animation:none !important;
        scroll-behavior:auto !important;
    }

}

@media print{

    .bpo-recruitment-page .site-header,
    .bpo-recruitment-page .final-cta,
    .bpo-recruitment-page footer{
        display:none !important;
    }

    .bpo-recruitment-page section{
        break-inside:avoid;
    }

}


/* ==========================================================
PRINT / REDUCED MOTION
END
========================================================== */

/* ==========================================================
END OF BPO RECRUITMENT SERVICES CSS
========================================================== */