.header-container {
  min-height: 400px;
  background-image: url("../../img/world-bg.png");
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  filter: brightness(0.5);
}

.header {
  width: 90%;
  max-width: 1200px;
  height: 400px;
  display: flex;
  /*background-image: radial-gradient(circle at center, transparent, #0d0d0d);*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white-button);
}
.header-title {
  color: var(--blue-green-light);
  text-align: center;
}

/* SERVICES STYLES*/
main {
  display: flex;
  justify-content: center;
}
.services-container {
  min-height: 100vh;
  width: 90%;
  max-width: 1200px;
}
.service-title {
  color: var(--blue-green-light);
  font-size: 2em;
  font-weight: lighter;
}
.card-service-container {
  width: 100%;
  min-height: 250px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card-service {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  border-radius: 15px;
  box-shadow: var(--shadow-gray);
  cursor: pointer;
}
.card-service p {
  font-size: 1.2em;
  font-weight: lighter;
  text-align: center;
}
.icon-service {
  color: var(--blue-green-light);
  font-size: 4rem;
}
.card-service:hover {
  background-image: linear-gradient(to right, #38c6bc, #01acee);
}
.card-service:hover .icon-service,
.card-service:hover p {
  color: var(--white-button);
}
.service:last-child {
  margin-bottom: 2rem;
}
@media screen and (min-width: 1024px) {
  .service-title {
    font-size: 2.5em;
  }
  .card-service-container {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: auto;
    grid-gap: 10px;
  }
  .card-service {
    margin-right: 1rem;
  }
}