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

.it-header{

    position:relative;

    width:100%;

    height:320px;

    overflow:hidden;

}

.it-header img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.it-header .overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(10,33,75,.92),
        rgba(10,33,75,.55),
        rgba(10,33,75,.15)
    );

}

.it-header h1{

    position:absolute;

    left:70px;

    bottom:120px;

    color:#fff;

    font-size:3rem;

    font-weight:800;

    text-transform:uppercase;

    line-height:1.2;

    z-index:2;

    text-shadow:0 3px 12px rgba(0,0,0,.35);

}

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

.it-content{

    background:#fff;

    padding:70px 0;

}

.it-container{

    max-width:1700px;

    padding:0 40px;

}

.it-card{

    background:transparent;

    border:none;

    box-shadow:none;

    padding:0;

}

/*====================================================
MODERN TABS
====================================================*/

.modern-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    border:none;

    margin-bottom:60px;

}

.modern-tabs .nav-link{

    border:none !important;

    background:#fff;

    color:#4A1F74;

    font-size:17px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    padding:15px 30px;

    position:relative;

    transition:.3s;

}

.modern-tabs .nav-link:hover{

    color:#F59E0B;

}

.modern-tabs .nav-link.active{

    color:#4A1F74;

    background:#fff;

}

.modern-tabs .nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

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

    width:65px;

    height:5px;

    background:linear-gradient(90deg,#4A1F74,#F59E0B);

    transition:.3s;

}

.modern-tabs .nav-link.active::after{

    transform:translateX(-50%) scaleX(1);

}



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

.about-l{

    font-size:17px;

    color:#333;

    line-height:1.9;

    text-align:justify;

    margin-bottom:20px;
	
	font-weight:500;
}

.about-l::after{

    content:"";

    display:block;

    clear:both;

}

/*------------------------------------
Main Heading
------------------------------------*/

.about-l h2{

    color:#4A1F74;

    font-size:2rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:10px;

}

/*------------------------------------
Sub Heading
------------------------------------*/

.about-l h3{

    color:#F59E0B;

    font-size:1.35rem;

    font-weight:700;

    text-transform:uppercase;

    margin:40px 0 18px;

}

/*------------------------------------
Paragraph
------------------------------------*/

.about-l p{

    text-align:justify;

    color:#222;

    margin-bottom:30px;

    line-height:2;

}

/*------------------------------------
Bold text
------------------------------------*/

.about-l strong{

    color:#4A1F74;

    font-weight:700;

}

/*====================================================
RIGHT IMAGE (L SHAPE)
====================================================*/

.about-photo{

    float:right;

    width:460px;

    margin:0 0 35px 45px;

}

.about-photo img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:8px;

    display:block;

    box-shadow:0 10px 28px rgba(0,0,0,.15);

}

/*====================================================
VISION
====================================================*/

.vision-box{

    margin-top:40px;

}

.vision-box h3{

    color:#F59E0B;

    margin-bottom:20px;

}

.vision-box p{

    margin-bottom:0;

}

/*====================================================
MISSION
====================================================*/

.mission-box{

    margin-top:45px;

}

.mission-box h3{

    color:#F59E0B;

    margin-bottom:18px;

}

.mission-box p{

    margin-bottom:18px;

}

.mission-box ul{

    margin:0;

    padding-left:28px;

}

.mission-box li{

    margin-bottom:18px;

    line-height:1.9;

    text-align:justify;

}

.mission-box li::marker{

    color:#4A1F74;

}

/*====================================================
FUNCTIONS & COMMITTEE
====================================================*/

.functions-section{

    color:#333;

    font-size:17px;

    line-height:2;

    font-weight:500;

}

.functions-section h2{

    color:#4A1F74;

    font-size:2rem;

    font-weight:700;

    margin-bottom:10px;

    text-transform:uppercase;

}

.functions-section h3{

    color:#F59E0B;

    font-size:1.35rem;

    font-weight:700;

    margin:40px 0 20px;

    text-transform:uppercase;

}

.functions-section p{

    text-align:justify;

    margin-bottom:22px;

    font-weight:500;

}

/*====================================================
CORE FUNCTIONS
====================================================*/

.function-grid{

    display:grid;

    grid-auto-flow:column;

    grid-template-rows:repeat(5,auto);

    column-gap:60px;

    row-gap:22px;

    margin:30px 0 45px;

}

.function-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.function-item span{

    min-width:36px;

    color:#4A1F74;

    font-weight:700;

    font-size:17px;

}

.function-item p{

    margin:0;

    font-weight:500;

    line-height:1.8;

}
/*====================================================
COMMITTEE TABLE
====================================================*/

.committee-table{

    overflow-x:auto;

    margin:35px 0;

}

.committee-table table{

    width:100%;

    min-width:900px;

    border-collapse:collapse;

}

.committee-table th{

    background:#4A1F74;

    color:#fff;

    padding:16px;

    text-align:left;

    font-size:15px;

    font-weight:700;

}

.committee-table td{

    padding:15px;

    border:1px solid #ececec;

    vertical-align:top;

    font-weight:500;

    line-height:1.8;

}

.committee-table tbody tr:nth-child(even){

    background:#fafafa;

}

.committee-note{

    margin-top:30px;

    font-style:italic;

    font-weight:500;

}

/*====================================================
STAFF
====================================================*/

.staff-section{

    font-size:17px;

    font-weight:500;

    color:#333;

    line-height:1.9;

}

.staff-section h2{

    color:#4A1F74;

    font-size:2rem;

    font-weight:700;

    margin-bottom:10px;

    text-transform:uppercase;

}

.staff-section h3{

    color:#F59E0B;

    font-size:1.35rem;

    font-weight:700;

    margin:40px 0 20px;

    text-transform:uppercase;

}

.staff-section p{

    text-align:justify;

    margin-bottom:25px;

}

/*====================================================
TABLE
====================================================*/

.staff-table{

    overflow-x:auto;

    margin:30px 0 45px;

}

.staff-table table{

    width:100%;

    border-collapse:collapse;

    min-width:900px;

}

.staff-table th{

    background:#4A1F74;

    color:#fff;

    padding:16px;

    text-align:left;

    font-weight:700;

}

.staff-table td{

    padding:16px;

    border:1px solid #ececec;

    vertical-align:top;

    font-weight:500;

    line-height:1.8;

}

.staff-table tbody tr:nth-child(even){

    background:#fafafa;

}



.commitment-text{

    margin-top:20px;

    font-style:italic;

}

/*====================================================
RESPONSIVE DESIGN
====================================================*/

/*==========================
Large Desktop
==========================*/

@media (max-width:1400px){

    .it-header{

        height:300px;

    }

    .it-header h1{

        left:60px;

        bottom:105px;

        font-size:2.8rem;

    }

    .it-container{

        padding:0 35px;

    }

}

/*==========================
Laptop
==========================*/

@media (max-width:1200px){

    .it-header{

        height:280px;

    }

    .it-header h1{

        left:50px;

        bottom:95px;

        font-size:2.5rem;

    }

    .it-content{

        padding:60px 0;

    }

    .it-container{

        padding:0 30px;

    }

    .modern-tabs{

        gap:14px;

        margin-bottom:50px;

    }

    .modern-tabs .nav-link{

        font-size:16px;

        padding:13px 24px;

    }

}

/*==========================
Tablet
==========================*/

@media (max-width:992px){

    .it-header{

        height:240px;

    }

    .it-header h1{

        left:35px;

        bottom:75px;

        font-size:2.1rem;

    }

    .it-content{

        padding:50px 0;

    }

    .it-container{

        padding:0 25px;

    }

    .modern-tabs{

        gap:12px;

        margin-bottom:40px;

    }

    .modern-tabs .nav-link{

        font-size:15px;

        padding:12px 22px;

    }

}

/*==========================
Mobile Landscape
==========================*/

@media (max-width:768px){

    .it-header{

        height:200px;

    }

    .it-header h1{

        left:25px;

        bottom:55px;

        font-size:1.8rem;

    }

    .it-content{

        padding:40px 0;

    }

    .it-container{

        padding:0 20px;

    }

    .modern-tabs{

        justify-content:flex-start;

        gap:10px;

        overflow-x:auto;

        overflow-y:hidden;

        flex-wrap:nowrap;

        padding-bottom:10px;

        scrollbar-width:none;

        -ms-overflow-style:none;

    }

    .modern-tabs::-webkit-scrollbar{

        display:none;

    }

    .modern-tabs .nav-link{

        white-space:nowrap;

        font-size:14px;

        padding:10px 18px;

    }

}

/*==========================
Mobile Portrait
==========================*/

@media (max-width:576px){

    .it-header{

        height:180px;

    }

    .it-header h1{

        left:20px;

        right:20px;

        bottom:45px;

        font-size:1.5rem;

        line-height:1.3;

    }

    .it-content{

        padding:35px 0;

    }

    .it-container{

        padding:0 15px;

    }

    .modern-tabs{

        gap:8px;

        margin-bottom:30px;

    }

    .modern-tabs .nav-link{

        font-size:13px;

        padding:10px 16px;

        letter-spacing:.3px;

    }

    .modern-tabs .nav-link::after{

        width:45px;

        height:4px;

        bottom:-6px;

    }

}

/*==========================
Extra Small Devices
==========================*/

@media (max-width:400px){

    .it-header{

        height:160px;

    }

    .it-header h1{

        font-size:1.3rem;

        bottom:35px;

    }

    .modern-tabs .nav-link{

        font-size:12px;

        padding:9px 14px;

    }

}

/*====================================================
DESKTOP (1600px)
====================================================*/

@media (max-width:1600px){

    .about-l{

        font-size:18px;

    }

    .about-l h2{

        font-size:44px;

    }

    .about-photo{

        width:430px;

    }

}

/*====================================================
LAPTOP
====================================================*/

@media (max-width:1200px){

    .about-l{

        font-size:17px;

        line-height:1.9;

    }

    .about-l h2{

        font-size:40px;

    }

    .about-l h3{

        font-size:28px;

    }

    .about-photo{

        width:380px;

        margin-left:35px;

    }

    .about-photo img{

        height:260px;

    }

}

/*====================================================
TABLET
====================================================*/

@media (max-width:992px){

    .about-photo{

        float:none;

        width:100%;

        margin:0 0 35px;

    }

    .about-photo img{

        height:380px;

    }

    .about-l{

        font-size:17px;

    }

    .about-l h2{

        font-size:36px;

    }

    .about-l h3{

        font-size:26px;

    }

}

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

@media (max-width:768px){

    .about-l{

        font-size:16px;

        line-height:1.85;

    }

    .about-l h2{

        font-size:32px;

        margin-bottom:28px;

    }

    .about-l h3{

        font-size:24px;

        margin-bottom:18px;

    }

    .about-photo img{

        height:260px;

    }

    .mission-box ul{

        padding-left:22px;

    }

}

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

@media (max-width:576px){

    .about-l{

        font-size:15px;

    }

    .about-l h2{

        font-size:28px;

    }

    .about-l h3{

        font-size:22px;

    }

    .about-photo img{

        height:220px;

        border-radius:6px;

    }

    .about-l p{

        margin-bottom:22px;

    }

    .mission-box li{

        margin-bottom:14px;

    }

}

@media(max-width:992px){

    .function-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .functions-section{

        font-size:16px;

    }

    .functions-section h2{

        font-size:32px;

    }

    .functions-section h3{

        font-size:24px;

    }

    .function-item{

        padding:18px;

    }

}

@media(max-width:576px){

    .functions-section h2{

        font-size:28px;

    }

    .functions-section h3{

        font-size:22px;

    }

    .function-item{

        gap:14px;

    }

    .function-item span{

        width:42px;

        height:42px;

        font-size:14px;

    }

}

@media(max-width:768px){

    .staff-section{

        font-size:16px;

    }

    .staff-section h2{

        font-size:32px;

    }

    .staff-section h3{

        font-size:24px;

    }

}

@media(max-width:576px){

    .staff-section h2{

        font-size:28px;

    }

    .staff-section h3{

        font-size:22px;

    }

}