:root {
      --brand: #254180;
      --brand-2: #2459d2;
      --dark: #0c0c0c;
      --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(1300px, calc(100% - 2rem));
      z-index: 1040;
    }

    .appbar {
      background: #fff;
      border-radius: 45px;
      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;
      text-transform: uppercase;
      transition: 0.3s all;
    }

    .navbar-nav .nav-link:hover {
      color: var(--brand-2);
      background: #f2f2f2;
      border-radius: 50px;
    }

    /* 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 10px 24px #2459d275;
      transition: 0.3s ease-in-out;
    }

    .donate-btn:hover {
      color: #fff !important;
      box-shadow: 0 10px 26px #2458d2b9;
    }

    .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.28);
    }

    .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: var(--brand-2);
      color: #ffffff;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
      text-decoration: none;
    }

    .social-rail .btn-social:hover {
      color: var(--brand);
      background: #fff;
    }

    .social-rail .follow-text {
      position: absolute;
      left: 6px;
      bottom: -100px;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      letter-spacing: 2px;
      font-weight: 600;
      color: var(--brand-2);
      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: 36px
      }

      .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: 1.2rem;
      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(36, 87, 204, 0.04);
    }

    .intro .blob1 {
      position: absolute;
      left: 6%;
      bottom: 10px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(36, 87, 204, 0.04);
    }

    .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 #2459d275;
      transition: 0.4 ease;
    }

    .btn-pill,
    .btn-cta:hover {
      color: #fff !important;
      box-shadow: 0 10px 26px #2458d2b9;
    }

    .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;
      border-radius: 15px;
    }

    .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;
      justify-content: center;
    }

    .footer .brand img {
      width: 100%;
      border-radius: 20px;
    }

    .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;
    }



    /* ====================l li style============= */

    .ul-styling {
      padding-left: 0px;
    }

    .ul-styling li {
      list-style: none;
      line-height: 35px;
    }

    .ul-styling li i {
      color: var(--brand-2);
      margin-right: 10px;
    }

    /* -------------------------page------------------------ */

    .service-card {
      border: 1px solid #2457cc38;
      border-radius: 20px;
      padding: 20px 0px;
      transition: all .3s ease-in-out;
      color: #2457cc;
      background: #fff;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 15px rgba(5, 56, 133, 0.12);
    }



    /* ---------------------------portfolio--------------------- */

    /* Image height control */
    #Portfolio-sec .director-carousel-img {
      height: 450px;
      object-fit: cover;
    }

    #Portfolio-sec .carousel-control-prev {
      left: 10px;
    }

    #Portfolio-sec .carousel-control-next {
      right: 10px;
    }

    @media (max-width: 576px) {
      #Portfolio-sec .director-carousel-img {
        height: 300px;
      }
    }

    /* Navigation buttons */
    #Portfolio-sec .carousel-control-prev,
    #Portfolio-sec .carousel-control-next {
      width: auto;
      opacity: 1;
    }

    /* Icon circle */
    #Portfolio-sec .director-carousel-nav {
      width: 45px;
      height: 45px;
      border: 2px solid #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      transition: all 0.3s ease;
    }

    #Portfolio-sec .director-carousel-nav:hover {
      background: rgba(255, 255, 255, 0.25);
    }