About CoolBreeze AC Services | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoolBreeze AC Services | About Us</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://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
   
</head>
<body>
    
    <header>
        <div class="logo">
            <i class="fas fa-snowflake"></i>
            <h1>CoolBreeze</h1>
        </div>
        <nav>
            <ul id="nav-menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html" class="active">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
            <div class="menu-toggle" id="menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content">
            <h2 class="velvet-caption"><span>About</span> CoolBreeze AC Services</h2>
            <p class="slide-reveal">We are the leading AC service provider with over 15 years of experience in delivering top-notch cooling solutions. Our team of certified technicians ensures your comfort is never compromised.</p>
            <div class="hero-btns">
                <a href="#services" class="btn btn-primary">Our Services</a>
                <a href="contact.html" class="btn btn-outline">Contact Us</a>
            </div>
        </div>
        <div class="hero-image">
            <img src="https://images.unsplash.com/photo-1600566752229-250ed79470c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AC Technician at work">
        </div>
    </section>

<section class="about" id="about">
        <div class="section-title">
            <h2>Our Story</h2>
            <p>Discover the journey that made us the most trusted AC service provider in the region</p>
        </div>
        <div class="about-content">
            <div class="about-image slide-reveal">
                <img src="https://images.unsplash.com/photo-1580913428735-bd3c269d6a82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our team working">
            </div>
            <div class="about-text">
                <h3>Cooling Solutions Since 2008</h3>
                <p>Founded in 2008, CoolBreeze started as a small family business with a passion for solving cooling problems. What began as a modest operation with just two technicians has now grown into a full-fledged AC service enterprise with over 50 employees serving thousands of satisfied customers.</p>
                <p>Our commitment to excellence and customer satisfaction has been the driving force behind our growth. We invest heavily in training our technicians and equipping them with the latest tools and technology to handle any AC-related issue.</p>
                <div class="about-features">
                    <div class="feature-card">
                        <i class="fas fa-award"></i>
                        <h4>Certified Experts</h4>
                        <p>All our technicians are certified and undergo regular training.</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-shield-alt"></i>
                        <h4>Quality Assurance</h4>
                        <p>We guarantee the quality of our work with a 1-year service warranty.</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-clock"></i>
                        <h4>24/7 Availability</h4>
                        <p>Emergency services available round the clock for urgent repairs.</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-hand-holding-heart"></i>
                        <h4>Customer First</h4>
                        <p>Your satisfaction is our top priority in every service we provide.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="team">
        <div class="section-title">
            <h2>Meet Our Team</h2>
            <p>The skilled professionals who keep your cooling systems running smoothly</p>
        </div>
        <div class="team-members">
            <div class="member-card">
                <div class="member-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="John Doe">
                </div>
                <div class="member-info">
                    <h3>John Doe</h3>
                    <p>Founder & CEO</p>
                    <p>With over 20 years in the HVAC industry, John leads our team with expertise and vision.</p>
                    <div class="member-social">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </div>
            </div>
            <div class="member-card">
                <div class="member-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="Sarah Johnson">
                </div>
                <div class="member-info">
                    <h3>Sarah Johnson</h3>
                    <p>Service Manager</p>
                    <p>Sarah ensures all our services meet the highest standards of quality and efficiency.</p>
                    <div class="member-social">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </div>
            </div>
            <div class="member-card">
                <div class="member-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="Mike Chen">
                </div>
                <div class="member-info">
                    <h3>Mike Chen</h3>
                    <p>Lead Technician</p>
                    <p>Mike's 15 years of hands-on experience makes him our go-to expert for complex repairs.</p>
                    <div class="member-social">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="section-title">
            <h2>Our Services</h2>
            <p>Comprehensive cooling solutions tailored to your specific needs</p>
        </div>
        <div class="services-container">
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-tools"></i>
                </div>
                <h3>AC Repair</h3>
                <p>Fast and reliable repair services for all major AC brands. Our technicians diagnose and fix issues quickly to restore your comfort.</p>
                <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-spinner"></i>
                </div>
                <h3>Maintenance</h3>
                <p>Regular maintenance plans to keep your AC running efficiently and extend its lifespan while reducing energy costs.</p>
                <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-boxes"></i>
                </div>
                <h3>Installation</h3>
                <p>Professional installation of new AC units with proper sizing and placement for optimal performance and efficiency.</p>
                <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-fan"></i>
                </div>
                <h3>Duct Cleaning</h3>
                <p>Thorough cleaning of air ducts to improve air quality and system efficiency, reducing allergens and dust circulation.</p>
                <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-thermometer-half"></i>
                </div>
                <h3>Thermostat Services</h3>
                <p>Installation and programming of smart thermostats for better temperature control and energy savings.</p>
                <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <h3>Emergency Services</h3>
                <p>24/7 emergency repair services for those times when your AC breaks down at the most inconvenient moments.</p>
                <a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="section-title">
            <h2>What Our Clients Say</h2>
            <p>Hear from our satisfied customers about their experiences with CoolBreeze</p>
        </div>
        <div class="testimonial-slider">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="testimonial-card">
                            <div class="testimonial-content">
                                <p>CoolBreeze saved us during a heatwave when our AC stopped working. Their technician arrived within an hour and had our system running perfectly in no time. The professionalism and expertise were outstanding!</p>
                            </div>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Emily Rodriguez">
                                </div>
                                <div class="author-info">
                                    <h4>Emily Rodriguez</h4>
                                    <p>Homeowner</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="testimonial-card">
                            <div class="testimonial-content">
                                <p>As a property manager, I rely on CoolBreeze for all our AC maintenance needs across multiple buildings. Their team is always punctual, thorough, and their maintenance plans have significantly reduced our repair costs.</p>
                            </div>
                            <div class="testimonial-author">
                                <div class="author-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="Michael Thompson">
                                </div>
                                <div class="author-info">
                                    <h4>Michael Thompson</h4>
                                    <p>Property Manager</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="testimonial-card">
                            <div class="testimonial-content">
                                <p>The installation team from CoolBreeze did an amazing job with our new central air system. They were clean, efficient, and took the time to explain how everything worked. Our home has never been more comfortable!</p>
                            </div>
                            <div class="testimonial-author">
                                <div class="author-image">
                                    <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80" alt="David and Sarah Wilson">
                                </div>
                                <div class="author-info">
                                    <h4>David & Sarah Wilson</h4>
                                    <p>Homeowners</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

<section class="stats">
        <div class="section-title">
            <h2>By The Numbers</h2>
            <p>Our achievements and milestones in serving the community</p>
        </div>
        <div class="stats-container">
            <div class="stat-card">
                <div class="stat-number">15+</div>
                <div class="stat-title">Years Experience</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">5000+</div>
                <div class="stat-title">Happy Clients</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">98%</div>
                <div class="stat-title">Satisfaction Rate</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">24/7</div>
                <div class="stat-title">Service Availability</div>
            </div>
        </div>
    </section>

<section class="cta">
        <div class="cta-container">
            <h2>Ready to <span>Experience</span> the CoolBreeze Difference?</h2>
            <p>Whether you need installation, repair, or maintenance services, our team of experts is ready to provide you with the best cooling solutions tailored to your needs.</p>
            <a href="contact.html" class="btn btn-primary">Get a Free Quote</a>
        </div>
    </section>

<footer>
        <div class="footer-content">
            <div class="footer-col">
                <h3>CoolBreeze</h3>
                <p>Providing top-quality AC services with professionalism and care since 2008. Your comfort is our priority.</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>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Services</h3>
                <ul class="footer-links">
                    <li><a href="#">AC Repair</a></li>
                    <li><a href="#">Maintenance</a></li>
                    <li><a href="#">Installation</a></li>
                    <li><a href="#">Duct Cleaning</a></li>
                    <li><a href="#">Emergency Services</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Contact Us</h3>
                <ul class="footer-links">
                    <li><i class="fas fa-map-marker-alt"></i> 123 Cool Street, City</li>
                    <li><i class="fas fa-phone"></i> (123) 456-7890</li>
                    <li><i class="fas fa-envelope"></i> info@coolbreeze.com</li>
                    <li><i class="fas fa-clock"></i> Mon-Sun: 24/7 Service</li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 CoolBreeze AC Services. All Rights Reserved.</p>
        </div>
    </footer>

CSS

:root {
            --primary-color: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF176;
            --dark-color: #121212;
            --light-color: #f8f9fa;
            --glass-color: rgba(255, 255, 255, 0.15);
            --transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
            color: var(--light-color);
            overflow-x: hidden;
        }

/* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            backdrop-filter: blur(10px);
            background-color: var(--glass-color);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

.logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

.logo i {
            font-size: 2rem;
            color: var(--primary-color);
        }

.logo h1 {
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(to right, var(--primary-color), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

nav ul {
            display: flex;
            gap: 30px;
            list-style: none;
        }

nav ul li a {
            color: var(--light-color);
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1rem;
            transition: var(--transition);
            position: relative;
        }

nav ul li a:hover {
            color: var(--primary-color);
        }

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

nav ul li a:hover::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--light-color);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 5%;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 70% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
            z-index: -1;
        }

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

.hero h2 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
            opacity: 0;
            transform: translateY(30px);
            animation: slideUp 1s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
        }

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

.hero p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            line-height: 1.6;
            opacity: 0;
            transform: translateY(30px);
            animation: slideUp 1s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
        }

.hero-btns {
            display: flex;
            gap: 20px;
            opacity: 0;
            transform: translateY(30px);
            animation: slideUp 1s cubic-bezier(0.65, 0, 0.35, 1) 0.9s forwards;
        }

.btn {
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
            display: inline-block;
        }

.btn-primary {
            background-color: var(--primary-color);
            color: var(--dark-color);
            box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
        }

.btn-outline {
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }

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

.hero-image {
            position: absolute;
            right: 5%;
            width: 45%;
            max-width: 700px;
            opacity: 0;
            animation: fadeIn 1.5s cubic-bezier(0.65, 0, 0.35, 1) 1.2s forwards;
        }

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

.section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

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

.section-title p {
            max-width: 700px;
            margin: 0 auto;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.1rem;
            line-height: 1.6;
        }

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

.about-image {
            flex: 1;
            position: relative;
            min-height: 400px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

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

.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(135deg, rgba(255, 215, 0, 0.2) 0%, transparent 100%);
            z-index: 1;
        }

.about-text {
            flex: 1;
        }

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

.about-text p {
            margin-bottom: 20px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
        }

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

.feature-card {
            background: var(--glass-color);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
        }

.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            border-color: rgba(255, 215, 0, 0.3);
        }

.feature-card i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

.feature-card h4 {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

.feature-card p {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

/* Team Section */
        .team {
            padding: 100px 5%;
            background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(255, 215, 0, 0.05) 100%);
        }

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

.member-card {
            background: var(--glass-color);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: relative;
        }

.member-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 215, 0, 0.3);
        }

.member-image {
            height: 350px;
            overflow: hidden;
        }

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

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

.member-info {
            padding: 25px;
            position: relative;
        }

.member-info h3 {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

.member-info p {
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 15px;
        }

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

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

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

/* Services Section */
        .services {
            padding: 100px 5%;
            position: relative;
        }

.services::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
            z-index: -1;
        }

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

.service-card {
            background: var(--glass-color);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px 30px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            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, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
            z-index: -1;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 215, 0, 0.3);
        }

.service-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            font-size: 2rem;
            color: var(--dark-color);
            box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
        }

.service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

.service-card p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
            line-height: 1.6;
        }

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

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

.service-link:hover {
            color: var(--primary-light);
        }

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

/* Testimonials Section */
        .testimonials {
            padding: 100px 5%;
            background: linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, rgba(18, 18, 18, 0) 100%);
        }

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

.swiper {
            width: 100%;
            padding: 30px 0;
        }

.testimonial-card {
            background: var(--glass-color);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            position: relative;
            min-height: 300px;
        }

.testimonial-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 215, 0, 0.3);
        }

.testimonial-card::before {
            content: '\201C';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 5rem;
            color: rgba(255, 215, 0, 0.1);
            font-family: Georgia, serif;
            line-height: 1;
        }

.testimonial-content {
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }

.testimonial-content p {
            font-size: 1.1rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
            font-style: italic;
        }

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

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

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

.author-info h4 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

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

.swiper-pagination {
            position: relative;
            margin-top: 30px;
        }

.swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 0.3);
            opacity: 1;
        }

.swiper-pagination-bullet-active {
            background: var(--primary-color);
        }

/* Stats Section */
        .stats {
            padding: 100px 5%;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
        }

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

.stat-card {
            text-align: center;
            padding: 40px 20px;
            background: var(--glass-color);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
        }

.stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 215, 0, 0.3);
        }

.stat-number {
            font-size: 3.5rem;
            font-weight: 700;
            background: linear-gradient(to right, var(--primary-color), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
            line-height: 1;
        }

.stat-title {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.8);
        }

/* CTA Section */
        .cta {
            padding: 100px 5%;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
            z-index: -1;
        }

.cta-container {
            max-width: 800px;
            margin: 0 auto;
            background: var(--glass-color);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            padding: 60px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

.cta-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 45%, rgba(255, 215, 0, 0.1) 50%, transparent 55%);
            animation: shine 3s infinite linear;
            z-index: -1;
        }

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

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

.cta p {
            font-size: 1.1rem;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
        }

/* Footer */
        footer {
            background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
            padding: 80px 5% 30px;
            position: relative;
        }

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

.footer-col h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }

.footer-col p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 20px;
        }

.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);
            display: inline-block;
        }

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

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

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

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

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

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

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

@keyframes shine {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

/* Velvet Caption Reveal */
        .velvet-caption {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

.velvet-caption::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            transform: translateX(-100%);
            transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
            z-index: 1;
        }

.velvet-caption.revealed::after {
            transform: translateX(100%);
        }

.velvet-caption span {
            position: relative;
            display: inline-block;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.5s ease;
            transform: translateY(20px);
        }

.velvet-caption.revealed span {
            opacity: 1;
            transform: translateY(0);
        }

/* Elegant Slide Reveal */
        .slide-reveal {
            position: relative;
            overflow: hidden;
        }

.slide-reveal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            transform: translateX(-100%);
            transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
            z-index: 1;
        }

.slide-reveal.revealed::after {
            transform: translateX(100%);
        }

.slide-reveal-content {
            opacity: 0;
            transition: opacity 0.5s ease 0.3s;
        }

.slide-reveal.revealed .slide-reveal-content {
            opacity: 1;
        }

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

@media (max-width: 992px) {
            .hero {
                flex-direction: column;
                justify-content: center;
                text-align: center;
                padding-top: 100px;
            }

.hero-content {
                max-width: 100%;
                margin-bottom: 50px;
            }

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

.hero-image {
                position: relative;
                right: auto;
                width: 80%;
                margin: 0 auto;
            }

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

.about-image {
                width: 100%;
            }
        }

@media (max-width: 768px) {
            nav ul {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: rgba(18, 18, 18, 0.95);
                backdrop-filter: blur(10px);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 30px;
                transition: var(--transition);
                z-index: 999;
            }

nav ul.active {
                left: 0;
            }

.menu-toggle {
                display: block;
            }

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

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

.cta-container {
                padding: 40px 20px;
            }

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

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

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

.btn {
                padding: 10px 20px;
            }

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

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

.stats-container {
                grid-template-columns: 1fr 1fr;
            }

.member-card {
                min-width: 100%;
            }
        }

JavaScript

// Mobile Menu Toggle
        const menuToggle = document.getElementById('menu-toggle');
        const navMenu = document.getElementById('nav-menu');

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

// Initialize Swiper
        const swiper = new Swiper('.swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

// Animation on Scroll
        document.addEventListener('DOMContentLoaded', () => {
            // Trigger initial animations
            document.querySelector('.velvet-caption').classList.add('revealed');
            document.querySelectorAll('.slide-reveal').forEach(el => {
                el.classList.add('revealed');
            });

// Intersection Observer for scroll animations
            const observerOptions = {
                threshold: 0.1
            };

document.querySelectorAll('.velvet-caption, .slide-reveal').forEach(el => {
                observer.observe(el);
            });
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });

// Close mobile menu if open
                    if (navMenu.classList.contains('active')) {
                        navMenu.classList.remove('active');
                        menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                    }
                }
            });
        });

About CoolBreeze AC Services Preview

Download Options