*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.courses-page{
  padding:80px 20px;
  background: linear-gradient(135deg,#132269,#213f85,#0c174d);
  color:white;
  text-align:center;
  
}

/* TITLE */
.course-title{
  font-size:38px;
  margin-bottom:40px;
  background: linear-gradient(45deg,#00c6ff,#7c3aed);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* CARD */
.course-card{
  max-width:1000px;
  margin:30px auto;
  padding:30px;
  border-radius:20px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(15px);

  transition:0.4s;
  position:relative;
  overflow:hidden;
}

/* GLOW BORDER */
.course-card::before{
  content:"";
  position:absolute;
  inset:0;
  padding:2px;
  border-radius:20px;

  background: linear-gradient(45deg,#00c6ff,#7c3aed,#00ffae);
  background-size:300%;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: borderFlow 4s linear infinite;
}

/* HOVER */
.course-card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 25px #00c6ff;
}

/* GRID */
.course-grid{
  display:flex;
  gap:20px;
  margin-top:20px;
  flex-wrap:wrap;
  justify-content:center;
}

.course-grid div{
  flex:1;
  min-width:250px;
}

/* HEADINGS */
.course-grid h3{
  color:#67e8f9;
  margin-bottom:10px;
}

/* LIST */
.course-grid ul{
  list-style:none;
  padding:0;
}

.course-grid li{
  padding:6px 0;
  font-size:14px;
  opacity:0.9;
}

/* ANIMATION */
@keyframes borderFlow{
  0%{background-position:0%;}
  100%{background-position:300%;}
}

/* MOBILE */
@media(max-width:768px){
  .course-grid{
    flex-direction:column;
  }
}

/* FEES SECTION */

.fees-title{
  color: white;
  -webkit-text-fill-color: white; /* important */
  background: none; /* gradient hata diya */
}

.fees-section{
  padding:80px 20px;
  text-align:center;
  background: linear-gradient(135deg,#020617,#0f172a,#020617);
}

/* TABLE MAIN */
.fees-table{
  width:90%;
  max-width:850px;
  margin:auto;
  border-collapse:collapse;

  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(15px);

  border-radius:20px;
  overflow:hidden;

  box-shadow: 0 0 25px rgba(0,198,255,0.2);
}

/* ALL CELLS BORDER */
.fees-table th,
.fees-table td{
  padding:14px;
  border:1px solid rgba(0,198,255,0.4); /* 🔥 neon line */
  text-align:center;
}

/* HEADER SIMPLE */
.fees-table th{
  color:#67e8f9;
  font-weight:600;
  background: transparent; /* gradient hata diya */
}

/* DATA */
.fees-table td{
  color:#e0f2fe;
}

.fees-table th:first-child{
  border-top-left-radius:20px;
}

.fees-table th:last-child{
  border-top-right-radius:20px;
}

.fees-table tr:last-child td:first-child{
  border-bottom-left-radius:20px;
}

.fees-table tr:last-child td:last-child{
  border-bottom-right-radius:20px;
}


/* HOVER EFFECT */
.fees-table tr:hover{
  background: rgba(0,198,255,0.1);
  transition:0.3s;
}
/* LAST ROW BORDER FIX */
.fees-table tr:last-child td{
  border-bottom:none;
}

/* BUTTON HOVER */
.download-btn{
  margin-top:25px;
  padding:12px 25px;
  border:none;
  border-radius:30px;

  background: linear-gradient(45deg,#00c6ff,#7c3aed);
  color:white;
  font-size:16px;

  cursor:pointer;
  transition:0.3s;
}
/* TEXT ANIMATION */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.reveal{
  opacity:0;
  transform:translateY(50px);
  transition:0.6s;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}


.course-duration{
  position:absolute;
  top:5px;
  right:15px;

  padding:5px 10px;
  border-radius:20px;

  font-size:12px;
  font-weight:bold;

  background: linear-gradient(45deg,#00c6ff,#7c3aed);
  color:white;

  box-shadow: 0 0 15px rgba(0,198,255,0.7);

  animation: pulseGlow 2s infinite;
}

.badge-popular{
  position:absolute;
  top:10px;
  left:15px;

  padding:5px 12px;
  font-size:11px;
  font-weight:bold;

  border-radius:20px;
  background: linear-gradient(45deg,#ff0080,#ff8c00);
  color:white;

  box-shadow:0 0 15px rgba(255,0,128,0.7);

  animation: popGlow 1.5s infinite;
}

@keyframes popGlow{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}

/* glow animation */
@keyframes pulseGlow{
  0%{ box-shadow:0 0 5px #00c6ff; }
  50%{ box-shadow:0 0 20px #00c6ff; }
  100%{ box-shadow:0 0 5px #00c6ff; }
}

.filter-buttons{
  margin-bottom:30px;
}

.filter-buttons button{
  margin:5px;
  padding:10px 18px;
  border:none;
  border-radius:20px;

  background: rgba(255,255,255,0.1);
  color:white;

  cursor:pointer;
  transition:0.3s;
}

.filter-buttons button:hover{
  background: linear-gradient(45deg,#00c6ff,#7c3aed);
  box-shadow:0 0 15px #00c6ff;
}


/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0px 40px;
  z-index: 1000;
  background: transparent;
}

/* Top Bar */
.top-bar {
  position: absolute;
  top: 20px;
  left: 30px;
  display: flex;
  align-items: center;
  

}

.logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

@font-face {
  font-family: "SiyaFont";
  src: url("fonts/SiyaFont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.brand{
  font-family: "SiyaFont", sans-serif !important;
}

.brand {
  font-size: 32px;
  color: white;
}

.navbar.active {
  background: rgba(8, 8, 102, 0.95);
  backdrop-filter: blur(12px);
}

/* CONTAINER */
.nav-container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:0 15px;
  box-sizing:border-box;
}

/* LEFT */
.nav-left{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:0;
}


/* LINKS */
.nav-links {
  display: flex;
  gap: 25px;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: 0.3s;
}

/* HOVER */
.nav-links a:hover {
  color: #67e8f9;
  box-shadow: 0 0 10px #67e8f9, 0 0 20px #67e8f9;
  background: rgba(103, 232, 249, 0.1);
  transform: translateY(-2px);
}

/* MENU BUTTON */
.menu-btn {
  display: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  transition: 0.3s;

  margin-right: 2px;   /* 👈 ADD THIS */
}

.menu-btn:hover{
  box-shadow: 0 0 20px #00c6ff, 0 0 40px #0072ff;
  transform: scale(1.1);
}

.menu-btn.active{
  box-shadow: 0 0 25px #00c6ff, 0 0 50px #0072ff;
}
.menu-btn span {
  display: block;
  width: 15px;
  height: 2px;
  background: white;
  margin: 6px 0;
}

/* MOBILE */
/* MOBILE FIX */
@media (max-width: 768px){

  .nav-container{
    padding: 0 15px;
  }
  .nav-left{
      gap: 8px;
    margin-left:-8px;   /* -8px hata do */
  }

  .brand{
    font-size:18px;
    white-space: nowrap;
  }
  
    .logo{
    width: 40px;
    height: 40px;
  }

  .menu-btn{
    display:block;
  }

  .nav-links{
    position:absolute;
     top:70px;
  right:15px;
    width:200px;

    background: rgba(10,10,40,0.95);
    backdrop-filter: blur(12px);

    flex-direction:column;
    gap:10px;
    padding:10px;

    border-radius:12px;
    display:none;
  }

  .nav-links a{
    font-size:14px;
    padding:8px;
  }

  .nav-links.active{
    display:flex;
    animation: slideDown 0.3s ease;
  }
}

/* default */
.menu-btn span {
  display: block;
  width: 15px;
  height: 2px;
  background: white;
  margin: 6px 0;
  border-radius: 2px;
  transition: 0.4s;
}

/* Smooth dropdown */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ACTIVE = X animation */
.menu-btn.active span:nth-child(1){
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.active span:nth-child(2){
  opacity:0;
}

.menu-btn.active span:nth-child(3){
  transform: rotate(-45deg) translate(5px, -5px);
}

html, body{
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body{
  background: radial-gradient(circle at top, #4404da, #011441 70%);
}

.courses-page{
  min-height:100vh;
}

.fees-section{
  min-height:100vh;
}


/* FOOTER */
.footer {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  padding: 50px 20px 20px;
  color: white;
  padding:25px 15px 0;
   position: relative;
  z-index: 5;
  box-sizing:border-box;
  width:100vw;
  margin-left:calc(50% - 50vw);

  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Container */
.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: auto;
  gap: 40px;
}

/* Sections */
.footer-left,
.footer-links,
.footer-contact {
  flex: 1;
  min-width: 220px;
}

/* Headings */
.footer h2 {
   font-family: "SiyaFont", sans-serif;
  font-size: 28px;
  margin-bottom: 10px;
  color: white;
}

.footer h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #67e8f9;
}

/* Text */
.footer p {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.6;
}

/* Links */
.footer-links a {
  display: block;
  color: white;
  text-decoration: none;
  margin: 6px 0;
  font-size: 14px;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #67e8f9;
  transform: translateX(5px);
}

/* Contact */
.footer-contact p {
  margin: 6px 0;
}

/* Bottom line */
.footer-bottom {
  text-align: center;
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  opacity: 0.6;
}

  /* Footer */
  .footer-container {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }
 .footer {
    padding: 25px 15px 8px;   /* 👈 mobile me compact */
  }
   .footer-bottom {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 12px;
  }



  .footer-recognition{
  display:flex;
  flex-wrap:wrap;          /* 👈 next line me aa jayega */
  gap:10px;
  margin-top:15px;
  justify-content:center;
}

.footer-recognition img{
  width:60px;              /* 👈 sab same size */
  height:auto;
  object-fit:contain;

  border-radius:8px;
  background:white;        /* 👈 agar transparent ho */
  padding:5px;
}

@media(max-width:768px){
  .footer-recognition img{
    width:50px;
  }
}

.footer-links{
  display:flex;
  flex-direction:column;
  align-items:center;   /* 👈 center */
}
.footer-contact{
  display:flex;
  flex-direction:column;
  align-items:center;
}