@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
:root {
    --pbf-blue: #1c5b8e;
    --pbf-blue-dark: #123f63;
    --pbf-green: #2f9e58;
    --pbf-green-dark: #1f7a41;
    --pbf-orange: #f4821f;
    --pbf-orange-dark: #d96e10;
    --pbf-cream: #eef6fb;
       --navy:#0d2b52;
    --blue:#1f7ee0;
    --orange:#f5821f;
    --green:#4caf50;
    --text-gray:#5b6470;
    --bg-panel:#f2f3f5;
    --border-light:#e4e6ea;
     --green: #4CAF6D;
    --orange: #F5843C;
    --navy: #10254C;
    --blue: #1E63E9;
    --text-muted: #6B7A90;
    --card-bg: #F7F8FA;
    --card-bg-active: #10254C;
      --green: #4CAF6D;
    --orange: #F5843C;
    --navy: #10254C;
    --blue: #1E63E9;
    --text-muted: #6B7A90;
    --card-bg: #F7F8FA;
        --navy: #0c2c5e;
    --navy-deep: #081f45;
    --card: rgba(255,255,255,.06);
    --card-border: rgba(255,255,255,.10);
    --orange: #f07830;
    --orange-deep: #d8621d;
    --green: #4caf6d;
    --white: #ffffff;
    --muted: rgba(255,255,255,.72);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #2b2b2b;
}

.script-font {
    font-family: 'Dancing Script', cursive;
}

/* ===== HEADER ===== */
.pbf-header {
    position:absolute;
    top: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #106CAF;
}
.navbar-nav{
    padding: 35px 0;
}
.pbf-logo-badge {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3b3b3b, #0d0d0d 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid #d4a94a;
}

.pbf-logo-badge svg {
    width: 26px;
    height: 26px;
}

.pbf-logo-text {
    line-height: 1.05;
}

.pbf-logo-text .name {
    font-weight: 700;
    font-size: 1rem;
    color: #d4a94a;
    letter-spacing: .3px;
}

.pbf-logo-text .tagline {
    font-size: .55rem;
    letter-spacing: 1.5px;
    color: #9a9a9a;
    text-transform: uppercase;
}

.pbf-nav .nav-link {
    color: var(--pbf-blue-dark);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem 1rem !important;
    transition: color .2s ease;
}

.pbf-nav .nav-link:hover,
.pbf-nav .nav-link:focus {
    color: var(--pbf-green);
}

.pbf-donate-btn {
    background: var(--pbf-orange);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    padding: .55rem 1.6rem;
    transition: background .2s ease, transform .2s ease;
}

.pbf-donate-btn:hover {
    background: var(--pbf-orange-dark);
    color: #fff;
    transform: translateY(-1px);
}

.pbf-toggler {
    border: none !important;
    box-shadow: none !important;
    padding: .25rem .4rem;
}

.pbf-toggler span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--pbf-blue-dark);
    margin: 5px 0;
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}

.pbf-toggler.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.pbf-toggler.active span:nth-child(2) {
    opacity: 0;
}

.pbf-toggler.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav item stagger animation */
@media (max-width: 991.98px) {
    .pbf-nav.collapse:not(.show) {
        display: none;
    }

    .pbf-nav {
        width: 100%;
    }

    .pbf-nav .navbar-nav {
        padding: .5rem 0 1rem;
    }

    .pbf-nav .nav-item {
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity .35s ease, transform .35s ease;
    }

    .pbf-nav .nav-item.item-in {
        opacity: 1;
        transform: translateX(0);
    }

    .pbf-nav .nav-item {
        border-bottom: 1px solid #f0f0f0;
    }

    .pbf-donate-wrap {
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity .35s ease, transform .35s ease;
    }

    .pbf-donate-wrap.item-in {
        opacity: 1;
        transform: translateX(0);
    }
}
.logo{
  position: absolute;
  top: 0;
}

/* ===== HERO / BANNER ===== */
 .pbf-hero{
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1230;
    background-image: url(img/banner.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding-top: 240px;
  }
 
  /* .pbf-hero .container{
    position: relative;
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
    padding: 4.2% 5.5% 0;
  } */
 
  /* ---------- Top-right lockup ---------- */
  .together-lockup{
    position:absolute;
    top:35%;
    right: 4.5%;
    display:flex;
    align-items:center;
    gap: 0.7vw;
    text-align:right;
  }
  .together-lockup .together-text{
    font-weight:700;
    line-height:1.25;
    font-size: clamp(12px, 1.15vw, 22px);
  }
  .together-lockup .together-text .g{ color: var(--green); }
  .together-lockup .together-text .b{ color: var(--blue); }
  .together-lockup svg{ width: clamp(34px, 3.4vw, 66px); height: auto; flex-shrink:0; }
 
  /* ---------- Left content block ---------- */
  .left-content{
    max-width: 50%;
    padding-top: 1%;
  }
  .logo img{
    width: 200px;
  }
  .brand-row img{
    width: 100px;
  }
 
  .brand-row{
    display:flex;
    align-items:center;
    gap:35px;
    margin-bottom: 0.4%;
  }
  .brand-row svg.kidney-icon{ width: clamp(34px,3.3vw,64px); height:auto; flex-shrink:0; }
 
  .brand-title{
    font-family: "Tinos", serif;
    font-weight: 800;
    font-size: 55px;
    color:#0f6eaf;
    letter-spacing: 0.5px;
  }
 
  .grateful{
     font-family: "Allura", cursive;
    font-weight: 700;
    font-size:190px;
    line-height: 0.9;
    margin: -1% 0 1.5% 1%;
    background: linear-gradient(90deg, var(--green) 0%, var(--green) 42%, var(--blue) 78%, var(--blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display:flex;
    align-items:flex-end;
    gap: 0.6vw;
  }
  .grateful svg{ width: clamp(20px,2.1vw,40px); height:auto; margin-bottom: 8%; -webkit-text-fill-color:initial; flex-shrink:0; }
  .grateful svg path, .grateful svg polyline{ stroke: var(--blue); }
 
  .divider{
    display:flex;
    align-items:center;
    gap: 0.8vw;
    margin: 1.4% 0 2.2%;
    width: 470px;
  }
  .divider .line{ height:2px; background: linear-gradient(90deg, var(--green), var(--blue)); flex:1; opacity:0.55; }
  .divider svg{ width: clamp(14px,1.1vw,20px); height:auto; }
 
  .tagline{
    font-weight: 500;
    font-size: clamp(15px, 1.65vw, 32px);
    color:#1370ac;
    margin: 0 0 1.6%;
  }
  .tagline .blue{ color:#4fae71; }
  .tagline .green{ color: var(--green); }
 
  .subtext{
    font-size: clamp(11px, 1.05vw, 20px);
    color: #3d4f57;
    line-height: 1.5;
    font-weight: 400;
    margin: 0 0 3.5%;
    max-width: 90%;
  }
 
  .thankyou-bar{
    display:flex;
    align-items:center;
    gap: 1vw;
    color:#fff;
    padding: 1.1% 1.6vw;
    border-radius: 0 30px 30px 0;
    margin-left: -5.5%;
    padding-left: 5.5%;
    max-width: 92%;
    margin-bottom: 4.5%;
  }
    .thankyou-bar::before{
    content: "";
    position: absolute;
    left: 0;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 45%, rgba(58, 163, 89, 0.55) 100%);
    height: 85px;
    width: 36%;
  }
 
  .thankyou-bar svg{ width: clamp(20px,1.7vw,32px); height:auto; flex-shrink:0; }
  .thankyou-bar .txt{ font-size: clamp(11px, 1.15vw, 21px); line-height:1.35; z-index: 1; }
  .thankyou-bar .txt b{ font-weight:700; display:block; }
 
  .icon-row{
    display:flex;
    gap: clamp(14px, 3vw, 56px);
  }
  .icon-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 0.5vw;
    width: clamp(60px, 6vw, 110px);
  }
  .icon-item img{
        width: 90px;
  }
  .icon-item svg{ width: clamp(28px,2.6vw,50px); height:auto; }
  .icon-item span{
    font-size: clamp(9px, 0.85vw, 15px);
    font-weight:600;
    color: var(--ink);
    text-align:center;
    line-height:1.2;
  }

  @media (max-width: 760px){
    .left-content{ max-width: 62%; }
    .together-lockup{ top:3%; right:3%; }
    .thankyou-bar{ border-radius: 0 18px 18px 0; }
  }

/* ==========================About-css================================= */

  .about-section{
    padding: 80px 0 228px 0;
    align-items:center;
    background-color: #F9F9F9;
  }
 
  /* ---------- LEFT: image collage ---------- */
  .collage{
    position:relative;
    width:100%;
    aspect-ratio:1/1.05;
    justify-self:center;
  }
 
  .collage img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
 
  .img-top{
    position:absolute;
    top:0;
    left:0;
    border-radius: 500px;
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
    z-index:1;
  }
 
  .img-bottom{
    position:absolute;
    bottom: -40%;
    right:0;
    border-radius:500px;
    width: 392px;
    height: 610px;
    overflow:hidden;
    /* box-shadow:0 20px 40px rgba(0,0,0,0.14); */
    z-index:2;
    border: 4px solid #F9F9F9;
  }
  .img-bottom img{
    width: 370px;
    height: 627px;
    border-radius: 500px;
  }
 
  .badge-experience{
     font-family: "Figtree", sans-serif;
    position:absolute;
    left: 27%;
    bottom: -10%;
    background:var(--green);
    color:#fff;
    padding: 9px 12px;
    text-align:left;
    line-height:1.15;
    box-shadow:0 12px 24px rgba(76,175,80,0.35);
    border: 6px solid #FFFFFF;
    z-index:3;
    text-align: center;
    border-radius: 5px;
  }
 
  .badge-experience strong{
    font-family: "Figtree", sans-serif;
    display:block;
    font-size:40px;
    font-weight:800;
    margin-bottom:2px;
  }
 
  .badge-experience span{
    font-family: "Figtree", sans-serif;
    font-size:16px;
    font-weight:400;
    opacity:0.95;
  }
 
  /* ---------- RIGHT: content ---------- */
  .content .eyebrow{
    font-family: "Barlow Semi Condensed", sans-serif;
    display:inline-block;
    background:var(--bg-panel);
    color:#043375;
    font-size: 20px;
    font-weight:600;
    letter-spacing:0.3px;
    padding:7px 16px;
    border-radius:3px;
    margin-bottom:10px;
  }
 
  .content h2{
     font-family: "Barlow Semi Condensed", sans-serif;
    font-size:60px;
    line-height:1.18;
    font-weight:bold;
    margin-bottom: 15px;
  }
 
  .content h2 .line1{
    display:block;
    color:var(--navy);
  }
 
  .content h2 .line2{
    display:block;
    color:var(--blue);
  }
 
  .content p{
    font-size:17px;
    line-height:1.75;
    color:#470B00;
  }
 
  /* Expert talk panel */
  .expert-panel{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:20px;
    background:var(--bg-panel);
    border-radius:16px;
    margin-top:30px;
    margin-bottom:26px;
  }
  .expert-text{
    padding: 40px;
  }
 
  .expert-text .expert-label{
    font-family: "Figtree", sans-serif;
    color: var(--green);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
  }
 
  .expert-text p{
    font-size:13px;
    line-height:1.6;
    color:#470B00;
    margin-bottom:10px;
    max-width:340px;
  }
 
  .expert-text .expert-name{
    font-family: "Figtree", sans-serif;
    color:var(--orange);
    font-weight:400;
    font-size:16px;
  }
 
  .expert-photo{
    flex-shrink:0;
    border-radius:0;
    overflow:hidden;
    border-radius: 0px 16px 16px 0px;
    width: 240px;
  }
 
  .expert-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
 
  hr.divider{
    border:none;
    border-top:1px solid #000;
    margin-bottom:24px;
  }
 
  .cta-row{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
  }
 
  .btn-more{
    font-family: "Figtree", sans-serif;
    background:var(--orange);
    color:#fff;
    border:none;
    padding:15px 30px;
    font-size:18px;
    font-weight:500;
    letter-spacing:0.5px;
    border-radius:4px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    transition:background 0.2s ease, transform 0.2s ease;
  }
 
  .btn-more:hover{
    background:#e07417;
    transform:translateY(-1px);
  }
 
  .watch-videos{
    font-family: "Figtree", sans-serif;
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#470B00;
    font-weight:400;
    font-size:23px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    font-family:inherit;
  }
 
  .play-circle{
    width: 60px;
    height: 60px;
    border-radius:50%;
    background:var(--navy);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background 0.2s ease;
  }
 
  .watch-videos:hover .play-circle{
    background:var(--blue);
  }
 
  .play-circle svg{
    width: 35px;
    height: 35px;
    fill:#fff;
    margin-left:2px;
  }
 
  /* ---------- Video Modal ---------- */
  .video-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(10,15,25,0.82);
    z-index:1000;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    transition:opacity 0.25s ease;
  }
 
  .video-modal.open{
    display:flex;
    opacity:1;
  }
 
  .video-modal-content{
    position:relative;
    width:100%;
    max-width:860px;
    background:#000;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,0.5);
    transform:scale(0.94);
    transition:transform 0.25s ease;
  }
 
  .video-modal.open .video-modal-content{
    transform:scale(1);
  }
 
  .video-modal-content .video-wrap{
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 */
  }
 
  .video-modal-content iframe,
  .video-modal-content video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
  }
 
  .video-modal-close{
    position:absolute;
    top:-46px;
    right:0;
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    border:none;
    color:#fff;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s ease;
  }
 
  .video-modal-close:hover{
    background:rgba(255,255,255,0.25);
  }
 
  @media (max-width:600px){
    .video-modal-close{
      top:-42px;
      right:0;
      width:32px;
      height:32px;
      font-size:18px;
    }
  }
 
  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .about-section{
      grid-template-columns:1fr;
      padding:50px 20px;
    }
    .collage{
      max-width:360px;
      margin-bottom:20px;
    }
  }
 
  @media (max-width:480px){
    .content h1{font-size:29px;}
    .expert-panel{flex-direction:column;}
    .expert-photo{width:100%;height:150px;}
  }

  .img-top img{
    width: 460px;
    height: 694px;
    border-radius:500px;
  }

  

/* ========================services-css================================== */

  .services-wrap{
    padding: 100px 0;
  }
 .services-wrap .content{
    text-align: center;
    margin-bottom: 50px;
 }
 .services-wrap .content h2 span{
    display: inline;
 }
  .service-slide{ padding: 12px; }
 
  /* ---- Card ---- */
  .service-card{
    position: relative;
    border-radius: 14px;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 2px 6px rgba(16,37,76,0.04);
    transition: box-shadow .4s ease;
  }
 
  .card-inner{
    position: relative;
    z-index: 2;
    padding: 34px 28px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
 
  /* background photo layer - hidden until slide is active */
  .card-bg{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity .6s ease, transform .8s ease;
    z-index: 0;
  }
 
  .card-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,24,42,0.35) 0%, rgba(10,16,30,0.82) 100%);
    opacity: 0;
    transition: opacity .6s ease;
    z-index: 1;
  }
 
  /* when Slick marks this slide as the current/centered one */
  .slick-current .service-card{
    box-shadow: 0 20px 40px rgba(16,37,76,0.22);
  }
 
  .slick-current .card-bg,
  .slick-current .card-overlay{
    opacity: 1;
  }
 
  .slick-current .card-bg{
    transform: scale(1);
  }
 
  .slick-current .service-title{ color: #fff; }
  .slick-current .service-desc{ color: rgba(255,255,255,0.82); }
  .slick-current .service-footer{ border-top-color: rgba(255,255,255,0.25); }
  .slick-current .know-more{ color: #fff; }
  .slick-current .icon-badge{ background: rgba(255,255,255,0.18); }
 
  .icon-badge{
    width: 54px; height: 54px; border-radius: 50%;
    background:#55B34E;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px; flex-shrink: 0;
    transition: background .5s ease;
  }
  .icon-badge svg{ width: 26px; height: 26px; stroke: #fff; }
 
  .service-title{
    font-size: 19px; font-weight: 600; color: var(--navy);
    margin: 0 0 10px; line-height: 1.35;
    transition: color .5s ease;
  }
 
  .service-desc{
    font-size: 14.5px; color: var(--text-muted);
    line-height: 1.65; margin: 0 0 24px; flex-grow: 1;
    transition: color .5s ease;
  }
 
  .service-footer{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px; border-top: 1px dashed rgba(16,37,76,0.14);
    transition: border-color .5s ease;
  }
 
  .know-more{     font-size: 15px;
    font-weight: 400;
    color: #1981E7; text-decoration: none; transition: color .5s ease; }
 
  .arrow-btn{
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--orange);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .arrow-btn svg{ width: 15px; height: 15px; stroke: #fff; }
 
  /* ---- Slick tweaks ---- */
  .slick-slide{ outline: none; }
  .slick-list{ margin: 0 -12px; padding: 10px 0 10px !important; }
 
  /* ---- Nav arrows top-right ---- */
  .nav-arrows{
    position: absolute;  right:16%;
    display: flex; gap: 10px;
  }
  .nav-arrows button{
        width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none; background: var(--blue);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .25s ease, transform .25s ease;
    z-index: 999;
  }
  .nav-arrows button:hover{ background: var(--navy); transform: translateY(-2px); }
  .nav-arrows button svg{ width: 16px; height: 16px; stroke: #fff; }
 
  @media (max-width: 640px){
    .nav-arrows{ display:none; }
  }
  .services-slider  .slick-list{
    padding: 43px 0 10px !important;
  }

  /* =========================impact-css============================ */

    .impact-section{
        padding: 80px 0;
        background-color: #F9F9F9;
  }
 
  .impact-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
  }
 
  /* ---------- LEFT: feature card ---------- */
  .feature-card{
    background: #ffffff;
    border-radius: 16px;
    padding: 38px 34px;
    box-shadow: 0 10px 30px rgba(16,37,76,0.06);
  }
 
  .feature-item{
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
 
  .feature-item + .feature-item{
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px dashed #E4E8EF;
  }
 
  .feature-icon{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #55B34E;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
 
  .feature-icon img{
    width: 30px;
  }
 
  .feature-title{
    font-size: 17.5px;
    font-weight: 600;
    color: var(--orange);
    margin: 2px 0 8px;
  }
 
  .feature-desc{
    font-size: 14px;
    line-height: 1.65;
    color: #000;
    margin: 0;
  }
 
  /* ---------- RIGHT: overlapping images ---------- */
  .impact-visual{
    position: relative;
    width: 100%;
    padding-bottom: 20px;
  }
 
  .visual-main{
    width: 88%;
    margin-left: auto;
    /* border-radius: 16px; */
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(16,37,76,0.18);
  }
 
  .visual-main img{
    width: 100%;
    object-fit: cover;
    display: block;
  }
 
  .visual-secondary{
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 55%;
    border-radius:0;
    overflow: hidden;
    border: 6px solid #ffffff;
    box-shadow: 0 16px 32px rgba(16,37,76,0.20);
  }
 
  .visual-secondary img{
    width: 100%;
    object-fit: cover;
    display: block;
  }
 
  /* ---------- Responsive ---------- */
  @media (max-width: 860px){
    .impact-grid{
      grid-template-columns: 1fr;
    }
    .impact-visual{
      order: -1;
      padding-bottom: 40px;
    }
  }
 
  @media (max-width: 480px){
    .visual-main img{ height: 260px; }
    .visual-secondary img{ height: 140px; }
    .feature-card{ padding: 28px 22px; }
  }


  /* work-benifit */
    .work-benefits{
    background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    padding:90px 0 100px;
    position:relative;
    overflow:hidden;
  }
 
  /* soft ambient glow, purely decorative */
  .work-benefits::before{
    content:"";
    position:absolute;
    top:-120px; right:-120px;
    width:420px; height:420px;
    background:radial-gradient(circle, rgba(240,120,48,.16) 0%, transparent 70%);
    pointer-events:none;
  }
  .work-benefits::after{
    content:"";
    position:absolute;
    bottom:-160px; left:-100px;
    width:380px; height:380px;
    background:radial-gradient(circle, rgba(76,175,109,.14) 0%, transparent 70%);
    pointer-events:none;
  }
 
  .work-benefits .container{
    position:relative;
    z-index:1;
  }
 
  .badge-pill{
    display:inline-block;
    background:rgba(255,255,255,.92);
    color:var(--navy-deep);
    font-family:'Inter', sans-serif;
    font-size:13px;
    font-weight:600;
    padding:8px 18px;
    border-radius:999px;
    margin-bottom:20px;
  }
 
  .wb-heading{
    font-family:'Poppins', sans-serif;
    font-weight:800;
    font-size:clamp(28px, 3.6vw, 42px);
    line-height:1.18;
    color:var(--white);
    margin:0;
  }
 
  .wb-description p{
    color:var(--muted);
    font-size:14.5px;
    line-height:1.75;
    margin:0 0 20px;
  }
 
  .btn-contact{
    background:var(--orange);
    color:#fff;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:14px;
    border:none;
    padding:14px 30px;
    border-radius:8px;
    text-decoration:none;
    display:inline-block;
    box-shadow:0 10px 24px rgba(240,120,48,.28);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
 
  .btn-contact:hover{
    background:var(--orange-deep);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(240,120,48,.38);
  }
 
  /* ---------- cards ---------- */
  .wb-card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:20px;
    padding:32px 28px;
    backdrop-filter:blur(6px);
    height:100%;
  }
 
  /* scroll-reveal starting state */
  .reveal{
    opacity:0;
    transform:translateY(36px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }
 
  /* ----- card 1: stat ----- */
  .stat-number{
    font-family:'Poppins', sans-serif;
    font-weight:800;
    font-size:44px;
    color:var(--white);
    margin:0 0 22px;
    line-height:1;
  }
 
  .icon-circle{
    width:52px; height:52px;
    border-radius:50%;
    background:var(--green);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
    animation:pulse-ring 2.8s ease-out infinite;
  }
 
  .icon-circle svg{width:24px;height:24px;color:#fff;}
 
  @keyframes pulse-ring{
    0%{box-shadow:0 0 0 0 rgba(76,175,109,.45);}
    70%{box-shadow:0 0 0 14px rgba(76,175,109,0);}
    100%{box-shadow:0 0 0 0 rgba(76,175,109,0);}
  }
 
  .wb-card h3{
    font-family: "Figtree", sans-serif;
    font-weight: 500;
    font-size: 32px;
    color:var(--white);
    margin: 0 0 25px;
  }
  .stat-number{
     font-size:40px !important;
     margin-bottom: 45px !important;
     font-weight: 600;
  }
 
  .stat-divider{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.14);
    margin-bottom:16px;
  }
 
  .wb-card p{
    color:#fff;
    font-size:13.5px;
    line-height:1.7;
    margin:0;
  }
 
  /* ----- card 2: image ----- */
  .wb-image-card{
    padding:0;
    overflow:hidden;
    position:relative;
    min-height:380px;
  }
 
  .wb-image-card img{
    width:100%;
    height:100%;
    min-height:380px;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
  }
 
  .wb-image-card:hover img{
    transform:scale(1.06);
  }
 
  .wb-image-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(8,31,69,0) 55%, rgba(8,31,69,.55) 100%);
    pointer-events:none;
  }
 
  /* ----- card 3: community ----- */
  .avatar-row{
    display:flex;
    margin-bottom:24px;
  }
 
  .avatar-row img{
    width:48px; height:48px;
    border-radius:50%;
    border:3px solid var(--navy);
    object-fit:cover;
    margin-left:-14px;
    transition:transform .3s ease;
  }
 
  .avatar-row img:first-child{margin-left:0;}
 
  .wb-card:hover .avatar-row img{
    transform:translateY(-3px);
  }
 
  .wb-card:hover .avatar-row img:nth-child(2){transition-delay:.05s;}
  .wb-card:hover .avatar-row img:nth-child(3){transition-delay:.1s;}
 
  .wb-list{
    list-style:none;
    margin:16px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
 
  .wb-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#fff;
    font-size:13.5px;
    line-height:1.65;
  }
 
  .wb-list li svg{
    flex:none;
    width:16px; height:16px;
    margin-top:2px;
    color:var(--orange);
  }
 
  @media (max-width:991.98px){
    .wb-image-card{min-height:280px; order:-1;}
    .wb-image-card img{min-height:280px;}
  }
 
  @media (max-width:575.98px){
    .work-benefits{padding:64px 0 72px;}
    .wb-card{padding:26px 22px;}
  }
 
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    .icon-circle{animation:none;}
    .wb-image-card img, .btn-contact, .avatar-row img{transition:none;}
  }

  .work-benefits h2 .line1{
      color: #fff;
  }
  .work-benefits h2 .line2{
    color: #fff;
  }
  .icon-circle img{
        width: 30px;
  }

  .dbs-donate-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    background-color: #f4761f;
    padding: 22px 24px;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    width: 100%;
  }
 
  .dbs-donate-banner__icon-circle {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #4caf6e;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .dbs-donate-banner__icon-circle svg {
    width: 30px;
    height: 30px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 1.6;
  }
 
  .dbs-donate-banner p {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    margin-bottom: 0;
  }
 
  .dbs-donate-banner__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color:#043375;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    /* font-weight: 600; */
    padding: 12px 40px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
  }
 
  .dbs-donate-banner__cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
  }
 
  @media (max-width: 700px) {
    .dbs-donate-banner {
      flex-wrap: wrap;
      text-align: center;
      gap: 14px;
    }
    .dbs-donate-banner__message {
      white-space: normal;
      font-size: 17px;
    }
  }
  .dbs-donate-banner__icon-circle img{
    width: 42px;
  }


  .op-our-programs {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    padding:80px 0;
    box-sizing: border-box;
    background-color: #ffffff;
  }
 
  .op-our-programs__wrap {
    max-width: 1200px;
    margin: 0 auto;
  }
 
  /* slick gives each slide a wrapping div, add side gutters here */
  .op-our-programs__slider .slick-slide > div {
    margin: 0 5px;
  }
  .op-our-programs__slider {
    margin: 0 -22px;
  }
 
  .op-our-programs__card {
    position: relative;
    height: 300px;
    border-radius: 14px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }
 
  .op-our-programs__card--awareness {
    background-image: linear-gradient(135deg, #d98a4f 0%, #b3603a 100%);
  }
  .op-our-programs__card--camps {
    background-image: linear-gradient(135deg, #8fae7a 0%, #5f7f56 100%);
  }
  .op-our-programs__card--transplant {
    background-image: linear-gradient(135deg, #3d5a73 0%, #223447 100%);
  }
  .op-our-programs__card--general {
    background-image: linear-gradient(135deg, #b5763f 0%, #7d4f2a 100%);
  }
 
  .op-our-programs__date {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color:#1981E7;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    z-index: 2;
  }
 
  .op-our-programs__arrow-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #3fae5c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
 
  .op-our-programs__arrow-badge svg {
    width: 23px;
    height: 23px;
    stroke: #ffffff;
    stroke-width: 2.2;
    fill: none;
  }
 
  .op-our-programs__overlay {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background-color: #ef7d29;
    border-radius: 10px;
    padding: 16px 18px;
    text-align: center;
    color: #ffffff;
    z-index: 2;
  }
 
  .op-our-programs__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
  }
 
  .op-our-programs__desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0.95;
  }
 
  /* Slick nav arrow styling */
  .op-our-programs__slider .slick-prev,
  .op-our-programs__slider .slick-next {
    width: 40px;
    height: 40px;
    z-index: 3;
  }
  .op-our-programs__slider .slick-prev {
    left: -46px;
  }
  .op-our-programs__slider .slick-next {
    right: -46px;
  }
  .op-our-programs__slider .slick-prev:before,
  .op-our-programs__slider .slick-next:before {
    color: #ef7d29;
    font-size: 32px;
    opacity: 1;
  }
 
  /* Slick dots styling */
  .op-our-programs__slider .slick-dots {
    bottom: -40px;
  }
  .op-our-programs__slider .slick-dots li button:before {
    font-size: 10px;
    color: #ef7d29;
    opacity: 0.4;
  }
  .op-our-programs__slider .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #ef7d29;
  }
 
  @media (max-width: 700px) {
    .op-our-programs {
      padding: 40px 20px 60px;
    }
    .op-our-programs__slider .slick-prev {
      left: -6px;
    }
    .op-our-programs__slider .slick-next {
      right: -6px;
    }
  }

  .op-our-programs .content  h2 span{
    display: inline;
  }
  .op-our-programs .content{
    text-align: center;
    margin-bottom: 40px;
  }

  /* footer-css */

   .ftr-site-footer {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    background-color: #043375;
    color: #ffffff;
  }
 
  .ftr-site-footer__container {
    padding: 50px 0 40px;
  }
 
  /* Brand column */
  .ftr-site-footer__brand {
    max-width: 260px;
  }
 
  .ftr-site-footer__logo-circle {
    /* width: 92px;
    height: 92px;
    border-radius: 50%;
    background-color: #0e0e0e;
    border: 2px dotted #4f7db8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    margin-bottom: 16px;
  }
 
  .ftr-site-footer__logo-circle svg {
    width: 34px;
    height: 22px;
  }
 
  .ftr-site-footer__logo-name {
    font-size: 12px;
    font-weight: 700;
    color: #e0b25a;
    margin-top: 4px;
    letter-spacing: 0.3px;
  }
 
  .ftr-site-footer__logo-tag {
    font-size: 6px;
    letter-spacing: 1.5px;
    color: #cfcfcf;
    margin-top: 2px;
  }
 
  .ftr-site-footer__brand p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #c7d3e3;
    margin: 0;
  }
 
  /* Link columns */
 
  .ftr-site-footer__heading {
     font-family: "Marcellus", serif;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 35px;
    color: #ffffff;
  }
 
  .ftr-site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
  }
 
  .ftr-site-footer__links li {
    margin-bottom: 22px;
  }
 
  .ftr-site-footer__links a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s ease;
  }
 
  .ftr-site-footer__links a:hover {
    color: #ffffff;
  }
 
  /* Contact column */
  .ftr-site-footer__contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    color: #fff;
  }
 
  .ftr-site-footer__contact-item svg {
    width: 15px;
    height: 15px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 1.8;
    flex-shrink: 0;
  }
 
  .ftr-site-footer__social {
    display: flex;
    gap: 12px;
    margin-top: 22px;
  }
 
  .ftr-site-footer__social a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #4f7db8;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .ftr-site-footer__social svg {
    width: 14px;
    height: 14px;
    fill: #ffffff;
  }
 
  /* Bottom bar */
  .ftr-site-footer__bottom {
    background-color: #081f42;
    text-align: center;
    padding: 16px 20px;
    font-size: 12.5px;
    color: #9fb1cb;
  }
 
  @media (max-width: 700px) {
    .ftr-site-footer__main {
      flex-direction: column;
    }
  }
  .ftr-site-footer__logo-circle img{
    width: 150px;
    height: 130px;
  }