/*====================================================
NOTICE PAGE
====================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

    background:#f6f8fc;

    color:#333;

    line-height:1.7;

}

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

.notice-header{

    position:relative;

    height:320px;

    overflow:hidden;

}

.notice-header img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.02);

}

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

}

.notice-header h1{

    position:absolute;

    left:70px;

    bottom:120px;

    transform:none;

    color:#fff;

    width:auto;

    max-width:700px;

    text-align:left;

    font-size:4rem;

    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
====================================================*/

.notice-content{

    position:relative;

    padding:80px 0;

    background:#f6f8fc;

    overflow:hidden;

}

.notice-content::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(18,58,120,.04) 1px, transparent 1px),

        linear-gradient(90deg, rgba(18,58,120,.04) 1px, transparent 1px);

    background-size:80px 80px;

    opacity:.5;

    z-index:0;

}

.notice-content > .container{

    position:relative;

    z-index:1;

}


/*.notice-content{

    position:relative;

    padding:80px 0;

    background:white;

    overflow:hidden;

}*/

/*====================================================
TITLE
====================================================*/

.page-title{

    text-align:center;

    color:#4A1F74;

    font-size:3.5rem;

    font-weight:800;

    margin-top:-30px;
	
	margin-bottom:10px;

}

.page-subtitle{

    text-align:center;

    color:#777;

    font-size:19px;
	
	font-weight:500;

    margin-top:-30px;
	
	margin-bottom:30px;

}

.line{

    width:200px;

    height:5px;

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

    border-radius:50px;

    margin:0 auto 40px;

}

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

/*====================================================
NOTICE SECTIONS
====================================================*/

.notice-section{

    margin-bottom:40px;

}

.notice-section h3{

    position:relative;

    display:inline-block;

    font-size:2rem;

    font-weight:700;

    color:#4A1F74;

    margin-bottom:30px;

    padding-bottom:10px;

}

.notice-section h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:200px;

    height:3px;
	
	

    background:#F59E0B;

}


/*====================================================
DIRECTORY GRID
====================================================*/

.notice-directory{

    display:grid;

    grid-template-columns:repeat(2,minmax(280px,1fr));

    border:1px solid #dbe4ef;

    border-radius:10px;

    overflow:hidden;

    background:#fff;

}

/*====================================================
DIRECTORY ITEMS
====================================================*/

.directory-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 28px;

    text-decoration:none;

    color:#4A1F74;

    border-right:1px solid #e5edf5;

    border-bottom:1px solid #e5edf5;

    transition:.3s ease;

}

.directory-item:nth-child(2n){

    border-right:none;

}

/* Remove bottom border from last row */

.notice-directory .directory-item:nth-last-child(-n+2){

    border-bottom:none;

}

/* If odd number of items */

.notice-directory .directory-item:last-child:nth-child(odd){

    grid-column:1 / span 2;

    border-right:none;

}

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

.directory-item>i{

    font-size:26px;

    color:#F59E0B;

    width:34px;

    text-align:center;

    transition:.3s;

}

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

.directory-item span{

    flex:1;

    font-size:18px;

    font-weight:600;

}

/*====================================================
ARROW
====================================================*/

.directory-item::after{

    content:"\2192";

    font-size:24px;
	
	font-weight:600;

    color:#2FA88A;

    transition:.3s;

}

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

.directory-item:hover{

    background:#f8fbff;

    color:#123a78;

}

.directory-item:hover>i{

    color:#2FA88A;

    transform:scale(1.1);

}

.directory-item:hover::after{

    color:#d4af37;

    transform:translateX(6px);

}

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

@media(max-width:768px){

    .notice-directory{

        grid-template-columns:1fr;

    }

    .directory-item{

        border-right:none;

    }

    .notice-directory .directory-item{

        border-bottom:1px solid #e5edf5;

    }

    .notice-directory .directory-item:last-child{

        border-bottom:none;

    }

    .notice-directory .directory-item:last-child:nth-child(odd){

        grid-column:auto;

    }

}

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

.recruitment-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.recruitment-table thead{

    background:#4A1F74;

    color:#fff;

}

.recruitment-table th{

    padding:18px 16px;

    font-size:15px;

    font-weight:700;

    text-align:left;

    white-space:nowrap;

}

.recruitment-table td{

    padding:18px 16px;

    border-bottom:1px solid #edf1f5;

    vertical-align:middle;

    font-size:15px;

    font-weight:600;

}

.recruitment-table tbody tr{

    transition:.3s;

}

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

    background:#fafbfd;

}

.recruitment-table tbody tr:hover{

    background:#eef6ff;

}

.table-responsive{

    overflow-x:auto;

}

/*====================================================
DOWNLOAD BUTTON
====================================================*/

.download-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#2FA88A;

    color:#fff;

    padding:8px 16px;

    border-radius:30px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.download-btn:hover{

    background:#F59E0B;

    color:#4A1F74;

}

.download-btn i{

    font-size:16px;

}


/*====================================================
General Notice
====================================================*/

.notice-list{

    border-top:3px solid #4A1F74;

    border-bottom:1px solid #d9dee5;

    background:#fff;

}

.notice-item{

    position:relative;

    display:grid;

    grid-template-columns:150px 1fr 60px;

    align-items:center;

    text-decoration:none;

    padding:18px 60px 18px 15px;

    border-bottom:1px solid #e6eaef;

    transition:all .35s ease;

    color:inherit;

}

.notice-item:last-child{

    border-bottom:none;

}

.notice-item:hover{

    background:#f7fbff;

}

.notice-item::after{

    content:"\2192";

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    font-size:24px;

    color:#2FA88A;

    transition:all .35s ease;

}

.notice-item:hover::after{

    color:#F59E0B;

    transform:translate(6px,-50%);

}

.notice-meta{

    font-weight:700;

    color:#555;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.notice-body{

    padding:0 20px;

    border-left:1px solid #d9dee5;

}

.notice-body h4{

    margin:0;

    color:#4A1F74;

    font-size:17px;

    font-weight:600;

    line-height:1.6;

    transition:all .35s ease;

}

.notice-item:hover .notice-body h4{

    color:#F59E0B;

}

.notice-icon{

    display:flex;

    justify-content:center;

    align-items:center;

}

.notice-icon i{

    color:#d32f2f;

    font-size:24px;

    transition:all .35s ease;

}

.notice-item:hover .notice-icon i{

    transform:scale(1.15);

    color:#b71c1c;

}

@media(max-width:768px){

    .notice-item{

        grid-template-columns:1fr;

        gap:10px;

        padding:18px 15px;

    }

    .notice-item::after{

        display:none;

    }

    .notice-body{

        border-left:none;

        padding:0;

    }

    .notice-icon{

        justify-content:flex-start;

    }

}