/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#1e293b;line-height:1.6;background:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* === Tokens === */
:root{
  --blue:#1e3a5f;
  --blue-light:#2a5a8f;
  --blue-dark:#0f1f35;
  --accent:#3b82f6;
  --gray-50:#f8fafc;
  --gray-100:#f1f5f9;
  --gray-400:#94a3b8;
  --gray-600:#475569;
  --gray-700:#334155;
  --radius:8px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,.1);
}

/* === Layout === */
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}

/* === Nav === */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;transition:box-shadow .2s}
.nav.scrolled{box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:1.25rem;font-weight:700;color:var(--blue)}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--gray-600);transition:color .2s}
.nav-links a:hover{color:var(--blue)}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--blue)}

/* === Buttons === */
.btn{display:inline-block;padding:.75rem 1.75rem;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;border:2px solid transparent;text-align:center}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-light);border-color:var(--blue-light)}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.btn-outline:hover{background:#fff;color:var(--blue)}

/* === Hero === */
.hero {
  background: 
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url('images/hero-steel-fabrication.jpg');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;

  color:#ffffff;
  padding:0 1.5rem;
}
/* ================= HERO CONTENT ================= */

.hero-content{
  width:100%;
  max-width:1200px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  text-align:left;

  padding-left:2rem;
}


.hero h1{
  font-size:3.2rem;
  line-height:1.1;
  letter-spacing:-1px;
  margin-bottom:1rem;

  text-shadow:0 3px 10px rgba(0,0,0,0.8);
}

.hero-subheadline{
  font-size:1.5rem;
  font-weight:500;
  margin-bottom:1rem;
  color:#dbe7f5;

  text-shadow:0 2px 8px rgba(0,0,0,0.7);
}

.hero-supporting{
  font-size:1.1rem;
  line-height:1.7;
  max-width:600px;
  margin-bottom:2rem;

  color:rgba(255,255,255,0.92);
  text-shadow:0 2px 8px rgba(0,0,0,0.7);
}

.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
/* ================= WHATSAPP ================= */
.btn-whatsapp{
  background:#25D366;
  color:#fff;
  padding:1rem 1.6rem;
  border-radius:6px;
  text-decoration:none;
  display:inline-block;

  font-weight:600;

  transition:
    background-color .25s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.btn-whatsapp:hover{
  background:#1ebe5b;

  transform:translateY(-2px);

  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

/* Hero Buttons */
.hero-actions {
  display:flex;
  gap:1rem;
  justify-content:flex-start;
  flex-wrap:wrap;
}


/* Primary Button (Call) */
.hero .btn-primary {
  background-color: #1e3a5f;
  color: #ffffff;
  padding: 0.9rem 1.6rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

/* Outline Button (Quote) */
.hero .btn-outline {
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 0.9rem 1.6rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

/* Hover Effects */
.hero .btn-primary:hover {
  background-color: #16324d;
}

.hero .btn-outline:hover {
  background-color: #ffffff;
  color: #000000;
}
/* === Sections === */
.section{padding:5rem 0}
.section-alt{background:var(--gray-50)}
.section-title{font-size:2rem;font-weight:700;color:var(--blue);text-align:center;margin-bottom:.5rem}
.section-subtitle{text-align:center;color:var(--gray-600);margin-bottom:2.5rem;max-width:560px;margin-left:auto;margin-right:auto}

/* === Cards / Services === */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-icon{font-size:2rem;margin-bottom:.75rem}
.card h3{font-size:1.1rem;color:var(--blue);margin-bottom:.5rem}
.card p{font-size:.9rem;color:var(--gray-600)}
.featured-card{
  border:3px solid #1e3a5f;
  transform:scale(1.03);
}

.featured-card h3{
  color:#1e3a5f;
}
/* === About === */
.about-simple {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.about-content p {
  margin-bottom: 1.2rem;
  color: var(--gray-700);
}

/* === Why === */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center;margin-top:2rem}
.why-number{font-size:2.5rem;font-weight:800;color:var(--blue)}
.why-item p{color:var(--gray-600);font-weight:500}

/* === Gallery === */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* === Products Section === */

.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  margin-top:2rem;
}

.product-category{
  background:#fff;
  border:1px solid var(--gray-100);
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  box-shadow:var(--shadow);
}

.product-category h3{
  color:var(--blue);
  margin-bottom:1rem;
  font-size:1.15rem;
}

.product-category ul{
  list-style:none;
  padding:0;
}

.product-category li{
  padding:.55rem 0;
  border-bottom:1px solid var(--gray-100);
  color:var(--gray-600);
  font-size:.95rem;
}

.product-category li:last-child{
  border-bottom:none;
}
/* ================= TINTED SECTION ================= */

.section-tinted{
  background:#dfeaf7;
}

/* === Placeholder images === */
.placeholder-img{background:var(--gray-100);border:2px dashed var(--gray-400);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--gray-400);font-size:.9rem;font-weight:600;min-height:200px;aspect-ratio:4/3}

/* === Contact === */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact-details{display:flex;flex-direction:column;gap:1.25rem;margin-top:1.5rem}
.contact-item strong{display:block;color:var(--blue);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem}
.contact-item a{color:var(--accent)}
.contact-item a:hover{text-decoration:underline}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.contact-form input,.contact-form textarea{padding:.75rem 1rem;border:1px solid var(--gray-100);border-radius:var(--radius);font-size:.95rem;font-family:inherit;background:var(--gray-50);transition:border-color .2s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}

/* === Footer === */
.footer{background:var(--blue-dark);color:rgba(255,255,255,.7);padding:2.5rem 0;text-align:center;font-size:.9rem}
.footer-inner p+p{margin-top:.25rem}

/* === Mobile === */
@media(max-width:768px){
  .menu-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#fff;padding:1rem 1.25rem;gap:0;box-shadow:var(--shadow)}
  .nav.open .nav-links{display:flex}
  .nav-links li{padding:.65rem 0;border-bottom:1px solid var(--gray-100)}
  .hero h1{font-size:1.85rem}
  .hero{padding:6rem 0 3.5rem}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .about-list{grid-template-columns:1fr}
}
@media(max-width:480px){
  .services-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr}
}
/* ================= WHATSAPP FLOAT ================= */

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  z-index: 999;
  transition: transform .2s;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

.gallery-item{
  text-align:center;
}

.gallery-item p{
  margin-top:.75rem;
  font-weight:600;
  color:#1e3a5f;
}

@media (max-width: 768px){

  .gallery-grid{
    grid-template-columns:1fr;
  }

}