body{
margin:0;
font-family:Arial;
background:#0b1f3a;
color:white;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 10%;
background:#08152a;
position:sticky;
top:0;
z-index:1000;
}

.nav a{
color:white;
margin-left:25px;
text-decoration:none;
font-weight:bold;
}

.hero{
position:relative;
height:90vh;
overflow:hidden;
}

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}

.hero-fallback{
display:none;
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}

.hero-overlay{
position:relative;
z-index:2;
text-align:center;
top:40%;
}

.btn{
background:#f2b705;
padding:15px 30px;
text-decoration:none;
color:black;
font-weight:bold;
}

.impact{
padding:80px 10%;
text-align:center;
}

.impact-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
margin-top:40px;
}

.projects-preview{
padding:80px 10%;
text-align:center;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;
}

.project-card{
background:white;
color:black;
overflow:hidden;
}

.project-card img{
width:100%;
}

.project-info{
padding:20px;
}

.map-section{
padding:80px 10%;
text-align:center;
}

#map{
width:100%;
height:500px;
background:#ddd;
}

footer{
text-align:center;
padding:40px;
background:#08152a;
}

@media(max-width:900px){

.impact-grid,
.projects-grid{
grid-template-columns:1fr;
}

.hero-overlay{
top:30%;
}

}

.hero-overlay-dark{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);

}

.sectors{

padding:80px 10%;
text-align:center;

}

.sector-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;

}

.sector-card{

background:#112a4a;
padding:40px;
border-radius:4px;

}

.presence{

padding:80px 10%;
text-align:center;

}

.presence-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
margin-top:40px;

}

.capabilities{

padding:80px 10%;
text-align:center;

}

.capabilities-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
margin-top:40px;

}

.capability-card{

background:#112a4a;
padding:40px;

}

.dashboard{

padding:80px 10%;
text-align:center;
background:#08152a;

}

.dashboard-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;

}

.logo-container{

display:flex;
align-items:center;
gap:15px;

}

.logo-img{

height:40px;

}

.logo-text{

font-weight:bold;
font-size:18px;

}

.portfolio{

padding:80px 10%;
text-align:center;

}

.mega-projects{

padding:80px 10%;
text-align:center;

}

.news{

padding:80px 10%;
text-align:center;

}

.news-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;

}

.news-card{

background:#112a4a;
padding:30px;

}

.documents{

padding:80px 10%;
text-align:center;
background:#08152a;

}

.documents-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;

}

.doc-card{

background:#112a4a;
padding:25px;
text-decoration:none;
color:white;
display:block;

}

.timeline{

padding:80px 10%;
text-align:center;

}

.timeline-container{

display:flex;
justify-content:space-between;
margin-top:40px;

}

.timeline-item{

background:#112a4a;
padding:20px;
width:22%;

}

.leadership{

padding:80px 10%;
text-align:center;

}

.leadership-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;

}

.leader-card{

background:#112a4a;
padding:30px;

}

.reveal{

opacity:0;
transform:translateY(60px);
transition:all 1s ease;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}

.dashboard{

padding:80px 10%;
text-align:center;

}

.dashboard-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
margin-top:40px;

}

.dashboard-card{

background:#112a4a;
padding:30px;

}

.portfolio{

padding:80px 10%;
text-align:center;

}

.portfolio-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.portfolio-card{

position:relative;
overflow:hidden;

}

.portfolio-card img{

width:100%;
display:block;

}

.portfolio-overlay{

position:absolute;
bottom:0;
background:rgba(0,0,0,0.7);
width:100%;
padding:20px;

}

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>SIGSA Group LLC | Strategic Infrastructure</title>

<meta name="description" content="SIGSA Group LLC desarrolla proyectos estratégicos de infraestructura, energía y desarrollo territorial.">

<link rel="icon" href="images/favicon.png">

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<header class="header">

<div class="logo-container">

<img src="images/logo.png" class="logo-img">

<div class="logo-text">SIGSA GROUP LLC</div>

</div>

<nav class="nav">

<a href="index.html" data-es="Inicio" data-en="Home">Inicio</a> <a href="corporate.html" data-es="Corporativo" data-en="Corporate">Corporativo</a> <a href="projects.html" data-es="Proyectos" data-en="Projects">Proyectos</a> <a href="contact.html" data-es="Contacto" data-en="Contact">Contacto</a>

</nav>

<div class="lang-switch">

<button onclick="setLang('es')">ES</button> <button onclick="setLang('en')">EN</button>

</div>

</header>

<section class="hero-parallax">

<video autoplay muted loop playsinline class="hero-video">

<source src="videos/infraestructura.mp4" type="video/mp4">

</video>

<div class="hero-overlay">

<h1 data-es="Infraestructura que impulsa el desarrollo"
data-en="Infrastructure that drives development">

Infraestructura que impulsa el desarrollo

</h1>

<p data-es="Infraestructura • Energía • Desarrollo Territorial"
data-en="Infrastructure • Energy • Territorial Development">

Infraestructura • Energía • Desarrollo Territorial

</p>

</div>

</section>

<section class="portfolio">

<h2 data-es="Portafolio de Proyectos"
data-en="Project Portfolio">

Portafolio de Proyectos

</h2>

<div class="portfolio-filter">

<button onclick="filterProjects('all')">ALL</button> <button onclick="filterProjects('infra')">INFRA</button> <button onclick="filterProjects('energia')">ENERGY</button> <button onclick="filterProjects('territorio')">TERRITORY</button>

</div>

<div class="portfolio-grid">

<div class="portfolio-card infra">

<img src="images/project1.jpg">

<h3>Viaducto Bucaramanga</h3>

</div>

<div class="portfolio-card energia">

<img src="images/project2.jpg">

<h3>Gasificación Regional</h3>

</div>

<div class="portfolio-card territorio">

<img src="images/project3.jpg">

<h3>Macroproyecto Territorial</h3>

</div>

</div>

</section>

<section class="stats">

<div class="stats-grid">

<div>

<h2 class="counter" data-target="1200">0</h2>

<p data-es="Km Infraestructura"
data-en="Km Infrastructure">

Km Infraestructura

</p>

</div>

<div>

<h2 class="counter" data-target="50">0</h2>

<p data-es="Proyectos"
data-en="Projects">

Proyectos

</p>

</div>

<div>

<h2 class="counter" data-target="5">0</h2>

<p data-es="Países"
data-en="Countries">

Países

</p>

</div>

</div>

</section>

<section class="global-map">

<h2 data-es="Presencia Global"
data-en="Global Presence">

Presencia Global

</h2>

<div id="map"></div>

</section>

<footer>

<p>© 2026 SIGSA Group LLC</p>

</footer>

<script src="js/main.js"></script>

</body>

</html>

.documents{

padding:80px 10%;
text-align:center;

}

.documents-grid{

display:flex;
justify-content:center;
gap:30px;
margin-top:40px;

}

.doc-card{

background:#0f2b4d;
padding:25px;
color:white;
text-decoration:none;
transition:0.3s;

}

.doc-card:hover{

background:#1d4a80;
transform:translateY(-5px);

}

.portfolio-card{

position:relative;
overflow:hidden;

}

.portfolio-card img{

width:100%;
transition:0.5s;

}

.portfolio-card:hover img{

transform:scale(1.1);

}

.portfolio-overlay{

position:absolute;
bottom:0;
width:100%;
background:rgba(0,0,0,0.7);
padding:20px;

}