body,
html {
  font-family: "Poppins", serif;
  font-size: 16px;
  font-weight:400;
  color:var(--primarygreen);
}
:root {
    --primaryorange: #F19936;
    --primarygreen : #003240;
    --beige : #EDE7D9;
    --lightgreen  :#BFD9E1;
    --color-white:#fff;
}
.color-white{
     color:var( --color-white);
}
.color-primaryorange{
    color:var( --primaryorange);
}
.color-primarygreen{
    color:var(--secondary-rust);
}
.color-beige{
    color:var(--beige);
}
.color-lightgreen{
    color:var(--lightgreen);
}
.bg-beige{
    background-color:var(--beige);
}
.bg-primarygreen{
    background-color:var(--primarygreen);
}
.bg-white{
    background-color:var(--color-white);
}
.fs-16{
    font-size:16px;
}
.fs-18{
    font-size:18px;
}
.fs-20{
    font-size:20px;
}
.fs-22{
    font-size:22px;
}
.fs-26{
    font-size:26px;
}
.fs-30{
    font-size: 30px;
}
.fs-48{
    font-size: 48px;
}

.fs-72{
     font-size: 72px;
}
.mt-0{
    margin-top:0;
}
.mt-14{
    margin-top:14px !important;
}
.mb-14{
    margin-bottom:14px !important;
}
.my-14{
    margin-top:14px !important;
    margin-bottom:14px !important;
}
.mt-10{
    margin-top:10px;
}
.mb-16{
    margin-bottom:16px;
}
.mt-16{
    margin-top:16px !important;
}
.mt-20{
    margin-top:20px;
}
.mt-30{
    margin-top:30px;
}
.fw-300 {
    font-weight: 300
}
.fw-400 {
    font-weight: 400
}

.fw-500 {
    font-weight: 500
}

.fw-600 {
    font-weight: 600
}
.fw-700 {
    font-weight: 700
}
.fw-800 {
    font-weight: 800
}
.g-0{
    gap:0;
}
.g-20{
    gap:20px;
}
.g-40{
    gap:40px;
}
.g-30{
    gap:30px;
}
.g-100{
    gap:100px;
}
.g-120{
     gap:120px;
}
.overflow-hidden{
    overflow:hidden;
}
.ls-h2-1{
    letter-spacing: -1.92px;
}
.py-100{
    padding-top:100px;
    padding-bottom:100px;
}
.pt-80{
     padding-top:80px; 
}
.pb-40{
    padding-bottom:40px;
}
.py-80{
    padding-top:80px;
    padding-bottom:80px;
}
.py-120{
    padding-top:120px;
    padding-bottom:120px;
}
.py-140{
    padding-top:140px;
    padding-bottom:140px;
}
.mt-50{
    margin-top:50px;
}
.bgblue-gradient{
    background: linear-gradient(90deg, #003240 50%, #002732 50%);
}
.br-40{
    border-radius:40px 40px 0 0;
}
.navbar-cta{
    margin-left:20px !important;
}
.navheader_wrapper  .header-logo-row{
    border-radius: 14px;
    border: 1px solid #ECECEC;
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(6px);
    padding:12px 20px;
}
.navheader_wrapper {
    position: fixed;
    z-index: 111;
    width: 100%;
    top: 10px;
}
.header-logo-row nav{
    gap:40px;
}

.banner-video{
    position:sticky;
    top:0;
    overflow:hidden;
}
.banner-video:before {
    content: "";
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}
.banner_text{
    position:absolute;
    top:30%;
    max-width:500px !important;
}
.aboutus-wrapper{
    max-width:990px !important;
}
.ourWorkslider {
      display: flex;
      align-items: center;
      height: 100%;
      /*width: fit-content;*/
      will-change: transform;
      gap: 20px;
}
.pin-spacer {
    /*margin: auto 0 !important;*/
    max-width:1320px;
}
.ourapproach-card{
    min-width: 42vw;
    background:var(--beige);
    border-radius:20px;
    position:relative;
}
.approach-textarea{
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}
.ourimpact-section .seperator {
    border-bottom: 1px solid #005269;
    margin: 50px 0;
}
.our-impact-col .heading {
    font-size: 58px;
    font-weight: 300;
    letter-spacing: -2.32px;
}
.our-impact-col .subheading{
    font-size: 24px;
    font-weight:600;
    letter-spacing: -0.48px;
}
/*counter section*/
       .digit-container {
            display: inline-block;
            height: 3.5rem;
            overflow: hidden;
        }

        .digit-strip {
            display: flex;
            flex-direction: column;
            transition: transform 1s ease-in-out;
        }

        .digit {
            height: 3.5rem;
            line-height: 52px;
            text-align: center;
        }

        .our-impact-wrap {
            column-gap: 140px
        }
      .footer-nav  .links .wp-block-paragraph{
          color:var(--lightgreen);
          font-size:16px;
          font-weight:300;
      }
          .aboutus-section:before {
      position: absolute;
    content: '';
    background: url('https://rpf-dev.narrative.asia/wp-content/uploads/2026/09/beige-leaf.svg');
    width: 570px;
    height: 100%;
    z-index: 0;
    right: 20px;
    bottom: -9%;
    background-repeat: no-repeat;
}
.about-story-rightcol{
    position:relative;
    z-index:10;
}
.keydrivers-card{
    padding:20px;
    border-radius:20px;
    background:var(--beige);
    height:100%;
}
.partner-npo-img {
    position: absolute;
    left: 0;
    top: 0;
}
.our-methodcol .rightcol{
    padding:60px;
}
.partner-npo{
    position:relative;
}
footer{
    margin-top:0;
}
.bannner-maxwidth{
    max-width:580px;
}
.mission-col{
    padding-left:120px;
}
.ourmission-wrapper {
    position: relative;
    z-index: 11;
    max-width: 944px;
    text-align: center;
    margin: 0 auto;
}
.partnerus-card{
    background:var(--primarygreen);
    border-radius:20px;
    height:100%;
    padding:20px;
}
.areawork-banner-maxwidth{
     max-width:600px;
}
.programmes-card {
    border-radius: 20px;
    background: var(--color-white);
    padding: 30px;
    height:100%;
}
.programmes-card .list li{
    font-size:18px;
    font-weight:300;
    margin-top:10px;
}
.btn-Primary a{
    background: transparent !important;
    padding: 0;
    font-size:16px;
    color: var(--primarygreen);
    letter-spacing: -0.72px;
    font-weight: 500;
}
.text_end {
    text-align:end;
}
.btn-Primary .wp-element-button.text-white{
    color:var(--color-white);
}
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content:hover {
    background: var(--primarygreen);
    color: var(--primaryorange);
    text-decoration:none;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container{
    top:190%;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
    border:unset;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container{
    visibility:unset;
    width:200px;
    height:fit-content;
}
.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation__submenu-container {
    border-radius:0 0 20px 20px;
}

/* Image container */
.ourapproach-card .col-image figure {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

/* Image */
.ourapproach-card .col-image figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* Gradient overlay */
.ourapproach-card .col-image figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 50, 64, 0.5) 0%,
        rgba(0, 50, 64, 0.5) 100%
    );
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
/*background: linear-gradient(0deg, rgba(0, 50, 64, 0.50) 0%, rgba(0, 50, 64, 0.50) 100%),  -56.185px 0px / 116.531% 100% no-repeat;*/
    background: rgb(0 50 64 / 50%);
}

/* Smooth hover effect */
.ourapproach-card .wp-block-columns:hover .col-image figure::after {
    opacity: 1;
}

.areawork-cta {
    position: absolute;
    left: 15%;
    top: 45%;
    margin-top: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.ourapproach-card .wp-block-columns:hover .areawork-cta{
    opacity:1;
}
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content{
    outline:unset !important;
}

.ourimpact-section {
    margin-bottom: -36px !important;
    position: relative;
    z-index: 4;
}
.footersection{
    margin-top:-36px;
}
.sticky_top{
    position:sticky;
    top:0;
}
.wp-block-navigation-item__label{
    font-size:16px;
}

/**button css/


        /* text: two real lines, no attributes — the mask + roll is plain transform */
        .btn-Primary {

            --gap: 10px;
            --cubicbezier: cubic-bezier(.76, 0, .24, 1);
            display: inline-block;
        }

        .btn-Primary .wp-element-button {
            display: inline-flex;
            align-items: center;
            gap: var(--gap);
            text-decoration: none;
        }
        .btn-Primary .btn-txt {
            position: relative;
            display: block;
            /*height: 1em;*/
            overflow: hidden;
        }

        .btn-Primary .btn-txt span {
            display: block;
            transition: transform .5s var(--cubicbezier);
        }

        .btn-Primary .btn-txt span:last-child {
            position: absolute;
            left: 0;
            top: 0;
            transform: translateY(100%);
        }

        .btn-Primary:hover .btn-txt span:first-child,
        .btn-Primary:focus-within .btn-txt span:first-child {
            transform: translateY(-100%);
        }

        .btn-Primary:hover .btn-txt span:last-child,
        .btn-Primary:focus-within .btn-txt span:last-child {
            transform: translateY(0);
        }

        /* circle: ::before / ::after do ONLY background-color, crossfaded */
        .btn-Primary .btn-icon {
            position: relative;
            flex: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            overflow: hidden;
            display: grid;
            place-items: center;
            transition: transform .45s var(--cubicbezier);
        }

        .btn-Primary .btn-icon::before,
        .btn-Primary .btn-icon::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            transition: opacity .35s var(--cubicbezier);
        }

        .btn-Primary .btn-icon::before {
            background: var(--primaryorange);
        }



        .btn-Primary:hover .btn-icon::after,
        .btn-Primary:focus-within .btn-icon::after {
            opacity: 1;
        }



        /* chevron: two real <img>s stacked in the same cell, sit above the pseudo-elements via z-index */
        .btn-Primary .btn-icon img {
            grid-area: 1/1;
            position: relative;
            z-index: 1;
            width: 16px;
            height: 16px;
            display: block;
            transition: transform .45s var(--cubicbezier);
        }

        .btn-Primary .btn-icon img+img {
            transform: translateX(-160%);
        }

        .btn-Primary:hover .btn-icon img:first-child,
        .btn-Primary:focus-within .btn-icon img:first-child {
            transform: translateX(160%);
        }

        .btn-Primary:hover .btn-icon img+img,
        .btn-Primary:focus-within .btn-icon img+img {
            transform: translateX(0);
        }
        a:-webkit-any-link:focus-visible,
        button:focus-visible,
        nav:focus-visible{
            outline:none;
        }
        :where(.wp-site-blocks *:focus){
            outline:none;
        }
        
            #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1[data-effect="fade_up"].mega-no-js li.mega-menu-item:hover > ul.mega-sub-menu, #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1[data-effect="fade_up"].mega-no-js li.mega-menu-item:focus > ul.mega-sub-menu, #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1[data-effect="fade_up"] li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1[data-effect="fade_up"] li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu {
   transform: translate(0, 16px);
  }
  #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover{
      background:var(--primarygreen);
  }
 #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
     line-height:normal;
 }
  .mega-sub-menu a.mega-menu-link {
    border-bottom: 1px solid #E8E8E8 !important;
}
        /*button css*/
           @media (max-width: 991px) {  
               .our-methodcol .rightcol{
    padding:unset;
}
.g-100,
.g-120 {
    gap: 30px;
}
.bgblue-gradient{
    background:  var(--primarygreen);
}
.partner-npo{
    padding-top:60px;
    padding-bottom:60px;
    display: flex;
    flex-direction: column-reverse;
}
.partner-npo-img {
    position: relative;
    top: 30px;
}
 .leaf-col .leaf-orange{
   display:none; 
}
.fs-72 {
    font-size: 36px;
}
.fs-48 {
    font-size: 32px;
}
.py-140,
.py-120,
.py-100,
.py-80{
        padding-top: 60px;
    padding-bottom: 60px;
}
.fs-26 {
    font-size: 22px;
}
           }
        @media (min-width: 320px) and (max-width: 767px) {
           

.banner-video  figure video{
    height:550px;
}

.g-40{
    row-gap:0;
}
.aboutus-section:before{
    height:450px;
    width:400px;
}
.ourapproach-card{
          min-width: 80vw;
    height:-webkit-fill-available;
}
.ourWorkslider {
    align-items: start;
    flex-wrap: nowrap;
    overflow: auto;
}
.approach-textarea{
    padding:0 16px 16px;
}

.areawork-cta{
    opacity:1 !important;
    position:relative;
    left:unset;
    top:16px;
    padding-bottom:16px;
}
.navbar-cta{
    margin-left:unset !important;
}
.header-logo-row .wp-block-group.is-content-justification-right{
    flex-direction:row-reverse;
}
.navbar-cta{
    margin-right:16px !important;
}
.header-logo-row .custom-logo{
    width:100px !important;
}
.navheader_wrapper .header-logo-row{
    padding:10px;
}
.areawork-cta .btn-txt.color-white{
    color:var(--primarygreen);
}
  .navheader_wrapper  .header-logo-row {
 backdrop-filter: unset;
}
.navheader_wrapper  .header-logo-row.scrolled{
    background: rgba(255, 255, 255, 0.80);
      backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ls-h2-1 {
    letter-spacing: -1.20px;
}
.mission-col{
    padding-left:unset;
}
.our-impact-wrap .wp-block-column:not(:last-child) {
    border-bottom: 1px solid #005269;
    padding-bottom: 30px;
}
.areawork-banner-maxwidth,
.bannner-maxwidth{
    padding:0 16px;
}
.footerBottom{
    flex-direction:column;
    align-items:self-start;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    padding-left: 1rem;
padding-right:0;
}
.wp-block-navigation.items-justified-right{
       --navigation-layout-justification-setting: unset;
    --navigation-layout-justify: unset;
}
.connectwith-us .wp-block-cover__inner-container{
    padding:0 10px;
}

.fs-20,
.fs-18{
    font-size: 16px;
}
.ourapproach-card .wp-block-columns:hover .col-image figure::after{
    opacity:0;
}
.wp-block-navigation__responsive-container.is-menu-open {
        background: var(--beige) !important;
    }

        }