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

.ward-section .ward-title{
    text-align:center !important;
    margin-bottom:40px !important;
    font-size:35px !important;
    font-family:"Barlow Condensed", sans-serif !important;
    font-weight:800 !important;
    color:#07296D;
}



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

/*.ward-section .candidate-grid{*/
/*    display:grid !important;*/
/*    grid-template-columns:repeat(4,250px) !important;*/
/*    gap:25px !important;*/
/*    justify-content:center !important;*/
/*    max-width:1200px !important;*/
/*    margin:0 auto !important;*/
/*}*/



/* =========================
CARD
========================= */

/*.ward-section .candidate-card{*/
/*    width:250px !important;*/
/*    text-align:center !important;*/
/*    cursor:pointer !important;*/
/*}*/



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

/*.ward-section .candidate-image{*/
/*    width:250px !important;*/
/*    height:auto !important;*/
/*    display:block !important;*/
/*    margin:0 auto !important;*/
/*    border-radius:6px !important;*/
/*}*/



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

.popup-content{
    display:none !important;
}

.candidate-card{
    cursor:pointer;
}
.candidate-card .popup-content{
display:none;
}

.candidate-image{
width:250px;
height:250px;
object-fit:cover;
display:block;
}

.candidate-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:25px !important;
    max-width:1100px;
    margin:0 auto;
}
.candidate-card{
    width:250px !important;
    text-align:center !important;
}


/* IMAGE */

.candidate-image{
    width:250px !important;
    height:auto;
    object-fit:cover;
    display:block;
    margin:0 auto;
}
/* =========================
POPUP OVERLAY
========================= */

.candidate-popup{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    background:rgba(0,0,0,0.7) !important;
    z-index:999999 !important;
    display:none !important;
    overflow-y:auto;
}



/* =========================
POPUP ACTIVE
========================= */

.candidate-popup.active{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
}



/* =========================
POPUP BOX
========================= */
/* POPUP LAYOUT */

.popup-layout{
    display:flex;
    gap:20px;
    align-items:flex-start;
}
.popup-inner{
    max-height:90vh;
    overflow-y:auto;
}

/* LEFT IMAGE */

.popup-left{
    flex:0 0 200px;
}

.popup-image{
    width:200px;
    height:200px;
    object-fit:cover;
    border-radius:6px;
}


/* RIGHT CONTENT */

.popup-right{
    flex:1;
}

.popup-body h3{
    font-family:"Barlow Condensed", sans-serif !important;
    font-weight:800 !important;
    font-size:35px;
    color:#07296D;
    margin-top:0;
}


/* MOBILE RESPONSIVE */

@media(max-width:600px){

.popup-layout{
flex-direction:column;
align-items:center;
text-align:center;
}

.popup-left{
flex:none;
}

}
/* POPUP IMAGE */

.popup-image{
    width:200px;
    height:200px;
    object-fit:cover;
    display:block;
    margin:0 auto 15px auto;
    border-radius:6px;
}
.popup-inner{
    background:#fff !important;
    width:90% !important;
    max-width:600px !important;
    padding:30px !important;
    border-radius:8px !important;
    position:relative !important;
}



/* =========================
CLOSE BUTTON
========================= */

.popup-close{
    position:absolute !important;
    top:10px !important;
    right:15px !important;
    font-size:28px !important;
    cursor:pointer !important;
}



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

.popup-body h3{
    margin-top:0 !important;
    font-size:24px !important;
}

.popup-body h4{
    margin-top:5px !important;
    font-size:18px !important;
    color:#666 !important;
}

.popup-body p{
    margin-top:15px !important;
    line-height:1.6 !important;
}



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

@media(max-width:1100px){

.ward-section .candidate-grid{
grid-template-columns:repeat(3,250px) !important;
}

}

@media(max-width:800px){

.ward-section .candidate-grid{
grid-template-columns:repeat(2,250px) !important;
}

}

@media(max-width:500px){

.ward-section .candidate-grid{
grid-template-columns:repeat(1,250px) !important;
}

}

@media(max-width:600px){

.popup-inner{
    max-height:85vh;
    overflow-y:auto;
    padding:20px;
}

}