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

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

  <!-- Favicons -->
  <link href="https://res.cloudinary.com/duapi2dif/image/upload/v1772031254/favicon_usnku8.png" rel="icon">
  <link href="https://res.cloudinary.com/duapi2dif/image/upload/v1772031254/favicon_usnku8.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">
  <link href="../assets/css/sobre/img_zoom.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="about-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="https://res.cloudinary.com/duapi2dif/image/upload/v1772031269/wgflogo_cxtprn.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(https://res.cloudinary.com/duapi2dif/image/upload/v1772464269/4_ewcxpi.jpg);">
      <div class="container position-relative">
        <h1>Sobre</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">Sobre</li>
          </ol>
        </nav>
      </div>
    </div><!-- End Page Title -->

    <!-- About Section -->
    <section id="about" class="about section">

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

        <div class="row align-items-center">

          <div class="col-lg-15 order-2 order-lg-1" data-aos="fade-right" data-aos-delay="50">
            <div class="content">
              <h2 class="section-heading mb-4">Construído sobre a excelência, impulsionado pela visão</h2>
            <p class="lead-text mb-4" style="text-align: justify; line-height: 1.6;">
                <strong>Somos uma empresa angolana em crescimento contínuo</strong>, especializada em procurement local e internacional, gestão logística e prestação de serviços industriais, com forte atuação nos setores de petróleo e gás, construção, manutenção e operações técnicas.
            </p>

            <p class="lead-text mb-4" style="text-align: justify; line-height: 1.6;">
                <strong>Nossa missão</strong> é garantir eficiência, fiabilidade e alto desempenho em toda a cadeia de fornecimento e execução de serviços, desde a aquisição de materiais até à entrega final ao cliente.
            </p>

            <p class="lead-text mb-4" style="text-align: justify; line-height: 1.6;">
                <strong>Contamos com uma equipa altamente qualificada</strong>, composta por profissionais com experiência comprovada em projetos do setor petrolífero, operações offshore, manutenção industrial, logística e supply chain. Todos os nossos colaboradores são selecionados com base em critérios rigorosos de competência técnica, certificações, experiência prática e capacidade de resposta em ambientes operacionais exigentes.
            </p>

            <p class="lead-text mb-4" style="text-align: justify; line-height: 1.6;">
                <strong>Adotamos um modelo de trabalho sustentado em quatro pilares fundamentais:</strong> qualidade, segurança, transparência e retorno para o cliente. Investimos de forma contínua em formação, melhoria de processos e desenvolvimento de parcerias estratégicas com fabricantes, distribuidores e fornecedores certificados a nível nacional e internacional.
            </p>

            <p class="lead-text mb-4" style="text-align: justify; line-height: 1.6;">
                <strong>Valorizamos cada cliente</strong> e acreditamos em relações comerciais de benefício mútuo, baseadas em confiança, compromisso e entrega de resultados. Disponibilizamos não apenas os meios técnicos e logísticos, mas também o nosso know-how operacional, garantindo soluções eficazes e ajustadas às necessidades específicas de cada projeto.
            </p>

            <p class="lead-text mb-4" style="text-align: justify; line-height: 1.6;">
                <strong>Como parte da nossa estratégia de crescimento</strong>, desenvolvemos uma base de dados sólida de profissionais técnicos especializados, muitos deles com vasta experiência no setor petrolífero, incluindo quadros que regressaram ao mercado após a crise internacional do setor entre 2015 e 2018.
            </p>

            <p class="lead-text mb-4" style="text-align: justify; line-height: 1.6;">
                <strong>A segurança é tratada como prioridade absoluta</strong> em todas as nossas operações. Implementamos práticas rigorosas de HSE (Health, Safety & Environment), com foco na prevenção de riscos, proteção dos colaboradores e mitigação de danos humanos, materiais e ambientais.
            </p>

            <p class="lead-text mb-4" style="text-align: justify; line-height: 1.6;">
                <strong>Mais do que um fornecedor</strong>, posicionamo-nos como parceiro estratégico, preparado para apoiar os nossos clientes nos desafios operacionais, logísticos e técnicos do presente e do futuro.
            </p>
              </br>
            <h3 class="section-heading mb-4">Somos movidos por três princípios fundamentais:</h3>
            <style>
              .value-item {
                  background-color: #fff;
                  padding: 1.5rem;
                  border-radius: 0.5rem;
                  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                  border-left: 5px solid #b31b00;
                  transition: all 0.3s ease;
                  margin-bottom: 1rem;
              }
              
              .value-item:hover {
                  box-shadow: 0 6px 16px rgba(179, 27, 0, 0.15);
                  transform: translateY(-2px);
              }
              
              .value-number {
                  width: 48px;
                  height: 48px;
                  background-color: #b31b00;
                  color: white;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-weight: 800;
                  font-size: 1.2rem;
                  box-shadow: 0 4px 8px rgba(179, 27, 0, 0.3);
              }
              
              .value-title {
                  color: #1a1a1a;
                  font-weight: 700;
                  margin-bottom: 0.5rem;
              }
              
              .value-description {
                  color: #6c757d;
                  line-height: 1.6;
              }
            </style>

          <ul class="list-unstyled">
              <li class="d-flex mb-4 value-item">
                  <div class="me-4">
                      <span class="value-number">1</span>
                  </div>
                  <div class="flex-grow-1">
                      <h5 class="value-title">Compromisso absoluto com o cliente</h5>
                      <p class="mb-0 value-description">Priorizamos as necessidades e objetivos dos nossos clientes em todas as decisões e ações.</p>
                  </div>
              </li>
              
              <li class="d-flex mb-4 value-item">
                  <div class="me-4">
                      <span class="value-number">2</span>
                  </div>
                  <div class="flex-grow-1">
                      <h5 class="value-title">Execução eficiente e segura</h5>
                      <p class="mb-0 value-description">Implementamos processos otimizados com rigorosos padrões de segurança em todas as operações.</p>
                  </div>
              </li>
              
              <li class="d-flex value-item">
                  <div class="me-4">
                      <span class="value-number">3</span>
                  </div>
                  <div class="flex-grow-1">
                      <h5 class="value-title">Inovação aplicada à prática</h5>
                      <p class="mb-0 value-description">Buscamos constantemente soluções criativas e tecnológicas para melhorar resultados operacionais.</p>
                  </div>
              </li>
          </ul>   
                <br>
                <br>
            <div class="stats-grid">
                <div class="stat-item" data-aos="fade-up" data-aos-delay="300">
                    <div class="stat-number fw-bolder" style="font-weight: 900!important;">25+</div>
                    <div class="stat-label fw-bold">Anos de Experiência</div>
                </div>
                <div class="stat-item" data-aos="fade-up" data-aos-delay="350">
                    <div class="stat-number fw-bolder" style="font-weight: 900!important;">500+</div>
                    <div class="stat-label fw-bold">Projetos Completos</div>
                </div>
                <div class="stat-item" data-aos="fade-up" data-aos-delay="400">
                    <div class="stat-number fw-bolder" style="font-weight: 900!important;">98%</div>
                    <div class="stat-label fw-bold">Clientes Satisfeitos</div>
                </div>
            </div>
            </div>
          </div>
        <div class="col-lg-12 order-1 order-lg-2" data-aos="fade-left" data-aos-delay="200">
          <div class="image-section">
            <!-- Container principal com funcionalidades de zoom -->
            <div class="main-image enhanced-zoom-container" 
                data-zoom-type="advanced"
                data-max-zoom="4">
              
              <!-- Imagem principal com versões para diferentes resoluções -->
            <img 
              src="https://res.cloudinary.com/duapi2dif/image/upload/v1772031228/company_pd6qyh.jpg" 
              alt="Construction project showcase" 
              class="img-fluid zoomable-image"
              data-zoom-src="https://res.cloudinary.com/duapi2dif/image/upload/v1772031228/company_pd6qyh.jpg"
              loading="lazy">
              
              <!-- Overlay de interação -->
              <div class="zoom-overlay">
                <div class="zoom-hint">
                  <i class="bi bi-zoom-in"></i>
                  <span>Clique, arraste ou use a roda do mouse</span>
                </div>
              </div>
              
              <!-- Controles flutuantes -->
              <div class="zoom-controls-panel">
                <button class="zoom-btn zoom-in-btn" aria-label="Ampliar" title="Ampliar (Ctrl + +)">
                  <i class="bi bi-plus-lg"></i>
                </button>
                <button class="zoom-btn zoom-out-btn" aria-label="Reduzir" title="Reduzir (Ctrl + -)">
                  <i class="bi bi-dash-lg"></i>
                </button>
                <button class="zoom-btn zoom-reset-btn" aria-label="Resetar zoom" title="Resetar zoom (R)">
                  <i class="bi bi-arrow-counterclockwise"></i>
                </button>
                <button class="zoom-btn zoom-fullscreen-btn" aria-label="Tela cheia" title="Tela cheia (F)">
                  <i class="bi bi-arrows-fullscreen"></i>
                </button>
                <button class="zoom-btn zoom-download-btn" aria-label="Download" title="Download da imagem">
                  <i class="bi bi-download"></i>
                </button>
              </div>
              
              <!-- Indicador de zoom -->
              <div class="zoom-indicator">
                <span class="zoom-percentage">100%</span>
                <div class="zoom-slider-container">
                  <input type="range" class="zoom-slider" min="50" max="400" value="100" step="10">
                </div>
              </div>
              
              <!-- Lente de zoom (hover zoom) -->
              <div class="zoom-lens"></div>
              
            </div>
            
            <!-- Badge original mantido -->
            <div class="floating-badge" data-aos="zoom-in" data-aos-delay="500">
              <div class="badge-content">
                <i class="bi bi-award"></i>
                <div class="badge-text">
                  <span class="badge-title">Qualidade Certificada</span>
                  <span class="badge-subtitle">Since 2014</span>
                </div>
              </div>
            </div>
            
            <!-- Modal para visualização em tela cheia -->
            <div class="fullscreen-zoom-modal">
              <div class="modal-container">
                <div class="modal-header">
                  <button class="modal-close-btn" aria-label="Fechar">
                    <i class="bi bi-x-lg"></i>
                  </button>
                  <div class="modal-title">
                    <h5>Visualização Ampliada</h5>
                    <span class="image-info">Projeto de Construção - Resolução completa</span>
                  </div>
                  <div class="modal-actions">
                    <button class="action-btn rotate-left" title="Girar 90° esquerda">
                      <i class="bi bi-arrow-counterclockwise"></i>
                    </button>
                    <button class="action-btn rotate-right" title="Girar 90° direita">
                      <i class="bi bi-arrow-clockwise"></i>
                    </button>
                    <button class="action-btn download-hd" title="Download HD">
                      <i class="bi bi-cloud-download"></i>
                    </button>
                  </div>
                </div>
                <div class="modal-body">
                  <div class="image-wrapper">
                    <img src="" alt="Visualização em tela cheia" class="fullscreen-image">
                    <div class="drag-handle">
                      <i class="bi bi-arrows-move"></i>
                    </div>
                  </div>
                  <div class="modal-zoom-controls">
                    <button class="modal-zoom-out"><i class="bi bi-dash-lg"></i></button>
                    <input type="range" class="modal-zoom-slider" min="50" max="500" value="100">
                    <button class="modal-zoom-in"><i class="bi bi-plus-lg"></i></button>
                    <span class="modal-zoom-level">100%</span>
                  </div>
                </div>
                <div class="modal-footer">
                  <div class="image-navigation">
                    <button class="nav-btn prev-btn">
                      <i class="bi bi-chevron-left"></i> Anterior
                    </button>
                    <span class="image-counter">1 de 10</span>
                    <button class="nav-btn next-btn">
                      Próximo <i class="bi bi-chevron-right"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <br/>
        <br/>
        <div class="cta-section" data-aos="fade-up" data-aos-delay="450">
            <a href="services.php" class="cta-link">
            Explore nossos serviços
            <i class="bi bi-arrow-right ms-2"></i>
            </a>
        </div>
      </div>

   
    </section><!-- /About 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/html-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>
  <script src="../assets/js/sobre/zoom_img.js"></script>

</body>

</html>