Premium Car Care Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LUXE SHINE | Premium Car Care</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">

</head>
<body>
    
    <header>
        <nav class="navbar">
            <a href="#" class="logo">LUXE<span>SHINE</span></a>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </nav>

<div class="hero-content">
            <h1 class="hero-title">Premium Car Care</h1>
            <p class="hero-subtitle">Experience the ultimate in automotive detailing with our state-of-the-art facilities and eco-friendly products</p>
            <div class="hero-buttons">
                <a href="#services" class="btn">Our Services</a>
                <a href="#contact" class="btn btn-outline">Contact Us</a>
            </div>
        </div>
    </header>

<section id="about" class="section">
        <h2 class="section-title">About Luxe Shine</h2>
        <div class="about-content">
            <div class="about-text">
                <h3>Revolutionizing Car Care Since 2010</h3>
                <p>Founded in 2010, Luxe Shine has grown from a small local car wash to a premier automotive detailing center with multiple locations across the country. Our mission is to provide exceptional car care services using the latest technology and eco-friendly products.</p>
                <p>We believe that your vehicle deserves the best care possible, which is why we've invested in state-of-the-art equipment and trained our team to deliver unparalleled results. Every service we offer is designed to protect your investment and keep your car looking its best.</p>
                <p>What sets us apart is our attention to detail and commitment to customer satisfaction. We don't just wash cars - we restore them to showroom condition using techniques developed through years of experience in the automotive industry.</p>
            </div>
            <div class="about-image">
                <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Car detailing">
            </div>
        </div>
    </section>

<section class="stats-section">
        <h2 class="section-title">By The Numbers</h2>
        <div class="stats-container">
            <div class="stat-card">
                <div class="stat-number">12+</div>
                <div class="stat-title">Years Experience</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">50K+</div>
                <div class="stat-title">Cars Serviced</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">100%</div>
                <div class="stat-title">Satisfaction</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">15+</div>
                <div class="stat-title">Awards Won</div>
            </div>
        </div>
    </section>

<section id="team" class="section team-section">
        <h2 class="section-title">Meet Our Team</h2>
        <div class="team-container">
            <div class="team-card">
                <div class="team-image">
                    <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="Team Member">
                </div>
                <div class="team-info">
                    <h3 class="team-name">Michael Johnson</h3>
                    <p class="team-position">Founder & CEO</p>
                    <div class="team-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>
            <div class="team-card">
                <div class="team-image">
                    <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Team Member">
                </div>
                <div class="team-info">
                    <h3 class="team-name">Sarah Williams</h3>
                    <p class="team-position">Operations Manager</p>
                    <div class="team-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>
            <div class="team-card">
                <div class="team-image">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Team Member">
                </div>
                <div class="team-info">
                    <h3 class="team-name">David Chen</h3>
                    <p class="team-position">Lead Detailer</p>
                    <div class="team-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>
            <div class="team-card">
                <div class="team-image">
                    <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="Team Member">
                </div>
                <div class="team-info">
                    <h3 class="team-name">Emily Rodriguez</h3>
                    <p class="team-position">Customer Service</p>
                    <div class="team-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>
        </div>
    </section>

<section id="services" class="section services-section">
        <h2 class="section-title">Our Services</h2>
        <div class="services-container">
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-car"></i>
                </div>
                <div class="service-content">
                    <h3 class="service-title">Signature Wash</h3>
                    <p class="service-description">Our premium wash includes hand washing, wheel cleaning, tire dressing, and a protective wax coating to keep your car shining.</p>
                    <div class="service-price">$49.99</div>
                </div>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-spa"></i>
                </div>
                <div class="service-content">
                    <h3 class="service-title">Full Detailing</h3>
                    <p class="service-description">Complete interior and exterior detailing that restores your vehicle to like-new condition, including paint correction and leather conditioning.</p>
                    <div class="service-price">$199.99</div>
                </div>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-gem"></i>
                </div>
                <div class="service-content">
                    <h3 class="service-title">Ceramic Coating</h3>
                    <p class="service-description">Advanced ceramic coating that provides long-lasting protection against UV rays, chemicals, and environmental contaminants.</p>
                    <div class="service-price">$499.99</div>
                </div>
            </div>
        </div>
    </section>

<section id="testimonials" class="section testimonials-section">
        <h2 class="section-title">What Our Clients Say</h2>
        <div class="testimonials-container">
            <div class="testimonial-slider">
                <div class="testimonial-track">
                    <div class="testimonial-slide">
                        <div class="testimonial-card">
                            <p class="testimonial-content">Luxe Shine transformed my 10-year-old car into something that looks brand new. The attention to detail is incredible, and the ceramic coating has kept it looking perfect for months now. Worth every penny!</p>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Client">
                                </div>
                                <div class="author-info">
                                    <h4>Robert Taylor</h4>
                                    <p>Regular Customer</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slide">
                        <div class="testimonial-card">
                            <p class="testimonial-content">As a car enthusiast with several vehicles, I've tried many detailing services. Luxe Shine is by far the best. Their team knows exactly how to treat different paint types and interiors. My Ferrari has never looked better!</p>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://images.unsplash.com/photo-1504593811423-6dd665756598?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Client">
                                </div>
                                <div class="author-info">
                                    <h4>Jennifer Adams</h4>
                                    <p>Car Collector</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slide">
                        <div class="testimonial-card">
                            <p class="testimonial-content">The convenience of their mobile detailing service saved me so much time. They came to my office and did an amazing job while I worked. The interior smells fresh and looks spotless. I'll definitely be using them monthly.</p>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Client">
                                </div>
                                <div class="author-info">
                                    <h4>Amanda Smith</h4>
                                    <p>Business Professional</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider-nav">
                    <div class="slider-dot active"></div>
                    <div class="slider-dot"></div>
                    <div class="slider-dot"></div>
                </div>
            </div>
        </div>
    </section>

<section class="section gallery-section">
        <h2 class="section-title">Our Work</h2>
        <div class="gallery-container">
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Car Detailing">
                <div class="gallery-overlay">
                    <div class="gallery-caption">
                        <h3>Paint Correction</h3>
                        <p>Before & After</p>
                    </div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Car Detailing">
                <div class="gallery-overlay">
                    <div class="gallery-caption">
                        <h3>Interior Detailing</h3>
                        <p>Leather Conditioning</p>
                    </div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Car Detailing">
                <div class="gallery-overlay">
                    <div class="gallery-caption">
                        <h3>Ceramic Coating</h3>
                        <p>Long-lasting Protection</p>
                    </div>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Car Detailing">
                <div class="gallery-overlay">
                    <div class="gallery-caption">
                        <h3>Engine Bay Cleaning</h3>
                        <p>Showroom Finish</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="cta-section">
        <div class="cta-content">
            <h2 class="cta-title">Ready to Transform Your Vehicle?</h2>
            <p class="cta-text">Book your appointment today and experience the Luxe Shine difference. Our team is ready to provide your car with the premium care it deserves.</p>
            <div class="cta-buttons">
                <a href="#" class="cta-btn">Book Now</a>
                <a href="#" class="cta-btn cta-btn-outline">Call Us</a>
            </div>
        </div>
    </section>

<footer id="contact">
        <div class="footer-container">
            <div class="footer-col">
                <h3>LUXE SHINE</h3>
                <p>Premium car care services that go beyond washing to deliver showroom-quality results for your vehicle.</p>
                <div class="social-links">
                    <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>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#team">Our Team</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Services</h3>
                <ul class="footer-links">
                    <li><a href="#">Signature Wash</a></li>
                    <li><a href="#">Full Detailing</a></li>
                    <li><a href="#">Ceramic Coating</a></li>
                    <li><a href="#">Paint Correction</a></li>
                    <li><a href="#">Interior Detailing</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Contact Us</h3>
                <div class="footer-contact">
                    <p><i class="fas fa-map-marker-alt"></i> 123 Auto Care Ave, Detailing City, DC 12345</p>
                    <p><i class="fas fa-phone"></i> (555) 123-4567</p>
                    <p><i class="fas fa-envelope"></i> info@luxeshine.com</p>
                    <p><i class="fas fa-clock"></i> Mon-Sat: 8:00 AM - 6:00 PM</p>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Luxe Shine Car Care. All Rights Reserved.</p>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF9C4;
            --dark: #1A1A1A;
            --light: #FFFFFF;
            --gray: #F5F5F5;
            --dark-gray: #333333;
            --glass: rgba(255, 255, 255, 0.15);
            --glass-border: rgba(255, 255, 255, 0.2);
            --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        }

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

body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--gray);
            color: var(--dark);
            overflow-x: hidden;
        }

/* Header Styles */
        header {
            position: relative;
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: var(--light);
        }

.navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: var(--glass);
            border-bottom: 1px solid var(--glass-border);
        }

.logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }

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

.nav-links {
            display: flex;
            gap: 30px;
        }

.nav-links a {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
        }

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

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

.nav-links a:hover::after {
            width: 100%;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--light);
            font-size: 24px;
            cursor: pointer;
        }

.hero-content {
            max-width: 800px;
            padding: 0 20px;
            transform: translateY(-50px);
        }

.hero-title {
            font-size: 4rem;
            margin-bottom: 20px;
            background: linear-gradient(to right, var(--primary), var(--light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s forwards 0.5s;
        }

.hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s forwards 0.8s;
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary);
            color: var(--dark);
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
            border: 2px solid var(--primary);
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s forwards 1.1s;
        }

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

.btn-outline {
            background-color: transparent;
            color: var(--primary);
            margin-left: 15px;
        }

.btn-outline:hover {
            background-color: var(--primary);
            color: var(--dark);
        }

/* About Section */
        .section {
            padding: 100px 5%;
            position: relative;
        }

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

.section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--primary);
            border-radius: 2px;
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 50px;
            margin-top: 50px;
        }

.about-text {
            flex: 1;
        }

.about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--dark);
        }

.about-text p {
            margin-bottom: 15px;
            line-height: 1.8;
            color: var(--dark-gray);
        }

.about-image {
            flex: 1;
            position: relative;
            height: 500px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

.about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

.about-image:hover img {
            transform: scale(1.05);
        }

.about-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
            z-index: 1;
        }

/* Stats Section */
        .stats-section {
            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80') no-repeat center center/cover;
            color: var(--light);
            text-align: center;
            padding: 100px 5%;
        }

.stats-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 50px;
        }

.stat-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            padding: 40px 30px;
            width: 220px;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: var(--shadow);
        }

.stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

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

.stat-title {
            font-size: 1.2rem;
            font-weight: 500;
        }

/* Team Section */
        .team-section {
            background-color: var(--light);
        }

.team-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 50px;
        }

.team-card {
            background-color: var(--light);
            border-radius: 15px;
            overflow: hidden;
            width: 280px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            opacity: 0;
            transform: translateY(50px);
        }

.team-card.visible {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.5s, transform 0.5s;
        }

.team-card:nth-child(1) { transition-delay: 0.1s; }
        .team-card:nth-child(2) { transition-delay: 0.2s; }
        .team-card:nth-child(3) { transition-delay: 0.3s; }
        .team-card:nth-child(4) { transition-delay: 0.4s; }

.team-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
        }

.team-image {
            height: 300px;
            overflow: hidden;
        }

.team-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

.team-card:hover .team-image img {
            transform: scale(1.1);
        }

.team-info {
            padding: 25px;
            text-align: center;
            position: relative;
        }

.team-info::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            background-color: var(--primary);
            border-radius: 50%;
            z-index: 0;
        }

.team-name {
            font-size: 1.3rem;
            margin-bottom: 5px;
            position: relative;
            z-index: 1;
            color: var(--light);
        }

.team-position {
            color: var(--primary-dark);
            font-weight: 600;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

.team-social {
            display: flex;
            justify-content: center;
            gap: 15px;
            position: relative;
            z-index: 1;
        }

.team-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
            background-color: var(--primary-light);
            border-radius: 50%;
            color: var(--dark);
            transition: all 0.3s;
        }

.team-social a:hover {
            background-color: var(--primary);
            color: var(--light);
        }

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

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

.service-card {
            background-color: var(--light);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            opacity: 0;
            transform: translateY(50px);
        }

.service-card.visible {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.5s, transform 0.5s;
        }

.service-card:nth-child(1) { transition-delay: 0.1s; }
        .service-card:nth-child(2) { transition-delay: 0.2s; }
        .service-card:nth-child(3) { transition-delay: 0.3s; }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }

.service-icon {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-light);
            color: var(--primary-dark);
            font-size: 4rem;
            position: relative;
            overflow: hidden;
        }

.service-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 215, 0, 0.3), transparent);
        }

.service-content {
            padding: 30px;
        }

.service-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--dark);
        }

.service-description {
            color: var(--dark-gray);
            line-height: 1.7;
            margin-bottom: 20px;
        }

.service-price {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary-dark);
        }

/* Testimonials Section */
        .testimonials-section {
            background-color: var(--light);
            position: relative;
            overflow: hidden;
        }

.testimonials-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1583&q=80') no-repeat center center/cover;
            opacity: 0.1;
            z-index: 0;
        }

.testimonials-container {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.testimonial-slider {
            margin-top: 50px;
            position: relative;
            overflow: hidden;
        }

.testimonial-track {
            display: flex;
            transition: transform 0.5s ease;
        }

.testimonial-slide {
            min-width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }

.testimonial-card {
            background-color: var(--light);
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            position: relative;
            border: 1px solid var(--glass-border);
        }

.testimonial-card::before {
            content: '\201C';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 5rem;
            color: var(--primary-light);
            font-family: serif;
            line-height: 1;
            z-index: 0;
        }

.testimonial-content {
            position: relative;
            z-index: 1;
            margin-bottom: 30px;
            font-style: italic;
            line-height: 1.8;
            color: var(--dark-gray);
        }

.testimonial-author {
            display: flex;
            align-items: center;
        }

.author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
        }

.author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.author-info h4 {
            font-size: 1.2rem;
            margin-bottom: 5px;
            color: var(--dark);
        }

.author-info p {
            color: var(--primary-dark);
            font-size: 0.9rem;
        }

.slider-nav {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 10px;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--primary-light);
            cursor: pointer;
            transition: all 0.3s;
        }

.slider-dot.active {
            background-color: var(--primary-dark);
            transform: scale(1.2);
        }

/* Gallery Section */
        .gallery-section {
            background-color: var(--gray);
        }

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

.gallery-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            height: 250px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }

.gallery-item:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

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

.gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
            display: flex;
            align-items: flex-end;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s;
        }

.gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

.gallery-caption {
            color: var(--light);
            transform: translateY(20px);
            transition: transform 0.3s;
        }

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

/* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            color: var(--light);
            text-align: center;
            padding: 100px 5%;
            position: relative;
            overflow: hidden;
        }

.cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
            transform: rotate(30deg);
            z-index: 0;
        }

.cta-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }

.cta-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

.cta-text {
            font-size: 1.1rem;
            margin-bottom: 40px;
            line-height: 1.8;
        }

.cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

.cta-btn {
            display: inline-block;
            padding: 15px 40px;
            background-color: var(--dark);
            color: var(--light);
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
            border: 2px solid var(--dark);
        }

.cta-btn:hover {
            background-color: transparent;
            color: var(--dark);
        }

.cta-btn-outline {
            background-color: transparent;
            color: var(--dark);
            border: 2px solid var(--dark);
        }

.cta-btn-outline:hover {
            background-color: var(--dark);
            color: var(--light);
        }

/* Footer */
        footer {
            background-color: var(--dark);
            color: var(--light);
            padding: 80px 5% 30px;
        }

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

.footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 25px;
            color: var(--primary);
            position: relative;
            padding-bottom: 10px;
        }

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

.footer-col p {
            margin-bottom: 15px;
            line-height: 1.7;
            color: #ccc;
        }

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

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

.footer-links a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
            display: block;
        }

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

.footer-contact p {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

.footer-contact i {
            color: var(--primary);
            margin-top: 5px;
        }

.social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

.social-links 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(--light);
            transition: all 0.3s;
        }

.social-links a:hover {
            background-color: var(--primary);
            color: var(--dark);
            transform: translateY(-5px);
        }

.footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #999;
            font-size: 0.9rem;
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            .hero-title {
                font-size: 3.5rem;
            }
        }

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

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

.about-image {
                width: 100%;
                height: 400px;
            }

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

@media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background-color: var(--dark);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 30px;
                transition: left 0.3s;
            }

.nav-links.active {
                left: 0;
            }

.mobile-menu-btn {
                display: block;
            }

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

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

.btn {
                padding: 10px 25px;
            }

.section {
                padding: 80px 5%;
            }

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

.stat-card {
                width: 160px;
                padding: 30px 20px;
            }

.stat-number {
                font-size: 2.5rem;
            }

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

.cta-buttons {
                flex-direction: column;
                align-items: center;
            }
        }

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

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

.stat-card {
                width: 120px;
                padding: 20px 15px;
            }

.stat-number {
                font-size: 2rem;
            }

.stat-title {
                font-size: 1rem;
            }

.testimonial-card {
                padding: 30px 20px;
            }

.cta-title {
                font-size: 1.8rem;
            }

.cta-text {
                font-size: 1rem;
            }
        }

JavaScript

// Mobile Menu Toggle
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const navLinks = document.querySelector('.nav-links');

mobileMenuBtn.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            mobileMenuBtn.innerHTML = navLinks.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Scroll Reveal Animation
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.team-card, .service-card');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                
                if (elementPosition < windowHeight - 100) {
                    element.classList.add('visible');
                }
            });
        };

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

// Testimonial Slider
        const track = document.querySelector('.testimonial-track');
        const slides = Array.from(document.querySelectorAll('.testimonial-slide'));
        const dots = Array.from(document.querySelectorAll('.slider-dot'));

let currentSlide = 0;
        const slideWidth = slides[0].getBoundingClientRect().width;

// Set slide positions
        const setSlidePosition = () => {
            slides.forEach((slide, index) => {
                slide.style.left = `${slideWidth * index}px`;
            });
        };

// Move to slide
        const moveToSlide = (index) => {
            track.style.transform = `translateX(-${slideWidth * index}px)`;
            currentSlide = index;
            
            // Update dots
            dots.forEach(dot => dot.classList.remove('active'));
            dots[currentSlide].classList.add('active');
        };

// Click on dot
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                moveToSlide(index);
            });
        });

// Auto slide
        let slideInterval = setInterval(() => {
            const nextSlide = (currentSlide + 1) % slides.length;
            moveToSlide(nextSlide);
        }, 5000);

// Pause on hover
        track.addEventListener('mouseenter', () => {
            clearInterval(slideInterval);
        });

track.addEventListener('mouseleave', () => {
            slideInterval = setInterval(() => {
                const nextSlide = (currentSlide + 1) % slides.length;
                moveToSlide(nextSlide);
            }, 5000);
        });

// Initialize
        setSlidePosition();
        moveToSlide(0);

Premium Car Care Template Preview

Download Options