@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--navy:#061633;--navy2:#071735;--blue:#0b214f;--red:#e60012;--red2:#b8040d;--soft:#f7f9fc;--soft2:#f1f4fa;--text:#071735;--muted:#4d5870;--line:#e5e9f2;--white:#fff;--shadow:0 10px 30px rgba(0,0,0,.12);--shadow2:0 5px 20px rgba(0,0,0,.07);--radius:14px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--soft);line-height:1.55}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.topbar{background:var(--navy);color:#fff;padding:10px 6%;display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:14px}.topbar__left,.topbar__right{display:flex;gap:25px;align-items:center;flex-wrap:wrap}.topbar__social{display:flex;gap:14px;align-items:center}.topbar__cta{background:var(--red);color:#fff;padding:10px 22px;font-weight:900;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}.site-header{background:#fff;padding:18px 6%;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 15px rgba(0,0,0,.08);position:sticky;top:0;z-index:30}.logo{display:block;font-weight:900;color:var(--text);line-height:.9;letter-spacing:-2px}.logo strong{display:block;font-size:42px}.logo span{display:block;color:var(--red);font-size:18px;letter-spacing:2px}.nav{display:flex;align-items:center;gap:0}.nav a{margin:0 13px;color:var(--text);font-weight:700;font-size:14px;padding:14px 0;border-bottom:3px solid transparent}.nav a:hover,.nav a.active{color:var(--red);border-color:var(--red)}.btn{background:var(--red);color:#fff;padding:14px 24px;border-radius:6px;text-decoration:none;font-weight:900;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer}.btn:hover{background:var(--red2)}.btn-outline{border:1px solid #fff;color:#fff;padding:14px 24px;border-radius:6px;text-decoration:none;margin-left:10px;font-weight:900;display:inline-flex}.btn-outline:hover{background:#fff;color:var(--navy)}.menu-btn{display:none;background:none;border:0;color:var(--navy);font-size:34px}.search-icon{font-size:20px;font-weight:900;color:var(--navy);margin-left:6px}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:520px;background:var(--navy);color:#fff}.hero-text{padding:90px 6%}.hero-text h5{color:var(--red);font-size:24px;margin-bottom:15px;text-transform:uppercase}.hero-text h1{font-size:68px;line-height:1;margin-bottom:20px;text-transform:uppercase;letter-spacing:-2px}.hero-text p{max-width:560px;line-height:1.7;margin-bottom:30px;color:#eef3ff}.hero-img{background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05)),url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80') center/cover}.feature-bar{width:90%;margin:-45px auto 40px;background:#fff;border-radius:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(6,1fr);padding:25px;gap:15px;text-align:center;position:relative;z-index:5}.feature{border-right:1px solid #ddd;font-weight:800;font-size:14px}.feature:last-child{border-right:0}.feature span{display:block;color:var(--red);font-size:28px;margin-bottom:8px}.page-hero{background:linear-gradient(135deg,var(--navy),#09265c);min-height:190px;color:#fff;padding:50px 6%;display:flex;align-items:center}.page-hero small{color:#dce6ff;text-transform:uppercase;font-weight:800;letter-spacing:1px}.page-hero h1{font-size:46px;line-height:1.1;margin-top:5px}.page-hero p{color:#dce6ff;margin-top:8px;max-width:720px}.section{padding:55px 6%}.section.white{background:#fff}.section-title{margin-bottom:25px}.section-title.center{text-align:center}.section-title small,.eyebrow{color:var(--red);font-weight:900;letter-spacing:1px;text-transform:uppercase}.section-title h2{font-size:36px;line-height:1.1}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card{background:#fff;padding:25px;border-radius:12px;box-shadow:var(--shadow2);border:1px solid var(--line)}.card-icon{width:55px;height:55px;background:var(--red);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:24px;margin-bottom:15px}.card h3{margin-bottom:10px}.card p{color:var(--muted);line-height:1.5}.content-row{display:grid;grid-template-columns:1fr 420px;gap:30px;margin-top:30px}.training-list{background:#fff;padding:25px;border-radius:12px;box-shadow:var(--shadow2)}.training-list li{list-style:none;padding:13px 0;border-bottom:1px solid var(--line);font-weight:700}.training-list li::before{content:'✓';color:var(--red);margin-right:10px;font-weight:900}.stats-panel{background:var(--navy);color:#fff;border-radius:14px;padding:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.stat h3{color:#fff;font-size:32px}.stat p{color:#d7dce8}.stats-strip{width:88%;margin:40px auto;background:linear-gradient(135deg,var(--navy),#09265c);color:#fff;border-radius:14px;display:grid;grid-template-columns:repeat(5,1fr);box-shadow:var(--shadow);overflow:hidden}.stats-strip div{text-align:center;padding:26px 15px;border-right:1px solid rgba(255,255,255,.17)}.stats-strip div:last-child{border-right:0}.stats-strip strong{display:block;font-size:32px}.stats-strip span{font-size:13px;color:#dce6ff}.cta{margin-top:40px;background:linear-gradient(135deg,var(--red),var(--navy));color:#fff;padding:45px 6%;display:flex;justify-content:space-between;align-items:center}.cta p{color:#f5dbe0}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:35px;align-items:center}.split p{color:var(--muted);margin:14px 0}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 8px 24px rgba(6,23,56,.06);margin-bottom:25px}.filters input,.filters select{min-height:48px;border:1px solid var(--line);border-radius:6px;padding:0 14px;width:100%;background:#fff}.filter-label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:800}.category-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:24px}.category-buttons button{background:#fff;border:1px solid var(--line);border-radius:9px;padding:15px 10px;font-weight:800;color:var(--navy);cursor:pointer;box-shadow:0 4px 12px rgba(6,23,56,.04)}.category-buttons button.active,.category-buttons button:hover{background:var(--navy);color:#fff}.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.course-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(6,23,56,.06);transition:.2s}.course-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.course-img{height:135px;background:linear-gradient(135deg,var(--navy),var(--red));color:#fff;display:flex;align-items:center;justify-content:center;font-size:46px;position:relative}.course-img small{position:absolute;top:10px;left:10px;background:var(--navy);padding:5px 10px;border-radius:20px;font-size:10px;font-weight:900}.course-body{padding:18px}.course-body h3{font-size:18px}.course-body p{font-size:13px;color:var(--muted);min-height:58px;margin:8px 0}.course-meta{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px;color:var(--muted);font-size:12px}.course-actions{display:flex;gap:8px;margin-top:14px}.course-actions a{flex:1;text-align:center;padding:10px;border-radius:6px;font-size:12px;font-weight:900}.course-actions .view{background:var(--navy);color:#fff}.course-actions .apply{background:var(--red);color:#fff}.corporate-card{background:linear-gradient(135deg,var(--navy),#09265c);color:#fff;border-radius:18px;padding:38px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;box-shadow:var(--shadow)}.corporate-card p{color:#dce6ff;margin-top:12px}.corporate-card ul{list-style:none;display:grid;gap:11px;font-weight:800}.accreditation-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-align:center}.accreditation-grid .card h3{color:var(--red);font-size:18px}.badge{display:inline-block;margin-top:12px;background:#eaf8ef;color:#137333;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}.newsletter{width:90%;margin:35px auto;border-radius:12px;background:linear-gradient(135deg,var(--navy),#09265c);color:#fff;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.newsletter form{display:flex;gap:10px}.newsletter input{flex:1;min-height:48px;border:0;border-radius:6px;padding:0 14px}.newsletter button{background:var(--red);color:#fff;border:0;border-radius:6px;padding:0 20px;font-weight:900}.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px}.contact-list{list-style:none;display:grid;gap:12px;margin-top:18px;font-weight:700}.contact-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--shadow2);display:grid;gap:14px}.contact-form input,.contact-form select,.contact-form textarea{border:1px solid var(--line);border-radius:7px;padding:14px;width:100%}.contact-form textarea{min-height:120px}.map-placeholder{background:#e9eef7;border:1px dashed #c7d0df;border-radius:12px;min-height:220px;display:grid;place-items:center;color:var(--muted);font-weight:800}.footer{background:var(--navy);color:#fff;padding:35px 6%;display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:30px}.footer h2{font-size:42px;line-height:.9}.footer a{display:block;color:#dbe7ff;margin:7px 0;font-size:14px}.footer p,.footer small{color:#dbe7ff}.back-top{position:fixed;right:20px;bottom:20px;background:var(--red);color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;box-shadow:var(--shadow);z-index:40}.toast{position:fixed;right:20px;bottom:70px;background:var(--navy);color:#fff;padding:14px 20px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(15px);transition:.25s;z-index:50}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:1150px){.nav a{margin:0 8px;font-size:13px}.course-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.topbar{display:none}.site-header{padding:15px 5%}.menu-btn{display:block}.nav{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:20px 6%;box-shadow:var(--shadow)}.nav.open{display:flex}.nav a{margin:0;padding:10px 0}.header-cta,.search-icon{display:none}.hero{grid-template-columns:1fr}.hero-text h1{font-size:46px}.feature-bar,.grid,.grid-4,.content-row,.stats-strip,.split,.feature-grid,.filters,.category-buttons,.corporate-card,.accreditation-grid,.newsletter,.contact-layout,.footer{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid #ddd;padding-bottom:15px}.course-grid{grid-template-columns:1fr}.cta{flex-direction:column;gap:20px;text-align:center}.newsletter form{flex-direction:column}}


/* =========================================================
   FINAL MUPO HEADER FIX
   Goal: professional compact header, no logo/nav overlap,
   no cut-off Apply button, stable at desktop widths.
   ========================================================= */
html,body{
  max-width:100%;
  overflow-x:hidden;
}
.topbar{
  background:#061633 !important;
  color:#ffffff !important;
  height:50px !important;
  min-height:50px !important;
  padding:0 6% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:none !important;
}
.topbar__left{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  align-items:center !important;
  gap:18px !important;
}
.topbar__left span{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.topbar__left span:nth-child(1){text-align:left !important;}
.topbar__left span:nth-child(2){text-align:center !important;}
.topbar__left span:nth-child(3){text-align:right !important;}
.topbar__right{display:none !important;}
.site-header{
  position:relative !important;
  top:auto !important;
  z-index:30 !important;
  width:100% !important;
  height:112px !important;
  min-height:112px !important;
  padding:0 6% !important;
  background:#ffffff !important;
  box-shadow:none !important;
  border-bottom:0 !important;
  display:grid !important;
  grid-template-columns:minmax(260px, 330px) minmax(0, 1fr) 164px !important;
  align-items:center !important;
  column-gap:clamp(16px, 2vw, 34px) !important;
}
.logo{
  display:block !important;
  width:100% !important;
  max-width:330px !important;
  justify-self:start !important;
  color:#061633 !important;
  line-height:.86 !important;
  letter-spacing:-2px !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
.logo strong{
  display:block !important;
  font-size:clamp(42px, 3.1vw, 56px) !important;
  font-weight:900 !important;
  color:#061633 !important;
  line-height:.82 !important;
  letter-spacing:-2px !important;
}
.logo span{
  display:block !important;
  margin-top:7px !important;
  color:#e60012 !important;
  font-size:clamp(15px, 1.05vw, 19px) !important;
  font-weight:900 !important;
  letter-spacing:clamp(3px, .28vw, 5px) !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.nav{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(12px, 1.7vw, 32px) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.nav a{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  color:#061633 !important;
  font-size:clamp(14px, .98vw, 18px) !important;
  font-weight:800 !important;
  line-height:1 !important;
  border:0 !important;
  text-decoration:none !important;
}
.nav a:hover,
.nav a.active{
  color:#061633 !important;
  border:0 !important;
}
.header-cta{
  justify-self:end !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:164px !important;
  height:58px !important;
  min-height:58px !important;
  padding:0 18px !important;
  border-radius:7px !important;
  background:#e60012 !important;
  color:#ffffff !important;
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
.search-icon{display:none !important;}
.menu-btn{display:none !important;}
@media(max-width:1500px){
  .topbar{font-size:15px !important;height:48px !important;min-height:48px !important;padding:0 5.5% !important;}
  .site-header{
    height:108px !important;
    min-height:108px !important;
    padding:0 5.5% !important;
    grid-template-columns:minmax(238px, 292px) minmax(0, 1fr) 148px !important;
    column-gap:18px !important;
  }
  .header-cta{width:148px !important;height:56px !important;min-height:56px !important;font-size:18px !important;}
}
@media(max-width:1260px){
  .site-header{
    padding:0 4% !important;
    grid-template-columns:240px minmax(0, 1fr) 130px !important;
    column-gap:12px !important;
  }
  .logo strong{font-size:42px !important;}
  .logo span{font-size:15px !important;letter-spacing:3px !important;}
  .nav{gap:11px !important;}
  .nav a{font-size:13px !important;}
  .header-cta{width:130px !important;height:52px !important;min-height:52px !important;font-size:16px !important;}
}
@media(max-width:1060px){
  .topbar{display:none !important;}
  .site-header{
    height:86px !important;
    min-height:86px !important;
    padding:12px 5% !important;
    display:flex !important;
    align-items:center !important;
    position:relative !important;
  }
  .logo{width:auto !important;max-width:none !important;}
  .logo strong{font-size:42px !important;}
  .logo span{font-size:15px !important;letter-spacing:3px !important;}
  .menu-btn{display:block !important;margin-left:auto !important;background:none !important;border:0 !important;color:#061633 !important;font-size:34px !important;}
  .nav{
    display:none !important;
    position:absolute !important;
    top:86px !important;
    left:0 !important;
    right:0 !important;
    background:#ffffff !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:20px 6% !important;
    box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
    gap:0 !important;
    z-index:50 !important;
    overflow:visible !important;
  }
  .nav.open{display:flex !important;}
  .nav a{font-size:16px !important;padding:10px 0 !important;}
  .header-cta,.search-icon{display:none !important;}
}

/* =========================================================
   STICKY / FIXED HEADER UPDATE
   Keeps the MUPO top contact bar + main navigation visible
   while scrolling, with safe spacing so content is not hidden.
   ========================================================= */
body{
  padding-top:162px !important;
}
.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1000 !important;
}
.site-header{
  position:fixed !important;
  top:50px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:999 !important;
  box-shadow:0 6px 18px rgba(6,22,51,.10) !important;
}
section,
.page-hero{
  scroll-margin-top:180px !important;
}
@media(max-width:1500px){
  body{padding-top:156px !important;}
  .site-header{top:48px !important;}
  section,.page-hero{scroll-margin-top:174px !important;}
}
@media(max-width:1060px){
  body{padding-top:86px !important;}
  .topbar{display:none !important;}
  .site-header{top:0 !important;}
  .nav{top:86px !important;}
  section,.page-hero{scroll-margin-top:104px !important;}
}



/* ===== Professional icon normalization: no emoji look ===== */
.topbar i,
.card-icon i,
.category-card i,
.services-grid i,
.feature span i,
.contact-list i,
.play-btn i,
.search-btn i,
.menu-btn i,
.back-to-top i {
  font-style: normal;
  line-height: 1;
}

.card-icon {
  font-size: 0 !important;
}

.card-icon i {
  font-size: 24px;
}

.feature span,
.category-card > i,
.services-grid article > i,
.services-grid article > span i {
  color: #e30613;
}

@media (max-width: 1100px) {
  .footer__main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .footer__main {
    grid-template-columns: 1fr;
    padding: 50px 0 36px;
  }

  .footer__bottom {
    flex-direction: column;
  }

  .footer__bottom a {
    margin-left: 0;
    margin-right: 16px;
  }

  .footer__logo img {
    height: 62px;
  }
}



/* =========================
   Clean Professional Footer
   ========================= */
footer.mupo-footer,
.mupo-footer {
  background: #061738 !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
}

.mupo-footer__wrap {
  width: min(1500px, 88%);
  margin: 0 auto;
  padding: 64px 0 44px;
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(170px, .8fr) minmax(220px, 1fr) minmax(360px, 1.35fr);
  column-gap: 58px;
  row-gap: 34px;
  align-items: start;
}

.mupo-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  width: 205px;
  min-height: 96px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.mupo-footer__logo img {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.mupo-footer__about p {
  color: #d9e2f1 !important;
  font-size: 16px;
  line-height: 1.75;
  max-width: 330px;
  margin: 0 0 26px;
}

.mupo-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mupo-footer__social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  transition: all .2s ease;
}

.mupo-footer__social a:hover {
  background: #e30613;
  border-color: #e30613;
  transform: translateY(-2px);
}

.mupo-footer h3 {
  color: #ffffff !important;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 26px;
  padding-bottom: 16px;
  position: relative;
}

.mupo-footer h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: #e30613;
}

.mupo-footer__links a {
  display: block;
  color: #d9e2f1 !important;
  text-decoration: none !important;
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 13px;
  transition: all .2s ease;
}

.mupo-footer__links a:hover {
  color: #ffffff !important;
  transform: translateX(5px);
}

.mupo-footer__contact p {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: #d9e2f1 !important;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 460px;
}

.mupo-footer__contact i {
  color: #e30613 !important;
  margin-top: 4px;
  text-align: center;
}

.mupo-footer__bottom {
  width: min(1500px, 88%);
  margin: 0 auto;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: #cbd6e9 !important;
  font-size: 15px;
}

.mupo-footer__bottom p {
  margin: 0 !important;
  color: #cbd6e9 !important;
}

.mupo-footer__bottom div {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.mupo-footer__bottom a {
  color: #cbd6e9 !important;
  text-decoration: none !important;
  margin: 0 !important;
}

.mupo-footer__bottom a:hover {
  color: #ffffff !important;
}

/* Prevent old footer layouts from affecting the new footer */
.footer__main,
.footer__brand,
.footer__col,
.footer__bottom {
  all: unset;
}

/* Professional icon styling */
.topbar i,
.card-icon i,
.category-card i,
.services-grid i,
.contact-list i,
.play-btn i,
.search-btn i,
.menu-btn i,
.back-to-top i {
  font-style: normal;
  line-height: 1;
}

@media (max-width: 1200px) {
  .mupo-footer__wrap {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .mupo-footer__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 850px) {
  .mupo-footer__wrap {
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
  }

  .mupo-footer__about,
  .mupo-footer__contact {
    grid-column: 1 / -1;
  }

  .mupo-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .mupo-footer__wrap {
    grid-template-columns: 1fr;
    padding: 48px 0 34px;
  }

  .mupo-footer__logo {
    width: 185px;
    min-height: 84px;
  }

  .mupo-footer__logo img {
    width: 150px;
  }

  .mupo-footer__bottom div {
    gap: 14px;
  }
}



/* ===== Home hero right image: bulb.jpg ===== */
.hero-img,
.hero__image,
.hero-image,
.hero-right,
.hero__visual,
.mupo-hero__image {
  background-image: linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0.04)), url("../images/bulb.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}





/* =========================
   MUPO Rebuilt Professional Header
   ========================= */
body {
  padding-top: 158px !important;
}

.mupo-site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  background: #ffffff !important;
  box-shadow: 0 4px 18px rgba(6, 23, 56, 0.10) !important;
}

.mupo-topbar {
  background: #061738 !important;
  color: #ffffff !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
}

.mupo-topbar__inner {
  width: min(1660px, 88%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center !important;
  gap: 18px !important;
}

.mupo-topbar__inner a {
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.mupo-topbar__inner a:nth-child(2) {
  justify-content: center !important;
}

.mupo-topbar__inner a:nth-child(3) {
  justify-content: flex-end !important;
}

.mupo-topbar__inner i {
  color: #ffffff !important;
  font-size: 15px !important;
}

.mupo-navbar {
  background: #ffffff !important;
  min-height: 108px !important;
  display: flex !important;
  align-items: center !important;
}

.mupo-navbar__inner {
  width: min(1660px, 88%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 310px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 28px !important;
}

.mupo-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 260px !important;
  text-decoration: none !important;
}

.mupo-logo img {
  display: block !important;
  width: 170px !important;
  height: auto !important;
  object-fit: contain !important;
}

.mupo-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 1.7vw, 34px) !important;
  min-width: 0 !important;
}

.mupo-nav a {
  color: #061738 !important;
  text-decoration: none !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  position: relative !important;
  padding: 12px 0 !important;
}

.mupo-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 2px !important;
  width: 0 !important;
  height: 3px !important;
  background: #e30613 !important;
  border-radius: 999px !important;
  transition: width .2s ease !important;
}

.mupo-nav a:hover::after,
.mupo-nav a.active::after {
  width: 100% !important;
}

.mupo-auth {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

.mupo-auth a {
  height: 50px !important;
  min-width: 108px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  transition: all .2s ease !important;
}

.mupo-auth__login {
  background: #ffffff !important;
  color: #061738 !important;
  border: 2px solid #061738 !important;
}

.mupo-auth__login:hover {
  background: #061738 !important;
  color: #ffffff !important;
}

.mupo-auth__signup {
  background: #e30613 !important;
  color: #ffffff !important;
  border: 2px solid #e30613 !important;
}

.mupo-auth__signup:hover {
  background: #b8040d !important;
  border-color: #b8040d !important;
}

.mupo-menu-toggle {
  display: none !important;
  border: 0 !important;
  background: #061738 !important;
  color: #ffffff !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 20px !important;
}

/* Hide old broken header elements if any remain */
.topbar:not(.mupo-topbar),
.navbar:not(.mupo-navbar),
.header-auth,
.btn[href="#"],
.topbar__left,
.topbar__right,
.navlinks {
  /* not forced hidden globally to avoid breaking body content */
}

/* Keep first hero clear below fixed header */
.hero,
.mupo-hero,
main > section:first-child {
  scroll-margin-top: 165px !important;
}

@media (max-width: 1450px) {
  .mupo-navbar__inner {
    grid-template-columns: 240px minmax(0, 1fr) auto !important;
    gap: 22px !important;
  }

  .mupo-logo img {
    width: 155px !important;
  }

  .mupo-nav {
    gap: 20px !important;
  }

  .mupo-nav a {
    font-size: 16px !important;
  }

  .mupo-auth a {
    min-width: 96px !important;
    padding: 0 18px !important;
  }
}

@media (max-width: 1200px) {
  body {
    padding-top: 146px !important;
  }

  .mupo-topbar {
    height: 46px !important;
  }

  .mupo-topbar__inner a {
    font-size: 14px !important;
  }

  .mupo-navbar {
    min-height: 100px !important;
  }

  .mupo-navbar__inner {
    grid-template-columns: 190px 1fr auto !important;
    gap: 14px !important;
  }

  .mupo-logo img {
    width: 140px !important;
  }

  .mupo-nav {
    gap: 14px !important;
  }

  .mupo-nav a {
    font-size: 14px !important;
  }

  .mupo-auth {
    gap: 8px !important;
  }

  .mupo-auth a {
    height: 44px !important;
    min-width: 84px !important;
    padding: 0 13px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 980px) {
  body {
    padding-top: 142px !important;
  }

  .mupo-topbar__inner {
    width: 94% !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 3px !important;
  }

  .mupo-topbar {
    height: auto !important;
    padding: 8px 0 !important;
  }

  .mupo-topbar__inner a:nth-child(2),
  .mupo-topbar__inner a:nth-child(3) {
    justify-content: center !important;
  }

  .mupo-topbar__inner a {
    font-size: 13px !important;
  }

  .mupo-navbar {
    min-height: 86px !important;
  }

  .mupo-navbar__inner {
    width: 94% !important;
    grid-template-columns: auto auto auto !important;
  }

  .mupo-logo img {
    width: 132px !important;
  }

  .mupo-menu-toggle {
    display: inline-flex !important;
    order: 3 !important;
  }

  .mupo-nav {
    display: none !important;
    grid-column: 1 / -1 !important;
    order: 4 !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border-top: 1px solid #e6eaf2 !important;
    padding: 14px 0 !important;
    gap: 0 !important;
  }

  .mupo-nav.is-open {
    display: flex !important;
  }

  .mupo-nav a {
    padding: 14px 4px !important;
    border-bottom: 1px solid #eef1f6 !important;
  }

  .mupo-auth {
    margin-left: auto !important;
    order: 2 !important;
  }

  .mupo-auth a {
    height: 42px !important;
    min-width: 86px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 620px) {
  body {
    padding-top: 178px !important;
  }

  .mupo-navbar__inner {
    grid-template-columns: 1fr auto !important;
    row-gap: 10px !important;
  }

  .mupo-logo {
    grid-column: 1 !important;
  }

  .mupo-menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .mupo-auth {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
    order: 3 !important;
  }

  .mupo-auth a {
    flex: 1 !important;
    max-width: 170px !important;
  }

  .mupo-nav {
    grid-column: 1 / -1 !important;
  }
}



/* ===== Final header spacing fix: Login / Sign Up ===== */
.mupo-navbar__inner {
  grid-template-columns: 250px minmax(0, 1fr) 250px !important;
  gap: 24px !important;
}

.mupo-logo img {
  width: 155px !important;
}

.mupo-nav {
  justify-content: center !important;
  gap: clamp(16px, 1.35vw, 28px) !important;
}

.mupo-nav a {
  font-size: 16px !important;
}

.mupo-auth {
  justify-content: flex-end !important;
  gap: 10px !important;
}

.mupo-auth a {
  height: 48px !important;
  min-width: 96px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
}

.mupo-auth__login {
  background: #ffffff !important;
  color: #061738 !important;
  border: 2px solid #061738 !important;
}

.mupo-auth__signup {
  background: #e30613 !important;
  color: #ffffff !important;
  border: 2px solid #e30613 !important;
}

.mupo-auth__signup:hover {
  background: #b8040d !important;
  border-color: #b8040d !important;
}

@media (max-width: 1350px) {
  .mupo-navbar__inner {
    grid-template-columns: 210px minmax(0, 1fr) 220px !important;
    gap: 18px !important;
  }

  .mupo-logo img {
    width: 140px !important;
  }

  .mupo-nav {
    gap: 14px !important;
  }

  .mupo-nav a {
    font-size: 14px !important;
  }

  .mupo-auth a {
    min-width: 86px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 1100px) {
  .mupo-navbar__inner {
    grid-template-columns: auto auto auto !important;
  }
}

.mupo-nav a.active-page{color:#e30613!important;}
.mupo-nav a.active-page::after{width:100%!important;background:#e30613!important;}


/* ===== InfixLMS Mupo Integration Overrides ===== */
body{padding-top:158px!important;}
.mupo-site-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:9999!important;width:100%!important;background:#fff!important;box-shadow:0 4px 18px rgba(6,23,56,.10)!important;}
.mupo-topbar{background:#061738!important;color:#fff!important;height:50px!important;display:flex!important;align-items:center!important;}
.mupo-topbar__inner{width:min(1660px,88%)!important;margin:0 auto!important;display:grid!important;grid-template-columns:1fr 1fr 1fr!important;align-items:center!important;gap:18px!important;}
.mupo-topbar__inner a{color:#fff!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;gap:8px!important;font-size:16px!important;font-weight:800!important;white-space:nowrap!important;}
.mupo-topbar__inner a:nth-child(2){justify-content:center!important;}.mupo-topbar__inner a:nth-child(3){justify-content:flex-end!important;}.mupo-topbar__inner i{color:#fff!important;font-size:15px!important;}
.mupo-navbar{background:#fff!important;min-height:108px!important;display:flex!important;align-items:center!important;}
.mupo-navbar__inner{width:min(1660px,88%)!important;margin:0 auto!important;display:grid!important;grid-template-columns:250px minmax(0,1fr) 250px!important;align-items:center!important;gap:24px!important;}
.mupo-logo{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;width:250px!important;text-decoration:none!important;}.mupo-logo img{display:block!important;width:155px!important;height:auto!important;object-fit:contain!important;}
.mupo-nav{display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(16px,1.35vw,28px)!important;min-width:0!important;}
.mupo-nav a{color:#061738!important;text-decoration:none!important;font-size:16px!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important;position:relative!important;padding:12px 0!important;}
.mupo-nav a::after{content:""!important;position:absolute!important;left:0!important;bottom:2px!important;width:0!important;height:3px!important;background:#e30613!important;border-radius:999px!important;transition:width .2s ease!important;}
.mupo-nav a:hover,.mupo-nav a.active-page{color:#e30613!important;}.mupo-nav a:hover::after,.mupo-nav a.active-page::after{width:100%!important;}
.mupo-auth{display:inline-flex!important;align-items:center!important;gap:10px!important;justify-content:flex-end!important;}
.mupo-auth a{height:48px!important;min-width:96px!important;padding:0 18px!important;border-radius:8px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;font-size:15px!important;font-weight:900!important;white-space:nowrap!important;transition:all .2s ease!important;}
.mupo-auth__login{background:#fff!important;color:#061738!important;border:2px solid #061738!important;}.mupo-auth__login:hover{background:#061738!important;color:#fff!important;}
.mupo-auth__signup{background:#e30613!important;color:#fff!important;border:2px solid #e30613!important;}.mupo-auth__signup:hover{background:#b8040d!important;border-color:#b8040d!important;}
.mupo-menu-toggle{display:none!important;border:0!important;background:#061738!important;color:#fff!important;width:46px!important;height:46px!important;border-radius:8px!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;font-size:20px!important;}
.mupo-course-empty{grid-column:1/-1;background:#fff;border:1px dashed #ccd6e6;border-radius:12px;padding:35px;text-align:center;color:#4d5870;font-weight:700;}
.mupo-course-pagination{margin-top:30px;display:flex;justify-content:center}.mupo-course-pagination nav{display:flex}.mupo-course-pagination .pagination{display:flex;gap:8px;list-style:none;padding:0;margin:0}.mupo-course-pagination .page-link{background:#fff;border:1px solid #e5e9f2;color:#061738;border-radius:7px;padding:8px 12px;text-decoration:none}.mupo-course-pagination .active .page-link{background:#e30613;color:#fff;border-color:#e30613}.course-img img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:1350px){.mupo-navbar__inner{grid-template-columns:210px minmax(0,1fr) 220px!important;gap:18px!important}.mupo-logo img{width:140px!important}.mupo-nav{gap:14px!important}.mupo-nav a{font-size:14px!important}.mupo-auth a{min-width:86px!important;padding:0 14px!important;font-size:14px!important}}
@media(max-width:1100px){.mupo-navbar__inner{grid-template-columns:auto auto auto!important}}
@media(max-width:980px){body{padding-top:142px!important}.mupo-topbar{height:auto!important;padding:8px 0!important}.mupo-topbar__inner{width:94%!important;grid-template-columns:1fr!important;justify-items:center!important;gap:3px!important}.mupo-topbar__inner a:nth-child(2),.mupo-topbar__inner a:nth-child(3){justify-content:center!important}.mupo-topbar__inner a{font-size:13px!important}.mupo-navbar{min-height:86px!important}.mupo-navbar__inner{width:94%!important;grid-template-columns:auto auto auto!important}.mupo-logo img{width:132px!important}.mupo-menu-toggle{display:inline-flex!important;order:3!important}.mupo-nav{display:none!important;grid-column:1/-1!important;order:4!important;width:100%!important;flex-direction:column!important;align-items:stretch!important;background:#fff!important;border-top:1px solid #e6eaf2!important;padding:14px 0!important;gap:0!important}.mupo-nav.is-open{display:flex!important}.mupo-nav a{padding:14px 4px!important;border-bottom:1px solid #eef1f6!important}.mupo-auth{margin-left:auto!important;order:2!important}.mupo-auth a{height:42px!important;min-width:86px!important;font-size:14px!important}}
@media(max-width:620px){body{padding-top:178px!important}.mupo-navbar__inner{grid-template-columns:1fr auto!important;row-gap:10px!important}.mupo-logo{grid-column:1!important}.mupo-menu-toggle{grid-column:2!important;grid-row:1!important}.mupo-auth{grid-column:1/-1!important;width:100%!important;justify-content:center!important;order:3!important}.mupo-auth a{flex:1!important;max-width:170px!important}.mupo-nav{grid-column:1/-1!important}}

.category-buttons a{background:#fff;border:1px solid var(--line);border-radius:9px;padding:15px 10px;font-weight:800;color:var(--navy);cursor:pointer;box-shadow:0 4px 12px rgba(6,23,56,.04);text-align:center;text-decoration:none;}
.category-buttons a.active,.category-buttons a:hover{background:var(--navy);color:#fff;}
.filters .btn{min-height:48px;align-self:end;}
@media(max-width:900px){.filters .btn{width:100%;}}


/* mupo-final-localhost-artisan-fix */
.mupo-footer__bottom p {
  font-weight: 600;
}