:root {
      --azul: #00A7CB;
      --laranja: #ff7b00;
      --branco: #ffffff;
      --cinza: #f5f5f5;
      --header-h: 70px;
       --roxo: #8000ff;
       --max-width: 1200px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: "Poppins", sans-serif;
    }

    body {
      background: var(--branco);
      color: #333;
      overflow-x: hidden;
    }

    /* HEADER */
    header {
      background: var(--azul);
      color: var(--branco);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 8%;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .logo img {
      height: 36px;
    }

    .logo h1 {
      font-size: 20px;
      font-weight: 600;
    }
    .logo a  {
      position: relative;
      text-decoration: none;
      color: var(--branco);
      
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 24px;
      align-items: center;
    }

    nav ul li {
      position: relative;
      cursor: pointer;
    }

    nav ul li a {
      color: var(--branco);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
    }

    nav ul li a:hover {
      color: var(--laranja);
    }

    /* Submenu desktop */
    nav ul li ul {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--branco);
      border-radius: 6px;
      padding: 8px 0;
      list-style: none;
      min-width: 180px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    nav ul li ul li {
      padding: 10px 16px;
    }

    nav ul li ul a {
      color: var(--azul);
      font-weight: 500;
    }

    nav ul li ul li:hover {
      background: #f0f0f0;
    }

    nav ul li:hover > ul {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-5px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Ícone menu (hambúrguer) */
    .menu-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 5px;
      z-index: 1400;
      transition: transform 0.3s ease;
      position: relative;
    }

    .menu-toggle span {
      background: var(--branco);
      height: 3px;
      width: 25px;
      border-radius: 3px;
      transition: all 0.28s ease;
    }

    .menu-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translateY(8px);
    }
    .menu-toggle.active span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0.6);
    }
    .menu-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translateY(-8px);
    }

    /* HERO */
    .comercio{
      position: relative;
      height: 75vh;
      background: url('../src/servico1.png')
      center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--branco);
      border-bottom-left-radius: 100% 15%;
      border-bottom-right-radius: 100% 15%;
      margin-top: var(--header-h);
    }


    .hero {
      position: relative;
      height: 75vh;
      background: url('../src/b1.jpg')
      center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--branco);
      border-bottom-left-radius: 100% 15%;
      border-bottom-right-radius: 100% 15%;
      margin-top: var(--header-h);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      border-radius: inherit;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 700px;
    }

    .hero-buttons {
      display: flex;
      justify-content: center;
      gap: 16px;
    }

    .hero-buttons a {
      background: var(--laranja);
      color: var(--branco);
      padding: 12px 24px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 600;
      transition: background 0.3s;
    }

    .hero-buttons a:hover {
      background: #ff8f26;
    }
    .hero .wrap{position:relative;z-index:2;max-width:var(--max-width);padding:0 4%}
    .hero h2{font-size:36px;letter-spacing:1px;margin-bottom:2px}
    .hero p{color:rgba(255,255,255,.95);font-size:17px;margin:0}


    /* VALORES */
    .valores {
      text-align: center;
      padding: 100px 8%;
    }

    .valores h2 {
      font-size: 32px;
      color: var(--azul);
      margin-bottom: 40px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 24px;
    }

    .card {
      background: #fff3e6;
      border-radius: 16px;
      padding: 32px 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card i {
      font-size: 40px;
      color: var(--azul);
      margin-bottom: 16px;
    }

    .card h3 {
      color: var(--azul);
      margin-bottom: 12px;
    }
    /*SERVIÇOS */
    .servicos {
      text-align: center;
      padding: 50px 8%;
    }
   .servicos .valores h2, .servicos h2 {
      color: var(--azul);
      font-size: 32px;
      margin-bottom: 40px;
    }
    .servicos .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 24px;
    }
    .servicos .card {
      background: var(--cinza);
      border-radius: 100%;
      padding: 120px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;
    }
    .servicos .card:hover {transform: translateY(-5px);}
    .servicos .card.expanded {background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
    .servicos .card i {
      font-size: 48px;
      margin-bottom: 12px;
      display: block;
      color: var(--laranja);
    }
    .servicos .card h3 {color: var(--azul); margin-bottom: 12px;}
    .servicos .card p {max-height: 60px; overflow: hidden; transition: max-height 0.4s ease;}
    .servicos .card.expanded p {max-height: 300px;}
/* SEÇÃO LOGO + CONTEÚDO ABAIXO DO BANNER */
.hero-content-sobre {
  display: flex;
  gap: 40px;
  padding: 40px 8%;
  align-items: flex-start;
}

.logo-card {
  flex-shrink: 0;
  width: 7cm;
  height: 7cm;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-card img { width: 80%; height: auto; }

.hero-content-sobre .text {
  flex: 1;
}

.hero-content-sobre h2 { font-size: 28px; color: var(--azul); margin-bottom: 16px; }
.hero-content-sobre p { font-size: 16px; line-height: 1.6; color: #333; }
/* SEÇÃO SERVIÇOS */
.servicos {
  background: #e6f0ff;
  padding: 80px 8%;
  text-align: center;
}

.servicos p { max-width: 900px; margin: 0 auto 40px; font-size: 16px; }

.servicos-icons {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.servicos-icons i {
  font-size: 2rem;
  width: 4cm;
  height: 4cm;
  background: var(--laranja);
  color: var(--branco);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}

.servicos-icons i:hover { transform: scale(1.1); }

/* MISSÃO, VISÃO, VALORES HORIZONTAIS */
.mvv {
  background: var(--cinza);
  padding: 80px 8%;
  display: flex;
  gap: 24px;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}

.mvv-card {
  flex: 1;
  min-width: 250px;
  background: var(--branco);
  border-radius: 16px;
  padding: 32px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
  position: relative;
}

.mvv-card:hover { transform: scale(1.05); }
.mvv-card h3 { margin-bottom: 12px; font-size: 20px; color: var(--azul); }
.mvv-card p { font-size: 16px; line-height: 1.6; text-align: center; }

/* Bordas coloridas inferiores */
.mvv-card.missao { border-bottom: 6px solid var(--azul); }
.mvv-card.visao { border-bottom: 6px solid var(--laranja); }
.mvv-card.valores { border-bottom: 6px solid var(--roxo); }

/* CONTRATAR AGORA */
.contratar {
  background: var(--branco);
  padding: 80px 8%;
  text-align: center;
}

.contratar-card {
  display: inline-block;
  background: var(--branco);
  padding: 40px 60px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.contratar-card button {
  background: var(--azul);
  color: var(--branco);
  padding: 14px 32px;
  border-radius: 30px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.contratar-card button:hover { background: #003d80; }

/* container helper */
.container{max-width:var(--max-width);margin:0 auto;padding:40px 5%}

/* intro block */
.intro{background:var(--branco);padding:36px 0 28px}
.intro .title{font-weight:700;color:var(--azul);margin-bottom:14px}
.intro p{color:#4b5563;max-width:900px;margin-bottom:12px;font-size:15px}
.intro small{display:block;color:#6b7280;margin-top:6px;font-size:13px}

/* partner logos */
.partners-row{display:flex;align-items:center;justify-content:center;gap:36px;padding:30px 0;flex-wrap:wrap;background:linear-gradient(180deg,#fff,#fbfdff)}
.partner{display:flex;align-items:center;justify-content:center;width:210px;height:70px;opacity:.98}
.partner img{max-width:100%;max-height:100%;object-fit:contain}

/* gallery mosaic */
.gallery-section{background:var(--cinza);padding:48px 0}
.gallery-inner{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;gap:14px;max-width:var(--max-width);margin:0 auto;padding:0 4%}
.gallery-inner img{width:100%;height:100%;object-fit:cover;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.gallery-caption{max-width:var(--max-width);margin:22px auto 0;padding:0 4%;color:#374151;font-size:14px}

/* three thumbnails row */
.thumb-row{max-width:var(--max-width);margin:26px auto;padding:0 4%;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.thumb{width:220px;height:140px;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.thumb img{width:100%;height:100%;object-fit:cover}

/* CTA white centered */
.cta-ask{max-width:var(--max-width);margin:48px auto;padding:0 4%;display:flex;justify-content:center}
.cta-box{width:100%;max-width:820px;background:#fff;padding:22px;border-radius:10px;box-shadow:0 14px 40px rgba(2,6,23,0.12);display:flex;gap:18px;align-items:center;justify-content:space-between}
.cta-box p{margin:0;color:#374151}
.cta-box .btn{background:var(--laranja);color:#fff;border:none;padding:10px 18px;border-radius:26px;font-weight:700;cursor:pointer}

/* policy band */
.policy{background:#374151;color:var(--branco);padding:48px 0;text-align:center;position:relative;overflow:hidden}
.policy .inner{max-width:var(--max-width);margin:0 auto;padding:0 4%}
.policy .icon-circle{width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,0.06);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 16px}
.policy h4{margin:6px 0 8px;color:#fff;font-size:18px}
.policy p{max-width:900px;margin:0 auto;color:rgba(255,255,255,0.94);font-size:14px}

/* descrição entre política e footer */
.footer-desc{background:#f9fafb;padding:28px 4%;text-align:center;color:#374151;font-size:14px}
.footer-desc p{max-width:900px;margin:0 auto;line-height:1.6}

 /* CONTACT SECTION */
    .contact-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      padding: 80px 8%;
    }

    .contact-left img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }

    .contact-left p {
      margin-top: 16px;
      font-size: 16px;
      line-height: 1.6;
    }

    .contact-form {
      background: var(--cinza);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }

    .contact-form h3 {
      color: var(--azul);
      margin-bottom: 20px;
    }

    .contact-form select,
    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 14px;
      margin-bottom: 16px;
      border-radius: 10px;
      border: 1px solid #ccc;
      outline: none;
      font-size: 15px;
    }

    .contact-form textarea {
      height: 120px;
      resize: none;
    }

    .contact-form button {
      width: 100%;
      padding: 14px;
      background: var(--laranja);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 18px;
      cursor: pointer;
      font-weight: bold;
      transition: .3s;
    }

 .contact-form button:hover {
      background: var(--azul);
    }



    /* FOOTER */
    footer {
      background: var(--azul);
      color: var(--branco);
      text-align: center;
      padding: 80px 8%;
      border-top-left-radius: 100% 20%;
      border-top-right-radius: 100% 20%;
    }

    footer p {
      font-size: 14px;
    }

    /* ===== MOBILE (menu lateral) ===== */
/* MOBILE */
@media (max-width: 768px) {
  header { padding: 14px 6%; }
  .menu-toggle { display: flex; }
  nav ul { flex-direction: column; position: fixed; top:0; right:-100%; width:72%; height:100%; background: var(--azul); padding-top: calc(var(--header-h)+20px); transition: right 0.36s cubic-bezier(0.2,0.9,0.3,1); box-shadow: -6px 0 18px rgba(0,0,0,0.18); gap:0; z-index:1300;}
  nav ul.show { right:0; }
  nav ul li { width:100%; text-align:left; padding:10px 20px; border-bottom: 1px solid rgba(255,255,255,0.05);}
  nav ul li a { display:block; font-size:16px; padding:8px 0; }
  nav ul li ul { position: static; display:none; margin:6px 0 10px 0; padding:8px 12px; background: var(--branco); border-radius:8px; }
  nav ul li.active > ul { display:block; }
  nav ul li ul li a { color: var(--azul); }
  .hero-content-sobre { flex-direction: column; text-align: center; gap:20px; }
  
   
     .contact-container {
        grid-template-columns: 1fr;
      }
}