:root{
      --brand:#0bb68b;            /* primary accent (Donate button, highlights) */
      --brand-2:#0ac3a1;          /* gradient end */
      --dark:#0c0c0c;             /* text */
      --hero-image:url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=2000&auto=format&fit=crop'); 
    }

    html,body{height:100%;}
    body{font-family:'Rubik',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#222;background:#0b0b0b;}


    

    /* =================carousel indicator============ */
    #custom-indicators [data-bs-target] {
  width: 12px;              
  height: 12px;             
  border-radius: 50%;      
  background-color: #fff;   
  opacity: 0.5;             
  margin: 0 5px;
  transition: all 0.3s ease;
}

#custom-indicators .active {
  opacity: 1;
  background-color: #fff;   
  width: 12px;              
}


    /* ===== App Bar (rounded, floating) ===== */


    .appbar-wrap{position:fixed; top:16px; left:50%; transform:translateX(-50%); width:min(1200px, calc(100% - 2rem)); z-index:1040;}
    .appbar{background:#fff; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:.35rem .75rem;}
    .navbar-brand img{height:54px; width:auto;}
    .navbar-nav .nav-link{font-weight:500; padding:.75rem 1rem; color:#222;}
    .navbar-nav .nav-link:hover{color:var(--brand);}    

    /* Donate pill */
    .donate-btn{border-radius:999px; font-weight:700; padding:.65rem 1.1rem; border:none; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 8px 22px rgba(11,182,139,.35);}
    .donate-btn .icon{display:inline-grid; place-content:center; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--brand); margin-left:.6rem;}

   /* ===== Hero ===== */
    /* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  max-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: 120px;
  overflow: hidden; /* Important so carousel fits inside */
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item,
.hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero .hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Gradient overlay */
  background-blend-mode: overlay;
  background-color: rgba(0,0,0,0.55);
}

.hero .container {
  position: relative;
  z-index: 1;
  color: #fff;
}

.hero h1 {
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.08;
  font-size: clamp(2.2rem, 4vw + 1rem, 5rem);
}

.hero .lead {
  max-width: 1080px;
  margin-inline: auto;
  opacity: .95;
  font-size: clamp(1rem, .6vw + .9rem, 1.25rem);
}


    /* ===== Left Social Rail ===== */
    .social-rail{position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:1030;}

   .social-rail .btn-social {
	display: grid;
	place-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	margin: .5rem 0;
	background: #fff;
	color: #111;
	box-shadow: 0 8px 20px rgba(0,0,0,.25);
	text-decoration: none;
} 

    .social-rail .btn-social:hover{color:#fff; background:var(--brand);}   
    .social-rail .follow-text{position:absolute; left:6px; bottom:-100px; writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:2px; font-weight:600; color:#0bbc95; opacity:.9;}

    /* ===== Right Floating Chat/WhatsApp ===== */
    .float-contact{position:fixed; right:18px; bottom:22px; display:flex; align-items:center; gap:.75rem; z-index:1030;}
    .float-contact .msg-pill{background:#fff; color:#111; border-radius:999px; padding:.55rem .95rem; box-shadow:0 10px 24px rgba(0,0,0,.25); font-weight:600;}
    .float-contact .wa{display:grid; place-content:center; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.45); text-decoration:none;}

    @media (max-width: 768px){
      .navbar-brand img{height:46px}
      .appbar-wrap{width:calc(100% - 1rem)}
      .social-rail{left:10px}
      .social-rail .btn-social{width:46px; height:46px}
      .social-rail .follow-text{display:none}
      .float-contact .msg-pill{display:none}
    }
      /* ===== Sections (global) ===== */
    .section{padding:84px 0;}
    .eyebrow{letter-spacing:.22rem; text-transform:uppercase; font-weight:800; font-size:.9rem; color:#7a7f85;}

    /* ===== Introduction ===== */
    .intro{background:linear-gradient(180deg,#fbfefe 0%, #f6fbfa 100%); position:relative;}
    .intro .blob{position:absolute; right:6%; top:120px; width:220px; height:220px; border-radius:50%; background:rgba(11,182,139,.18);}   
    .intro .blob1{position:absolute; left:6%; bottom:10px; width:160px; height:160px; border-radius:50%; background:rgba(11,182,139,.18);}   
    .img-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
    .img-grid img{width:100%; height:260px; object-fit:cover; border-radius:26px; box-shadow:0 12px 28px rgba(0,0,0,.12);} 
    .btn-pill, .btn-cta{border:none; border-radius:999px; font-weight:800; padding:.85rem 1.5rem; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 10px 24px rgba(11,182,139,.35);} 
    .btn-cta{font-size:1.1rem; padding:1rem 1.6rem;}

    /* ===== Vision & Mission ===== */
    .vm{background:#f7faf9;}
    .vm-card{position:relative; border-radius:22px; min-height:520px; background-size:cover; background-position:center; overflow:hidden; box-shadow:0 18px 36px rgba(0,0,0,.18);} 
    .vm-card .content{position:absolute; inset:0; padding:48px; color:#fff; display:flex; flex-direction:column; justify-content:flex-start;}
    .vm-card h2{font-weight:800; font-size:clamp(2rem,1.5vw+1.2rem,3rem); margin-bottom:18px;}
    .vm-card p{max-width:52ch; font-size:1.1rem; line-height:1.8; opacity:.95;}
    .vm-card .btn-cta{align-self:flex-start; margin-top:22px;}

    @media (max-width: 992px){
      .section{padding:64px 0;}
      .img-grid img{height:200px}
      .vm-card{min-height:440px}
      .vm-card .content{padding:32px}
    }
      /* ===== News ===== */
    .news{background:#ffffff;}
    .news-card{border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.08); height:100%; display:flex; flex-direction:column;}
    .news-card .thumb{position:relative; overflow:hidden; height:220px;}
    .news-card img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease;}
    .news-card:hover img{transform:scale(1.04);} 
    .news-card .badge-date{position:absolute; left:14px; top:14px; background:#fff; color:#111; border-radius:999px; padding:.35rem .75rem; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.15);} 
    .news-card .body{padding:22px 22px 24px;}
    .news-card .title{font-weight:800; font-size:1.15rem; margin-bottom:.35rem;}
    .news-card .excerpt{color:#6b7280; margin-bottom:14px;}
    .btn-soft{border:none; border-radius:999px; padding:.6rem 1rem; font-weight:700; background:rgba(11,182,139,.12); color:var(--brand);} 
    @media (max-width: 992px){ .news-card .thumb{height:200px} }
      /* ===== Gallery ===== */
    .gallery{background:#f8fbfa;}
    .photo-card{position:relative; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 12px 28px rgba(0,0,0,.12);} 
    .photo-card img{width:100%; height:240px; object-fit:cover; opacity:.9; transition:transform .5s ease, opacity .3s ease;} 
    .photo-card:hover img{transform:scale(1.05); opacity:1;} 
    .photo-card .overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; letter-spacing:.06em; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.15)); opacity:0; transition:opacity .3s ease;} 
    .photo-card:hover .overlay{opacity:1;} 

    /* ===== Footer ===== */
    .footer{background:#0e1011; color:#cfd6d9; padding:64px 0 28px;}
    .footer a{color:#cfd6d9; text-decoration:none;} .footer a:hover{color:#fff;}
    .footer .brand{display:flex; align-items:center; gap:.75rem;}
    .footer .brand img{height:48px; width:auto;}
    .footer h6{font-weight:800; letter-spacing:.02em; margin-bottom:14px;}
    .footer .social a{width:36px; height:36px; border-radius:50%; display:inline-grid; place-content:center; background:#161a1a; margin-right:8px;}
    .footer .social a:hover{background:var(--brand); color:#fff;}
    .newsletter input[type=email]{border-radius:999px; padding:.65rem 1rem; border:1px solid #2a2f31; background:#121516; color:#e8f0f2;}
    .newsletter .btn{border-radius:999px; margin-left:8px;}
    .footer .copy{border-top:1px solid rgba(255,255,255,.08); margin-top:28px; padding-top:20px; font-size:.95rem;}


    /* ================page edit=============== */

.hero-banner {
	background: linear-gradient(to right, #0101018f, #01010152, #0101018f), url('../images/page-bg.jpg') center/cover no-repeat;
	height: 330px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* =======administrator========== */
.principal-details {
	display: inline-block;
	text-align: center;
	box-shadow: 1px 0px 5px;
    border-radius: 20px;
	width: 260px;
}
.principal-photo img {
	width: 157px;
	height: 185px;
	margin: 15px;
}