html body { *height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-weight:normal; } body { font-family:"robotoregular"; } a,img,.fa,i { -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } a { color:#223a66; } a:hover { color:#223a66; } img { display:block; margin:0px auto; will-change:transform; image-rendering:-webkit-optimize-contrast; image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; -ms-interpolation-mode:nearest-neighbor; transform:translateZ(0); } .crispimg { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; -ms-interpolation-mode:nearest-neighbor; } .clearelement { clear:both; margin:0px auto; display:block; font-size:0px; height:0px; line-height:0px; content:""; } .floatleft { float:left; display:block; } .floatright { float:right; display:block; } .floatnone { display:block; float:none; } .margintop { margin-top:0px !important; } .marginbottom { margin-bottom:0px !important; } .marginleft { margin-left:0px !important; } .marginright { margin-right:0px !important; } .paddingtop { padding-top:0px !important; } .paddingbottom { padding-bottom:0px !important; } .paddingleft { padding-left:0px !important; } .paddingright { padding-right:0px !important; } .disabledc,.disabled { opacity:0.7; pointer-events:none; } .visibilitynone { display:none; opacity:0.1; } .loadmoreworldharry { display:none; position:absolute; top:0; right:0; left:0; margin:0px auto; } .loadmoreworldharry.btmn { top:inherit; bottom:0px; } .loadmoreworldharry .progress { height:4px; margin:0px auto; } :root { --navy:#1b2a6b; --navy-dark:#0f1a4e; --navy-light:#2d4098; --saffron:#f5a623; --saffron-light:#ffd280; --saffron-dark:#d4841a; --white:#ffffff; --off-white:#faf9f6; --light-gray:#f0eee8; --border:#e0ddd5; --dark-text:#1a1a2e; --mid-text:#4a4a6a; --light-text:#8888aa; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:"DM Sans",sans-serif; background:var(--off-white); color:var(--dark-text); overflow-x:hidden; } .topbar { background:var(--navy-dark); color:rgba(255,255,255,0.65); font-size:12px; padding:7px 48px; display:flex; justify-content:space-between; align-items:center; letter-spacing:0.02em; } .topbar a { color:var(--saffron-light); text-decoration:none; margin-left:18px; transition:color 0.2s; } .topbar a:hover { color:#fff; } .topbar-left { display:flex; align-items:center; gap:6px; } nav { background:var(--white); padding:0 48px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:200; border-bottom:3px solid var(--saffron); box-shadow:0 2px 24px rgba(27,42,107,0.09); height:70px; } .nav-logo img { height:55px; display:block; cursor:pointer; } .nav-links { display:flex; align-items:center; gap:2px; list-style:none; } .nav-btn { background:none; border:none; cursor:pointer; font-family:"DM Sans",sans-serif; font-size:14px; font-weight:500; color:var(--mid-text); padding:8px 15px; border-radius:7px; transition:all 0.2s; letter-spacing:0.01em; } .nav-btn:hover { background:var(--light-gray); color:var(--navy); } .nav-btn.active,.active > a.nav-btn { color:var(--navy); font-weight:700; background:rgba(27,42,107,0.06); } .nav-donate { background:var(--saffron); color:var(--navy); font-weight:700; padding:10px 22px; border-radius:8px; margin-left:8px; box-shadow:0 3px 12px rgba(245,166,35,0.3); } .nav-donate:hover { background:var(--saffron-dark); transform:translateY(-1px); box-shadow:0 5px 16px rgba(245,166,35,0.4); } .page { display:none; } .page.active { display:block; } .section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--saffron-dark); margin-bottom:10px; display:block; } .section-title { font-family:"Playfair Display",serif; font-size:clamp(28px,3.5vw,44px); font-weight:900; color:var(--navy); line-height:1.12; margin-bottom:14px; } .section-desc { font-size:22px; color:var(--mid-text); line-height:1.7; font-weight:300; } .btn-primary { background:var(--saffron); color:var(--navy); font-weight:700; font-size:15px; padding:14px 32px; border-radius:10px; text-decoration:none; border:none; cursor:pointer; font-family:"DM Sans",sans-serif; transition:all 0.25s; box-shadow:0 4px 16px rgba(245,166,35,0.3); display:inline-block; } .btn-primary:hover { background:var(--saffron-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,166,35,0.4); } .btn-outline { background:transparent; color:var(--navy); font-weight:600; font-size:15px; padding:13px 30px; border-radius:10px; border:2px solid var(--navy); cursor:pointer; font-family:"DM Sans",sans-serif; transition:all 0.25s; display:inline-block; text-decoration:none; } .btn-outline:hover { background:var(--navy); color:white; } .btn-ghost-white { background:rgba(255,255,255,0.1); color:white; font-weight:500; font-size:15px; padding:13px 30px; border-radius:10px; border:1.5px solid rgba(255,255,255,0.25); cursor:pointer; font-family:"DM Sans",sans-serif; transition:all 0.25s; display:inline-block; text-decoration:none; } .btn-ghost-white:hover { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.5); } .hero { background:linear-gradient( 135deg,var(--navy) 0%,var(--navy-dark) 55%,#142260 100% ); min-height:88vh; display:grid; grid-template-columns:1.1fr 0.9fr; align-items:center; padding:80px 80px; position:relative; overflow:hidden; } .hero::before { content:""; position:absolute; top:-120px; right:-120px; width:700px; height:700px; background:radial-gradient( circle,rgba(245,166,35,0.11) 0%,transparent 65% ); border-radius:50%; pointer-events:none; } .hero-mandala { position:absolute; right:0; top:0; bottom:0; width:48%; display:flex; align-items:center; justify-content:center; opacity:0.055; pointer-events:none; } .hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(245,166,35,0.14); border:1px solid rgba(245,166,35,0.3); border-radius:100px; padding:6px 16px; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--saffron-light); margin-bottom:28px; } .hero-badge span { width:6px; height:6px; background:var(--saffron); border-radius:50%; display:inline-block; animation:blink 2s infinite; } @keyframes blink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(1.4); } } .hero h1 { font-family:"Playfair Display",serif; font-size:clamp(38px,4.8vw,60px); font-weight:900; line-height:1.08; color:white; margin-bottom:22px; } .hero h1 em { font-style:normal; color:var(--saffron); } .hero-sub { font-size:17px; color:rgba(255,255,255,0.68); line-height:1.68; max-width:490px; margin-bottom:38px; font-weight:300; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px; } .hero-stats { display:flex; gap:44px; *padding-top:36px; *border-top:1px solid rgba(255,255,255,0.1); } .stat-num { font-family:"Playfair Display",serif; font-size:30px; font-weight:900; color:var(--saffron); line-height:1; margin-bottom:4px; } .stat-lbl { font-size:11px; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.08em; font-weight:500; } .hero-right { position:relative; z-index:2; display:flex; justify-content:center; } .voter-stack { width:370px; } .voter-stack-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--saffron); margin-bottom:14px; } .voter-card { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.11); border-radius:13px; padding:17px 20px; display:flex; align-items:center; gap:15px; margin-bottom:9px; cursor:pointer; transition:all 0.25s; text-decoration:none; backdrop-filter:blur(8px); } .voter-card:hover { background:rgba(245,166,35,0.14); border-color:rgba(245,166,35,0.38); transform:translateX(6px); } .voter-card-icon { width:40px; height:40px; background:var(--saffron); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; transition:transform 0.25s; } .voter-card:hover .voter-card-icon { transform:rotate(8deg) scale(1.08); } .vc-title { font-size:14px; font-weight:600; color:white; margin-bottom:2px; } .vc-sub { font-size:12px; color:rgba(255,255,255,0.45); } .vc-arrow { margin-left:auto; color:rgba(255,255,255,0.25); font-size:18px; transition:all 0.2s; } .voter-card:hover .vc-arrow { color:var(--saffron); transform:translateX(4px); } .mission-band { background:var(--saffron); padding:26px 40px; display:flex; align-items:center; justify-content:center; gap:22px; } .mission-text { font-family:"Playfair Display",serif; font-size:18px; font-weight:700; color:var(--navy); text-align:center; line-height:1.4; } .how-section { background:var(--white); padding:60px 80px; } .hwh-grid { display:grid; *grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-top:56px; } .step-list { margin-top:10px; } .step-item { display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--border); transition:padding-left 0.2s; cursor:default; } .step-item:last-child { border-bottom:none; } .step-item:hover { padding-left:6px; } .step-num { font-family:"Playfair Display",serif; font-size:34px; font-weight:900; color:var(--saffron); opacity:0.3; line-height:1; flex-shrink:0; width:40px; text-align:right; transition:opacity 0.2s; } .step-item:hover .step-num { opacity:1; } .step-title { font-size:21px; font-weight:700; color:var(--navy); margin-bottom:5px; } .step-body { font-size:16px; color:var(--mid-text); line-height:1.65; } .impact-card { background:linear-gradient(140deg,var(--navy) 0%,var(--navy-dark) 100%); border-radius:20px; padding:40px; color:white; position:relative; overflow:hidden; } .impact-card::before { content:"ॐ"; position:absolute; top:-20px; right:16px; font-size:160px; color:rgba(245,166,35,0.05); line-height:1; } .impact-card h3 { font-family:"Playfair Display",serif; font-size:20px; color:var(--saffron); margin-bottom:28px; font-weight:700; } .metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .metric-box { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); border-radius:12px; padding:18px; } .metric-val { font-family:"Playfair Display",serif; font-size:30px; font-weight:900; color:var(--saffron); margin-bottom:5px; } .metric-desc { font-size:12px; color:rgba(255,255,255,0.5); line-height:1.5; } .nonpartisan-note { margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.09); font-size:12px; color:rgba(255,255,255,0.42); line-height:1.7; } .tools-section { background:var(--off-white); padding:96px 80px; } .tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; } .tool-card { background:var(--white); border-radius:16px; padding:30px 22px; text-align:center; cursor:pointer; text-decoration:none; color:var(--dark-text); border:2px solid transparent; transition:all 0.28s; position:relative; overflow:hidden; } .tool-card::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--saffron); transform:scaleX(0); transition:transform 0.28s; } .tool-card:hover::after { transform:scaleX(1); } .tool-card:hover { border-color:var(--saffron); transform:translateY(-7px); box-shadow:0 20px 40px rgba(27,42,107,0.11); } .tool-icon { width:62px; height:62px; background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%); border-radius:15px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:24px; transition:all 0.28s; } .tool-card:hover .tool-icon { background:var(--saffron); transform:rotate(6deg) scale(1.06); } .tool-card h3 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:9px; } .tool-card p { font-size:13px; color:var(--mid-text); line-height:1.55; } .events-home { background:var(--white); padding:96px 80px; } .events-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; } .see-all { text-decoration:none; color:var(--navy); font-weight:600; font-size:14px; border-bottom:2px solid var(--saffron); padding-bottom:2px; background:none; border-top:none; border-left:none; border-right:none; cursor:pointer; font-family:"DM Sans",sans-serif; transition:opacity 0.2s; } .see-all:hover { opacity:0.7; } .events-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:22px; } .event-card { border-radius:16px; overflow:hidden; background:var(--off-white); transition:all 0.28s; cursor:pointer; display:block; text-decoration:none; color:var(--dark-text); } .event-card:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(27,42,107,0.12); } .event-card.featured { background:linear-gradient(140deg,var(--navy),var(--navy-dark)); color:white; } .event-img { height:200px; display:flex; align-items:center; justify-content:center; font-size:52px; position:relative; background:linear-gradient(135deg,#e8e4d9,#d4cebc); } .event-card.featured .event-img { height:250px; background:rgba(255,255,255,0.05); } .event-badge { position:absolute; top:14px; left:14px; background:var(--saffron); color:var(--navy); border-radius:8px; padding:8px 12px; font-weight:700; font-size:12px; text-align:center; line-height:1.2; } .badge-day { font-family:"Playfair Display",serif; font-size:22px; display:block; } .event-body { padding:20px 22px; } .event-tag { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--saffron-dark); margin-bottom:7px; display:block; } .event-card.featured .event-tag { color:var(--saffron); } .event-title { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:8px; line-height:1.35; } .event-card.featured .event-title { color:white; font-size:19px; } .event-meta { font-size:12px; color:var(--mid-text); } .event-card.featured .event-meta { color:rgba(255,255,255,0.45); } .partners-strip { background:var(--light-gray); padding:60px 80px; } .partners-strip .section-title { font-size:28px; margin-bottom:32px; } .partners-row { display:flex; gap:16px; flex-wrap:wrap; } .partner-box { min-width:220px; max-width:220px; background:white; border-radius:10px; padding:10px 10px; flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--mid-text); border:2px solid transparent; transition:all 0.22s; cursor:pointer; } .partner-box:hover { border-color:var(--saffron); color:var(--navy); transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.06); } .partner-box img { max-width:200px; } .newsletter { background:linear-gradient(140deg,var(--navy) 0%,var(--navy-dark) 100%); padding:88px 80px; text-align:center; position:relative; overflow:hidden; } .newsletter::before { content:"ॐ"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:500px; color:rgba(245,166,35,0.025); pointer-events:none; line-height:1; } .newsletter .section-title { color:white; } .newsletter .section-desc { color:rgba(255,255,255,0.58); max-width:480px; margin:0 auto 36px; } .nl-form { display:flex; gap:10px; max-width:480px; margin:0 auto; } .nl-input { flex:1; padding:13px 18px; border-radius:9px; border:1.5px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.08); color:white; font-size:14px; font-family:"DM Sans",sans-serif; outline:none; transition:border-color 0.2s; } .nl-input::placeholder { color:rgba(255,255,255,0.32); } .nl-input:focus { border-color:var(--saffron); } .nl-btn { background:var(--saffron); color:var(--navy); border:none; padding:13px 26px; border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; font-family:"DM Sans",sans-serif; white-space:nowrap; transition:all 0.22s; } .nl-btn:hover { background:var(--saffron-dark); } footer { background:#0c1430; color:rgba(255,255,255,0.58); padding:64px 80px 28px; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); } .footer-logo { height:36px; filter:brightness(0) invert(1); opacity:0.85; margin-bottom:14px; margin-left:0px; } .footer-brand p { font-size:13px; line-height:1.7; max-width:250px; } .footer-ein { font-size:11px; color:rgba(255,255,255,0.28); margin-top:14px; } .footer-col h4 { font-size:12px; font-weight:700; color:white; letter-spacing:0.07em; text-transform:uppercase; margin-bottom:16px; } .footer-col ul { list-style:none; padding-left:0px; } .footer-col li { margin-bottom:9px; line-height:normal; } .footer-col a { color:rgba(255,255,255,0.5); text-decoration:none; font-size:13px; transition:color 0.2s; cursor:pointer; background:none; border:none; font-family:"DM Sans",sans-serif; } .footer-col a:hover { color:var(--saffron); } .footer-bottom { display:flex; justify-content:space-between; font-size:12px; align-items:center; } .footer-bottom a { color:rgba(255,255,255,0.3); text-decoration:none; } .page-hero { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%); padding:80px 80px 70px; position:relative; overflow:hidden; } .page-hero::before { content:""; position:absolute; top:-60px; right:-60px; width:400px; height:400px; background:radial-gradient( circle,rgba(245,166,35,0.1) 0%,transparent 65% ); border-radius:50%; pointer-events:none; } .page-hero-content { position:relative; z-index:1; max-width:700px; } .page-hero h1 { font-family:"Playfair Display",serif; font-size:clamp(34px,4vw,52px); font-weight:900; color:white; line-height:1.1; margin-bottom:16px; } .page-hero h1 em { font-style:normal; color:var(--saffron); } .page-hero p { font-size:17px; color:rgba(255,255,255,0.65); line-height:1.68; font-weight:300; } .breadcrumb { font-size:12px; color:rgba(255,255,255,0.4); margin-bottom:18px; letter-spacing:0.06em; text-transform:uppercase; } .breadcrumb span { color:var(--saffron); } .about-mission { background:var(--white); padding:88px 80px; } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; } .about-values { margin-top:36px; display:flex; flex-direction:column; gap:0; } .value-item { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--border); } .value-item:last-child { border-bottom:none; } .value-icon { width:44px; height:44px; background:linear-gradient(135deg,var(--navy),var(--navy-light)); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; } .value-title { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:4px; } .value-body { font-size:13px; color:var(--mid-text); line-height:1.6; } .about-visual { background:linear-gradient(140deg,var(--navy),var(--navy-dark)); border-radius:24px; padding:44px; color:white; position:relative; overflow:hidden; } .about-visual::before { content:"ॐ"; position:absolute; bottom:-30px; right:10px; font-size:180px; color:rgba(245,166,35,0.06); pointer-events:none; } .about-visual h3 { font-family:"Playfair Display",serif; font-size:24px; font-weight:700; color:var(--saffron); margin-bottom:20px; } .about-visual p { font-size:15px; color:rgba(255,255,255,0.68); line-height:1.75; margin-bottom:20px; } .about-tag { display:inline-block; background:rgba(245,166,35,0.15); border:1px solid rgba(245,166,35,0.3); border-radius:100px; padding:5px 14px; font-size:12px; font-weight:700; color:var(--saffron-light); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; margin-right:6px; } .team-section { background:var(--off-white); padding:88px 80px; } .team-container { padding:20px; } .team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; } .team-card { background:white; border-radius:16px; overflow:hidden; transition:all 0.28s; } .team-contentmlp { margin-top:48px; } .team-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(27,42,107,0.1); } .team-avatar { height:160px; display:flex; align-items:center; justify-content:center; font-size:52px; } .team-avatar.nav-bg { background:linear-gradient(135deg,var(--navy),var(--navy-light)); } .team-avatar.saf-bg { background:linear-gradient(135deg,var(--saffron-dark),var(--saffron)); } .team-avatar.mix-bg { background:linear-gradient(135deg,#2d4098,#1b2a6b); } .team-body { padding:20px 22px; } .team-name { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:4px; padding:0px; padding-bottom:0px; } .team-role { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--saffron-dark); margin-bottom:10px; } .team-bio { font-size:13px; color:var(--mid-text); line-height:1.6; } .voter-page-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:80px; background:var(--off-white); } .voter-tool-card { background:white; border-radius:20px; padding:36px 32px; border:2px solid transparent; transition:all 0.3s; cursor:pointer; position:relative; overflow:hidden; } .voter-tool-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--saffron); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; } .voter-tool-card:hover::before { transform:scaleX(1); } .voter-tool-card:hover { border-color:var(--saffron); box-shadow:0 24px 48px rgba(27,42,107,0.1); } .vtc-icon { width:72px; height:72px; background:linear-gradient(135deg,var(--navy),var(--navy-light)); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:22px; transition:all 0.3s; } .voter-tool-card:hover .vtc-icon { background:var(--saffron); transform:rotate(6deg); } .vtc-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--saffron-dark); margin-bottom:8px; display:block; } .vtc-title { font-family:"Playfair Display",serif; font-size:22px; font-weight:700; color:var(--navy); margin-bottom:12px; } .vtc-desc { font-size:14px; color:var(--mid-text); line-height:1.7; margin-bottom:24px; } .vtc-steps { list-style:none; margin-bottom:28px; } .vtc-steps li { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--mid-text); padding:6px 0; border-bottom:1px solid var(--border); } .vtc-steps li:last-child { border-bottom:none; } .vtc-step-num { width:22px; height:22px; background:var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:white; flex-shrink:0; margin-top:1px; } .voter-sidebar { padding:80px 80px 80px 0; background:var(--off-white); } ul { padding-left:0px; } .events-page { padding:72px 80px; background:var(--off-white); } .events-filter { display:flex; gap:10px; margin-bottom:44px; flex-wrap:wrap; } .filter-btn { padding:9px 20px; border-radius:100px; border:1.5px solid var(--border); background:white; font-size:13px; font-weight:600; color:var(--mid-text); cursor:pointer; font-family:"DM Sans",sans-serif; transition:all 0.2s; } .filter-btn.active,.filter-btn:hover { background:var(--navy); color:white; border-color:var(--navy); } .events-list { display:flex; flex-direction:column; gap:18px; } .event-list-card { background:white; border-radius:16px; padding:28px 32px; display:flex; align-items:center; gap:28px; border:2px solid transparent; transition:all 0.25s; cursor:pointer; } .event-list-card:hover { border-color:var(--saffron); box-shadow:0 12px 32px rgba(27,42,107,0.09); transform:translateX(4px); } .elc-date { width:64px; height:64px; background:var(--navy); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; flex-shrink:0; } .elc-day { font-family:"Playfair Display",serif; font-size:22px; font-weight:900; line-height:1; color:var(--saffron); } .elc-month { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; opacity:0.7; color:white; } .elc-emoji { font-size:36px; flex-shrink:0; } .elc-content { flex:1; } .elc-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--saffron-dark); margin-bottom:5px; display:block; } .elc-title { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:6px; } .elc-meta { font-size:13px; color:var(--mid-text); } .elc-action { flex-shrink:0; } .event-featured-badge { background:var(--saffron); color:var(--navy); font-size:10px; font-weight:700; padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:0.08em; margin-left:10px; } .contact-page { padding:80px; background:var(--off-white); } .contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; } .contact-info-card { background:linear-gradient(140deg,var(--navy),var(--navy-dark)); border-radius:20px; padding:40px; color:white; } .contact-info-card h3 { font-family:"Playfair Display",serif; font-size:26px; font-weight:700; color:var(--saffron); margin-bottom:12px; } .contact-info-card p { font-size:14px; color:rgba(255,255,255,0.6); line-height:1.7; margin-bottom:32px; } .contact-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; } .contact-item-icon { width:40px; height:40px; background:rgba(245,166,35,0.15); border:1px solid rgba(245,166,35,0.25); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .contact-item-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.4); margin-bottom:3px; } .contact-item-val { font-size:14px; color:rgba(255,255,255,0.85); font-weight:500; } .contact-np-box { margin-top:28px; padding:18px; background:rgba(255,255,255,0.05); border-radius:12px; font-size:12px; color:rgba(255,255,255,0.4); line-height:1.7; border:1px solid rgba(255,255,255,0.08); } .contact-form-card { background:white; border-radius:20px; padding:40px; } .contact-form-card h3 { font-family:"Playfair Display",serif; font-size:26px; font-weight:700; color:var(--navy); margin-bottom:6px; } .contact-form-card p { font-size:14px; color:var(--mid-text); margin-bottom:28px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; } .form-group { margin-bottom:14px; } .form-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--mid-text); margin-bottom:7px; display:block; } .form-input,.form-select,.form-textarea { width:100%; padding:12px 16px; border-radius:9px; border:1.5px solid var(--border); font-size:14px; font-family:"DM Sans",sans-serif; color:var(--dark-text); background:var(--off-white); outline:none; transition:border-color 0.2s; } .form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--saffron); background:white; } .form-textarea { resize:vertical; min-height:110px; } .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; margin-left:8px; } .hamburger span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; transition:all 0.3s; } .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity:0; } .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .mobile-menu { display:none; position:fixed; top:62px; left:0; right:0; background:var(--white); border-bottom:3px solid var(--saffron); box-shadow:0 8px 32px rgba(27,42,107,0.15); z-index:199; padding:16px 0 24px; flex-direction:column; padding-top:0px; padding-bottom:0px; } .mobile-menu.open { display:flex; } .mobile-menu .nav-btn { width:100%; text-align:left; padding:14px 28px; border-radius:0; font-size:16px; border-bottom:1px solid var(--border); line-height:normal; } .mobile-menu .nav-btn:last-child { border-bottom:none; } .mobile-menu .nav-donate { margin:16px 24px 0; border-radius:10px; padding:14px 22px; text-align:center; } .footer-col .site-footer__social a { margin:0px 5px; } .footer-col .site-footer__social .firstchild a { margin-left:0px; } .site-footer__social .fab { font-size:18px; } .social-contact { margin-bottom:0px; } .site-footer__social a { color:var(--navy-dark); background-color:var(--saffron-dark); height:32px; width:32px; } .gdl-page-content ul { padding-left:20px; } .gdl-page-content li { } @media (max-width:900px) { .topbar { padding:6px 20px; font-size:11px; } .topbar-left { display:none; } nav { padding:0 20px; } .nav-links { display:none; } .hamburger { display:flex; } .hero { grid-template-columns:1fr; padding:60px 32px 52px; min-height:auto; } .hero-mandala { display:none; } .hero h1 { font-size:clamp(34px,7vw,52px); } .hero-sub { font-size:15px; } .hero-right { display:none; } .hero-stats { gap:28px; } .mission-band { padding:22px 24px; gap:12px; } .mission-text { font-size:15px; } .how-section { padding:60px 32px; } .hwh-grid { grid-template-columns:1fr; gap:36px; } .tools-section { padding:60px 32px; } .tools-grid { grid-template-columns:1fr 1fr; gap:14px; } .events-home { padding:60px 32px; } .events-grid { grid-template-columns:1fr; gap:16px; } .event-card.featured .event-img { height:200px; } .partners-strip { padding:48px 32px; } .partners-row { gap:10px; } .partner-box { min-width:90px; padding:12px 14px; font-size:12px; } .newsletter { padding:60px 32px; } .nl-form { flex-direction:column; } footer { padding:48px 32px 24px; } .footer-grid { grid-template-columns:1fr 1fr; gap:28px; } .about-mission { padding:60px 32px; } .about-grid { grid-template-columns:1fr; gap:36px; } .team-section { padding:60px 32px; } .team-grid { grid-template-columns:1fr; gap:16px; } .page-hero { padding:60px 32px 50px; } .voter-page-grid { grid-template-columns:1fr; padding:48px 32px; } .events-page { padding:48px 32px; } .event-list-card { padding:20px; gap:16px; } .elc-emoji { display:none; } .contact-page { padding:48px 32px; } .contact-grid { grid-template-columns:1fr; gap:24px; } .form-row { grid-template-columns:1fr; } .partner-box img { max-width:100%; } } @media (max-width:600px) { .topbar { display:none; } nav { padding:0 16px; height:62px; } .nav-logo img { height:32px; } .hero { padding:48px 20px 44px; } .hero-badge { font-size:10px; padding:5px 12px; margin-bottom:20px; } .hero h1 { font-size:clamp(30px,9vw,42px); margin-bottom:16px; } .hero-sub { font-size:14px; margin-bottom:28px; } .hero-actions { flex-direction:column; gap:10px; margin-bottom:36px; } .hero-actions .btn-primary,.hero-actions .btn-ghost-white { width:100%; text-align:center; } .hero-stats { gap:20px; flex-wrap:wrap; } .stat-num { font-size:24px; } .stat-lbl { font-size:10px; } .mission-band { padding:18px 16px; flex-wrap:wrap; } .mission-text { font-size:14px; order:-1; width:100%; } .how-section { padding:48px 20px; } .section-title { font-size:clamp(24px,7vw,32px); } .impact-card { padding:28px 20px; } .metric-grid { grid-template-columns:1fr 1fr; gap:10px; } .metric-val { font-size:24px; } .tools-section { padding:48px 20px; } .tools-grid { grid-template-columns:1fr 1fr; gap:10px; } .tool-card { padding:20px 14px; } .tool-icon { width:48px; height:48px; font-size:20px; border-radius:12px; margin-bottom:12px; } .tool-card h3 { font-size:13px; } .tool-card p { font-size:12px; } .events-home { padding:48px 20px; } .events-header { flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:28px; } .event-img { height:160px; font-size:36px; } .partners-strip { padding:40px 20px; } .partners-row { gap:8px; } .partner-box { min-width:80px; padding:10px 12px; font-size:11px; } .newsletter { padding:48px 20px; } .newsletter .section-desc { font-size:14px; } footer { padding:40px 20px 20px; } .footer-grid { grid-template-columns:1fr; gap:24px; } .footer-logo { height:28px; } .footer-bottom { flex-direction:column; gap:8px; text-align:center; } .about-mission { padding:48px 20px; } .about-visual { padding:28px 20px; } .about-visual::before { font-size:120px; } .team-section { padding:48px 20px; } .team-avatar { height:130px; } .page-hero { padding:48px 20px 40px; } .page-hero h1 { font-size:clamp(26px,8vw,38px); } .page-hero p { font-size:14px; } .voter-page-grid { padding:32px 20px; } .voter-tool-card { padding:24px 20px; } .vtc-icon { width:56px; height:56px; font-size:24px; border-radius:14px; } .vtc-title { font-size:18px; } .events-page { padding:32px 20px; } .events-filter { gap:6px; } .filter-btn { padding:7px 14px; font-size:12px; } .event-list-card { padding:16px; gap:12px; flex-wrap:wrap; } .elc-action { width:100%; margin-top:8px; } .elc-action .btn-primary,.elc-action .btn-outline { width:100%; text-align:center; } .elc-title { font-size:15px; } .contact-page { padding:32px 20px; } .contact-form-card { padding:24px 20px; } .contact-info-card { padding:28px 20px; } .mobile-menu .nav-donate { max-width:89%; margin:16px auto; } } @media (min-width:1200px) { .container { max-width:1200px; } } @media (min-width:1025px) and (max-width:1280px) { } @media (max-width:767px) { } @media (max-width:768px) { } @media (max-width:991px) { } @media (max-width:768px) { .floatleft ,.floatright{float:none;} .mnsocail a{float:left;} .icon-reorder{color:#161494;} } @media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) { } @media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape) { } @media only screen and (min-device-width:320px) and (max-device-width:568px) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:320px) and (max-device-width:568px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) { } @media only screen and (min-device-width:320px) and (max-device-width:568px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape) { } @media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) { } @media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape) { } @media only screen and (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) { } @media only screen and (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait) { } @media only screen and (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) and (orientation:landscape) { } @media only screen and (min-device-width:375px) and (max-device-width:812px) and (-webkit-min-device-pixel-ratio:3) { } @media only screen and (min-device-width:375px) and (max-device-width:812px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait) { } @media only screen and (min-device-width:375px) and (max-device-width:812px) and (-webkit-min-device-pixel-ratio:3) and (orientation:landscape) { } @media screen and (device-width:480px) and (device-height:800px) { } @media screen and (device-width:480px) and (device-height:800px) and (orientation:portrait) { } @media screen and (device-width:480px) and (device-height:800px) and (orientation:landscape) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:landscape) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:landscape) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:4) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:4) and (orientation:portrait) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:4) and (orientation:landscape) { } @media screen and (device-width:320px) and (device-height:640px) and (-webkit-device-pixel-ratio:2) { } @media screen and (device-width:320px) and (device-height:640px) and (-webkit-device-pixel-ratio:2) and (orientation:portrait) { } @media screen and (device-width:320px) and (device-height:640px) and (-webkit-device-pixel-ratio:2) and (orientation:landscape) { } @media screen and (device-width:320px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) { } @media screen and (device-width:320px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait) { } @media screen and (device-width:320px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:landscape) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:4) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:4) and (orientation:portrait) { } @media screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:4) and (orientation:landscape) { } @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) { } @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1) { } @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1) { } @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:834px) and (max-device-width:1112px) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:834px) and (max-device-width:834px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:1112px) and (max-device-width:1112px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:1024px) and (max-device-width:1366px) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:1024px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) { } @media only screen and (min-device-width:1366px) and (max-device-width:1366px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) { } @media (min-device-width:800px) and (max-device-width:1280px) { } @media (max-device-width:800px) and (orientation:portrait) { } @media (max-device-width:1280px) and (orientation:landscape) { } @media (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:2) { } @media (max-device-width:800px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) { } @media (max-device-width:1280px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) { } @media screen and (device-width:601px) and (device-height:906px) and (-webkit-min-device-pixel-ratio:1.331) and (-webkit-max-device-pixel-ratio:1.332) { } @media screen and (device-width:601px) and (device-height:906px) and (-webkit-min-device-pixel-ratio:1.331) and (-webkit-max-device-pixel-ratio:1.332) and (orientation:portrait) { } @media screen and (device-width:601px) and (device-height:906px) and (-webkit-min-device-pixel-ratio:1.331) and (-webkit-max-device-pixel-ratio:1.332) and (orientation:landscape) { } @media screen and (device-width:1536px) and (device-height:2048px) and (-webkit-min-device-pixel-ratio:1.331) and (-webkit-max-device-pixel-ratio:1.332) { } @media screen and (device-width:1536px) and (device-height:2048px) and (-webkit-min-device-pixel-ratio:1.331) and (-webkit-max-device-pixel-ratio:1.332) and (orientation:portrait) { } @media screen and (device-width:1536px) and (device-height:2048px) and (-webkit-min-device-pixel-ratio:1.331) and (-webkit-max-device-pixel-ratio:1.332) and (orientation:landscape) { } @media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) { } @media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait) { } @media only screen and (min-device-width:800px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:landscape) { } @media only screen and (min-device-width:1200px) and (max-device-width:1600px) and (-webkit-min-device-pixel-ratio:1.5) { } @media only screen and (min-device-width:1200px) and (max-device-width:1600px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait) { } @media only screen and (min-device-width:1200px) and (max-device-width:1600px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:landscape) { } @media screen and (min-device-width:1200px) and (max-device-width:1600px) and (-webkit-min-device-pixel-ratio:1) { } @media screen and (min-device-width:1200px) and (max-device-width:1600px) and (-webkit-min-device-pixel-ratio:2) and (min-resolution:192dpi) { }