/* ===== Reset ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial,sans-serif; line-height:1.6; background:#f5f5f5; color:#333; }

/* ===== Header ===== */
header {
  background: linear-gradient(rgba(3,92,40,0.85), rgba(0,122,51,0.85)), url('imagex/imgx5.jpeg') center/cover no-repeat;
  padding:1.5rem 2rem;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
.header-content { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; }
.logo { position:relative; font-size:2rem; color:#fff; font-weight:bold; }
.logo .sun {
  position:absolute; width:50px; height:50px;
  background:radial-gradient(circle,#FFD700,#FFA500);
  border-radius:50%; top:50%; left:-70px; transform:translateY(-50%);
  z-index:-1; box-shadow:0 0 15px rgba(255,215,0,0.5);
}

/* ===== Menu ===== */
nav ul { list-style:none; display:flex; gap:2rem; }
nav li { position:relative; }
nav a { color:#fff; text-decoration:none; font-weight:600; padding:0.5rem 0; position:relative; transition:color 0.3s; }
nav a::after { content:''; position:absolute; left:0; bottom:-5px; width:0%; height:2px; background:#FFD700; transition:0.3s; }
nav a:hover::after { width:100%; }
nav a:hover { color:#FFD700; }
.menu-toggle { display:none; font-size:1.8rem; color:#fff; cursor:pointer; transition:transform 0.3s; }
.menu-toggle:hover { transform:rotate(90deg); }

@media(max-width:768px){
  .menu-toggle{ display:block; }
  nav ul{ flex-direction:column; position:absolute; top:100%; right:0; width:220px; background:rgba(0,122,51,0.95); display:none; padding:1rem 0; border-radius:0 0 8px 8px; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
  nav ul.show{ display:flex; animation:slideDown 0.4s ease-out forwards; }
  nav li{text-align:center; margin:0.5rem 0;}
}
@keyframes slideDown{0%{opacity:0; transform:translateY(-20px);}100%{opacity:1; transform:translateY(0);}}

/* ===== Hero ===== */
.hero { text-align:center; padding:3rem 1rem; background:url('imagex/imgx22.jpeg') center/cover no-repeat; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.5);}
.hero h2{ font-size:2.5rem; margin-bottom:1rem; }
.hero p{ font-size:1.2rem; }

/* ===== Features (index) ===== */
.features { display:flex; gap:2rem; justify-content:center; padding:2rem 1rem; }
.feature { background:#fff; border:1px solid #ddd; padding:1.5rem; flex:1; min-width:250px; text-align:center; border-radius:8px; transition: transform 0.3s, box-shadow 0.3s;}
.feature:hover { transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,0,0,0.2); }

/* ===== Serviços circulares (nserv) ===== */
.services { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; padding:2rem 1rem; }
.service { width:200px; height:200px; border-radius:50%; position:relative; text-align:center; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; color:#fff; font-weight:bold; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.2); transition:transform 0.3s, box-shadow 0.3s; }
.service:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.service::before { content:''; position:absolute; inset:0; background-color:rgba(0,0,0,0.35); z-index:0; }
.service h3, .service p { position:relative; z-index:1; margin:0.2rem 0; }

.service.residencial { background-image:url('imagex/imgx10.jpeg'); background-size:cover; background-position:center; }
.service.comercial { background-image:url('imagex/imgx13.jpeg'); background-size:cover; background-position:center; }
.service.manutencao { background-image:url('imagex/imgx2.jpeg'); background-size:cover; background-position:center; }

/* ===== Contato ===== */
.contact-form { display:grid; gap:1rem; max-width:500px; margin:0 auto; padding:2rem 1rem; }
.contact-form h2{text-align:center; margin-bottom:1rem;}
.contact-form label{ font-weight:bold; }
.contact-form input, .contact-form textarea { width:100%; padding:0.5rem; border:1px solid #ccc; border-radius:4px; }
.contact-form button{ background:#007a33; color:#fff; border:none; padding:0.75rem; cursor:pointer; border-radius:4px; transition: background 0.3s; }
.contact-form button:hover{ background:#03461f; }

/* ===== Footer ===== */
footer { background:#0f0f0f; color:#fff; text-align:center; padding:1rem; margin-top:2rem; }