body{
  margin: 0;
  overflow-x: hidden;
}


/* HEADER */
/* HEADER */
.header{
  width: 100%;
  background: #0a58ca;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 999;
}



.logo{
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}


/* MENU */
.menu{
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: visible;
}


.menu a{
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  padding: 6px 8px;
  white-space: nowrap;
}



.menu a:hover{
  background:white;
  color:#1f3c88;
}

/* MOBILE RESPONSIVE */
@media(max-width:600px){
  .menu{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .menu a{
    font-size:12px;
    padding:5px 8px;
  }
}

/* PAGE */
.page{
display:none;
padding:15px;
}

.title{
text-align:center;
color:#1f3c88;
}

/* COURSES */
.course-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.course-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 15px rgba(0,0,0,0.2);
transition:0.4s;
text-align:center;
}

.course-card img{
  width:100%;
  height:auto;
}



.course-card h4{
margin:10px;
color:#1f3c88;
}

.course-card:hover{
transform:translateY(-8px) scale(1.05);
}

/* CARD */
.card{
background:white;
padding:15px;
border-radius:12px;
max-width:350px;
margin:auto;
}

/* FORM */
input,select{
width:100%;
padding:10px;
margin-top:8px;
}

/* PHOTO */
.photo{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
display:block;
margin:10px auto;
border:2px solid #1f3c88;
}

.center{
text-align:center;
}

button{
margin-top:10px;
width:100%;
padding:10px;
background:#f57c00;
color:white;
border:none;
border-radius:6px;
}

/* CERTIFICATE */
.certificate{
border:5px solid #1f3c88;
}

/* RESPONSIVE */
@media(max-width:900px){
.course-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:500px){
.course-grid{grid-template-columns:1fr;}
.menu{flex-wrap:wrap;}
}



/* DEVELOPER CONTACT */
.developer-card{
  text-align:center;
}

.developer-photo{
  width:130px;
  height:130px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #1f3c88;
  margin-bottom:10px;
}

.dev-text{
  font-size:14px;
  color:#333;
  margin:10px 0;
}


.skill-list{
  list-style:none;
  padding:0;
  font-size:14px;
  text-align:left;
  max-width:280px;
  margin:10px auto;
}

.skill-list li{
  padding:4px 0;
}


.course-card{
  text-decoration:none;
  color:#1f3c88;
}



/* ID CARD PROFESSIONAL */
.idcard-pro{
  border:3px solid #1f3c88;
  text-align:center;
  font-size:14px;
}

/* CERTIFICATE PROFESSIONAL */
.certificate-pro{
  border:6px double #1f3c88;
  padding:20px;
}

.sign{
  margin-top:40px;
  text-align:right;
  padding-right:30px;
}


.cert-photo{
  width:120px;
  height:120px;
  border-radius:8px;
  object-fit:cover;
  border:3px solid #1f3c88;
  margin:15px auto;
  display:block;
}


/* CERTIFICATE PHOTO */
.cert-photo{
  width:120px;
  height:120px;
  object-fit:cover;
  border:3px solid #1f3c88;
  margin:15px auto;
  display:block;
}

/* QR CODE */
.qr{
  width:100px;
  margin:15px auto;
  display:block;
}

/* PRINT ONLY CERTIFICATE */
@media print{
  body *{
    visibility:hidden;
  }
  #certificateArea, #certificateArea *{
    visibility:visible;
  }
  #certificateArea{
    position:absolute;
    left:0;
    top:0;
    width:100%;
  }
}



.cert-title{
  font-size:36px;
  font-weight:bold;
  color:#1f3c88;
  text-transform:uppercase;
}

.cert-sub{
  font-size:14px;
  letter-spacing:1px;
  margin-bottom:20px;
}



/* CONTACT LANDSCAPE LAYOUT */
.contact-landscape{
  display:flex;
  gap:20px;
  max-width:1100px;
  margin:auto;
}

.contact-left,
.contact-right{
  flex:1;
  padding:20px;
  background:#fff;
  border-radius:10px;
}

/* Developer Photo */
.dev-photo{
  width:150px;
  border-radius:10px;
  display:block;
  margin-bottom:10px;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 15px;
  margin:5px 5px 0 0;
  color:#fff;
  text-decoration:none;
  border-radius:5px;
}

.green{ background:#25D366; }
.blue{ background:#007bff; }

/* Form */
.contact-right input,
.contact-right textarea{
  width:100%;
  margin-bottom:10px;
  padding:8px;
}

.contact-right button{
  padding:10px 15px;
  background:#1f3c88;
  color:#fff;
  border:none;
  border-radius:5px;
}



@media(max-width:768px){
  .contact-landscape{
    flex-direction:column;
  }
}



.social-links{
  margin-top:15px;
}

.social-links h4{
  margin-bottom:8px;
}

.social-links a{
  display:flex;
  align-items:center;
  margin-bottom:6px;
  text-decoration:none;
  color:#333;
  font-weight:500;
}

.social-links img{
  width:22px;
  margin-right:8px;
}



/* ===== COURSE PROFESSIONAL LAYOUT ===== */
.course-layout{
  max-width:1250px;
  margin:40px auto;
  display:flex;
  gap:30px;
  font-family: "Segoe UI", sans-serif;
}

/* LEFT PANEL */
.course-left{
  flex:2;
}

.course-box{
  background:#fff;
  padding:25px;
  border-radius:12px;
  margin-bottom:20px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.course-box h3{
  font-size:20px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}

.course-box p{
  font-size:15px;
  color:#444;
  line-height:1.7;
}

.course-box ul{
  padding-left:20px;
}

.course-box li{
  margin-bottom:8px;
  font-size:15px;
}

/* RIGHT STICKY CARD */
.course-right{
  flex:1;
}

.course-card-pro{
  position:sticky;
  top:20px;
  background:#0f172a;
  color:#fff;
  border-radius:14px;
  padding:20px;
}

.course-card-pro img{
  width:100%;
  border-radius:10px;
  margin-bottom:15px;
}

.course-card-pro h2{
  font-size:22px;
  margin-bottom:5px;
}

.course-card-pro small{
  color:#cbd5e1;
}

.price{
  font-size:26px;
  font-weight:bold;
  margin:10px 0;
}

.old-price{
  font-size:14px;
  text-decoration:line-through;
  color:#94a3b8;
}

.feature{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  margin:8px 0;
}

.course-card-pro button{
  width:100%;
  padding:14px;
  margin-top:15px;
  background:#22c55e;
  border:none;
  border-radius:10px;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
}

.course-card-pro button:hover{
  background:#16a34a;
}

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



/* ===== GALLERY ===== */
.gallery-form{
  max-width:400px;
  margin:auto;
}

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

.gallery-card{
  background:#fff;
  padding:15px;
  text-align:center;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  transition:0.3s;
}

.gallery-card:hover{
  transform:translateY(-5px);
}

.gallery-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:8px;
}

.gallery-card h4{
  margin:10px 0 5px;
}

.gallery-card p{
  font-size:14px;
  color:#555;
}


/* ===== STAR INPUT ===== */
.star-input span{
  font-size:28px;
  cursor:pointer;
  color:#ccc;
}

/* ===== GALLERY IMAGE FIX ===== */
.gallery-img{
  width:100%;
  height:200px;
  overflow:hidden;
  border-radius:10px;
}

.gallery-img img{
  width:100%;
  height:100%;
  object-fit:contain;   /* 🔥 FIXED */
  background:#f2f2f2;
}

/* ===== STAR DISPLAY ===== */
.stars{
  color:gold;
  font-size:18px;
  margin:5px 0;
}


/* ===== AUTO SLIDER GALLERY ===== */

.gallery-slider{
  width:100%;
  overflow:hidden;
  margin-top:30px;
}

.gallery-track{
  display:flex;
  gap:20px;
  transition:transform 0.6s ease;
}

.gallery-slide{
  min-width:300px;
  background:#fff;
  padding:15px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  text-align:center;
}

/* Image fix */
.gallery-img{
  width:100%;
  height:200px;
  overflow:hidden;
  border-radius:10px;
  background:#f2f2f2;
}

.gallery-img img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.stars{
  color:gold;
  font-size:18px;
  margin:5px 0;
}

@media(max-width:600px){
  .gallery-slide{
    min-width:260px;
  }
}



/* ===== QUIZ ===== */
.quiz-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:30px;
}

.quiz-card{
  background:#1976d2;
  color:#fff;
  padding:25px;
  border-radius:12px;
  text-align:center;
  text-decoration:none;
  transition:0.3s;
  box-shadow:0 6px 15px rgba(0,0,0,0.2);
}

.quiz-card:hover{
  background:#0d47a1;
  transform:translateY(-5px);
}

.quiz-card h4{
  margin-bottom:8px;
}

.quiz-card p{
  font-size:14px;
  opacity:0.9;
}


.page{
  margin-top: 80px;
}


.menu a{
  cursor: pointer;
}



/* CONTACT PAGE PROFESSIONAL */
.contact-pro{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:25px;
  max-width:1200px;
  margin:auto;
}

.contact-left-pro{
  background:#fff;
  padding:25px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.dev-photo-pro{
  width:300px;        /* PHOTO BADA */
  height:240px;
  object-fit:cover;
  border-radius:10px;
  border:4px solid #0a58ca;
  margin-bottom:15px;
}

.dev-desc{
  font-size:14px;
  color:#555;
}

.skill-list{
  list-style:none;
  padding:0;
  text-align:left;
  margin:15px 0;
}

.skill-list li{
  margin:5px 0;
  font-size:14px;
}

.contact-btns{
  margin:15px 0;
}

.social-icons img{
  width:36px;
  margin:0 6px;
  transition:0.3s;
}

.social-icons img:hover{
  transform:scale(1.2);
}

/* RIGHT */
.contact-right-pro{
  background:#fff;
  padding:25px;
  border-radius:10px;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border:1px solid #ccc;
  border-radius:5px;
}

.contact-form button{
  width:100%;
  padding:12px;
  background:#0a58ca;
  color:#fff;
  border:none;
  font-size:16px;
  cursor:pointer;
}

.contact-right-pro iframe{
  width:100%;
  height:220px;
  border:0;
  margin-top:15px;
}

/* MOBILE */
@media(max-width:768px){
  .contact-pro{
    grid-template-columns:1fr;
  }
  .dev-photo-pro{
    width:180px;
    height:220px;
  }
}


.skill-list li{
  opacity:0;
  animation:fadeSkill 0.5s ease forwards;
}

.skill-list li:nth-child(1){animation-delay:.2s}
.skill-list li:nth-child(2){animation-delay:.4s}
.skill-list li:nth-child(3){animation-delay:.6s}
.skill-list li:nth-child(4){animation-delay:.8s}
.skill-list li:nth-child(5){animation-delay:1s}
.skill-list li:nth-child(6){animation-delay:1.2s}
.skill-list li:nth-child(7){animation-delay:1.4s}

@keyframes fadeSkill{
  from{opacity:0;transform:translateX(-20px)}
  to{opacity:1;transform:translateX(0)}
}


.contact-left-pro:hover{
  transform:scale(1.02);
  transition:.3s;
}


.social-icons img{
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}


/* PHOTO FLOAT ANIMATION */
.dev-photo-pro{
  animation: floatPhoto 4s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(10,88,202,0.6);
}

@keyframes floatPhoto{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}



/* GALLERY */
.review-form{
  max-width:500px;
  margin:20px auto;
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 0 10px rgba(0,0,0,.1);
}

.review-form input,
.review-form textarea,
.review-form select{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border:1px solid #ccc;
  border-radius:5px;
}

.review-form button{
  width:100%;
  padding:12px;
  background:#0a58ca;
  color:#fff;
  border:none;
  font-size:16px;
  cursor:pointer;
}

/* GALLERY VIEW */
.gallery-wrap{
  overflow:hidden;
  max-width:1000px;
  margin:30px auto;
}

.gallery{
  display:flex;
  gap:20px;
  transition:transform .5s ease;
}

.gcard{
  min-width:260px;
  background:#fff;
  padding:15px;
  text-align:center;
  border-radius:12px;
  box-shadow:0 0 12px rgba(0,0,0,.15);
  animation:float 4s ease-in-out infinite;
}

.gcard img{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #0a58ca;
}

.star{
  color:gold;
  font-size:18px;
}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}


/* ===== GALLERY ===== */
.gallery-form{
  max-width:400px;
  margin:20px auto;
  background:#fff;
  padding:15px;
  border-radius:10px;
  box-shadow:0 0 10px #ccc;
}
.gallery-form input,
.gallery-form textarea,
.gallery-form select{
  width:100%;
  margin:8px 0;
  padding:8px;
}

.slider-box{
  overflow:hidden;
  width:100%;
}

.gallery-slider{
  display:flex;
  gap:20px;
  width:max-content;
  animation: infiniteSlide 35s linear infinite;
}

.gallery-slider:hover{
  animation-play-state: paused;
}

@keyframes infiniteSlide{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}



@keyframes slide{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

.review-card{
  min-width:250px;
  background:#fff;
  padding:15px;
  border-radius:15px;
  text-align:center;
  box-shadow:0 0 10px #aaa;
}

.review-card img{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #0a58ca;
}

.review-card h4{ margin:10px 0 5px; }
.star{ color:gold; font-size:18px; }


.review-card{
  min-width:200px;
  max-width:200px;
  background:#fff;
  padding:12px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,0.15);
  flex-shrink:0;
}

/* Student Photo */
.review-card img{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #0a58ca;
  margin-bottom:6px;
}

/* Name */
.review-card h4{
  font-size:14px;
  margin:4px 0;
  word-wrap:break-word;
}

/* Stars */
.review-card .star{
  font-size:14px;
  color:gold;
  margin:4px 0;
}

/* Review Text */
.review-card p{
  font-size:13px;
  line-height:1.4;
  margin:4px 0;
  word-wrap:break-word;
  overflow-wrap:anywhere;
}



.course-page{
  padding:20px;
  max-width:1100px;
  margin:auto;
}

.course-header{
  display:flex;
  gap:20px;
  align-items:center;
  background:#0a58ca;
  color:#fff;
  padding:20px;
  border-radius:12px;
}

.course-header img{
  width:220px;
  height:150px;
  object-fit:cover;
  border-radius:10px;
}

.course-header h1{
  margin:0;
  font-size:28px;
}

.course-header button{
  margin-top:10px;
  padding:10px 18px;
  border:none;
  background:#ffc107;
  font-weight:bold;
  border-radius:6px;
  cursor:pointer;
}

.course-details{
  margin-top:25px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

.course-box{
  background:#fff;
  padding:18px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.course-box h3{
  margin-bottom:8px;
  color:#0a58ca;
}


.manual-location{
  margin-top:10px;
  background:#f4f6f9;
  padding:10px;
  border-radius:8px;
  font-size:14px;
  line-height:1.6;
}




.course-btns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.watch-btn{
  padding:10px 16px;
  background:#ffffff;
  color:#0a58ca;
  border:2px solid #ffffff;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
}

.watch-btn:hover{
  background:#ffc107;
  color:#000;
}



.notes-btn{
  padding:10px 16px;
  background:#ffffff;
  color:#dc3545;
  border:2px solid #ffffff;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
}

.notes-btn:hover{
  background:#dc3545;
  color:#ffffff;
}





.admission-form{
  max-width:900px;
  margin:auto;
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

.form-row{
  display:flex;
  gap:15px;
  margin-bottom:15px;
}

.form-row input,
.form-row select{
  flex:1;
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:14px;
}

.upload-row{
  display:flex;
  gap:30px;
  margin:20px 0;
}

.upload-row label{
  font-weight:600;
}

.preview-img{
  width:120px;
  height:140px;
  border:1px solid #ccc;
  margin-top:8px;
  object-fit:cover;
  border-radius:6px;
}

.preview-img.sign{
  height:60px;
}

.declaration{
  display:flex;
  gap:10px;
  font-size:14px;
  margin-bottom:20px;
}

.submit-btn{
  width:100%;
  background:#0b5ed7;
  color:#fff;
  border:none;
  padding:12px;
  font-size:16px;
  border-radius:8px;
  cursor:pointer;
}

.submit-btn:hover{
  background:#084298;
}

@media(max-width:768px){
  .form-row,
  .upload-row{
    flex-direction:column;
  }
}



.admission-pro{
  max-width:420px;
  margin:auto;
  padding:25px;
}

.admission-pro h3{
  text-align:center;
  margin-bottom:15px;
}

.admission-pro input,
.admission-pro select{
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:14px;
}

.lbl{
  font-size:13px;
  font-weight:600;
  margin-top:5px;
  display:block;
}

.photo{
  width:120px;
  height:140px;
  border:1px solid #ccc;
  border-radius:6px;
  object-fit:cover;
  display:block;
  margin:8px auto 12px;
}

.sign-photo{
  width:140px;
  height:60px;
  border:1px solid #ccc;
  border-radius:4px;
  object-fit:contain;
  display:block;
  margin:8px auto 12px;
}

.declare{
  display:flex;
  gap:8px;
  font-size:13px;
  margin-bottom:15px;
}

.admission-pro button{
  width:100%;
  background:#0b5ed7;
  color:#fff;
  border:none;
  padding:11px;
  border-radius:8px;
  font-size:15px;
  cursor:pointer;
}

.admission-pro button:hover{
  background:#084298;
}


/* ===== PROFESSIONAL ADMISSION LOOK ===== */

#admission{
  padding:40px 15px;
  background:#f4f6f9;
}

.admission-pro{
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 12px 35px rgba(0,0,0,0.12);
  max-width:460px;
  margin:auto;
  padding:30px 28px;
  animation: fadeUp .6s ease;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

.admission-pro h3{
  text-align:center;
  font-size:22px;
  color:#0b5ed7;
  margin-bottom:22px;
  border-bottom:2px solid #e5e9f2;
  padding-bottom:10px;
}

.admission-pro input,
.admission-pro select{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid #d0d5dd;
  border-radius:8px;
  font-size:14px;
  transition:.2s;
  background:#fafafa;
}

.admission-pro input:focus,
.admission-pro select:focus{
  outline:none;
  border-color:#0b5ed7;
  background:#fff;
}

.lbl{
  font-size:13px;
  font-weight:600;
  color:#333;
  margin-bottom:6px;
}

.photo{
  width:130px;
  height:160px;
  border-radius:10px;
  border:2px dashed #cdd4e0;
  object-fit:cover;
  margin:10px auto 18px;
  display:block;
}

.sign-photo{
  width:160px;
  height:60px;
  border:2px dashed #cdd4e0;
  border-radius:6px;
  object-fit:contain;
  margin:10px auto 18px;
  display:block;
}

.declare{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:#555;
  background:#f8faff;
  padding:10px;
  border-radius:8px;
  margin-bottom:18px;
}

.declare input{
  margin-top:3px;
}

.admission-pro button{
  width:100%;
  padding:14px;
  font-size:16px;
  font-weight:600;
  border-radius:10px;
  background:linear-gradient(135deg,#0b5ed7,#084298);
  color:#fff;
  border:none;
  cursor:pointer;
  transition:.3s;
}

.admission-pro button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(11,94,215,.3);
}


.admission-pro h3::before{
  content:"📝 ";
}


/* ===== ADMISSION LANDSCAPE MODE ===== */

@media(min-width: 992px){

  .admission-pro{
    max-width: 900px;     /* landscape width */
    padding: 35px 40px;
  }

  .admission-pro form,
  .admission-pro{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
  }

  .admission-pro h3{
    grid-column: span 2;
  }

  .lbl,
  .photo,
  .sign-photo,
  .declare,
  .admission-pro button{
    grid-column: span 2;
  }

  .photo,
  .sign-photo{
    margin-left: 0;
  }
}


@media(min-width: 992px){
  .photo,
  .sign-photo{
    justify-self: center;
  }
}


/* ===== ADMISSION PROFESSIONAL GOVERNMENT STYLE ===== */

.admission-pro {
  max-width: 1000px;
  margin: auto;
  padding: 25px 30px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

/* TITLE */
.admission-pro h3 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 22px;
  color: #1e3a8a;
  border-bottom: 2px solid #1e3a8a;
  padding-bottom: 8px;
}

/* INPUTS & SELECT */
.admission-pro input,
.admission-pro select {
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid #9ca3af;
  border-radius: 4px;
}

/* ROW SYSTEM */
.form-row {
  display: flex;
  gap: 15px;
}

.form-row > * {
  flex: 1;
}

/* PHOTO & SIGN ROW */
.media-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 15px;
}

.media-box {
  width: 48%;
  text-align: center;
  border: 1px dashed #9ca3af;
  padding: 10px;
  border-radius: 6px;
}

.media-box label {
  font-size: 13px;
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
}

.photo {
  width: 120px;
  height: 140px;
  object-fit: cover;
  border: 1px solid #000;
  margin: auto;
}

.sign-photo {
  width: 180px;
  height: 60px;
  object-fit: contain;
  border-bottom: 1px solid #000;
  margin: auto;
}

/* DECLARATION */
.declare {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid #9ca3af;
  background: #f9fafb;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* BUTTON */
.admission-pro button {
  margin-top: 20px;
  width: 100%;
  padding: 11px;
  font-size: 15px;
  font-weight: bold;
  background: #1e3a8a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.admission-pro button:hover {
  background: #0f2a6d;
}

/* MOBILE RESPONSIVE */
@media(max-width: 768px) {
  .form-row,
  .media-row {
    flex-direction: column;
  }

  .media-box {
    width: 100%;
  }
}


/* ===== CERTIFICATE LANDSCAPE ===== */

.certificate-pro {
  width: 100%;
  max-width: 1100px;
  height: 700px;
  margin: auto;
  padding: 35px 50px;
  border: 10px double #1e3a8a;
  background: #fff;
  position: relative;
}

/* LANDSCAPE PRINT */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }
}

/* STUDENT PHOTO */
.cert-photo {
  width: 120px;
  height: 140px;
  object-fit: cover;
  border: 2px solid #000;
  margin: 10px auto;
}

/* QR */
.qr {
  width: 90px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

/* SIGNATURE ROW */
.sign-row {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 40px;
  left: 50px;
  right: 50px;
}

/* SIGN BOX */
.sign-box {
  text-align: center;
  width: 250px;
}

.sign-box p {
  margin: 2px 0;
  font-size: 14px;
}

/* STAMP */
.stamp {
  width: 60px;
  margin-top: 5px;
  opacity: 0.9;
}


.orange-bar{
  position:absolute;
  bottom:15px;     /* QR se niche */
  left:50px;
  right:50px;
  height:22px;
  background:#f59e0b;
  border-radius:5px;
  z-index:1;
}


.qr{
  z-index:5;
  background:#fff;
  padding:4px;
}


.print-area{
  text-align:center;
  margin:20px 0;
}

@media print{
  .print-area{
    display:none;
  }
}

/* ===== CERTIFICATE PRINT FIX ===== */
@media print {

  body{
    margin:0;
    padding:0;
  }

  @page{
    size: A4 landscape;
    margin: 10mm;
  }

  #certificateArea{
    width:100%;
    box-sizing: border-box;
    border: 3px solid #1f3c88; /* same border color */
  }

}


.qr{
  display:block;
  margin: 25px auto 10px auto; /* ऊपर course text से gap */
  width: 110px;
  height: 110px;
}


#certCourse{
  margin-bottom: 15px;
}


.cert-main{
  color:#e91e63;
  letter-spacing:2px;
  margin:10px 0 15px;
}

.cert-iso{
  color:#0b5ed7;
  font-weight:600;
  margin-bottom:10px;
}

.cert-info{
  display:flex;
  justify-content:space-between;
  width:100%;
  font-size:14px;
  margin:10px 0 15px;
}

.cert-text{
  font-size:16px;
  line-height:1.6;
  margin:6px 0;
}

.qr{
  margin:20px auto 10px;
  width:110px;
}

@media print{
  .print-area{
    display:none;
  }
}



.left-text{
  text-align:left;
  width:80%;
  margin:6px auto;
}


.right-text{
  text-align:right;
  width:80%;
  margin:6px auto;
}



.exam-card, .marksheet{
  max-width:500px;
  margin:auto;
  text-align:center;
}

.exam-card input, .exam-card select{
  width:100%;
  padding:10px;
  margin:8px 0;
}

.marksheet{
  border:2px solid #000;
  padding:20px;
}




/* ================= PRINT FIX ================= */

@media print {

  body {
    background: white !important;
  }

  .menu,
  .print-area,
  button {
    display: none !important;
  }

  .page {
    display: block !important;
  }

  .marksheet {
    box-shadow: none !important;
    border: 3px solid #000 !important;
    color: #000 !important;
    background: #fff !important;
  }

  .marksheet * {
    color: #000 !important;
    visibility: visible !important;
  }

  @page {
    size: A4;
    margin: 10mm;
  }
}


/* ===== MENU ACTIVE STYLE ===== */
.menu a {
  padding: 10px 16px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.menu a:hover {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

/* ACTIVE MENU */
.menu a.active {
  background: #fff;
  color: #1e3c72;
  border-radius: 4px;
  font-weight: 600;
}




/* ===== ID CARD PROFESSIONAL ===== */

.idcard-wrap{
  width: 300px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  margin: auto;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

/* Header */
.idcard-header{
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg,#0b5ed7,#0dcaf0);
  color: #fff;
  padding: 12px;
}

.id-logo{
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 50%;
  padding: 4px;
}

.idcard-header h3{
  margin: 0;
  font-size: 16px;
}

.id-sub{
  font-size: 12px;
  opacity: 0.9;
}

/* Body */
.idcard-body{
  text-align: center;
  padding: 15px;
}

.photo-box{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid #0b5ed7;
  margin: auto;
  overflow: hidden;
}

.photo-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stu-name{
  margin: 10px 0 4px;
  font-size: 18px;
  color: #0b5ed7;
}

.roll{
  font-size: 14px;
  font-weight: bold;
}

/* Info */
.info{
  text-align: left;
  margin-top: 10px;
  font-size: 14px;
}

.info p{
  margin: 5px 0;
}

/* Footer */
.idcard-footer{
  background: #f1f1f1;
  text-align: center;
  font-size: 12px;
  padding: 6px;
}


@media print {
  body{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ===== SIGNATURE STYLE ===== */

.sign-area{
  text-align: center;   /* jagah same rahe */
}

.sign-name{
  font-family: 'Segoe Script','Brush Script MT','Lucida Handwriting',cursive;
  font-size: 20px;
  color: #0b4ddb;       /* blue pen color */
  font-weight: 400;
  display: inline-block;
  transform: rotate(-12deg);   /* tirchha handwriting */
  letter-spacing: 1px;
  margin-bottom: -6px;

  /* pen ink effect */
  text-shadow: 
    0.5px 0.5px 0 #0b4ddb,
    -0.5px 0 0 #0b4ddb;
}

.sign-area p{
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  color: #333;
}


.qr-below{
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
}



/* ========== QUIZ SECTION ========== */

#quiz {
  padding: 30px 15px;
  background: #f4f7fb;
}

#quiz .title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #1a237e;
  margin-bottom: 25px;
}

/* GRID */
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: auto;
}

/* CARD */
.quiz-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 25px 15px;
  text-align: center;
  text-decoration: none;
  color: #333;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border-top: 5px solid #1a73e8;
  position: relative;
  overflow: hidden;
}

/* ICON STRIP EFFECT */
.quiz-card::before {
  content: "📝";
  font-size: 60px;
  position: absolute;
  top: -10px;
  right: -10px;
  opacity: 0.08;
}

/* HOVER */
.quiz-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(26,115,232,0.25);
}

/* TITLE */
.quiz-card h4 {
  font-size: 18px;
  font-weight: 600;
  color: #0d47a1;
  margin-bottom: 10px;
}

/* SUB TEXT */
.quiz-card p {
  font-size: 14px;
  color: #555;
  margin: 0;
  font-weight: 500;
}

/* CLICK EFFECT */
.quiz-card:active {
  transform: scale(0.97);
}

/* MOBILE */
@media (max-width: 480px) {
  .quiz-card {
    padding: 20px 12px;
  }
}



/* ===== REVIEW PAGE PROFESSIONAL LOOK ===== */

#gallery {
  background: #f4f7fb;
  padding: 40px 20px;
}

#gallery .title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #0b3c91;
  margin-bottom: 25px;
}

/* form box */
.gallery-form {
  max-width: 650px;
  margin: auto;
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  margin-bottom: 35px;
}


/* ===== REVIEW CARD ===== */

.review-card {
  min-width: 260px;
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
  transition: transform .3s ease, box-shadow .3s ease;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.18);
}


/* ===== STUDENT PHOTO PROFESSIONAL ===== */

.review-card img {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #0b3c91;
  padding: 3px;
  background: #fff;
  margin-bottom: 10px;
}



.review-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin: 6px 0;
}

.review-card .star {
  color: #f7b500;
  font-size: 15px;
  margin-bottom: 6px;
}

.review-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}


.review-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin: 6px 0;
}

.review-card .star {
  color: #f7b500;
  font-size: 15px;
  margin-bottom: 6px;
}

.review-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}


/* ===== STUDENT REVIEW FORM – PROFESSIONAL LOOK ===== */

.gallery-form{
  max-width: 520px;
  margin: 40px auto;              /* 🔹 thoda dur me adjust */
  padding: 28px 30px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  border-top: 5px solid #0b3c91;
}

/* inputs & textarea */
.gallery-form input,
.gallery-form textarea,
.gallery-form select{
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  transition: .3s;
  background: #f9fbff;
}

.gallery-form textarea{
  resize: none;
  height: 90px;
}

/* focus effect */
.gallery-form input:focus,
.gallery-form textarea:focus,
.gallery-form select:focus{
  border-color: #0b3c91;
  box-shadow: 0 0 0 2px rgba(11,60,145,0.15);
  background: #fff;
}

/* submit button */
.gallery-form button{
  width: 100%;
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
  background: #0b3c91;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: .3s;
}

.gallery-form button:hover{
  background: #092f70;
  transform: translateY(-2px);
}


/* ===== FLOATING LABEL STYLE ===== */

.gallery-form{
  position: relative;
}

.gallery-form input,
.gallery-form textarea,
.gallery-form select{
  background: transparent;
}

/* placeholder hide */
.gallery-form input::placeholder,
.gallery-form textarea::placeholder{
  color: transparent;
}

/* label effect using placeholder */
.gallery-form input:focus::placeholder,
.gallery-form textarea:focus::placeholder{
  color: #999;
}



/* ===== STAR RATING PROFESSIONAL LOOK ===== */

.gallery-form select{
  font-size: 15px;
  font-weight: 600;
  color: #f1b500;
  letter-spacing: 1px;
}

.gallery-form select option{
  color: #333;
  font-size: 14px;
}



@media print{
  body *{visibility:hidden;}
  #marksheetArea, #marksheetArea *{
    visibility:visible;
  }
  #marksheetArea{
    position:absolute;
    left:0; top:0;
    width:100%;
  }
}


.exam-form-card{
  max-width:420px;
  margin:40px auto;
  background:#ffffff;
  padding:30px;
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,.15);
  border-top:6px solid #0a58ca;
}

.exam-title{
  text-align:center;
  color:#0a58ca;
  margin-bottom:5px;
}

.exam-sub{
  text-align:center;
  font-size:14px;
  color:#666;
  margin-bottom:25px;
}

/* floating input */
.form-group{
  position:relative;
  margin-bottom:22px;
}

.form-group input,
.form-group select{
  width:100%;
  padding:12px 10px;
  border:1px solid #ccc;
  border-radius:8px;
  outline:none;
  font-size:15px;
  background:none;
}

.form-group label{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  color:#888;
  background:#fff;
  padding:0 6px;
  pointer-events:none;
  transition:.3s;
}

.form-group input:focus + label,
.form-group input:valid + label{
  top:-8px;
  font-size:12px;
  color:#0a58ca;
}

.form-group select{
  background:#f9f9f9;
}

/* start exam button */
.start-exam-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,#0a58ca,#0d6efd);
  color:#fff;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  transition:.3s;
}

.start-exam-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(13,110,253,.4);
}


/* ===== EXAM PAGE PROFESSIONAL LOOK ===== */

#examPage{
  background:#f1f4fb;
  padding:20px;
}

/* exam card */
.exam-box{
  max-width:850px;
  margin:auto;
  background:#fff;
  border-radius:14px;
  padding:25px;
  box-shadow:0 15px 35px rgba(0,0,0,.15);
  border-top:6px solid #0d6efd;
}

/* top bar */
.exam-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  border-bottom:1px solid #ddd;
  padding-bottom:10px;
}

#examTitle{
  color:#0d6efd;
  font-size:22px;
  font-weight:700;
}

.timer{
  background:#fff3cd;
  color:#856404;
  padding:6px 14px;
  border-radius:20px;
  font-weight:600;
  font-size:14px;
  box-shadow:inset 0 0 5px rgba(0,0,0,.1);
}

/* question */
#examQuestion h4{
  font-size:18px;
  margin-bottom:16px;
  color:#333;
}

/* ===== OPTIONS ===== */
#examQuestion label{
  display:block;
  position:relative;
  padding:12px 15px 12px 45px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:10px;
  cursor:pointer;
  transition:.25s;
  font-size:15px;
}

/* radio hidden */
#examQuestion input[type="radio"]{
  position:absolute;
  opacity:0;
}

/* custom circle */
#examQuestion label::before{
  content:"";
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #999;
  background:#fff;
}

/* hover */
#examQuestion label:hover{
  background:#f5f9ff;
  border-color:#0d6efd;
}

/* selected option highlight */
#examQuestion input[type="radio"]:checked + span,
#examQuestion input[type="radio"]:checked{
  font-weight:600;
}

#examQuestion input[type="radio"]:checked ~ label,
#examQuestion input[type="radio"]:checked + label{
  background:#e7f1ff;
  border-color:#0d6efd;
}

/* checked circle */
#examQuestion input[type="radio"]:checked + label::before,
#examQuestion label input[type="radio"]:checked ~ ::before{
  background:#0d6efd;
  border-color:#0d6efd;
}

/* ===== NEXT / SUBMIT BUTTON ===== */
.exam-box button{
  display:block;
  margin:25px auto 0;
  padding:12px 45px;
  font-size:16px;
  font-weight:600;
  border:none;
  border-radius:30px;
  color:#fff;
  background:linear-gradient(135deg,#0d6efd,#084298);
  cursor:pointer;
  transition:.3s;
  position:relative;
  overflow:hidden;
}

/* hover govt exam feel */
.exam-box button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(13,110,253,.4);
}

/* click ripple animation */
.exam-box button::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.3);
  top:0;
  left:-100%;
  transition:.4s;
}

.exam-box button:active::after{
  left:0;
}


/* ===== CLEAR OPTION SELECTION (GOVT EXAM STYLE) ===== */

#examQuestion label{
  display:block;
  padding:14px 16px 14px 52px;
  margin-bottom:14px;
  border:2px solid #dcdcdc;
  border-radius:12px;
  cursor:pointer;
  font-size:16px;
  position:relative;
  background:#fff;
  transition:all .25s ease;
}

/* hide default radio */
#examQuestion input[type="radio"]{
  position:absolute;
  opacity:0;
}

/* radio circle */
#examQuestion label::before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  border-radius:50%;
  border:3px solid #999;
  background:#fff;
  transition:.25s;
}

/* hover effect */
#examQuestion label:hover{
  background:#f3f8ff;
  border-color:#0d6efd;
}

/* ===== SELECTED OPTION (VERY CLEAR) ===== */
#examQuestion input[type="radio"]:checked + label,
#examQuestion label:has(input[type="radio"]:checked){
  background:#e7f1ff;
  border-color:#0d6efd;
  box-shadow:0 6px 18px rgba(13,110,253,.25);
  font-weight:600;
}

/* selected radio filled */
#examQuestion label:has(input[type="radio"]:checked)::before{
  background:#0d6efd;
  border-color:#0d6efd;
  box-shadow:0 0 0 4px rgba(13,110,253,.25);
}





/* ===== MARKSHEET DESIGN ===== */

.marksheet-box{
  width:900px;
  margin:30px auto;
  padding:25px;
  border:6px double #1b3c74;
  background:#fff;
  font-family:"Times New Roman", serif;
}

.ms-title{
  text-align:center;
  font-size:26px;
  color:#1b3c74;
  font-weight:bold;
}

.ms-sub{
  text-align:center;
  font-size:14px;
  margin-bottom:10px;
}

.ms-head{
  text-align:center;
  margin:15px 0;
  text-decoration:underline;
}

.ms-info{
  width:100%;
  border-collapse:collapse;
  margin-bottom:15px;
}

.ms-info td{
  padding:6px;
  font-size:15px;
}

.ms-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.ms-table th,
.ms-table td{
  border:2px solid #000;
  padding:8px;
  text-align:center;
}

.ms-table th{
  background:#f1f1f1;
}

.ms-result{
  display:flex;
  justify-content:space-between;
  margin-top:15px;
  font-size:16px;
}

.ms-sign{
  display:flex;
  justify-content:space-between;
  margin-top:40px;
  text-align:center;
}




.typing-box{
  max-width:700px;
  margin:30px auto;
  background:#fff;
  padding:25px;
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.typing-title{
  text-align:center;
  color:#0b4fa3;
  margin-bottom:20px;
}

.typing-options{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:15px;
}

.typing-options select,
.typing-options button{
  padding:8px 12px;
  font-size:15px;
}

.typing-text{
  background:#f1f6ff;
  padding:15px;
  border-left:5px solid #0b4fa3;
  margin-bottom:10px;
  min-height:80px;
}

#typingInput{
  width:100%;
  height:120px;
  padding:10px;
  font-size:16px;
}

.typing-result{
  display:flex;
  justify-content:space-between;
  margin-top:15px;
  font-weight:bold;
}


#typingName{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  font-size:16px;
}

.typing-final{
  margin-top:20px;
  padding:15px;
  background:#eef6ff;
  border-left:5px solid #0b4fa3;
  text-align:center;
}
.typing-final button{
  margin-top:10px;
  padding:8px 15px;
}


/* ================= TYPING PAGE ================= */

.typing-box{
  max-width: 900px;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  border-top: 6px solid #0a4aa3;
}

.typing-title{
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #0a4aa3;
  margin-bottom: 20px;
}

/* INPUT & SELECT */
.typing-box input,
.typing-box select{
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.typing-box input:focus,
.typing-box select:focus,
#typingInput:focus{
  outline: none;
  border-color: #0a4aa3;
  box-shadow: 0 0 5px rgba(10,74,163,.3);
}

/* OPTIONS */
.typing-options{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.typing-options button{
  background: #0a4aa3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}

.typing-options button:hover{
  background: #083b82;
}

/* TEXT AREA */
.typing-text{
  background: #f3f6fb;
  border: 1px dashed #0a4aa3;
  padding: 15px;
  border-radius: 6px;
  font-size: 17px;
  margin-bottom: 15px;
  line-height: 1.6;
}

#typingInput{
  width: 100%;
  height: 140px;
  padding: 15px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #bbb;
  resize: none;
}

/* RESULT LIVE */
.typing-result{
  display: flex;
  justify-content: space-between;
  background: #f9f9f9;
  padding: 12px 15px;
  border-radius: 6px;
  font-weight: 600;
  margin-top: 15px;
  border-left: 4px solid #0a4aa3;
}

/* FINAL RESULT */
.typing-final{
  margin-top: 25px;
  background: #eef4ff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  animation: fadeIn .4s ease-in-out;
}

.typing-final h3{
  color: #0a4aa3;
  margin-bottom: 10px;
}

.typing-final button{
  margin-top: 15px;
  padding: 10px 25px;
  background: #0a4aa3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
}

.typing-final button:hover{
  background: #083b82;
}

/* ANIMATION */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}



.progress-wrap{
  width:100%;
  height:10px;
  background:#e0e0e0;
  border-radius:20px;
  overflow:hidden;
  margin:12px 0;
}

.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#2196f3,#00c6ff);
  transition:width 0.4s linear;
}






.typing-box{
  max-width:850px;
  margin:30px auto;
  background:#ffffff;
  padding:25px 30px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.typing-title{
  text-align:center;
  font-size:22px;
  font-weight:700;
  margin-bottom:20px;
  color:#1a237e;
  position:relative;
}

.typing-title::after{
  content:"Typing Speed Test";
  display:block;
  font-size:12px;
  color:#555;
  font-weight:500;
}


.typing-box input,
.typing-box select,
.typing-box textarea{
  width:100%;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:8px;
  border:1.5px solid #ccc;
  font-size:15px;
  transition:0.3s;
}

.typing-box input:focus,
.typing-box select:focus,
.typing-box textarea:focus{
  border-color:#2196f3;
  outline:none;
  box-shadow:0 0 0 2px rgba(33,150,243,.15);
}

.typing-text{
  background:#f8f9fa;
  border-left:5px solid #2196f3;
  padding:15px;
  border-radius:8px;
  margin:15px 0;
  font-size:16px;
  line-height:1.6;
  color:#333;
}

#typingInput{
  height:140px;
  resize:none;
  font-size:16px;
  line-height:1.6;
}

#typingInput:enabled{
  background:#fff;
}

#typingInput:disabled{
  background:#f0f0f0;
}


.typing-result{
  display:flex;
  justify-content:space-between;
  background:#f1f5ff;
  padding:12px 15px;
  border-radius:10px;
  margin-top:12px;
  font-size:14px;
}

.typing-result span{
  font-weight:700;
  color:#0d47a1;
}


.progress-wrap{
  height:12px;
  background:#e3e6ea;
  border-radius:50px;
  overflow:hidden;
}

.progress-bar{
  background:linear-gradient(90deg,#00c6ff,#0072ff);
}

.typing-box button{
  background:linear-gradient(90deg,#0d47a1,#1976d2);
  color:#fff;
  border:none;
  padding:12px;
  width:100%;
  font-size:16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  transition:0.3s;
}

.typing-box button:hover{
  background:linear-gradient(90deg,#1976d2,#0d47a1);
}

.typing-final{
  margin-top:20px;
  background:#fffde7;
  border-left:5px solid #fbc02d;
  padding:15px;
  border-radius:10px;
}

.typing-final h3{
  margin-bottom:10px;
  color:#f57f17;
}



.support-box{
  margin-top: 15px;
  padding: 12px;
  background: #f9f9f9;
  border-left: 4px solid #28a745;
  border-radius: 6px;
}

.support-text{
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

.pay-now-btn{
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(135deg,#28a745,#1e7e34);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 25px;
  transition: 0.3s;
}

.pay-now-btn:hover{
  background: linear-gradient(135deg,#1e7e34,#155724);
  transform: scale(1.05);
}



/* SUPPORT BOX */
.support-box{
  margin-top:15px;
  padding:12px;
  background:#f9f9f9;
  border-left:4px solid #28a745;
  border-radius:6px;
}

.support-text{
  font-size:14px;
  margin-bottom:10px;
}

/* PAY BUTTON */
.pay-now-btn{
  padding:10px 20px;
  border:none;
  background:linear-gradient(135deg,#28a745,#1e7e34);
  color:#fff;
  border-radius:25px;
  font-weight:bold;
  cursor:pointer;
}

/* POPUP BACKGROUND */
.donation-popup,
.thankyou-popup{
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.6);
  z-index:999;
}

/* POPUP BOX */
.donation-box,
.thankyou-box{
  background:#fff;
  width:90%;
  max-width:350px;
  margin:15% auto;
  padding:20px;
  border-radius:10px;
  text-align:center;
  animation:pop 0.3s ease;
}

@keyframes pop{
  from{transform:scale(0.8); opacity:0;}
  to{transform:scale(1); opacity:1;}
}

/* UPI BUTTON */
.upi-btn{
  display:block;
  margin:15px 0;
  padding:12px;
  background:#007bff;
  color:#fff;
  border-radius:20px;
  text-decoration:none;
  font-weight:bold;
}

.close-btn{
  background:none;
  border:none;
  color:#888;
  cursor:pointer;
}



.amount-input{
  width:100%;
  padding:10px;
  margin:10px 0;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:15px;
  text-align:center;
}

.supporter-count{
  margin-top:10px;
  font-size:14px;
  color:#444;
}


.total-collection{
  margin-top:6px;
  font-size:14px;
  color:#2c7a2c;
  font-weight:600;
}



.policy-box{
  max-width:900px;
  margin:auto;
  background:#fff;
  padding:25px;
  border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.policy-box h2{
  text-align:center;
  margin-bottom:15px;
}

.policy-box h3{
  margin-top:20px;
  color:#1e3a8a;
}

.policy-box p, .policy-box li{
  line-height:1.7;
  font-size:15px;
}


.menu-toggle{
  display:none;
  font-size:26px;
  cursor:pointer;
  color:#fff;
}

/* Desktop */
.menu{
  display:flex;
  gap:15px;
}

/* Mobile View */
@media (max-width:768px){
  .menu-toggle{
    display:block;
  }

  .menu{
    display:none;
    flex-direction:column;
    background:#0b3c8a;
    position:absolute;
    top:60px;
    left:0;
    width:100%;
    padding:10px 0;
    z-index:999;
  }

  .menu a{
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,0.2);
    color:#fff;
  }

  .menu.show{
    display:flex;
  }
}



/* ===== Sticky Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #0d47a1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}


/* ===== Bottom Navigation (Mobile Only) ===== */
.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0d47a1;
    justify-content: space-around;
    padding: 6px 0;
    z-index: 1000;
  }

  .bottom-nav button {
    background: none;
    border: none;
    color: #fff;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
  }

  body {
    padding-bottom: 65px; /* bottom nav space */
  }
}



/* ===== Bottom Navigation (Mobile Only) ===== */
.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0d47a1;
    justify-content: space-around;
    padding: 6px 0;
    z-index: 1000;
  }

  .bottom-nav button {
    background: none;
    border: none;
    color: #fff;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
  }

  body {
    padding-bottom: 65px; /* bottom nav space */
  }
}


@media (max-width: 768px) {
  .course-box {
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #fff;
  }
}