body{
font-family: Arial, sans-serif;
margin:0;
background:#f2f2f2;
}



.top-section{
display:flex;
flex-wrap:wrap;
gap:20px;
align-items:center;
}

.top-section img{
width:100%;
max-width:600px;
border-radius:10px;
}

.about{
flex:1;
min-width:280px;
}


.about h2{
margin-top:0;
}

.card{
background:white;
padding:20px;
margin:15px 0;
border-radius:10px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.show-btn{
background:#ff4747;
color:white;
border:none;
padding:12px 25px;
border-radius:6px;
cursor:pointer;
font-weight:bold;
}

.show-btn:hover{
background:#e63939;
}

/* Popup */

.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
justify-content:center;
align-items:center;
padding:15px;
z-index:1000;
}

.popup-content{
background:white;
padding:30px;
border-radius:12px;
max-width:400px;
width:100%;
text-align:center;
position:relative;
}

.coupon-box{
background:#ffd6d6;
padding:10px;
border:2px dashed #ff4747;
margin:15px 0;
font-weight:bold;
}

.code-box{
background:#eee;
padding:15px;
border-radius:8px;
margin-bottom:20px;
font-size:20px;
letter-spacing:2px;
}

.unlock-btn{
background:#ff4747;
color:white;
border:none;
padding:12px;
width:100%;
border-radius:6px;
cursor:pointer;
font-size:16px;
font-weight:bold;
}

.progress-circle{
width:150px;
height:150px;
border-radius:50%;
border:10px solid #ddd;
border-top:10px solid #ff4747;
margin:20px auto;
display:none;
animation:spin 1s linear infinite;
position:relative;
}

@keyframes spin{
100%{transform:rotate(360deg);}
}

.progress-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-weight:bold;
}

@media(max-width:768px){
.top-section{
flex-direction:column;
}
.card{
flex-direction:column;
align-items:flex-start;
}
.show-btn{
margin-top:10px;
width:100%;
}
}