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

body {
  font-family: 'Muli', sans-serif;
  text-align: justify;
}

h3 {
  font-size: 38px;
}

p,
li {
  font-size: 20px;
}

strong {
  font-weight: 700;
}

.card-content {
  font-size: 18px;
}

nav {
  margin-bottom: 0 !important;
}
.background_img {
  background-image: url('../images/Charity_home.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.event-img {
  background-image: url('../images/IMG-20210904-WA0000.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  align-items: center;
  justify-content: center;
  height: 80vh;
  width: 100%;
}

.brand-logo img {
  height: 8.5vh;
}

section {
  margin: 50px 0;
}

.section-background .col {
  margin-top: 530px;
  background: rgba(136, 12, 115, 0.53);
  border: 1px solid transparent;
  border-radius: 8px;
}

.section-potential,
.section-events {
  padding: 50px 100px;
}

.section-volunteer {
  padding: 75px 0 25px 0;
}

.section-volunteer p {
  padding: 0 25px;
}

.section-cards {
  padding: 50px 0 15px 0;
}

.section-cards .card {
  padding: 50px 0;
}

.section-serve .background {
  padding: 50px 0;
}

.section-cards .card-title {
  color: #01579b;
}

.section-about .card,
.section-contact .card {
  padding: 50px 0;
  border-radius: 8px;
}

.section-about .card p {
  line-height: 2.3;
}

.section-error .bug {
  transform: rotate(90deg);
  transition: transform 3s ease;
}

.section-error .card {
  padding: 150px 15px;
}

.section-error .card .btn {
  margin-top: 50px;
}

.page-footer .container {
  padding: 20px 0;
}
@media (max-width: 600px) {
  .background_img {
    background-image: url('../images/Charity_home.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    justify-content: center;
    height: 65vh;
    width: 100%;
  }

  .section-background .col {
    margin-top: 274px;
    background: rgba(136, 12, 115, 0.53);
    border: 1px solid transparent;
    border-radius: 8px;
  }

  .section-background .col h3 {
    font-size: 30px;
  }

  .section-background .col p {
    font-size: 1.2rem;
  }

  .section-potential {
    padding: 50px 60px;
  }

  .section-about {
    padding: 0 40px;
  }
}