Water Supply 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>AquaPure - Premium Water Solutions</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">
</head>
<body>
    
    <header class="header">
        <div class="container">
            <a href="#" class="logo">Aqua<span>Pure</span></a>
            <nav class="navbar">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#services">Services</a>
                <a href="#products">Products</a>
                <a href="#testimonials">Testimonials</a>
                <a href="#faq">FAQ</a>
                <a href="#contact">Contact</a>
            </nav>
            <div class="menu-btn">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">Pure Water for a <span>Healthier Life</span></h1>
                <p class="hero-subtitle">Delivering premium quality water directly to your home or business</p>
                <div class="hero-btns">
                    <a href="#contact" class="btn-primary">Order Now</a>
                    <a href="#services" class="btn-secondary">Learn More</a>
                </div>
            </div>
            <div class="hero-image">
                <img src="https://images.unsplash.com/photo-1545173168-9f1947eebb7f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fresh water" class="water-bottle">
                <div class="water-drop"></div>
                <div class="water-drop"></div>
                <div class="water-drop"></div>
            </div>
        </div>
        <div class="wave"></div>
    </section>

<section class="brands">
        <div class="container">
            <h2 class="section-title">Trusted By</h2>
            <div class="brands-scroller">
                <div class="brands-track">
                    <div class="brand-item">
                        <img src="https://via.placeholder.com/150x60?text=Hotel+Chain" alt="Hotel Chain">
                    </div>
                    <div class="brand-item">
                        <img src="https://via.placeholder.com/150x60?text=Restaurant" alt="Restaurant">
                    </div>
                    <div class="brand-item">
                        <img src="https://via.placeholder.com/150x60?text=Office+Park" alt="Office Park">
                    </div>
                    <div class="brand-item">
                        <img src="https://via.placeholder.com/150x60?text=School" alt="School">
                    </div>
                    <div class="brand-item">
                        <img src="https://via.placeholder.com/150x60?text=Gym" alt="Gym">
                    </div>
                    <div class="brand-item">
                        <img src="https://via.placeholder.com/150x60?text=Hospital" alt="Hospital">
                    </div>
                    <div class="brand-item">
                        <img src="https://via.placeholder.com/150x60?text=Hotel+Chain" alt="Hotel Chain">
                    </div>
                    <div class="brand-item">
                        <img src="https://via.placeholder.com/150x60?text=Restaurant" alt="Restaurant">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="about-image">
                <div class="water-bubble"></div>
                <div class="water-bubble"></div>
                <div class="water-bubble"></div>
                <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Water purification">
            </div>
            <div class="about-content">
                <h2 class="section-title">About <span>AquaPure</span></h2>
                <p class="about-text">Founded in 2010, AquaPure has been at the forefront of delivering pristine, mineral-rich water to thousands of satisfied customers. Our state-of-the-art purification process ensures every drop meets the highest standards of purity and taste.</p>
                <div class="about-stats">
                    <div class="stat-item">
                        <h3 class="stat-number" data-count="10000">0</h3>
                        <p class="stat-label">Happy Customers</p>
                    </div>
                    <div class="stat-item">
                        <h3 class="stat-number" data-count="15">0</h3>
                        <p class="stat-label">Years Experience</p>
                    </div>
                    <div class="stat-item">
                        <h3 class="stat-number" data-count="99">0</h3>
                        <p class="stat-label">Purity %</p>
                    </div>
                </div>
                <a href="#services" class="btn-primary">Our Services</a>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <h2 class="section-title">Our <span>Services</span></h2>
            <p class="section-subtitle">Tailored water solutions for every need</p>
            <div class="services-grid">
                <div class="service-card">
                    <div class="card-icon">
                        <i class="fas fa-tint"></i>
                    </div>
                    <h3 class="card-title">Home Delivery</h3>
                    <p class="card-text">Regular scheduled deliveries of premium water to your doorstep.</p>
                    <a href="#" class="card-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card">
                    <div class="card-icon">
                        <i class="fas fa-building"></i>
                    </div>
                    <h3 class="card-title">Office Solutions</h3>
                    <p class="card-text">Customized water solutions for businesses of all sizes.</p>
                    <a href="#" class="card-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card">
                    <div class="card-icon">
                        <i class="fas fa-filter"></i>
                    </div>
                    <h3 class="card-title">Filtration Systems</h3>
                    <p class="card-text">Advanced water filtration for your home or business.</p>
                    <a href="#" class="card-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card">
                    <div class="card-icon">
                        <i class="fas fa-glass-whiskey"></i>
                    </div>
                    <h3 class="card-title">Event Supply</h3>
                    <p class="card-text">Reliable water supply for weddings, parties and corporate events.</p>
                    <a href="#" class="card-link">Learn More <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="container">
            <h2 class="section-title">Our <span>Products</span></h2>
            <p class="section-subtitle">Premium quality water in various sizes</p>
            <div class="products-slider">
                <div class="slider-container">
                    <div class="slider-track">
                        <div class="slider-slide">
                            <div class="product-card">
                                <div class="product-badge">Best Seller</div>
                                <img src="https://images.unsplash.com/photo-1561047029-3000c68339ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="5 Gallon Bottle">
                                <h3 class="product-title">5 Gallon Bottle</h3>
                                <p class="product-desc">Perfect for home and office water dispensers</p>
                                <div class="product-price">$7.99</div>
                                <button class="btn-primary">Add to Cart</button>
                            </div>
                        </div>
                        <div class="slider-slide">
                            <div class="product-card">
                                <img src="https://images.unsplash.com/photo-1604176354204-9268737828e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="1 Liter Bottle">
                                <h3 class="product-title">1 Liter Bottle (Pack of 12)</h3>
                                <p class="product-desc">Great for on-the-go hydration</p>
                                <div class="product-price">$12.99</div>
                                <button class="btn-primary">Add to Cart</button>
                            </div>
                        </div>
                        <div class="slider-slide">
                            <div class="product-card">
                                <div class="product-badge">New</div>
                                <img src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1015&q=80" alt="500ml Bottle">
                                <h3 class="product-title">500ml Bottle (Pack of 24)</h3>
                                <p class="product-desc">Compact size for convenience</p>
                                <div class="product-price">$15.99</div>
                                <button class="btn-primary">Add to Cart</button>
                            </div>
                        </div>
                        <div class="slider-slide">
                            <div class="product-card">
                                <img src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="3 Gallon Bottle">
                                <h3 class="product-title">3 Gallon Bottle</h3>
                                <p class="product-desc">Ideal for small families</p>
                                <div class="product-price">$5.99</div>
                                <button class="btn-primary">Add to Cart</button>
                            </div>
                        </div>
                        <div class="slider-slide">
                            <div class="product-card">
                                <img src="https://images.unsplash.com/photo-1627485937980-221c88ac04f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Water Dispenser">
                                <h3 class="product-title">Premium Water Dispenser</h3>
                                <p class="product-desc">Hot & cold water options</p>
                                <div class="product-price">$149.99</div>
                                <button class="btn-primary">Add to Cart</button>
                            </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="testimonials" id="testimonials">
        <div class="container">
            <h2 class="section-title">What Our <span>Customers Say</span></h2>
            <p class="section-subtitle">Trusted by thousands of happy customers</p>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <div class="testimonial-header">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="testimonial-avatar">
                        <div class="testimonial-info">
                            <h4 class="testimonial-name">Sarah J.</h4>
                            <div class="testimonial-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-text">"The water quality is exceptional and the delivery is always on time. I've been a customer for 5 years and never had a single issue."</p>
                </div>
                <div class="testimonial-card">
                    <div class="testimonial-header">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="testimonial-avatar">
                        <div class="testimonial-info">
                            <h4 class="testimonial-name">Michael T.</h4>
                            <div class="testimonial-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-text">"Our office switched to AquaPure last year and the difference in taste is noticeable. The customer service is excellent too."</p>
                </div>
                <div class="testimonial-card">
                    <div class="testimonial-header">
                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jennifer L." class="testimonial-avatar">
                        <div class="testimonial-info">
                            <h4 class="testimonial-name">Jennifer L.</h4>
                            <div class="testimonial-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="testimonial-text">"I love the convenience of home delivery. The bottles are always clean and the water tastes fresh and pure. Highly recommend!"</p>
                </div>
            </div>
        </div>
    </section>

<section class="faq" id="faq">
        <div class="container">
            <h2 class="section-title">Frequently Asked <span>Questions</span></h2>
            <p class="section-subtitle">Find answers to common questions about our services</p>
            <div class="faq-container">
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>How often will I receive my water delivery?</h3>
                        <i class="fas fa-plus"></i>
                    </div>
                    <div class="faq-answer">
                        <p>We offer flexible delivery schedules to meet your needs. Most customers choose weekly or bi-weekly deliveries, but we can adjust based on your consumption. You can change your delivery frequency at any time through your online account.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>What's the difference between your water and tap water?</h3>
                        <i class="fas fa-plus"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Our water goes through a rigorous 7-step purification process that includes reverse osmosis, UV treatment, and mineral enhancement. This removes impurities while adding back beneficial minerals for optimal taste and health benefits. We also conduct daily quality tests to ensure purity standards.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Do you recycle the water bottles?</h3>
                        <i class="fas fa-plus"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Yes! We have a bottle return program where we collect, sanitize, and reuse our 3-gallon and 5-gallon bottles up to 50 times before recycling them. For smaller bottles, we encourage customers to recycle them through local programs.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>Can I pause my deliveries when I'm away?</h3>
                        <i class="fas fa-plus"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Absolutely. You can easily pause deliveries through your online account or by calling our customer service. There's no penalty for temporary pauses, and we'll resume deliveries when you're ready.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <h3>What payment methods do you accept?</h3>
                        <i class="fas fa-plus"></i>
                    </div>
                    <div class="faq-answer">
                        <p>We accept all major credit cards, PayPal, and bank transfers. For business accounts, we also offer net-30 payment terms upon credit approval.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="contact-content">
                <h2 class="section-title">Get In <span>Touch</span></h2>
                <p class="section-subtitle">Ready to experience the AquaPure difference?</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>Select Service</option>
                            <option value="home">Home Delivery</option>
                            <option value="office">Office Solution</option>
                            <option value="filtration">Filtration System</option>
                            <option value="event">Event Supply</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <textarea placeholder="Your Message" rows="5"></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-phone"></i>
                    </div>
                    <div class="info-content">
                        <h3>Call Us</h3>
                        <p>+1 (800) 555-1234</p>
                    </div>
                </div>
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="info-content">
                        <h3>Email Us</h3>
                        <p>info@aquapure.com</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>Visit Us</h3>
                        <p>123 Pure Water Ave, Hydration City, HC 98765</p>
                    </div>
                </div>
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="info-content">
                        <h3>Opening Hours</h3>
                        <p>Mon-Fri: 8AM - 6PM<br>Sat: 9AM - 4PM<br>Sun: 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">AquaPure</h3>
                    <p class="footer-text">Delivering purity in every drop since 2010. Our mission is to provide access to clean, healthy water for everyone.</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-linkedin-in"></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 Us</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#products">Products</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3 class="footer-title">Services</h3>
                    <ul class="footer-links">
                        <li><a href="#">Home Delivery</a></li>
                        <li><a href="#">Office Solutions</a></li>
                        <li><a href="#">Filtration Systems</a></li>
                        <li><a href="#">Event Supply</a></li>
                        <li><a href="#">Water Testing</a></li>
                        <li><a href="#">Bottle Exchange</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3 class="footer-title">Newsletter</h3>
                    <p class="footer-text">Subscribe to get updates on special offers and water health tips.</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 AquaPure. All Rights Reserved.</p>
                <div class="footer-legal">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Service</a>
                    <a href="#">Sitemap</a>
                </div>
            </div>
        </div>
    </footer>

CSS

/* Base Styles */
:root {
    --primary-color: #00a8e8;
    --secondary-color: #007ea7;
    --dark-color: #003459;
    --light-color: #f5f5f5;
    --accent-color: #ff9e00;
    --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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
    overflow-x: hidden;
}

.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(--dark-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);
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 1000;
    transition: var(--transition);
}

.header.scrolled {
    background-color: var(--white);
    box-shadow: var(--shadow);
    padding: 15px 0;
}

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

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-color);
    text-decoration: none;
}

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

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

.header.scrolled .navbar a {
    color: var(--text-color);
}

.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(--white);
    transition: var(--transition);
}

.header.scrolled .menu-btn .bar {
    background-color: var(--dark-color);
}

.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(--dark-color), var(--secondary-color));
    color: var(--white);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.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 {
    color: var(--accent-color);
}

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

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

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

.water-bottle {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
    animation: float 6s ease-in-out infinite;
    z-index: 2;
}

.water-drop {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: drop 8s linear infinite;
    z-index: 1;
}

.water-drop:nth-child(1) {
    width: 20px;
    height: 20px;
    top: 50%;
    left: 20%;
    animation-delay: 0s;
}

.water-drop:nth-child(2) {
    width: 15px;
    height: 15px;
    top: 60%;
    left: 70%;
    animation-delay: 2s;
}

.water-drop:nth-child(3) {
    width: 25px;
    height: 25px;
    top: 30%;
    left: 50%;
    animation-delay: 4s;
}

.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;
}

/* Brands Section */
.brands {
    background-color: var(--light-color);
    padding: 60px 0;
}

.brands-scroller {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.brands-track {
    display: flex;
    gap: 50px;
    animation: scroll 30s linear infinite;
    width: calc(250px * 8);
}

.brand-item {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.brand-item img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition);
}

.brand-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* About Section */
.about {
    position: relative;
    overflow: hidden;
}

.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;
}

.water-bubble {
    position: absolute;
    background-color: rgba(0, 168, 232, 0.1);
    border-radius: 50%;
    z-index: 1;
}

.water-bubble:nth-child(1) {
    width: 100px;
    height: 100px;
    top: -20px;
    left: -20px;
    animation: bubble 8s ease-in-out infinite;
}

.water-bubble:nth-child(2) {
    width: 150px;
    height: 150px;
    bottom: -30px;
    right: -30px;
    animation: bubble 10s ease-in-out infinite reverse;
}

.water-bubble:nth-child(3) {
    width: 80px;
    height: 80px;
    top: 50%;
    right: -10px;
    animation: bubble 7s ease-in-out infinite 2s;
}

.about-content {
    flex: 1;
}

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

.about-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);
}

/* Services Section */
.services {
    background-color: var(--light-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.service-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;
}

.service-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);
}

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

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

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

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

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

.card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background-color: rgba(0, 168, 232, 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(--dark-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);
}

/* Products Section */
.products-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;
}

.product-card {
    background-color: var(--white);
    border-radius: 15px;
    padding: 25px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    text-align: center;
    position: relative;
}

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

.product-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--accent-color);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 20px;
    transition: var(--transition);
}

.product-card:hover img {
    transform: scale(1.05);
}

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

.product-desc {
    color: var(--text-light);
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.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;
}

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

.testimonial-card {
    background-color: var(--white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 3px solid var(--primary-color);
}

.testimonial-info {
    flex: 1;
}

.testimonial-name {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--dark-color);
}

.testimonial-rating {
    color: var(--accent-color);
    font-size: 0.9rem;
}

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

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

/* FAQ Section */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.faq-item:hover {
    box-shadow: var(--shadow-hover);
}

.faq-question {
    padding: 20px;
    background-color: var(--white);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.faq-question h3 {
    font-size: 1.1rem;
    color: var(--dark-color);
    margin: 0;
}

.faq-question i {
    color: var(--primary-color);
    transition: var(--transition);
}

.faq-question.active i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: var(--white);
}

.faq-answer p {
    padding: 0 20px 20px;
    margin: 0;
    color: var(--text-light);
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

/* Contact Section */
.contact {
    background-color: var(--light-color);
}

.contact .container {
    display: flex;
    gap: 50px;
}

.contact-content {
    flex: 1;
}

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

.form-group {
    position: relative;
}

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

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

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.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(0, 168, 232, 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(--dark-color);
}

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

/* Footer */
.footer {
    background-color: var(--dark-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;
}

.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 float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes drop {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(500px) scale(0.5);
        opacity: 0;
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-200px * 4));
    }
}

@keyframes bubble {
    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;
    }

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

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

@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);
    }

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

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

.about-stats {
        flex-direction: column;
        gap: 20px;
    }

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

.prev-btn {
        left: 10px;
    }

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

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

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

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

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

.brands-track {
        gap: 20px;
    }

.brand-item {
        flex: 0 0 150px;
    }
}

JavaScript

Water Supply Template Preview

Download Options