@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

main {
  margin: 2rem 5rem;
}

.branding {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.branding-phrase .bp-bark-digital-marketing,
.branding-phrase .bp-message,
.branding-phrase .bp-platforms {
  font-family: "Poppins", sans-serif;
}

.branding-phrase .bp-bark-digital-marketing {
  padding: 1rem;
  font-size: 2.5rem;
  font-weight: 600;
  color: black;
}

.branding-phrase .bp-message {
  padding: 0 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #324158;
}

.branding-phrase .bp-platforms {
  padding: 0.5rem 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #32418d;
}

.bark-advantages {
  padding: 2rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.bark-advantages .advantage {
  justify-items: center;
}

.advantage h2 {
  padding: 0.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}

.advantage p {
  padding: 1rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  color: #324158;
  text-align: justify;
}

/* Small Screens */
@media screen and (max-width: 576px) {
  .branding {
    flex-direction: column;
  }

  .branding-phrase {
    display: flex;
    flex-direction: column;
  }

  .branding-phrase h1, .branding-phrase div {
    text-align: center;
  }

  .bark-advantages {
    flex-direction: column;
  }

  .advantage {
    margin: 0rem;
    width: 80vw;
  }
}