/* 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 */
/* AYAT */
.ayat-section{
text-align:center;
padding:50px 20px;
background:white;
}

.arabic-text{
font-family:'Amiri', serif;
font-size:30px;
direction:rtl;
margin:20px 0;
color:#0b1c3d;
}

.urdu-text{
font-family:'Noto Nastaliq Urdu', serif;
font-size:22px;
direction:rtl;
margin-bottom:25px;
color:#333;
}

/* PRICING */
.container{
width:90%;
margin:60px auto;
text-align:center;
}

.fee-intro h1{
font-size:32px;
margin-bottom:10px;
}

.fee-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}

.fee-card{
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 15px 40px rgba(0,0,0,0.12);
transition:0.4s;
position:relative;
}

.fee-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,0.2);
}

.price{
font-size:36px;
font-weight:bold;
color:#00c897;
margin:20px 0;
}

.price span{
font-size:16px;
color:#666;
}

.fee-card ul{
list-style:none;
text-align:left;
margin-bottom:20px;
}

.fee-card ul li{
margin:10px 0;
}

.fee-card ul li i{
color:#00c897;
margin-right:8px;
}

.btn-enroll{
display:inline-block;
padding:12px 25px;
background:#0b1c3d;
color:white;
text-decoration:none;
border-radius:30px;
transition:0.3s;
}

.btn-enroll:hover{
background:#00c897;
}

.popular{
border:3px solid #00c897;
}

.popular-tag{
position:absolute;
top:-12px;
right:20px;
background:#00c897;
color:white;
padding:5px 12px;
border-radius:20px;
font-size:12px;
}

/* PAYMENT */
.payment-methods{
margin-top:80px;
}

.payment-icons{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
margin-top:30px;
}

.method-item{
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
transition:0.3s;
}

.method-item:hover{
transform:translateY(-5px);
}

.method-item i{
font-size:28px;
color:#00c897;
display:block;
margin-bottom:10px;
}

.note-box{
margin-top:40px;
padding:20px;
background:#f1faff;
border-left:5px solid #00c897;
border-radius:10px;
}


/* CTA */

.cta{
background:#0a3d62;
color:white;
text-align:center;
padding:60px 20px;
}

.btn{
display:inline-block;
background: #fbc531;
color:black;
padding:12px 25px;
text-decoration:none;
font-weight:bold;
border-radius:5px;
margin-top:15px;
}

.btn:hover{
background:white;
}

/* FOOTER */

footer{
background:#222;
color:white;
text-align:center;
padding:20px;
}