@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Pacifico&display=swap');

    :root{
      --teal-1:#0d5e6d;
      --teal-2:#08788f;
      --teal-3:#0a4454;
      --gold:#f4ad18;
      --gold-2:#ffc844;
      --sky:#8dd5f2;
      --ink:#073a4c;
      --soft:#f6fbfd;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:"Google Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
      color:#183642;
      background:#fff;
    }

    a{text-decoration:none}
    .container-fluid.header-wrap{padding-left:clamp(18px,4vw,86px);padding-right:clamp(18px,4vw,86px)}

    /* ===================== TOP BAR ===================== */
    .topbar{
      position:relative;
      overflow:hidden;
      min-height:61px;
      display:flex;
      align-items:center;
      color:#fff;
      background:
        linear-gradient(102deg,#14707b 0%,#146b77 36%,#0d5e6d 54%,#1e96c7 100%);
    }
    .topbar:before,
    .topbar:after{
      content:"";
      position:absolute;
      border-radius:0 0 55% 55%;
      opacity:.22;
      pointer-events:none;
    }
    .topbar:before{
      width:410px;height:105px;right:25%;top:-66px;
      background:#0e3f52;
      transform:rotate(-3deg);
    }
    .topbar:after{
      width:350px;height:95px;right:13%;top:-57px;
      background:#68c6e9;
      opacity:.12;
    }
    .top-contact,.top-right{position:relative;z-index:2}
    .top-contact{
      display:flex;align-items:center;gap:24px;flex-wrap:wrap;
      font-size:15px;font-weight:600;
    }
    .top-contact .item{
      display:flex;align-items:center;gap:10px;white-space:nowrap;
    }
    .top-contact .item + .item{padding-left:20px;border-left:1px solid rgba(255,255,255,.46)}
    .top-contact i{font-size:19px}
    .whatsapp i{color:#40db69;font-size:24px}
    .top-right{
      display:flex;align-items:center;justify-content:flex-end;gap:16px;
      min-width:0;
    }
    .tagline{
      text-transform:uppercase;
      font-size:11px;
      letter-spacing:3.2px;
      font-weight:700;
      white-space:nowrap;
      color:#effcff;
      margin-right:4px;
    }
    .socials{display:flex;align-items:center;gap:8px}
    .social{
      width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
      color:#fff;font-size:18px;box-shadow:0 4px 10px rgba(0,0,0,.13)
    }
    .social.fb{background:#3164ac}.social.ig{background:linear-gradient(135deg,#7d32b5,#ff3e62,#ffbf2e)}
    .social.yt{background:#ef1616}.social.in{background:#1b74a9}
    .diff-btn{
      background:#fff;color:#153f4e;border-radius:40px;padding:10px 20px;
      display:flex;align-items:center;gap:10px;font-weight:700;white-space:nowrap;
      box-shadow:0 6px 18px rgba(0,0,0,.10);
    }
    .diff-btn i{color:#f5ad14}

    /* ===================== BRAND ROW ===================== */
    .brand-row{
      position:relative;
      min-height:214px;
      display:flex;align-items:center;
      overflow:hidden;
      background:
        radial-gradient(circle at 10% 82%,rgba(119,220,186,.22),transparent 30%),
        radial-gradient(circle at 78% 20%,rgba(126,215,246,.22),transparent 24%),
        linear-gradient(90deg,#ffffff 0%,#fbfdfe 68%,#ecfaff 100%);
    }
    .brand-row:after{
      content:"";
      position:absolute;right:-50px;bottom:-65px;width:330px;height:170px;
      background:rgba(138,220,239,.16);border-radius:50%;transform:rotate(-14deg)
    }

    .identity{
      display:flex;align-items:center;gap:24px;min-width:0
    }
    .logo-wrap{
      flex:0 0 175px;width:175px;height:175px;border-radius:50%;
      display:grid;place-items:center;
      background:conic-gradient(from 10deg,#006f92,#31a6d0,#f6b11b,#e9a617,#087e9a,#006f92);
      padding:6px;
      box-shadow:0 12px 28px rgba(0,89,116,.14);
    }
    .logo-inner{
      width:100%;height:100%;border-radius:50%;background:#fff;
      display:grid;place-items:center;position:relative;overflow:hidden;
      border:5px solid #fff;
    }
    .logo-inner:before{
      display:none;
      content:"";
      width:74px;height:74px;border-radius:50%;
      background:#117aa7;position:absolute;top:54px;left:48px;
      box-shadow:-42px 28px 0 -16px #f0ad1b,42px 28px 0 -16px #71b64c;
    }
    .logo-inner:after{
      display:none;
      content:"";
      position:absolute;width:112px;height:50px;left:26px;bottom:34px;
      border:10px solid #f2b01d;border-top:none;border-radius:0 0 80px 80px;
      transform:rotate(-7deg);
    }

    .trust-logo-img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      border-radius:50%;
    }

    .logo-icon{
      position:absolute;top:25px;font-size:39px;color:#1582a8;z-index:4;
    }
    .logo-hand{
      position:absolute;bottom:41px;font-size:58px;color:#08769a;z-index:3
    }

    .brand-copy h1{
      margin:0;color:#08425a;
    font-size: clamp(33px, 3.2vw, 35px);
font-weight:700;
      line-height:.98;letter-spacing:-1.2px;
    }
    .brand-copy .motto{
      margin-top:14px;font-size:16px;letter-spacing:5px;color:#355966;
      white-space:nowrap
    }
    .motto .sep{color:#df9f20;margin:0 10px}

    .signature{
      color:#07627c;
      font-family:"Pacifico",cursive;
      font-size:clamp(34px,3vw,34px);
      line-height:1.03;
      text-align:center;
      transform:rotate(-4deg);
      position:relative;
      padding:5px 12px 18px;
    }
    .signature:after{
      content:"";position:absolute;left:20%;right:7%;bottom:2px;height:4px;
      border-radius:50%;
      background:linear-gradient(90deg,transparent,#f6a700 15%,#f6a700 90%,transparent);
      transform:rotate(-7deg);
    }

    .action-grid{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
    }
    .action-card{
      min-height:96px;border-radius:18px;padding:17px 18px;
      display:flex;align-items:center;gap:15px;color:#032f49;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px rgba(2,71,92,.10);
      transition:.22s ease;
    }
    .action-card:hover{transform:translateY(-3px)}
    .action-card .icon{font-size:35px;line-height:1;color:#fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.07))}
    .action-card strong{display:block;font-size:18px;white-space:nowrap}
    .action-card small{display:block;font-size:13px;font-weight:600;margin-top:3px;white-space:nowrap}
    .action-card.donate{background:linear-gradient(#ffd154,#ecaa16)}
    .action-card.join{background:linear-gradient(#aee2f7,#68bbdc)}
    .action-card.prayer{background:linear-gradient(#0f7fa5,#075d7c);color:#fff}


    /* ===================== MOBILE LEFT POPUP NAV ===================== */
    .mobile-nav-trigger{
      display:none;
      border:1px solid rgba(255,255,255,.55);
      background:rgba(255,255,255,.08);
      color:#fff;
      width:46px;
      height:42px;
      border-radius:8px;
      align-items:center;
      justify-content:center;
      font-size:22px;
      padding:0;
    }

    .mobile-nav-panel{
      position:fixed;
      inset:0 auto 0 0;
      width:min(88vw,360px);
      height:100dvh;
      background:linear-gradient(180deg,#075b69 0%,#064554 100%);
      z-index:100002;
      transform:translateX(-105%);
      transition:transform .34s ease;
      overflow-y:auto;
      box-shadow:18px 0 50px rgba(0,0,0,.28);
      overscroll-behavior:contain;
    }
    .mobile-nav-panel.show{transform:translateX(0)}

    .mobile-nav-backdrop{
      position:fixed;
      inset:0;
      z-index:100001;
      background:rgba(0,24,31,.58);
      backdrop-filter:blur(2px);
      opacity:0;
      visibility:hidden;
      transition:.3s ease;
    }
    .mobile-nav-backdrop.show{
      opacity:1;
      visibility:visible;
    }

    .mobile-nav-head{
      position:sticky;
      top:0;
      z-index:4;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 18px;
      color:#fff;
      background:linear-gradient(90deg,#08778a,#055260);
      border-bottom:1px solid rgba(255,255,255,.16);
      box-shadow:0 5px 15px rgba(0,0,0,.11);
    }
    .mobile-nav-head strong{font-size:18px}
    .mobile-nav-close{
      width:40px;height:40px;border:0;border-radius:50%;
      background:#fff;color:#075768;font-size:20px;
      display:grid;place-items:center;
    }

    .mobile-nav-body{padding:12px 12px 24px}
    .mobile-menu-link,
    .mobile-menu-toggle{
      width:100%;
      border:0;
      color:#fff;
      background:transparent;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:13px 14px;
      border-radius:9px;
      font-weight:600;
      text-align:left;
    }
    .mobile-menu-link .left,
    .mobile-menu-toggle .left{
      display:flex;align-items:center;gap:12px;
    }
    .mobile-menu-link:hover,
    .mobile-menu-toggle:hover,
    .mobile-menu-link.active{
      background:rgba(255,255,255,.11);
      color:#fff;
    }
    .mobile-menu-link.active{
      background:linear-gradient(90deg,#f4ae19,#ffc94c);
      color:#073d4d;
    }

    .mobile-submenu{
      max-height:0;
      overflow:hidden;
      opacity:0;
      visibility:hidden;
      padding:0 0 0 36px;
      transform:translateY(-6px);
      transition:
        max-height .38s cubic-bezier(.4,0,.2,1),
        opacity .24s ease,
        transform .28s ease,
        padding .28s ease,
        visibility 0s linear .38s;
      will-change:max-height, opacity, transform;
    }
    .mobile-submenu.show{
      max-height:320px;
      opacity:1;
      visibility:visible;
      padding:4px 0 7px 36px;
      transform:translateY(0);
      transition:
        max-height .42s cubic-bezier(.4,0,.2,1),
        opacity .26s ease,
        transform .3s ease,
        padding .3s ease,
        visibility 0s;
    }
    .mobile-submenu a{
      display:block;
      color:#d9f4f8;
      padding:9px 12px;
      border-left:2px solid rgba(255,255,255,.18);
      font-size:14px;
    }
    .mobile-submenu a:hover{
      color:#fff;
      border-left-color:#f4ae19;
      background:rgba(255,255,255,.06);
    }

    .mobile-search{
      margin:14px 2px 8px;
      display:flex;
      align-items:center;
      background:#fff;
      border-radius:30px;
      overflow:hidden;
      padding:0 7px 0 15px;
      height:44px;
    }
    .mobile-search input{
      flex:1;border:0;outline:0;min-width:0;
    }
    .mobile-search button{
      border:0;background:transparent;color:#075768;font-size:18px;
    }

    body.mobile-nav-open{overflow:hidden}

    /* ===================== NAVBAR ===================== */
    .mainnav{
      background:linear-gradient(90deg,#0d6872,#005166 68%,#07455a);
      box-shadow:0 -1px 0 rgba(255,255,255,.08);
    }
    .mainnav .navbar{padding:0;min-height:67px}
    .mainnav .navbar-nav{align-items:stretch}
    .mainnav .nav-item{display:flex;align-items:stretch}
    .mainnav .nav-link{
      color:#fff!important;font-weight:700;padding:22px 23px!important;
      display:flex;align-items:center;gap:10px;white-space:nowrap;
      font-size:16px;border-radius:0;
    }
    .mainnav .nav-link.active{
      color:#083947!important;
      background:linear-gradient(#ffc94a,#efaa17);
      border-radius:7px 7px 0 0;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.45)
    }
    .mainnav .nav-link:hover{background:rgba(255,255,255,.07)}
    .mainnav .nav-link.active:hover{background:linear-gradient(#ffd05d,#f1ad1b)}
    .dropdown-menu{
      border:0;border-radius:10px;padding:10px;
      box-shadow:0 18px 40px rgba(0,45,60,.18)
    }
    .dropdown-item{border-radius:8px;padding:10px 13px}
    .dropdown-item:hover{background:#e9f7fa;color:#056378}
    .search-box{
      width:245px;height:43px;border-radius:30px;background:#fff;
      display:flex;align-items:center;padding:0 16px;margin-left:18px;
      flex:0 0 auto;
    }
    .search-box input{border:0;outline:0;width:100%;font-size:15px}
    .search-box button{border:0;background:transparent;color:#0a536b;font-size:21px}

    .navbar-toggler{
      border:1px solid rgba(255,255,255,.45);
      color:#fff;padding:7px 10px
    }
    .navbar-toggler:focus{box-shadow:none}
    .navbar-toggler-icon{
      filter:brightness(0) invert(1);
    }

    /* demo section below header */
    .hero-placeholder{
      min-height:250px;
      background:linear-gradient(135deg,#eef9fb,#fff);
      display:grid;place-items:center;text-align:center;padding:35px 20px;color:#55727b
    }
    .hero-placeholder h2{color:#0a5669;font-weight:700}

    @media (max-width: 1399.98px){
      .top-contact{gap:14px}
      .top-contact .item + .item{padding-left:14px}
      .tagline{display:none}
      .brand-row{min-height:190px}
      .logo-wrap{width:145px;height:145px;flex-basis:145px}
      .logo-inner:before{
      display:none;transform:scale(.82);transform-origin:center}
      .logo-inner:after{
      display:none;transform:scale(.82) rotate(-7deg);left:15px;bottom:25px}
      .logo-icon{top:17px}
      .logo-hand{bottom:27px}
      .brand-copy h1{font-size:42px}
      .brand-copy .motto{font-size:14px;letter-spacing:3px}
      .action-card{padding:14px 13px;gap:10px}
      .action-card strong{font-size:16px}
      .action-card small{font-size:11px}
      .mainnav .nav-link{padding:21px 15px!important;font-size:15px}
      .search-box{width:205px}
    }

    @media (max-width: 1199.98px){
      .topbar{padding:10px 0}
      .top-right{justify-content:flex-start;margin-top:10px}
      .brand-row{padding:22px 0}
      .signature{display:none}
      .action-grid{margin-top:20px}
      .mainnav .navbar{padding:8px 0}
      .mainnav .navbar-collapse{padding-top:12px}
      .mainnav .navbar-nav{align-items:stretch}
      .mainnav .nav-item{display:block}
      .mainnav .nav-link{padding:12px 12px!important;border-radius:8px!important}
      .mainnav .nav-link.active{border-radius:8px!important}
      .search-box{margin:12px 0 6px;width:100%;max-width:360px}
    }

    @media (max-width: 767.98px){
      .container-fluid.header-wrap{padding-left:16px;padding-right:16px}
      .top-contact{gap:10px;font-size:13px}
      .top-contact .item + .item{border-left:0;padding-left:0}
      .top-contact .item:nth-child(2){display:none}
      .diff-btn{padding:8px 12px;font-size:13px}
      .social{width:30px;height:30px;font-size:15px}
      .brand-row{min-height:auto}
      .identity{align-items:center;gap:13px}
      .logo-wrap{width:95px;height:95px;flex-basis:95px;padding:4px}
      .logo-inner:before{
      display:none;width:45px;height:45px;top:28px;left:23px;box-shadow:-26px 17px 0 -10px #f0ad1b,26px 17px 0 -10px #71b64c}
      .logo-inner:after{
      display:none;width:70px;height:33px;left:7px;bottom:12px;border-width:6px}
      .logo-icon{font-size:24px;top:12px}
      .logo-hand{font-size:34px;bottom:15px}
      .brand-copy h1{font-size:clamp(25px,7.3vw,37px);line-height:1.02}
      .brand-copy .motto{font-size:11px;letter-spacing:1.7px;white-space:normal}
      .motto .sep{margin:0 5px}
      .action-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;gap:10px}
      .action-card{min-height:75px;border-radius:13px}
      .action-card .icon{font-size:29px}
      .action-card strong{font-size:16px}
      .action-card small{font-size:12px}
    }

    @media (max-width: 499.98px){
      .top-right{flex-wrap:wrap}
      .socials{order:2}
      .diff-btn{order:1}
      .top-contact .item:first-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}
      .identity{align-items:flex-start}
      .brand-copy h1{font-size:25px}
    }

    @media (max-width:1199.98px){
      .mobile-nav-trigger{display:flex}
      .mainnav .navbar-collapse{display:none!important}
      .mainnav .navbar{
        min-height:58px;
        padding:8px 0;
        justify-content:flex-start;
      }
      .mainnav{position:relative;z-index:1000}
      .mainnav .desktop-mobile-label{
        display:block!important;
        color:#fff;
        font-weight:700;
        margin-left:12px;
      }
    }


    .mobile-menu-toggle > .fa-chevron-down,
    .mobile-menu-toggle > .fa-chevron-up{
      transition:transform .28s ease;
    }
    .mobile-menu-toggle.is-open > .fa-chevron-down,
    .mobile-menu-toggle.is-open > .fa-chevron-up{
      transform:rotate(180deg);
    }

    /* Mobile: Donate + Join in one row; hide Prayer Request */
    @media (max-width:767.98px){
      .action-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
      }
      .action-card.prayer{
        display:none;
      }
      .action-card{
        min-width:0;
        padding:12px 10px;
        gap:8px;
      }
      .action-card .icon{
        font-size:25px;
        flex:0 0 auto;
      }
      .action-card strong{
        font-size:14px;
        white-space:normal;
        line-height:1.15;
      }
      .action-card small{
        font-size:10px;
        white-space:normal;
        line-height:1.2;
      }
    }

    /* Tablet: all 3 CTA buttons stay in one row */
    @media (min-width:768px) and (max-width:1199.98px){
      .action-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
      }
      .action-card.prayer{
        display:flex;
      }
      .action-card{
        min-width:0;
        padding:13px 11px;
        gap:9px;
      }
      .action-card .icon{
        font-size:28px;
        flex:0 0 auto;
      }
      .action-card strong{
        font-size:15px;
        white-space:normal;
        line-height:1.15;
      }
      .action-card small{
        font-size:11px;
        white-space:normal;
        line-height:1.2;
      }
    }

    @media (min-width:1200px){
      .mobile-nav-panel,
      .mobile-nav-backdrop,
      .desktop-mobile-label{display:none!important}
    }


    .mobile-top-search{
      display:none;
      margin-left:auto;
      width:min(55vw,240px);
      height:40px;
      border-radius:25px;
      background:#fff;
      align-items:center;
      padding:0 12px 0 15px;
      box-shadow:0 4px 12px rgba(0,0,0,.10);
    }
    .mobile-top-search input{
      width:100%;
      min-width:0;
      border:0;
      outline:0;
      background:transparent;
      font-family:"Google Sans",sans-serif;
      font-size:14px;
      color:#244650;
    }
    .mobile-top-search button{
      flex:0 0 auto;
      border:0;
      background:transparent;
      color:#075768;
      font-size:18px;
      padding:0 0 0 8px;
    }

    @media (max-width:1199.98px){
      .mainnav .navbar{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
        gap:12px;
      }
      .mobile-nav-trigger{
        flex:0 0 46px;
        margin-right:0;
      }
      .desktop-mobile-label{
        display:none!important;
      }
      .mobile-top-search{
        display:flex;
      }
    }

    @media (max-width:399.98px){
      .mobile-top-search{
        width:calc(100% - 60px);
      }
    }

    /* Mobile topbar: Make a Difference left, social media right */
    @media (max-width:767.98px){
      .topbar .row{
        display:flex;
        flex-wrap:wrap;
      }
      .topbar .col-xl-6:first-child{
        width:100%;
      }
      .topbar .col-xl-6:last-child{
        width:100%;
      }
      .top-right{
        width:100%;
        margin-top:10px;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
        gap:12px;
      }
      .top-right .diff-btn{
        order:1;
        margin-right:auto;
      }
      .top-right .socials{
        order:2;
        margin-left:auto;
        justify-content:flex-end;
      }
    }

    @media (max-width:499.98px){
      .top-right{flex-wrap:nowrap;}
      .top-right .diff-btn{order:1;}
      .top-right .socials{order:2;}
    }