body {
  font-family: Arial, sans-serif;
}

/* HEADER */
.header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
}


/* COLUNA EMCIMA */
.banner-topo {
  width: 100%;
  display: flex;
  justify-content: center; /* centraliza o anúncio */
  margin-top: 30px;        /* espaço em cima */
}

.anuncio {
  width: 100%;
  max-width: 1400px;       /* espaço branco dos lados */
  height: 200px;
  background-image: url("anuncio.jpg");

  display: flex;
  align-items: center;
  justify-content: center;
}

.menu {
  display: flex;
  gap: 20px;
}

.menu a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
}

/* CONTAINER PRINCIPAL */
.container {
  display: flex;           /* FLEXBOX AQUI */
  gap: 20px;
  padding: 10px;
  max-width: 1300px;
  margin: auto;
}

/* COLUNA ESQUERDA */
.col-esquerda {
  flex: 3;                 /* ocupa mais espaço */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
}

.box{
  background-color: #C71585;
  display:flex;
  gap:20px;
}

.box1{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}

img {
  width: 100%;
  height: auto;
  max-height: 100px;
  border-radius:5px;
}
 
/* COLUNA DIREITA */
.col-direita {
  flex: 3;                 /* ocupa mais espaço */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.col-direita {
  display: flex;
  flex-direction: column;
}

.box2{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}

.box2{
  width: calc(50% - 10px); /* 2 por linha */
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

.card-imagem {
  background-image: url("combustivel.jpg"); /* sua imagem */
  background-size: cover;              /* cobre todo o card */
  background-position: center;
  width: 100%;
  height: 300px;

  display: flex;
  align-items: flex-end;               /* texto embaixo */
}

/* camada escura por cima da imagem */
.overlay {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 15px;
  width: 100%;
}

.overlay h2 {
  font-size: 22px;
}

.overlay p {
  font-size: 14px;
}

















