Political Campaign Template HTML CSS Template Free Download

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John Smith for Governor | Leadership You Can Trust</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    
    <header class="header">
        <div class="container">
            <a href="#" class="logo">John<span>Smith</span></a>
            <nav class="navbar">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#issues">Issues</a>
                <a href="#endorsements">Endorsements</a>
                <a href="#events">Events</a>
                <a href="#gallery">Gallery</a>
                <a href="#volunteer">Volunteer</a>
                <a href="#contact">Contact</a>
            </nav>
            <div class="menu-btn">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </div>
            <a href="#donate" class="btn-donate">Donate</a>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">John Smith <span>for Governor</span></h1>
                <p class="hero-subtitle">Leadership • Integrity • Progress</p>
                <div class="hero-btns">
                    <a href="#volunteer" class="btn-primary">Join Our Team</a>
                    <a href="#donate" class="btn-secondary">Donate Now</a>
                </div>
                <div class="countdown">
                    <h3>Election Day Countdown</h3>
                    <div class="countdown-timer">
                        <div class="countdown-item">
                            <span class="days">00</span>
                            <span class="countdown-label">Days</span>
                        </div>
                        <div class="countdown-item">
                            <span class="hours">00</span>
                            <span class="countdown-label">Hours</span>
                        </div>
                        <div class="countdown-item">
                            <span class="minutes">00</span>
                            <span class="countdown-label">Minutes</span>
                        </div>
                        <div class="countdown-item">
                            <span class="seconds">00</span>
                            <span class="countdown-label">Seconds</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hero-image">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="John Smith" class="candidate-photo">
                <div class="flag-animation"></div>
                <div class="flag-animation delay-1"></div>
                <div class="flag-animation delay-2"></div>
            </div>
        </div>
        <div class="wave"></div>
    </section>

<section class="slogan-scroller">
        <div class="scroller-track">
            <div class="scroller-item">Better Schools • Stronger Economy • Safer Communities</div>
            <div class="scroller-item">Healthcare for All • Environmental Protection • Fiscal Responsibility</div>
            <div class="scroller-item">Better Schools • Stronger Economy • Safer Communities</div>
            <div class="scroller-item">Healthcare for All • Environmental Protection • Fiscal Responsibility</div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="about-image">
                <div class="patriotic-dots"></div>
                <div class="patriotic-dots"></div>
                <img src="https://images.unsplash.com/photo-1549060279-7e168fcee0c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Smith with family">
            </div>
            <div class="about-content">
                <h2 class="section-title">Meet <span>John Smith</span></h2>
                <p class="about-text">A lifelong resident of our great state, John Smith has dedicated his career to public service. As a former state senator and small business owner, John understands the challenges facing our communities and has the experience to deliver real solutions.</p>
                <div class="about-highlights">
                    <div class="highlight-item">
                        <i class="fas fa-graduation-cap"></i>
                        <p>Harvard Law Graduate</p>
                    </div>
                    <div class="highlight-item">
                        <i class="fas fa-briefcase"></i>
                        <p>Small Business Owner</p>
                    </div>
                    <div class="highlight-item">
                        <i class="fas fa-landmark"></i>
                        <p>State Senator (2010-2020)</p>
                    </div>
                    <div class="highlight-item">
                        <i class="fas fa-home"></i>
                        <p>Raised in Springfield</p>
                    </div>
                </div>
                <a href="#issues" class="btn-primary">View Platform</a>
            </div>
        </div>
    </section>

<section class="issues" id="issues">
        <div class="container">
            <h2 class="section-title">Key <span>Issues</span></h2>
            <p class="section-subtitle">John's comprehensive plan for our state's future</p>
            <div class="issues-grid">
                <div class="issue-card">
                    <div class="card-icon">
                        <i class="fas fa-school"></i>
                    </div>
                    <h3 class="card-title">Education Reform</h3>
                    <p class="card-text">Increase school funding, reduce class sizes, and provide universal pre-K to give every child the best start in life.</p>
                    <a href="#" class="card-link">Read Plan <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="issue-card">
                    <div class="card-icon">
                        <i class="fas fa-briefcase-medical"></i>
                    </div>
                    <h3 class="card-title">Healthcare Access</h3>
                    <p class="card-text">Expand Medicaid and lower prescription drug costs to ensure quality healthcare is affordable for all families.</p>
                    <a href="#" class="card-link">Read Plan <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="issue-card">
                    <div class="card-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="card-title">Economic Growth</h3>
                    <p class="card-text">Support small businesses, invest in infrastructure, and attract high-paying jobs to strengthen our economy.</p>
                    <a href="#" class="card-link">Read Plan <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="issue-card">
                    <div class="card-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="card-title">Public Safety</h3>
                    <p class="card-text">Fund community policing, mental health services, and violence prevention programs to keep neighborhoods safe.</p>
                    <a href="#" class="card-link">Read Plan <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="issue-card">
                    <div class="card-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3 class="card-title">Environment</h3>
                    <p class="card-text">Transition to clean energy, protect natural resources, and combat climate change for a sustainable future.</p>
                    <a href="#" class="card-link">Read Plan <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="issue-card">
                    <div class="card-icon">
                        <i class="fas fa-balance-scale"></i>
                    </div>
                    <h3 class="card-title">Criminal Justice</h3>
                    <p class="card-text">Reform sentencing laws, expand rehabilitation programs, and address systemic inequities in our justice system.</p>
                    <a href="#" class="card-link">Read Plan <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

<section class="endorsements" id="endorsements">
        <div class="container">
            <h2 class="section-title">Endorsements</h2>
            <p class="section-subtitle">Trusted leaders supporting John's campaign</p>
            <div class="endorsements-slider">
                <div class="slider-container">
                    <div class="slider-track">
                        <div class="slider-slide">
                            <div class="endorsement-card">
                                <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Sarah Johnson">
                                <h3 class="endorser-name">Sarah Johnson</h3>
                                <p class="endorser-title">Mayor of Springfield</p>
                                <p class="endorsement-text">"John Smith has the vision and experience to lead our state forward. I'm proud to endorse his campaign for governor."</p>
                            </div>
                        </div>
                        <div class="slider-slide">
                            <div class="endorsement-card">
                                <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Michael Chen">
                                <h3 class="endorser-name">Michael Chen</h3>
                                <p class="endorser-title">President, State Teachers Union</p>
                                <p class="endorsement-text">"John's education plan is exactly what our schools need. He'll be a champion for students and teachers."</p>
                            </div>
                        </div>
                        <div class="slider-slide">
                            <div class="endorsement-card">
                                <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Robert Williams">
                                <h3 class="endorser-name">Robert Williams</h3>
                                <p class="endorser-title">CEO, GreenTech Solutions</p>
                                <p class="endorsement-text">"John understands how to grow our economy while protecting our environment. He has my full support."</p>
                            </div>
                        </div>
                        <div class="slider-slide">
                            <div class="endorsement-card">
                                <img src="https://images.unsplash.com/photo-1590086783191-a0694c7d1e6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Maria Garcia">
                                <h3 class="endorser-name">Maria Garcia</h3>
                                <p class="endorser-title">Director, HealthCare Advocates</p>
                                <p class="endorsement-text">"John's healthcare plan will save lives. He's the leader we need to ensure access for all families."</p>
                            </div>
                        </div>
                        <div class="slider-slide">
                            <div class="endorsement-card">
                                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="David Thompson">
                                <h3 class="endorser-name">David Thompson</h3>
                                <p class="endorser-title">Former Governor</p>
                                <p class="endorsement-text">"In my 40 years of public service, I've rarely seen a candidate as qualified and dedicated as John Smith."</p>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="slider-btn prev-btn"><i class="fas fa-chevron-left"></i></button>
                <button class="slider-btn next-btn"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>
    </section>

<section class="events" id="events">
        <div class="container">
            <h2 class="section-title">Upcoming <span>Events</span></h2>
            <p class="section-subtitle">Join John on the campaign trail</p>
            <div class="events-timeline">
                <div class="timeline-item">
                    <div class="timeline-date">
                        <span class="date-day">15</span>
                        <span class="date-month">OCT</span>
                    </div>
                    <div class="timeline-content">
                        <h3 class="event-title">Town Hall Meeting</h3>
                        <p class="event-location"><i class="fas fa-map-marker-alt"></i> Springfield Community Center</p>
                        <p class="event-time"><i class="fas fa-clock"></i> 6:00 PM - 8:00 PM</p>
                        <p class="event-description">Join John for a discussion about education reform and his plans to improve our schools.</p>
                        <a href="#" class="btn-secondary">RSVP</a>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">
                        <span class="date-day">22</span>
                        <span class="date-month">OCT</span>
                    </div>
                    <div class="timeline-content">
                        <h3 class="event-title">Small Business Roundtable</h3>
                        <p class="event-location"><i class="fas fa-map-marker-alt"></i> Downtown Business Alliance</p>
                        <p class="event-time"><i class="fas fa-clock"></i> 10:00 AM - 12:00 PM</p>
                        <p class="event-description">Discussion about economic policies to support local businesses and create jobs.</p>
                        <a href="#" class="btn-secondary">RSVP</a>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">
                        <span class="date-day">28</span>
                        <span class="date-month">OCT</span>
                    </div>
                    <div class="timeline-content">
                        <h3 class="event-title">Environmental Policy Announcement</h3>
                        <p class="event-location"><i class="fas fa-map-marker-alt"></i> Riverside Park</p>
                        <p class="event-time"><i class="fas fa-clock"></i> 3:00 PM - 5:00 PM</p>
                        <p class="event-description">John will unveil his comprehensive plan to address climate change and protect our natural resources.</p>
                        <a href="#" class="btn-secondary">RSVP</a>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">
                        <span class="date-day">05</span>
                        <span class="date-month">NOV</span>
                    </div>
                    <div class="timeline-content">
                        <h3 class="event-title">Get Out the Vote Rally</h3>
                        <p class="event-location"><i class="fas fa-map-marker-alt"></i> State Capitol Grounds</p>
                        <p class="event-time"><i class="fas fa-clock"></i> 4:00 PM - 7:00 PM</p>
                        <p class="event-description">Final rally before election day with special guests and live music.</p>
                        <a href="#" class="btn-secondary">RSVP</a>
                    </div>
                </div>
            </div>
            <div class="events-cta">
                <a href="#" class="btn-primary">View All Events</a>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <div class="container">
            <h2 class="section-title">Campaign <span>Gallery</span></h2>
            <p class="section-subtitle">Moments from the campaign trail</p>
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Campaign Rally">
                    <div class="gallery-overlay">
                        <h3>Campaign Rally</h3>
                        <p>Springfield, October 2023</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1551524559-8af4e6624178?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80" alt="Meeting Voters">
                    <div class="gallery-overlay">
                        <h3>Meeting Voters</h3>
                        <p>Farmers Market, September 2023</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Policy Discussion">
                    <div class="gallery-overlay">
                        <h3>Policy Discussion</h3>
                        <p>Education Roundtable, August 2023</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1521791055366-0d553872125f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Community Service">
                    <div class="gallery-overlay">
                        <h3>Community Service</h3>
                        <p>Food Bank Volunteer Day, July 2023</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Debate Performance">
                    <div class="gallery-overlay">
                        <h3>Debate Performance</h3>
                        <p>Gubernatorial Debate, June 2023</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Family on Trail">
                    <div class="gallery-overlay">
                        <h3>Family on Trail</h3>
                        <p>Campaign Kickoff, May 2023</p>
                    </div>
                </div>
            </div>
            <div class="gallery-cta">
                <a href="#" class="btn-primary">View More Photos</a>
            </div>
        </div>
    </section>

<section class="volunteer" id="volunteer">
        <div class="container">
            <div class="volunteer-content">
                <h2 class="section-title">Join <span>Our Team</span></h2>
                <p class="section-subtitle">Become a volunteer and help make a difference</p>
                <p class="volunteer-text">Our campaign is powered by volunteers like you. Whether you can make phone calls, knock on doors, or help at events, your time and energy will help us win this election.</p>
                <div class="volunteer-stats">
                    <div class="stat-item">
                        <h3 class="stat-number" data-count="2500">0</h3>
                        <p class="stat-label">Volunteers</p>
                    </div>
                    <div class="stat-item">
                        <h3 class="stat-number" data-count="150000">0</h3>
                        <p class="stat-label">Doors Knocked</p>
                    </div>
                    <div class="stat-item">
                        <h3 class="stat-number" data-count="42">0</h3>
                        <p class="stat-label">Cities Visited</p>
                    </div>
                </div>
            </div>
            <div class="volunteer-form">
                <form>
                    <div class="form-group">
                        <input type="text" placeholder="Full Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="Email Address" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" placeholder="Phone Number" required>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="Zip Code" required>
                    </div>
                    <div class="form-group">
                        <select required>
                            <option value="" disabled selected>How would you like to help?</option>
                            <option value="canvassing">Door-to-Door Canvassing</option>
                            <option value="phonebank">Phone Banking</option>
                            <option value="events">Event Staffing</option>
                            <option value="data">Data Entry</option>
                            <option value="social">Social Media</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <button type="submit" class="btn-primary">Sign Up Now</button>
                </form>
            </div>
        </div>
    </section>

<section class="donate" id="donate">
        <div class="container">
            <div class="donate-card">
                <h2 class="section-title">Support <span>Our Campaign</span></h2>
                <p class="section-subtitle">Every dollar helps us reach more voters</p>
                <div class="donation-options">
                    <div class="donation-amount" data-amount="25">$25</div>
                    <div class="donation-amount" data-amount="50">$50</div>
                    <div class="donation-amount" data-amount="100">$100</div>
                    <div class="donation-amount" data-amount="250">$250</div>
                    <div class="donation-amount custom">
                        <span>$</span>
                        <input type="number" placeholder="Other">
                    </div>
                </div>
                <form class="donation-form">
                    <div class="form-row">
                        <div class="form-group">
                            <input type="text" placeholder="First Name" required>
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="Last Name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="Email Address" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" placeholder="Phone Number">
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="Zip Code" required>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="Employer (Required for donations > $100)">
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="Occupation (Required for donations > $100)">
                    </div>
                    <div class="form-checkbox">
                        <input type="checkbox" id="recurring">
                        <label for="recurring">Make this a monthly recurring donation</label>
                    </div>
                    <button type="submit" class="btn-primary">Donate Now</button>
                </form>
                <p class="legal-text">Contributions are not tax deductible. Corporate contributions are prohibited. Must be a U.S. citizen or permanent resident to contribute.</p>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="contact-content">
                <h2 class="section-title">Contact <span>Us</span></h2>
                <p class="section-subtitle">We'd love to hear from you</p>
                <form class="contact-form">
                    <div class="form-group">
                        <input type="text" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="Your Email" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" placeholder="Your Phone">
                    </div>
                    <div class="form-group">
                        <select>
                            <option value="" disabled selected>Subject</option>
                            <option value="volunteer">Volunteering</option>
                            <option value="donation">Donation Question</option>
                            <option value="event">Event Information</option>
                            <option value="press">Press Inquiry</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <textarea placeholder="Your Message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn-primary">Send Message</button>
                </form>
            </div>
            <div class="contact-info">
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="info-content">
                        <h3>Email</h3>
                        <p>info@johnsmithforgovernor.com</p>
                    </div>
                </div>
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <div class="info-content">
                        <h3>Phone</h3>
                        <p>(555) 123-4567</p>
                    </div>
                </div>
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="info-content">
                        <h3>Headquarters</h3>
                        <p>123 Main Street, Suite 100<br>Springfield, ST 12345</p>
                    </div>
                </div>
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="info-content">
                        <h3>Office Hours</h3>
                        <p>Monday-Friday: 9AM - 6PM<br>Saturday: 10AM - 4PM<br>Sunday: Closed</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3 class="footer-title">John<span>Smith</span></h3>
                    <p class="footer-text">Paid for by Friends of John Smith. Not authorized by any candidate or candidate's committee.</p>
                    <div class="footer-social">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3 class="footer-title">Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About John</a></li>
                        <li><a href="#issues">Issues</a></li>
                        <li><a href="#events">Events</a></li>
                        <li><a href="#volunteer">Volunteer</a></li>
                        <li><a href="#donate">Donate</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3 class="footer-title">Resources</h3>
                    <ul class="footer-links">
                        <li><a href="#">Voter Registration</a></li>
                        <li><a href="#">Polling Locations</a></li>
                        <li><a href="#">Election Dates</a></li>
                        <li><a href="#">Campaign Blog</a></li>
                        <li><a href="#">Press Releases</a></li>
                        <li><a href="#">Merchandise</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3 class="footer-title">Newsletter</h3>
                    <p class="footer-text">Stay updated with campaign news and events.</p>
                    <form class="newsletter-form">
                        <input type="email" placeholder="Your Email" required>
                        <button type="submit"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p class="copyright">&copy; 2023 Friends of John Smith. All Rights Reserved.</p>
                <div class="footer-legal">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Service</a>
                    <a href="#">Disclosures</a>
                </div>
            </div>
        </div>
    </footer>

CSS

/* Base Styles */
:root {
    --primary-color: #E63946;
    --secondary-color: #1D3557;
    --accent-color: #457B9D;
    --light-accent: #A8DADC;
    --light-color: #F1FAEE;
    --dark-color: #0D1B2A;
    --text-color: #333;
    --text-light: #777;
    --white: #fff;
    --black: #000;
    --transition: all 0.3s ease;
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    padding: 80px 0;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    color: var(--secondary-color);
}

.section-title span {
    color: var(--primary-color);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-primary {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid var(--primary-color);
    cursor: pointer;
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: var(--primary-color);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid var(--primary-color);
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.btn-donate {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--white);
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid var(--accent-color);
    cursor: pointer;
    margin-left: 30px;
}

.btn-donate:hover {
    background-color: transparent;
    color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 1000;
    transition: var(--transition);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header.scrolled {
    padding: 15px 0;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--secondary-color);
    text-decoration: none;
    font-family: 'Playfair Display', serif;
}

.logo span {
    color: var(--primary-color);
}

.navbar {
    display: flex;
    align-items: center;
}

.navbar a {
    color: var(--secondary-color);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    margin-left: 30px;
    transition: var(--transition);
    position: relative;
}

.navbar a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.navbar a:hover::after {
    width: 100%;
}

.navbar a:hover {
    color: var(--primary-color);
}

.menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1001;
}

.menu-btn .bar {
    width: 100%;
    height: 3px;
    background-color: var(--secondary-color);
    transition: var(--transition);
}

.menu-btn.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-btn.active .bar:nth-child(2) {
    opacity: 0;
}

.menu-btn.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    background: linear-gradient(135deg, var(--secondary-color), var(--dark-color));
    color: var(--white);
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 80px;
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-title span {
    display: block;
    font-size: 2.5rem;
    color: var(--light-accent);
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
    letter-spacing: 1px;
}

.hero-btns {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.countdown {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    max-width: 450px;
}

.countdown h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.countdown-timer {
    display: flex;
    justify-content: space-between;
}

.countdown-item {
    text-align: center;
    flex: 1;
}

.countdown-item span {
    display: block;
}

.countdown-item .days,
.countdown-item .hours,
.countdown-item .minutes,
.countdown-item .seconds {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
}

.countdown-item .countdown-label {
    font-size: 0.8rem;
    opacity: 0.8;
}

.hero-image {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.candidate-photo {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.flag-animation {
    position: absolute;
    width: 150px;
    height: 100px;
    background-color: var(--primary-color);
    opacity: 0.7;
    animation: wave 3s ease-in-out infinite;
    z-index: 1;
}

.flag-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background-color: var(--white);
}

.flag-animation.delay-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0.5s;
}

.flag-animation.delay-2 {
    top: -10%;
    right: 15%;
    animation-delay: 1s;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23ffffff" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23ffffff" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%23ffffff"/></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Slogan Scroller */
.slogan-scroller {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 20px 0;
    overflow: hidden;
    position: relative;
}

.scroller-track {
    display: flex;
    gap: 50px;
    animation: scroll 20s linear infinite;
    white-space: nowrap;
}

.scroller-item {
    font-size: 1.5rem;
    font-weight: 600;
    flex-shrink: 0;
    padding: 0 20px;
}

/* About Section */
.about {
    position: relative;
    overflow: hidden;
    background-color: var(--light-color);
}

.about .container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-image {
    flex: 1;
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow);
    z-index: 2;
    position: relative;
}

.patriotic-dots {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--primary-color);
    opacity: 0.1;
    z-index: 1;
}

.patriotic-dots:nth-child(1) {
    top: -20px;
    left: -20px;
    animation: pulse 8s ease-in-out infinite;
}

.patriotic-dots:nth-child(2) {
    bottom: -30px;
    right: -30px;
    background-color: var(--secondary-color);
    animation: pulse 10s ease-in-out infinite reverse;
}

.about-content {
    flex: 1;
}

.about-text {
    margin-bottom: 30px;
    color: var(--text-light);
    font-size: 1.1rem;
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--white);
    padding: 15px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.highlight-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.highlight-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.highlight-item p {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Issues Section */
.issues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.issue-card {
    background-color: var(--white);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.issue-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    z-index: -1;
    transition: var(--transition);
}

.issue-card:hover::before {
    opacity: 1;
}

.issue-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    color: var(--white);
}

.issue-card:hover .card-icon {
    background-color: var(--white);
    color: var(--primary-color);
}

.issue-card:hover .card-text,
.issue-card:hover .card-title {
    color: var(--white);
}

.issue-card:hover .card-link {
    color: var(--white);
}

.card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background-color: rgba(230, 57, 70, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
    transition: var(--transition);
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
    transition: var(--transition);
}

.card-text {
    color: var(--text-light);
    margin-bottom: 20px;
    transition: var(--transition);
}

.card-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.card-link i {
    margin-left: 5px;
    transition: var(--transition);
}

.card-link:hover i {
    transform: translateX(5px);
}

/* Endorsements Section */
.endorsements {
    background-color: var(--light-color);
}

.endorsements-slider {
    position: relative;
    margin-top: 50px;
}

.slider-container {
    overflow: hidden;
    position: relative;
}

.slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease;
}

.slider-slide {
    flex: 0 0 calc(33.333% - 20px);
    min-width: 0;
}

.endorsement-card {
    background-color: var(--white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.endorsement-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.endorsement-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 5px solid var(--light-accent);
}

.endorser-name {
    font-size: 1.3rem;
    margin-bottom: 5px;
    color: var(--secondary-color);
}

.endorser-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.endorsement-text {
    font-style: italic;
    color: var(--text-light);
    position: relative;
    flex: 1;
}

.endorsement-text::before {
    content: '"';
    font-size: 3rem;
    color: rgba(230, 57, 70, 0.1);
    position: absolute;
    top: -20px;
    left: -10px;
    line-height: 1;
    z-index: -1;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--primary-color);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.prev-btn {
    left: -25px;
}

.next-btn {
    right: -25px;
}

/* Events Section */
.events-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.events-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    height: 100%;
    width: 2px;
    background-color: var(--primary-color);
    opacity: 0.3;
}

.timeline-item {
    position: relative;
    padding: 30px 0 30px 80px;
}

.timeline-date {
    position: absolute;
    left: 0;
    top: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.date-day {
    font-size: 1.5rem;
    line-height: 1;
}

.date-month {
    font-size: 0.8rem;
    text-transform: uppercase;
}

.timeline-content {
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.event-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.event-location,
.event-time {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.event-description {
    margin: 15px 0;
    color: var(--text-color);
}

.events-cta {
    text-align: center;
    margin-top: 50px;
}

/* Gallery Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.gallery-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 250px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--white);
    transform: translateY(100%);
    transition: var(--transition);
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay h3 {
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.gallery-overlay p {
    font-size: 0.9rem;
    opacity: 0.8;
}

.gallery-cta {
    text-align: center;
    margin-top: 50px;
}

/* Volunteer Section */
.volunteer .container {
    display: flex;
    gap: 50px;
    align-items: center;
}

.volunteer-content {
    flex: 1;
}

.volunteer-text {
    margin-bottom: 30px;
    color: var(--text-light);
    font-size: 1.1rem;
}

.volunteer-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

.volunteer-form {
    flex: 1;
    background-color: var(--white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: var(--shadow);
}

.volunteer-form .form-group {
    margin-bottom: 20px;
}

.volunteer-form input,
.volunteer-form select {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    transition: var(--transition);
}

.volunteer-form input:focus,
.volunteer-form select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Donate Section */
.donate {
    background-color: var(--light-color);
}

.donate-card {
    background-color: var(--white);
    padding: 50px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.donation-options {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.donation-amount {
    padding: 15px 25px;
    background-color: var(--light-color);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.donation-amount:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.donation-amount.custom {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px 20px;
    background-color: var(--white);
    border: 2px solid var(--light-color);
}

.donation-amount.custom input {
    border: none;
    width: 60px;
    font-weight: 600;
    text-align: center;
}

.donation-amount.custom input:focus {
    outline: none;
}

.donation-form {
    text-align: left;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

.donation-form .form-group {
    margin-bottom: 20px;
}

.donation-form input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    transition: var(--transition);
}

.donation-form input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.form-checkbox input {
    width: auto;
}

.legal-text {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 20px;
}

/* Contact Section */
.contact .container {
    display: flex;
    gap: 50px;
}

.contact-content {
    flex: 1;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form .form-group {
    position: relative;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    transition: var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-info {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-card {
    background-color: var(--white);
    padding: 25px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.info-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(230, 57, 70, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.info-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.info-content p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Footer */
.footer {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 80px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.footer-col {
    padding: 0 15px;
}

.footer-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.footer-title span {
    color: var(--primary-color);
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-text {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white);
    transition: var(--transition);
}

.footer-social a:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.newsletter-form {
    display: flex;
    margin-top: 20px;
}

.newsletter-form input {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 50px 0 0 50px;
    font-size: 0.9rem;
    outline: none;
}

.newsletter-form button {
    padding: 0 20px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 0 50px 50px 0;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form button:hover {
    background-color: var(--accent-color);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    text-align: center;
}

.copyright {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.footer-legal {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.8rem;
    transition: var(--transition);
}

.footer-legal a:hover {
    color: var(--primary-color);
}

/* Animations */
@keyframes wave {
    0%, 100% {
        transform: translateX(0) rotate(-5deg);
    }
    50% {
        transform: translateX(10px) rotate(5deg);
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
    }

.hero-content {
        margin-bottom: 50px;
    }

.hero-btns {
        justify-content: center;
    }

.about .container {
        flex-direction: column;
    }

.volunteer .container {
        flex-direction: column;
    }

.contact .container {
        flex-direction: column;
    }

.slider-slide {
        flex: 0 0 calc(50% - 15px);
    }

.events-timeline::before {
        left: 30px;
    }

.timeline-item {
        padding-left: 60px;
    }

.timeline-date {
        width: 50px;
        height: 50px;
    }

.date-day {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .menu-btn {
        display: flex;
    }

.navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

.navbar.active {
        right: 0;
    }

.navbar a {
        margin: 15px 0;
        color: var(--text-color);
    }

.btn-donate {
        margin-left: 0;
        margin-top: 20px;
    }

.hero-title {
        font-size: 2.5rem;
    }

.hero-title span {
        font-size: 2rem;
    }

.section-title {
        font-size: 2rem;
    }

.about-highlights {
        grid-template-columns: 1fr;
    }

.slider-slide {
        flex: 0 0 100%;
    }

.prev-btn {
        left: 10px;
    }

.next-btn {
        right: 10px;
    }

.form-row {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }

.hero-title span {
        font-size: 1.5rem;
    }

.hero-subtitle {
        font-size: 1rem;
    }

.hero-btns {
        flex-direction: column;
        gap: 15px;
    }

.btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }

.countdown-timer {
        flex-wrap: wrap;
        justify-content: center;
    }

.countdown-item {
        flex: 0 0 40%;
        margin-bottom: 15px;
    }

.scroller-item {
        font-size: 1.1rem;
    }
}

JavaScript

Political Campaign Template Preview

Download Options