@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Amiri:wght@400;700&display=swap";
:root{--primary-emerald:#0d5c4f;--primary-emerald-light:#148f7d;--primary-emerald-dark:#094338;--accent-gold:#c5a572;--accent-gold-light:#d4bb8e;--accent-gold-dark:#a68b5b;--cream:#f8f5f0;--cream-dark:#ede8e0;--navy:#1a2744;--navy-light:#2d3b52;--white:#fff;--black:#0a0a0a;--text-primary:#1a2744;--text-secondary:#4a5568;--text-muted:#718096;--text-light:#f8f5f0;--gradient-primary:linear-gradient(135deg,var(--primary-emerald)0%,var(--primary-emerald-light)100%);--gradient-gold:linear-gradient(135deg,var(--accent-gold-dark)0%,var(--accent-gold)50%,var(--accent-gold-light)100%);--gradient-hero:linear-gradient(180deg,#0d5c4ff2 0%,#1a2744fa 100%);--shadow-sm:0 2px 8px #1a274414;--shadow-md:0 4px 20px #1a27441f;--shadow-lg:0 8px 40px #1a274429;--shadow-glow:0 0 40px #c5a5724d;--font-display:"Outfit",sans-serif;--font-body:"Inter",sans-serif;--font-arabic:"Amiri",serif;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--space-4xl:6rem;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;--radius-full:9999px;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--container-max:1280px;--container-padding:1.5rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);color:var(--text-primary);background-color:var(--cream);font-size:16px;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-primary);font-weight:600;line-height:1.2}h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700}h2{font-size:clamp(2rem,4vw,3rem)}h3{font-size:clamp(1.5rem,3vw,2rem)}h4{font-size:clamp(1.25rem,2vw,1.5rem)}h5{font-size:1.125rem}h6{font-size:1rem}p{color:var(--text-secondary);margin-bottom:var(--space-md)}a{color:var(--primary-emerald);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--primary-emerald-light)}.text-gold{color:var(--accent-gold)}.text-emerald{color:var(--primary-emerald)}.arabic-text{font-family:var(--font-arabic);direction:rtl;font-size:1.5em}.container{width:100%;max-width:var(--container-max);padding:0 var(--container-padding);margin:0 auto}.section{padding:var(--space-4xl)0}.section-sm{padding:var(--space-2xl)0}.pattern-bg{position:relative}.pattern-bg:before{content:"";pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C5A572' fill-opacity='0.06'%3E%3Cpath d='M30 30l15-15v30L30 30zm0 0L15 15v30l15-15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.pattern-bg>*{z-index:1;position:relative}.header{z-index:1000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all var(--transition-base);background:#fffffff2;border-bottom:1px solid #c5a57233;position:fixed;top:0;left:0;right:0}.header-inner{justify-content:space-between;align-items:center;height:80px;display:flex}.logo{align-items:center;gap:var(--space-sm);display:flex}.logo-img{width:auto;height:50px}.logo-text{font-family:var(--font-display);color:var(--primary-emerald);font-size:1.25rem;font-weight:700}.logo-text span{color:var(--accent-gold)}.nav{align-items:center;gap:var(--space-xl);display:flex}.nav-link{font-family:var(--font-display);color:var(--text-primary);padding:var(--space-sm)0;transition:color var(--transition-fast);font-size:.95rem;font-weight:500;position:relative}.nav-link:after{content:"";background:var(--gradient-gold);width:0;height:2px;transition:width var(--transition-base);position:absolute;bottom:0;left:0}.nav-link:hover{color:var(--primary-emerald)}.nav-link:hover:after{width:100%}.nav-cta{background:var(--gradient-primary);padding:var(--space-sm)var(--space-lg);border-radius:var(--radius-full);transition:transform var(--transition-fast),box-shadow var(--transition-fast);font-weight:600;color:var(--white)!important}.nav-cta:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);color:var(--white)!important}.nav-cta:after{display:none}.mobile-menu-btn{cursor:pointer;padding:var(--space-sm);background:0 0;border:none;display:none}.mobile-menu-btn span{background:var(--primary-emerald);width:24px;height:2px;transition:all var(--transition-fast);margin:5px 0;display:block}@media (max-width:968px){.nav{background:var(--white);padding:var(--space-lg);gap:var(--space-md);box-shadow:var(--shadow-lg);flex-direction:column;display:none;position:absolute;top:100%;left:0;right:0}.nav.active{display:flex}.mobile-menu-btn{display:block}}.hero{background:var(--gradient-hero);justify-content:center;align-items:center;min-height:100vh;padding-top:80px;display:flex;position:relative;overflow:hidden}.hero-bg{opacity:.15;background-image:url(/images/mosque-bg.webp);background-position:50%;background-size:cover;position:absolute;inset:0}.hero-pattern{opacity:.5;background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C5A572' fill-opacity='0.1'%3E%3Cpath d='M40 0l40 40-40 40L0 40 40 0zm0 10L10 40l30 30 30-30-30-30z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.hero-content{text-align:center;color:var(--white);z-index:2;max-width:900px;padding:var(--space-xl);position:relative}.hero-bismillah{font-family:var(--font-arabic);color:var(--accent-gold);margin-bottom:var(--space-lg);opacity:.9;font-size:2.5rem}.hero-title{color:var(--white);margin-bottom:var(--space-lg);text-shadow:0 4px 20px #0000004d}.hero-title .highlight{color:var(--accent-gold)}.hero-subtitle{color:#ffffffe6;margin-bottom:var(--space-2xl);font-size:1.25rem;font-weight:300}.hero-cta{gap:var(--space-md);flex-wrap:wrap;justify-content:center;display:flex}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md)var(--space-xl);font-family:var(--font-display);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);border:none;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--gradient-gold);color:var(--navy);box-shadow:var(--shadow-glow)}.btn-primary:hover{color:var(--navy);transform:translateY(-3px);box-shadow:0 0 50px #c5a57280}.btn-secondary{color:var(--white);background:0 0;border:2px solid #ffffff80}.btn-secondary:hover{border-color:var(--white);color:var(--white);background:#ffffff1a}.btn-emerald{background:var(--gradient-primary);color:var(--white)}.btn-emerald:hover{box-shadow:var(--shadow-md);color:var(--white);transform:translateY(-3px)}.prayer-widget{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:var(--space-xl);margin-top:var(--space-2xl);background:#ffffff1a;border:1px solid #c5a5724d}.prayer-widget-light{background:var(--white);box-shadow:var(--shadow-md);border:1px solid #c5a5724d}.prayer-header{margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid #c5a57233;justify-content:space-between;align-items:center;display:flex}.prayer-date{font-family:var(--font-display);font-weight:600}.prayer-date-hijri{color:var(--accent-gold);font-size:1.1rem}.prayer-date-gregorian{opacity:.7;font-size:.9rem}.prayer-location{align-items:center;gap:var(--space-xs);opacity:.8;font-size:.9rem;display:flex}.prayer-times-grid{gap:var(--space-md);grid-template-columns:repeat(6,1fr);display:grid}.prayer-time-item{text-align:center;padding:var(--space-md);border-radius:var(--radius-md);transition:all var(--transition-fast)}.prayer-time-item.active{background:var(--gradient-gold);color:var(--navy)}.prayer-time-item.active .prayer-time-name,.prayer-time-item.active .prayer-time-value{color:var(--navy)}.prayer-time-name{margin-bottom:var(--space-xs);opacity:.8;font-size:.85rem;font-weight:500}.prayer-time-value{font-family:var(--font-display);font-size:1.25rem;font-weight:700}@media (max-width:768px){.prayer-times-grid{grid-template-columns:repeat(3,1fr)}}.card{background:var(--white);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);transition:all var(--transition-base);border:1px solid #c5a5721a}.card:hover{box-shadow:var(--shadow-lg);border-color:#c5a5724d;transform:translateY(-5px)}.card-glass{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffc}.card-icon{background:var(--gradient-primary);border-radius:var(--radius-md);width:60px;height:60px;margin-bottom:var(--space-lg);color:var(--white);justify-content:center;align-items:center;font-size:1.5rem;display:flex}.card-title{margin-bottom:var(--space-sm);font-size:1.25rem}.card-text{color:var(--text-secondary);line-height:1.7}.grid-2{gap:var(--space-xl);grid-template-columns:repeat(2,1fr);display:grid}.grid-3{gap:var(--space-xl);grid-template-columns:repeat(3,1fr);display:grid}.grid-4{gap:var(--space-lg);grid-template-columns:repeat(4,1fr);display:grid}@media (max-width:968px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.section-header{text-align:center;max-width:700px;margin:0 auto var(--space-3xl)}.section-label{font-family:var(--font-display);color:var(--accent-gold);text-transform:uppercase;letter-spacing:2px;margin-bottom:var(--space-md);font-size:.85rem;font-weight:600;display:inline-block}.section-title{margin-bottom:var(--space-md)}.section-subtitle{color:var(--text-secondary);font-size:1.1rem;line-height:1.7}.donation-progress{background:var(--white);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-md);border:1px solid #c5a57233}.progress-bar-container{background:var(--cream-dark);border-radius:var(--radius-full);height:20px;margin:var(--space-lg)0;overflow:hidden}.progress-bar{background:var(--gradient-gold);border-radius:var(--radius-full);height:100%;transition:width 1s;position:relative}.progress-bar:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);animation:2s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-stats{justify-content:space-between;align-items:center;display:flex}.progress-amount{font-family:var(--font-display);color:var(--primary-emerald);font-size:2rem;font-weight:700}.progress-goal{color:var(--text-muted)}.friday-prayer-box{background:var(--gradient-primary);color:var(--white);border-radius:var(--radius-lg);padding:var(--space-xl);justify-content:space-between;align-items:center;gap:var(--space-xl);flex-wrap:wrap;display:flex}.friday-prayer-info h3{color:var(--white);margin-bottom:var(--space-sm)}.friday-prayer-info p{color:#ffffffe6;margin:0}.friday-prayer-times{gap:var(--space-lg);display:flex}.friday-time{text-align:center;padding:var(--space-md)var(--space-lg);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26}.friday-time span{opacity:.8;font-size:.85rem;display:block}.friday-time strong{font-family:var(--font-display);font-size:1.5rem}.footer{background:var(--navy);color:var(--white);padding:var(--space-4xl)0 var(--space-xl)}.footer-grid{gap:var(--space-3xl);margin-bottom:var(--space-3xl);grid-template-columns:2fr 1fr 1fr 1fr;display:grid}.footer-brand p{color:#ffffffb3;margin-top:var(--space-md);line-height:1.8}.footer-title{font-family:var(--font-display);color:var(--accent-gold);margin-bottom:var(--space-lg);font-size:1.1rem;font-weight:600}.footer-links{list-style:none}.footer-links li{margin-bottom:var(--space-sm)}.footer-links a{color:#ffffffb3;transition:color var(--transition-fast)}.footer-links a:hover{color:var(--accent-gold)}.footer-contact-item{align-items:center;gap:var(--space-sm);color:#ffffffb3;margin-bottom:var(--space-sm);display:flex}.footer-social{gap:var(--space-md);margin-top:var(--space-lg);display:flex}.footer-social a{border-radius:var(--radius-full);width:44px;height:44px;color:var(--white);transition:all var(--transition-fast);background:#ffffff1a;justify-content:center;align-items:center;font-size:1.2rem;display:flex}.footer-social a:hover{background:var(--accent-gold);color:var(--navy);transform:translateY(-3px)}.footer-bottom{padding-top:var(--space-xl);text-align:center;color:#ffffff80;border-top:1px solid #ffffff1a;font-size:.9rem}@media (max-width:968px){.footer-grid{grid-template-columns:1fr 1fr}}@media (max-width:640px){.footer-grid{text-align:center;grid-template-columns:1fr}.footer-social{justify-content:center}}.page-header{background:var(--gradient-hero);padding:calc(80px + var(--space-4xl))0 var(--space-4xl);text-align:center;position:relative;overflow:hidden}.page-header:before{content:"";background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C5A572' fill-opacity='0.08'%3E%3Cpath d='M40 0l40 40-40 40L0 40 40 0zm0 10L10 40l30 30 30-30-30-30z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.page-header-content{z-index:1;position:relative}.page-title{color:var(--white);margin-bottom:var(--space-md)}.page-subtitle{color:#fffc;max-width:600px;margin:0 auto;font-size:1.2rem}.breadcrumb{justify-content:center;gap:var(--space-sm);color:#fff9;margin-bottom:var(--space-lg);font-size:.9rem;display:flex}.breadcrumb a{color:var(--accent-gold)}.team-grid{gap:var(--space-xl);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.team-card{text-align:center;padding:var(--space-xl)}.team-avatar{background:var(--gradient-primary);border-radius:var(--radius-full);width:120px;height:120px;margin:0 auto var(--space-lg);font-family:var(--font-display);color:var(--white);border:4px solid var(--accent-gold);justify-content:center;align-items:center;font-size:2.5rem;font-weight:700;display:flex}.team-name{margin-bottom:var(--space-xs);font-size:1.2rem}.team-role{color:var(--accent-gold);font-weight:500}.pillar-card{text-align:center;padding:var(--space-xl)}.pillar-number{background:var(--gradient-gold);border-radius:var(--radius-full);width:50px;height:50px;font-family:var(--font-display);color:var(--navy);margin:0 auto var(--space-lg);justify-content:center;align-items:center;font-size:1.25rem;font-weight:700;display:flex}.form-group{margin-bottom:var(--space-lg)}.form-label{margin-bottom:var(--space-sm);color:var(--text-primary);font-weight:500;display:block}.form-input,.form-textarea{width:100%;padding:var(--space-md);border:2px solid var(--cream-dark);border-radius:var(--radius-md);font-family:var(--font-body);transition:border-color var(--transition-fast);background:var(--white);font-size:1rem}.form-input:focus,.form-textarea:focus{border-color:var(--primary-emerald);outline:none}.form-textarea{resize:vertical;min-height:150px}.bank-details{background:var(--cream);border-radius:var(--radius-lg);padding:var(--space-xl);border:2px dashed var(--accent-gold)}.bank-details-title{color:var(--primary-emerald);margin-bottom:var(--space-lg)}.bank-detail-row{padding:var(--space-sm)0;border-bottom:1px solid #c5a57233;justify-content:space-between;display:flex}.bank-detail-row:last-child{border-bottom:none}.bank-detail-label{color:var(--text-muted)}.bank-detail-value{font-family:var(--font-display);color:var(--text-primary);font-weight:600}.portal-card{text-align:center;padding:var(--space-2xl);background:linear-gradient(135deg,var(--white)0%,var(--cream)100%)}.portal-icon{background:var(--gradient-primary);border-radius:var(--radius-lg);width:80px;height:80px;margin:0 auto var(--space-lg);justify-content:center;align-items:center;font-size:2rem;display:flex}.portal-title{margin-bottom:var(--space-sm)}.portal-description{margin-bottom:var(--space-lg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fadeInUp{animation:.6s forwards fadeInUp}.animate-pulse{animation:2s infinite pulse}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--space-md)}.mb-2{margin-bottom:var(--space-lg)}.mb-3{margin-bottom:var(--space-xl)}.mb-4{margin-bottom:var(--space-2xl)}.mt-0{margin-top:0}.mt-1{margin-top:var(--space-md)}.mt-2{margin-top:var(--space-lg)}.mt-3{margin-top:var(--space-xl)}.mt-4{margin-top:var(--space-2xl)}.py-section{padding:var(--space-4xl)0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-md)}.gap-2{gap:var(--space-lg)}.gap-3{gap:var(--space-xl)}.hidden{display:none}@media (max-width:768px){.md-hidden{display:none}}.loading{opacity:.5;pointer-events:none}.skeleton{background:linear-gradient(90deg,var(--cream)25%,var(--cream-dark)50%,var(--cream)75%);background-size:200% 100%;animation:1.5s infinite skeleton-loading}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}