:root {
      --brand: #0d6efd;       /* Bootstrap primary */
      --ink: #1b1f24;
      --soft: #f8fafc;
    }
    body { color: #212529; }
.ndebele-navbar .navbar-brand
 {
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
	font-size: 39px;
}	
.fw-bold {
    font-weight: 1000 !important;
}
    .navbar { box-shadow: 1px 2px 12px rgba(0,0,0,.06); }
    .hero {
      background: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,0)),
                  url('5d0d1b95-4f79-4565-87ed-12ad19dc5767.png') center/cover;
      color: #0b1220;
    }
    .hero .overlay { backdrop-filter: saturate(140%) blur(0px); background: rgba(255,255,255,.72); }
    .hero-pad { padding: 11rem 0; }
    .section-pad { padding: 4rem 0; }
    .trustbar img { max-height: 36px; opacity: .8 }
    .card-program:hover { transform: translateY(-2px); transition: .2s ease; }
    .stat { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
    .bg-soft { background: var(--soft); }
    .required::after { content:" *"; color: #dc3545; }
    .footer a { color: inherit; text-decoration: none; }
	.sticky-top{
	  position: -webkit-sticky;
	  position: sticky;
	  top: 0;
	  z-index: 1020;
	}
	/* Do NOT set overflow on these containers */
	header, .navbar, .navbar > .container,
	body, html {
	  overflow: visible;          /* important for sticky */
	}

	/* Also avoid transforms on navbar ancestors */
	header, .navbar, .navbar > .container {
	  transform: none !important;
	  filter: none !important;
	  perspective: none !important;
	}
	.image-overlay-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.background-image {
  width: 100%;
  height: auto;
  display: block;
}

.overlay-text {
  position: absolute;
  bottom: 0%;
  left: 0%;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  padding: 10px 20px;
}
.navbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);;
}
.ndebele-navbar .nav-link{
  font-weight: 1000 !important;
}



.buffer-section {
    position: relative;
    padding: 58px 0px;
    background: #3850e6;
    color: #ffffff;
}


/* Hero only controls overflow (so sticky nav still works) */
.youtubehero {
   position: relative;
  height: 100vh; /* full viewport height */
  overflow: hidden;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-background iframe {
  width: 100%;
  height: 100%;
  pointer-events: none; /* no clicks on video */
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.row.page-content { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.buffer-section > .row { margin-left: 0; margin-right: 0; }


/* Pattern background for navbar */
.ndebele-navbar {
  background-image: url('ndebele-pattern.png'); /* Your pattern file here */
  background-size: cover;      /* Fill width */
  background-position: center; /* Centered pattern */
  background-repeat: no-repeat;
  min-height: 80px;             /* Taller for visibility */
}

/* Make sure text is visible */
.ndebele-navbar .nav-link,
.ndebele-navbar .navbar-brand {
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.ndebele-navbar .nav-link:hover {
  color: #ffe600; /* Highlight color on hover */
}