.brand-logo{width:76px;height:68px;object-fit:contain}.brand-text{display:none}@media(max-width:1100px){.mobile-panel-head img{width:62px;height:72px;object-fit:contain}}@media(max-width:520px){.brand-logo{width:60px;height:60px}}
/* Homepage giving gateway */
.giving-gateway { display: grid; gap: clamp(2.3rem, 5vw, 4rem); padding-block: .35rem 1rem; }
.giving-gateway-hero { position: relative; display: grid; min-height: min(720px, calc(100svh - 94px)); grid-template-columns: minmax(0, 1.08fr) minmax(370px, .72fr); align-items: center; gap: clamp(1.5rem, 5vw, 4.5rem); overflow: hidden; padding: clamp(1.5rem, 5vw, 4.5rem); border: 1px solid rgb(249 172 15 / 24%); border-radius: 34px; background: radial-gradient(circle at 4% 8%, rgb(249 172 15 / 18%), transparent 23rem), radial-gradient(circle at 95% 8%, rgb(57 160 126 / 18%), transparent 25rem), linear-gradient(140deg, #073d31 0%, #0a5b48 58%, #063429 100%); box-shadow: 0 34px 90px rgb(4 49 39 / 20%); isolation: isolate; }
.giving-gateway-hero::before { position: absolute; inset: 1rem; z-index: -1; border: 1px solid rgb(255 255 255 / 7%); border-radius: 26px; content: ''; pointer-events: none; }
.giving-gateway-copy { color: #fff; }
.gateway-kicker { display: inline-flex; padding: .48rem .8rem; border: 1px solid rgb(249 199 82 / 24%); border-radius: 999px; color: #f6ca65; background: rgb(255 255 255 / 6%); font-size: .73rem; font-weight: 900; }
.giving-gateway-copy h1 { max-width: 10ch; margin: .8rem 0 1rem; color: #fff; font-size: clamp(2.8rem, 6.8vw, 6.3rem); font-weight: 950; line-height: 1.04; letter-spacing: -.055em; }
.giving-gateway-copy > p { max-width: 680px; margin: 0; color: #d7e9e3; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.95; }
.gateway-trust { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; }
.gateway-trust span { padding: .5rem .7rem; border: 1px solid rgb(255 255 255 / 11%); border-radius: 999px; color: #eef7f4; background: rgb(255 255 255 / 6%); font-size: .72rem; font-weight: 800; }
.quick-contribution-card { position: relative; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid rgb(255 255 255 / 17%); border-radius: 27px; background: linear-gradient(150deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 7%)); box-shadow: 0 28px 70px rgb(0 0 0 / 23%); backdrop-filter: blur(18px); }
.quick-card-head { display: flex; align-items: center; gap: .85rem; color: #fff; }
.quick-card-head img { width: 72px; height: 82px; object-fit: contain; filter: drop-shadow(0 9px 15px rgb(0 0 0 / 22%)); }
.quick-card-head > div { display: grid; gap: .15rem; }
.quick-card-head span { color: #f4ca69; font-size: .7rem; font-weight: 850; }
.quick-card-head strong { font-size: clamp(1.1rem, 2vw, 1.45rem); }
.quick-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-block: 1.15rem; }
.quick-amounts a { display: flex; min-height: 62px; align-items: baseline; justify-content: center; gap: .3rem; padding: .75rem .45rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: 14px; color: #fff; background: rgb(2 37 29 / 30%); text-decoration: none; transition: .18s ease; }
.quick-amounts a:hover { color: #153429; border-color: #f4c65b; background: #f4c65b; transform: translateY(-2px); }
.quick-amounts strong { font-size: 1.05rem; }.quick-amounts small { font-size: .59rem; font-weight: 800; }
.gateway-main-action { width: 100%; min-height: 52px; justify-content: center; }
.payment-showcase { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 12%); }
.payment-showcase-title { display: block; margin-bottom: .6rem; color: #c9ded7; font-size: .67rem; font-weight: 800; }
.payment-marks { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.payment-mark { position: relative; display: inline-flex; min-width: 63px; height: 39px; align-items: center; justify-content: center; overflow: hidden; padding: .25rem .5rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 9px; color: #142d31; background: #fff; box-shadow: 0 6px 15px rgb(0 0 0 / 12%); font-family: Arial, sans-serif; font-size: .8rem; font-weight: 900; }
.paypal-mark { gap: 0; font-style: italic; }.paypal-mark b:first-child { color: #123f83; }.paypal-mark b:last-child { color: #1385c5; }
.visa-mark { color: #172b85; font-size: 1rem; font-style: italic; letter-spacing: -.04em; }
.mastercard-mark { min-width: 85px; padding-inline-start: 43px; }
.mastercard-mark i { position: absolute; inset-block-start: 8px; width: 23px; height: 23px; border-radius: 50%; background: #ea001b; }
.mastercard-mark i:first-child { inset-inline-start: 9px; }.mastercard-mark i:nth-child(2) { inset-inline-start: 24px; background: #f79e1b; opacity: .92; }
.mastercard-mark small { font-size: .48rem; font-weight: 700; }
.mada-mark { color: #137a5d; font-size: 1rem; letter-spacing: -.07em; text-transform: lowercase; }
.bank-mark { min-width: 110px; gap: .35rem; color: #175e4d; }.bank-mark b { font-size: 1.05rem; }.bank-mark small { max-width: 70px; font-size: .52rem; font-weight: 800; line-height: 1.15; }
.payment-availability-note { display: block; margin-top: .65rem; color: #b9d0c9; font-size: .61rem; line-height: 1.55; }
.gateway-section-heading { max-width: 800px; margin-inline: auto; text-align: center; }
.gateway-section-heading > span { color: #a96a00; font-size: .72rem; font-weight: 900; letter-spacing: .06em; }
.gateway-section-heading h2 { margin: .35rem 0; color: #073d31; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; }
.gateway-section-heading p { margin: 0; color: #65746f; line-height: 1.8; }
.waqf-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.waqf-case-card { position: relative; display: flex; min-height: 385px; flex-direction: column; overflow: hidden; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid #dae7e2; border-radius: 25px; background: linear-gradient(150deg, #fff 42%, #f0f8f5); box-shadow: 0 20px 55px rgb(6 61 49 / 8%); transition: transform .22s ease, box-shadow .22s ease; }
.waqf-case-card:hover { transform: translateY(-6px); box-shadow: 0 30px 65px rgb(6 61 49 / 13%); }
.waqf-case-card::after { position: absolute; inset-block-start: -55px; inset-inline-end: -50px; width: 155px; height: 155px; border: 28px solid rgb(31 107 69 / 5%); border-radius: 50%; content: ''; }
.case-number { position: relative; z-index: 1; color: #a36a06; font-size: .7rem; font-weight: 900; }
.case-symbol { display: grid; width: 60px; height: 60px; place-items: center; margin: 1.25rem 0; border-radius: 19px; color: #0b654f; background: #e5f4ee; font-size: 1.8rem; }
.waqf-case-card h3 { margin: 0; color: #073d31; font-size: 1.45rem; }.waqf-case-card h4 { margin: .35rem 0 .65rem; color: #ad7007; font-size: .9rem; }
.waqf-case-card p { margin: 0 0 1.2rem; color: #60726c; font-size: .87rem; line-height: 1.85; }
.waqf-case-card a { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; color: #0a624d; font-size: .78rem; font-weight: 900; text-decoration: none; }
.gateway-project-heading { margin-top: .4rem; }
.gateway-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gateway-project-card { overflow: hidden; border: 1px solid #dbe6e2; border-radius: 25px; background: #fff; box-shadow: 0 20px 55px rgb(8 58 47 / 8%); }
.gateway-project-visual { position: relative; display: grid; min-height: 180px; place-items: center; overflow: hidden; background: radial-gradient(circle at 20% 15%, rgb(249 172 15 / 24%), transparent 12rem), linear-gradient(145deg, #0b604b, #06382d); }
.gateway-project-visual::after { position: absolute; inset: 1rem; border: 1px solid rgb(255 255 255 / 8%); border-radius: 17px; content: ''; }
.gateway-project-visual img { width: 96px; height: 112px; object-fit: contain; filter: drop-shadow(0 12px 18px rgb(0 0 0 / 25%)); }
.gateway-project-visual > span { position: absolute; inset-block-end: 1rem; inset-inline-end: 1.2rem; color: rgb(255 255 255 / 35%); font-size: 2.1rem; font-weight: 950; }
.gateway-project-body { padding: 1.35rem; }.gateway-project-body > small { color: #aa6d05; font-weight: 850; }.gateway-project-body h3 { margin: .35rem 0 .55rem; color: #083f33; font-size: 1.3rem; }.gateway-project-body p { min-height: 4.8em; margin: 0; color: #687873; font-size: .84rem; line-height: 1.75; }
.gateway-project-body a { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; color: #0a674f; font-size: .78rem; font-weight: 900; text-decoration: none; }
@media (max-width: 950px) {
    .giving-gateway-hero { min-height: auto; grid-template-columns: 1fr; }
    .giving-gateway-copy h1 { max-width: 12ch; }
    .quick-contribution-card { width: min(620px, 100%); }
    .waqf-case-grid, .gateway-project-grid { grid-template-columns: 1fr 1fr; }
    .waqf-case-grid > :last-child, .gateway-project-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .giving-gateway { gap: 2.2rem; }
    .giving-gateway-hero { padding: 1rem; border-radius: 23px; }
    .giving-gateway-hero::before { inset: .5rem; border-radius: 18px; }
    .giving-gateway-copy { padding: .6rem .45rem 0; }
    .giving-gateway-copy h1 { font-size: clamp(2.35rem, 13vw, 4rem); }
    .gateway-trust { display: grid; }
    .quick-contribution-card { padding: 1rem; border-radius: 20px; }
    .quick-card-head img { width: 58px; height: 68px; }
    .quick-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-mark { min-width: 58px; }
    .waqf-case-grid, .gateway-project-grid { grid-template-columns: 1fr; }
    .waqf-case-grid > :last-child, .gateway-project-grid > :last-child { grid-column: auto; }
    .waqf-case-card { min-height: 340px; }
}