/* KTCC Ring Gallery — Styles */
@media(max-width:900px){#services-overlay .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){#services-overlay .svc-grid{grid-template-columns:1fr!important}}
:root{--color-primary:#C41E3A;--color-primary-dark:#9B1830;--color-primary-light:#F4D0D6;--color-canvas:#FFFFFF;--color-surface-dark:#111111;--color-ink:#111111;--color-body:#222222;--color-mute:#737373;--color-on-dark:#db1a1a;--color-hairline:#D4D4D4;--font:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;--rounded-sm:2px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow:hidden;height:100%}
body{font-family:var(--font);color:var(--color-ink);background:var(--color-canvas);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--color-ink);text-decoration:none}
a:hover{color:var(--color-primary)}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit}
/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;padding:0 32px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);height:70px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-logo img{height:50px;width:auto}
.nav-logo span{font-weight:800;font-size:15px;letter-spacing:0.02em;text-transform:uppercase;color:#fff}
.nav-links{display:flex;gap:20px;align-items:center;margin:0 auto}
.nav-links a{font-size:13px;font-weight:600;letter-spacing:0.02em;position:relative;padding:6px 0;color:#333;text-transform:uppercase;transition:color .2s}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#C41E3A;transition:width .25s ease}
.nav-links a:hover{color:#C41E3A}
.nav-links a:hover::after{width:100%}
.nav-donate-btn{background:#C41E3A;color:#fff!important;padding:10px 24px!important;border-radius:4px;font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-left:12px;flex-shrink:0;transition:background .2s}
.nav-donate-btn:hover{background:#a01830}
.nav-donate-btn::after{display:none!important}
/* NAV DROPDOWNS */
.nav-dropdown-wrap{position:relative}
.nav-dropdown{display:none;position:absolute;top:100%;left:0;min-width:200px;background:#C41E3A;border-radius:0 0 8px 8px;padding:12px 0;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.nav-dropdown-wrap:hover .nav-dropdown,.nav-dropdown-wrap.active .nav-dropdown{display:block}
.nav-dropdown a{display:block;padding:10px 20px;color:#fff!important;font-size:14px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.nav-dropdown a:hover{background:rgba(255,255,255,0.15)}
.nav-dropdown a::after{display:none!important}
/* TEAM CARD ZOOM */
.team-zoom-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:400;display:flex;align-items:center;justify-content:center;cursor:pointer;animation:fadeIn .2s ease}
.team-zoom-overlay img{width:300px;height:300px;border-radius:50%;object-fit:cover;object-position:center top;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.nav-lang{font-size:13px;font-weight:500;color:rgba(255,255,255,0.7)}
.nav-lang a{color:rgba(255,255,255,0.7);font-weight:600}
.nav-lang a:hover{color:#fff}
/* SIDE BUTTONS */
.side-btn{position:fixed;z-index:150;font-size:13px;font-weight:700;letter-spacing:0.02em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .15s;color:#fff}
.side-btn:hover{color:var(--color-primary)}
.side-btn.left{left:32px;top:50%;transform:translateY(-50%)}
.side-btn.right{right:32px;top:50%;transform:translateY(-50%)}
/* RING SECTION */
.ring-section{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,rgba(107,21,37,0.75) 0%,rgba(196,30,58,0.75) 35%,rgba(232,100,44,0.75) 65%,rgba(92,177,58,0.75) 100%)}
.ring-container{position:absolute;width:100%;height:100%;top:0;left:0;perspective:1200px}
.ring-card{position:absolute;width:60px;height:80px;border-radius:var(--rounded-sm);overflow:hidden;cursor:pointer;will-change:transform,opacity;transition:box-shadow .2s;backface-visibility:hidden}
.ring-card img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;background:#111}
.ring-card.hovered{box-shadow:0 0 0 2px var(--color-primary)}
.ring-card::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,var(--fade,0));pointer-events:none;transition:background .3s}
/* CENTER CONTENT */
.center-content{position:relative;z-index:50;text-align:center;pointer-events:none;max-width:480px;display:flex;flex-direction:column;align-items:center}
.center-headline{font-size:42px;font-weight:800;line-height:1.1;letter-spacing:-0.02em;transition:opacity .3s;color:#fff}
.center-sub{font-size:14px;color:rgba(255,255,255,0.8);margin-top:12px;line-height:1.6;max-width:360px;transition:opacity .3s}
.center-preview{display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .35s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.center-preview.visible{opacity:1}
.center-preview-title{font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-0.01em;margin-bottom:16px;max-width:400px;color:#fff}
.center-preview-img{width:320px;height:320px;border-radius:var(--rounded-sm);overflow:hidden;background:var(--color-surface-soft,#F5F4F3)}
.center-preview-img img{width:100%;height:100%;object-fit:contain;display:block}
.center-preview-meta{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.7)}
.center-preview-cta{margin-top:12px;font-size:13px;font-weight:700;color:#fff;letter-spacing:0.02em;pointer-events:auto;cursor:pointer;opacity:0;transition:opacity .3s}
.center-preview-cta.show{opacity:1}
.center-preview-cta:hover{color:var(--color-primary-dark)}
/* CATEGORY LABELS */
.cat-label{position:absolute;z-index:60;font-size:12px;font-weight:600;letter-spacing:0.01em;white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .15s;color:rgba(255,255,255,0.9)}
.cat-label sup{font-size:9px;font-weight:400;margin-left:2px;vertical-align:super}
.cat-label:hover{color:var(--color-primary)}
.cat-label.active{color:var(--color-primary)}
/* CUSTOM CURSOR */
.cursor-dot{position:fixed;width:10px;height:10px;background:var(--color-ink);border-radius:50%;pointer-events:none;z-index:999;transform:translate(-50%,-50%);transition:width .2s,height .2s;mix-blend-mode:exclusion}
.cursor-dot.expand{width:18px;height:18px}
/* FILTER OVERLAY */
.filter-overlay{position:fixed;inset:0;z-index:300;background:rgba(255,255,255,0.97);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.filter-overlay.open{opacity:1;pointer-events:auto}
.filter-overlay.open h2{animation:fadeUp 1s ease forwards;animation-delay:.1s;opacity:0}
.filter-overlay.open .filter-grid{animation:fadeUp 1s ease forwards;animation-delay:.3s;opacity:0}
.filter-overlay.open .filter-apply{animation:fadeUp .8s ease forwards;animation-delay:.5s;opacity:0}
.filter-overlay.open .filter-close{animation:fadeUp .8s ease forwards;animation-delay:.05s;opacity:0}
.filter-overlay h2{font-size:28px;font-weight:800;margin-bottom:32px;color:var(--color-ink)}
.filter-close{position:absolute;top:24px;right:32px;font-size:14px;font-weight:700;cursor:pointer;color:var(--color-ink)}
.filter-grid{display:grid;grid-template-columns:repeat(2,240px);gap:24px 48px}
.filter-group label{display:block;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-mute);margin-bottom:8px}
.filter-group select{width:100%;padding:10px 12px;font-family:var(--font);font-size:14px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);background:var(--color-canvas);color:var(--color-ink);appearance:none;cursor:pointer}
.filter-apply{margin-top:32px;padding:12px 32px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:700;border-radius:var(--rounded-sm);cursor:pointer;transition:background .15s}
.filter-apply:hover{background:var(--color-primary-dark)}
/* GRID VIEW */
.grid-section{position:fixed;inset:0;z-index:250;background:var(--color-canvas);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .3s;padding:80px 32px 32px}
.grid-section.open{opacity:1;pointer-events:auto}
.grid-section.open .grid-header{animation:fadeUp 1s ease forwards;animation-delay:.1s;opacity:0}
.grid-section.open .grid-items{animation:fadeUp 1s ease forwards;animation-delay:.3s;opacity:0}
.grid-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.grid-header h2{font-size:24px;font-weight:800}
.grid-back{font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.grid-back:hover{color:var(--color-primary)}
.grid-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.grid-card{border-radius:var(--rounded-sm);overflow:hidden;cursor:pointer;position:relative;transition:transform .2s}
.grid-card:hover{transform:translateY(-2px)}
.grid-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#F5F4F3}
.grid-card-info{padding:10px 0 0}
.grid-card-title{font-size:14px;font-weight:700;line-height:1.3}
.grid-card-meta{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-mute);margin-top:4px}
.grid-card::before{content:'';position:absolute;top:0;left:0;width:12px;height:12px;background:var(--color-primary)}
/* MOBILE NAV */
.nav-hamburger{display:none;width:28px;height:28px;flex-direction:column;justify-content:center;gap:5px;cursor:pointer}
.nav-hamburger span{display:block;width:100%;height:2px;background:#333}
/* RESPONSIVE */
@media(max-width:768px){
.nav-links{display:none}
.nav-hamburger{display:flex}
.side-btn{display:none}
.cat-label{display:none}
.ring-card{width:20px;height:56px}
.center-headline{font-size:28px}
.center-preview-title{font-size:22px}
.center-preview-img{width:220px;height:150px}
.nav{padding:16px 20px}
.grid-section{padding:70px 16px 16px}
.grid-items{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.filter-grid{grid-template-columns:1fr;max-width:280px}
}
/* ABOUT OVERLAY */
.about-overlay{position:fixed;inset:0;z-index:280;background:linear-gradient(135deg,rgba(107,21,37,0.08) 0%,rgba(196,30,58,0.05) 35%,rgba(232,100,44,0.05) 65%,rgba(92,177,58,0.08) 100%),#fff;overflow-y:auto;opacity:0;pointer-events:none;transform:scale(0.98);transition:opacity .35s ease,transform .35s ease;display:flex;flex-direction:column;align-items:stretch}
.about-overlay.open{opacity:1;pointer-events:auto;transform:scale(1)}
.about-inner{max-width:720px;padding:32px 32px 64px;width:100%}
.about-close{position:fixed;top:80px;right:32px;font-size:14px;font-weight:700;cursor:pointer;z-index:301;color:#6B1525}
.about-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#fff;border:1.5px solid #fff;padding:4px 10px;border-radius:var(--rounded-sm);margin-bottom:24px}
.about-title{font-size:36px;font-weight:800;line-height:1.15;letter-spacing:-0.02em;margin-bottom:20px;color:#9B1830;text-shadow:0 1px 2px rgba(255,255,255,0.5)}
.about-title span{color:#fff}
.about-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rounded-sm);margin-bottom:28px;background:#F5F4F3}
.about-text{font-size:16px;line-height:1.7;color:#6B1525;margin-bottom:20px}
.about-text strong{font-weight:800;color:#6B1525}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.3)}
.about-stat-num{font-size:32px;font-weight:800;color:#9B1830;line-height:1;text-shadow:10 1px 2px rgba(255,255,255,0.5)}
.about-counter{font-size:72px;font-weight:900;line-height:1}
/* Torn paper edge for banners */
.torn-edge{position:relative;padding-bottom:40px}
.torn-edge::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:40px;background:#fff;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,18 Q15,20 30,16 Q50,10 70,14 Q90,18 110,12 Q130,6 150,10 Q170,15 190,8 Q210,2 230,6 Q250,12 270,8 Q290,3 310,7 Q330,13 350,9 Q370,4 390,8 Q410,14 430,10 Q450,5 470,9 Q490,15 510,11 Q530,6 550,10 Q570,16 590,12 Q610,7 630,11 Q650,17 670,13 Q690,8 710,12 Q730,18 750,14 Q770,9 790,13 Q810,19 830,15 Q850,10 870,14 Q890,20 910,16 Q930,11 950,15 Q970,21 990,17 Q1010,12 1030,16 Q1050,22 1070,18 Q1090,13 1110,17 Q1130,23 1150,19 Q1170,14 1190,18 L1200,16 L1200,40 Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 L0,18 Q15,20 30,16 Q50,10 70,14 Q90,18 110,12 Q130,6 150,10 Q170,15 190,8 Q210,2 230,6 Q250,12 270,8 Q290,3 310,7 Q330,13 350,9 Q370,4 390,8 Q410,14 430,10 Q450,5 470,9 Q490,15 510,11 Q530,6 550,10 Q570,16 590,12 Q610,7 630,11 Q650,17 670,13 Q690,8 710,12 Q730,18 750,14 Q770,9 790,13 Q810,19 830,15 Q850,10 870,14 Q890,20 910,16 Q930,11 950,15 Q970,21 990,17 Q1010,12 1030,16 Q1050,22 1070,18 Q1090,13 1110,17 Q1130,23 1150,19 Q1170,14 1190,18 L1200,16 L1200,40 Z' fill='white'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%}
.about-stat-label{font-size:16px;font-weight:700;color:#6B1525;margin-top:10px;text-transform:uppercase;letter-spacing:0.04em}
.about-location{margin-top:28px;padding:20px;background:rgba(255,255,255,0.15);border-radius:var(--rounded-sm);display:flex;align-items:flex-start;gap:12px}
.about-location-icon{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:#6B1525}
.about-location p{font-size:14px;line-height:1.5;color:#6B1525}
.about-location p strong{font-weight:700;color:#6B1525}
@media(max-width:768px){
.about-inner{padding:80px 20px 40px}
.about-title{font-size:26px}
.about-stats{grid-template-columns:1fr;gap:16px}
.about-stat-num{font-size:28px}
}
.about-overlay.open .about-badge{animation:fadeUp 1s ease forwards;animation-delay:.2s;opacity:0}
.about-overlay.open .about-title{animation:fadeUp 1.2s ease forwards;animation-delay:.4s;opacity:0}
.about-overlay.open .about-text{animation:fadeUp 1s ease forwards;opacity:0}
.about-overlay.open .about-text:nth-of-type(1){animation-delay:.7s}
.about-overlay.open .about-text:nth-of-type(2){animation-delay:1s}
.about-overlay.open .about-text:nth-of-type(3){animation-delay:1.3s}
.about-overlay.open .about-location{animation:fadeUp 1s ease forwards;animation-delay:1.8s;opacity:0}
.about-overlay.open .about-img{animation:scaleIn 1.2s ease forwards;animation-delay:.5s;opacity:0}
.about-overlay.open form{animation:fadeUp 1s ease forwards;animation-delay:.6s;opacity:0}
.about-overlay.open .about-close{animation:fadeUp .8s ease forwards;animation-delay:.1s;opacity:0}
/* Section entrance animations */
.about-overlay.open h1,.about-overlay.open h2{animation:slideUp 1.2s cubic-bezier(.25,.1,.25,1) forwards;opacity:0}
.about-overlay.open h1{animation-delay:.3s}
.about-overlay.open h2{animation-delay:.5s}
.about-overlay.open p{animation:slideUp 1s cubic-bezier(.25,.1,.25,1) forwards;opacity:0;animation-delay:.6s}
.about-overlay.open [style*="background:#C41E3A"] p{animation:none;opacity:1}
.about-overlay.open div[style*="border-left:4px"],.about-overlay.open div[style*="background:#C41E3A"],.about-overlay.open div[style*="background:#111"]{animation:slideUp 1.2s cubic-bezier(.25,.1,.25,1) forwards;opacity:0;animation-delay:.7s}
.about-overlay.open div[style*="background:rgba(255,255,255,0.12)"]{animation:popIn 1s cubic-bezier(.25,.1,.25,1) forwards;opacity:0}
.about-overlay.open div[style*="background:rgba(255,255,255,0.12)"]:nth-child(1){animation-delay:.8s}
.about-overlay.open div[style*="background:rgba(255,255,255,0.12)"]:nth-child(2){animation-delay:1s}
.about-overlay.open div[style*="background:rgba(255,255,255,0.12)"]:nth-child(3){animation-delay:1.2s}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(0.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
/* Founder overlay text animations */
#founder-overlay.open div[style*="display:flex"]{animation:fadeUp .6s ease forwards;animation-delay:.2s;opacity:0}
/* STAT COUNTER ANIMATION */
.about-stats[data-animate] .about-stat-num{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.about-stats.animated .about-stat-num{opacity:1;transform:translateY(0)}
.about-stats.animated div:nth-child(1) .about-stat-num{transition-delay:0s}
.about-stats.animated div:nth-child(2) .about-stat-num{transition-delay:.1s}
.about-stats.animated div:nth-child(3) .about-stat-num{transition-delay:.2s}
.about-stats.animated div:nth-child(4) .about-stat-num{transition-delay:.3s}
.about-stats.animated div:nth-child(5) .about-stat-num{transition-delay:.4s}
.about-stats.animated div:nth-child(6) .about-stat-num{transition-delay:.5s}
/* LOAD ANIMATION */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}
@keyframes slideLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes ringFade{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeUp .6s ease forwards}
.fade-in-d1{animation:fadeUp .8s ease forwards;animation-delay:.1s;opacity:0}
.fade-in-d2{animation:fadeUp .8s ease forwards;animation-delay:.3s;opacity:0}
.fade-in-d3{animation:fadeUp .8s ease forwards;animation-delay:.5s;opacity:0}
.anim-scale{animation:scaleIn .8s ease forwards;animation-delay:.2s;opacity:0}
.anim-slide-l{animation:slideLeft .7s ease forwards;animation-delay:.15s;opacity:0}
.anim-slide-r{animation:slideRight .7s ease forwards;animation-delay:.15s;opacity:0}
.ring-container{animation:ringFade 1.2s ease forwards;animation-delay:.3s;opacity:0}
.nav{animation:fadeUp .5s ease forwards;opacity:0}
.cat-label{animation:fadeUp .6s ease forwards;opacity:0}
.cat-label:nth-child(1){animation-delay:.5s}
.cat-label:nth-child(2){animation-delay:.6s}
.cat-label:nth-child(3){animation-delay:.7s}
.cat-label:nth-child(4){animation-delay:.8s}

/* Story overlays - bypass slideUp animations */
.about-overlay[style*="z-index:290"].open h1,
.about-overlay[style*="z-index:290"].open h2,
.about-overlay[style*="z-index:290"].open p,
.about-overlay[style*="z-index:290"].open div{animation:none!important;opacity:1!important}
#bloodcamp-overlay.open h1,#bloodcamp-overlay.open h2,#bloodcamp-overlay.open p,#bloodcamp-overlay.open div{animation:none!important;opacity:1!important}
#awareness-overlay.open h1,#awareness-overlay.open h2,#awareness-overlay.open p,#awareness-overlay.open div{animation:none!important;opacity:1!important}

/* Bright AMTF-style lighting */
body,.about-overlay{background:#fff!important}
.about-overlay p,.about-overlay li{color:#333}

.about-overlay [style*="background:#F5F4F3"],.about-overlay [style*="background:#f5f0eb"]{background:#fafafa!important}

/* Larger, clearer text site-wide */
html{font-size:17px}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.about-overlay p,.about-overlay li,.about-overlay span,.about-overlay label{font-size:max(17px,1em)!important;line-height:1.75!important;color:#1a1a1a}
.about-overlay p[style*="color:#fff"],.about-overlay span[style*="color:#fff"],.about-overlay [style*="color:#fff"] p{color:#fff!important}
.about-overlay h1{font-size:max(44px,1em)!important}
.about-overlay h2{font-size:max(32px,1em)!important}
.about-overlay h3{font-size:max(22px,1em)!important}
.about-overlay h4{font-size:max(20px,1em)!important}
.about-overlay [style*="font-size:11px"],.about-overlay [style*="font-size:12px"]{font-size:14px!important}
.about-overlay [style*="font-size:13px"]{font-size:15px!important}
.nav-links a{font-size:15px!important;font-weight:700}
input,select,textarea,button{font-size:16px}

/* Slightly bolder text */
.about-overlay p,.about-overlay li,.about-overlay span,.about-overlay label,.about-overlay div{font-weight:500}
.about-overlay strong,.about-overlay b{font-weight:800}

/* Bolder text, all sections */
body,.about-overlay p,.about-overlay li,.about-overlay span,.about-overlay label,.about-overlay div,.about-overlay a{font-weight:600}
.about-overlay strong,.about-overlay b{font-weight:800}

.nav-donate-btn,#nav-donate-now{background:#C41E3A!important;color:#fff!important}
.nav-donate-btn:hover,#nav-donate-now:hover{background:#a01830!important}

/* Brighter images & site */
.about-overlay img:not([src*="logo"]),.about-overlay video{filter:brightness(1.2) contrast(1.05) saturate(1.08)!important}
[style*="rgba(0,0,0,0.7)"]{background:rgba(0,0,0,0.45)!important}
[style*="rgba(0,0,0,0.6)"],[style*="rgba(0,0,0,0.55)"],[style*="rgba(0,0,0,0.5)"]{background:rgba(0,0,0,0.3)!important}

#founder-overlay img,#team-overlay img,#stories-overlay img,#success-overlay img,#journey-overlay img,#founder-overlay video,#team-overlay video,#stories-overlay video,#success-overlay video,#journey-overlay video{filter:none!important}
#shoaib-overlay img,#rustum-overlay img,#mehtab-overlay img{filter:none!important}

#rustum-overlay,#shoaib-overlay,#mehtab-overlay,#bloodcamp-overlay,#awareness-overlay{z-index:295!important}
#rustum-overlay.open *,#shoaib-overlay.open *,#mehtab-overlay.open *,#bloodcamp-overlay.open *,#awareness-overlay.open *{opacity:1;animation:none}

/* Perf: don't render closed overlays */
.about-overlay:not(.open){visibility:hidden;content-visibility:hidden}
.about-overlay.open{visibility:visible;content-visibility:visible}

/* Unified section banners */
.page-banner{position:relative!important;width:100%!important;min-height:320px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:110px 24px 80px!important;box-sizing:border-box!important;flex-shrink:0!important;overflow:visible!important}
.page-banner.torn-edge{background:linear-gradient(135deg,#C41E3A 0%,#8B1A2B 50%,#2E7D32 100%)!important}
.page-banner > img{display:none!important}
#media-overlay .page-banner{min-height:320px!important;overflow:hidden!important}
#media-overlay .page-banner img{display:block!important}
.page-banner h1{font-size:56px!important;font-weight:900!important;color:#fff!important;text-align:center!important;margin:0 auto 12px!important;max-width:1000px;line-height:1.1!important;text-shadow:0 2px 12px rgba(0,0,0,0.3)!important;position:relative;z-index:2}
.page-banner p,.page-banner span,.page-banner div:not(.torn-edge){text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.page-banner > p{color:#fff!important;position:relative;z-index:2}
.page-banner h1 + p{font-size:17px!important;font-weight:600!important;color:#fff!important}
@media(max-width:700px){.page-banner{min-height:240px!important;padding:96px 20px 70px!important}.page-banner h1{font-size:36px!important}}

/* One uniform text weight everywhere */
body *{font-weight:700!important}

#media-overlay img,#awareness-overlay img,#bloodcamp-overlay img{cursor:zoom-in}
#img-lightbox-img{filter:none!important}

#wtd-overlay{z-index:295!important}
#wtd-overlay.open *{opacity:1;animation:none}

/* Show whole photos — nobody cropped out — in Media and news pages */
#media-overlay img:not([src*="logo"]),#awareness-overlay img,#bloodcamp-overlay img,#wtd-overlay img{object-fit:contain!important;object-position:center!important;background:#111;height:auto!important;max-height:none!important;aspect-ratio:auto!important;image-rendering:auto;filter:none!important}
#media-overlay .page-banner img{object-fit:cover!important;height:100%!important;background:none}
#awareness-overlay img,#bloodcamp-overlay img,#wtd-overlay img{background:transparent}
#img-lightbox-img{max-width:100vw!important;max-height:100vh!important}

/* Story & news pages open with animation */
#wtd-overlay,#bloodcamp-overlay,#awareness-overlay,#rustum-overlay,#shoaib-overlay,#mehtab-overlay{transform:translateY(40px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)!important}
#wtd-overlay.open,#bloodcamp-overlay.open,#awareness-overlay.open,#rustum-overlay.open,#shoaib-overlay.open,#mehtab-overlay.open{transform:translateY(0)}
#wtd-overlay.open .page-banner h1,#bloodcamp-overlay.open .page-banner h1,#awareness-overlay.open .page-banner h1,#rustum-overlay.open .page-banner h1,#shoaib-overlay.open .page-banner h1,#mehtab-overlay.open .page-banner h1{animation:storyIn .8s cubic-bezier(.22,1,.36,1) .15s both!important}
#wtd-overlay.open .page-banner p,#bloodcamp-overlay.open .page-banner p,#awareness-overlay.open .page-banner p,#rustum-overlay.open .page-banner p,#shoaib-overlay.open .page-banner p,#mehtab-overlay.open .page-banner p{animation:storyIn .8s cubic-bezier(.22,1,.36,1) .3s both!important}
.story-rv{opacity:0!important;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.story-rv.in{opacity:1!important;transform:translateY(0)}
@keyframes storyIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#wtd-overlay,#bloodcamp-overlay,#awareness-overlay,#rustum-overlay,#shoaib-overlay,#mehtab-overlay{transform:none;transition:opacity .2s!important}.story-rv{opacity:1!important;transform:none}.page-banner h1,.page-banner p{animation:none!important}}

#wtd-overlay .wtd-row img{aspect-ratio:1/1!important;height:auto!important;object-fit:cover!important;object-position:center 30%!important;background:none!important}

/* Services page open animation */
#services-overlay{transform:translateY(40px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)!important}
#services-overlay.open{transform:translateY(0)}
#services-overlay.open .page-banner h1{animation:storyIn .8s cubic-bezier(.22,1,.36,1) .15s both}
#services-overlay.open .page-banner p{animation:storyIn .8s cubic-bezier(.22,1,.36,1) .3s both}
#services-overlay .svc-card{opacity:0;transform:translateY(36px)}
#services-overlay.open .svc-card{animation:storyIn .7s cubic-bezier(.22,1,.36,1) both}
#services-overlay.open .svc-card:nth-child(1){animation-delay:.35s}
#services-overlay.open .svc-card:nth-child(2){animation-delay:.47s}
#services-overlay.open .svc-card:nth-child(3){animation-delay:.59s}
#services-overlay.open .svc-card:nth-child(4){animation-delay:.71s}
#services-overlay.open .svc-card:nth-child(5){animation-delay:.83s}
#services-overlay.open .svc-card:nth-child(6){animation-delay:.95s}
@keyframes storyIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#services-overlay{transform:none}#services-overlay .svc-card{opacity:1;transform:none;animation:none!important}}

/* Services animated bubble background */
#services-overlay{position:fixed}
#services-overlay .svc-bg{position:absolute;left:0;right:0;top:320px;bottom:0;overflow:hidden;pointer-events:none;z-index:0;background:#FBF6F6}
#services-overlay .svc-bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:multiply}
#services-overlay .svc-bg .b1{width:520px;height:520px;background:#F2B8C1;left:-120px;top:-80px;animation:svcB1 22s ease-in-out infinite}
#services-overlay .svc-bg .b2{width:460px;height:460px;background:#BFE3C1;right:-100px;top:120px;animation:svcB2 26s ease-in-out infinite}
#services-overlay .svc-bg .b3{width:380px;height:380px;background:#F7D0D6;left:35%;top:40%;animation:svcB3 30s ease-in-out infinite}
#services-overlay .svc-bg .b4{width:420px;height:420px;background:#D6EDD7;left:10%;bottom:-120px;animation:svcB2 28s ease-in-out infinite reverse}
#services-overlay .svc-bg .b5{width:340px;height:340px;background:#EFA3AF;right:15%;bottom:-60px;animation:svcB1 24s ease-in-out infinite reverse}
@keyframes svcB1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(160px,120px) scale(1.15)}66%{transform:translate(-80px,200px) scale(.9)}}
@keyframes svcB2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-180px,100px) scale(1.1)}66%{transform:translate(-60px,-120px) scale(.95)}}
@keyframes svcB3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-20%,-80%) scale(1.25)}}
@media(prefers-reduced-motion:reduce){#services-overlay .svc-bg span{animation:none}}

/* Scroll reveal for Services cards (replaces open-stagger) */
#services-overlay.open .svc-card{animation:none!important}
#services-overlay .svc-card{opacity:0;transform:translateY(60px) scale(.94);filter:blur(8px);clip-path:inset(18% 0 0 0);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .9s ease,clip-path 1s cubic-bezier(.22,1,.36,1)}
#services-overlay .svc-card.in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
#services-overlay .svc-card img{transform:scale(1.15);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
#services-overlay .svc-card.in img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){#services-overlay .svc-card{opacity:1;transform:none;filter:none;clip-path:none;transition:none}#services-overlay .svc-card img{transform:none}}

/* Perf fix: lighter services background + reveal */
#services-overlay .svc-bg span{filter:none!important;mix-blend-mode:normal!important;opacity:.7!important;will-change:transform}
#services-overlay .svc-bg .b1{background:radial-gradient(circle,#F2B8C1 0,rgba(242,184,193,0) 70%)!important}
#services-overlay .svc-bg .b2{background:radial-gradient(circle,#BFE3C1 0,rgba(191,227,193,0) 70%)!important}
#services-overlay .svc-bg .b3{background:radial-gradient(circle,#F7D0D6 0,rgba(247,208,214,0) 70%)!important}
#services-overlay .svc-bg .b4{background:radial-gradient(circle,#D6EDD7 0,rgba(214,237,215,0) 70%)!important}
#services-overlay .svc-bg .b5{background:radial-gradient(circle,#EFA3AF 0,rgba(239,163,175,0) 70%)!important}
#services-overlay:not(.open) .svc-bg span{animation-play-state:paused!important}
#services-overlay .svc-card{filter:none!important;transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1),clip-path .9s cubic-bezier(.22,1,.36,1)!important}
#services-overlay .svc-card h3,#services-overlay .svc-card p{opacity:1!important;animation:none!important}

/* Services banner effect: flowing colours + light sweep */
#services-overlay .page-banner.torn-edge{overflow:hidden!important}
#services-overlay .page-banner.torn-edge::before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0) 100%);transform:skewX(-18deg);animation:svcSweep 5.5s ease-in-out infinite;pointer-events:none;z-index:0}
#services-overlay .page-banner.torn-edge > *{position:relative;z-index:1}
#services-overlay:not(.open) .page-banner.torn-edge,#services-overlay:not(.open) .page-banner.torn-edge::before{animation-play-state:paused}
@keyframes svcBannerFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes svcSweep{0%{left:-40%}60%,100%{left:120%}}
@media(prefers-reduced-motion:reduce){#services-overlay .page-banner.torn-edge,#services-overlay .page-banner.torn-edge::before{animation:none}}

/* Light sweep on every section banner (colours unchanged) */
.page-banner{overflow:hidden!important}
.page-banner::before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0) 100%);transform:skewX(-18deg);animation:svcSweep 5.5s ease-in-out infinite;pointer-events:none;z-index:1}
.page-banner > *:not(img):not(.media-slide){position:relative;z-index:2}
#media-overlay .page-banner > img{position:absolute!important}
.about-overlay:not(.open) .page-banner::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.page-banner::before{animation:none;display:none}}

/* About: video background below the banner */
#about-overlay .about-vbg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none;overflow:hidden}
#about-overlay .about-vbg video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:none!important}
#about-overlay .about-vbg::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.35)}
#about-overlay > .page-banner{z-index:3}
#about-overlay > div:not(.page-banner):not(.about-vbg){position:relative;z-index:1}
#about-overlay > .sr[style*="background:#F5F4F3"],#about-overlay > .sr[style*="background:#fff"],#about-overlay > .sr[style*="background:#FEF2F2"]{background:rgba(255,255,255,0.72)!important}

#about-overlay .about-vbg::after{background:rgba(255,255,255,0)!important}
#about-overlay > .sr[style*="background:#F5F4F3"],#about-overlay > .sr[style*="background:#fff"],#about-overlay > .sr[style*="background:#FEF2F2"]{background:rgba(255,255,255,0.5)!important}
#about-overlay > .sr *{background-color:transparent}
#about-overlay > .sr [style*="background:#fff"],#about-overlay > .sr [style*="background:#FEF2F2"],#about-overlay > .sr [style*="background:#F5F4F3"]{background:rgba(255,255,255,0.85)!important}

#about-overlay .about-vbg{flex:0 0 100vh!important;height:100vh!important;min-height:100vh!important}
#about-overlay > *{flex-shrink:0}

#about-overlay .about-vbg{background:#1a1a1a}
#about-overlay .about-vbg video{object-fit:contain!important;object-position:center center!important}

#about-overlay .about-vbg{background:none}
#about-overlay .about-vbg video{object-fit:cover!important;object-position:50% 30%!important}

#about-overlay > .page-banner.torn-edge::after{display:none!important}
#about-overlay > .page-banner.torn-edge{padding-bottom:80px!important}

#about-overlay > .page-banner.torn-edge{clip-path:polygon(0 0,100% 0,100.00% calc(100% - 14px),97.92% calc(100% - 34px),95.83% calc(100% - 4px),93.75% calc(100% - 26px),91.67% calc(100% - 12px),89.58% calc(100% - 30px),87.50% calc(100% - 8px),85.42% calc(100% - 22px),83.33% calc(100% - 0px),81.25% calc(100% - 24px),79.17% calc(100% - 14px),77.08% calc(100% - 34px),75.00% calc(100% - 4px),72.92% calc(100% - 26px),70.83% calc(100% - 12px),68.75% calc(100% - 30px),66.67% calc(100% - 8px),64.58% calc(100% - 22px),62.50% calc(100% - 0px),60.42% calc(100% - 24px),58.33% calc(100% - 14px),56.25% calc(100% - 34px),54.17% calc(100% - 4px),52.08% calc(100% - 26px),50.00% calc(100% - 12px),47.92% calc(100% - 30px),45.83% calc(100% - 8px),43.75% calc(100% - 22px),41.67% calc(100% - 0px),39.58% calc(100% - 24px),37.50% calc(100% - 14px),35.42% calc(100% - 34px),33.33% calc(100% - 4px),31.25% calc(100% - 26px),29.17% calc(100% - 12px),27.08% calc(100% - 30px),25.00% calc(100% - 8px),22.92% calc(100% - 22px),20.83% calc(100% - 0px),18.75% calc(100% - 24px),16.67% calc(100% - 14px),14.58% calc(100% - 34px),12.50% calc(100% - 4px),10.42% calc(100% - 26px),8.33% calc(100% - 12px),6.25% calc(100% - 30px),4.17% calc(100% - 8px),2.08% calc(100% - 22px),0.00% calc(100% - 0px));margin-bottom:-36px!important;padding-bottom:110px!important}

/* Same torn cut edge on every banner */
.page-banner{clip-path:polygon(0 0,100% 0,100.00% calc(100% - 14px),97.92% calc(100% - 34px),95.83% calc(100% - 4px),93.75% calc(100% - 26px),91.67% calc(100% - 12px),89.58% calc(100% - 30px),87.50% calc(100% - 8px),85.42% calc(100% - 22px),83.33% calc(100% - 0px),81.25% calc(100% - 24px),79.17% calc(100% - 14px),77.08% calc(100% - 34px),75.00% calc(100% - 4px),72.92% calc(100% - 26px),70.83% calc(100% - 12px),68.75% calc(100% - 30px),66.67% calc(100% - 8px),64.58% calc(100% - 22px),62.50% calc(100% - 0px),60.42% calc(100% - 24px),58.33% calc(100% - 14px),56.25% calc(100% - 34px),54.17% calc(100% - 4px),52.08% calc(100% - 26px),50.00% calc(100% - 12px),47.92% calc(100% - 30px),45.83% calc(100% - 8px),43.75% calc(100% - 22px),41.67% calc(100% - 0px),39.58% calc(100% - 24px),37.50% calc(100% - 14px),35.42% calc(100% - 34px),33.33% calc(100% - 4px),31.25% calc(100% - 26px),29.17% calc(100% - 12px),27.08% calc(100% - 30px),25.00% calc(100% - 8px),22.92% calc(100% - 22px),20.83% calc(100% - 0px),18.75% calc(100% - 24px),16.67% calc(100% - 14px),14.58% calc(100% - 34px),12.50% calc(100% - 4px),10.42% calc(100% - 26px),8.33% calc(100% - 12px),6.25% calc(100% - 30px),4.17% calc(100% - 8px),2.08% calc(100% - 22px),0.00% calc(100% - 0px))}
.page-banner.torn-edge::after{display:none!important}
.page-banner.torn-edge{padding-bottom:110px!important}

#media-overlay .page-banner{clip-path:none!important}

/* About: readable text over the video */
#about-overlay > .sr[style*="background:#F5F4F3"],#about-overlay > .sr[style*="background:#fff"],#about-overlay > .sr[style*="background:#FEF2F2"]{background:rgba(255,255,255,0.86)!important}
#about-overlay > .sr p,#about-overlay > .sr li,#about-overlay > .sr span{color:#111!important}
#about-overlay > .sr h1,#about-overlay > .sr h2,#about-overlay > .sr h3{text-shadow:0 1px 0 rgba(255,255,255,0.6)}

#about-overlay > .sr[style*="background:#F5F4F3"],#about-overlay > .sr[style*="background:#fff"],#about-overlay > .sr[style*="background:#FEF2F2"]{background:rgba(255,255,255,0.74)!important}

/* Our Journey: blood-cell image background below the banner */
#journey-overlay > *{flex-shrink:0}
#journey-overlay .journey-bg{position:sticky;top:0;flex:0 0 100vh;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none;background:url("uploads/WhatsApp Image 2026-09-20 at 9.30.39 AM.jpeg") center/cover no-repeat}
#journey-overlay > .page-banner{z-index:3}
#journey-overlay > div:not(.page-banner):not(.journey-bg){position:relative;z-index:1}
#journey-overlay > div[style*="max-width:900px"]{background:rgba(255,255,255,0.74);max-width:none!important;padding-left:max(32px,calc((100% - 836px)/2))!important;padding-right:max(32px,calc((100% - 836px)/2))!important}
#journey-overlay > div[style*="background:#FEF2F2"],#journey-overlay > div[style*="background:#f9f9f9"]{background:rgba(255,255,255,0.74)!important}
#journey-overlay > div p,#journey-overlay > div li{color:#111}

/* Our Journey background animation: slow drift + zoom */
#journey-overlay .journey-bg{overflow:hidden;background:none!important}
#journey-overlay .journey-bg::before{content:'';position:absolute;inset:-8%;background:url("uploads/WhatsApp Image 2026-09-20 at 9.30.39 AM.jpeg") center/cover no-repeat;animation:journeyDrift 24s ease-in-out infinite alternate;will-change:transform}
#journey-overlay:not(.open) .journey-bg::before{animation-play-state:paused}
@keyframes journeyDrift{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.1) translate(-2%,-3%)}100%{transform:scale(1.05) translate(2%,2%)}}
@media(prefers-reduced-motion:reduce){#journey-overlay .journey-bg::before{animation:none}}

/* No gap under torn banner edge: page slides beneath the cut */
.page-banner{margin-bottom:-36px!important;z-index:3!important}
#media-overlay .page-banner{margin-bottom:0!important}
.page-banner ~ *{position:relative}

#services-overlay .svc-card img{transition:transform .8s cubic-bezier(.22,1,.36,1)!important}
#services-overlay .svc-card{transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1),clip-path .6s cubic-bezier(.22,1,.36,1)!important}

#services-overlay .svc-bg{top:0!important}
#services-overlay{background:#FBF6F6!important}

#about-overlay > .sr[style*="background:#F5F4F3"],#about-overlay > .sr[style*="background:#fff"],#about-overlay > .sr[style*="background:#FEF2F2"]{background:rgba(255,255,255,0.62)!important}

#about-overlay > .sr[style*="background:#F5F4F3"],#about-overlay > .sr[style*="background:#fff"],#about-overlay > .sr[style*="background:#FEF2F2"]{background:rgba(255,255,255,0.48)!important}
#about-overlay > .sr p,#about-overlay > .sr li{text-shadow:0 0 6px rgba(255,255,255,0.9)}

#services-overlay img{filter:none!important}

#filter-btn,#grid-btn{display:none!important}

@media(max-width:640px){#bloodcamp-overlay .camp-gallery{grid-template-columns:1fr!important}}

/* Story/news pages: close gap under torn banner */
.about-overlay > .page-banner.torn-edge{padding-bottom:70px!important}
.about-overlay > .page-banner.torn-edge + div{padding-top:24px!important}
#about-overlay > .page-banner.torn-edge{padding-bottom:80px!important}

/* Show every Services photo whole, no cropping */
#services-overlay .svc-card img{object-fit:contain!important;object-position:center!important;background:#F5F4F3;aspect-ratio:4/3}

#services-overlay .svc-card img[src*="svc-support"]{aspect-ratio:3/4!important;object-fit:cover!important;background:none}

#services-overlay .svc-card img.svc-support-img{aspect-ratio:3/4!important;height:auto!important;max-height:none!important;object-fit:cover!important;object-position:center!important}


#services-overlay .svc-grid .svc-card:nth-child(n+4) img{height:420px!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center 30%!important;background:none!important}
#services-overlay .svc-grid{align-items:stretch}

#services-overlay .svc-pair img{height:420px!important;aspect-ratio:auto!important;object-fit:cover!important;background:none!important}
#services-overlay .svc-pair img[src*="svc-medicines2"]{object-position:center 20%!important}

/* All banners: same colours as home stats bar */
.page-banner,.page-banner.torn-edge,#services-overlay .page-banner.torn-edge{background:linear-gradient(90deg,#C41E3A 0%,#8B1A2B 50%,#2E7D32 100%)!important;background-size:100% 100%!important;animation:none}



/* Donate Blood: space below the banner, before the page content */
#donate-overlay > .page-banner{margin-bottom:0!important}
#donate-overlay > .page-banner + *{margin-top:56px!important}
@media(max-width:700px){#donate-overlay > .page-banner + *{margin-top:36px!important}}

/* Bank Details: same space below banner as Donate Blood */
#bank-overlay > .page-banner{margin-bottom:0!important}
#bank-overlay > .page-banner + *{margin-top:20px!important}
@media(max-width:700px){#bank-overlay > .page-banner + *{margin-top:14px!important}}



/* Donate Blood: KTCC name + form animate in right away on open */
#donate-overlay .sr{opacity:1!important;transform:none!important;transition:none!important}
#donate-overlay .sr > *{opacity:0}
#donate-overlay.open .sr > *{animation:dbIn .7s cubic-bezier(.22,1,.36,1) both!important}
#donate-overlay.open .sr > *:nth-child(1){animation-delay:.25s!important}
#donate-overlay.open .sr > *:nth-child(2){animation-delay:.35s!important}
#donate-overlay.open .sr > *:nth-child(3){animation-delay:.45s!important}
#donate-overlay.open .sr > *:nth-child(n+4){animation-delay:.55s!important}
@keyframes dbIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#donate-overlay .sr > *{opacity:1;animation:none!important}}

/* Donor form: fields animate in one by one when scrolled into view */
#donor-form > *{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
#donor-form.form-in > *{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#donor-form > *{opacity:1;transform:none;transition:none}}

/* Volunteer page open animation */
#volunteer-overlay.open .page-banner h1{animation:dbIn .8s cubic-bezier(.22,1,.36,1) .15s both}
#volunteer-overlay.open .page-banner p{animation:dbIn .8s cubic-bezier(.22,1,.36,1) .3s both}
#volunteer-overlay #volunteer-form-sec > div > *{opacity:0}
#volunteer-overlay.open #volunteer-form-sec > div > *{animation:dbIn .7s cubic-bezier(.22,1,.36,1) .45s both}
#volunteer-overlay > .page-banner + *{margin-top:28px!important}
@media(prefers-reduced-motion:reduce){#volunteer-overlay #volunteer-form-sec > div > *{opacity:1;animation:none!important}}

#volunteer-overlay #volunteer-form-sec{padding-top:28px!important}
@media(max-width:700px){#volunteer-overlay > .page-banner + *{margin-top:18px!important}}

/* Volunteer page: real gap under banner (overrides -36px overlap) */
#volunteer-overlay > .page-banner{margin-bottom:0!important}
#volunteer-overlay > #volunteer-form-sec{margin-top:28px!important;padding-top:28px!important}
@media(max-width:700px){#volunteer-overlay > #volunteer-form-sec{margin-top:18px!important}}

/* Space between banner bottom edge and text: news/blog story pages */
#bloodcamp-overlay > .page-banner,#wtd-overlay > .page-banner,#awareness-overlay > .page-banner{margin-bottom:0!important}
#bloodcamp-overlay > .page-banner + *,#wtd-overlay > .page-banner + *,#awareness-overlay > .page-banner + *{margin-top:48px!important}
@media(max-width:700px){#bloodcamp-overlay > .page-banner + *,#wtd-overlay > .page-banner + *,#awareness-overlay > .page-banner + *{margin-top:32px!important}}
/* Buleda card in Media blog: space between photo and text */
#media-blog .buleda-card h3{margin-top:20px!important}

/* Remove corner square + rounded corners: news & stories */
#home-news-stories .hns-card::before{display:none!important}
#bloodcamp-overlay img,#wtd-overlay img,#awareness-overlay img,#rustum-overlay img,#shoaib-overlay img,#mehtab-overlay img,#media-blog img,#media-stories img{border-radius:0!important}
#bloodcamp-overlay [style*="width:12px;height:12px"],#wtd-overlay [style*="width:12px;height:12px"],#awareness-overlay [style*="width:12px;height:12px"],#rustum-overlay [style*="width:12px;height:12px"],#shoaib-overlay [style*="width:12px;height:12px"],#mehtab-overlay [style*="width:12px;height:12px"],#media-blog [style*="width:12px;height:12px"],#media-stories [style*="width:12px;height:12px"]{display:none!important}

/* Success Stories: space between banner edge and "Stories of Hope" */
#stories-overlay > .page-banner{margin-bottom:0!important}
#stories-overlay > .page-banner + *{margin-top:40px!important}
@media(max-width:700px){#stories-overlay > .page-banner + *{margin-top:24px!important}}

/* Use the full page width inside every section */
.about-overlay div[style*="max-width:600px"],.about-overlay div[style*="max-width:640px"],.about-overlay div[style*="max-width:700px"],.about-overlay div[style*="max-width:720px"],.about-overlay div[style*="max-width:760px"],.about-overlay div[style*="max-width:800px"],.about-overlay div[style*="max-width:820px"],.about-overlay div[style*="max-width:860px"],.about-overlay div[style*="max-width:900px"],.about-overlay div[style*="max-width:960px"],.about-overlay div[style*="max-width:1000px"],.about-overlay div[style*="max-width:1100px"],.about-overlay div[style*="max-width:1180px"],.about-overlay div[style*="max-width:1200px"],.about-overlay .about-inner,.about-overlay #thal-content{max-width:1280px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;padding-left:clamp(20px,4vw,56px)!important;padding-right:clamp(20px,4vw,56px)!important;box-sizing:border-box}
.about-overlay .about-inner p,.about-overlay #thal-content p,.about-overlay p[style*="max-width"]{max-width:none!important}

/* Fluid sizing: small screens = smaller, big screens = bigger */
html{font-size:clamp(14px,0.55vw + 11px,19px)}
.about-overlay p,.about-overlay li,.about-overlay span,.about-overlay label{font-size:clamp(14px,0.45vw + 12px,19px)!important}
.about-overlay h1,.page-banner h1{font-size:clamp(28px,3.4vw + 10px,64px)!important}
.about-overlay h2{font-size:clamp(22px,2.2vw + 10px,44px)!important}
.about-overlay h3{font-size:clamp(17px,1vw + 12px,26px)!important}
.about-overlay h4{font-size:clamp(16px,0.7vw + 12px,22px)!important}
.about-overlay [style*="font-size:11px"],.about-overlay [style*="font-size:12px"]{font-size:clamp(11px,0.3vw + 10px,15px)!important}
.about-overlay [style*="font-size:13px"]{font-size:clamp(12px,0.35vw + 11px,16px)!important}
.page-banner{min-height:clamp(200px,24vw,380px)!important}
.about-counter{font-size:clamp(40px,4.5vw + 12px,88px)!important}
.nav-links a{font-size:clamp(12px,0.5vw + 8px,16px)!important}
.about-overlay img[style*="width:140px;height:140px"]{width:clamp(96px,10vw,160px)!important;height:clamp(96px,10vw,160px)!important}
.about-overlay button,.about-overlay .hns-all,.about-overlay a[style*="padding:14px 36px"]{font-size:clamp(13px,0.4vw + 11px,17px)!important}

/* ===== MOBILE LAYOUT ===== */
@media(max-width:768px){
.nav{height:64px!important;padding:0 16px!important}
.nav-logo img{height:40px!important}
.nav-donate-btn{padding:8px 12px!important;font-size:12px!important}
.nav-hamburger{width:44px;height:44px;padding:10px;box-sizing:border-box}
.nav-links a{display:block;padding:14px 4px!important;border-bottom:1px solid #EEE;font-size:16px!important}
.nav-links a::after{display:none!important}
.nav-dropdown{position:static!important;display:none;box-shadow:none!important;background:#FBF6F6!important;border-radius:0!important;padding:0 0 0 16px!important;min-width:0!important}
.nav-dropdown a{color:#111!important}
.nav-dropdown-wrap:hover .nav-dropdown{display:none}
.nav-dropdown-wrap.active .nav-dropdown{display:block!important}
.about-close{top:72px!important;right:12px!important;min-height:44px;padding:8px 12px!important;background:rgba(0,0,0,.35);border-radius:2px}
.about-overlay{padding-top:0}
.about-overlay div[style*="grid-template-columns:repeat(5"],.about-overlay div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.about-overlay div[style*="grid-template-columns:repeat(3"],.about-overlay div[style*="grid-template-columns:1fr 1fr"],.about-overlay div[style*="grid-template-columns:repeat(2"],.about-overlay div[style*="grid-template-columns:minmax(0,1fr) minmax"]{grid-template-columns:1fr!important;gap:20px!important}
.about-overlay .about-stats{grid-template-columns:1fr!important;gap:28px!important}
.about-overlay div[style*="display:flex;flex-direction:row-reverse"],.about-overlay div[style*="display:flex;gap:4"],.about-overlay div[style*="display:flex;align-items:center;gap:4"],.about-overlay div[style*="display:flex;gap:48px"],.about-overlay div[style*="display:flex;gap:40px"],.about-overlay div[style*="display:flex;gap:32px"]{flex-direction:column!important;gap:24px!important}
.about-overlay div[style*="display:flex;flex-direction:row-reverse"] > *,.about-overlay div[style*="display:flex;gap:4"] > *{width:100%!important;max-width:100%!important;flex:1 1 auto!important}
/* timeline: single column */
#journey-overlay .sr-left,#journey-overlay .sr-right{flex-direction:column!important;align-items:stretch!important;padding-left:28px;border-left:3px solid #C41E3A;margin-left:8px}
#journey-overlay .sr-left > div,#journey-overlay .sr-right > div{text-align:left!important;padding:0!important;flex:none!important;width:100%!important}
#journey-overlay .sr-left > div[style*="border-radius:50%"],#journey-overlay .sr-right > div[style*="border-radius:50%"]{display:none!important}
#journey-overlay .sr-left > div:empty,#journey-overlay .sr-right > div:empty{display:none!important}
#journey-overlay .sr-left > div + div,#journey-overlay .sr-right > div + div{margin-top:16px}
#journey-overlay [style*="position:absolute;left:50%"]{display:none!important}
/* home hero stats bar */
.home-stat-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important;position:relative!important}
.home-stat-bar > div{padding:16px 8px!important;border-bottom:1px solid rgba(255,255,255,.25)}
/* tables, forms, media */
.about-overlay table{display:block;overflow-x:auto;width:100%}
.about-overlay input,.about-overlay select,.about-overlay textarea{font-size:16px!important;min-height:48px}
.about-overlay img,.about-overlay video,.about-overlay iframe{max-width:100%!important}
.about-overlay iframe{width:100%!important}
.about-overlay [style*="padding:80px"],.about-overlay [style*="padding:72px"],.about-overlay [style*="padding:64px"]{padding-top:40px!important;padding-bottom:40px!important}
.about-overlay [style*="padding:48px 40px"]{padding:32px 20px!important}
.page-banner{padding-left:20px!important;padding-right:20px!important}
.page-banner h1{line-height:1.15!important;word-break:break-word}
/* footer bars stack */
.about-overlay div[style*="justify-content:space-between;align-items:center"][style*="padding:14px 32px"]{flex-direction:column!important;gap:6px!important;text-align:center}
/* collaborations map + partners */
#collab-sec .cw{grid-template-columns:1fr!important}
#home-news-stories .hns-tabs button{padding:10px 20px!important}
/* ring gallery */
.center-headline{font-size:24px!important}
}
@media(max-width:420px){
.about-overlay div[style*="grid-template-columns:repeat(5"],.about-overlay div[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr!important}
.home-stat-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Smooth ring motion */
.ring-card{will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:none!important}
.ring-card img{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}

/* Home welcome title: large */
#home-overlay h1.home-welcome{font-size:clamp(44px,7vw,112px)!important}
#home-overlay h1.home-welcome + p{font-size:clamp(17px,1.4vw + 10px,26px)!important;max-width:760px!important}

#home-overlay h1.home-welcome .home-ktcc{font-size:1em!important;line-height:1;vertical-align:middle;padding:0!important;background:none!important}

/* About: keep text clear of torn banner edge */
#about-overlay .page-banner{z-index:3}


/* About: match Our Journey banner join */
#about-overlay .page-banner + .about-vbg + .sr{padding-top:64px!important;margin-top:0!important}
#about-overlay .page-banner ~ .sr,#about-overlay .page-banner ~ div:not(.about-vbg):not(.page-banner){background-color:rgba(255,255,255,0.74)!important}


/* About video: show full frame, no heavy zoom */
#about-overlay .about-vbg{background:linear-gradient(135deg,#F6D9DD 0%,#FBF3F4 50%,#E3F1E4 100%)!important}
#about-overlay .about-vbg video{object-fit:contain!important;object-position:50% 50%!important}



/* Our Journey & Founder close: same as other sections */
#journey-overlay .about-close,#founder-overlay .about-close{position:fixed!important;top:80px!important;right:32px!important;z-index:10!important;background:transparent!important;color:#fff!important;border:0!important;padding:0!important;font-size:15.36px!important;font-weight:700!important;box-shadow:none!important;letter-spacing:normal!important;border-radius:0!important}

/* Home close: same as other sections */
#home-overlay .about-close{position:fixed!important;top:80px!important;right:32px!important;z-index:10!important;background:transparent!important;color:#fff!important;border:0!important;padding:0!important;font-size:15.36px!important;font-weight:700!important;box-shadow:none!important;letter-spacing:normal!important;border-radius:0!important;display:block!important;opacity:1!important;visibility:visible!important;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Ring cards follow each photo's shape */
.ring-card{height:90px!important}
@media(max-width:600px){.ring-card{height:60px!important}}

.about-overlay{transform:none!important;will-change:opacity;transition:opacity .25s ease!important}

#home-overlay{position:fixed}
#home-overlay>#home-close.about-close{position:absolute!important;top:84px!important;right:32px!important;z-index:20!important;margin:0!important;animation:none!important}

.nav-links a,.nav-links .nav-dropdown-trigger,.nav-dropdown a{font-weight:800!important}

.nav-links a,.nav-links .nav-dropdown-trigger,.nav-dropdown a{font-weight:900!important;font-size:16px!important;-webkit-text-stroke:0.3px currentColor}

/* Close buttons: top of each section only (scroll away with banner) */
.about-overlay{position:fixed}
.about-overlay .about-close,.about-overlay>button.about-close{position:absolute!important;top:84px!important;right:32px!important;z-index:20!important;margin:0!important;animation:none!important;opacity:1!important}
@media(max-width:700px){.about-overlay .about-close{top:76px!important;right:12px!important}}

.nav-links a,.nav-links .nav-dropdown-trigger,.nav-dropdown a{font-weight:700!important}

/* Perf: pause animations that are not visible */
.about-overlay:not(.open),.about-overlay:not(.open) *{animation-play-state:paused!important}

/* Ring cards: fill the card, crop any white edges in photos */
.ring-card{background:transparent!important}
.ring-card img{object-fit:cover!important;object-position:center!important;background:transparent!important;transform:translateZ(0)!important}
.center-preview-img img,.center-preview-img{object-fit:contain!important;background:#fff}

/* Team photos on white */
#team-overlay img[style*="border-radius:50%"]{background:#fff!important;border:1px solid #D4D4D4}
#team-overlay [style*="border-radius:50%;background:#E0E0E0"]{background:#fff!important;border:1px solid #D4D4D4}

/* No white side bars around opened photos */
.center-preview-img{background:transparent!important;width:auto!important;height:auto!important;max-width:min(420px,80vw);max-height:60vh;display:flex;align-items:center;justify-content:center}
.center-preview-img img{width:auto!important;height:auto!important;max-width:100%;max-height:60vh;object-fit:contain!important;background:transparent!important}
#media-overlay img:not([src*="logo"]),#awareness-overlay img,#bloodcamp-overlay img,#wtd-overlay img,#services-overlay .svc-card img{background:transparent!important}

/* Bigger opened photo in ring gallery */
.center-preview-img{max-width:min(720px,88vw)!important;max-height:72vh!important}
.center-preview-img img{max-height:72vh!important;max-width:min(720px,88vw)!important;min-height:min(420px,60vh);min-width:0!important;object-fit:contain!important}

#buleda-overlay .page-banner + div{padding-top:80px!important}

#malik-overlay img,img[src^="assets/news/malik"]{filter:none!important}

/* Media News: uniform card images */
#media-blog>div{display:flex;flex-direction:column}
#media-blog>div>img,#media-blog>div>div:first-child:not([style*="padding"]){width:100%!important;aspect-ratio:4/3!important;height:auto!important;flex:none}
#media-blog>div>img{object-fit:cover!important;object-position:center 35%!important;filter:none!important;display:block}
#media-blog>div>div:first-child:not([style*="padding"]){display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important;gap:2px!important;overflow:hidden}
#media-blog>div>div:first-child:not([style*="padding"]) img{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center 35%!important;filter:none!important}
#media-blog>div>div[style*="padding"]{flex:1}

#media-blog>div>img{height:auto!important;aspect-ratio:4/3!important;min-height:0!important;max-height:none!important;object-fit:cover!important;object-position:center 35%!important;width:100%!important;background:#F5F4F3}
#media-blog>div>div:first-child:not([style*="padding"]){aspect-ratio:4/3!important;height:auto!important}
#media-blog>div>div:first-child:not([style*="padding"]) img{aspect-ratio:auto!important;height:100%!important;min-height:0!important}

#media-overlay #media-blog>div>img:not([src*="logo"]){width:100%!important;height:auto!important;aspect-ratio:4/3!important;max-height:none!important;object-fit:cover!important;object-position:center 35%!important;background:#F5F4F3!important;display:block}
#media-overlay #media-blog>div>div:first-child:not([style*="padding"]){aspect-ratio:4/3!important;height:auto!important}
#media-overlay #media-blog>div>div:first-child:not([style*="padding"]) img:not([src*="logo"]){width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center 35%!important}

#media-overlay #media-blog>div>img[src*="event-transfusion-workshop"]{object-position:center 8%!important}
#workshop-overlay img[src*="event-transfusion-workshop"]{object-fit:contain!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;width:100%!important}

#workshop-overlay img.ws-main{object-fit:contain!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;width:100%!important;filter:none!important}
#workshop-overlay .ws-gal img{filter:none!important}
@media(max-width:700px){#workshop-overlay .ws-gal{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Space between banner edge and article text */
#workshop-overlay .page-banner + div,#buleda-overlay .page-banner + div,#malik-overlay .page-banner + div,#assembly-overlay .page-banner + div,#bloodcamp-overlay .page-banner + div{padding-top:96px!important}

#workshop-overlay img.ws-main{aspect-ratio:3/2!important;height:auto!important;max-height:none!important;object-fit:cover!important;object-position:center 0%!important;width:100%!important}

#services-overlay .svc-grid .svc-card img[src*="pswh-kids"],#services-overlay .svc-grid .svc-card img[data-src*="pswh-kids"]{object-fit:cover!important;object-position:center!important;background:none!important;height:auto!important;aspect-ratio:4/3!important;max-height:none!important}

/* Category labels around the ring */
.ring-cat{position:absolute;z-index:450;transform:translate(-50%,-50%);background:none;border:none;padding:6px 4px;font-family:var(--font);font-size:15px!important;font-weight:700;color:#fff;white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-shadow:0 1px 6px rgba(0,0,0,.45);transition:color .15s}
.ring-cat sup{font-size:10px;font-weight:600;margin-left:3px}
.ring-cat:hover,.ring-cat.active{color:#FFD9DF}
.ring-cat.active{text-decoration-thickness:2px}
@media(max-width:700px){.ring-cat{font-size:12px!important;padding:4px 2px}}

/* Hide gallery group names while any section is open */
body.ov-open .ring-cat,body.ov-open .cat-label{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

@media(max-width:768px){.center-sub{font-size:12px!important;line-height:1.4!important;max-width:200px;margin-left:auto;margin-right:auto}}
@media(max-width:480px){.center-sub{font-size:11px!important;max-width:170px}}

@media(max-width:768px){.nav-donate-btn{display:inline-flex!important;align-items:center;margin-left:auto!important;margin-right:8px;padding:8px 14px!important;font-size:12px!important;min-height:40px;white-space:nowrap}}
@media(max-width:380px){.nav-donate-btn{padding:8px 10px!important;font-size:11px!important}}

html,body{max-width:100%;overflow-x:hidden}
.ring-section{width:100%!important;max-width:100vw;left:0}

/* Mobile: never leave sections hidden; stack fixed multi-column grids */
@media(max-width:768px){
.about-overlay .sr{opacity:1!important}
.about-overlay [style*="grid-template-columns:repeat(3"],.about-overlay [style*="grid-template-columns:repeat(4"],.about-overlay [style*="grid-template-columns:repeat(5"],.about-overlay [style*="grid-template-columns:1fr 1fr"],.about-overlay [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:480px){
.about-overlay [style*="grid-template-columns:repeat(3"],.about-overlay [style*="grid-template-columns:repeat(4"],.about-overlay [style*="grid-template-columns:1fr 1fr"],.about-overlay [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"]{grid-template-columns:1fr!important}
}

/* Mobile menu: sub-links open from the arrow */
.nav-caret{display:inline-block;margin-left:4px}
@media(max-width:768px){
.nav-dropdown-wrap{position:relative}
.nav-dropdown-wrap{display:flex;flex-wrap:wrap;align-items:center}
.nav-dropdown-trigger{flex:0 0 auto;border-bottom:none!important}
.nav-caret{position:static;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:#C41E3A;cursor:pointer;transition:transform .2s ease}
.nav-dropdown-wrap .nav-dropdown{flex:0 0 100%}
.nav-dropdown-wrap{border-bottom:1px solid #EEE}
.nav-dropdown-wrap.active .nav-caret{transform:rotate(180deg)}
.nav-dropdown-wrap.active .nav-dropdown{display:block!important;border-left:3px solid #C41E3A;padding:0 0 0 18px!important}
.nav-links .nav-dropdown a{font-size:15px!important;padding:12px 4px!important;color:#111!important}
}

/* Stories: keep photos clear of the torn banner edge */
#rustum-overlay .torn-edge,#shoaib-overlay .torn-edge,#mehtab-overlay .torn-edge{position:relative;z-index:3}
#rustum-overlay .torn-edge + div,#shoaib-overlay .torn-edge + div,#mehtab-overlay .torn-edge + div{padding-top:56px!important;position:relative;z-index:1}
#rustum-overlay img,#shoaib-overlay img,#mehtab-overlay img{border-radius:14px!important}

/* About: video fills the whole page behind all content */
#about-overlay .about-vbg{position:sticky!important;top:0!important;height:100vh!important;min-height:100vh!important;flex:0 0 100vh!important;margin-bottom:-100vh!important;background:none!important}
#about-overlay .about-vbg video{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 40%!important}

/* Nav logo: 3D raised badge */
.nav-logo{position:relative;padding:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,#f4f4f4 55%,#d9d9d9 100%);box-shadow:0 6px 14px rgba(0,0,0,0.25),0 2px 4px rgba(0,0,0,0.2),inset 0 -3px 6px rgba(0,0,0,0.15),inset 0 3px 6px rgba(255,255,255,0.9)}
.nav-logo::after{content:'';position:absolute;top:6%;left:16%;width:55%;height:35%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0));pointer-events:none}
.nav-logo img{border-radius:50%;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.3))!important;transition:transform .2s ease}
.nav-logo:hover img{transform:translateY(-1px)}

.nav-logo img{border-radius:0!important}
.nav-logo::after{display:none!important}
.nav-logo{border-radius:12px!important;padding:4px 8px!important}

/* Nav logo: KITCC-style hanging badge */
.nav-logo{align-self:flex-start!important;margin-top:0!important;padding:8px 14px 12px!important;border-radius:0 0 14px 14px!important;background:#fff!important;box-shadow:0 8px 18px rgba(0,0,0,0.18),0 2px 4px rgba(0,0,0,0.12)!important;z-index:2}
.nav-logo img{height:78px!important;filter:drop-shadow(0 3px 3px rgba(0,0,0,0.25))!important}
@media(max-width:768px){.nav-logo{padding:6px 10px 8px!important}.nav-logo img{height:60px!important}}

/* Social icons */
.ktcc-social{display:flex;align-items:center;gap:10px}
.ktcc-social a{display:flex;width:32px;height:32px;align-items:center;justify-content:center;background:#fff;border-radius:2px;transition:transform .15s ease}
.ktcc-social a:hover{transform:translateY(-2px)}
.ktcc-social img{width:22px;height:22px;object-fit:contain;filter:none!important;display:block}

.ktcc-social-contact{justify-content:center;margin-top:18px}
.ktcc-social-contact a{background:#fff;border:1px solid #D4D4D4}

.ktcc-social a{position:relative;z-index:5;pointer-events:auto!important;cursor:pointer}
.ktcc-social img{pointer-events:none}

.ktcc-social-contact{align-items:center}
.ktcc-follow{font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:inherit;margin-right:4px}

/* Heading style — KITCC-like (Poppins, Title Case) */
h1,h2,h3,h4,.center-headline{font-family:'Poppins',var(--font),sans-serif!important;font-weight:700!important;text-transform:capitalize!important;letter-spacing:0!important;line-height:1.25!important;text-wrap:balance}
h1{font-weight:800!important}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:'Noto Naskh Arabic',serif!important;text-transform:none!important}

/* Unique headings: elegant serif display for titles */
h1,h2,.center-headline{font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.01em!important;line-height:1.15!important}
h1{font-weight:900!important}
h3,h4{font-family:'Poppins',var(--font),sans-serif!important;font-weight:700!important;letter-spacing:.02em!important}
.about-overlay h2:not([style*="color:#fff"]):not([style*="color: #fff"]){background:linear-gradient(90deg,#9B1530,#C41E3A 55%,#E0475F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:'Noto Naskh Arabic',serif!important;-webkit-text-fill-color:currentColor;background:none}

#about-overlay h1,#about-overlay h2,#about-overlay h3,#about-overlay h4{background:none!important;-webkit-text-fill-color:currentColor!important}

/* Thalassemia section: all headings match main heading style */
#thal-content h2,#thal-content h3,#thal-content h4{font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.01em!important;text-decoration:none!important;background:linear-gradient(90deg,#9B1530,#C41E3A 55%,#E0475F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block}
#thal-content[dir="rtl"] h2,#thal-content[dir="rtl"] h3,#thal-content[dir="rtl"] h4{font-family:'Noto Naskh Arabic',serif!important}

/* Our Journey: headings match Thalassemia style (banner title excluded) */
#journey-overlay h2,#journey-overlay h3,#journey-overlay h4{font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.01em!important;text-decoration:none!important;background:linear-gradient(90deg,#9B1530,#C41E3A 55%,#E0475F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#journey-overlay .page-banner h1,#journey-overlay .page-banner h2,#journey-overlay [style*="color:#fff"]{background:none!important;-webkit-text-fill-color:currentColor!important}

/* Team: names match heading style */
#team-overlay h3{font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.01em!important;text-transform:capitalize!important;background:linear-gradient(90deg,#9B1530,#C41E3A 55%,#E0475F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}

/* Services: headings match heading style */
#services-overlay .svc-card h3,#services-overlay h2:not([style*="color:#fff"]){font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.01em!important;text-transform:capitalize!important;background:linear-gradient(90deg,#9B1530,#C41E3A 55%,#E0475F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Media & Stories: headings match heading style */
#media-overlay h2,#media-overlay h3,#media-overlay h4,#stories-overlay h2,#stories-overlay h3,#stories-overlay h4,#shoaib-overlay h2,#shoaib-overlay h3,#shoaib-overlay h4,#rustum-overlay h2,#rustum-overlay h3,#rustum-overlay h4,#mehtab-overlay h2,#mehtab-overlay h3,#mehtab-overlay h4,#bloodcamp-overlay h2,#bloodcamp-overlay h3,#bloodcamp-overlay h4,#wtd-overlay h2,#wtd-overlay h3,#wtd-overlay h4,#workshop-overlay h2,#workshop-overlay h3,#workshop-overlay h4,#buleda-overlay h2,#buleda-overlay h3,#buleda-overlay h4,#malik-overlay h2,#malik-overlay h3,#malik-overlay h4,#awareness-overlay h2,#awareness-overlay h3,#awareness-overlay h4{font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.01em!important;text-transform:capitalize!important;background:linear-gradient(90deg,#9B1530,#C41E3A 55%,#E0475F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#media-overlay .page-banner h1,#media-overlay .page-banner h2,#media-overlay [style*="color:#fff"],#media-overlay .ktcc-foot h4,#stories-overlay .page-banner h1,#stories-overlay .page-banner h2,#stories-overlay [style*="color:#fff"],#stories-overlay .ktcc-foot h4,#shoaib-overlay .page-banner h1,#shoaib-overlay .page-banner h2,#shoaib-overlay [style*="color:#fff"],#shoaib-overlay .ktcc-foot h4,#rustum-overlay .page-banner h1,#rustum-overlay .page-banner h2,#rustum-overlay [style*="color:#fff"],#rustum-overlay .ktcc-foot h4,#mehtab-overlay .page-banner h1,#mehtab-overlay .page-banner h2,#mehtab-overlay [style*="color:#fff"],#mehtab-overlay .ktcc-foot h4,#bloodcamp-overlay .page-banner h1,#bloodcamp-overlay .page-banner h2,#bloodcamp-overlay [style*="color:#fff"],#bloodcamp-overlay .ktcc-foot h4,#wtd-overlay .page-banner h1,#wtd-overlay .page-banner h2,#wtd-overlay [style*="color:#fff"],#wtd-overlay .ktcc-foot h4,#workshop-overlay .page-banner h1,#workshop-overlay .page-banner h2,#workshop-overlay [style*="color:#fff"],#workshop-overlay .ktcc-foot h4,#buleda-overlay .page-banner h1,#buleda-overlay .page-banner h2,#buleda-overlay [style*="color:#fff"],#buleda-overlay .ktcc-foot h4,#malik-overlay .page-banner h1,#malik-overlay .page-banner h2,#malik-overlay [style*="color:#fff"],#malik-overlay .ktcc-foot h4,#awareness-overlay .page-banner h1,#awareness-overlay .page-banner h2,#awareness-overlay [style*="color:#fff"],#awareness-overlay .ktcc-foot h4{background:none!important;-webkit-text-fill-color:currentColor!important}

/* Nav links: heading style */
.nav-links a:not(.nav-donate-btn),.nav-dropdown a{font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.02em!important}
.nav-links>a:not(.nav-donate-btn),.nav-links .nav-dropdown-trigger{background:linear-gradient(90deg,#9B1530,#C41E3A 55%,#E0475F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links>a:not(.nav-donate-btn):hover,.nav-links .nav-dropdown-trigger:hover{-webkit-text-fill-color:#9B1530}
.nav-dropdown a{-webkit-text-fill-color:#fff!important;color:#fff!important}

/* Black: nav links + team names (font kept) */
.nav-links>a:not(.nav-donate-btn),.nav-links .nav-dropdown-trigger,#team-overlay h3{background:none!important;-webkit-text-fill-color:#111!important;color:#111!important}
.nav-links>a:not(.nav-donate-btn):hover,.nav-links .nav-dropdown-trigger:hover{-webkit-text-fill-color:#C41E3A!important;color:#C41E3A!important}

/* Ring group names + nav Donate Now: heading font */
.ring-cat,.cat-label{font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.02em!important;font-size:17px!important}
@media(max-width:700px){.ring-cat,.cat-label{font-size:13px!important}}
.nav-donate-btn,#nav-donate-now{font-family:'Playfair Display',Georgia,serif!important;font-weight:800!important;letter-spacing:.03em!important}

#stories-overlay [lang="bal"] h3,#stories-overlay h3[lang="bal"]{font-family:'Noto Naskh Arabic',serif!important;letter-spacing:0!important;text-transform:none!important}

#fahad-story-full,#fahad-story-full *,#fahad-story-preview,#fahad-story-preview *{opacity:1!important;transform:none!important;animation:none!important;visibility:visible!important;max-height:none!important;overflow:visible!important}

/* Story Read More clamp */
.story-clamp{max-height:240px;overflow:hidden!important;position:relative;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent);transition:max-height .5s ease}
#fahad-story-full.story-clamp{max-height:520px!important;overflow:hidden!important}
.story-clamp.open,#fahad-story-full.story-clamp.open{max-height:none!important;-webkit-mask-image:none;mask-image:none}
.story-more{margin-top:16px;padding:10px 28px;background:#C41E3A;color:#fff;font-family:var(--font);font-size:13px;font-weight:700;border:none;border-radius:2px;cursor:pointer;letter-spacing:.04em;display:block}
.story-more:hover{background:#9B1530}
.story-more.bal{font-family:'Noto Naskh Arabic',serif;font-size:16px;letter-spacing:0;margin-left:auto}



/* Fahad: preview ends at first paragraph ("…مزنێں هسپتالےءَ برێت") */
#fahad-story-full.story-clamp{max-height:none!important;-webkit-mask-image:none!important;mask-image:none!important}
#fahad-story-full:not(.open) p:not(:first-of-type){display:none!important}

/* Ring: every card the same size; click view shows photo at its own shape */
.ring-card{width:68px!important;height:90px!important;margin-left:0!important}
@media(max-width:600px){.ring-card{width:44px!important;height:60px!important}}
.ring-card img{object-fit:cover!important;object-position:center 30%!important}
.center-preview-img{width:auto!important;height:auto!important;max-width:min(80vw,720px)!important;max-height:62vh!important;background:transparent!important}
.center-preview-img img{width:auto!important;height:auto!important;max-width:min(80vw,720px)!important;max-height:62vh!important;object-fit:contain!important;background:transparent!important;display:block}