:root{
  --bg:#ffffff; --text:#0f172a; --muted:#999999; --card:#ffffff;
  --transition: .35s ease;
}
:root[data-theme="dark"]{
  --bg:#071124; --text:#e6eef8; --muted:#eeeeee; --card:#0b1b2e;
}

html,body{
  height:100%; margin:0;
  background:var(--bg); color:var(--text);
  transition: background var(--transition), color var(--transition);
  font-family: Inter, system-ui, Arial, sans-serif;
}
p {
  text-align: justify;
}
/* Navbar */
.navbar{
  background:var(--card);
  transition: background var(--transition);
}
.header-section {
  background: var(--card);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
}
/* Hero */
.hero{
  padding:90px 0;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,#2e7dff,#6ec6ff);
  border-radius:0 0 18px 18px;
  transition: var(--transition);
}

/* Cards */
.card-sample{
  border-radius:12px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  background:var(--card);
  transition:background var(--transition), box-shadow var(--transition);
}

/* Smooth language fade */
[data-key]{ transition:opacity .25s }

/* Responsive tweaks */
@media (max-width:768px){
  .controls { flex-direction:column; gap:8px; align-items:flex-end; }
  .hero{ padding:60px 20px; }
}

/* Muted text */
.small-muted { color:var(--muted); font-size:.95rem; transition:var(--transition); }

/* Offcanvas theme */
.offcanvas { transition: transform .35s ease; }

/* Floating transition feel */
select, input[type=range] {
  transition: background var(--transition), color var(--transition);
}

/* ==========kitmain=========== */

    .header-section {
      padding: 15px 0;
      text-align: center;
      position: relative;
      z-index: 10;
    }

.header-section h1 {
  font-size: 1.34rem;
}
.header-section h2 {
  font-size: 1.01rem;
}
.header-section h3 {
  font-size: 1.3rem;
}
.header-section p {
  font-size: 1.1rem;
	font-weight: bold;
}
.blinking-text {
  animation: blinkMe 6s linear infinite;
}
@keyframes blinkMe {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
.dhis2 {
    height: 400px; 
  }
	
ul li a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}

ul li a:hover {
  color: var(--muted);
}

.card {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--muted) !important;
  transition: background-color var(--transition), color var(--transition);
}

.accordion-item {
  background-color: var(--card);
  border-color: var(--muted);
}

.accordion-button {
  background-color: var(--card);
  color: var(--text);
  transition: background-color var(--transition), color var(--transition);
}

.accordion-button:not(.collapsed) {
  color: var(--text);
  background-color: var(--bg);
}

.accordion-body {
  background-color: var(--card);
  color: var(--text);
}