/* ==========================================================
   MIDDLE-A
   Hero + Introduction
========================================================== */
.office-hero-content{

    max-width:600px;
    padding-top:36px;

}

.office-hero-content h1{

    font-size:28px;
    line-height:1.08;
    max-width:660px;
    margin-bottom:12px;

}

.office-hero-content p{

    max-width:600px;
    line-height:1.7;

}

.office-hero-image img{

    max-width:310px;

}

/* ==========================================================
B1
Roles We Recruit
Version 3.7 MASTER
========================================================== */


.roles-card-section{

    padding:16px 0 26px;

}



.roles-master-card{

    max-width:980px;

    margin:0;

    padding:30px 40px;

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:40px;

    background:#ffffff;

    border:1px solid #e9eef5;

    border-radius:16px;

    box-shadow:0 12px 32px rgba(11,79,156,.08);

}



.roles-columns-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}



.roles-column{

    display:flex;

    flex-direction:column;

    gap:6px;

}



.role-item{

    position:relative;

    padding-left:26px;

    font-size:18px;

    color:var(--blue);

    font-weight:600;

    line-height:1.5;

}



.role-item::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--green);

    font-weight:700;

}



.roles-image-card{

    display:flex;

    justify-content:center;

    align-items:center;

}



.roles-image-card img{

    width:100%;

    max-width:240px;

    height:auto;

    border-radius:14px;

}



/* ==========================================================
B1 MOBILE
Version 3.7
========================================================== */


@media(max-width:768px){


    .roles-master-card{

        grid-template-columns:1fr;

        padding:24px;

        gap:20px;

    }


    .roles-columns-wrapper{

        grid-template-columns:1fr;

        gap:6px;

    }


    .roles-column{

        gap:6px;

    }


    .role-item{

        font-size:16px;

    }


    .roles-image-card{

        margin-top:10px;

    }


    .roles-image-card img{

        max-width:200px;

    }


}

/* ==========================================================
B2
Qualities Employers Look For
Version 3.7 MASTER
========================================================== */


.qualities-section{

    padding:20px 0 18px;

}


/* MAIN CARD */

.qualities-master-card{

    max-width:980px;

    margin:0;

    background:#ffffff;

    border:1px solid #e9eef5;

    border-radius:16px;

    padding:30px 38px;

    display:grid;

    grid-template-columns:3.3fr 1fr;

    gap:30px;

    box-shadow:0 12px 32px rgba(11,79,156,.08);

}


/* TWO COLUMN POINTS */

.qualities-columns-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}


.qualities-column{

    display:flex;

    flex-direction:column;

    gap:6px;

}


/* POINTS */

.quality-item{

    position:relative;

    padding-left:26px;

    color:var(--blue);

    font-size:17px;

    font-weight:600;

    line-height:1.5;

}


.quality-item::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--green);

    font-weight:700;

}



/* INTRO TEXT */

.section-intro{

    max-width:850px;

    margin:14px 0 12px;

    text-align:left;

    line-height:1.7;

}



/* IMAGE */

.qualities-image-card{

    display:flex;

    justify-content:center;

    align-items:center;

}


.qualities-image-card img{

    width:100%;

    max-width:220px;

    height:auto;

    border-radius:14px;

}



/* MOBILE */

@media(max-width:768px){


    .qualities-master-card{

        grid-template-columns:1fr;

        padding:24px;

    }


    .qualities-columns-wrapper{

        grid-template-columns:1fr;

        gap:6px;

    }


    .qualities-image-card{

        margin-top:20px;

    }


    .qualities-image-card img{

        max-width:200px;

    }


}
/* ==========================================================
   B2 & B3 SECTION TITLES
   LEFT ALIGNMENT
   Version 3.7
========================================================== */


.qualities-section .section-title,
.support-section .section-title{

    text-align:left;

}


.qualities-section .section-intro,
.support-section .section-intro{

    text-align:left;

}

/* ==========================================================
B3
Recruitment Support Across Organisations
Version 3.7 MASTER
========================================================== */


.support-section{

    padding:20px 0 24px;

}



.support-master-card{

    max-width:980px;

    margin:0;

    background:#ffffff;

    border:1px solid #e9eef5;

    border-radius:16px;

    padding:30px 38px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    box-shadow:0 12px 32px rgba(11,79,156,.08);

}



.support-column{

    display:flex;

    flex-direction:column;

    gap:6px;

}



.support-item{

    position:relative;

    padding-left:26px;

    color:var(--blue);

    font-size:18px;

    font-weight:600;

    line-height:1.5;

}



.support-item::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--green);

    font-weight:700;

}



/* Highlight Primary Industry */

.featured-support{

    color:var(--green);

    font-weight:700;

}



/* ==========================================================
B3 MOBILE
Version 3.7
========================================================== */


@media(max-width:768px){


    .support-master-card{

        grid-template-columns:1fr;

        padding:24px;

        gap:18px;

    }


    .support-column{

        gap:6px;

    }


    .support-item{

        font-size:16px;

    }


}

/* ==========================================================
B4
DISHA Recruitment Framework
Version 3.7 MASTER
========================================================== */


.framework-section{

    padding:26px 0 34px;

}


.framework-card{

    background:#ffffff;

    border:1px solid #e7edf5;

    border-radius:20px;

    box-shadow:0 12px 32px rgba(11,79,156,.08);

    overflow:hidden;

}



.framework-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:20px;

    padding:26px;

    align-items:start;

}



/* ==========================================================
LEFT COLUMN
========================================================== */


.framework-left{

    display:flex;

    flex-direction:column;

}



.framework-row{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:8px 0;

    border-bottom:1px solid #edf2f7;

}



.framework-last{

    border-bottom:none;

}



/* ==========================================================
ICON
========================================================== */


.framework-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#eef5ff;

    color:var(--blue);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:20px;

}


.framework-icon i{

    line-height:1;

}



/* ==========================================================
CONTENT
========================================================== */


.framework-content{

    flex:1;

}



.framework-content h3{

    margin:0 0 5px;

    font-size:16px;

    font-weight:600;

    color:var(--blue);

    line-height:1.35;

}



.framework-content p{

    margin:0;

    font-size:14px;

    line-height:1.45;

    color:#5f6875;

}



/* ==========================================================
RIGHT IMAGE
========================================================== */


.framework-right{

    display:flex;

    justify-content:center;

    align-items:center;

}



.framework-image-card{

    background:transparent;

    border:none;

    padding:0;

    box-shadow:none;

}



.framework-image-card img{

    display:block;

    width:100%;

    max-width:350px;

    height:auto;

    border-radius:10px;

}



/* ==========================================================
HOVER EFFECT
========================================================== */


.framework-row:hover .framework-icon{

    background:var(--blue);

    color:#ffffff;

    transition:.30s ease;

}


.framework-row:hover h3{

    color:var(--green);

    transition:.30s ease;

}



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


@media(max-width:991px){


    .framework-layout{

        grid-template-columns:1fr;

        gap:28px;

    }


    .framework-right{

        justify-content:center;

    }

}



@media(max-width:767px){


    .framework-layout{

        padding:22px;

    }


    .framework-row{

        gap:10px;

        padding:8px 0;

    }


    .framework-icon{

        width:30px;

        height:30px;

        font-size:18px;

    }


    .framework-content h3{

        font-size:16px;

    }


    .framework-content p{

        font-size:14px;

    }


    .framework-image-card img{

        max-width:210px;

    }


}
/* ==========================================================
SECTION B5
FAQ
Version 3.7 MASTER
========================================================== */


.faq-section{

    padding:36px 0 40px;

}


.faq-wrapper{

    width:100%;

    max-width:100%;

}



.faq-item{

    width:100%;

    background:#ffffff;

    border:1px solid #E8EEF5;

    border-radius:12px;

    margin-bottom:14px;

    overflow:hidden;

    transition:.30s ease;

}



.faq-item:hover{

    border-color:#0B4F9C;

    box-shadow:0 10px 24px rgba(11,79,156,.10);

}



/* QUESTION */

.faq-item summary{

    list-style:none;

    cursor:pointer;

    position:relative;

    padding:18px 60px 18px 24px;

    font-size:17px;

    font-weight:600;

    line-height:1.5;

    color:var(--blue);

}



.faq-item summary::-webkit-details-marker{

    display:none;

}



.faq-item summary::after{

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    font-size:22px;

    font-weight:700;

    color:var(--green);

}



.faq-item[open] summary::after{

    content:"−";

}



/* ANSWER */

.faq-item p{

    margin:0;

    padding:0 24px 20px;

    font-size:15px;

    line-height:1.75;

    color:#5B6574;

}



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


@media(max-width:768px){


    .faq-section{

        padding:30px 0;

    }


    .faq-item summary{

        padding:16px 52px 16px 18px;

        font-size:16px;

        line-height:1.45;

    }


    .faq-item p{

        padding:0 18px 18px;

        font-size:14px;

        line-height:1.65;

    }


}


/* ==========================================================
SECTION C2
FOOTER
START
MASTER VERSION 3.7
========================================================== */

.footer37{

    background:#FFFFFF;

    padding:70px 0 25px;

}

.footer37 .container{

    max-width:1200px;

    margin:0 auto;

    padding:0 24px;

}

/* ==========================================================
SECTION C2A
FOOTER BRAND
START
========================================================== */

.footer37-brand{

    text-align:center;

    margin-bottom:45px;

}

.footer37-brand h2{

    margin:0;

    color:#0B4F9C;

    font-size:38px;

    font-weight:700;

}

.footer37-brand p{

    max-width:760px;

    margin:12px auto 0;

    color:#5F6B7A;

    line-height:1.70;

}

/* ==========================================================
SECTION C2A
FOOTER BRAND
END
========================================================== */


/* ==========================================================
SECTION C2B
FOOTER NAVIGATION
START
========================================================== */

.footer37-grid{

    display:grid;

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

    gap:50px;

    padding:35px 0;

    border-top:1px solid #E6EDF5;

    border-bottom:1px solid #E6EDF5;

}

.footer37-column h3{

    margin:0 0 18px;

    color:#0B4F9C;

    font-size:20px;

    font-weight:700;

}

.footer37-column ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer37-column li{

    margin:10px 0;

}

.footer37-column a{

    text-decoration:none;

    color:#5F6B7A;

    transition:.30s ease;

}

.footer37-column a:hover{

    color:#0B4F9C;

}

/* ==========================================================
SECTION C2B
FOOTER NAVIGATION
END
========================================================== */


/* ==========================================================
SECTION C2C
CONTACT RIBBON
START
========================================================== */

.footer37-ribbon{

    position:relative;

    overflow:hidden;

    max-width:1080px;

    margin:45px auto 30px;

    padding:48px 35px 35px;

    background:#F5FAFF;

    border:1px solid #D9E8F6;

    border-radius:24px;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

/* ==========================================================
SECTION C2D
RIBBON TOP STRIP
START
========================================================== */

.footer37-ribbon::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:6px;

    background:linear-gradient(
        90deg,
        #0B4F9C 0%,
        #2C7BE5 50%,
        #0B4F9C 100%
    );

    border-radius:24px 24px 0 0;

    box-shadow:0 2px 6px rgba(11,79,156,.18);

}

/* ==========================================================
SECTION C2D
RIBBON TOP STRIP
END
========================================================== */


/* ==========================================================
SECTION C2E
RIBBON TITLE
START
========================================================== */

.footer37-ribbon h3{

    margin:0 0 28px;

    text-align:center;

    font-family:'Poppins',sans-serif;

    font-size:26px;

    font-weight:700;

    color:#0B4F9C;

}

/* ==========================================================
SECTION C2E
RIBBON TITLE
END
========================================================== */