body{
background:#8c8c8c;
font-family:Arial;
}


/* header */

.header-bar{
padding:20px 0;
}

.header-box{
background:#e6e6e6;
border-radius:10px;
padding:12px 30px;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:600;
}

.title{
font-size:18px;
}



/* main */

.main-section{
padding:20px 0;
}

.category-box{
background:#e1e1e1;
border-radius:10px;
padding:25px;
}

.category-title{
margin-bottom:20px;
font-weight:bold;
}



/* decision box */

.decision-box{
background:#8eb4e6;
padding:18px;
border-radius:8px;
font-weight:600;
position:relative;
cursor:pointer;
transition:0.3s;
}

.decision-box:hover{
transform:scale(1.05);
background:#6ea1df;
}



/* number badge */

.badge-number{
position:absolute;
top:-10px;
right:-10px;
background:#1e4c8f;
color:white;
width:28px;
height:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:bold;
}



/* footer */

.footer-bar{
padding:25px 0;
}

.footer-box{
background:#e6e6e6;
border-radius:10px;
padding:18px;
font-weight:600;
}



/* modal */

.modal-custom{
background:#12395f;
color:white;
padding:25px;
border-radius:10px;
}

.tag{
background:#ffc107;
padding:4px 10px;
border-radius:4px;
font-size:12px;
font-weight:bold;
display:inline-block;
margin-bottom:5px;
}

.info-box{
background:#8fb3d9;
padding:12px;
border-radius:6px;
margin-bottom:12px;
color:black;
}

.close-btn{
position:absolute;
right:15px;
top:10px;
background:#1e4c8f;
border:none;
color:white;
border-radius:50%;
width:30px;
height:30px;
}