.cities-we-are-in {
  display: flex;
  flex-direction: column;
  padding-top: 8rem;
  padding-bottom: 4rem;
}

.cities-we-are-in .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 2rem;
  margin-bottom: 2rem;
}

.cities-we-are-in .header .details .title-pin {
  color: #53bf38;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 3.138rem;
  margin-bottom: 2rem;
  text-align: center;
}

.cities-we-are-in .header .details .description {
  font-weight: 400;
  color: #7d7d7d;
  font-size: 1rem;
  line-height: 1.255rem;
}

.cities-we-are-in .cities-cards {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 1rem;
  margin-bottom: 8rem;
  max-width: 99%;
}

.cities-we-are-in .cities-cards .card {
  padding: 2rem 2rem;
  /* horizontal-offset vertical-offest blurSize spread color */
  box-shadow: 0 8px 24px 0 rgba(0, 149, 70, 0.21);
}

.cities-we-are-in .cities-cards .card:nth-child(2), .card:nth-child(4) {
  background-color: #f1ffee;
  padding-top: 4rem;
  flex-grow: initial;
  height: 15rem;
}

.cities-we-are-in .cities-cards .card .title {
  color: #009546;
  font-size: 1.625rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.cities-we-are-in .cities-cards .card:nth-child(1),
.cities-we-are-in .cities-cards .card:nth-child(3) {
  margin-top: 3rem;
}

.cities-we-are-in .list-resto {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}

.cities-we-are-in .list-resto .title {
  color: #009546;
  font-weight: 400;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.cities-we-are-in .list-resto .description {
  font-weight: 400;
  color: #7d7d7d;
  line-height: 1.255rem;
  margin-bottom: 2rem;
}

.cities-we-are-in .list-resto .description .vv-email a {
  text-decoration: underline;
  color: #009546;
}

.cities-we-are-in .list-resto .join-us {
  padding: 1rem 3rem;
  background-color: #009546;
  /* horizontal-offset vertical-offest blurSize spread color */
  box-shadow: 0 10px 24px 0 rgba(83, 191, 56, 0.36);
  outline: none;
  border: none;
  transition: transform 0.5s ease;
}

.cities-we-are-in .list-resto .join-us:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.cities-we-are-in .list-resto .join-us span {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
}

/* Responsiveness */
@media only screen and (max-width: 600px) {
  .cities-we-are-in {
    padding-top: 6rem;
    position: relative;
  }

  .cities-we-are-in .header .umugongo-1 img,
  .cities-we-are-in .header .umugongo-2 img {
    height: 4rem;
    position: absolute;
    top: 2%;
  }

  .cities-we-are-in .header .umugongo-2 img {
    right: 5%;
  }

  .cities-we-are-in .cities-cards {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 8rem;
  }

  .cities-we-are-in .cities-cards .card {
    padding: 2rem 4rem;
    /* horizontal-offset vertical-offest blurSize spread color */
    box-shadow: 0 8px 24px 0 rgba(0, 149, 70, 0.21);
    width: 50%;
  }

  .cities-we-are-in .list-resto {
    padding: 0 2rem;
  }
}

@media only screen and (max-width: 550px) {
  .cities-we-are-in .header .umugongo-1 img,
  .cities-we-are-in .header .umugongo-2 img {
    height: 3rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
  .cities-we-are-in {
    padding-top: 6rem;
    position: relative;
  }

  .cities-we-are-in .header .umugongo-1 img,
  .cities-we-are-in .header .umugongo-2 img {
    height: 4rem;
    position: absolute;
    top: 2%;
  }

  .cities-we-are-in .header .umugongo-2 img {
    right: 5%;
  }

  .cities-we-are-in .cities-cards {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 8rem;
  }

  .cities-we-are-in .list-resto {
    padding: 0 2rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cities-we-are-in .cities-cards {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem 1rem;
    /* margin-bottom: 8rem; */
  }
  /* 
  .cities-we-are-in .cities-cards .card .shop-image img {
    height: 100%;
    width: 4.6rem;
  }

  .cities-we-are-in .cities-cards .card:nth-child(2) {
    margin-top: 3rem;
  } */

  .cities-we-are-in .list-resto {
    padding: 0 2rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cities-we-are-in .cities-cards .card {
    padding: 2rem 2rem;
  }
}