/* Buttons */
.btn {
  background-color: var(--clr-primary);
  color: var(--clr-white);
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  border: 1px solid var(--clr-primary);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  transition: all 0.3s ease-in-out;
}
.btn.btn-outline {
  color: var(--clr-primary);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-primary);  
}
.btn.btn-outline:hover {
  color: var(--clr-white);
  background-color: var(--clr-primary);
}
.btn.btn-black{
  color: var(--clr-white);
  background-color: var(--clr-black-5);
  border: 1px solid var(--clr-black-5);
  white-space: nowrap;
}
.btn.btn-white{
  color: var(--clr-paragraph);
  background-color: transparent;
  border: 1px solid #E2E2E2;
}
.btn.btn-pill {
  border-radius: 50px;
  height: 3.5rem;
  padding-inline-end: 0.5rem;
  font-size: var(--fs-20);
}
.btn.btn-link {
  background-color: transparent;
  color: var(--clr-black-primary);
  padding: 0;
  border: none;
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
  display: inline-flex;
  position: relative;
}
.btn.btn-link::after {
  content: "";
  position: absolute;
  inset-inline-end: -7px;
  width: 2.3125rem;
  height: 2.3125rem;
  border-radius: 50%;
  background-color: var(--clr-primary);
  opacity: 20%;
  /* transition: all 0.3s ease-in-out; */
}

/* Accordion */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.accordion-item {
  border: none;
  border-radius: 16px;
  padding: .25rem;
  box-shadow: 0 0 4px 0 #00000040;
}
.accordion-item:has(.accordion-button[aria-expanded="true"]) {
  box-shadow: 0 0 4px 0 #00000014, 0 8px 12px 6px #0000000a;
}
.accordion-button{
  color: var(--clr-black-primary);
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
  line-height: 1.6875rem;
}
.accordion-button[aria-expanded="true"] {
  background-color: transparent;
}
.accordion-body{
  color: var(--clr-black-5);
  padding-top: 0;  
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
  line-height: 2.125rem;
}
.accordion-button::after{
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath d='M3.27604 20.5498C2.88021 20.5498 2.48438 20.404 2.17188 20.0915C1.56771 19.4873 1.56771 18.4873 2.17188 17.8831L19.2552 0.799805C19.8594 0.195638 20.8594 0.195638 21.4635 0.799805C22.0677 1.40397 22.0677 2.40397 21.4635 3.00814L4.38021 20.0915C4.08854 20.3831 3.69271 20.5498 3.27604 20.5498Z' fill='%23C4384F'/%3E%3Cpath d='M12.021 21.8677H1.9585C1.10433 21.8677 0.395996 21.1593 0.395996 20.3052V10.2427C0.395996 9.38851 1.10433 8.68018 1.9585 8.68018C2.81266 8.68018 3.521 9.38851 3.521 10.2427V18.7427H12.021C12.8752 18.7427 13.5835 19.451 13.5835 20.3052C13.5835 21.1593 12.8752 21.8677 12.021 21.8677Z' fill='%23C4384F'/%3E%3C%2Fsvg%3E");
  width: 1.5625rem;
  height: 1.5625rem;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.accordion-button[aria-expanded="true"]::after{
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath d='M3.27604 20.5498C2.88021 20.5498 2.48438 20.404 2.17188 20.0915C1.56771 19.4873 1.56771 18.4873 2.17188 17.8831L19.2552 0.799805C19.8594 0.195638 20.8594 0.195638 21.4635 0.799805C22.0677 1.40397 22.0677 2.40397 21.4635 3.00814L4.38021 20.0915C4.08854 20.3831 3.69271 20.5498 3.27604 20.5498Z' fill='%23FFFFFF'/%3E%3Cpath d='M12.021 21.8677H1.9585C1.10433 21.8677 0.395996 21.1593 0.395996 20.3052V10.2427C0.395996 9.38851 1.10433 8.68018 1.9585 8.68018C2.81266 8.68018 3.521 9.38851 3.521 10.2427V18.7427H12.021C12.8752 18.7427 13.5835 19.451 13.5835 20.3052C13.5835 21.1593 12.8752 21.8677 12.021 21.8677Z' fill='%23FFFFFF'/%3E%3C%2Fsvg%3E");
  background-color: var(--clr-primary);
  border-radius: 50%;
  transform: rotate(90deg);
}

/* Pagination */
.pagination{
  gap: .25rem;
}
.page-link{
  color: #50637B;
  background-color: #FBFBFB;
  font-weight: var(--fw-600);
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: none;  
}
.page-item.active .page-link{
  color: var(--clr-white);
  background-color: var(--clr-primary);
}

@media screen and (max-width: 575px) {
  .btn.btn-black, .btn.btn-white{
    width: fit-content;
  }
}