<header class="header-pattern-2">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">
        YourLogo
      </a>
      
      <button class="navbar-toggler" type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarNav2">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse justify-content-center" 
           id="navbarNav2">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Team</a>
          </li>
        </ul>
      </div>
      
      <div class="d-none d-lg-block">
        <a href="#" class="btn btn-outline-light">
          Sign In
        </a>
      </div>
    </div>
  </nav>
</header>

<header class="header-pattern-3">
  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <a class="navbar-brand text-white" href="#">
        <i class="bi bi-lightning-charge-fill"></i> Brand
      </a>
      
      <button class="navbar-toggler" type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarNav3">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse justify-content-center" 
           id="navbarNav3">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Portfolio</a>
          </li>
        </ul>
      </div>
      
      <div class="d-none d-lg-block">
        <a href="#" class="btn btn-light text-dark">
          Contact Us
        </a>
      </div>
    </div>
  </nav>
</header>

<header class="header-pattern-4">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">
        <i class="bi bi-stars"></i> Creative
      </a>
      
      <button class="navbar-toggler" type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarNav4">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse justify-content-center" 
           id="navbarNav4">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Products</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" 
               role="button" data-bs-toggle="dropdown">
              Services
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Web Design</a></li>
              <li><a class="dropdown-item" href="#">Development</a></li>
              <li><a class="dropdown-item" href="#">Marketing</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
      
      <div class="d-none d-lg-block">
        <a href="#" class="btn btn-light text-dark">
          Get Quote
        </a>
      </div>
    </div>
  </nav>
</header>

<section class="hero-pattern-2">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <div class="hero-content">
          <h1 class="display-4 fw-bold mb-4">
            Build Something Amazing
          </h1>
          <p class="lead mb-4">
            Transform your ideas into reality with our 
            powerful tools and features.
          </p>
          <ul class="list-unstyled mb-4">
            <li class="mb-2">
              <i class="bi bi-check-circle-fill me-2"></i>
              Responsive Design
            </li>
            <li class="mb-2">
              <i class="bi bi-check-circle-fill me-2"></i>
              Modern Components
            </li>
            <li class="mb-2">
              <i class="bi bi-check-circle-fill me-2"></i>
              Easy Customization
            </li>
          </ul>
          <a href="#" class="btn btn-primary btn-lg">
            Start Free Trial
          </a>
        </div>
      </div>
      <div class="col-lg-6">
        <img src="hero-image.jpg" 
             class="img-fluid rounded-3" 
             alt="Hero Image">
      </div>
    </div>
  </div>
</section>

<section class="hero-pattern-3">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <h1 class="display-3 fw-light mb-4">
          Simple & Elegant
        </h1>
        <p class="fs-5 mb-5 text-muted">
          Less is more. Focus on what matters most 
          with our clean and intuitive design.
        </p>
        <a href="#" class="btn btn-outline-dark btn-lg">
          Explore
        </a>
      </div>
    </div>
  </div>
</section>

<section class="hero-pattern-4">
  <div class="container text-center position-relative">
    <h1 class="display-4 fw-bold mb-4">
      Experience Excellence
    </h1>
    <p class="lead mb-5">
      Discover the power of modern web design 
      with Bootstrap 5
    </p>
    <a href="#" class="btn btn-primary btn-lg">
      Watch Video
    </a>
  </div>
</section>

<section class="about-pattern-2">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">
        Our Journey
      </h2>
      <p class="lead">
        From startup to industry leader
      </p>
    </div>
    
    <div class="row">
      <div class="col-lg-12">
        <div class="timeline">
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <h5>2020 - The Beginning</h5>
              <p>Started with a small team and big dreams</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <h5>2021 - First Milestone</h5>
              <p>Reached 100 happy clients</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <h5>2022 - Expansion</h5>
              <p>Opened new offices and expanded team</p>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <h5>2023 - Innovation</h5>
              <p>Launched revolutionary products</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="about-pattern-3">
  <div class="container text-center">
    <h2 class="display-5 fw-bold mb-4">
      Why Choose Us
    </h2>
    <p class="lead mb-5">
      We're committed to excellence in everything we do
    </p>
    
    <div class="row g-4">
      <div class="col-md-4">
        <div class="feature-box">
          <div class="feature-icon">
            <i class="bi bi-lightning-charge"></i>
          </div>
          <h4>Fast Performance</h4>
          <p>
            Lightning-fast loading times and 
            smooth user experience
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="feature-box">
          <div class="feature-icon">
            <i class="bi bi-shield-check"></i>
          </div>
          <h4>Secure & Reliable</h4>
          <p>
            Enterprise-grade security and 
            99.9% uptime guarantee
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="feature-box">
          <div class="feature-icon">
            <i class="bi bi-headset"></i>
          </div>
          <h4>24/7 Support</h4>
          <p>
            Round-the-clock customer support 
            from our expert team
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="about-pattern-4">
  <div class="container text-center">
    <h2 class="display-5 fw-bold mb-4">
      Meet Our Team
    </h2>
    <p class="lead mb-5">
      Talented individuals working together
    </p>
    
    <div class="row g-4">
      <div class="col-lg-3 col-md-6">
        <div class="team-member">
          <img src="team1.jpg" 
               class="img-fluid rounded-circle mb-3" 
               alt="Team Member">
          <h5>John Doe</h5>
          <p class="text-muted">CEO & Founder</p>
          <div class="social-links">
            <a href="#"><i class="bi bi-linkedin"></i></a>
            <a href="#"><i class="bi bi-twitter"></i></a>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="team-member">
          <img src="team2.jpg" 
               class="img-fluid rounded-circle mb-3" 
               alt="Team Member">
          <h5>Jane Smith</h5>
          <p class="text-muted">Creative Director</p>
          <div class="social-links">
            <a href="#"><i class="bi bi-linkedin"></i></a>
            <a href="#"><i class="bi bi-twitter"></i></a>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="team-member">
          <img src="team3.jpg" 
               class="img-fluid rounded-circle mb-3" 
               alt="Team Member">
          <h5>Mike Johnson</h5>
          <p class="text-muted">Lead Developer</p>
          <div class="social-links">
            <a href="#"><i class="bi bi-linkedin"></i></a>
            <a href="#"><i class="bi bi-github"></i></a>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="team-member">
          <img src="team4.jpg" 
               class="img-fluid rounded-circle mb-3" 
               alt="Team Member">
          <h5>Sarah Wilson</h5>
          <p class="text-muted">Marketing Head</p>
          <div class="social-links">
            <a href="#"><i class="bi bi-linkedin"></i></a>
            <a href="#"><i class="bi bi-twitter"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Our Services</h2>
      <p class="lead">Explore what we offer</p>
    </div>
    
    <ul class="nav nav-tabs justify-content-center mb-4" 
        role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" 
                data-bs-toggle="tab" 
                data-bs-target="#web-dev">
          Web Development
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" 
                data-bs-toggle="tab" 
                data-bs-target="#design">
          Design
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" 
                data-bs-toggle="tab" 
                data-bs-target="#marketing">
          Marketing
        </button>
      </li>
    </ul>
    
    <div class="tab-content">
      <div class="tab-pane fade show active" 
           id="web-dev">
        <div class="row align-items-center">
          <div class="col-md-6">
            <h3>Web Development</h3>
            <p>Custom web solutions tailored to your needs</p>
            <ul>
              <li>Responsive Design</li>
              <li>Modern Technologies</li>
              <li>SEO Optimization</li>
            </ul>
          </div>
          <div class="col-md-6">
            <img src="web-dev.jpg" 
                 class="img-fluid rounded" 
                 alt="Web Development">
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="design">
        <div class="row align-items-center">
          <div class="col-md-6">
            <h3>UI/UX Design</h3>
            <p>Creating beautiful and functional interfaces</p>
            <ul>
              <li>User Research</li>
              <li>Prototyping</li>
              <li>Visual Design</li>
            </ul>
          </div>
          <div class="col-md-6">
            <img src="design.jpg" 
                 class="img-fluid rounded" 
                 alt="Design">
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="marketing">
        <div class="row align-items-center">
          <div class="col-md-6">
            <h3>Digital Marketing</h3>
            <p>Growing your online presence</p>
            <ul>
              <li>SEO & SEM</li>
              <li>Social Media</li>
              <li>Content Strategy</li>
            </ul>
          </div>
          <div class="col-md-6">
            <img src="marketing.jpg" 
                 class="img-fluid rounded" 
                 alt="Marketing">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Our Services</h2>
      <p class="lead">Click to explore our offerings</p>
    </div>
    
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="accordion" id="servicesAccordion">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" 
                      type="button" 
                      data-bs-toggle="collapse" 
                      data-bs-target="#service1">
                Web Development
              </button>
            </h2>
            <div id="service1" 
                 class="accordion-collapse collapse show" 
                 data-bs-parent="#servicesAccordion">
              <div class="accordion-body">
                <p>Custom web development services using the latest technologies.</p>
                <ul>
                  <li>Frontend Development</li>
                  <li>Backend Development</li>
                  <li>Full-Stack Solutions</li>
                </ul>
              </div>
            </div>
          </div>
          
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" 
                      type="button" 
                      data-bs-toggle="collapse" 
                      data-bs-target="#service2">
                UI/UX Design
              </button>
            </h2>
            <div id="service2" 
                 class="accordion-collapse collapse" 
                 data-bs-parent="#servicesAccordion">
              <div class="accordion-body">
                <p>Creating beautiful and user-friendly interfaces.</p>
                <ul>
                  <li>User Research</li>
                  <li>Wireframing</li>
                  <li>Prototyping</li>
                </ul>
              </div>
            </div>
          </div>
          
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" 
                      type="button" 
                      data-bs-toggle="collapse" 
                      data-bs-target="#service3">
                Mobile Development
              </button>
            </h2>
            <div id="service3" 
                 class="accordion-collapse collapse" 
                 data-bs-parent="#servicesAccordion">
              <div class="accordion-body">
                <p>Native and cross-platform mobile app development.</p>
                <ul>
                  <li>iOS Development</li>
                  <li>Android Development</li>
                  <li>React Native</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Our Services</h2>
      <p class="lead">Swipe through our offerings</p>
    </div>
    
    <div id="servicesCarousel" 
         class="carousel slide" 
         data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" 
                data-bs-target="#servicesCarousel" 
                data-bs-slide-to="0" 
                class="active"></button>
        <button type="button" 
                data-bs-target="#servicesCarousel" 
                data-bs-slide-to="1"></button>
        <button type="button" 
                data-bs-target="#servicesCarousel" 
                data-bs-slide-to="2"></button>
      </div>
      
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row justify-content-center">
            <div class="col-md-8">
              <div class="service-card text-center p-4">
                <div class="service-icon mx-auto mb-3">
                  <i class="bi bi-code-slash"></i>
                </div>
                <h3>Web Development</h3>
                <p>Custom websites built with modern technologies</p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
        </div>
        
        <div class="carousel-item">
          <div class="row justify-content-center">
            <div class="col-md-8">
              <div class="service-card text-center p-4">
                <div class="service-icon mx-auto mb-3">
                  <i class="bi bi-palette"></i>
                </div>
                <h3>UI/UX Design</h3>
                <p>Beautiful and intuitive user interfaces</p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
        </div>
        
        <div class="carousel-item">
          <div class="row justify-content-center">
            <div class="col-md-8">
              <div class="service-card text-center p-4">
                <div class="service-icon mx-auto mb-3">
                  <i class="bi bi-phone"></i>
                </div>
                <h3>Mobile Apps</h3>
                <p>Native and cross-platform mobile solutions</p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <button class="carousel-control-prev" 
              type="button" 
              data-bs-target="#servicesCarousel" 
              data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" 
              type="button" 
              data-bs-target="#servicesCarousel" 
              data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Why We're Better</h2>
      <p class="lead">See how we compare to the competition</p>
    </div>
    
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="table-responsive">
          <table class="table table-hover align-middle">
            <thead>
              <tr>
                <th scope="col">Features</th>
                <th scope="col" class="text-center">Others</th>
                <th scope="col" class="text-center">Us</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Response Time</td>
                <td class="text-center">24-48 hours</td>
                <td class="text-center"><span class="badge bg-success">Under 2 hours</span></td>
              </tr>
              <tr>
                <td>Quality Assurance</td>
                <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                <td class="text-center"><i class="bi bi-check text-success"></i></td>
              </tr>
              <tr>
                <td>24/7 Support</td>
                <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                <td class="text-center"><i class="bi bi-check text-success"></i></td>
              </tr>
              <tr>
                <td>Free Revisions</td>
                <td class="text-center">Limited</td>
                <td class="text-center"><span class="badge bg-success">Unlimited</span></td>
              </tr>
              <tr>
                <td>Money Back Guarantee</td>
                <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                <td class="text-center"><i class="bi bi-check text-success"></i></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-primary text-white">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Our Achievements</h2>
      <p class="lead">Numbers that speak for themselves</p>
    </div>
    
    <div class="row g-4 text-center">
      <div class="col-md-3">
        <div class="stat-item">
          <h2 class="display-4 fw-bold counter" 
              data-target="500">0</h2>
          <p>Happy Clients</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stat-item">
          <h2 class="display-4 fw-bold counter" 
              data-target="1000">0</h2>
          <p>Projects Completed</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stat-item">
          <h2 class="display-4 fw-bold counter" 
              data-target="50">0</h2>
          <p>Team Members</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stat-item">
          <h2 class="display-4 fw-bold counter" 
              data-target="15">0</h2>
          <p>Years Experience</p>
        </div>
      </div>
    </div>
    
    <div class="text-center mt-5">
      <a href="#" class="btn btn-light btn-lg">
        Join Our Success Story
      </a>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">What Our Clients Say</h2>
      <p class="lead">Real feedback from real customers</p>
    </div>
    
    <div class="row g-4">
      <div class="col-lg-4">
        <div class="testimonial-card h-100">
          <div class="card-body">
            <div class="mb-3">
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
            </div>
            <p class="mb-4">
              "Outstanding service! They delivered exactly what 
              we needed on time and within budget."
            </p>
            <div class="d-flex align-items-center">
              <img src="client1.jpg" 
                   class="rounded-circle me-3" 
                   width="50" 
                   height="50" 
                   alt="Client">
              <div>
                <h6 class="mb-0">John Smith</h6>
                <small class="text-muted">CEO, TechCorp</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-lg-4">
        <div class="testimonial-card h-100">
          <div class="card-body">
            <div class="mb-3">
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
            </div>
            <p class="mb-4">
              "Professional team with exceptional attention to detail. 
              Highly recommend!"
            </p>
            <div class="d-flex align-items-center">
              <img src="client2.jpg" 
                   class="rounded-circle me-3" 
                   width="50" 
                   height="50" 
                   alt="Client">
              <div>
                <h6 class="mb-0">Sarah Johnson</h6>
                <small class="text-muted">Marketing Director, BrandCo</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-lg-4">
        <div class="testimonial-card h-100">
          <div class="card-body">
            <div class="mb-3">
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
              <i class="bi bi-star-fill text-warning"></i>
            </div>
            <p class="mb-4">
              "The best decision we made was choosing this team. 
              They exceeded all our expectations."
            </p>
            <div class="d-flex align-items-center">
              <img src="client3.jpg" 
                   class="rounded-circle me-3" 
                   width="50" 
                   height="50" 
                   alt="Client">
              <div>
                <h6 class="mb-0">Mike Davis</h6>
                <small class="text-muted">Founder, StartupX</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Frequently Asked Questions</h2>
      <p class="lead">Quick answers to common questions</p>
    </div>
    
    <div class="row g-4">
      <div class="col-lg-6">
        <div class="faq-item">
          <h5 class="mb-3">
            <i class="bi bi-question-circle text-primary me-2"></i>
            What services do you offer?
          </h5>
          <p>
            We offer web development, mobile app development, 
            UI/UX design, and digital marketing services.
          </p>
        </div>
      </div>
      
      <div class="col-lg-6">
        <div class="faq-item">
          <h5 class="mb-3">
            <i class="bi bi-question-circle text-primary me-2"></i>
            How long does a project take?
          </h5>
          <p>
            Project timelines vary from 2 weeks for simple websites 
            to 6 months for complex applications.
          </p>
        </div>
      </div>
      
      <div class="col-lg-6">
        <div class="faq-item">
          <h5 class="mb-3">
            <i class="bi bi-question-circle text-primary me-2"></i>
            What is your pricing structure?
          </h5>
          <p>
            We offer fixed-price projects, hourly rates, 
            and retainer agreements.
          </p>
        </div>
      </div>
      
      <div class="col-lg-6">
        <div class="faq-item">
          <h5 class="mb-3">
            <i class="bi bi-question-circle text-primary me-2"></i>
            Do you provide ongoing support?
          </h5>
          <p>
            Yes, we offer 24/7 support and maintenance packages 
            for all our projects.
          </p>
        </div>
      </div>
    </div>
    
    <div class="text-center mt-5">
      <p class="mb-3">Still have questions?</p>
      <a href="#" class="btn btn-primary">Contact Us</a>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Frequently Asked Questions</h2>
      <p class="lead">Browse questions by category</p>
    </div>
    
    <ul class="nav nav-tabs justify-content-center mb-4" 
        role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" 
                data-bs-toggle="tab" 
                data-bs-target="#general">
          General
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" 
                data-bs-toggle="tab" 
                data-bs-target="#pricing">
          Pricing
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" 
                data-bs-toggle="tab" 
                data-bs-target="#support">
          Support
        </button>
      </li>
    </ul>
    
    <div class="tab-content">
      <div class="tab-pane fade show active" id="general">
        <div class="row justify-content-center">
          <div class="col-lg-8">
            <div class="faq-list">
              <div class="faq-item mb-4">
                <h5>What services do you offer?</h5>
                <p>We offer web development, mobile app development, 
                UI/UX design, and digital marketing services.</p>
              </div>
              <div class="faq-item mb-4">
                <h5>How long have you been in business?</h5>
                <p>We've been providing quality services for over 15 years.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="tab-pane fade" id="pricing">
        <div class="row justify-content-center">
          <div class="col-lg-8">
            <div class="faq-list">
              <div class="faq-item mb-4">
                <h5>What is your pricing structure?</h5>
                <p>We offer fixed-price projects, hourly rates, 
                and retainer agreements.</p>
              </div>
              <div class="faq-item mb-4">
                <h5>Do you offer payment plans?</h5>
                <p>Yes, we offer flexible payment plans for larger projects.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="tab-pane fade" id="support">
        <div class="row justify-content-center">
          <div class="col-lg-8">
            <div class="faq-list">
              <div class="faq-item mb-4">
                <h5>What kind of support do you provide?</h5>
                <p>We offer 24/7 support via email, phone, and live chat.</p>
              </div>
              <div class="faq-item mb-4">
                <h5>Do you provide training?</h5>
                <p>Yes, we provide comprehensive training for all our solutions.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Frequently Asked Questions</h2>
      <p class="lead">Quick answers to your questions</p>
    </div>
    
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="faq-list">
          <div class="faq-item d-flex mb-4">
            <div class="faq-number me-3">
              <span class="badge bg-primary rounded-circle p-2">1</span>
            </div>
            <div>
              <h5>What services do you offer?</h5>
              <p>We offer web development, mobile app development, 
              UI/UX design, and digital marketing services.</p>
            </div>
          </div>
          
          <div class="faq-item d-flex mb-4">
            <div class="faq-number me-3">
              <span class="badge bg-primary rounded-circle p-2">2</span>
            </div>
            <div>
              <h5>How long does a project take?</h5>
              <p>Project timelines vary from 2 weeks for simple websites 
              to 6 months for complex applications.</p>
            </div>
          </div>
          
          <div class="faq-item d-flex mb-4">
            <div class="faq-number me-3">
              <span class="badge bg-primary rounded-circle p-2">3</span>
            </div>
            <div>
              <h5>What is your pricing structure?</h5>
              <p>We offer fixed-price projects, hourly rates, 
              and retainer agreements.</p>
            </div>
          </div>
          
          <div class="faq-item d-flex mb-4">
            <div class="faq-number me-3">
              <span class="badge bg-primary rounded-circle p-2">4</span>
            </div>
            <div>
              <h5>Do you provide ongoing support?</h5>
              <p>Yes, we offer 24/7 support and maintenance packages 
              for all our projects.</p>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-5">
          <p class="mb-3">Can't find what you're looking for?</p>
          <a href="#" class="btn btn-primary">Contact Support</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="text-center mb-5">
          <h2 class="display-5 fw-bold mb-4">Contact Us</h2>
          <p class="lead">Send us a message and we'll get back to you</p>
        </div>
        
        <form class="contact-form">
          <div class="row g-3">
            <div class="col-md-6">
              <label for="name" class="form-label">Name</label>
              <input type="text" class="form-control" id="name" required>
            </div>
            <div class="col-md-6">
              <label for="email" class="form-label">Email</label>
              <input type="email" class="form-control" id="email" required>
            </div>
            <div class="col-12">
              <label for="subject" class="form-label">Subject</label>
              <input type="text" class="form-control" id="subject" required>
            </div>
            <div class="col-12">
              <label for="message" class="form-label">Message</label>
              <textarea class="form-control" id="message" rows="5" required></textarea>
            </div>
            <div class="col-12 text-center">
              <button type="submit" class="btn btn-primary btn-lg">
                Send Message
              </button>
            </div>
          </div>
        </form>
        
        <div class="text-center mt-5">
          <p class="mb-2">Or reach us directly at</p>
          <p class="mb-0">
            <a href="mailto:info@example.com">info@example.com</a> | 
            <a href="tel:+15551234567">+1 (555) 123-4567</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container-fluid">
    <div class="row g-0">
      <div class="col-lg-6">
        <div class="contact-form-wrapper p-5">
          <h2 class="display-5 fw-bold mb-4">Get In Touch</h2>
          <p class="lead mb-4">We're here to help and answer any questions you might have</p>
          
          <form>
            <div class="row g-3">
              <div class="col-md-6">
                <label for="firstName" class="form-label">First Name</label>
                <input type="text" class="form-control" id="firstName" required>
              </div>
              <div class="col-md-6">
                <label for="lastName" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="lastName" required>
              </div>
              <div class="col-12">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="col-12">
                <label for="message" class="form-label">Message</label>
                <textarea class="form-control" id="message" rows="5" required></textarea>
              </div>
              <div class="col-12">
                <button type="submit" class="btn btn-primary btn-lg">
                  Send Message
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="map-container h-100">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.678!2d-74.006!3d40.7128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDDCsDQyJzUxLjAiTiA3NMKwMDAnMjYuMCJX!5e0!3m2!1sen!2sus!4v1234567890" 
                  width="100%" 
                  height="100%" 
                  style="border:0;" 
                  allowfullscreen="" 
                  loading="lazy">
          </iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="text-center mb-5">
          <h2 class="display-5 fw-bold mb-4">Contact Us</h2>
          <p class="lead">Fill out the form below to get in touch</p>
        </div>
        
        <!-- Progress Indicator -->
        <ul class="nav nav-pills justify-content-center mb-4">
          <li class="nav-item">
            <a class="nav-link active" href="#">Personal Info</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Project Details</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Review</a>
          </li>
        </ul>
        
        <!-- Step 1: Personal Info -->
        <div id="step1" class="step-content">
          <h4 class="mb-4">Personal Information</h4>
          <form>
            <div class="row g-3">
              <div class="col-md-6">
                <label for="firstName" class="form-label">First Name</label>
                <input type="text" class="form-control" id="firstName" required>
              </div>
              <div class="col-md-6">
                <label for="lastName" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="lastName" required>
              </div>
              <div class="col-md-6">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="col-md-6">
                <label for="phone" class="form-label">Phone</label>
                <input type="tel" class="form-control" id="phone">
              </div>
              <div class="col-12 text-end">
                <button type="button" class="btn btn-primary" onclick="showStep(2)">
                  Next Step →
                </button>
              </div>
            </div>
          </form>
        </div>
        
        <!-- Step 2: Project Details -->
        <div id="step2" class="step-content" style="display:none;">
          <h4 class="mb-4">Project Details</h4>
          <form>
            <div class="row g-3">
              <div class="col-12">
                <label for="projectType" class="form-label">Project Type</label>
                <select class="form-select" id="projectType">
                  <option selected>Choose...</option>
                  <option>Web Development</option>
                  <option>Mobile App</option>
                  <option>UI/UX Design</option>
                  <option>Other</option>
                </select>
              </div>
              <div class="col-12">
                <label for="budget" class="form-label">Budget Range</label>
                <select class="form-select" id="budget">
                  <option selected>Choose...</option>
                  <option>$5,000 - $10,000</option>
                  <option>$10,000 - $25,000</option>
                  <option>$25,000 - $50,000</option>
                  <option>$50,000+</option>
                </select>
              </div>
              <div class="col-12">
                <label for="timeline" class="form-label">Timeline</label>
                <input type="text" class="form-control" id="timeline" placeholder="e.g., 3 months">
              </div>
              <div class="col-12 d-flex justify-content-between">
                <button type="button" class="btn btn-secondary" onclick="showStep(1)">
                  ← Previous
                </button>
                <button type="button" class="btn btn-primary" onclick="showStep(3)">
                  Next Step →
                </button>
              </div>
            </div>
          </form>
        </div>
        
        <!-- Step 3: Review -->
        <div id="step3" class="step-content" style="display:none;">
          <h4 class="mb-4">Review & Submit</h4>
          <div class="alert alert-info">
            Please review your information before submitting
          </div>
          <div class="mb-4">
            <h5>Personal Information</h5>
            <p>Name: John Doe</p>
            <p>Email: john@example.com</p>
            <p>Phone: (555) 123-4567</p>
          </div>
          <div class="mb-4">
            <h5>Project Details</h5>
            <p>Type: Web Development</p>
            <p>Budget: $10,000 - $25,000</p>
            <p>Timeline: 3 months</p>
          </div>
          <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-secondary" onclick="showStep(2)">
              ← Previous
            </button>
            <button type="submit" class="btn btn-success">
              Submit Form
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="newsletter-form p-5 bg-white rounded-3 shadow">
          <div class="text-center mb-4">
            <h2 class="display-5 fw-bold mb-3">Stay Updated</h2>
            <p class="lead">Join our community and never miss an update</p>
          </div>
          
          <form>
            <div class="row g-3">
              <div class="col-md-6">
                <label for="firstName" class="form-label">First Name</label>
                <input type="text" class="form-control" id="firstName" required>
              </div>
              <div class="col-md-6">
                <label for="lastName" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="lastName" required>
              </div>
              <div class="col-12">
                <label for="email" class="form-label">Email Address</label>
                <input type="email" class="form-control" id="email" required>
              </div>
              <div class="col-12">
                <label for="dob" class="form-label">Date of Birth</label>
                <input type="date" class="form-control" id="dob">
              </div>
              <div class="col-12">
                <label class="form-label">Interests</label>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="webDev">
                  <label class="form-check-label" for="webDev">
                    Web Development
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="design">
                  <label class="form-check-label" for="design">
                    Design
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="marketing">
                  <label class="form-check-label" for="marketing">
                    Marketing
                  </label>
                </div>
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input class="form-check-input" 
                         type="checkbox" 
                         id="agreeTerms" 
                         required>
                  <label class="form-check-label" for="agreeTerms">
                    I agree to receive promotional emails and accept the 
                    <a href="#">privacy policy</a>
                  </label>
                </div>
              </div>
              <div class="col-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg">
                  Subscribe Now
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Trigger Button -->
<div class="text-center py-5">
  <button type="button" 
          class="btn btn-primary btn-lg" 
          data-bs-toggle="modal" 
          data-bs-target="#newsletterModal">
    Subscribe to Newsletter
  </button>
</div>

<!-- Newsletter Modal -->
<div class="modal fade" id="newsletterModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-0">
        <button type="button" 
                class="btn-close" 
                data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body text-center pb-5">
        <div class="mb-4">
          <i class="bi bi-envelope-heart text-primary" 
             style="font-size: 4rem;"></i>
        </div>
        <h3 class="mb-3">Join Our Newsletter</h3>
        <p class="text-muted mb-4">
          Get exclusive content and be the first to know about 
          new features and updates.
        </p>
        
        <form>
          <div class="mb-3">
            <input type="text" 
                   class="form-control form-control-lg" 
                   placeholder="Your Name" 
                   required>
          </div>
          <div class="mb-3">
            <input type="email" 
                   class="form-control form-control-lg" 
                   placeholder="Your Email" 
                   required>
          </div>
          <div class="mb-3">
            <input type="date" 
                   class="form-control" 
                   placeholder="Date of Birth">
          </div>
          <div class="form-check mb-4 text-start">
            <input class="form-check-input" 
                   type="checkbox" 
                   id="agreePromo" 
                   required>
            <label class="form-check-label" for="agreePromo">
              I agree to receive promotional emails
            </label>
          </div>
          <button type="submit" class="btn btn-primary btn-lg w-100">
            Subscribe
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<section class="py-5 text-white" 
         style="background: url('newsletter-bg.jpg') center/cover; position: relative;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7);"></div>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-lg-6 mb-4 mb-lg-0">
        <h2 class="display-4 fw-bold mb-4">Never Miss an Update</h2>
        <p class="lead mb-4">
          Subscribe to our newsletter and stay up to date with the 
          latest news, updates, and exclusive offers.
        </p>
        <div class="d-flex align-items-center mb-3">
          <i class="bi bi-check-circle me-2"></i>
          <span>Weekly digest of latest content</span>
        </div>
        <div class="d-flex align-items-center mb-3">
          <i class="bi bi-check-circle me-2"></i>
          <span>Exclusive subscriber-only resources</span>
        </div>
        <div class="d-flex align-items-center">
          <i class="bi bi-check-circle me-2"></i>
          <span>No spam, unsubscribe anytime</span>
        </div>
      </div>
      
      <div class="col-lg-6">
        <div class="newsletter-form bg-white p-4 rounded-3">
          <h4 class="text-dark mb-3">Subscribe Now</h4>
          <form>
            <div class="mb-3">
              <input type="text" 
                     class="form-control" 
                     placeholder="Your Name" 
                     required>
            </div>
            <div class="mb-3">
              <input type="email" 
                     class="form-control" 
                     placeholder="Your Email" 
                     required>
            </div>
            <div class="mb-3">
              <input type="date" 
                     class="form-control" 
                     placeholder="Date of Birth">
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" 
                     type="checkbox" 
                     id="agreeTerms" 
                     required>
              <label class="form-check-label text-dark" for="agreeTerms">
                I agree to receive promotional emails
              </label>
            </div>
            <button type="submit" class="btn btn-primary w-100">
              Subscribe
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Recent Articles</h2>
      <p class="lead">Stay updated with our latest content</p>
    </div>
    
    <div class="row">
      <div class="col-lg-8">
        <div class="blog-list">
          <div class="blog-item d-flex mb-4">
            <div class="blog-image me-4">
              <img src="blog1.jpg" 
                   class="img-fluid rounded" 
                   width="200" 
                   alt="Blog Post">
            </div>
            <div class="blog-content">
              <div class="blog-meta mb-2">
                <span class="badge bg-primary me-2">Design</span>
                <small class="text-muted">March 15, 2024</small>
              </div>
              <h4>
                <a href="#">10 UI/UX Trends to Watch in 2024</a>
              </h4>
              <p>
                Discover the latest design trends that will 
                shape the digital landscape this year.
              </p>
              <a href="#" class="btn btn-link">Read More →</a>
            </div>
          </div>
          
          <div class="blog-item d-flex mb-4">
            <div class="blog-image me-4">
              <img src="blog2.jpg" 
                   class="img-fluid rounded" 
                   width="200" 
                   alt="Blog Post">
            </div>
            <div class="blog-content">
              <div class="blog-meta mb-2">
                <span class="badge bg-success me-2">Development</span>
                <small class="text-muted">March 12, 2024</small>
              </div>
              <h4>
                <a href="#">Building Responsive Layouts with Bootstrap 5</a>
              </h4>
              <p>
                Learn how to create beautiful responsive websites 
                using Bootstrap 5's powerful grid system.
              </p>
              <a href="#" class="btn btn-link">Read More →</a>
            </div>
          </div>
          
          <div class="blog-item d-flex mb-4">
            <div class="blog-image me-4">
              <img src="blog3.jpg" 
                   class="img-fluid rounded" 
                   width="200" 
                   alt="Blog Post">
            </div>
            <div class="blog-content">
              <div class="blog-meta mb-2">
                <span class="badge bg-warning me-2">Marketing</span>
                <small class="text-muted">March 10, 2024</small>
              </div>
              <h4>
                <a href="#">Content Marketing Strategies That Work</a>
              </h4>
              <p>
                Explore proven content marketing strategies 
                to boost your online presence.
              </p>
              <a href="#" class="btn btn-link">Read More →</a>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-lg-4">
        <div class="blog-sidebar">
          <div class="sidebar-widget mb-4">
            <h5 class="mb-3">Categories</h5>
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">
                Design <span class="badge bg-primary float-end">12</span>
              </a>
              <a href="#" class="list-group-item list-group-item-action">
                Development <span class="badge bg-primary float-end">8</span>
              </a>
              <a href="#" class="list-group-item list-group-item-action">
                Marketing <span class="badge bg-primary float-end">6</span>
              </a>
            </div>
          </div>
          
          <div class="sidebar-widget">
            <h5 class="mb-3">Popular Posts</h5>
            <div class="popular-post d-flex mb-3">
              <img src="popular1.jpg" 
                   class="img-fluid rounded me-3" 
                   width="60" 
                   alt="Popular Post">
              <div>
                <h6 class="mb-1">
                  <a href="#">Getting Started with Bootstrap</a>
                </h6>
                <small class="text-muted">March 5, 2024</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Our Blog</h2>
      <p class="lead">Explore our diverse content</p>
    </div>
    
    <div class="row g-4" data-masonry='{"percentPosition": true }'>
      <div class="col-lg-4 col-md-6">
        <div class="blog-card">
          <img src="blog1.jpg" 
               class="card-img-top" 
               alt="Blog Post">
          <div class="blog-card-body">
            <div class="blog-meta mb-2">
              <span class="badge bg-primary me-2">Design</span>
              <small class="text-muted">March 15, 2024</small>
            </div>
            <h5 class="blog-title">
              <a href="#">10 UI/UX Trends to Watch in 2024</a>
            </h5>
            <p class="blog-excerpt">
              Discover the latest design trends that will 
              shape the digital landscape this year.
            </p>
            <a href="#" class="btn btn-link">Read More →</a>
          </div>
        </div>
      </div>
      
      <div class="col-lg-4 col-md-6">
        <div class="blog-card">
          <img src="blog2.jpg" 
               class="card-img-top" 
               alt="Blog Post">
          <div class="blog-card-body">
            <div class="blog-meta mb-2">
              <span class="badge bg-success me-2">Development</span>
              <small class="text-muted">March 12, 2024</small>
            </div>
            <h5 class="blog-title">
              <a href="#">Building Responsive Layouts with Bootstrap 5</a>
            </h5>
            <p class="blog-excerpt">
              Learn how to create beautiful responsive websites 
              using Bootstrap 5's powerful grid system.
            </p>
            <a href="#" class="btn btn-link">Read More →</a>
          </div>
        </div>
      </div>
      
      <div class="col-lg-4 col-md-6">
        <div class="blog-card">
          <img src="blog3.jpg" 
               class="card-img-top" 
               alt="Blog Post">
          <div class="blog-card-body">
            <div class="blog-meta mb-2">
              <span class="badge bg-warning me-2">Marketing</span>
              <small class="text-muted">March 10, 2024</small>
            </div>
            <h5 class="blog-title">
              <a href="#">Content Marketing Strategies That Work</a>
            </h5>
            <p class="blog-excerpt">
              Explore proven content marketing strategies 
              to boost your online presence.
            </p>
            <a href="#" class="btn btn-link">Read More →</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-4">Featured Posts</h2>
      <p class="lead">Swipe through our highlighted content</p>
    </div>
    
    <div id="blogCarousel" 
         class="carousel slide" 
         data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" 
                data-bs-target="#blogCarousel" 
                data-bs-slide-to="0" 
                class="active"></button>
        <button type="button" 
                data-bs-target="#blogCarousel" 
                data-bs-slide-to="1"></button>
        <button type="button" 
                data-bs-target="#blogCarousel" 
                data-bs-slide-to="2"></button>
      </div>
      
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row">
            <div class="col-lg-4">
              <div class="blog-card">
                <img src="blog1.jpg" 
                     class="card-img-top" 
                     alt="Blog Post">
                <div class="blog-card-body">
                  <div class="blog-meta mb-2">
                    <span class="badge bg-primary me-2">Design</span>
                    <small class="text-muted">March 15, 2024</small>
                  </div>
                  <h5 class="blog-title">
                    <a href="#">10 UI/UX Trends to Watch in 2024</a>
                  </h5>
                  <p class="blog-excerpt">
                    Discover the latest design trends that will 
                    shape the digital landscape this year.
                  </p>
                  <a href="#" class="btn btn-link">Read More →</a>
                </div>
              </div>
            </div>
            
            <div class="col-lg-4">
              <div class="blog-card">
                <img src="blog2.jpg" 
                     class="card-img-top" 
                     alt="Blog Post">
                <div class="blog-card-body">
                  <div class="blog-meta mb-2">
                    <span class="badge bg-success me-2">Development</span>
                    <small class="text-muted">March 12, 2024</small>
                  </div>
                  <h5 class="blog-title">
                    <a href="#">Building Responsive Layouts with Bootstrap 5</a>
                  </h5>
                  <p class="blog-excerpt">
                    Learn how to create beautiful responsive websites 
                    using Bootstrap 5's powerful grid system.
                  </p>
                  <a href="#" class="btn btn-link">Read More →</a>
                </div>
              </div>
            </div>
            
            <div class="col-lg-4">
              <div class="blog-card">
                <img src="blog3.jpg" 
                     class="card-img-top" 
                     alt="Blog Post">
                <div class="blog-card-body">
                  <div class="blog-meta mb-2">
                    <span class="badge bg-warning me-2">Marketing</span>
                    <small class="text-muted">March 10, 2024</small>
                  </div>
                  <h5 class="blog-title">
                    <a href="#">Content Marketing Strategies That Work</a>
                  </h5>
                  <p class="blog-excerpt">
                    Explore proven content marketing strategies 
                    to boost your online presence.
                  </p>
                  <a href="#" class="btn btn-link">Read More →</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Additional carousel items -->
      </div>
      
      <button class="carousel-control-prev" 
              type="button" 
              data-bs-target="#blogCarousel" 
              data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" 
              type="button" 
              data-bs-target="#blogCarousel" 
              data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
</section>

<footer class="footer-pattern-2">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-4 mb-3 mb-md-0">
        <a href="#" class="navbar-brand text-white">
          YourBrand
        </a>
      </div>
      
      <div class="col-md-4 mb-3 mb-md-0 text-center">
        <div class="social-links">
          <a href="#" class="text-white me-3">
            <i class="bi bi-facebook"></i>
          </a>
          <a href="#" class="text-white me-3">
            <i class="bi bi-twitter"></i>
          </a>
          <a href="#" class="text-white me-3">
            <i class="bi bi-linkedin"></i>
          </a>
          <a href="#" class="text-white">
            <i class="bi bi-instagram"></i>
          </a>
        </div>
      </div>
      
      <div class="col-md-4 text-md-end">
        <p class="text-white mb-0">
          © 2024 YourBrand. All rights reserved.
        </p>
      </div>
    </div>
  </div>
</footer>

<footer class="footer-pattern-3">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 mb-4 mb-lg-0">
        <h5 class="mb-3">YourCompany</h5>
        <p class="mb-3">
          Creating digital experiences that inspire and engage.
        </p>
        <div class="contact-info">
          <p class="mb-2">
            <i class="bi bi-geo-alt me-2"></i>
            123 Main Street, City, State 12345
          </p>
          <p class="mb-2">
            <i class="bi bi-telephone me-2"></i>
            +1 (555) 123-4567
          </p>
          <p class="mb-0">
            <i class="bi bi-envelope me-2"></i>
            info@yourcompany.com
          </p>
        </div>
      </div>
      
      <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
        <h5 class="mb-3">Quick Links</h5>
        <ul class="list-unstyled">
          <li class="mb-2">
            <a href="#">Home</a>
          </li>
          <li class="mb-2">
            <a href="#">About</a>
          </li>
          <li class="mb-2">
            <a href="#">Services</a>
          </li>
          <li class="mb-2">
            <a href="#">Portfolio</a>
          </li>
        </ul>
      </div>
      
      <div class="col-lg-2 col-md-6 mb-4 mb-md-0">
        <h5 class="mb-3">Services</h5>
        <ul class="list-unstyled">
          <li class="mb-2">
            <a href="#">Web Design</a>
          </li>
          <li class="mb-2">
            <a href="#">Development</a>
          </li>
          <li class="mb-2">
            <a href="#">Marketing</a>
          </li>
          <li class="mb-2">
            <a href="#">SEO</a>
          </li>
        </ul>
      </div>
      
      <div class="col-lg-4 mb-4 mb-lg-0">
        <h5 class="mb-3">Follow Us</h5>
        <p class="mb-3">
          Stay connected with us on social media
        </p>
        <div class="social-links">
          <a href="#" class="btn btn-outline-light btn-sm me-2 mb-2">
            <i class="bi bi-facebook"></i> Facebook
          </a>
          <a href="#" class="btn btn-outline-light btn-sm me-2 mb-2">
            <i class="bi bi-twitter"></i> Twitter
          </a>
          <a href="#" class="btn btn-outline-light btn-sm me-2 mb-2">
            <i class="bi bi-linkedin"></i> LinkedIn
          </a>
          <a href="#" class="btn btn-outline-light btn-sm mb-2">
            <i class="bi bi-instagram"></i> Instagram
          </a>
        </div>
      </div>
    </div>
    
    <hr class="my-4">
    
    <div class="row align-items-center">
      <div class="col-md-6">
        <p class="mb-0">
          © 2024 YourCompany. All rights reserved.
        </p>
      </div>
      <div class="col-md-6 text-md-end">
        <a href="#" class="me-3">Privacy Policy</a>
        <a href="#">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>

<footer class="footer-pattern-4">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="mb-3">About Company</h5>
        <p class="mb-3">
          We are a leading digital agency specializing in 
          creating exceptional online experiences.
        </p>
        <div class="d-flex align-items-center mb-3">
          <i class="bi bi-telephone me-2"></i>
          <span>+1 (555) 123-4567</span>
        </div>
        <div class="d-flex align-items-center mb-3">
          <i class="bi bi-envelope me-2"></i>
          <span>info@company.com</span>
        </div>
        <div class="d-flex align-items-center">
          <i class="bi bi-geo-alt me-2"></i>
          <span>123 Main Street, City</span>
        </div>
      </div>
      
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="mb-3">Quick Links</h5>
        <ul class="list-unstyled">
          <li class="mb-2">
            <a href="#">About Us</a>
          </li>
          <li class="mb-2">
            <a href="#">Our Team</a>
          </li>
          <li class="mb-2">
            <a href="#">Portfolio</a>
          </li>
          <li class="mb-2">
            <a href="#">Testimonials</a>
          </li>
          <li class="mb-2">
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="mb-3">Our Services</h5>
        <ul class="list-unstyled">
          <li class="mb-2">
            <a href="#">Web Development</a>
          </li>
          <li class="mb-2">
            <a href="#">Mobile Apps</a>
          </li>
          <li class="mb-2">
            <a href="#">UI/UX Design</a>
          </li>
          <li class="mb-2">
            <a href="#">Digital Marketing</a>
          </li>
          <li class="mb-2">
            <a href="#">SEO Services</a>
          </li>
        </ul>
      </div>
      
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="mb-3">Newsletter</h5>
        <p class="mb-3">
          Subscribe to our newsletter for the latest updates
        </p>
        <form>
          <div class="input-group mb-3">
            <input type="email" 
                   class="form-control" 
                   placeholder="Your email">
            <button class="btn btn-primary" type="submit">
              <i class="bi bi-send"></i>
            </button>
          </div>
        </form>
        <div class="social-links mt-3">
          <a href="#" class="me-2">
            <i class="bi bi-facebook"></i>
          </a>
          <a href="#" class="me-2">
            <i class="bi bi-twitter"></i>
          </a>
          <a href="#" class="me-2">
            <i class="bi bi-linkedin"></i>
          </a>
          <a href="#" class="me-2">
            <i class="bi bi-instagram"></i>
          </a>
          <a href="#">
            <i class="bi bi-youtube"></i>
          </a>
        </div>
      </div>
    </div>
    
    <hr class="my-4">
    
    <div class="row align-items-center">
      <div class="col-md-6">
        <p class="mb-0">
          © 2024 Company Name. All rights reserved.
        </p>
      </div>
      <div class="col-md-6 text-md-end">
        <a href="#" class="me-3">Privacy Policy</a>
        <a href="#" class="me-3">Terms of Service</a>
        <a href="#">Cookie Policy</a>
      </div>
    </div>
  </div>
</footer>