/* NAVBAR CSS full */
.navbar {
  display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:#004d40; position:relative;
}
.logo {color:#00c897; font-size:22px; font-weight:bold;}
.nav-links {list-style:none; display:flex; gap:10px;}
.nav-links li a {color:#fff; text-decoration:none; padding:10px 15px; font-weight:600;}
.nav-links li a.active {border-bottom:2px solid #ffeb3b;}
.social-icons {display:flex; gap:10px;}
.social-icons img {width:30px; height:30px;}
#menu-toggle {position:absolute; opacity:0; width:0; height:0; pointer-events:none;}
.menu-icon {display:none; font-size:28px; color:#fff; cursor:pointer;}


/* RESPONSIVE */
@media(max-width:992px){
  .navbar {flex-direction:column; align-items:center;}
  .logo {margin-bottom:10px; text-align:center;}
  .menu-icon {display:block; margin-bottom:10px; text-align:center;}
  .nav-links {display:none; flex-direction:column; width:100%; text-align:center;}
  #menu-toggle:checked + .menu-icon + .nav-links {display:flex;}
  .nav-links li {margin:5px 0;}
  .social-icons {justify-content:center; margin-top:10px;}

  
}


/* NAVBAR CSS full END */

/* FAQ */
.faq-section{
display:flex;
justify-content:space-around;
align-items:center;
padding:50px 20px;
flex-wrap:wrap;
}

.faq-box{width:30%;min-width:280px;}

.question{
position:relative;
background:#f3e6ff;
margin:12px 0;
padding:12px;
border-radius:10px;
cursor:pointer;
transition:.3s;
}

.question:hover{
background:#8000ff;
color:white;
transform:scale(1.05);
}

.answer-float{
position:absolute;
bottom:115%;
left:50%;
transform:translateX(-50%);
background:rgba(75,0,130,0.95);
backdrop-filter:blur(8px);
color:white;
padding:15px;
border-radius:15px;
width:250px;
font-size:14px;
display:none;
z-index:99;
box-shadow:0 15px 35px rgba(0,0,0,0.4);
}

.question:hover .answer-float{
display:block;
}

/* Circle */
.ayat-circle{
width:350px;height:350px;
background:radial-gradient(circle,#4b0082,#2d004d);
border-radius:50%;
position:relative;
display:flex;
justify-content:center;
align-items:center;
margin:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

.circle-svg{position:absolute;width:100%;height:100%;}

.arabic-curve{fill:white;font-size:14px;font-weight:bold;}
.urdu-curve{fill:#ddd;font-size:13px;}

.center-title{
position:relative;
color:gold;
font-weight:bold;
font-size:20px;
text-align:center;
text-decoration:none;
padding:10px;
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{box-shadow:0 0 10px gold;}
50%{box-shadow:0 0 25px gold;}
100%{box-shadow:0 0 10px gold;}
}

.center-title:hover{
background:gold;color:#4b0082;border-radius:8px;
}

/* Floating WhatsApp */
.whatsapp-float{
position:fixed;
bottom:20px;right:20px;
background:#25D366;color:white;
width:55px;height:55px;
display:flex;justify-content:center;align-items:center;
border-radius:50%;text-decoration:none;
font-size:24px;z-index:999;
}



/* Top Button */
#topBtn{
position:fixed;
bottom:90px;right:20px;
display:none;
background:#8000ff;color:white;
border:none;padding:10px 15px;
border-radius:8px;cursor:pointer;
}

/* Footer */
footer{
background:#4b0082;color:white;
text-align:center;padding:15px;
margin-top:40px;
}

/* Responsive */
@media(max-width:992px){
.faq-section{flex-direction:column;}
.faq-box{width:90%;}
}

@media(max-width:768px){
.nav-list{
flex-direction:column;display:none;
background:#4b0082;
position:absolute;top:60px;right:0;
width:200px;padding:15px;
}
.nav-list.active{display:flex;}
.menu-toggle{display:block;}
}