.fixed-button-container {
  position: fixed;
  z-index: 99999;
  bottom: 1.5rem;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 17px;
  transition: right 0.3s ease-in-out;
}

.fixed-button-container.scrolled {
  right: -100px;
  transition: right 0.3s ease-in-out;
}

.donate-button,
.volunteer-button {
  position: relative;
  width: 171px;
  height: 126px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: bottom -1px right 12px;
  box-shadow: 0px 5px 8px #00000029;
  border: none;
  border-radius: 69px 0 0 69px;
  background-size: 98px auto;
}

.donate-button {
  background-color: #f76f01;
  background-image: url('../img/icon/donateIcon.png');
}

.volunteer-button {
  background-color: #f7941e;
  background-image: url('../img/icon/volunteerIcon.png');
}

.donate-button:hover {
  width: 190px;
  transition: width 0.3s ease-in-out;
}

.volunteer-button:hover {
  width: 190px;
  transition: width 0.3s ease-in-out;
}

.donate-button-text,
.volunteer-button-text {
  position: absolute;
  top: 20px;
  right: 7px;
  display: flex;
  justify-content: space-around;
  width: 129px;
  height: 41px;
  background: url(../img/icon/xs.svg) no-repeat top center;
}

.donate-button-text span,
.volunteer-button-text span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #f76f01;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  margin-left: 2px;
}
@media (max-width: 1440px) {
  .donate-button, .volunteer-button{
    width: 151px;
    height: 86px;
  }
}
@media (max-width: 1024px) {
  .donate-button, .volunteer-button{
    width: 141px;
    height: 76px;
  }
}
@media (max-width: 991.98px) {
  .fixed-button-container {
    display: none;
  }
}