:root{
  --bg: #ffffff;
  --text: #000000;
  --muted: #6b6b6b;
  --muted-2: #8a8a8a;
  --accent: #f6f6f6;
  --accent-2: #efefef;
  --btn-bg: #000000;
  --btn-text: #ffffff;
  --card-radius: 12px;
  --shadow: 0 10px 30px rgba(10,10,10,0.06);
  --shadow-sm: 0 6px 18px rgba(10,10,10,0.05);
  --transition: 260ms cubic-bezier(.2,.9,.2,1);
  --space-lg: 5rem;
  --space-md: 3rem;
  --space-sm: 1rem;
  --container-max-width: 1100px;
  --heading-mb: 0.65rem;
  --letter-spacing: 0.2px;
  --border-subtle: 1px solid #ececec;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
} 

html,body{height:100%;background:var(--bg);color:var(--text);}

a{color:inherit}

/* Header */
.topbar{background:#111;color:#fff;font-size:0.85rem;padding:.45rem 0;text-align:center}
.topbar a{color:inherit;text-decoration:underline}
.topbar #topbarClose{background:transparent;border:none;color:#fff;font-size:1rem}
.site-header{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,0.03)}
.navbar{padding:0.8rem 0}
.navbar .navbar-brand{font-size:1rem;display:flex;align-items:center;gap:.6rem}
.navbar .nav-link{padding:.5rem .6rem;color:var(--text);font-weight:500}
.navbar .nav-link:hover{color:var(--muted)}
.logo-mark{display:inline-block;background:#000;color:#fff;padding:6px 10px;border-radius:6px;font-weight:700;letter-spacing:0.5px}
.logo-text{font-weight:700;margin-left:6px;letter-spacing:var(--letter-spacing)}
@media (max-width:767px){
  .topbar{font-size:0.8rem;padding:.35rem 0}
}


/* Hero & Sections */
.section{padding:var(--space-md) 0}
.section-lg{padding:var(--space-lg) 0}
.section-sm{padding:var(--space-sm) 0}

.hero, .identity{position:relative;padding:var(--space-lg) 0}
.identity{background:#111;color:#fff}
.identity .display-4{font-size:2.5rem;line-height:1.06;margin-bottom:var(--heading-mb);letter-spacing:var(--letter-spacing)}
.identity p.lead{color:rgba(255,255,255,0.9);max-width:56ch}
.identity-visual{transition:var(--transition);border-radius:12px;overflow:hidden;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.identity .overlay{mix-blend-mode:multiply}

.section h2{font-weight:600;margin-bottom:0.6rem}
.section h2::after{content:'';display:block;height:1px;background:#e9e9e9;margin-top:0.9rem;width:48px}
.section .section-sub{color:var(--muted);margin-bottom:1rem}

/* container width for better measure */
.container{max-width:var(--container-max-width)}

.lead{margin-bottom:1.25rem;color:var(--muted);font-size:1.02rem}


/* Cards and institutes */
.card{padding:1.25rem;border-radius:var(--card-radius);background:#fff}
.card.shadow-sm{box-shadow:var(--shadow-sm)}
.institute-card{display:flex;flex-direction:column;border:1px solid #eee;border-left:6px solid #000;padding:1rem;border-radius:10px;transition:var(--transition);min-height:150px;background:#fff}
.institute-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.institute-card h5{margin-bottom:.35rem;font-weight:700;color:var(--text)}
.institute-card .addr{color:var(--muted);margin-bottom:.5rem}
.institute-card .visit-btn{border-radius:8px;padding:.4rem .7rem}
@media (max-width:767px){ .institute-card{min-height:auto;padding:.85rem} }
 

/* Buttons & CTA */
.btn-dark{background:#000;color:#fff;border:none;padding:.6rem 1.1rem;font-weight:600;border-radius:8px;transition:transform var(--transition), box-shadow var(--transition)}
.btn-dark:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.btn-outline-dark{border:1px solid #111;color:#111;padding:.45rem .9rem;border-radius:8px}
.btn-outline-dark:hover{background:#111;color:#fff}
.btn-sm{padding:.45rem .7rem}
.cta-lg{background:#fff;border-radius:12px;padding:1.2rem}

/* Footer */
.site-footer{padding:3.5rem 0;background:#0b0b0b;color:#f1f1f1}
.site-footer.border-top{border-top:1px solid rgba(255,255,255,0.06)}
.site-footer .social-icon{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:inherit}
.site-footer .social-icon:hover{background:#fff;color:#0b0b0b;border-color:#fff}
.site-footer h6, .site-footer .fw-bold{margin-bottom:.8rem;color:#fff}
.site-footer a{color:inherit}
.site-footer a:hover{text-decoration:underline;color:#fff}
.site-footer small, .site-footer p, .site-footer li, .site-footer .small, .site-footer .form-text { color: #fff }
.site-footer .form-control { border-radius:8px; padding:.45rem .6rem; background:rgba(255,255,255,0.03); color:#fff; border:1px solid rgba(255,255,255,0.08) }
.site-footer .form-control::placeholder { color: rgba(255,255,255,0.7) }
.site-footer .btn { color:#fff; background:transparent; border:1px solid rgba(255,255,255,0.12) }
.site-footer .btn-dark { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.12) }
.site-footer .alert{margin-bottom:0;padding:.4rem .7rem;font-size:.9rem;border-radius:8px;background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(255,255,255,0.04)}


/* Form and map */
.map-placeholder{height:180px;border:1px dashed #e9e9e9}

/* Values */
.value-pill{background:var(--accent);border-radius:10px;transition:var(--transition)}

/* Responsive tweaks */
@media (max-width: 767px){
  .hero .hero-title{font-size:1.6rem}
  .hero-divider{display:none}
}

/* subtle reveals */
.card, .hero-title, .institute-card, .founder-card, .value-pill{opacity:1;transform:none}

/* accessibility focus */
a:focus, button:focus, .btn:focus{outline:3px solid rgba(0,0,0,0.08);outline-offset:3px}

/* IDENTITY / HERO */
.identity{position:relative;padding:6rem 0;background:#111;color:#fff;overflow:hidden}
.identity .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.65));z-index:0; background-image: url(https://static.vecteezy.com/system/resources/thumbnails/072/508/820/small/two-hands-shaking-over-a-glowing-blue-background-photo.jpeg);}
.identity .container{position:relative;z-index:2}
.identity-visual{height:320px;background:linear-gradient(90deg,#000 0%, #333 100%);filter:grayscale(100%);opacity:0.1}
.bg-hero{background-image: url('../images/hero-bg.jpg'), url('../images/campus-placeholder.svg');background-size:cover;background-position:center;background-repeat:no-repeat}
.identity .stats h3{font-size:1.5rem}

/* Center hero heading, lead and stats */
.identity .display-4, .identity p.lead, .identity .stats { text-align:center }

/* JOIN HERO / FULL-PAGE CTA */
.join-hero{min-height:100vh;padding:0;position:relative;background-image:linear-gradient(135deg, rgba(12,12,12,0.55), rgba(30,30,30,0.55)), url('../images/campus-placeholder.svg');background-size:cover;background-position:center;display:flex;align-items:center}
.join-hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.55));z-index:0}
.join-hero .container{position:relative;z-index:2}
.join-hero .cta-lg{background:rgba(255,255,255,0.98)}
@media (max-width:767px){
  .join-hero{min-height:60vh;padding:3.5rem 0}
  .join-hero .card{padding:1rem}
  .join-hero form{flex-direction:column;gap:.5rem}
}


/* Institutions with Visit button */
.institute-card{display:flex;flex-direction:column;border:1px solid #f5f5f5}
.institute-card .btn{margin-top:12px}

/* Quick facts (about widget) */
.quick-facts{background:linear-gradient(180deg,#fff,#fbfbfb);border:var(--border-subtle);padding:1rem}
.quick-facts .fact-tile{background:#fff;border-radius:10px;padding:.6rem;transition:var(--transition);border:1px solid #fbfbfb}
.quick-facts .fact-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.quick-facts .icon{width:44px;height:44px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-2);color:var(--text);font-size:1.15rem}
.quick-facts .h5{font-size:1rem;margin:0}
.quick-facts small{color:var(--muted)}
.quick-facts p{margin-top:.6rem;margin-bottom:0.75rem;color:var(--muted)}
.quick-facts .h5.mb-0{font-size:1.05rem;font-weight:700}
.quick-facts .icon i{font-size:1.15rem}
.quick-facts .fact-tile .h5{font-size:1rem;font-weight:700}
.quick-facts .btn{border-radius:8px;padding:.45rem .6rem}

/* Governance */
.card p.small{color:var(--muted)}
.governance-grid .governance-card{min-height:170px;border-radius:12px;border:var(--border-subtle);transition:var(--transition);padding:1.25rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%}
.governance-grid .governance-card h6{font-size:1rem;margin-bottom:.4rem}
.governance-grid .governance-card p{margin:0;color:var(--muted)}
@media (max-width:767px){
  .governance-grid .governance-card{min-height:auto;padding:.9rem}
} 

/* Announcements */
.card ul{padding-left:0; margin:0}
.card ul li{margin-bottom:0.6rem}

/* Announcement list (icon, title, date, action) */
.announce-list{list-style:none;padding:0;margin:0}
.announce-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px dashed #8e8e8e}
.announce-item:last-child{border-bottom:0}
.announce-icon{width:40px;height:40px;border-radius:8px;background:#f5f5f5;display:inline-flex;align-items:center;justify-content:center;color:var(--text);font-size:1.05rem}
.announce-meta{flex:1}
.announce-title{margin:0;font-weight:600;font-size:.95rem}
.announce-date{font-size:.82rem;color:var(--muted)}
.announce-action{margin-left:.5rem;white-space:nowrap}
.announce-item .btn-sm{padding:.35rem .6rem}

/* JOIN CTA & footer subscribe */
.cta-lg form .form-control, .cta-lg form .form-select { min-width:0; border-radius:8px; padding:.45rem .6rem }
.cta-lg .form-control-sm, .cta-lg .form-select-sm { height:38px; }
@media (max-width:767px){ .cta-lg form { flex-direction:column; align-items:stretch } .cta-lg form .form-control, .cta-lg form .form-select { width:100%; } .cta-lg .btn { width:100%; } }

.site-footer .form-control { border-radius:8px; padding:.45rem .6rem }
.site-footer .btn { padding:.45rem .8rem; border-radius:8px }
.site-footer .alert { margin-bottom:0; padding:.4rem .7rem; font-size:.9rem; border-radius:8px }
.site-footer .small { color:var(--muted) }

/* Counters */
.counter{font-weight:700}

@media (max-width:767px){
  .identity{padding:3.5rem 0}
  .identity-visual{height:180px}
  .section{padding:var(--space-sm) 0}
  .section-lg{padding:var(--space-md) 0}
  .section-sm{padding:0.8rem 0}
  .hero .hero-title, .identity .display-4{font-size:1.6rem}
}

/* Section header layout: headings left, 'View all' right */
.section h2.h4, .section h2 { text-align: left; }
.section .section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:1rem; }
.section .section-head .link-dark { margin:0; color: var(--muted); white-space:nowrap; }

/* Breadcrumb styles */
.breadcrumb { background: transparent; padding: 0; margin-bottom: .6rem; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--muted); padding: 0 .4rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: var(--text); }

/* Contact info tiles */
.contact-info .info-tile{background:#fff;border:1px solid #eee;border-radius:10px;padding:.6rem;transition:var(--transition)}
.contact-info .info-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.contact-info .info-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #f0f0f0;font-size:1.1rem}
.contact-info .info-tile .small{color:var(--muted)}
@media (max-width:767px){ .contact-info .col-6{flex:0 0 100%;max-width:100%} }

/* Vision & Mission / Core values */
.values-grid .value-pill{background:#fff;border-radius:10px;border:1px solid #f3f3f3;transition:var(--transition);align-items:flex-start}
.values-grid .value-pill:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.values-grid .value-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--accent-2);font-size:1.05rem;color:var(--text)}
.values-grid .value-pill strong{display:block;margin-bottom:.25rem}

/* About / history timeline and objectives */
.timeline{border-left:3px solid #f1f1f1;padding-left:1rem;margin-top:.6rem}
.timeline-item{padding:.6rem 0;border-bottom:1px dashed #f3f3f3}
.timeline-year{font-weight:700;margin-bottom:.25rem}
.objectives li{margin-bottom:.5rem}

/* Lead quotes (styled pull-quotes for About page) */
.lead-quote{position:relative;background:linear-gradient(180deg,#fff,#fbfbfb);border-left:4px solid #000;padding:1rem 1.05rem;border-radius:10px;margin:0 0 1rem 0}
.lead-quote::before{content:"“";position:absolute;top:-12px;left:12px;font-size:3.5rem;color:rgba(0,0,0,0.03);line-height:1}
.lead-quote .quote-text{font-size:1.15rem;font-style:italic;color:var(--text);margin:0 0 .5rem 0}
.lead-quote .quote-author{display:block;font-size:0.95rem;color:var(--muted);font-weight:600}
.lead-quote.text-right{padding-left:1rem;padding-right:1.25rem;text-align:right}
.lead-quote.text-right::before{left:auto;right:12px}



/* Institutes table / card list */
.table-institutes .logo-sm{height:44px;min-width:44px;object-fit:contain;border-radius:8px}
.table-institutes td small{color:var(--muted)}
.table-institutes tbody tr:hover{background:#fafafa}
@media (max-width:767px){ .table-institutes td{white-space:nowrap} }

/* Institute card grid */
.institute-grid .institute-list-card { border:1px solid #8e8e8e; min-height:260px; display:flex; flex-direction:column }
.institute-grid .institute-list-card .logo-md { width:72px; height:72px; object-fit:contain; border-radius:8px }
.institute-grid .institute-list-card h5{margin-bottom:0.15rem; margin-top:.5rem}
.institute-grid .institute-list-card ul li{margin-bottom:.45rem}
.institute-grid .institute-list-card a{color:var(--text)}
.institute-list-card .text-center { text-align:center }
.institute-list-card ul{ margin-top:auto }
@media (max-width:767px){ .institute-grid .col-sm-6{flex:0 0 100%;max-width:100%} }

/* Careers / Jobs accordion */
.jobs-accordion .accordion-button { padding:1rem 1.25rem }
.jobs-accordion .accordion-button .text-muted{color:var(--muted)}
.jobs-accordion .accordion-body p{margin-bottom:.6rem}
.jobs-accordion .accordion-item{border-radius:8px; overflow:hidden; border:1px solid #8e8e8e}
.jobs-accordion .accordion-item + .accordion-item{margin-top:.75rem}
.jobs-accordion .btn{margin-top:.25rem}
@media (max-width:767px){ .jobs-accordion .accordion-button{ font-size:.95rem } }

/* Tenders accordion */
.tenders-accordion .accordion-button { padding:1rem 1.25rem }
.tenders-accordion .accordion-button .text-muted{color:var(--muted)}
.tenders-accordion .accordion-item{border-radius:8px; overflow:hidden; border:1px solid #8e8e8e}
.tenders-accordion .accordion-item + .accordion-item{margin-top:.75rem}
.tenders-accordion .attachment-list a{display:inline-flex;align-items:center;gap:.5rem}
.tenders-accordion .tender-meta{font-size:.9rem;color:var(--muted)}
.tenders-accordion .btn-download{margin-right:.5rem}
@media (max-width:767px){ .tenders-accordion .accordion-button{ font-size:.95rem } }

/* Heading rhythm */
h1,h2,h3{margin-bottom:0.6rem;line-height:1.15}
.section h2{margin-bottom:1rem}

footer .text-muted, footer .link-dark{color:white !important;}
footer .link-dark:hover{color:white !important;}


/* Slight card padding reduction on small screens */
@media (max-width:480px){
  .card{padding:0.9rem}
}

/* ==========================
   Work Apply / Recruitment Form Styles
   ========================== */

.recruitment-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.step-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e9ecef;
  border: 2px solid #dee2e6;
  font-weight: 600;
  transition: all 0.3s;
}

.step-indicator.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.step-indicator.completed {
  background: #28a745;
  color: white;
  border-color: #28a745;
}

.instruction-box {
  background: #f8f9fa;
  border-left: 4px solid #667eea;
  padding: 1rem;
  margin-bottom: 1rem;
}

.instruction-box h5 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.instruction-box ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.instruction-box ul li {
  margin-bottom: 0.5rem;
  color: var(--text);
}

.instruction-box p {
  margin-bottom: 0.5rem;
}

.verified-badge {
  color: #28a745;
  font-weight: 600;
}

.screen-container {
  min-height: 400px;
}

.form-step {
  animation: fadeIn 0.3s ease-in;
}

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

/* Form styling */
.form-step h4 {
  color: var(--text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}

.form-step h6 {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-step .form-label {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.form-step .text-danger {
  color: #dc3545;
}

.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="tel"],
.form-step input[type="date"],
.form-step input[type="number"],
.form-step input[type="file"],
.form-step select,
.form-step textarea {
  border-radius: 8px;
  border: 1px solid #dee2e6;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-step input:focus,
.form-step select:focus,
.form-step textarea:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}

.form-step .input-group .btn {
  border-radius: 0 8px 8px 0;
}

.form-step .verified-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

/* Progress bar styling */
#formProgress {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  transition: width 0.4s ease;
}

/* Button styling for recruitment form */
.recruitment-header + .container .btn-primary {
  background: #667eea;
  border-color: #667eea;
  transition: all 0.3s;
}

.recruitment-header + .container .btn-primary:hover {
  background: #5568d3;
  border-color: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.recruitment-header + .container .btn-success {
  background: #28a745;
  border-color: #28a745;
}

.recruitment-header + .container .btn-success:hover {
  background: #218838;
  border-color: #1e7e34;
}

/* Success screen styling */
#screen-success .bi-check-circle-fill {
  color: #28a745;
}

#screen-success .alert-info {
  background: #e7f3ff;
  border-color: #b3d9ff;
  color: #004085;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .recruitment-header h1 {
    font-size: 1.5rem;
  }
  
  .recruitment-header p {
    font-size: 0.9rem;
  }
  
  .step-indicator {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .instruction-box {
    padding: 0.75rem;
  }
  
  .form-step h4 {
    font-size: 1.25rem;
  }
}

@media (max-width: 576px) {
  .recruitment-header {
    padding: 1.5rem 0;
  }
  
  .d-flex.gap-2 {
    flex-direction: column;
    gap: 0.5rem !important;
  }
  
  .form-step .row.g-3 {
    row-gap: 1rem !important;
  }
}