.speeddial {
  align-items: center;
  flex-direction: column-reverse;
  display: flex;
  z-index: 101;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  line-height: 46px;
  border-radius: 50%;
}
.speeddial-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #152136;
  color: #fff;
  border-radius: 50%;
  border: 2px solid #586376;
  font-size: 50px;
  transition: 0.3s all ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.speeddial-button:active {
  background-color: #116f9d;
  transform: scale(0.9);
  transition: all 0.3s ease-in-out;
}

.effect-bg-1:hover{
  background-color: #116f9d;
  color: #fff;
}

.speeddial-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: top 0s linear 0.2s;
  pointer-events: none;
}
.speeddial-item {
  transform: scale(0);
  opacity: 0;
  margin: 0.25rem 0;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
  will-change: transform;
}
.speeddial-action {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #152136;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.speeddial-opened .speeddial-list {
  pointer-events: auto;
}
.speeddial-opened .speeddial-item {
  transform: scale(1);
  opacity: 1;
}
.speeddial-opened .speeddial-button {
  transform: rotate(180deg);
}