:root { --jdc-blue:#0b3b7a; }

    body { margin:0; padding:0; }

    /* ================= TOP BAR ================= */
    .topbar{
      background: var(--jdc-blue);
      color:#fff;
      font-size:.9rem;
    }
    .topbar a{
      color:#fff;
      text-decoration:none;
      font-weight:600;
    }

    /* ================= LOGO ================= */
    .brand-logo{
      width:90px;
      max-height:112px;
      height:auto;
      object-fit:contain;
      filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
    }

    /* ================= DESKTOP NAV ================= */
    .navbar .nav-link{ font-weight:600; }
    .btn-donate{
      background: var(--jdc-blue);
      color:#fff;
      border:0;
      font-weight:700;
      border-radius:.45rem;
      padding:.45rem .75rem;
      white-space:nowrap;
    }

    /* underline hover animation */
    .nav-hover { position: relative; }
    .nav-hover .nav-link { position: relative; padding-bottom: 8px; }
    .nav-underline{
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 0;
      background-color: #000;
      opacity: 0;
      transition: all 0.25s ease;
    }

    /* ================= MOBILE TOP (sticky) ================= */
    .mobile-top{
      background:#fff;
      border-bottom:1px solid #ddd;
      position: sticky;
      top: 0;
      z-index: 1060;
      overflow: visible;
    }

    /* ✅ MOBILE: logo + typing text side-by-side */
    .mobile-top .container{
  position: relative;
  padding-top: 16px;

  /* ✅ logo ki jagah banayen taa-ke text overlap na ho */
  padding-left: 95px;

  display: flex;
  align-items: center;
  gap: 12px;
}

   .mobile-top .mobile-brand{
  position: absolute;   /* was relative */
  top: -10px;           /* adjust as you like */
  left: 0;
  z-index: 2;
}
   .mobile-top .mobile-brand img{
  width: 90px;
  max-height: 112px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}

    /* ✅ hide old right block (1024 + top menu btn) */
    .mobile-top .mobile-right{
      display: none !important;
    }

    .jdc-hero__subline{
      margin: 0;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.15;
      color: #111;
      flex: 1 1 auto;
    }
    #jdc-rotate-word{
      color: var(--jdc-blue);
    }

    /* ================= OVERLAY ================= */
    .menu-overlay{
      position: fixed;
      inset: 0;
      z-index: 1040;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(4px);
    }
    /* ✅ when open: show overlay BUT don't block scrolling */
    .menu-overlay.show{
      opacity: 1;
      pointer-events: none; /* important: body scroll works */
    }

    /* ================= OFFCANVAS FULL WIDTH ================= */
    #mobileMenu{
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      z-index: 1050;
      transform: translateX(-100%);
      transition: transform .28s ease;
      background: linear-gradient(180deg, rgba(23, 23, 57, 0.90), rgba(23, 23, 57, 0.60));
      backdrop-filter: blur(8px);
      color:#fff;
    }
    #mobileMenu.open{ transform: translateX(0); }

    #closeMenuBtn{
      position: absolute;
          top: 11%;
    right: 7%;
      border:0;
      background: rgba(255,255,255,0.10);
      color:#fff;
      font-size: 28px;
      line-height: 1;
      padding: 8px 14px;
      border-radius: 12px;
      cursor: pointer;
    }
    #closeMenuBtn:hover{ background: rgba(255,255,255,0.18); }

    #mobileMenu .menu-body{
      height: 100%;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:12px;
      padding: 70px 20px 90px;
    }

    #mobileMenu .menu-item,
    #mobileMenu .menu-acc-btn{
      width: min(520px, 92vw);
      /* background: rgba(255,255,255,0.06); */
      color:#fff;
      border:0;
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-weight:700;
      text-decoration:none;
      border-radius:14px;
      cursor: pointer;
    }
    #mobileMenu .menu-item:hover,
    #mobileMenu .menu-acc-btn:hover{ background: rgba(255,255,255,0.12); }

    .menu-accordion{ width: min(520px, 92vw); }
    .menu-acc-btn{ width:100%; position: relative; }
    .menu-acc-btn .chev{
      position:absolute;
      right: 16px;
      transition: transform .2s ease;
    }

    .menu-acc-panel{
      max-height: 0;
      overflow: hidden;
      transition: max-height .25s ease;
      margin-top: 8px;
    }
    .menu-acc-panel a{
      display:flex;
      justify-content:center;
      align-items:center;
      padding:12px 16px;
      color:#fff;
      text-decoration:none;
      font-weight:600;
      border-radius:14px;
      background: rgba(255,255,255,0.05);
      margin: 8px 0;
    }
    .menu-acc-panel a:hover{ background: rgba(255,255,255,0.12); }
    .menu-accordion.open .menu-acc-panel{ max-height: 260px; }
    .menu-accordion.open .chev{ transform: rotate(180deg); }

    /* ================= MOBILE BOTTOM NAV ================= */
    .mobile-bottom-nav{
      background:#181D47;
      padding:3px 0;
      z-index: 1030;
    }
    .mobile-bottom-nav a{
      color:#fff;
      text-decoration:none;
      font-size:12px;
      font-weight:600;
    }
    .mobile-bottom-nav i{ font-size:20px; }

    /* optional: give page some breathing room from bottom nav */
    .page-wrap{ padding-bottom: 90px; }

    /* demo hero */
    .hero{
      min-height: 240px;
      background: linear-gradient(135deg, rgba(11,59,122,.10), rgba(11,59,122,.02));
      border-bottom: 1px solid #eee;
      display:flex;
      align-items:center;
    }

    /* =====================================================
       ✅ DESKTOP: fixed header + floating logo outside height
       ===================================================== */
    .navbar.d-lg-flex{
      position: sticky;
      top: 0;
      z-index: 1060;
      overflow: visible;
    }
    .navbar.d-lg-flex .container{
      position: relative;
      padding-top: 18px;
    }
    .navbar.d-lg-flex .navbar-brand{
      position: absolute;
      top: -13px;
      left: 0;
    }
   /* .donation-banner img{
  width:100%;
  height:auto;
  display:block;
} */

.donation-banner {
  position: relative;
  width: 100%;
  min-height: 80vh;
  background-image: url("../images/HomePageImages/Landing\ Page\ Banner.PNG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}

/* Overlay */
.donation-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* dark overlay */
  z-index: 1;
}

/* Content */
.banner-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  color: #fff;
}

/* Heading */
.banner-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.banner-content h1 span {
  color: #f2b233;
}

/* Paragraph */
.banner-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
  color: #f1f1f1;
}

/* Button */
.btn-donate {
  display: inline-block;
  padding: 12px 30px;
  background: #f2b233;
  color: #000;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-donate:hover {
  background: #d99c1e;
}


/* Section spacing in % */
.donation-section{
 
  background:#ffffff;
}

.donation-wrap{
  width: 100%;
  position: relative;
}

/* Card */
.donation-card{
  width: 88%;
  margin: 0% auto;
  border-radius: 2.2rem;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  overflow: hidden;
  position: relative;
}

.home-new-addition-content h1,p{
  /* width: 90%; */
}
/* Hands background on right side */
.donation-card__bg{
  position:absolute;
  top:0; right:0;
  width: 42%;
  height: 100%;
  background-image: url("assets/images/your-hands-image.png"); /* <-- yahan apni image */
  background-size: cover;
  background-position: center;
  opacity: .20;
  pointer-events:none;
}

.donation-card__content{
  position:relative;
  padding: 4% 6%;
  width: 100%;
  z-index: 1;
}

/* Title */
.donation-title{
  margin: 0% 0% 2% 0%;
  font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.donation-title__blue{ color:#0b3b8c; margin-right:.35rem; }
.donation-title__muted{ color:#6b6b6b; font-weight:600; }

/* Steps bar */
.steps{
  display:flex;
 
  margin: 1.5% 0% 4% 0%;
  border:1px solid rgba(0,0,0,.12);
  border-radius: .3rem;
  overflow:hidden;
}

.step{
  flex:1;
  padding: 1.4% 2%;
  font-size: clamp(.75rem, .3vw + .7rem, .95rem);
  text-align:center;
  background:#f5f6f8;
  position:relative;
  white-space: nowrap;
}

.step + .step{
  border-left:1px solid rgba(0,0,0,.12);
}

.step.is-active{
  background:#0b3b8c;
  color:#fff;
  font-weight:700;
}

/* Form */
.donation-form{
  text-align: center;
}

.field-label{
  display:block;
  margin: 0% 0% 1.2% 0%;
  font-weight: 700;
  font-size: clamp(.85rem, .35vw + .8rem, 1rem);
  line-height: 1.25;           /* wrap nicely */
  white-space: normal;         /* important */
  overflow-wrap: anywhere;     /* important */
}

.field-row{
  margin: 0% 0% 2.2% 0%;
}

.field{
  width: 100%;
  padding: 1.6% 2%;
  border:1px solid rgba(0,0,0,.25);
  border-radius: .2rem;
  outline:none;
  font-size: clamp(.85rem, .35vw + .8rem, 1rem);
  background:#fff;
}

.actions{
  margin: 0.5% 0% 3% 0%;
}

.btn-next{
  padding: 1.2% 3.2%;
  border:0;
  border-radius: .25rem;
  background:#1d2a7a;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

/* International donor block */
.intl{
  margin-top: 4%;
  text-align:center;
}

.intl__label{
  font-weight:800;
  font-size: clamp(.75rem, .3vw + .7rem, .95rem);
  margin-bottom: 1.5%;
}

.intl__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding: 1.6% 6%;
  border-radius: .6rem;
  background:#f2c316;
  color:#111;
  text-decoration:none;
  font-weight:800;
}

/* Circle badge */
.donation-badge{
  position:absolute;
  left: -4%;
  top: 8%;
  transform: translateY(-52%); /* half banner + half card */
  width: clamp(110px, 10vw + 70px, 170px);
  height: clamp(110px, 10vw + 70px, 170px);
  border-radius:97px 97px 97px 97px;
  background:#3b2f73;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  display:grid;
  place-items:center;
  z-index: 5;
}

.donation-badge__inner{
  width: 86%;
  height: 86%;
  border-radius: 999px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#ffd24a;
  font-weight:900;
  font-size: clamp(.65rem, .25vw + .6rem, .9rem);
  line-height: 1.15;
}





/* large-image */
.large-imge img{
  width: 100%;
}

/* section3 */

/* ====== Section ====== */
.jdc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 64px) 0;
  color: #fff;
}

/* Background image + blur + darken */
.jdc-hero__bg {
  position: absolute;
  inset: 0;
  background: url("../images/About\ Us\ Image.jpg") center/cover no-repeat;
  /* transform: scale(1.05); */
  filter: blur(2px);
   will-change: transform;
  transform: translate3d(0,0,0) scale(1.08);
}

/* Color overlay (purple -> pink) */
.jdc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.55) !important; */
}

/* Container */
.jdc-hero__container {
  position: relative;
  z-index: 1;
  width: min(1200px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr auto 1.15fr;
  gap: clamp(18px, 3vw, 40px);
  
}

/* Columns */
.jdc-hero__col {
  max-width: 56ch;
}

/* ✅ Make Left column a flex column so avatar can align right */
.jdc-hero__col--left {
  display: flex;
  flex-direction: column;
}

/* Divider */
.jdc-hero__divider {
  width: 1px;
  height: inherit;
  background: rgba(255, 255, 255, 0.35);
}

/* Typography */
.jdc-hero__title {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
  margin: 0 0 12px;
  font-weight: 800;
}

.jdc-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 235, 153, 0.95);
  font-weight: 700;
  margin-bottom: 8px;
}

.jdc-hero__headline {
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.15;
  margin: 0 0 10px;
  font-weight: 800;
}
.jdc-hero__headline span {
  color: #ffe48a;
}

.jdc-hero__text {
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.jdc-hero__subline {
  margin: 18px 0 0;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
}
.jdc-hero__subline span {
  color: #ffe48a;
}

/* Right layout (copy only now) */
.jdc-hero__rightTop {
  display: block;
  padding-top: 10%;
}

/* Avatar */
.jdc-hero__avatarWrap {
  width: clamp(64px, 8vw, 110px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.jdc-hero__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ Avatar left column me right side align */
.jdc-hero__avatarWrap--leftRight {
  align-self: flex-end;  /* left column ke andar right side */
  margin-bottom: 14px;
}

#jdc-rotate-word {
  color: #ffe48a;
  border-right: 2px solid #ffe48a;
  padding-right: 4px;
  white-space: nowrap;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* all-images-section */
.all-image-1{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Basic\ Support\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}
.all-image-2{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Distnt\ Learning\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-3{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Child\ Health\ And\ Learning\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-4{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Community\ Institutions\ Support\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}
.all-image-5{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Digital\ Access\ And\ Tools\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-6{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Learning\ Content\ And\ Quality\ Progams.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-7{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Continuity\ And\ Crisis\ Support\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-8{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Nutritions\ And\ Wellness\ Awreness\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-9{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Digital\ Access\ And\ Tools\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-10{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Monitoring\,\ Learning\ And\ Impact\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-11{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Skills\ And\ Livelihood\ Reainess\ Program.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-12{
  background-image: url(../images/HomePageOurProgramImages/Madad\ Research\ And\ System\ Learning\ Progrm.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}
.our-pro{
  display: flex;
  justify-content: center;
 
}
.btn-pro{
 background-image: linear-gradient(45deg, #272b6a, #432063) ! Important;

 
 
}
.btn-pro a{
color: white !important;
 font-size: 25px !important;
 font-weight: 600 !important;
 text-decoration: none;
 padding: 7px 25px 7px 25px !important;
}
.container-fluid-line {
  position: relative;
}

.line-wrap {
  position: relative;
}

.our-media-line {
  border: 7px solid #432063;
  border-radius: 30px;
  width: 32%;
  z-index: 9999;
}

/* jab fixed ho */

.our-media{
  display: flex;
  justify-content: center;
 
}
.btn-media{
 background-image: linear-gradient(45deg, #272b6a, #432063) ! Important;

 
 
}
.btn-media a{
color: white !important;
 font-size: 25px !important;
 font-weight: 600 !important;
 text-decoration: none;
 padding: 7px 25px 7px 25px !important;
}
/* Common card style */
[class^="all-image-"] {
  position: relative;
  height: 250px;          /* same height for first row */
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 20px;
  
}

/* Overlay layer */
[class^="all-image-"]::before {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 1;
}

/* Center text */
[class^="all-image-"] .all-image-1-text,
[class^="all-image-"] .all-image-2-text,
[class^="all-image-"] .all-image-3-text,
[class^="all-image-"] .all-image-4-text,
[class^="all-image-"] .all-image-5-text,
[class^="all-image-"] .all-image-6-text,
[class^="all-image-"] .all-image-7-text,
[class^="all-image-"] .all-image-8-text,
[class^="all-image-"] .all-image-9-text,
[class^="all-image-"] .all-image-10-text,
[class^="all-image-"] .all-image-11-text,
[class^="all-image-"] .all-image-12-text {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */
  text-align: center;
  color: white;
  background: linear-gradient(
  rgba(60, 179, 113, 0.85),
  rgba(60, 179, 113, 0.85));
}

[class^="all-image-"] h1 {
  margin: 0;
}

.all-image-4{
  background-image: url(../images/header//10004.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-4{
  background-image: url(../images/header//10004.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-4{
  background-image: url(../images/header//10004.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}

.all-image-4{
  background-image: url(../images/header//10004.jpg);
  background-size: 100% 100%;
  
   border-radius: 15px 15px 15px 15px;
}


/* FULL WIDTH GRADIENT SECTION */
.founder-hero{
  background: linear-gradient(to right, #272b6a, #272b6a, #422163);
  padding: 70px 0;
  position: relative;

  /* IMPORTANT: allow center image to go outside section */
  overflow: visible;
}

.hero-wrap{
  width: min(1220px, 92%);
  margin: 0 auto;
}

/* WHITE CARD */
.hero-card{
  position: relative;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
  min-height: 320px;

  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;

  box-shadow: 0 10px 30px rgba(0,0,0,.10);

  /* keep images clean inside card */
  overflow: hidden;
}

/* left & right must be behind the center image */
.hero-left,
.hero-right{
  position: relative;
  z-index: 2;
}

/* center image stays on top and can overflow */
.hero-center{
  position: absolute;
  left: 50%;
  top: 50%;

  /* move center image up so it goes outside top/bottom */
  transform: translate(-62%, -44%) translateY(-35px);

  z-index: 10;         /* on top */
  pointer-events: none;
}

.hero-center img{
  width: 280px;
  max-width: 34vw;
  display: block;
}

/* LEFT IMAGE - slide in */
.hero-left{
  height: 100%;
  min-height: 320px;
  opacity: 0;
  transform: translateX(-160px);
  transition: transform 1s ease, opacity 1s ease;
}

.hero-left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2.5px);
  transform: scale(1.06);
}

/* MERGE FADE (towards center) */
.hero-left::after{
  content:"";
  position:absolute;
  inset:0;
  /* background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,1) 78%
  ); */
}

/* RIGHT CONTENT - slide in */
.hero-right{
  padding: 36px 44px;
  opacity: 0;
  transform: translateX(160px);
  transition: transform 1s ease, opacity 1s ease;
}

/* On scroll active */
.founder-hero.active .hero-left,
.founder-hero.active .hero-right{
  opacity: 1;
  transform: translateX(0);
}

/* Optional: make merge feel smoother behind center */
.hero-right{
  /* background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 35%); */
}

.hero-social{
  display:flex;
  gap:10px;
  margin: 16px 0 22px;
}

.hero-social .ico{
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  /* background: #272b6a;
  color: #fff; */
  text-decoration:none;
  /* transition: transform .2s ease, opacity .2s ease; */
  transition: transform 0.3s ease; 
}

.hero-social .ico i{
  font-size: 16px;
  line-height: 1;
}

.hero-social .ico:hover{
  /* transform: translateY(-2px); */
  /* opacity: .9; */
    transform: scale(1.2);
}


/* end-of-slider-code */







    /* Footer background like screenshot */
    .footer-jdc{
      background-color: #203477;
      color:#fff;
    }

    /* LEFT column stacked: logo -> paragraph -> social */
    .footer-left{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
    }

    .footer-logo-box{
      /* background:#1a2f63; */
      border-radius:14px;
      padding:14px;
      width:130px;
      height:130px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom: 14px;
    }
    .footer-logo-box img{
      width:100%;
      height:auto;
      object-fit:contain;
    }

    .footer-text{
      font-size:14px;
      line-height:1.7;
      color:rgba(255,255,255,.85);
      margin-bottom: 18px;
      max-width: 360px;
    }

    .footer-social a{
      /* width:34px;
      height:34px;
      background:rgba(255,255,255,.15);
      border-radius:50%; */
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      text-decoration:none;
    }
    .footer-social a {
  display: inline-block;
  transition: transform 0.3s ease;  
}

.footer-social a:hover {
  transform: scale(1.2);
}

    .footer-heading{
      font-weight:800;
      letter-spacing:.2px;
      margin-bottom: 18px;
    }

    .footer-heading-sm{
      font-weight:800;
      letter-spacing:.2px;
      margin-bottom: 14px;
    }

    /* Campaign links like screenshot (bold-ish, no underline) */
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
    }
    .footer-links li{
      margin-bottom: 6px;
    }
    .footer-links a{
      color: rgba(255,255,255,.92);
      text-decoration:none;
      font-weight:600;
      font-size:14px;
    }
    .footer-links a:hover{ text-decoration: underline; }

    /* Newsletter: input + yellow submit */
    .footer-newsletter{
      display:flex;
      width:100%;
      /* max-width: 320px; */
      margin-bottom: 22px;
      margin-top: 30%;
    }
    .footer-newsletter input{
      flex:1;
      padding:12px 14px;
      border:none;
      border-radius:8px 0 0 8px;
      outline:none;
    }
    .footer-newsletter button{
      background:#f5c21b;
      border:none;
      /* padding:12px 16px; */
      font-weight:800;
      border-radius:0 8px 8px 0;
    }

    .footer-contact{
      font-size:14px;
      color:rgba(255,255,255,.9);
      margin-bottom: 8px;
    }

    /* Small spacing adjustments on mobile */
   




    .campaign-banner {
  background: linear-gradient(90deg, #002f6c 0%, #0a3f87 70%, #ffffff 100%);
    background-repeat: no-repeat;

}

.banner-text {
  padding: 100px 80px;
}

.banner-text h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}
.banner-text h3 {
  color: #fff;
  font-weight: 700;
}
.banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 991px) {
  .banner-text {
    padding: 60px 30px;
    text-align: center;
  }
  .banner-text h1 {
    font-size: 2.5rem;
  }
}
.campaign-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 180px;
  padding: 20px;
  background-size: 100% 100%;
  background-position: center;
  text-decoration: none;
  overflow: hidden;
}

/* Overlay */
.campaign-card::before {
  content: "";
  position: absolute;
  inset: 0;
 background: linear-gradient(
  rgba(60, 179, 113, 0.85),
  rgba(60, 179, 113, 0.85)
);
  transition: background 0.3s ease;
}
.campaign-card::after{
  /* background: rgba(19, 30, 95, 0.75); */
}
/* Text */
.campaign-card span {
  position: relative;
  color: #f5c400;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  z-index: 1;
}
.campaign-card {
  color: white;
}
.campaign-card h4{
  z-index: 999;
}
/* Hover */
.campaign-card:hover::before {
 background: linear-gradient(
  rgba(19, 95, 30, 0.55),
  rgba(10, 70, 20, 0.55)
);
}

a{
  text-decoration-line: none;
}
.blog-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.blog-content {
  padding: 20px;
  flex-grow: 1;
}

.blog-content h5 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.blog-content h5 a {
  color: #0a2db3;
  text-decoration: none;
}

.blog-content h5 a:hover {
  text-decoration: underline;
}

.blog-content p {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 15px;
}

.read-more {
  font-weight: 600;
  color: #0a2db3;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.about-section {
  background: #fff;
}

.about-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.section-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #6c757d;
  margin-bottom: 10px;
}

.about-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #0b4f6c;
  margin-bottom: 15px;
}

.about-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
}

/* Responsive tweaks */
@media (max-width: 991px) {
  .about-title {
    font-size: 1.8rem;
  }
}

.contact-box {
  padding: 30px 20px;
  border: 1px solid #e5e5e5;
  height: 100%;
}

.contact-box .icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.contact-box h5 {
  font-weight: 800;
  margin-bottom: 5px;
}

.contact-box p {
  color: #555;
  margin: 0;
}

.section-title {
  font-weight: 800;
  color: #0b3b7a;
}

.contact-form .form-control {
  border-radius: 0;
}

.contact-img {
  width: 100%;
  border-radius: 16px;
}

/* donate-page*/
  :root{
      --navy:#1f2f63;
      --navy2:#223b85;
      --border:#cfd5e6;
      --text:#1a1a1a;
      --muted:#666;
      --bank-border:#111;
      --bank-muted:#666;
      --bank-active:#e6e6e6;
      --bank-panel-bg:#f3f3f3;
      --bank-logo-bg:#0c2d78;
      --jdc-blue:#0b3b7a;
    }
   /* keep border-box everywhere WITHOUT using * selector */
.wrap, .topbar, .stepper, .step, .panel, .field, label, input, select,
.actions, .btn, .bullet-loader, .grid, .email-half, .error, .center-title,
.amount-row, .pay-box, .pay-grid, .pay-card, .pay-list, .pay-item,
.mini-icon, .bottom-bar, .check, .warn, .fix-btn,
#step1, #step2, #step3, div, section, span{
  box-sizing:border-box;
}
  
    .wrap{max-width:1060px;margin:30px auto;padding:0 18px;}
    .topbar{
      background:var(--navy);
      color:#fff;
      text-align:center;
      font-weight:700;
      padding:14px 10px;
      border-radius:3px;
      letter-spacing:.2px;
    }

    /* stepper */
    .stepper{
      margin:18px auto 26px;
      display:flex;
      justify-content:center;
      width:min(640px,100%);
      border:1px solid var(--border);
      border-radius:2px;
      overflow:hidden;
    }
    .step{
      flex:1;
      padding:10px 12px;
      text-align:center;
      font-size:14px;
      color:var(--muted);
      background:#fff;
      position:relative;
    }
    .step:not(:last-child)::after{
      content:"";
      position:absolute;
      right:-18px; top:0;
      width:0;height:0;
      border-top:20px solid transparent;
      border-bottom:20px solid transparent;
      border-left:18px solid #fff;
      z-index:2;
    }
    .step:not(:last-child)::before{
      content:"";
      position:absolute;
      right:-19px; top:0;
      width:0;height:0;
      border-top:20px solid transparent;
      border-bottom:20px solid transparent;
      border-left:19px solid var(--border);
      z-index:1;
    }
    .step.active{
      background:linear-gradient(0deg,var(--navy),var(--navy2));
      color:#fff;
      font-weight:600;
    }
    .step.active:not(:last-child)::after{ border-left-color:var(--navy2); }

    /* panel */
    .panel{
      border:0;
      border-radius:2px;
      padding:18px 6px;
      background:#fff;
    }

    .field{ margin-bottom:16px; }

    label{
      display:block;
      font-size:13px;
      font-weight:600;
      margin-bottom:8px;
      /* text-align:center; */
      padding-left: 2%;
    }
    .left-label label{ text-align:left; }

    input, select{
      width:100%;
      height:44px;
      padding:0 12px;
      border:1px solid #111;
      border-radius:2px;
      outline:none;
      font-size:14px;
      background:#fff;
      box-shadow: 0 2px 0 rgba(0,0,0,.10);
    }
    input:focus, select:focus{
      border-color:#2b4aa8;
      box-shadow:0 0 0 3px rgba(34,59,133,.12), 0 2px 0 rgba(0,0,0,.10);
    }

    .error{
      margin-top:6px;
      font-size:12px;
      color:#b00020;
      display:none;
    }
    .error.show{ display:block; }

    /* buttons */
    .actions{
      margin-top:14px;
      display:flex;
      gap:12px;
      align-items:center;
    }
    .actions.between{ justify-content:space-between; }

    .btn{
      border:none;
      cursor:pointer;
      padding:10px 20px;
      border-radius:3px;
      font-weight:600;
      font-size:14px;
      background:linear-gradient(0deg,var(--navy),var(--navy2));
      color:#fff;
      min-width:120px;
      box-shadow:0 2px 0 rgba(0,0,0,.18);
    }
    .btn:disabled{ opacity:.75; cursor:not-allowed; }

    /* STEP 1: bullet-style loader (radio circle) */
    .bullet-loader{
      width:14px;
      height:14px;
      border:2px solid #bfc7df;
      border-top-color:var(--navy);
      border-radius:50%;
      display:none;
      animation:spin .9s linear infinite;
    }
    @keyframes spin{ to{ transform:rotate(360deg); } }

    /* Step2 grid */
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:18px;
      align-items:start;
    }
    .email-half{
      grid-column: 1 / span 1;
      max-width: 520px;
    }

    @media (max-width: 760px){
      .grid{ grid-template-columns:1fr; }
      .email-half{ grid-column:auto; max-width:none; }
      label{ text-align:left; }
    }

    .hidden{ display:none; }

    /* STEP 3 styles (match screenshot) */
    .center-title{
      text-align:center;
      font-size:28px;
      font-weight:600;
      margin:4px 0 16px;
    }
    .amount-row{
      border:1px solid #222;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      height:42px;
      margin-bottom:16px;
    }
    .amount-row div{
      display:flex;
      align-items:center;
      padding:0 12px;
      font-size:13px;
    }
    .amount-row .left{
      border-right:1px solid #222;
      font-weight:600;
      color:#333;
    }
    .amount-row .right{
      justify-content:center;
      font-weight:700;
    }

    .pay-box{
      border:2px solid #2a8aa0;
      border-radius:3px;
      padding:18px 18px 20px;
      margin:10px 0 12px;
    }
    .pay-grid{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:18px;
      align-items:start;
    }
    @media (max-width: 900px){
      .pay-grid{ grid-template-columns:1fr; }
      .bank-layout{
        grid-template-columns:1fr;
      }
      .bank-hands{
        display:none;
      }
      .bank-menu-btn{
        padding:4% 5%;
      }
    }
    .pay-card{
      background:var(--navy);
      color:#fff;
      border-radius:2px;
      padding:14px 14px;
      min-height:86px;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-start;
    }
    .pay-card .radio{
      width:12px;height:12px;border-radius:50%;
      border:2px solid #fff;
      flex:0 0 auto;
    }
    .pay-card .txt{
      font-size:13px;
      line-height:1.25;
    }
    .pay-card img{
      height:22px;
      margin-left:8px;
      vertical-align:middle;
      background:#fff;
      padding:2px 6px;
      border-radius:2px;
    }

    .pay-card.list{
      align-items:flex-start;
    }
    .pay-list{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:2px;
      width:100%;
    }
    .pay-item{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:13px;
    }
    .pay-item .dot{
      width:12px;height:12px;border-radius:50%;
      border:2px solid #fff;
      flex:0 0 auto;
    }
    .mini-icon{
      width:16px;height:16px;border-radius:2px;background:#fff;display:inline-block;
      position:relative; overflow:hidden;
    }
    .mini-icon::after{
      content:"";
      position:absolute; inset:0;
      background:linear-gradient(45deg,#d22 0 50%, #fff 50% 100%);
      opacity:.9;
    }

    .bottom-bar{
      display:flex;
      align-items:center;
      gap:14px;
      margin-top:12px;
    }
    .check{
      width:14px;height:14px;border:1px solid #777;
      background:#fff;
    }
    .warn{
      flex:1;
      height:34px;
      background:#0b2f7a;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
      padding:0 10px;
    }
    .fix-btn{
      height:34px;
      padding:0 16px;
      border-radius:3px;
      border:0;
      cursor:pointer;
      font-weight:700;
      background:linear-gradient(0deg,#3d2a63,#4d347b);
      color:#fff;
      box-shadow:0 2px 0 rgba(0,0,0,.18);
      white-space:nowrap;
    }

    



      /* wrapper */
    .bank-wrap{
      max-width:1180px;
      margin:2% auto;
      padding:0 1%;
    }

    /* heading */
    .bank-title{
      margin:0;
      text-align:center;
      font-size:22px;
      font-weight:800;
    }

    .bank-sub{
      text-align:center;
      margin:0.6% auto 1.5%;
      max-width:980px;
      color:var(--bank-muted);
      font-size:12px;
      line-height:1.35;
    }

    /* layout */
    .bank-layout{
      display:grid;
      grid-template-columns: 26% 74%;
      gap:0;
      align-items:stretch;
    }

    /* LEFT MENU */
    .bank-menu{
      padding:0;
      background:#fff;
    }

    .bank-menu-btn{
      width:100%;
      border:0;
      background:#fff;
      padding:6% 9%;
      text-align:left;
      cursor:pointer;
      font-size:14px;
      font-weight:600;
      color:#111;
      box-sizing:border-box;
      font-family:inherit;
    }

    .bank-menu-btn-active{
      background:var(--bank-active);
      border-top:1px solid var(--bank-border);
      border-left:1px solid var(--bank-border);
      border-bottom:1px solid var(--bank-border);
      border-right:none;

      /* panel border merge */
      margin-right:-1px;
      position:relative;
      z-index:3;
    }

    /* RIGHT PANEL */
    .bank-panel{
      border:1px solid var(--bank-border);
      min-height:560px;
      position:relative;
      background:var(--bank-panel-bg);
      overflow:hidden;
    }

    .bank-panel-inner{
      padding:4% 4%;
      height:100%;
    }

    /* center logo area */
    .bank-brand{
      display:flex;
      justify-content:center;
      align-items:center;
      flex-direction:column;
      gap:2%;
      margin-top:6%;
    }

    .bank-logo{
      width:130px;
      height:130px;
      border:0;
      border-radius:0;
      background:var(--bank-logo-bg);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      text-align:center;
      padding:10px;
      line-height:1.25;
    }

    .bank-name{
      display:none;
    }

    .bank-details{
      margin-top:3%;
      text-align:center;
      font-size:15px;
      line-height:1.65;
      color:#111;
    }

    .bank-details-bold{
      font-weight:900;
    }

    /* hands image */
    .bank-hands{
      position:absolute;
      right:-2%;
      top:22%;
      width:380px;
      opacity:.95;
      pointer-events:none;
      filter:grayscale(100%);
    }

    .section-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.section-heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: #0b4f6c;
}

.section-paragraph {
  font-size: 1rem;
  line-height: 1.9;
  color: #555;
}

/* Responsive */
@media (max-width: 991px) {
  .section-heading {
    font-size: 1.8rem;
    text-align: center;
  }

  .section-paragraph {
    text-align: center;
  }
}


.page-banner img {
  width: 100%;
  height: auto;
  /* object-fit: cover; */
}

.content-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.section-heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: #0b4f6c;
}

.section-paragraph {
  font-size: 1rem;
  line-height: 1.9;
  color: #555;
}
.healthcare-list {
  line-height: 1.9;
  color: #444;
  padding-left: 18px;
}

.healthcare-list li {
  margin-bottom: 8px;
}

.grid-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 12px;
}

/* Optional hover effect */
.grid-img:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}