@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Montserrat:wght@500&display=swap");

:root {
  --purple: #69384b;
  --yellow: #f8be7a;
  --white: #ffffff;
  --headers: "Merriweather";
  --headers-size: 24px;
  --content: "Montserrat";
  --content-size: 18px;
}

*,
*:before,
*:after {
  /* margin: 0 !important;
  padding: 0 !important; */
  list-style: none;
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

/* .banner {
  height: 43vh;
  background-image: url("../assets/img/Banner_sm_md.jpg") !important;
} */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  text-align: justify;
  max-width: 100% !important;
}

a {
  text-decoration: none !important;
  color: var(--yellow) !important;
}

#toggleBtn {
  display: block;
  position: absolute;
  height: 30px;
  top: 21px;
  right: 10px;
  transition: display 0.3s;
  cursor: pointer;
}

#toggleBtn span {
  background-color: #f8be7a;
  height: auto;
}

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

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

.text-yellow {
  color: var(--yellow);
}

.text-purple {
  color: var(--purple);
}

.toggleBtn {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .col-md-6 {
    width: 49% !important;
    margin-inline: 1px !important;
  }
}

/* @media screen and (max-width: 767px) {
} */

#btn-back-to-top {
  position: fixed;
  bottom: 50px;
  right: 20px;
  display: none;
  background-color: var(--purple);
  color: var(--yellow);
  border: none;
  box-shadow: 1px 1px 1px 1px #342129;
  border-radius: 50%;
}