:root{
  --azul-principal: #0E5FAF;
  --verde-principal: #39A845;
}
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 100%;
    height: auto;
    
}
.topo{
    width: 100%;
    height: 50px;
    background-color: #0E5FAF;
    line-height: 50px;

}
.topo p{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 10px;
    
}
.whatsapp {
  color: #39A845; /* verde */
  font-weight: bold;
}

.numero {
  color: #0E5FAF; /* azul */
}

nav{
    width: 100%;
    height: 100px;
        display: flex;
    justify-content: space-between;
}
.cabecalho{
    width: 100%;
    height: 680px;
    background-image: url('imagens/banner.png');
    background-size: cover;
    background-repeat: no-repeat;

}
.logo{
width: 15%;
height: 100px;
background-color: white;
margin-left: 10px;

}
.logo img{
width: 150px;
height: auto;
}
.menu-mobile{
    display: none;
}
.menu-desktop{
    display: block;
    width: 55%;
    height: 100px;
    background-color: white;
    list-style: none;
    line-height: 100px;
    display: flex;
    justify-content:right;
    
}
.menu-desktop li{
    display: inline-block;
    margin-left: 20px;
    width:70px;
   
}
.menu-desktop li a{
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #0E5FAF;
}
.menu-desktop li a:hover{
    font-weight: bold;
}
.topo-contato{
width: 30%;
height: 100px;
padding: 20px;
}
.topo-contato p{
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.topo-contato button{
    margin-bottom: 10px;
    width: 250px;
    background-color: #39A845;
    border: none;
    border-radius: 20px;
    height: 40px;
}
.topo-contato button a{
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: bold;
}
.conteudo{
width: 100%;
height: auto;
padding-bottom: 10px;
}
.rodape{
    width: 100%;
    height: 100px;
}


.titulo {
  text-align: center;
  font-weight: bold;
  color: #0E5FAF; /* azul */
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 20px;
}

.titulo span {
  display: block;
  color: #0E5FAF;
  position: relative;
    font-family: 'Montserrat', sans-serif;
  font-weight: 800; /* ExtraBold */
}

.titulo span::after {
  content: "";
  display: block;
  width: 50px;           /* tamanho do tracinho */
  height: 4px;           /* espessura */
  background-color: #39A845; /* verde */
  margin: 8px auto 0;    /* centraliza */
  border-radius: 2px;
}
/* Container geral (para alinhar vários cards) */
.cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-bottom: 20px;
  
}
/* Card */
.card {
  display: flex;
  align-items: center;
  gap: 20px;

  width: 380px;
  background: #fff;
  border-radius: 15px;
  padding: 20px;

  border: 1px solid #eee;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    font-family: Arial, Helvetica, sans-serif;
  transition: 0.3s;
}

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

/* Imagem MAIOR */
.card-img {
  width: 150px;      /* 👈 aumentei aqui */
  height: auto;
  flex-shrink: 0;
}

/* Conteúdo */
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Título */
.card-titulo {
  font-size: 16px;
  color: #0E5FAF;
  font-weight: 700;
  line-height: 1.2;
}

.card-titulo span {
  color: #39A845;
  font-size: 18px;
  font-weight: 800;
}

/* Texto */
.card-desc {
  font-size: 13px;
  color: #666;
  margin: 8px 0;
}

/* Lista */
.card-lista {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.card-lista li {
  font-size: 13px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

/* Check verde */
.card-lista li::before {
  content: "✔";
  color: #39A845;
  margin-right: 6px;
}

/* Botão centralizado */
.btn {
  display: block;
  margin: 12px auto 0;   /* 👈 centraliza */
  width: fit-content;

  background: #39A845;
  color: #fff;
  padding: 10px 14px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;

  transition: 0.3s;
}

.btn:hover {
  background: #2e8b38;
}


.comprarconosco {
    background: linear-gradient(to right, #0a2a66, #0d3b8e);
    color: white;
    text-align: center;
    padding: 40px 20px;
}

.comprarconosco h2 {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.itens {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.item {
    width: 23%;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.item:last-child {
    border-right: none;
}

.item img {
    width: 40px;
    margin-bottom: 10px;
}

.item h3 {
    color: #00ff66;
    font-size: 15px;
    margin-bottom: 5px;
    font-family: Arial, Helvetica, sans-serif;
}

.item p {
    font-size: 18px;
    color: #ccc;
    font-family: Arial, Helvetica, sans-serif;
}

.item i {
    font-size: 40px;
    margin-bottom: 10px;
    color: white;
}
.entrega-container {
    display: flex;
    gap: 20px;
    padding: 30px;
    flex-wrap: wrap;
}

.card {
    flex: 1;
    border-radius: 15px;
    padding: 20px;
}

/* CARD ESQUERDO */
.passos {
    background: #f3f3f3;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 300px; /* controla altura do card */
}
/* título */
.passos h3 {
    margin-bottom: 10px;
}

/* área do meio (ícones + textos) */
.steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1; /* faz ocupar o meio */
}

/* botão sempre embaixo */
.btn-whats {
    margin-top: 15px;
}
.numero {
    background: green;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin: 0 auto 5px;
    line-height: 25px;
    font-size: 14px;
}

.step i {
    font-size: 28px;
    color: green;
    margin-bottom: 5px;
}

.seta i {
    font-size: 18px;
    color: #888;
}

/* BOTÃO */
.btn-whats {
    display: inline-block;
    background: green;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
}

/* CARD DIREITO COM IMAGEM */
.entrega {
    position: relative;
    background: url("imagens/mapa.png") no-repeat center;
    background-size: cover;
    min-height: 250px;
}

/* overlay branco */
.entrega::before {
    content: "";
    position: absolute;
    inset: 0;
   
    border-radius: 15px;
}

.entrega .conteudo {
    position: relative;
    z-index: 1;
}

/* LISTA */
.entrega ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.entrega li {
    margin-bottom: 8px;
    color: #0E5FAF;
}

.entrega i {
    color: green;
    margin-right: 5px;
}

/* BOTÃO */
.btn-consulta {
    display: inline-block;
    background: #3f2dbd;
    color: white;
    padding: 8px 15px;
    border-radius: 15px;
    text-decoration: none;
}

.azul {
    color: #1e3a8a; /* azul */
}

.verde {
    color: #16a34a; /* verde */
}


.rodape{
  width: 100%;
  height: 250px;
  background-color: #0E5FAF;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-right: 10px;

}
.card-rodape{
 
  width: 20%;
  height: 230px;
  margin-top: 10px;
  margin-left: 10px;

}
.card-rodape img{
  width: 80%;
  height: auto;
}
.card-rodape p{
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 5px;
  margin-right: 5px;
  color: white;
  line-height: 1.5;
}

.card-rodape h2{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 20px;

}
.card-rodape ul{
   list-style-type: disc; /* circle, disc, none */
  margin-top: 10px;
  color: white;
  margin-left: 15px;
}
.card-rodape li{
  width: 100%;
  height: 30px;
}
.card-rodape li a{
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}
.telefone-rodape{
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}
.endereco-rodape{
    margin-top: 10px;
  margin-bottom: 10px;
}
/* RESPONSIVO */
@media (max-width: 768px) {
    .entrega-container {
        flex-direction: column;
    }
} 
/* Responsivo */
@media (max-width: 500px) {
  .card {
    flex-direction: column;
    text-align: center;
  }

  .card-img {
    width: 140px;
  }
}
@media only screen and (max-width: 520px) {
.menu-desktop{
    display: none;
}
.menu-mobile{
    display: blok;
}

}