#pre-button {
  position: relative;
  padding: 13px 35px;
  background: #f5ddb7;
  font-size: 17px;
  font-weight: 900;
  color: #181818;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
  transition: all .3s ease-in-out;
}

/* Centering the button on mobile devices */
@media screen and (max-width: 770px) {
  #pre-button {
    position: absolute; /* Change to absolute positioning */
    top: 80%; /* Move it down to the middle of the screen */
    left: 50%; /* Move it right to the middle of the screen */
    transform: translate(-50%, -50%); /* Center the button */
    padding: 13px 25px; /* Adjust padding if needed */
  }
}

.icon-1 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -1;
}

#pre-button:hover {
  padding: 13px 25px;
  border-radius: 8px 8px 24px 24px;
}

#pre-button:hover .icon-1 {
  top: -320%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 200px;
  height: auto;
  animation: inIcon1 1s ease .45s forwards;
}

@keyframes inIcon1 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  25% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(1deg);
  }

  65% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.fil-leaf-1 {
  fill: #7B9B3A;
}