/* =========================
   QUIZ PAGE
========================= */

.quiz-page{
padding:100px 0 70px;
}

.container{
width:min(1320px,94%);
margin:auto;
}


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

.quiz-page-head{

display:flex;
justify-content:space-between;
align-items:center;

gap:30px;

padding:28px 30px;

border-radius:28px;

background:
linear-gradient(
135deg,
rgba(15,25,45,.96),
rgba(10,20,40,.75)
);

border:
1px solid rgba(255,255,255,.06);

margin-bottom:40px;

}


.quiz-head-left{
flex:1;
}


.quiz-label{

color:#ff6b00;

font-size:10px;

letter-spacing:5px;

text-transform:uppercase;

margin-bottom:12px;

}


.quiz-page-head h1{

font-size:30px;

margin-bottom:10px;

font-weight:800;

}


.quiz-sub{

font-size:14px;

line-height:1.8;

max-width:480px;

color:#aeb9c9;

}


/* right progress */

.quiz-progress-wrap{

width:320px;

padding:18px;

border-radius:16px;

background:#15233e;

border:
1px solid rgba(255,255,255,.05);

flex-shrink:0;

}


.quiz-progress-text{

display:flex;

justify-content:space-between;

font-size:12px;

margin-bottom:10px;

}


.progress{

height:10px;

border-radius:50px;

background:#1b2c4a;

overflow:hidden;

}


.progress-fill{

height:100%;

border-radius:50px;

background:
linear-gradient(
90deg,
#ff6b00,
#ffb347
);

}



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

.quiz-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(320px,1fr)
);

gap:24px;

}



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

.quiz-card{

padding:28px;

min-height:220px;

border-radius:26px;

display:flex;

flex-direction:column;

justify-content:space-between;

cursor:pointer;

transition:.35s;

background:
linear-gradient(
135deg,
rgba(18,28,48,.96),
rgba(25,38,64,.92)
);

border:
1px solid rgba(255,255,255,.05);

}


.quiz-card:hover{

transform:
translateY(-8px);

box-shadow:
0 25px 50px
rgba(255,115,0,.18);

}


.quiz-badge{

display:inline-flex;

padding:8px 14px;

border-radius:50px;

background:#ff6b00;

font-size:11px;

font-weight:700;

margin-bottom:20px;

}


.quiz-card h2{

font-size:28px;

margin-bottom:12px;

}


.quiz-card p{

font-size:14px;

color:#b2bfd2;

margin-bottom:25px;

}


.quiz-card button{

width:max-content;

padding:13px 24px;

border:none;

border-radius:12px;

background:#ff6b00;

color:white;

font-weight:700;

cursor:pointer;

}



/* =========================
ACTIVE QUIZ
========================= */

.quiz-layout{

width:100%;

max-width:760px;

margin:auto;

}


.question-box{

height:560px;

padding:24px;

display:flex;

flex-direction:column;

overflow:hidden;

border-radius:24px;

background:
linear-gradient(
135deg,
rgba(17,27,45,.95),
rgba(25,38,64,.92)
);

border:
1px solid rgba(255,255,255,.05);

}


.quiz-title{

font-size:14px;

color:#c5cfdd;

margin-bottom:10px;

}


.question-number{

font-size:10px;

letter-spacing:3px;

color:#ff6b00;

margin-bottom:14px;

}


.question-text{

min-height:72px;

font-size:22px;

line-height:1.5;

margin-bottom:20px;

}


.options-wrap{

flex:1;

display:grid;

gap:12px;

overflow:auto;

padding-right:5px;

}


.option-btn{

display:flex;

align-items:center;

gap:14px;

padding:14px;

min-height:58px;

border:none;

border-radius:14px;

background:#172744;

color:white;

cursor:pointer;

transition:.3s;

}


.option-btn:hover{

background:#21375e;

}


.option-btn.selected{

background:#ff6b00;

border:1px solid #ffb347;

transform:scale(1.02);

}


.option-badge{

width:36px;
height:36px;

border-radius:50%;

display:flex;

justify-content:center;
align-items:center;

background:#ff6b00;

font-weight:700;

flex-shrink:0;

}


.quiz-actions{

display:flex;

justify-content:space-between;

padding-top:15px;

margin-top:auto;

}


.skip-btn,
.nav-btn{

padding:12px 22px;

border:none;

border-radius:12px;

background:#ff6b00;

color:white;

font-weight:700;

cursor:pointer;

}

/* RESULT BOX */

.lead-box{

max-width:620px;

margin:60px auto;

padding:40px;

border-radius:28px;

text-align:center;

background:
linear-gradient(
135deg,
rgba(18,28,48,.96),
rgba(25,38,64,.92)
);

border:
1px solid rgba(255,255,255,.06);

box-shadow:
0 25px 70px
rgba(0,0,0,.35);

}


.lead-icon{

font-size:40px;

margin-bottom:10px;

}


.lead-box h1{

font-size:42px;

margin-bottom:10px;

}


.lead-box p{

color:#b6c1d2;

line-height:1.7;

margin-bottom:28px;

}


.lead-box input{

width:100%;

padding:16px;

margin-bottom:16px;

border:none;

outline:none;

border-radius:14px;

background:#172744;

color:white;

font-size:15px;

}


.result-btn{

width:100%;

padding:16px;

border:none;

border-radius:14px;

background:
linear-gradient(
90deg,
#ff6b00,
#ff9d2f
);

font-weight:700;

font-size:15px;

cursor:pointer;

color:white;

}



/* =========================
RESULT
========================= */

.lead-box{

max-width:550px;

margin:50px auto;

padding:35px;

border-radius:24px;

text-align:center;

background:
linear-gradient(
135deg,
rgba(17,27,45,.95),
rgba(25,38,64,.92)
);

}


.lead-box input{

width:100%;

padding:14px;

margin-bottom:14px;

border:none;

border-radius:12px;

background:#182742;

color:white;

}



/* =========================
MOBILE
========================= */

@media(max-width:768px){

.quiz-page-head{

flex-direction:column;

align-items:stretch;

}

.quiz-progress-wrap{

width:100%;

}

.question-box{

height:auto;
min-height:520px;

}

}