/* ============================================================
   GLOBAL THEME VARIABLES
   ============================================================ */
:root{
  --primary: #6a0dad; /* PURPLE (Menu Bar Color) */
  --accent: #6c757d;  /* Gray Accent */
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Noto Sans', 'Ubuntu', sans-serif;
}

/* ============================================================
   NAVBAR & TOPBAR
   ============================================================ */
.navbar{
  background: linear-gradient(90deg, var(--primary), #4b078e);
}

.topbar{
  background: var(--accent);
  color:#fff;
  font-size:.95rem;
}
.topbar a{
  color:#fff;
  text-decoration:none;
}

/* ============================================================
   HERO TEXTS
   ============================================================ */
.hero-title{
  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
  font-weight:800;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero-sub{
  font-size: clamp(1rem, 1.2vw + .7rem, 1.5rem);
  font-weight:500;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
}
.btn-outline-light{
  border-width:2px;
}

/* ============================================================
   HEADINGS & CARDS
   ============================================================ */
.section-title{
  font-weight:800;
}
.card-img-top{
  object-fit:cover;
  height:200px;
}

.line-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:#111;
  color:#bbb;
}
.footer a{
  color:#ddd;
}

/* ============================================================
   WHATSAPP FLOAT BUTTON
   ============================================================ */
.whatsapp-fab{
  position:absolute;
  right:1rem;
  bottom:1rem;
}

/* ============================================================
   MVM BOX (Mission • Vision • Motto)
   ============================================================ */
.mvm-box{
  --mvm-purple: #6d28d9;
  --mvm-purple-2: #5b21b6;
  --mvm-text: #ffffff;

  width: min(900px, 60vw);
  background: radial-gradient(120% 120% at 0% 0%, var(--mvm-purple), var(--mvm-purple-2));
  color: var(--mvm-text);
  border-radius: 20px;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid rgba(255,255,255,.15);
}
@media (max-width: 768px){
  .mvm-box{ width: 100%; }
}

.mvm-pill{
  display:inline-block;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: .85rem;
}

.mvm-rotor-icon{
  width: 28px; height: 28px;
  color:#fff; opacity:.9;
  animation: mvm-spin 12s linear infinite;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}

@keyframes mvm-spin{
  to { transform: rotate(360deg); }
}

.mvm-title{
  font-weight: 900;
  margin-bottom:.25rem;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}
.mvm-text{
  margin:0;
  line-height:1.6;
  font-size: clamp(.98rem, 1.1vw + .6rem, 1.05rem);
}

.mvm-body{
  position:relative;
  min-height:72px;
}

.mvm-item{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .7s ease, transform .7s ease;
}
.mvm-item.is-active{
  opacity:1;
  transform:translateY(0);
  position:relative;
}

.mvm-header{
  border-bottom:1px dashed rgba(255,255,255,.25);
  padding-bottom:.5rem;
}

.mvm-pill.active{
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.12);
}
.mvm-pill[data-k="mission"].active{ background:#0b5ed7; }
.mvm-pill[data-k="vision"].active{ background:#0ea5e9; }
.mvm-pill[data-k="motto"].active{ background:#f59e0b; }

/* ============================================================
   PAGE LOADER (SPINNING TIRE)
   ============================================================ */
#pageLoader{
  position:fixed;
  inset:0;
  background:rgba(8,10,20,0.9);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .35s ease, visibility .35s ease;
}
#pageLoader.hide{
  opacity:0;
  visibility:hidden;
}

.loader-wheel{
  width:74px;
  height:74px;
  border-radius:50%;
  border:8px solid rgba(255,255,255,0.15);
  border-top-color:#8b5cf6;
  border-right-color:#22c55e;
  animation:spinWheel 1s linear infinite;
  position:relative;
  box-shadow:0 0 18px rgba(139,92,246,0.6);
}
.loader-wheel::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  border:6px dashed rgba(255,255,255,0.35);
}

.loader-text{
  margin-top:14px;
  text-align:center;
  color:#e9d5ff;
  font-weight:700;
  letter-spacing:.06em;
  font-size:.95rem;
}

@keyframes spinWheel{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

/* ============================================================
   HERO / SLIDER (FIXED MOBILE + DESKTOP FRAME)
   ============================================================ */

/* Base (MOBILE FIRST) */
#homeCarousel .carousel-item{
  position: relative;
  height: min(65vh, 520px);   /* HII NDIO inafanya mobile ionyeshe picha yote vizuri */
}

#homeCarousel .carousel-item img{
  width: 100%;
  height: 100%;              /* sasa container ina height, so 100% ni sawa */
  object-fit: cover;
  object-position: center;   /* katikati ya picha ionekane, si chini tu */

  filter: contrast(1.03) saturate(1.05) brightness(1.05);
}

/* Light vignette overlay */
#homeCarousel .carousel-item::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.06) 100%
  );
  pointer-events:none;
  z-index:1;
}

/* Caption above overlay */
#homeCarousel .carousel-caption{
  z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,0.55);
}

/* DESKTOP ONLY */
@media (min-width:992px){
  #homeCarousel .carousel-item{
    height:50vh;
    min-height:360px;
  }

  #homeCarousel .carousel-item img{
    border-radius:18px;
    padding:6px; /* frame thickness */

    /* EXACT MENU BAR COLOR */
    background: linear-gradient(90deg, var(--primary), #4b078e);

    box-shadow:0 12px 25px rgba(0,0,0,0.25);
  }

  #homeCarousel .carousel-item::after{
    inset:6px;
    border-radius:18px;
    background: radial-gradient(
      ellipse at center,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.07) 100%
    );
  }
}
/* ================== BLINK / PULSE CTA BUTTON ================== */
.btn-blink{
  position: relative;
  animation: ctaBlink 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 rgba(255,255,255,0.0);
}

@keyframes ctaBlink{
  0%, 100%{
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.0);
    opacity: 1;
  }
  50%{
    transform: scale(1.05);
    box-shadow: 0 0 18px 4px rgba(255,255,255,0.65);
    opacity: .85;
  }
}

/* optional: hover pause kidogo */
.btn-blink:hover{
  animation-play-state: paused;
}
/* ================== PURPLE ↔ WHITE BLINK / PULSE CTA BUTTON ================== */
.btn-blink{
  position: relative;
  animation: purpleBlink 1.6s ease-in-out infinite;
  color: #fff; /* maandishi meupe kwa start */
  border: none;
}

/* Animation: color & glow change */
@keyframes purpleBlink{
  0%{
    background: var(--primary); /* purple */
    color: #ffffff;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(106, 13, 173, 0);
    opacity: 1;
  }
  
  50%{
    background: #ffffff; /* white */
    color: var(--primary); /* maandishi purple */
    transform: scale(1.07);
    box-shadow: 0 0 18px rgba(106, 13, 173, 0.55);
    opacity: .92;
  }

  100%{
    background: var(--primary);
    color: #ffffff;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(106, 13, 173, 0);
    opacity: 1;
  }
}

.btn-blink:hover{
  animation-play-state: paused; /* pause on hover */
  opacity: 1;
}
/* ===== Events wheel spinner (like loader tyre) ===== */
.events-wheel{
  position:absolute;
  inset:10px auto auto 10px;   /* juu kushoto */
  width:44px;
  height:44px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.5);
  border-top-color:#fff;       /* sehemu nyeupe inayosababisha kuonekana inazunguka */
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  animation:eventsSpin 1.2s linear infinite;
  z-index:3;
}

/* optional: kidogo transparent center */
.events-wheel::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
}

@keyframes eventsSpin{
  to{ transform:rotate(360deg); }
}

/* ili wheel iwe juu ya picha vizuri */
.contact-events-frame{
  position:relative;
}
.events-wheel{
  position:absolute;
  bottom:8px;
  right:8px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:4px solid #7c3aed; /* Purple kama menu bar ya juu */
  border-top-color: rgba(255,255,255,0.4);
  animation: spin 1.1s linear infinite;
  box-shadow:0 0 6px rgba(124,58,237,0.5);
  z-index:3;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}