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

.intro-header{

    position:relative;
    width:100%;
    height:320px;
    overflow:hidden;

}

.intro-header img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.intro-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)
    );

}

.intro-header h1{

    position:absolute;

    left:70px;

    bottom:120px;

    transform:none;

    color:#fff;

    width:auto;

    max-width:700px;

    text-align:left;

    font-size:3rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.5px;

    line-height:1.2;

    z-index:5;

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

}

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

.intro-content{

    background:#fff;
    padding:90px 0 70px;

}

.boc-container{

    max-width:1700px;
    margin:auto;
    padding:0 40px;

}

.intro-card{

    font-size:17px;
    color:#333;
    line-height:1.9;
    font-weight:500;

}

.intro-card::after{

    content:"";
    display:block;
    clear:both;

}

/*====================================================
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:14px;

    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);

}

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

.tab-content{

    background:#fff;

}

.tab-pane{

    animation:govFade .35s ease;

}

@keyframes govFade{

    from{

        opacity:0;
        transform:translateY(8px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*====================================================
HEADING
====================================================*/

.council-title-wrap{

    margin-bottom:35px;

}

.council-heading{

    margin:0;
    color:#4A1F74;
    font-size:2rem;
    font-weight:700;
    text-transform:uppercase;
    position:relative;

}

.council-line{

    width:100px;
    height:5px;
    margin-top:12px;
    background:linear-gradient(90deg,#4A1F74,#F59E0B);
    border-radius:10px;

}

/*====================================================
TEXT
====================================================*/

.intro-card .tab-pane > p{

    color:#222;
    line-height:2;
    margin-bottom:30px;
    text-align:justify;
    font-weight:500;

}

.intro-card strong{

    color:#4A1F74;
    font-weight:700;

}

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

.council-table-wrapper{

    overflow-x:auto;

    margin:35px 0;

}

.council-table{

    width:100%;

    border-collapse:collapse;

    min-width:900px;

}

.council-table th{

    background:#4A1F74;

    color:#fff;

    padding:16px;

    text-align:left;

    font-weight:700;

}

.council-table td{

    padding:16px;

    border:1px solid #ececec;

    vertical-align:top;

    line-height:1.8;

    color:#222;

    font-weight:500;

}

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

    background:#fafafa;

}

.council-table .serial-column{

    width:90px;

}

.council-table .position-column{

    width:230px;

}

/*====================================================
POSITION BADGES
====================================================*/

.position-badge{

    display:inline-block;

    padding:6px 16px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    line-height:1.5;

    white-space:nowrap;

}

.position-badge.chairman{

    background:#4A1F74;

    color:#fff;

}

.position-badge.secretary{

    background:#F59E0B;

    color:#fff;

}

/*====================================================
NOTE BOX
====================================================*/

.council-note{

    background:#fff;

    border-left:5px solid #F59E0B;

    padding:25px;

    margin:30px 0;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    color:#222;

    line-height:1.9;

    text-align:justify;

    font-weight:500;

}

.council-note strong{

    color:#4A1F74;

    font-weight:700;

}

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

@media(max-width:992px){

    .intro-header{

        height:260px;

    }

    .intro-header h1{

        left:40px;
        bottom:45px;
        font-size:2.4rem;

    }

    .intro-content{

        padding:70px 0 50px;

    }

}

@media(max-width:768px){

    .intro-header{

        height:220px;

    }

    .intro-header h1{

        left:25px;
        right:25px;
        bottom:30px;
        font-size:1.9rem;

    }

    .intro-content{

        padding:55px 0 40px;

    }

    .boc-container{

        padding:0 20px;

    }

    .intro-card{

        font-size:16px;

    }

    .council-heading{

        font-size:1.75rem;

    }

    .modern-tabs{

        justify-content:flex-start;

        flex-wrap:nowrap;

        overflow-x:auto;

        gap:10px;

        padding-bottom:8px;

        scrollbar-width:none;

    }

    .modern-tabs::-webkit-scrollbar{

        display:none;

    }

    .modern-tabs .nav-link{

        white-space:nowrap;

        padding:12px 22px;

        font-size:14px;

    }

    .council-table{

        min-width:720px;

    }

    .council-table th,
    .council-table td{

        padding:12px;

    }

}

@media(max-width:576px){

    .intro-header{

        height:180px;

    }

    .intro-header h1{

        font-size:1.5rem;

    }

}