/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* Header */
header { background:#b81717; color:#fff; position:sticky; top:0; z-index:1000; }
.header-inner { max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { font-weight:700; font-size:1.6rem; }
.nav-links { list-style:none; display:flex; gap:22px; }
.nav-links a { color:#fff; text-decoration:none; font-weight:600; transition:color .3s; }
.nav-links a:hover { color:#F39C12; }
.hamburger { display:none; background:transparent; border:none; color:#fff; font-size:1.6rem; cursor:pointer; }
@media (max-width:900px){
  .hamburger{ display:block; }
  .nav { position:fixed; left:0; top:60px; right:0; background:#b81717; max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .nav.open{ max-height:70vh; }
  .nav-links{ flex-direction:column; padding:14px 20px; gap:14px; }
}

/* Hero Section */
.page-hero { background:url('imgs/wall4.jpg') center/cover no-repeat; height:75vh; position:relative; display:flex; justify-content:center; align-items:center; }
.page-hero::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.overlay-content { position:relative; text-align:center; color:white; z-index: 10; }
.overlay-content h1 { font-size:5rem; text-shadow:2px 2px 6px brown; margin-bottom:40px; }
/* Button */
.btn-quote { 
  position: relative;
  z-index: 20;
  cursor: pointer;
  background:#1f1e1e; 
  color:#fff; 
  padding:12px 24px; 
  border-radius:6px; 
  font-weight:700; 
  text-decoration:none; 
  transition:all .3s ease; 
  display:inline-block;
  font-size:1.2rem;
  white-space:nowrap;
}
.btn-quote:hover { 
  background:hwb(14 3% 8% / 0.815); 
  transform:translateY(-2px); 
}

/* Responsive for button */
@media (max-width:600px){
  .btn-quote {
    padding:10px 18px;
    font-size:1rem;
  }
}


/* Main Content */
.container { max-width:1100px; margin:40px auto; padding:0 20px; }
.brick-types h2 { font-size:1.8rem; text-align:center; margin-bottom:22px; }
.brick-list { list-style:disc; display:grid; grid-template-columns:repeat(2, 1fr); gap:12px 40px; max-width:800px; margin:0 auto 20px; padding-left:20px; }
.brick-list li { font-size:1rem; color:#333; transition:.2s; cursor:default; }
.brick-list li:hover { transform:scale(1.05); color:#F39C12; }
.info-paragraph { max-width:800px; margin:0 auto; font-size:1rem; line-height:1.7; color:#444; text-align:center; }

/* Footer */
.site-footer { background:#b81717; color:#fff; padding:40px 20px 20px; }
.footer-content { max-width:1200px; margin:0 auto; display:flex; gap:40px; justify-content:space-between; flex-wrap:wrap; }
.footer-contact h3, .footer-services h3 { color:#F39C12; margin-bottom:12px; }
.footer-contact p a { color:#fff; text-decoration:none; }
.footer-contact p a:hover { color:#F39C12; }
.footer-services ul { list-style:none; padding:0; margin:0; }
.footer-services li { margin-bottom:8px; }
.footer-services a { color:#fff; text-decoration:none; }
.footer-services a:hover { color:#F39C12; }
.footer-bottom { text-align:center; margin-top:22px; padding:14px 0 18px; border-top:1px solid rgba(255,255,255,.15); font-size:.92rem; color:#fff; }

/* Floating Social */
.whatsapp-float, .facebook-float { position:fixed; bottom:30px; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; z-index:10000; transition:opacity .3s; box-shadow:0 3px 10px rgba(0,0,0,.3); text-decoration: none;}
.whatsapp-float{ background:#15e662; left:20px; }
.facebook-float{ background:#3861b9; left:20px; bottom:110px; } /* stacked on mobile */
.whatsapp-float:hover, .facebook-float:hover{ opacity:.8; }

/* Responsive */
@media (max-width:600px){
  .brick-list { grid-template-columns:1fr; padding-left:20px; }
  .info-paragraph { padding:0 10px; }
  .overlay-content h1 { font-size:2.4rem; }
}