.hj-quiz-app{
    max-width:800px;
    margin:30px auto;
    font-family:'Montserrat',sans-serif;
}

.hj-quiz-home,
.hj-quiz-box,
.hj-result-box{
    background:#fff;
    border-radius:24px;
    padding:30px;
    box-shadow:0 10px 40px rgba(0,0,0,.1);
}

.hj-quiz-home{
    text-align:center;
}

.hj-quiz-home h3{
    font-size:30px;
    margin-bottom:25px;
    color:#1e293b;
}

/* Buttons */

.hj-start-btn,
.hj-next-btn,
.hj-skip-btn,
.hj-restart-btn,
.hj-whatsapp-btn{
    border:none;
    cursor:pointer;
    padding:14px 28px;
    border-radius:50px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.hj-start-btn,
.hj-next-btn,
.hj-restart-btn{
    background:linear-gradient(90deg,#2563eb,#7c3aed);
}

.hj-skip-btn{
    background:#f59e0b;
}

.hj-whatsapp-btn{
    background:#22c55e;
}

.hj-start-btn:hover,
.hj-next-btn:hover,
.hj-skip-btn:hover,
.hj-restart-btn:hover,
.hj-whatsapp-btn:hover{
    transform:translateY(-2px);
}

/* Question */

.hj-question-number{
    font-size:15px;
    color:#64748b;
    margin-bottom:15px;
}

.hj-progress{
    width:100%;
    height:10px;
    background:#e2e8f0;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:25px;
}

.hj-progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    transition:.3s;
}

.hj-question{
    font-size:24px;
    line-height:1.7;
    color:#0f172a;
    margin-bottom:25px;
    font-weight:700;
}

/* Options */

.hj-options{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.hj-option{
    padding:18px;
    border:2px solid #e2e8f0;
    border-radius:18px;
    cursor:pointer;
    transition:.3s;
    font-size:17px;
    background:#fff;
}

.hj-option:hover{
    border-color:#2563eb;
    background:#eff6ff;
}

.hj-option.correct{
    background:#22c55e;
    color:#fff;
    border-color:#22c55e;
}

.hj-option.wrong{
    background:#ef4444;
    color:#fff;
    border-color:#ef4444;
}

/* Buttons Area */

.hj-actions{
    margin-top:25px;
    display:flex;
    gap:15px;
}

/* Result */

.hj-result-box{
    text-align:center;
}

.hj-result-box h2{
    font-size:38px;
    color:#2563eb;
    margin-bottom:25px;
}

.hj-score{
    font-size:22px;
    color:#1e293b;
    margin-bottom:30px;
    line-height:1.8;
}
.hj-stats{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.hj-quiz-time{
display:flex;
align-items:center;
gap:12px;
}

.hj-remaining-time{
width:60px;
height:60px;
line-height:56px;
text-align:center;
border-radius:50%;
border:3px solid #2563eb;
font-size:22px;
font-weight:700;
color:#2563eb;
}

.hj-remaining-time.less-time{
border-color:#ef4444;
color:#ef4444;
}

.hj-time-up-text{
display:none;
color:#ef4444;
font-weight:700;
}

.hj-time-up-text.show{
display:block;
}

.hj-score-board{
font-size:20px;
font-weight:700;
}

.hj-question-box{
position:relative;
padding-top:30px;
}

.hj-current-question-num{
width:60px;
height:60px;
line-height:60px;
border-radius:50%;
background:linear-gradient(90deg,#2563eb,#7c3aed);
color:#fff;
text-align:center;
font-weight:700;
margin:auto auto 20px;
}

/* Mobile */

@media(max-width:768px){

.hj-quiz-home,
.hj-quiz-box,
.hj-result-box{
    padding:20px;
}

.hj-question{
    font-size:18px;
}

.hj-option{
    font-size:15px;
    padding:15px;
}

.hj-actions{
    flex-direction:column;
}

.hj-start-btn,
.hj-next-btn,
.hj-skip-btn,
.hj-restart-btn,
.hj-whatsapp-btn{
    width:100%;
}

.hj-result-box h2{
    font-size:28px;
}

.hj-score{
    font-size:18px;
}

}