:root {
  --bg-color-primary: #eef8e7;
  --bg-color-secondary: #e4f1d2;  
  --text-color-dark-green: #099620;
}

body::before {
    display: block;
    content: '';
    height: 60px;
  }

.bg-color-primary {
  background-color: var(--bg-color-primary);
}

.bg-color-secondary {
  background-color: var(--bg-color-secondary);
}

.bg-img {
  background: url('img/bg01.jpg') no-repeat;
}

.w-custom {
  width: 40%;
}

.navbar {
  box-shadow: 0px 20px 20px #eef8e7;
}

.h5-logo {
  font-weight: bold;
  font-size: 1.5em;
  letter-spacing: 2px;
}

.h1-logo {
  color: var(--text-color-dark-green); 

  font-size: 4em;
  font-weight: bolder;
  letter-spacing: 4px;
  text-shadow: 1px 1px 2px #000;
}

.card-title {
  color: var(--text-color-dark-green);
}
.card {
  min-height: 100%;
}

.map-truck {
  max-width: 180px;
}

#map {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

.img-border {
  border: 0px solid #000;
}


.container_1 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 33.3%);
  justify-content: space-around;

  
}

.person {
  display: grid;

  justify-content: space-around;

  border: 1px dashed #ccc;
  background-color: var(--bg-color-secondary);

  font-weight: bold;

  img {
    width: 100px;
    margin: 10px auto;
    border: 2px solid #000;
    border-radius: 50%;
  }

  p {
    text-align: center;
    min-width: 100%;
  }
}



@media (min-width: 768px) {
    .news-input {
      width: 50%;
    }

  }

@media (max-width: 1024px) {
  .nav-link {
    font-size: smaller;
  }
}

@media (min-width: 576px) {
    .h5-logo {
      margin-left: -30px;
    }
  }