<?php 
$pagename = "service-detail";
$pagefooter = "pages";
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Detalhes/Serviços</title>
  <meta name="description" content="">
  <meta name="keywords" content="">

  <!-- Favicons -->
  <link href="../assets/img/favicon.png" rel="icon">
  <link href="../assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="../assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="../assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="../assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="../assets/css/main.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: iConstruction
  * Template URL: https://bootstrapmade.com/iconstruction-bootstrap-construction-template/
  * Updated: Jul 27 2025 with Bootstrap v5.3.7
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body class="service-details-page">

  <header id="header" class="header d-flex align-items-center fixed-top">
    <div class="container-fluid container-xl position-relative d-flex align-items-center">

      <a href="../index.php" class="logo d-flex align-items-center me-auto">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <img src="../assets/img/wgflogo.png" alt="">
      </a>
      
      <?php 
        require_once "../views/navbar.php";
      ?>
    </div>
  </header>

  <main class="main">

    <!-- Page Title -->
    <div class="page-title dark-background" data-aos="fade" style="background-image: url(../assets/img/construction/showcase-2.webp);">
      <div class="container position-relative">
        <h1>Detalhes Serviços</h1>
        <p>O parceiro certo para operações técnicas, industriais e de petróleo & gás.</p>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="../index.php">Inicio</a></li>
            <li class="current">Detalhes Serviços</li>
          </ol>
        </nav>
      </div>
    </div><!-- End Page Title -->

    <!-- Service Details Section -->
    <section id="service-details" class="service-details section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="service-header mb-5" data-aos="fade-up" data-aos-delay="150">
          <div class="row align-items-center">
            <div class="col-lg-6">
              <h1 class="service-title">Commercial Construction &amp; Development</h1>
              <p class="service-subtitle">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
            <div class="col-lg-6">
              <div class="service-stats">
                <div class="stat-item">
                  <div class="stat-number">250+</div>
                  <div class="stat-label">Projects Completed</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">15</div>
                  <div class="stat-label">Years Experience</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">98%</div>
                  <div class="stat-label">Client Satisfaction</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-7">

            <div class="service-overview" data-aos="fade-up" data-aos-delay="200">
              <img src="../assets/img/construction/project-5.webp" alt="Commercial Construction Project" class="service-image img-fluid">

              <div class="overview-content">
                <div class="overview-grid">
                  <div class="overview-item" data-aos="fade-up" data-aos-delay="250">
                    <i class="bi bi-building"></i>
                    <h3>Commercial Buildings</h3>
                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                  </div>
                  <div class="overview-item" data-aos="fade-up" data-aos-delay="300">
                    <i class="bi bi-gear"></i>
                    <h3>Industrial Facilities</h3>
                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="capabilities-section" data-aos="fade-up" data-aos-delay="350">
              <h2>Our Capabilities</h2>

              <ul class="nav nav-tabs custom-tabs" id="service-details-capabilities-tabs" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="service-details-planning-tab" data-bs-toggle="tab" data-bs-target="#service-details-planning" type="button" role="tab" aria-controls="service-details-planning" aria-selected="true">Planning &amp; Design</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="service-details-construction-tab" data-bs-toggle="tab" data-bs-target="#service-details-construction" type="button" role="tab" aria-controls="service-details-construction" aria-selected="false">Construction</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="service-details-management-tab" data-bs-toggle="tab" data-bs-target="#service-details-management" type="button" role="tab" aria-controls="service-details-management" aria-selected="false">Project Management</button>
                </li>
              </ul>

              <div class="tab-content" id="service-details-capabilities-content">
                <div class="tab-pane fade show active" id="service-details-planning" role="tabpanel" aria-labelledby="service-details-planning-tab">
                  <div class="row align-items-center">
                    <div class="col-md-7">
                      <h4>Comprehensive Planning Solutions</h4>
                      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                      <ul class="capability-features">
                        <li>Site analysis and feasibility studies</li>
                        <li>Architectural design and engineering</li>
                        <li>Permit acquisition and regulatory compliance</li>
                        <li>Budget estimation and cost analysis</li>
                      </ul>
                    </div>
                    <div class="col-md-5">
                      <img src="../assets/img/construction/project-6.webp" alt="Planning Process" class="img-fluid rounded">
                    </div>
                  </div>
                </div>

                <div class="tab-pane fade" id="service-details-construction" role="tabpanel" aria-labelledby="service-details-construction-tab">
                  <div class="row align-items-center">
                    <div class="col-md-7">
                      <h4>Expert Construction Execution</h4>
                      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.</p>
                      <ul class="capability-features">
                        <li>Advanced construction techniques</li>
                        <li>Quality control and safety protocols</li>
                        <li>Sustainable building practices</li>
                        <li>Timeline adherence and efficiency</li>
                      </ul>
                    </div>
                    <div class="col-md-5">
                      <img src="../assets/img/construction/project-7.webp" alt="Construction Process" class="img-fluid rounded">
                    </div>
                  </div>
                </div>

                <div class="tab-pane fade" id="service-details-management" role="tabpanel" aria-labelledby="service-details-management-tab">
                  <div class="row align-items-center">
                    <div class="col-md-7">
                      <h4>Professional Project Management</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.</p>
                      <ul class="capability-features">
                        <li>Real-time progress tracking</li>
                        <li>Communication and coordination</li>
                        <li>Risk assessment and mitigation</li>
                        <li>Quality assurance inspections</li>
                      </ul>
                    </div>
                    <div class="col-md-5">
                      <img src="../assets/img/construction/project-8.webp" alt="Project Management" class="img-fluid rounded">
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <div class="col-lg-5">
            <div class="service-sidebar" data-aos="fade-left" data-aos-delay="200">

              <div class="quick-info-card">
                <div class="info-header">
                  <h3>Service Overview</h3>
                  <span class="info-badge">Premium Service</span>
                </div>
                <div class="info-content">
                  <div class="info-row">
                    <span class="label">Project Scale</span>
                    <span class="value">$100K - $50M</span>
                  </div>
                  <div class="info-row">
                    <span class="label">Timeline</span>
                    <span class="value">6-36 months</span>
                  </div>
                  <div class="info-row">
                    <span class="label">Warranty</span>
                    <span class="value">10 years structural</span>
                  </div>
                  <div class="info-row">
                    <span class="label">Licensing</span>
                    <span class="value">All permits included</span>
                  </div>
                </div>
              </div>

              <div class="contact-form-card">
                <h3>Request Consultation</h3>
                <p>Get expert advice for your commercial construction project</p>

                <form action="forms/contact.php" method="post" class="consultation-form php-email-form">
                  <div class="form-group">
                    <input type="text" name="name" placeholder="Your Name" required="">
                  </div>
                  <div class="form-group">
                    <input type="email" name="email" placeholder="Email Address" required="">
                  </div>
                  <div class="form-group">
                    <input type="tel" name="phone" placeholder="Phone Number" required="">
                  </div>
                  <div class="form-group">
                    <select name="subject" required="">
                      <option value="">Select Project Type</option>
                      <option value="office">Office Building</option>
                      <option value="retail">Retail Space</option>
                      <option value="industrial">Industrial Facility</option>
                      <option value="mixed">Mixed Use</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <textarea name="message" rows="3" placeholder="Project details..."></textarea>
                  </div>

                  <div class="loading">Loading</div>
                  <div class="error-message"></div>
                  <div class="sent-message">Your consultation request has been sent. Thank you!</div>

                  <button type="submit" class="btn-submit">Schedule Consultation</button>
                </form>
              </div>

              <div class="expertise-highlights">
                <h4>Areas of Expertise</h4>
                <div class="expertise-grid">
                  <div class="expertise-item">
                    <i class="bi bi-building-check"></i>
                    <span>Office Complexes</span>
                  </div>
                  <div class="expertise-item">
                    <i class="bi bi-shop"></i>
                    <span>Retail Centers</span>
                  </div>
                  <div class="expertise-item">
                    <i class="bi bi-hospital"></i>
                    <span>Healthcare Facilities</span>
                  </div>
                  <div class="expertise-item">
                    <i class="bi bi-bank"></i>
                    <span>Financial Buildings</span>
                  </div>
                  <div class="expertise-item">
                    <i class="bi bi-house-gear"></i>
                    <span>Warehouses</span>
                  </div>
                  <div class="expertise-item">
                    <i class="bi bi-mortarboard"></i>
                    <span>Educational</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        <div class="project-showcase" data-aos="fade-up" data-aos-delay="400">
          <h2>Recent Commercial Projects</h2>
          <div class="showcase-grid">
            <div class="showcase-item large" data-aos="zoom-in" data-aos-delay="150">
              <img src="../assets/img/construction/project-9.webp" alt="Office Complex" class="img-fluid">
              <div class="showcase-overlay">
                <div class="showcase-content">
                  <h4>Downtown Office Complex</h4>
                  <span class="project-type">Commercial | 24 Months</span>
                  <a href="../assets/img/construction/project-9.webp" class="view-project glightbox">
                    <i class="bi bi-eye"></i>
                  </a>
                </div>
              </div>
            </div>

            <div class="showcase-item" data-aos="zoom-in" data-aos-delay="200">
              <img src="../assets/img/construction/project-10.webp" alt="Retail Center" class="img-fluid">
              <div class="showcase-overlay">
                <div class="showcase-content">
                  <h4>Retail Shopping Center</h4>
                  <span class="project-type">Retail | 18 Months</span>
                  <a href="../assets/img/construction/project-10.webp" class="view-project glightbox">
                    <i class="bi bi-eye"></i>
                  </a>
                </div>
              </div>
            </div>

            <div class="showcase-item" data-aos="zoom-in" data-aos-delay="250">
              <img src="../assets/img/construction/project-11.webp" alt="Industrial Facility" class="img-fluid">
              <div class="showcase-overlay">
                <div class="showcase-content">
                  <h4>Manufacturing Facility</h4>
                  <span class="project-type">Industrial | 30 Months</span>
                  <a href="../assets/img/construction/project-11.webp" class="view-project glightbox">
                    <i class="bi bi-eye"></i>
                  </a>
                </div>
              </div>
            </div>

            <div class="showcase-item" data-aos="zoom-in" data-aos-delay="300">
              <img src="../assets/img/construction/project-12.webp" alt="Medical Center" class="img-fluid">
              <div class="showcase-overlay">
                <div class="showcase-content">
                  <h4>Medical Center Extension</h4>
                  <span class="project-type">Healthcare | 20 Months</span>
                  <a href="../assets/img/construction/project-12.webp" class="view-project glightbox">
                    <i class="bi bi-eye"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </section><!-- /Service Details Section -->

  </main>

<!--Footer-->
      <?php 
        require_once "../views/footer.php";
      ?>
 <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../assets/vendor/php-email-form/validate.js"></script>
  <script src="../assets/vendor/aos/aos.js"></script>
  <script src="../assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="../assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>

  <!-- Main JS File -->
  <script src="../assets/js/main.js"></script>

</body>

</html>