body{
    margin:0;
    padding:0;
    font-family:Arial,sans-serif;
}

/* Homepage */

.hero{
    position:relative;
    width:100%;
    height:100vh;
    background-image:url('images/desktop-hero.png');
    background-size:cover;
    background-position:center;
    cursor:pointer;
}


.hero h1{
    color:white;
    font-size:48px;
}

.hero p{
    color:white;
    font-size:28px;
}

@media(max-width:768px){

.hero{
background-image:url('images/mobile-hero.png');
background-size:cover;
background-position:center;
}

.start-btn{
bottom:70px;
font-size:18px;
padding:14px 24px;
}

}
/* Test Page */

.test-container{
width:80%;
max-width:900px;
margin:50px auto;
text-align:left;
}

.progress-bar{
width:100%;
height:15px;
background:#ddd;
border-radius:20px;
overflow:hidden;
margin-bottom:30px;
}

.progress{
width:2%;
height:100%;
background:#2563eb;
}

.question-box{
background:white;
padding:20px;
border-radius:15px;
box-shadow:0 0 15px rgba(0,0,0,0.1);
}
#question{
font-size:30px;
color:#222;
margin-bottom:30px;
}

.option-btn{
display:block;
width:100%;
padding:12px;
margin:10px 0;
font-size:18px;
background:white;
color:#222;
border:2px solid #ddd;
border-radius:12px;
cursor:pointer;
transition:0.3s;
}

.option-btn:hover{
background:#2563eb;
color:white;
border-color:#2563eb;
}

.next-btn{
margin-top:15px;
padding:10px 25px;
font-size:16px;
font-weight:bold;
background:#2563eb;
color:white;
border:none;
border-radius:10px;
cursor:pointer;
}

.result-card{
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 0 15px rgba(0,0,0,0.1);
text-align:center;
}

.result-card h2{
color:#2563eb;
margin-bottom:25px;
}

.result-card h3{
margin:15px 0;
color:#222;
}

.result-card p{
color:#555;
margin-top:25px;
font-size:18px;
}

.premium-btn{
  width:100%;
  background:linear-gradient(135deg,#ff9800,#ff5722);
  color:white;
  border:none;
  padding:16px;
  margin-top:20px;
  font-size:18px;
  font-weight:700;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.premium-btn:hover{
  transform:scale(1.02);
}

.hero{
position:relative;
}